dist/_scut.scss in scut-0.6.0 vs dist/_scut.scss in scut-0.7.0
- old
+ new
@@ -1,8 +1,8 @@
/*
* Scut, a collection of Sass utilities to ease and improve our implementations of common style-code patterns.
-* v0.5.0
+* v0.7.0
* Docs at http://davidtheclark.github.io/scut
*/
// SCUT CLEARFIX
// http://davidtheclark.github.io/scut/#clearfix
@@ -25,12 +25,11 @@
// http://davidtheclark.github.io/scut/#list_unstyled
@mixin scut-list-unstyled {
list-style-type: none;
- margin: 0;
- padding: 0;
+ padding-left: 0;
}
%scut-list-unstyled {
@include scut-list-unstyled;
@@ -116,25 +115,50 @@
// SCUT PIXELS TO EMS
// http://davidtheclark.github.io/scut/#pixels-to-ems
// Depends on `scut-strip-unit`.
+$scut-em-base: 16 !default;
+
@function scut-em (
$pixels,
- $base: 16
+ $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;
- @return ($pixels / $divisor) * 1em;
+ $em-vals: null;
+ @each $val in $pixels {
+ $val-in-ems: (scut-strip-unit($val) / $divisor) * 1em;
+ $em-vals: append($em-vals, $val-in-ems);
+ }
+ @return $em-vals;
}
+// SCUT PIXELS TO REMS
+// http://davidtheclark.github.io/scut/#pixels-to-rems
+
+// Depends on `scut-strip-unit`.
+
+@function scut-rem (
+ $pixels
+) {
+
+ $rem-vals: null;
+ @each $val in $pixels {
+ $val-in-rems: scut-strip-unit($val) / 16 * 1rem;
+ $rem-vals: append($rem-vals, $val-in-rems);
+ }
+ @return $rem-vals;
+
+}
+
// SCUT BORDER
// http://davidtheclark.github.io/scut/#border
@mixin scut-border (
$style,
@@ -312,10 +336,32 @@
%scut-image-replace {
@include scut-image-replace;
}
+// SCUT REMS WITH FALLBACK
+// http://davidtheclark.github.io/scut/#rems_with_fallback
+
+// 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;
+
+}
+
// SCUT RESET
// http://davidtheclark.github.io/scut/#reset
@mixin scut-reset-border-box {
// Make everything a border-box, because why not?
@@ -582,20 +628,79 @@
%scut-center-block {
@include scut-center-block;
}
+// SCUT CENTER TRANSFORM
+// http://davidtheclark.github.io/scut/#center_transform
+
+@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);
+}
+
+
// SCUT FILL
// http://davidtheclark.github.io/scut/#fill
-@mixin scut-fill {
+@mixin scut-fill (
+ $width-height: false
+) {
position: absolute;
left: 0;
top: 0;
- width: 100%;
- height: 100%;
+ @if $width-height {
+ width: 100%;
+ height: 100%;
+ }
+ @else {
+ right: 0;
+ bottom: 0;
+ }
}
%scut-fill {
@include scut-fill;
@@ -633,10 +738,57 @@
}
}
+// SCUT LIST: CUSTOM
+// http://davidtheclark.github.io/scut/#list_custom
+
+@mixin scut-list-custom (
+ $content: "\2022",
+ $marker-width: 0.75em,
+ $pad: 0
+) {
+
+ $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;
+
+ & > 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;
+ }
+ }
+
+}
+
// SCUT LIST: DIVIDED
// http://davidtheclark.github.io/scut/#list_divided
// Depends on `list-floated`, which depends in turn on `list-unstyled` and `clearfix`.
@@ -729,10 +881,12 @@
$divider: ", ",
$display: inline
) {
@include scut-list-unstyled;
+ margin-top: 0;
+ margin-bottom: 0;
& > li {
display: $display;
&:not(:last-child):after {
content: $divider;
@@ -1070,10 +1224,23 @@
%scut-vcenter-td {
@include scut-vcenter-td;
}
+// SCUT V-CENTER: TRANSFORM
+// http://davidtheclark.github.io/scut/#v-center_transform
+
+// Depends on scut-center-transform
+
+@mixin scut-vcenter-tt () {
+ @include scut-center-transform(y);
+}
+
+%scut-vcenter-tt {
+ @include scut-vcenter-tt;
+}
+
// BOOKENDS
// http://davidtheclark.github.io/scut/#bookends
@mixin scut-bookends (
$space: 0.5em,
@@ -1126,93 +1293,93 @@
// space
$scut-space: "\0020";
// non-breaking space
$scut-nbsp: "\00a0";
-// quotation mark "
+// quotation mark
$scut-quot: "\0022";
-// left single curly quote ‘
+// left single curly quote
$scut-lsquo: "\2018";
-// right single curly quote ’
+// right single curly quote
$scut-rsquo: "\2019";
-// left double curly quote “
+// left double curly quote
$scut-ldquo: "\201C";
-// right double curly quote ”
+// right double curly quote
$scut-rdquo: "\201D";
-// left single angle quote (guillemet) ‹
+// left single angle quote (guillemet)
$scut-lsaquo: "\2039";
-// right single angle quote (guillemet) ›
+// right single angle quote (guillemet)
$scut-rsaquo: "\203A";
-// left double angle quote (guillemet) «
+// left double angle quote (guillemet)
$scut-laquo: "\00ab";
-// right double angle quote (guillemet) »
+// right double angle quote (guillemet)
$scut-raquo: "\00bb";
-// em dash (mutton) — [should look longer]
+// em dash (mutton)
$scut-mdash: "\2014";
-// en dash (nut) – [between a hyphen and an em dash in length]
+// en dash (nut)
$scut-ndash: "\2013";
-// hyphen -
+// hyphen
$scut-hyphen: "\2010";
-// ampersand &
+// ampersand
$scut-amp: "\0026";
-// greater than >
+// greater than
$scut-gt: "\003e";
-// less than <
+// less than
$scut-lt: "\003c";
-// times ×
+// times
$scut-times: "\00D7";
-// big times ✕
+// big times
$scut-bigtimes: "\2715";
-// checkmark ✓
+// checkmark
$scut-checkmark: "\2713";
-// section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectiōnis) §
+// section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectionis)
$scut-sect: "\00a7";
-// paragraph symbol (pilcrow) ¶
+// paragraph symbol (pilcrow)
$scut-para: "\00b6";
-// middot (interpunct, interpoint) ·
+// middot (interpunct, interpoint)
$scut-middot: "\00b7";
-// o-slash (slashed o) Ø
+// o-slash (slashed o)
$scut-oslash: "\00f8";
-// bullet •
+// bullet
$scut-bull: "\2022";
-// white bullet ◦
+// white bullet
$scut-whibull: "\25E6";
-// horizontal ellipsis …
+// horizontal ellipsis
$scut-hellip: "\2026";
-// vertical ellipsis ⋮
+// vertical ellipsis
$scut-vellip: "\22EE";
-// midline horizontal ellipsis ⋯
+// midline horizontal ellipsis
$scut-midhellip: "\22EF";
-// up-pointing triangle ▲
+// up-pointing triangle
$scut-utri: "\25b2";
-// down-pointing triangle ▼
+// down-pointing triangle
$scut-dtri: "\25bc";
-// left-pointing triangle ◀
+// left-pointing triangle
$scut-ltri: "\25c0";
-// right-pointing triangle ▶
+// right-pointing triangle
$scut-rtri: "\25b6";
-// up-pointing small triangle ▴
+// up-pointing small triangle
$scut-ustri: "\25b4";
-// down-pointing small triangle ▾
+// down-pointing small triangle
$scut-dstri: "\25be";
-// left-pointing small triangle ◂
+// left-pointing small triangle
$scut-lstri: "\25c2";
-// right-pointing small triangle ▸
+// right-pointing small triangle
$scut-rstri: "\25b8";
-// diamond ◆
+// diamond
$scut-diamond: "\25c6";
-// fisheye ◉
+// fisheye
$scut-fisheye: "\25c9";
-// bullseye ◎
+// bullseye
$scut-bullseye: "\25ce";
-// circle ●
+// circle
$scut-circle: "\25cf";
-// white circle ○
+// white circle
$scut-whitecircle: "\25cb";
// SCUT FONT-FACE
// http://davidtheclark.github.io/scut/#font-face
\ No newline at end of file