/*
-
Scut, a collection of Sass utilities
-
to ease and improve our implementations of common style-code patterns.
-
v1.4.0
-
Docs at 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 <b> 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 <li>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 // 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;
}