dist/_scut.scss in scut-0.10.1 vs dist/_scut.scss in scut-0.10.2
- old
+ new
@@ -1,15 +1,12 @@
/*
* Scut, a collection of Sass utilities
* to ease and improve our implementations of common style-code patterns.
-* v0.10.1
+* v0.10.2
* Docs at http://davidtheclark.github.io/scut
*/
-// SCUT CLEARFIX
-// http://davidtheclark.github.io/scut/#clearfix
-
@mixin scut-clearfix {
&:after {
content: "";
display: table;
@@ -19,13 +16,10 @@
}
%scut-clearfix {
@include scut-clearfix;
}
-// SCUT LIST: UNSTYLED
-// http://davidtheclark.github.io/scut/#list_unstyled
-
@mixin scut-list-unstyled(
$no-margin: true
) {
list-style-type: none;
@@ -39,13 +33,10 @@
}
%scut-list-unstyled {
@include scut-list-unstyled();
}
-// SCUT LIST: FLOATED
-// http://davidtheclark.github.io/scut/#list_floated
-
// Depends on `list-unstyled` and `clearfix`.
@mixin scut-list-floated (
$space: false,
$dir: left,
@@ -69,13 +60,10 @@
%scut-list-floated {
@include scut-list-floated;
}
-// SCUT POSITIONING: COORDINATES
-// http://davidtheclark.github.io/scut/#positioning_coordinates
-
@function scut-autoOrValue ($val) {
@if $val == a or $val == auto {
@return auto;
}
@else {
@@ -104,23 +92,17 @@
@if $left != n {
left: scut-autoOrValue($left);
}
}
-// SCUT STRIP UNIT
-// http://davidtheclark.github.io/scut/#strip_unit
-
@function scut-strip-unit (
$num
) {
@return $num / ($num * 0 + 1);
}
-// 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 (
@@ -148,13 +130,10 @@
@else {
@return $em-vals;
}
}
-// SCUT PIXELS TO REMS
-// http://davidtheclark.github.io/scut/#pixels-to-rems
-
// Depends on `scut-strip-unit`.
$scut-rem-base: 16 !default;
@function scut-rem (
@@ -175,13 +154,10 @@
@else {
@return $rem-vals;
}
}
-// SCUT BORDER
-// http://davidtheclark.github.io/scut/#border
-
@mixin scut-border (
$style,
$sides: n y
) {
@@ -214,13 +190,10 @@
@else {
@warn "Scut-border requires a $sides argument of 2 or 4 values."
}
}
-// SCUT CIRCLE
-// http://davidtheclark.github.io/scut/#circle
-
@mixin scut-circle (
$size,
$color: inherit
) {
@@ -242,13 +215,68 @@
height: $size;
width: $size;
}
}
-// SCUT HD BREAKPOINT
-// http://davidtheclark.github.io/scut/#hd_breakpoint
+@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),
@@ -256,13 +284,10 @@
(min-resolution: #{round(96 * $ratio)}dpi) {
@content;
}
}
-// SCUT HIDE VISUALLY
-// http://davidtheclark.github.io/scut/#hide_visually
-
@mixin scut-hide-visually {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
@@ -275,13 +300,10 @@
}
%scut-hide-visually {
@include scut-hide-visually;
}
-// SCUT IMAGE REPLACEMENT
-// http://davidtheclark.github.io/scut/#image_replacement
-
@mixin scut-image-replace {
text-indent: 102%;
white-space: nowrap;
overflow: hidden;
@@ -289,13 +311,10 @@
}
%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
@@ -310,13 +329,10 @@
#{$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?
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -401,10 +417,19 @@
p:last-of-type {
margin-bottom: 0;
}
}
+@mixin scut-reset-media {
+ // You want these elements fluid, probably.
+ img,
+ video {
+ max-width: 100%;
+ height: auto;
+ }
+}
+
// Call them all, minus exclusions!
@mixin scut-reset ($exclude: false) {
@if not index($exclude, border-box) {
@include scut-reset-border-box;
}
@@ -424,14 +449,14 @@
@include scut-reset-button;
}
@if not index($exclude, paragraph) {
@include scut-reset-paragraph;
}
+ @if not index($exclude, media) {
+ @include scut-reset-media;
+ }
}
-// SCUT SELECTED
-// http://davidtheclark.github.io/scut/#selected
-
@mixin scut-selected (
$active: false
) {
@if $active {
@@ -447,13 +472,10 @@
@content;
}
}
}
-// SCUT TRIANGLE
-// http://davidtheclark.github.io/scut/#triangle
-
@mixin scut-triangle (
$direction: right,
$size: 0.75em,
$color: inherit
) {
@@ -552,13 +574,10 @@
}
%scut-triangle {
@include scut-triangle;
}
-// SCUT CENTER ABSOLUTELY
-// http://davidtheclark.github.io/scut/#center_absolutely
-
@mixin scut-center-absolutely (
$dimensions
) {
$width: nth($dimensions, 1);
@@ -577,13 +596,10 @@
top: 50%;
margin-top: (-$height / 2);
}
}
-// SCUT CENTER BLOCK
-// http://davidtheclark.github.io/scut/#center_block
-
@mixin scut-center-block (
$max-width: false
) {
margin-left: auto;
@@ -596,13 +612,10 @@
%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;
@@ -646,13 +659,10 @@
%scut-center-transform-y {
@include scut-center-transform(y);
}
-// SCUT FILL
-// http://davidtheclark.github.io/scut/#fill
-
@mixin scut-fill (
$width-height: false
) {
position: absolute;
@@ -670,13 +680,10 @@
}
%scut-fill {
@include scut-fill;
}
-// SCUT LIST: CUSTOM
-// http://davidtheclark.github.io/scut/#list_custom
-
@mixin scut-list-custom (
$content: "\2022",
$marker-width: 0.75em,
$pad: 0,
$no-margin: false
@@ -722,13 +729,10 @@
@content;
}
}
}
-// SCUT LIST: DIVIDED
-// http://davidtheclark.github.io/scut/#list_divided
-
// Depends on `list-floated`, which depends in turn on `list-unstyled` and `clearfix`.
@mixin scut-list-divided (
$divider: "|",
$space: 0.5em,
@@ -780,13 +784,10 @@
}
%scut-list-breadcrumb {
@include scut-list-divided("/");
}
-// SCUT LIST: INLINE
-// http://davidtheclark.github.io/scut/#list_inline
-
// Depends on `list-unstyled`.
@mixin scut-list-inline (
$space: false,
$no-margin: true
@@ -807,13 +808,10 @@
}
%scut-list-inline {
@include scut-list-inline;
}
-// SCUT LIST: PUNCTUATED
-// http://davidtheclark.github.io/scut/#list_punctuated
-
// Depends on `list-unstyled`.
@mixin scut-list-punctuated (
$divider: ", ",
$display: inline,
@@ -832,13 +830,10 @@
}
%scut-list-comma {
@include scut-list-punctuated;
}
-// SCUT MARGIN
-// http://davidtheclark.github.io/scut/#margin
-
@mixin scut-margin (
$margin
) {
@if length($margin) == 1 and $margin != n {
@@ -895,13 +890,10 @@
margin-left: $margin-left;
}
}
}
-// SCUT PADDING
-// http://davidtheclark.github.io/scut/#padding
-
@mixin scut-padding (
$padding
) {
@if length($padding) == 1 and $padding != n {
@@ -957,13 +949,10 @@
@if $padding-left != n {
padding-left: $padding-left;
}
}
}
-// SCUT POSITIONING: ABSOLUTE
-// http://davidtheclark.github.io/scut/#positioning_absolute
-
// Depends on `positioning-coordinates`.
@mixin scut-absolute (
$coordinates: 0 n n 0
) {
@@ -974,13 +963,10 @@
}
%scut-absolute {
@include scut-absolute;
}
-// SCUT POSITIONING: FIXED
-// http://davidtheclark.github.io/scut/#positioning_fixed
-
// Depends on `positioning-coordinates`.
@mixin scut-fixed (
$coordinates: 0 n n 0
) {
@@ -991,26 +977,20 @@
}
%scut-fixed {
@include scut-fixed;
}
-// SCUT POSITIONING: RELATIVE
-// http://davidtheclark.github.io/scut/#positioning_relative
-
// Depends on `positioning-coordinates`.
@mixin scut-relative (
$coordinates: n n n n
) {
position: relative;
@include scut-coords($coordinates);
}
-// SCUT RATIO-BOX
-// http://davidtheclark.github.io/scut/#ratio-box
-
@mixin scut-ratio-box (
$ratio: 1/1
) {
overflow: hidden;
@@ -1029,13 +1009,10 @@
}
%scut-ratio-box {
@include scut-ratio-box;
}
-// SCUT SIZE
-// http://davidtheclark.github.io/scut/#size
-
@mixin scut-size(
$size
) {
@if length($size) == 1 {
@@ -1046,41 +1023,71 @@
width: nth($size, 1);
height: nth($size, 2);
}
}
-// SCUT STICKY FOOTER
-// http://davidtheclark.github.io/scut/#sticky_footer
-
-@mixin scut-sticky-footer (
+@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;
}
}
-// SCUT V-CENTER: INLINE-BLOCK
-// http://davidtheclark.github.io/scut/#v-center_inline-block
+// 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: ".scut-inner"
) {
// The inner element is vertically centered
@@ -1107,24 +1114,18 @@
%scut-vcenter-ib {
@include scut-vcenter-ib;
}
-// SCUT V-CENTER: LINE-HEIGHT
-// http://davidtheclark.github.io/scut/#v-center_line-height
-
@mixin scut-vcenter-lh (
$height
) {
height: $height;
line-height: $height;
}
-// SCUT V-CENTER: TABLE DISPLAY
-// http://davidtheclark.github.io/scut/#v-center_table_display
-
@mixin scut-vcenter-td (
$inner: ".scut-inner"
) {
display: table;
@@ -1138,25 +1139,19 @@
%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;
}
-// SCUT CSS CHARACTERS
-// http://davidtheclark.github.io/scut/#characters
-
// space
$scut-space: "\0020";
// non-breaking space
$scut-nbsp: "\00a0";
@@ -1251,13 +1246,10 @@
$scut-whitesquare: "\25a1";
// small square
$scut-ssquare: "\25aa";
// small white square
$scut-swhitesquare: "\25ab";
-// SCUT FONT-FACE
-// http://davidtheclark.github.io/scut/#font-face
-
@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: ();
@@ -1303,13 +1295,10 @@
}
src: main-src($formats, $file-path, $font-family);
}
}
-// SCUT HANGING INDENT
-// http://davidtheclark.github.io/scut/#hanging_indent
-
@mixin scut-hanging-indent (
$indent: 1em
) {
// padding-left creates the indent,
@@ -1322,13 +1311,10 @@
}
%scut-hanging-indent {
@include scut-hanging-indent;
}
-// SCUT INDENTED PARAGRAPHS
-// http://davidtheclark.github.io/scut/#indented_paragraphs
-
@mixin scut-indented-ps (
$indent: 1.5em,
$no-first-indent: true
) {
@@ -1346,13 +1332,10 @@
}
%scut-indented-ps {
@include scut-indented-ps;
}
-// SCUT KEY-VALUE
-// http://davidtheclark.github.io/scut/#key-value
-
@mixin scut-key-val (
$divider: ":",
$pad: 0.25em,
$indent: 1em,
$spacing: 0,
@@ -1381,13 +1364,10 @@
}
%scut-key-val {
@include scut-key-val;
}
-// SCUT LINK: BOTTOM-BORDERED
-// http://davidtheclark.github.io/scut/#link_bottom-bordered
-
@mixin scut-link-bb (
$color: inherit,
$style: solid,
$width: 1px
) {
@@ -1403,13 +1383,10 @@
}
%scut-link-bb {
@include scut-link-bb;
}
-// SCUT REVERSE ITALICS
-// http://davidtheclark.github.io/scut/#reverse-italics
-
@mixin scut-reverse-italics (
$elements: false
) {
$element-list: em, cite, i;
@@ -1425,13 +1402,10 @@
}
%scut-reverse-italics {
@include scut-reverse-italics;
}
-// SCUT SIDE-LINED
-// http://davidtheclark.github.io/scut/#side-lined
-
@mixin scut-side-lined (
$height: 1px,
$space: 0.5em,
$color: inherit,
$style: solid,
@@ -1484,12 +1458,9 @@
}
%scut-side-lined {
@include scut-side-lined;
}
-// SCUT TRUNCATE
-// http://davidtheclark.github.io/scut/#truncate
-
@mixin scut-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
\ No newline at end of file