test-styl/_ui.styl
/**
* @desc all of our UI elements in one svg
* @TODO i need to generate a new svg and then clean all this up
*/
/**
* like col, this class must be applied to all ui elements as a base
* then we use the other classes to pick our icons out
*/
.ui
transition( opacity, $fast, false )
background-image url( '../images/ui-dist/ui-dist-sprite.png' )
background-image url( '../images/ui-dist/ui-dist-sprite.svg' )
background-size auto 140px // the height of our svg as auto generated
display inline-block
height 30px
width 30px
&:hover
cursor pointer
opacity 1
&.ui-large
background-size auto 230px
size 50px
&.ui-big
size 60px
// sometimes we add this to change the icon to an x
&.ui-close
background-position -315px 0
// padding for our 60px ui elements, the actual element is still 30px
.ui-big
background-color $white // lets do it with classes!
background-position $gutter-med $gutter-med
padding $gutter-med 0 // lets do it with classes!
.ui
width 58px
// da arrows
.ui-arrow
background-position -55px 0
&.reverse
background-position 0 0
// @TODO make this more difficult to read
&.left,
.left &
background-position -100px 0
&.ui-big
background-position -99px $gutter-med
.ui-big &
background-position -99px 0
&.ui-big
background-position -55px $gutter-med
.ui-big &
background-position -55px 0
// the menu icon (9 boxes, 20px)
.ui-boxes
background-position -450px 0
&.reverse
background-position -100px 0
// close icon X
.ui-close
background-position -315px 0
&.reverse
background-position -365px 0
&.ui-large
background-position -689px 0
&:hover
opacity .5
// close icon (X)
.ui-close-circ
background-position -210px 0 //2796px 0// -210px 0
&.ui-big,
.ui-big &
background-position -196px 0
// comments bubble
.ui-comments
background-position -2345px 0
&:hover,
&.active
background-position -1400px 0
&.ui-big
background-position -2345px $gutter-med
// used by ui-photo and ui-illo
.ui-credit
size 18px
// comments bubble
.ui-comments
background-position -2345px 0
&:hover,
&.active
background-position -1400px 0
&.ui-big
background-position -2345px $gutter-med
// facebook
.ui-fb,
.ui-facebook
background-position -1715px 0
&:hover,
&.active
background-position -2450px 0
&.ui-big
background-position -1715px $gutter-med
// google plus
.ui-goog,
.ui-googleplus
background-position -2835px 0
// camera credit icon
.ui-illo
background-position -3163px 0
// info icon (i in a circle)
.ui-info
background-position -757px 0
.ui-big &
background-position -756px 0
// instagram icon
.ui-insta,
.ui-instagram
background-position -2909px 0
// current logo
.ui-logo
background-position -2695px 0
size 104px 20px
&:hover
opacity .5
// white version
&.reverse
background-position -2555px 0
&.ui-big
@media $mob
width 104px
@media $mob-plus
background-position -3945px 0
background-size auto 205px
width 155px
#global-footer &
height 32px
// email
.ui-mail,
.ui-public-email
background-position -1505px 0
&:hover,
&.active
background-position -1610px 0
&.ui-big
background-position -1505px $gutter-med
// see more icon (> in a circle, used to be + in a circle)
.ui-more
background-position -1800px 0
// pinterest
.ui-pint
background-position -1925px 0
&:hover,
&.active
background-position -2030px 0
&.ui-big
background-position -1925px $gutter-med
// camera credit icon
.ui-photo
background-position -3124px 0
// search icon (20px)
.ui-search
background-position -623px 0
&.reverse
background-position -580px 0
// social is slightly different size
.ui-social
display block
left -1px // sometimes it needs to be nudged over
size 50px
// for 20px ui elements
.ui-sm
background-size auto 90px
height 20px
width 20px
// tumblr
.ui-tumblrs
background-position -2982px 0
// twitter
.ui-twit,
.ui-twitter
background-position -2240px 0
&:hover,
&.active
background-position -2135px 0
&.ui-big
background-position -2240px 0
// youtube
.ui-youtube
background-position -3051px 0
// below are the styles for the nav icons
// not svgs... no retina, 2 sizes
.icon,
.sm-icon
background-image url( '../images/nav-icons-dist/sprite.png' )
/**
* base icon. 72px. see nav for examples
* these are the new icons we just got, they're not svgs yet :(
*/
.icon
size 72px
&.business
sprite-position( $business-white )
@extends $icon
.category.category-business &,
.primary-category-business &,
.nav-business:hover &
sprite-position( $business-color )
&.design
sprite-position( $design-white )
@extends $icon
.category.category-design &,
.primary-category-design &,
.nav-design:hover &
sprite-position( $design-color )
&.entertainment
sprite-position( $entertainment-white )
@extends $icon
.category.category-entertainment &,
.primary-category-entertainment &,
.nav-entertainment:hover &
sprite-position( $entertainment-color )
&.gear
sprite-position( $gear-white )
@extends $icon
.category.category-gear &,
.primary-category-gear &,
.nav-gear:hover &
sprite-position( $gear-color )
&.science
sprite-position( $science-white )
@extends $icon
.category.category-science &,
.primary-category-science &,
.nav-science:hover &
sprite-position( $science-color )
&.security
sprite-position( $security-white )
@extends $icon
.category.category-security &,
.primary-category-security &,
.nav-security:hover &
sprite-position( $security-color )
/**
* small icon version, see home prefooter for examples
*/
.sm-icon
size 35px
&.business
sprite-position( $business-white-sm )
@extends $icon
&.active
sprite-position( $business-color-sm )
&.design
sprite-position( $design-white-sm )
@extends $icon
&.active
sprite-position( $design-color-sm )
&.entertainment
sprite-position( $entertainment-white-sm )
@extends $icon
&.active
sprite-position( $entertainment-color-sm )
&.gear
sprite-position( $gear-white-sm )
@extends $icon
&.active
sprite-position( $gear-color-sm )
&.science
sprite-position( $science-white-sm )
@extends $icon
&.active
sprite-position( $science-color-sm )
&.security
sprite-position( $security-white-sm )
@extends $icon
&.active
sprite-position( $security-color-sm )