flake-scss 0.1.8 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0c9cb7e7b2c4d6b8b6299d5e1671407fc57180ae
-  data.tar.gz: 9a08cfdc193550c995a3fcaa0b5ed6b4a5699ef8
+  metadata.gz: a7ea091e2abe62febbead567390875257fe11b9f
+  data.tar.gz: d98788bd2b13fe1d84a6008cde922dfacba508f2
 SHA512:
-  metadata.gz: da357a7f98b71a940e135ca04b68bb3ba6e44783467cf16b4d2c0d858de9c1309db6df6226fecdb3e4074f2a29df8beb784b576f864edbec7ae4015c3e91ff44
-  data.tar.gz: 90d9fccccbe46a5a1024548bb1dafa28d645ec71cf51890fefba0c2ae8db04f1f88adc5d958ee8afaa519009a3657470a408fb52e6b852124d9acca3d93b3bd1
+  metadata.gz: 332f5b84710b6369b2a58dd403fc79e40a464c0b6207ad072d731cc184019e5a3dfdcea3ff25e4f1501480deb8239db389d6e3a14f40300e4fce5219e429017f
+  data.tar.gz: fcfc75d9b8a4894226ff95cd45870fa4edee388d27e26a90b8841120a1903ab91de949f793b00ff0bd2e2227af0bce79d762d9dd23e5e879dab56dcd9fa038b4

data/lib/flake/scss/version.rb

@@ -1,5 +1,5 @@
 module Flake
   module Scss
-    VERSION = "0.1.8"
+    VERSION = "0.1.9"
   end
 end

data/vendor/assets/stylesheets/_flake.scss

@@ -1,29 +1,34 @@
 @import "variables";
 
-@import "flake/functions",
+@import "flake/colors-list",
+        "flake/functions",
         "flake/breakpoints",
         "flake/mixins";
 
-@import "background/colors";
+:root {
+  @import "background/colors";
 
-@import "border/general",
-        "border/colors",
-        "border/radius";
+  @import "border/general",
+          "border/colors",
+          "border/radius";
 
-@import "text/colors",
-        "text/fonts",
-        "text/style",
-        "text/align",
-        "text/sizes";
+  @import "text/colors",
+          "text/fonts",
+          "text/style",
+          "text/align",
+          "text/sizes";
 
-@import "sizing/spacing",
-        "sizing/grid";
+  @import "sizing/spacing",
+          "sizing/grid";
 
-@import "layout/flex";
+  @import "layout/flex";
 
-@import "shadows/shadows";
+  @import "shadows/shadows";
 
-@import "general/display",
-        "general/position",
-        "general/general",
-        "general/z-index";
+  @import "general/display",
+          "general/position",
+          "general/general",
+          "general/z-index";
+
+  @import "animations/transitions";
+}

data/vendor/assets/stylesheets/_variables.scss

@@ -1 +1,23 @@
 $apply-classes: () !global;
+
+$components: (
+  transition,
+  background-colors,
+  border-colors,
+  borders,
+  border-radius,
+  display,
+  position,
+  z-index,
+  flex,
+  shadows,
+  grid,
+  spacing,
+  text-align,
+  text-colors,
+  fonts,
+  font-sizes,
+  font-style,
+  font-weights,
+  text-decoration
+) !default;

data/vendor/assets/stylesheets/animations/_transitions.scss

@@ -0,0 +1,37 @@
+$transitions-responsive: false !default;
+
+$transitions: (
+  none: "none",
+  "": ".15s",
+  slow: ".5s"
+) !default;
+
+@each $transition, $value in $transitions {
+  $sep: "";
+  @if $transition != "" {
+    $sep: "-"
+  }
+
+  .transition#{$sep}#{$transition} {
+    transition: #{$value};
+  }
+
+  $addme: add-to-apply-map(transition-#{$transition}, "transition", "#{$value}");
+}
+
+@if $transitions-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $transition, $value in $transitions {
+        $sep: "";
+        @if $transition != "" {
+          $sep: "-";
+        }
+
+        .#{$breakpoint}\:transition#{$sep}#{$transition} {
+          transition: #{$value};
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/background/_colors.scss

@@ -1,64 +1,64 @@
-@import "../flake/colors-list";
-
 $bg-hover: true !default;
 $bg-responsive: true !default;
 
-@if $theme-colors != () {
-  @each $color, $value in $theme-colors {
-    $hover: "";
+@if index($components, background-colors) {
+  @if $theme-colors != () {
+    @each $color, $value in $theme-colors {
+      $hover: "";
 
-    @if $bg-hover {
-      $hover: ", .hover\\:bg-#{"" + $color}:hover";
-    }
+      @if $bg-hover {
+        $hover: ", .hover\\:bg-#{"" + $color}:hover";
+      }
 
-    .bg-#{"" + $color}
-    #{$hover} {
-      background-color: #{$value};
-    }
+      .bg-#{"" + $color}
+      #{$hover} {
+        background-color: #{$value};
+      }
 
-    $addme: add-to-apply-map(bg-#{"" + $color}, "background-color", "#{$value}");
+      $addme: add-to-apply-map(bg-#{"" + $color}, "background-color", "#{$value}");
+    }
   }
-}
 
-@if $full-colors {
-  @each $color in $colors {
-    $medium: map-get($colors-list, $color);
+  @if $full-colors {
+    @each $color in $colors {
+      $medium: map-get($colors-list, $color);
 
-    @each $shade, $value in $medium {
-      $hover: "";
+      @each $shade, $value in $medium {
+        $hover: "";
 
-      @if $bg-hover {
-        $hover: ", .hover\\:bg-#{"" + $color}-#{"" + $shade}:hover";
-      }
+        @if $bg-hover {
+          $hover: ", .hover\\:bg-#{"" + $color}-#{"" + $shade}:hover";
+        }
 
-      .bg-#{"" + $color}-#{"" + $shade}
-      #{$hover} {
-        background-color: $value;
-      }
+        .bg-#{"" + $color}-#{"" + $shade}
+        #{$hover} {
+          background-color: $value;
+        }
 
-      $addme: add-to-apply-map(bg-#{"" + $color}-#{"" + $shade}, "background-color", "#{$value}");
+        $addme: add-to-apply-map(bg-#{"" + $color}-#{"" + $shade}, "background-color", "#{$value}");
+      }
     }
   }
-}
 
-@if $bg-responsive {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    @include breakpoint($breakpoint) {
-      @if $theme-colors != () {
-        @each $color, $value in $theme-colors {
-          .#{$breakpoint}\:bg-#{"" + $color} {
-            background-color: #{$value};
+  @if $bg-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @if $theme-colors != () {
+          @each $color, $value in $theme-colors {
+            .#{$breakpoint}\:bg-#{"" + $color} {
+              background-color: #{$value};
+            }
           }
         }
-      }
 
-      @if $full-colors {
-        @each $color in $colors {
-          $medium: map-get($colors-list, $color);
+        @if $full-colors {
+          @each $color in $colors {
+            $medium: map-get($colors-list, $color);
 
-          @each $shade, $value in $medium {
-            .#{$breakpoint}\:bg-#{"" + $color}-#{"" + $shade} {
-              background-color: $value;
+            @each $shade, $value in $medium {
+              .#{$breakpoint}\:bg-#{"" + $color}-#{"" + $shade} {
+                background-color: $value;
+              }
             }
           }
         }

data/vendor/assets/stylesheets/border/_colors.scss

@@ -1,63 +1,63 @@
-@import "../flake/colors-list";
-
 $border-color-hover: true !default;
 $border-color-responsive: false !default;
 
-@if $theme-colors != () {
-  @each $color, $value in $theme-colors {
-    $hover: "";
+@if index($components, border-colors) {
+  @if $theme-colors != () {
+    @each $color, $value in $theme-colors {
+      $hover: "";
 
-    @if $border-color-hover {
-      $hover: ", .hover\\:b-#{"" + $color}:hover";
-    }
+      @if $border-color-hover {
+        $hover: ", .hover\\:b-#{"" + $color}:hover";
+      }
 
-    .b-#{"" + $color}
-    #{$hover} {
-      border-color: #{$value};
-    }
+      .b-#{"" + $color}
+      #{$hover} {
+        border-color: #{$value};
+      }
 
-    $addme: add-to-apply-map(b-#{"" + $color}, "border-color", "#{$value}");
+      $addme: add-to-apply-map(b-#{"" + $color}, "border-color", "#{$value}");
+    }
   }
-}
 
-@if $full-colors {
-  @each $color in $colors {
-    $medium: map-get($colors-list, $color);
+  @if $full-colors {
+    @each $color in $colors {
+      $medium: map-get($colors-list, $color);
 
-    @each $shade, $value in $medium {
-      $hover: "";
+      @each $shade, $value in $medium {
+        $hover: "";
 
-      @if $border-color-hover {
-        $hover: ", .hover\\:b-#{"" + $color}-#{"" + $shade}:hover";
-      }
+        @if $border-color-hover {
+          $hover: ", .hover\\:b-#{"" + $color}-#{"" + $shade}:hover";
+        }
 
-      .b-#{"" + $color}-#{"" + $shade}
-      #{$hover} {
-        border-color: $value;
-      }
+        .b-#{"" + $color}-#{"" + $shade}
+        #{$hover} {
+          border-color: $value;
+        }
 
-      $addme: add-to-apply-map(b-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
+        $addme: add-to-apply-map(b-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
+      }
     }
   }
-}
 
 
-@if $border-color-responsive {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    @include breakpoint($breakpoint) {
-      @if $theme-colors != () {
-        @each $color, $value in $theme-colors {
-          .#{$breakpoint}\:b-#{"" + $color} {
-            border-color: #{$value};
+  @if $border-color-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @if $theme-colors != () {
+          @each $color, $value in $theme-colors {
+            .#{$breakpoint}\:b-#{"" + $color} {
+              border-color: #{$value};
+            }
           }
         }
-      }
 
-      @if $full-colors {
-        @each $color in $colors {
-          @each $shade, $value in $medium {
-            .#{$breakpoint}\:bg-#{"" + $color}-#{"" + $shade} {
-              border-color: $value;
+        @if $full-colors {
+          @each $color in $colors {
+            @each $shade, $value in $medium {
+              .#{$breakpoint}\:bg-#{"" + $color}-#{"" + $shade} {
+                border-color: $value;
+              }
             }
           }
         }

data/vendor/assets/stylesheets/border/_general.scss

@@ -1,27 +1,22 @@
 $border-hover: true !default;
 $border-responsive: true !default;
+$border-default-color: black;
 
-$borders: () !default;
-@if $borders == () {
-  $borders: (
-    "": "",
-    t: "top",
-    r: "right",
-    b: "bottom",
-    l: "left"
-  );
-}
+$borders: (
+  "": "",
+  t: "top",
+  r: "right",
+  b: "bottom",
+  l: "left"
+) !default;
 
-$border-sizes: () !default;
-@if $border-sizes == () {
-  $border-sizes: (
-    1,
-    2,
-    3,
-    4,
-    5
-  );
-}
+$border-sizes: (
+  1,
+  2,
+  3,
+  4,
+  5
+) !default;
 
 @mixin makeBorder($space, $value, $size, $breakpoint: 0) {
   $bp: "";
@@ -44,23 +39,25 @@ $border-sizes: () !default;
   }
 
   @if $breakpoint == 0 {
-    $addme: add-to-apply-map(b#{$space}-#{$size}, "border#{$sep}#{$value}", "#{$size}px solid black");
+    $addme: add-to-apply-map(b#{$space}-#{$size}, "border#{$sep}#{$value}", "#{$size}px solid #{$border-default-color}");
     $addme: add-to-apply-map(b#{$space}-0, "border#{$sep}#{$value}", "0");
   }
 }
 
-@each $border, $value in $borders {
-  @each $size in $border-sizes {
-    @include makeBorder($border, $value, $size);
+@if index($components, borders) {
+  @each $border, $value in $borders {
+    @each $size in $border-sizes {
+      @include makeBorder($border, $value, $size);
+    }
   }
-}
 
-@if $border-responsive {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    @include breakpoint($breakpoint) {
-      @each $border, $value in $borders {
-        @each $size in $border-sizes {
-          @include makeBorder($border, $value, $size, $breakpoint);
+  @if $border-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $border, $value in $borders {
+          @each $size in $border-sizes {
+            @include makeBorder($border, $value, $size, $breakpoint);
+          }
         }
       }
     }

data/vendor/assets/stylesheets/border/_radius.scss

@@ -1,34 +1,33 @@
 $radius-responsive: false !default;
 
-$radius: () !default;
-@if $radius == () {
-  $radius: (
-    0: 0,
-    1: 1px,
-    2: 2px,
-    3: 3px,
-    4: 4px,
-    5: 5px,
-    10: 10px,
-    round: 50%,
-    rounded: 999px
-  );
-}
+$radius: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px,
+  10: 10px,
+  round: 50%,
+  rounded: 999px
+) !default;
 
-@each $radi, $value in $radius {
-  .radius-#{$radi} {
-    border-radius: $value;
-  }
+@if index($components, border-radius) {
+  @each $radi, $value in $radius {
+    .radius-#{$radi} {
+      border-radius: $value;
+    }
 
-  $addme: add-to-apply-map(radius-#{$radi}, "border-radius", "#{$value}");
-}
+    $addme: add-to-apply-map(radius-#{$radi}, "border-radius", "#{$value}");
+  }
 
-@if $radius-responsive {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    @include breakpoint($breakpoint) {
-      @each $radi, $value in $radius {
-        .#{$breakpoint}\:radius-#{$radi} {
-          border-radius: $value;
+  @if $radius-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $radi, $value in $radius {
+          .#{$breakpoint}\:radius-#{$radi} {
+            border-radius: $value;
+          }
         }
       }
     }

data/vendor/assets/stylesheets/flake/_breakpoints.scss

@@ -1,9 +1,6 @@
-$breakpoints: () !default;
-@if $breakpoints == () {
-  $breakpoints: (
-    sm: 560px,
-    md: 768px,
-    lg: 960px,
-    mw: 1200px
-  );
-}
+$breakpoints: (
+  sm: 560px,
+  md: 768px,
+  lg: 960px,
+  mw: 1200px
+) !default;

data/vendor/assets/stylesheets/flake/_colors-list.scss

@@ -4,32 +4,37 @@
 $theme-colors: () !default;
 $full-colors: true !default;
 
-$colors: () !default;
-@if $colors == () {
-  $colors: (
-    red,
-    pink,
-    purple,
-    deep-purple,
-    indigo,
-    blue,
-    light-blue,
-    cyan,
-    teal,
-    green,
-    light-green,
-    lime,
-    yellow,
-    amber,
-    orange,
-    deep-orange,
-    brown,
-    gray,
-    blue-gray,
-    general
-  );
+@if $theme-colors != () {
+  :root {
+    @each $color, $value in $theme-colors {
+      --#{$color}: #{$value};
+    }
+  }
 }
 
+$colors: (
+  red,
+  pink,
+  purple,
+  deep-purple,
+  indigo,
+  blue,
+  light-blue,
+  cyan,
+  teal,
+  green,
+  light-green,
+  lime,
+  yellow,
+  amber,
+  orange,
+  deep-orange,
+  brown,
+  gray,
+  blue-gray,
+  general
+) !default;
+
 $colors-list: (
   red: (
     50: #FFEBEE,
@@ -308,4 +313,4 @@ $colors-list: (
     black: #000000,
     white: #FFFFFF
   ),
-);
+) !default;

data/vendor/assets/stylesheets/general/_display.scss

@@ -1,45 +1,44 @@
 $display-responsive: true !default;
 
-$display: () !default;
-@if $display == () {
-  $display: (
-    inline,
-    inline-block,
-    block,
-    flex,
-    inline-flex
-  );
-}
+$display: (
+  inline,
+  inline-block,
+  block,
+  flex,
+  inline-flex
+) !default;
 
-@each $property in $display {
-  .#{$property} {
-    display: $property;
-  }
+@if index($components, display) {
+  @each $property in $display {
+    .#{$property} {
+      display: $property;
+    }
 
-  $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
-}
+    $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
+  }
 
-@if $display-responsive {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    @include breakpoint($breakpoint) {
-      @each $property in $display {
-        .#{$breakpoint}\:#{$property} {
-          display: $property;
+  @if $display-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $property in $display {
+          .#{$breakpoint}\:#{$property} {
+            display: $property;
+          }
         }
       }
     }
   }
-}
 
-.hidden {
-  display: none;
-}
+  .hidden {
+    display: none;
+  }
 
-@if $display-responsive {
-  @each $breakpoint, $breakpoint-value in $breakpoints {
-    @include breakpoint($breakpoint) {
-      .#{$breakpoint}\:hidden {
-        display: none;
+  @if $display-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        .#{$breakpoint}\:hidden {
+          display: none;
+        }
       }
     }
   }

data/vendor/assets/stylesheets/general/_general.scss

@@ -12,10 +12,6 @@ body {
   overflow: hidden;
 }
 
-.transition {
-  transition: all .2s;
-}
-
 h1 {
   font-size: 2rem;
 }