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
/*-------------------------------- | |
CSS Triangle | |
used for creating CSS only triangles | |
example: | |
.element { | |
&::before { | |
@include css-triangle(blue, down); | |
} | |
} | |
*/ |
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
/*-------------------------------- | |
Form input placeholder text | |
example: | |
input, | |
textarea { | |
@include input-placeholder { | |
color: $grey; | |
} | |
} | |
*/ |
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 { | |
// padding: 2rem; | |
// font-size: 1.8rem; | |
// @include mq('tablet-wide') { | |
// padding-top: 4rem; | |
// font-size: 2.4rem; | |
// } | |
// } |
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; | |
} |
OlderNewer