folders/files refactoring

scss/core.scss

@@ -0,0 +1,10 @@
+@function is-null($n) {
+  @return type-of($n)==null;
+}
+
+@function is-defined($d) {
+  @return $d and not is-null($d);
+}
+
+@import 'types/types';
+@import 'mixins/mixins';

scss/flavor.scss

@@ -2,4 +2,4 @@ $output-bourbon-deprecation-warnings: false !default;
 
 @import '~bourbon/app/assets/stylesheets/bourbon';
 @import 'variables';
-@import 'mixins/mixins';
+@import 'core';

scss/mixins/_animations.scss → scss/mixins/_animation.scss

@@ -1,4 +1,4 @@
-$animation-name-modes: array-append((none), $css-default-modes);
+$animation-name-modes: concat((none), $css-default-modes);
 
 @function is-animation-name($an) {
   @return is-string($an) or contains($animation-name-modes, $an);
@@ -8,31 +8,31 @@ $animation-name-modes: array-append((none), $css-default-modes);
   @return is-time($at) or is-css-default($at);
 }
 
-$animation-direction-modes: array-append((normal, reverse, alternate, alternate-reverse), $css-default-modes);
+$animation-direction-modes: concat((normal, reverse, alternate, alternate-reverse), $css-default-modes);
 
 @function is-animation-direction($ad) {
   @return contains($animation-direction-modes, $ad);
 }
 
-$animation-iteration-count-modes: array-append((infinite), $css-default-modes);
+$animation-iteration-count-modes: concat((infinite), $css-default-modes);
 
 @function is-animation-iteration-count($aic) {
   @return is-integer($aic) or contains($animation-iteration-count-modes, $aic);
 }
 
-$animation-fill-modes: array-append((none, forwards, backwards, both), $css-default-modes);
+$animation-fill-modes: concat((none, forwards, backwards, both), $css-default-modes);
 
 @function is-animation-fill-mode($afm) {
   @return contains($animation-fill-modes, $afm);
 }
 
-$animation-timing-function-modes: array-append((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);
+$animation-timing-function-modes: concat((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);
 
 @function is-animation-timing-function($atf) {
   @return string-starts-with($atf, 'steps') or string-starts-with($atf, 'cubic-bezier') or contains($animation-timing-function-modes, $atf);
 }
 
-$animation-play-state-modes: array-append((paused, running), $css-default-modes);
+$animation-play-state-modes: concat((paused, running), $css-default-modes);
 
 @function is-animation-play-state-modes($aps) {
   @return contains($animation-play-state-modess, $aps);

scss/mixins/_appearance.scss

@@ -0,0 +1,24 @@
+@mixin appearance ($value) {
+  -webkit-appearance: $value;
+  -moz-appearance: $value;
+  appearance: $value;
+}
+
+@mixin outline($outline) {
+  outline: $outline;
+
+  &:active,
+  &:focus {
+    outline: $outline;
+  }
+}
+
+@mixin overflow-hidden-animated {
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+
+  -moz-transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+
+  overflow: hidden;
+}

scss/mixins/_background.scss

@@ -1,12 +1,12 @@
-$background-image-modes: array-append((none), $css-default-modes);
+$background-image-modes: concat((none), $css-default-modes);
 
 @function is-background-image($bi) {
   @return is-url($bi) or contains($background-image-modes, $bi);
 }
 
 $background-position-horizontal-modes: (left, center, right);
 $background-position-vertical-modes: (top, center, bottom);
-$background-position-modes: array-append((left, center, right, top, bottom), $css-default-modes);
+$background-position-modes: concat((left, center, right, top, bottom), $css-default-modes);
 
 @function is-background-position($bp) {
   @if is-array($bp) {
@@ -22,7 +22,7 @@ $background-position-modes: array-append((left, center, right, top, bottom), $cs
   @return is-css-size($bp) or contains($background-position-modes, $bp);
 }
 
-$background-size-modes: array-append((auto, cover, contain), $css-default-modes);
+$background-size-modes: concat((auto, cover, contain), $css-default-modes);
 
 @function is-background-size($bs) {
   @if is-array($bs) {
@@ -37,19 +37,19 @@ $background-size-modes: array-append((auto, cover, contain), $css-default-modes)
   @return is-css-size($bs) or contains($background-size-modes, $bs);
 }
 
-$background-repeat-modes: array-append((repeat, repeat-x, repeat-y, no-repeat), $css-default-modes);
+$background-repeat-modes: concat((repeat, repeat-x, repeat-y, no-repeat), $css-default-modes);
 
 @function is-background-repeat($br) {
   @return contains($background-repeat-modes, $br);
 }
 
-$background-origin-clip-modes: array-append((border-box, padding-box, content-box), $css-default-modes);
+$background-origin-clip-modes: concat((border-box, padding-box, content-box), $css-default-modes);
 
 @function is-background-origin-clip($bc) {
   @return contains($background-origin-clip-modes, $bc);
 }
 
-$background-attachment-modes: array-append((scroll, fixed, local), $css-default-modes);
+$background-attachment-modes: concat((scroll, fixed, local), $css-default-modes);
 
 @function is-background-attachment($ba) {
   @return contains($background-attachment-modes, $ba);

scss/mixins/_border.scss

@@ -1,4 +1,4 @@
-$border-styles: array-append((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);
+$border-styles: concat((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);
 
 @function is-border-style($bs) {
   @return contains($border-styles, $bs);
@@ -12,7 +12,7 @@ $border-styles: array-append((none, hidden, dotted, dashed, solid, double, groov
   border-radius: $radius;
 }
 
-$border-modes: array-append((none), $css-default-modes);
+$border-modes: concat((none), $css-default-modes);
 
 @function is-border-mode($b) {
   @return contains($border-modes, $b);

scss/mixins/_box.scss

@@ -1,4 +1,4 @@
-$display-modes: array-append((none, inline, block, inline-block, flex, inline-flex, table, inline-table, table-caption, table-header-group, table-row-group, table-column-group, table-footer-group, table-row, table-column, table-cell, list-item, run-in), $css-default-modes);
+$display-modes: concat((none, inline, block, inline-block, flex, inline-flex, table, inline-table, table-caption, table-header-group, table-row-group, table-column-group, table-footer-group, table-row, table-column, table-cell, list-item, run-in), $css-default-modes);
 
 @function is-display-mode($dm) {
   @return contains($display-modes, $dm);
@@ -13,13 +13,13 @@ $display-modes: array-append((none, inline, block, inline-block, flex, inline-fl
   }
 }
 
-$box-sizes: array-append((auto), $css-default-modes);
+$box-sizes: concat((auto), $css-default-modes);
 
 @function is-box-size($s) {
   @return is-size($s) or contains($box-sizes, $s);
 }
 
-$bound-box-sizes: array-append((none), $css-default-modes);
+$bound-box-sizes: concat((none), $css-default-modes);
 
 @function is-bound-box-size($s) {
   @return is-size($s) or contains($bound-box-sizes, $s);
@@ -89,7 +89,7 @@ $bound-box-sizes: array-append((none), $css-default-modes);
   $height-fallback: map-get($settings, height-fallback);
   $height: map-get($settings, height);
 
-  @if $height-fallback == true and is-defined($width) and not is-defined($height) {
+  @if $height-fallback==true and is-defined($width) and not is-defined($height) {
     $height: $width;
   }
 
@@ -185,3 +185,19 @@ $bound-box-sizes: array-append((none), $css-default-modes);
     @warn '`background-color: #{$bgcolor}` is not a valid css color';
   }
 }
+
+@mixin aspect-ratio($width, $height, $content-selector: '.content') {
+  display: block;
+  position: relative;
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: (strip-units($height) / strip-units($width)) * 100%;
+    width: 100%;
+  }
+
+  > #{$content-selector} {
+    @include position(absolute, 0 0 0 0);
+  }
+}