Skip to content

Instantly share code, notes, and snippets.

@averyvery
Last active December 12, 2015 10:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save averyvery/4760011 to your computer and use it in GitHub Desktop.
Save averyvery/4760011 to your computer and use it in GitHub Desktop.
.shureicons-font {
font-family: 'shureicons';
-webkit-font-smoothing: subpixel-antialiased;
}
@mixin logo($height) {
@include box-sizing(border-box);
display: block;
height: $height;
padding-top: $height;
position: relative;
text-indent: -9999px;
b {
@extend .shureicons-font;
color: #fff;
font-weight: normal;
line-height: 0.2;
left: 0;
position: absolute;
text-indent: 0;
top: 0;
@include transition();
}
}
.header--logo {
@include logo(90px);
float: left;
width: 170px;
}
/* line 33, ../../../../app/assets/stylesheets/all/layouts/_base.css.scss */
.shureicons-font, .header--shop-link:after, .header--logo b, .footer--logo b, .footer--social a:before {
font-family: 'shureicons';
-webkit-font-smoothing: subpixel-antialiased;
}
@averyvery
Copy link
Author

Note that the '.header--logo b' gets added to the icon font rule, even though it's been extended from within a mixin.

@rachelnabors
Copy link

Check it, yo, this doesn't work if you're extending a selector like %shureicons-font

@rachelnabors
Copy link

Actually, this isn't working either:

.buttonery {
cursor: pointer;
font-size: 100%;
padding: .5em 3em .5em 2em;
&:link, &:visited {
text-decoration: none;
}
&:hover, &:active, &:focus {
position: relative;
top: 1px; left: 1px;
}
}

@mixin buttonator($button-color: $blue, $text-color: #fff, $border-radius: .5em) {
@extend .buttonery;
background: $button-color;
@include border-radius($border-radius);
color: $text-color !important;
border: 1px adjust-lightness($button-color, -10%) solid;
@include text-shadow((adjust-lightness($button-color, -10%)) 0 1px 0);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment