Skip to content

Instantly share code, notes, and snippets.

@angelo

angelo/mixins.sass

Created April 2, 2014 23:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save angelo/04d4367e3d7b2eb1cfb0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save angelo/04d4367e3d7b2eb1cfb0 to your computer and use it in GitHub Desktop.
Download ZIP
These are some mixins used to create some of the complex layouts on http://creditcardreviews.com/. These styles are applied in different contexts across the site. This makes it possible to change things in one place and apply everywhere.
Raw
mixins.sass
// ---------------------------------------------------------------------------
// Imports
@import compass/css3
// ----------------------------------------------------------------------
// Colors
$gray: #979c9e
$blue: #4f95bf
$green: #9ac034
$brown: #99938a
$yellow: #ebb954
$orange: #c85218
$charcoal: #1f2e33
$light-gray: #f2f2f2
// ----------------------------------------------------------------------
// Placeholders
=placeholder-style
color: #b4c0c4
=apply-placeholders
&::-webkit-input-placeholder
+placeholder-style
&:-moz-placeholder
+placeholder-style
&.placeholder
+placeholder-style
.placeholders
+apply-placeholders
input, textarea
@extend .placeholders
// ----------------------------------------------------------------------
// Fonts
=quatro
font-family: 'quatro-slab', sans-serif
=facit
font-family: 'jaf-facitweb', sans-serif
=bernina
font-family: 'jaf-bernina-sans', sans-serif
// ----------------------------------------------------------------------
// Mixins
=logo
+facit
line-height: 1
font-size: 18px
font-weight: 200
strong
display: block
font-weight: 800
=button
width: auto
border: none
cursor: pointer
padding: 0 15px
line-height: 38px
+border-radius(3px)
display: inline-block
background-color: $charcoal
border: 1px solid darken($charcoal, 10%)
&.primary
background-color: #9ac034
&.small
color: #898989
padding: 0 10px
line-height: 28px
background: $light-gray
border: 1px solid darken($light-gray, 10%)
&.feed
float: right
padding-left: 36px
margin-bottom: 40px
background: url(/assets/icons/feed.png) 10px 50% no-repeat
=input
height: 38px
border: none
color: #b4c0c4
color: #4683a9
font-size: 16px
padding: 0 16px
+appearance(none)
line-height: 38px
+border-radius(3px)
vertical-align: middle
border: 1px solid #b4c2cc
&.file
padding: 0
border: none
line-height: 1
=info
width: 14px
height: 14px
cursor: pointer
display: inline-block
background: url(/assets/icons/info.png) 0 0 no-repeat
=article
margin: 30px 0
overflow: auto
background: #fff
header
margin: 0
padding:
top: 20px
bottom: 20px
overflow: hidden
border-bottom: 1px solid #f2f2f2
footer
margin: 0
padding: 0
width: 100%
border: none
background: $light-gray
border-top: 1px solid #e6e6e6
border-bottom: 2px solid #e6e6e6
=card
margin: 0
background: none
+span-columns(6, 12)
&.last
+span-columns(6 omega, 10)
.meta
overflow: hidden
.image
+span-columns(3, 6)
.meta
+span-columns(3 omega, 6)
.star-rating
display: block
.actions, blockquote
+span-columns(6, 6)
p, cite
+span-columns(5, 6)
img
+span-columns(1 omega, 6)
.category
color: #425156
h2
margin: 20px 0
.title
display: block
font-size: 24px
padding: .5em 0
line-height: 1.2
margin-bottom: .5em
border-bottom: 1px solid #f2f2f2
.reviews
color: #b0a99e
.actions
margin: 1.5em 0
font-size: 16px
.button
margin: 0 1.5em 0 0
blockquote
font-size: 15px
dl
+default-list
.offer-rewards
+icons
color: $brown
margin: 1em 0
line-height: 24px
=offer
header
color: $brown
+span-columns(12, 12, 1.5em)
.meta
+span-columns(6, 12)
.rating, .reviews
margin: 5px 0 0 0
display: inline-block
vertical-align: middle
.reviews
line-height: 16px
.extra
+icons
+actions
text-align: right
+span-columns(6 omega, 12)
.saved
font-size: 13px
margin: 0 16px 0 0
display: inline-block
vertical-align: middle
strong
color: $green
display: block
font-size: 24px
font-weight: normal
&.negative strong
color: $orange
section
padding: 20px 0 0 0
+span-columns(9, 12, 1.5em)
.image
+span-columns(3, 10)
.credit-score-data
+highlighted-list
margin: 0 0 20px 0
+span-columns(7 omega, 10)
dt
+span-columns(1, 7)
dd
+span-columns(2, 7)
dd.last
+span-columns(2 omega, 7)
+suffix(2, 7)
.pricing
+span-columns(7 omega, 10)
dt
+span-columns(1, 7)
dd
+span-columns(2, 7)
dd.last
+span-columns(2 omega, 7)
aside
padding: 20px 0 0 0
+span-columns(3 omega, 12, 1.5em)
background: url(/assets/rules/e5.png) 0 100% repeat-y
dt
+span-columns(1, 3)
dd
+span-columns(2 omega, 3)
dd.last
+prefix(1, 3)
footer
background: #fff
+span-columns(12, 12)
.summary
+span-columns(12, 12, 1.5em)
li
list-style: square inside
.pricing
+span-columns(10, 10)
dt
+prefix(2.25)
+span-columns(2, 10)
dd
+span-columns(2, 10)
dd.last
+span-columns(2 omega, 10)
a
clear: left
padding: 10px
color: #5c9fc8
display: block
cursor: pointer
text-align: center
background: $light-gray
.less-details
display: none
=custom-select($lineheight)
.custom-select
position: relative
display: inline-block
vertical-align: middle
line-height: $lineheight
&.open
a
+border-radius(3px 3px 0 0)
a
color: #b2b2b2
display: block
cursor: pointer
+border-radius(3px)
padding: 0 42px 0 10px
line-height: $lineheight
border: 1px solid #b4c2cc
background: #f7f7f7 url(/assets/icons/custom-select.png) 100% 50% no-repeat
.options
left: 0
right: 0
display: none
position: absolute
&.shown
display: block
.option
color: $charcoal
border-top: none
+border-radius(0)
background: #f7f7f7
white-space: nowrap
&:hover
background: #FFF
.last
+border-radius(0 0 3px 3px)
=icons
.icons
display: inline-block
.icon
margin: 0
width: 24px
height: 24px
vertical-align: top
display: inline-block
.rewards
background: url(/assets/icons/rewards.png)
.cash-back
background: url(/assets/icons/cash-back.png)
.travel
background: url(/assets/icons/travel.png)
.miles
background: url(/assets/icons/miles.png)
.hotel
background: url(/assets/icons/hotel.png)
.gas
background: url(/assets/icons/gas.png)
.sign-up
background: url(/assets/icons/signup-bonus.png)
.retail
background: url(/assets/icons/retail-rewards.png)
=actions
.actions
display: inline-block
vertical-align: middle
.button
color: #faf4ed
font-size: 16px
background: $yellow
border-color: darken($yellow, 10%)
&.primary
background: $blue
border-color: darken($blue, 10%)
&.secondary
background: $green
border-color: darken($green, 10%)
.action
clear: both
margin: 20px 0
.primary
color: #faf4ed
display: block
font-size: 16px
background: $blue
text-align: center
border-color: darken($blue, 10%)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment