This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin push--auto { | |
margin: { | |
left: auto; | |
right: auto; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin pseudo($display: block, $pos: absolute, $content: ''){ | |
content: $content; | |
display: $display; | |
position: $pos; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// use this for creating scalable elements (usually images / background images) that maintain a ratio. | |
// @include responsive-ratio(16,9); | |
@mixin responsive-ratio($x,$y, $pseudo: false) { | |
$padding: unquote( ( $y / $x ) * 100 + '%' ); | |
@if $pseudo { | |
&:before { | |
@include pseudo($pos: relative); | |
width: 100%; | |
padding-top: $padding; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin font-source-sans($size: false, $colour: false, $weight: false, $lh: false) { | |
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; | |
@if $size { font-size: $size; } | |
@if $colour { color: $colour; } | |
@if $weight { font-weight: $weight; } | |
@if $lh { line-height: $lh; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Usage: | |
// .site-header { | |
// z-index: z('site-header'); | |
// } | |
@function z($name) { | |
@if index($z-indexes, $name) { | |
@return (length($z-indexes) - index($z-indexes, $name)) + 1; | |
} @else { | |
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin hardware($backface: true, $perspective: 1000) { | |
@if $backface { | |
backface-visibility: hidden; | |
} | |
perspective: $perspective; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin truncate($truncation-boundary) { | |
max-width: $truncation-boundary; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin antialias { | |
font-smoothing: antialiased; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*-------------------------------- | |
Retina images | |
example: | |
.element { | |
@include retina { | |
background-image: url(../img/background@2x.png); | |
} | |
} | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*-------------------------------- | |
Form input placeholder text | |
example: | |
input, | |
textarea { | |
@include input-placeholder { | |
color: $grey; | |
} | |
} | |
*/ |
OlderNewer