diff options
Diffstat (limited to 'static/css/_sass/_mixins.scss')
-rw-r--r-- | static/css/_sass/_mixins.scss | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/static/css/_sass/_mixins.scss b/static/css/_sass/_mixins.scss new file mode 100644 index 0000000..01a8d16 --- /dev/null +++ b/static/css/_sass/_mixins.scss @@ -0,0 +1,124 @@ +/* ========================================================================== + Mixins + ========================================================================== */ + +/* + Utility mixins + ========================================================================== */ + +/* clearfix */ +@mixin clearfix { + *zoom: 1; + + &:before, + &:after { + display: table; + content: ""; + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + + &:after { + clear: both; + } +} + +/* Webkit-style focus */ +@mixin tab-focus() { + // Default + outline: thin dotted #333; + // Webkit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +/* Center-align a block level element */ + +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +/* + Typography mixins + ========================================================================== */ + +/* Full-fat vertical rhythm */ +@mixin font-size($size) { + font-size: 0px + $size; + font-size: 0rem + $size / $doc-font-size; + line-height: 0 + round($doc-line-height / $size*10000) / 10000; + margin-bottom: 0px + $doc-line-height; + margin-bottom: 0rem + ($doc-line-height / $doc-font-size); +} + +/* Just the REMs */ +@mixin font-rem($size) { + font-size: 0px + $size; + font-size: 0rem + $size / $doc-font-size; +} + +/* Just font-size and line-height */ +@mixin font($size) { + font-size: 0px + $size; + font-size: 0rem + $size / $doc-font-size; + line-height: 0 + round($doc-line-height / $size*10000) / 10000; +} + +/* Ellipsis */ +@mixin text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* + Visibility + ========================================================================== */ + +/* For image replacement */ +@mixin hide-text() { + text-indent : 100%; + white-space : nowrap; + overflow : hidden; +} + +/* Hide from visual and speaking browsers */ +@mixin hidden() { + display : none !important; + visibility : hidden; +} +.hidden { + display: none; + visibility: hidden; +} + +/* Hide but maintain layout */ +@mixin invisible() { + visibility : hidden; +} + +/* Hidden but available to speaking browsers */ +@mixin visuallyhidden() { + overflow : hidden; + position : absolute; + clip : rect(0 0 0 0); + height : 1px; + width : 1px; + margin : -1px; + padding : 0; + border : 0; +} + +/* Make visuallyhidden focusable with a keyboard */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + position : static; + clip : auto; + height : auto; + width : auto; + margin : 0; + overflow: visible; +}
\ No newline at end of file |