_sass/kagami/_scut.scss in jekyll-theme-kagami-0.1.7 vs _sass/kagami/_scut.scss in jekyll-theme-kagami-0.1.8

- old
+ new

@@ -1,1533 +2 @@ -/* -* 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 <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 -// 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; -} \ No newline at end of file +@import "../scut/dist/scut";