/* * Scut, a collection of Sass utilities * to ease and improve our implementations of common style-code patterns. * v1.4.0 * Docs at http://davidtheclark.github.io/scut */ @mixin scut-clearfix { &:after { content: ""; display: table; clear: both; } } %scut-clearfix { @include scut-clearfix; } @mixin scut-list-unstyled( $no-margin: true ) { list-style-type: none; padding-left: 0; @if $no-margin { margin-top: 0; margin-bottom: 0; } } %scut-list-unstyled { @include scut-list-unstyled(); } // Depends on `list-unstyled` and `clearfix`. @mixin scut-list-floated ( $space: false, $dir: left, $no-margin: true ) { @include scut-list-unstyled($no-margin); @include scut-clearfix; & > li { float: $dir; } @if $space { & > li + li { margin-#{$dir}: $space; } } } %scut-list-floated { @include scut-list-floated; } @function scut-autoOrValue ($val) { @if $val == a or $val == auto { @return auto; } @else { @return $val; } } @mixin scut-coords ( $coordinates: n n n n ) { $top: nth($coordinates, 1); $right: nth($coordinates, 2); $bottom: nth($coordinates, 3); $left: nth($coordinates, 4); @if $top != n { top: scut-autoOrValue($top); } @if $right != n { right: scut-autoOrValue($right); } @if $bottom != n { bottom: scut-autoOrValue($bottom); } @if $left != n { left: scut-autoOrValue($left); } } @function scut-strip-unit ( $num ) { @return $num / ($num * 0 + 1); } // Depends on `scut-strip-unit`. $scut-em-base: 16 !default; @function scut-em ( $pixels, $base: $scut-em-base ) { // $base could be in em or px (no unit = px). // Adjust accordingly to create a $divisor that // serves as context for $pixels. $multiplier: if(unit($base) == em, 16, 1); $divisor: scut-strip-unit($base) * $multiplier; $em-vals: (); @each $val in $pixels { $val-in-ems: (scut-strip-unit($val) / $divisor) * 1em; $em-vals: append($em-vals, $val-in-ems); } @if length($em-vals) == 1 { // return a single value instead of a list, // so it can be used in calculations @return nth($em-vals, 1); } @else { @return $em-vals; } } // Depends on `scut-strip-unit`. $scut-rem-base: 16 !default; @function scut-rem ( $pixels ) { $rem-vals: (); @each $val in $pixels { $val-in-rems: scut-strip-unit($val) / $scut-rem-base * 1rem; $rem-vals: append($rem-vals, $val-in-rems); } @if length($rem-vals) == 1 { // return a single value instead of a list, // so it can be used in calculations @return nth($rem-vals, 1); } @else { @return $rem-vals; } } @mixin scut-border ( $style, $sides: n y ) { @if length($sides) == 2 { @if nth($sides, 1) != n { border-top: $style; border-bottom: $style; } @if nth($sides, 2) != n { border-left: $style; border-right: $style; } } @else if length($sides) == 4 { @if nth($sides, 1) != n { border-top: $style; } @if nth($sides, 2) != n { border-right: $style; } @if nth($sides, 3) != n { border-bottom: $style; } @if nth($sides, 4) != n { border-left: $style; } } @else { @warn "Scut-border requires a $sides argument of 2 or 4 values." } } @mixin scut-circle ( $size, $color: inherit ) { border-radius: 50%; display: inline-block; @if $color == inherit { // If user wants to inherit the color, // take advantage of the fact that border // color defaults to the text color of the element. border-width: $size / 2; border-style: solid; height: 0; width: 0; } @else { // Otherwise, just use background-color. background-color: $color; height: $size; width: $size; } } @mixin scut-color-swap ( $off, $on, $duration: 0, $bg: false ) { $transition-properties: null; $off-is-list: type-of($off) == list; $on-is-list: type-of($on) == list; // If $off IS a list, // assign color and background-color. @if $off-is-list { color: nth($off, 1); background-color: nth($off, 2); $transition-properties: background-color, color; } // If $off IS NOT a list and $bg is TRUE, // assign background-color. @else if $bg and not($off-is-list) { background-color: $off; $transition-properties: background-color; } // If $off IS NOT a list and $bg is FALSE, // assign color. @else { color: $off; $transition-properties: color; } // Only set-up transition if $duration != 0. @if $duration != 0 { transition-property: $transition-properties; transition-duration: $duration; } &:hover, &:focus { // $on is treated the same as $off, above. @if $on-is-list { color: nth($on, 1); background-color: nth($on, 2); } @else if $bg and not($on-is-list) { background-color: $on; } @else { color: $on; } } } @mixin scut-hd-bp ( $ratio: 1.3 ) { @media (-o-min-device-pixel-ratio: ($ratio / 1)), (-webkit-min-device-pixel-ratio: $ratio), (min-resolution: (round(96 * $ratio) * 1dpi)) { @content; } } @mixin scut-hide-visually { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } %scut-hide-visually { @include scut-hide-visually; } @mixin scut-image-replace { text-indent: 102%; white-space: nowrap; overflow: hidden; padding: 0; } %scut-image-replace { @include scut-image-replace; } // Depends on scut-rem and scut-strip-unit @mixin scut-rem-fallback ( $pixels, $property: font-size ) { $px-vals: null; @each $val in $pixels { $val-in-px: scut-strip-unit($val) * 1px; $px-vals: append($px-vals, $val-in-px); } $rem-vals: scut-rem($pixels); #{$property}: $px-vals; #{$property}: $rem-vals; } @mixin scut-reset-border-box { // Make everything a border-box, because why not? html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } } @mixin scut-reset-antialias { // Antialias! body { -webkit-font-smoothing: antialiased; } *, *:before, *:after { -webkit-font-smoothing: inherit; } } @mixin scut-reset-semanticize { // Make headers and semantic, not presentational. h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: normal; margin: 0; } b { font-weight: normal; } } @mixin scut-reset-pointer { // Clickable form elements should have a pointer. label, select, option, button { cursor: pointer; } } @mixin scut-reset-form { fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } } @mixin scut-reset-button { // Reset default button styles, which are never used. button, [type="button"], [type="submit"], [type="reset"] { background: transparent; border: 0; color: inherit; font: inherit; margin: 0; padding: 0; width: auto; -webkit-appearance: none; -webkit-font-smoothing: antialiased; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; &::-moz-focus-inner { padding: 0; border: 0; } } } @mixin scut-reset-paragraph { // Some paragraph margins just get in the way. p:first-of-type { margin-top: 0; } p:last-of-type { margin-bottom: 0; } } @mixin scut-reset-media { // You want these elements fluid, probably. img, video { max-width: 100%; height: auto; } } @mixin scut-reset-figure { // Remove default margins. figure { margin: 0; } } // Call them all, minus exclusions! @mixin scut-reset ($exclude: false) { @if not(index($exclude, border-box)) { @include scut-reset-border-box; } @if not(index($exclude, antialias)) { @include scut-reset-antialias; } @if not(index($exclude, semanticize)) { @include scut-reset-semanticize; } @if not(index($exclude, pointer)) { @include scut-reset-pointer; } @if not(index($exclude, form)) { @include scut-reset-form; } @if not(index($exclude, button)) { @include scut-reset-button; } @if not(index($exclude, paragraph)) { @include scut-reset-paragraph; } @if not(index($exclude, media)) { @include scut-reset-media; } @if not(index($exclude, figure)) { @include scut-reset-figure; } } @mixin scut-selected ( $active: false ) { @if $active { &:hover, &:focus, &:active { @content; } } @else { &:hover, &:focus { @content; } } } @mixin scut-triangle ( $direction: right, $size: 0.75em, $color: inherit ) { display: inline-block; height: 0; width: 0; // For improved appearance in some Webkit browsers -webkit-transform: rotate(360deg); // Set up some variables $width: null; $height: null; $border-widths: null; @if type-of($size) == list { $width: nth($size, 1); $height: nth($size, 2); } @else { $width: $size; $height: $size; } @if ($direction == up) or ($direction == down) { // For up and down, width gets two borders but height only one, // so divide second border-width value by 2 $border-widths: $height ($width / 2); } @else if ($direction == right) or ($direction == left) { // For right and left, height gets two borders but width only one, // so divide first border-width value by 2 $border-widths: ($height / 2) $width; } @else { // For right triangles (the rest), both sides get two borders, // so divide both by 2 $border-widths: ($height / 2) ($width / 2); } border-width: $border-widths; border-style: solid; // STANDARD TRIANGLES @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { border-color: transparent; @if $direction == up { border-bottom-color: $color; border-top-width: 0; } @else if $direction == right { border-left-color: $color; border-right-width: 0; } @else if $direction == down { border-top-color: $color; border-bottom-width: 0; } @else if $direction == left { border-right-color: $color; border-left-width: 0; } } // CORNER TRIANGLES @else if ($direction == top-right) or ($direction == top-left) { border-top-color: $color; border-bottom-color: transparent; @if $direction == top-right { border-left-color: transparent; border-right-color: $color; } @else if $direction == top-left { border-left-color: $color; border-right-color: transparent; } } @else if ($direction == bottom-right) or ($direction == bottom-left) { border-top-color: transparent; border-bottom-color: $color; @if $direction == bottom-right { border-left-color: transparent; border-right-color: $color; } @else if $direction == bottom-left { border-left-color: $color; border-right-color: transparent; } } } %scut-triangle { @include scut-triangle; } @mixin scut-center-absolutely ( $dimensions ) { $width: nth($dimensions, 1); $height: nth($dimensions, 2); position: absolute; @if $width != n { width: $width; left: 50%; margin-left: (-$width / 2); } @if $height != n { height: $height; top: 50%; margin-top: (-$height / 2); } } @mixin scut-center-block ( $max-width: false ) { margin-left: auto; margin-right: auto; @if $max-width { max-width: $max-width; } } %scut-center-block { @include scut-center-block; } @mixin scut-center-transform ( $axis: false // or x or y ) { position: absolute; @if $axis != x { top: 50%; margin-top: auto; margin-bottom: auto; } @if $axis != y { left: 50%; margin-left: auto; margin-right: auto; } $translate-val: null; @if not($axis) { $translate-val: translate(-50%, -50%); } @else if $axis != x { $translate-val: translateY(-50%); } @else if $axis != y { $translate-val: translateX(-50%); } -webkit-transform: $translate-val; -ms-transform: $translate-val; transform: $translate-val; } %scut-center-transform { @include scut-center-transform; } %scut-center-transform-x { @include scut-center-transform(x); } %scut-center-transform-y { @include scut-center-transform(y); } @mixin scut-fill ( $width-height: false ) { position: absolute; left: 0; top: 0; @if $width-height { width: 100%; height: 100%; } @else { right: 0; bottom: 0; } } %scut-fill { @include scut-fill; } @mixin scut-list-custom ( $content: "\2022", $marker-width: 0.75em, $pad: 0, $no-margin: false ) { $content-val: null; $counter: index($content, count); @if $counter { @if length($content) == 3 { $content-val: counter(scutlistcounter, nth($content, 3))nth($content,2); } @else if length($content) == 2 { $content-val: counter(scutlistcounter)nth($content,2); } @else { $content-val: counter(scutlistcounter); } } @else { $content-val: $content; } padding-left: $marker-width + $pad; list-style-type: none; @if $no-margin { margin-top: 0; margin-bottom: 0; } & > li { position: relative; @if $counter { counter-increment: scutlistcounter; } &:before { content: $content-val; display: block; position: absolute; top: 0; left: -$marker-width; width: $marker-width; @content; } } } // Depends on `list-floated`, which depends in turn on `list-unstyled` and `clearfix`. @mixin scut-list-divided ( $divider: "|", $space: 0.5em, $dir: left, $height: false, $no-margin: true ) { @include scut-list-floated($dir: $dir, $no-margin: $no-margin); $pseudo: if($dir == left, 'before', 'after'); // If an explicit height is passed, // things are different: All
  • s // need the pseudo-element (to force height), // but the first's must be hidden. @if $height { & > li { height: $height; } & > li:#{$pseudo} { height: $height; content: $divider; display: inline-block; vertical-align: middle; @content; } & > li:first-child:#{$pseudo} { width: 0; overflow: hidden; } } & > li + li:#{$pseudo} { @if not($height) { content: $divider; display: inline-block; @content; } margin-left: $space; margin-right: $space; } } %scut-list-bar { @include scut-list-divided; } %scut-list-breadcrumb { @include scut-list-divided("/"); } // Depends on `list-unstyled`. @mixin scut-list-inline ( $space: false, $no-margin: true ) { @include scut-list-unstyled($no-margin); & > li { display: inline-block; } @if $space { & > li + li { margin-left: $space; } } } %scut-list-inline { @include scut-list-inline; } // Depends on `list-unstyled`. @mixin scut-list-punctuated ( $divider: ", ", $display: inline, $no-margin: true ) { @include scut-list-unstyled($no-margin); & > li { display: $display; &:not(:last-child):after { content: $divider; } } } %scut-list-comma { @include scut-list-punctuated; } @mixin scut-margin ( $margin ) { @if length($margin) == 1 and $margin != n { margin-top: $margin; margin-right: $margin; margin-bottom: $margin; margin-left: $margin; } @if length($margin) == 2 { $margin-y: nth($margin, 1); $margin-x: nth($margin, 2); @if $margin-y != n { margin-top: $margin-y; margin-bottom: $margin-y; } @if $margin-x != n { margin-left: $margin-x; margin-right: $margin-x; } } @if length($margin) == 3 { $margin-y-top: nth($margin, 1); $margin-x: nth($margin, 2); $margin-y-bottom: nth($margin, 3); @if $margin-y-top != n { margin-top: $margin-y-top; } @if $margin-x != n { margin-right: $margin-x; margin-left: $margin-x; } @if $margin-y-bottom != n { margin-bottom: $margin-y-bottom; } } @if length($margin) == 4 { $margin-top: nth($margin, 1); $margin-right: nth($margin, 2); $margin-bottom: nth($margin, 3); $margin-left: nth($margin, 4); @if $margin-top != n { margin-top: $margin-top; } @if $margin-right != n { margin-right: $margin-right; } @if $margin-bottom != n { margin-bottom: $margin-bottom; } @if $margin-left != n { margin-left: $margin-left; } } } @mixin scut-padding ( $padding ) { @if length($padding) == 1 and $padding != n { padding-top: $padding; padding-right: $padding; padding-bottom: $padding; padding-left: $padding; } @if length($padding) == 2 { $padding-y: nth($padding, 1); $padding-x: nth($padding, 2); @if $padding-y != n { padding-top: $padding-y; padding-bottom: $padding-y; } @if $padding-x != n { padding-left: $padding-x; padding-right: $padding-x; } } @if length($padding) == 3 { $padding-y-top: nth($padding, 1); $padding-x: nth($padding, 2); $padding-y-bottom: nth($padding, 3); @if $padding-y-top != n { padding-top: $padding-y-top; } @if $padding-x != n { padding-right: $padding-x; padding-left: $padding-x; } @if $padding-y-bottom != n { padding-bottom: $padding-y-bottom; } } @if length($padding) == 4 { $padding-top: nth($padding, 1); $padding-right: nth($padding, 2); $padding-bottom: nth($padding, 3); $padding-left: nth($padding, 4); @if $padding-top != n { padding-top: $padding-top; } @if $padding-right != n { padding-right: $padding-right; } @if $padding-bottom != n { padding-bottom: $padding-bottom; } @if $padding-left != n { padding-left: $padding-left; } } } // Depends on `positioning-coordinates`. @mixin scut-absolute ( $coordinates: 0 n n 0 ) { position: absolute; @include scut-coords($coordinates); } %scut-absolute { @include scut-absolute; } // Depends on `positioning-coordinates`. @mixin scut-fixed ( $coordinates: 0 n n 0 ) { position: fixed; @include scut-coords($coordinates); } %scut-fixed { @include scut-fixed; } // Depends on `positioning-coordinates`. @mixin scut-relative ( $coordinates: n n n n ) { position: relative; @include scut-coords($coordinates); } @mixin scut-ratio-box ( $ratio: 1/1 ) { overflow: hidden; position: relative; // The container's height, as a percentage of the // container's width, is set by assigning // padding-top to a pseudo-element. &:before { content: ""; display: block; height: 0; padding-top: (1 / $ratio) * 100%; } } %scut-ratio-box { @include scut-ratio-box; } @mixin scut-size( $size ) { @if length($size) == 1 { width: $size; height: $size; } @else if length($size) == 2 { width: nth($size, 1); height: nth($size, 2); } } @mixin scut-sticky-footer-fixed ( $height, $wrapper: ".wrapper", $footer: ".scut-sticky" ) { html, body { height: 100%; margin: 0; padding: 0; } #{$wrapper} { min-height: 100%; margin-bottom: -$height; &:after { content: ""; display: block; } } #{$wrapper}:after, #{$footer} { height: $height; } } // deprecated @mixin scut-sticky-footer ( $height, $wrapper: ".wrapper", $footer: ".scut-sticky" ){ @include scut-sticky-footer-fixed($height, $wrapper, $footer); } @mixin scut-sticky-footer-fluid ( $wrapper: ".wrapper", $footer: ".scut-sticky" ) { html, body { height: 100%; margin: 0; padding: 0; } #{$wrapper} { display: table; height: 100%; width: 100%; } #{$footer} { display: table-row; height: 1px; } } @mixin scut-vcenter-ib ( $inner... ) { // The inner element is vertically centered // by middle-aligning it with an inline pseudo-element // whose height is 100%. &:before { content: ""; height: 100%; display: inline-block; vertical-align: middle; // A small negative right margin is set // to account for the default // word-spacing of inline-block. margin-right: -0.25em; } $inner: if(length($inner) == 0, ".scut-inner", $inner); @each $cell-selector in $inner { $cell-selector: unquote($cell-selector); & > #{$cell-selector} { display: inline-block; vertical-align: middle; } } } %scut-vcenter-ib { @include scut-vcenter-ib; } @mixin scut-vcenter-lh ( $height ) { height: $height; line-height: $height; } @mixin scut-vcenter-td ( $inner... ) { display: table; $inner: if(length($inner) == 0, ".scut-inner", $inner); @each $cell-selector in $inner { $cell-selector: unquote($cell-selector); & > #{$cell-selector} { display: table-cell; vertical-align: middle; } } } %scut-vcenter-td { @include scut-vcenter-td; } // Depends on scut-center-transform @mixin scut-vcenter-tt () { @include scut-center-transform(y); } %scut-vcenter-tt { @include scut-vcenter-tt; } // space $scut-space: "\0020"; // non-breaking space $scut-nbsp: "\00a0"; // quotation mark $scut-quot: "\0022"; // left single curly quote $scut-lsquo: "\2018"; // right single curly quote $scut-rsquo: "\2019"; // left double curly quote $scut-ldquo: "\201C"; // right double curly quote $scut-rdquo: "\201D"; // left single angle quote (guillemet) $scut-lsaquo: "\2039"; // right single angle quote (guillemet) $scut-rsaquo: "\203A"; // left double angle quote (guillemet) $scut-laquo: "\00ab"; // right double angle quote (guillemet) $scut-raquo: "\00bb"; // em dash (mutton) $scut-mdash: "\2014"; // en dash (nut) $scut-ndash: "\2013"; // hyphen $scut-hyphen: "\2010"; // ampersand $scut-amp: "\0026"; // greater than $scut-gt: "\003e"; // less than $scut-lt: "\003c"; // times $scut-times: "\00D7"; // big times $scut-bigtimes: "\2715"; // checkmark $scut-checkmark: "\2713"; // section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectionis) $scut-sect: "\00a7"; // paragraph symbol (pilcrow) $scut-para: "\00b6"; // middot (interpunct, interpoint) $scut-middot: "\00b7"; // o-slash (slashed o) $scut-oslash: "\00f8"; // bullet $scut-bull: "\2022"; // white bullet $scut-whibull: "\25E6"; // horizontal ellipsis $scut-hellip: "\2026"; // vertical ellipsis $scut-vellip: "\22EE"; // midline horizontal ellipsis $scut-midhellip: "\22EF"; // up-pointing triangle $scut-utri: "\25b2"; // down-pointing triangle $scut-dtri: "\25bc"; // left-pointing triangle $scut-ltri: "\25c0"; // right-pointing triangle $scut-rtri: "\25b6"; // up-pointing small triangle $scut-ustri: "\25b4"; // down-pointing small triangle $scut-dstri: "\25be"; // left-pointing small triangle $scut-lstri: "\25c2"; // right-pointing small triangle $scut-rstri: "\25b8"; // diamond $scut-diamond: "\25c6"; // fisheye $scut-fisheye: "\25c9"; // bullseye $scut-bullseye: "\25ce"; // circle $scut-circle: "\25cf"; // white circle $scut-whitecircle: "\25cb"; // square $scut-square: "\25a0"; // white square $scut-whitesquare: "\25a1"; // small square $scut-ssquare: "\25aa"; // small white square $scut-swhitesquare: "\25ab"; // general currency $scut-currency: "\00a4"; // cent $scut-cent: "\00a2"; // dollar $scut-dollar: "\0024"; // pound $scut-pound: "\00a3"; // euro $scut-euro: "\20ac"; // yen $scut-yen: "\00a5"; // rupee $scut-rupee: "\20B9"; @function main-src($formats, $file-path, $font-family) { // Return the list of `src` values, in order, that // a good `@font-face` will need, including only // those formats specified in the list `$formats`. $result: (); @if index($formats, eot) { $eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype'); $result: append($result, $eot-val, comma); } @if index($formats, woff2) { $woff2-val: url('#{$file-path}.woff2') format('woff2'); $result: append($result, $woff2-val, comma); } @if index($formats, woff) { $woff-val: url('#{$file-path}.woff') format('woff'); $result: append($result, $woff-val, comma); } @if index($formats, ttf) { $ttf-val: url('#{$file-path}.ttf') format('truetype'); $result: append($result, $ttf-val, comma); } @if index($formats, svg) { $svg-val: url('#{$file-path}.svg##{$font-family}') format('svg'); $result: append($result, $svg-val, comma); } @return $result; } @mixin scut-font-face ( $font-family, $file-path, $weight: normal, $style: normal, $formats: eot woff2 woff ttf svg ) { @if index('italic' 'oblique', $weight) { $style: $weight; $weight: normal; } @font-face { font-family: $font-family; font-weight: $weight; font-style: $style; @if index($formats, eot) { src: url('#{$file-path}.eot'); } src: main-src($formats, $file-path, $font-family); } } @mixin scut-hanging-indent ( $indent: 1em ) { // padding-left creates the indent, // while text-indent pulls the first line // back to the edge. padding-left: $indent; text-indent: -$indent; } %scut-hanging-indent { @include scut-hanging-indent; } @mixin scut-indented-ps ( $indent: 1.5em, $no-first-indent: true ) { p { margin: 0; text-indent: $indent; } @if $no-first-indent { p:first-of-type { text-indent: 0; } } } %scut-indented-ps { @include scut-indented-ps; } @mixin scut-key-val ( $divider: ":", $pad: 0.25em, $indent: 1em, $spacing: 0, $pad-left: 0 ) { & > dt { clear: both; float: left; &:after { content: $divider; margin-right: $pad; @if $pad-left != 0 { margin-left: $pad-left; } } } & > dd { margin-left: $indent; @if $spacing != 0 { margin-bottom: $spacing; } } } %scut-key-val { @include scut-key-val; } @mixin scut-link-bb ( $color: inherit, $style: solid, $width: 1px ) { text-decoration: none; border-bottom-width: $width; border-bottom-style: $style; @if $color != inherit { border-bottom-color: $color; } } %scut-link-bb { @include scut-link-bb; } // SCUT LINK UNSTYLED // http://davidtheclark.github.io/scut/#link-unstyled @mixin scut-link-unstyled() { text-decoration: none; color: inherit; } %scut-link-unstyled { @include scut-link-unstyled(); } @mixin scut-reverse-italics ( $elements: null ) { $element-list: em, cite, i; font-style: italic; #{join($element-list, $elements)} { font-style: normal; } } %scut-reverse-italics { @include scut-reverse-italics; } @mixin scut-side-lined ( $height: 1px, $space: 0.5em, $color: inherit, $style: solid, $v-adjust: false, $double: false ) { display: block; overflow: hidden; text-align: center; &:before, &:after { content: ""; display: inline-block; vertical-align: middle; position: relative; width: 50%; border-top-style: $style; border-top-width: $height; @if $color != inherit { border-top-color: $color; } @if $v-adjust != false { bottom: $v-adjust; } @if $double != false { height: $double; border-bottom-style: $style; border-bottom-width: $height; @if $color != inherit { border-bottom-color: $color; } } } &:before { right: $space; margin-left: -50%; } &:after { left: $space; margin-right: -50%; } } %scut-side-lined { @include scut-side-lined; } @mixin scut-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } %scut-truncate { @include scut-truncate; }