flake-scss 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1cc735121e7e4fef499d4a341e9f5c32602c97fc
-  data.tar.gz: 739b1556aff3b6ea555a3317c3bb17dda3785d14
+  metadata.gz: 9b266bde092e16d23042fc72c1799374c8294635
+  data.tar.gz: 4fe1287531409641885e9984a7203f69f910161b
 SHA512:
-  metadata.gz: f9cc99f0e8eb7f45013ff73d18a552a9e0045bd60c83249528d11d090baf29b47c853a947918b0db16951f8ad65e061fea586cb63d445dd2dc84c5c742f39838
-  data.tar.gz: 414027b8c74e98f07f2b9336d8fa2097436488cdbc30d036bb2b969a0c39f8ca528101dde52c0832b32b9141e77052eb8ed462250d04ed9bc90c1cfc16746c91
+  metadata.gz: 32964984cec20b4d7d2a4a34087603e5ab74c00bfda58cf74f800e7cd81f34269829102864f31af50f4dfd513eed5ed34b39179636f6409e13ecfdb9d01e80fd
+  data.tar.gz: 680df9337f60729712cd7bbce064c1e5b7d272a82cf2db4ac42085f95228a7e506a372caa84a675494886a1864e3dd4440b7907cc1200123f5d6057fe2dbb8a3

data/lib/flake/scss/version.rb

@@ -1,5 +1,5 @@
 module Flake
   module Scss
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end

data/vendor/assets/stylesheets/_flake.scss

@@ -2,11 +2,18 @@
         "helpers/breakpoints";
 
 @import "general/general",
-        "general/display";
+        "general/display",
+        "general/position";
 
 @import "background/colors";
 
-@import "text/colors";
+@import "border/general",
+        "border/colors";
+
+@import "text/colors",
+        "text/fonts",
+        "text/style",
+        "text/align";
 
 @import "sizing/spacing",
         "sizing/grid";

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

@@ -20,7 +20,7 @@ $bg-responsive: false !default;
 
     @if $bg-responsive {
       @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include mediaquery($breakpoint) {
+        @include breakpoint($breakpoint) {
           .#{$breakpoint}\:bg-#{$color}-#{$shade} {
             background-color: $value;
           }

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

@@ -0,0 +1,31 @@
+@import "../helpers/colors-list";
+
+$border-color-hover: true !default;
+$border-color-responsive: false !default;
+
+@each $color in $colors {
+  $medium: map-get($colors-list, $color);
+
+  @each $shade, $value in $medium {
+    $hover: "";
+
+    @if $border-color-hover {
+      $hover: ", .hover\\:b-#{$color}-#{$shade}:hover";
+    }
+
+    .b-#{$color}-#{$shade}
+    #{$hover} {
+      border-color: $value;
+    }
+
+    @if $border-color-responsive {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          .#{$breakpoint}\:bg-#{$color}-#{$shade} {
+            border-color: $value;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+$border-hover: true !default;
+$border-responsive: true !default;
+
+$borders: () !default;
+@if $borders == () {
+  $borders: (
+    "": "",
+    t: "top",
+    r: "right",
+    b: "bottom",
+    l: "left"
+  );
+}
+
+$standard-border: 1px solid black;
+
+@mixin makeBorder($space, $value, $breakpoint: 0) {
+  $bp: "";
+  $sep: "";
+
+  @if $breakpoint != 0 {
+    $bp: "#{$breakpoint}\\:";
+  }
+
+  @if $value != "" {
+    $sep: "-";
+  }
+
+  .#{$bp}b#{$space} {
+    border#{$sep}#{$value}: $standard-border;
+  }
+
+  .#{$bp}b#{$space}-0 {
+    border#{$sep}#{$value}: 0;
+  }
+}
+
+@each $border, $value in $borders {
+  @include makeBorder($border, $value);
+}
+
+@if $border-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $border, $value in $borders {
+        @include makeBorder($border, $value, $breakpoint);
+      }
+    }
+  }
+}

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

@@ -1,4 +1,3 @@
-$display-hover: false !default;
 $display-responsive: true !default;
 
 $display: () !default;
@@ -15,18 +14,15 @@ $display: () !default;
 @each $property in $display {
   $hover: "";
 
-  @if $display-hover {
-    $hover: ", .hover\\:#{$property}:hover";
-  }
-
-  .#{$property}
-  #{$hover} {
+  .#{$property} {
     display: $property;
   }
+}
 
-  @if $display-responsive {
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include mediaquery($breakpoint) {
+@if $display-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $property in $display {
         .#{$breakpoint}\:#{$property} {
           display: $property;
         }
@@ -34,3 +30,17 @@ $display: () !default;
     }
   }
 }
+
+.hidden {
+  display: none;
+}
+
+@if $display-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      .#{$breakpoint}\:hidden {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+$positions-responsive: true !default;
+
+$positions: () !default;
+@if $positions == () {
+  $positions: (
+    fixed,
+    relative,
+    absolute,
+    static,
+    sticky
+  );
+}
+
+@each $position in $positions {
+  .#{$position} {
+    position: $position;
+  }
+}
+
+@if $positions-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $position in $positions {
+        .#{$breakpoint}\:#{$position} {
+          position: $position;
+        }
+      }
+    }
+  }
+}
+
+$pins-responsive: true !default;
+
+$pins: () !default;
+@if $pins == () {
+  $pins: (
+    t: "top",
+    r: "right",
+    b: "bottom",
+    l: "left"
+  );
+}
+
+@each $pin, $value in $pins {
+  .pin-#{$pin} {
+    #{$value}: 0;
+  }
+}
+
+@if $pins-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $pin, $value in $pins {
+        .#{$breakpoint}\:pin-#{$pin} {
+          #{$value}: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -8,7 +8,7 @@ $breakpoints: () !default;
   );
 }
 
-@mixin mediaquery($size) {
+@mixin breakpoint($size) {
   $query: map-get($breakpoints, $size);
 
   @media (min-width: #{$query}) {

data/vendor/assets/stylesheets/layout/_flex.scss

@@ -72,10 +72,25 @@ $flex-list: (
         .#{$classstart}-#{$value-name} {
           #{$property}: #{$value-value};
         }
+      }
+    }
+  }
+}
+
+@if $flex-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $property in $flex {
+        $medium: map-get($flex-list, $property);
+        $classstart: "";
+
+        @each $name, $value in $medium {
+          @if $name == "class" {
+            $classstart: #{$value};
+          }
 
-        @if $flex-responsive {
-          @each $breakpoint, $breakpoint-value in $breakpoints {
-            @include mediaquery($breakpoint) {
+          @if $name == "values" {
+            @each $value-name, $value-value in $value {
               .#{$breakpoint}\:#{$classstart}-#{$value-name} {
                 #{$property}: #{$value-value};
               }

data/vendor/assets/stylesheets/sizing/_grid.scss

@@ -13,37 +13,46 @@ $grid-single: false !default;
   }
 }
 
+
+// No Breakpoints
 @if $grid-single {
   @for $i from 1 through $grid-size {
     .w-#{$i} {
       width: (100% / $grid-size) * $i;
     }
-
-    @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include mediaquery($breakpoint) {
-        .#{$breakpoint}\:w-#{$i} {
-          width: (100% / $grid-size) * $i;
-        }
-      }
-    }
   }
 } @else {
   @for $i from 1 through $grid-size {
     @if $grid-full {
       @for $j from 1 through $i {
         @include widthify($i, $j);
-
-        @each $breakpoint, $breakpoint-value in $breakpoints {
-          @include mediaquery($breakpoint) {
-            @include widthify($i, $j, $breakpoint);
-          }
-        }
       }
     } @else {
       @include widthify($i, 1);
+    }
+  }
+}
 
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include mediaquery($breakpoint) {
+// Breakpoints
+@if $grid-single {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @for $i from 1 through $grid-size {
+        .#{$breakpoint}\:w-#{$i} {
+          width: (100% / $grid-size) * $i;
+        }
+      }
+    }
+  }
+} @else {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @for $i from 1 through $grid-size {
+        @if $grid-full {
+          @for $j from 1 through $i {
+            @include widthify($i, $j, $breakpoint);
+          }
+        } @else {
           @include widthify($i, 1, $breakpoint);
         }
       }

data/vendor/assets/stylesheets/sizing/_spacing.scss

@@ -14,6 +14,7 @@ $spacing: () !default;
 }
 
 $spacing-locations: (
+  auto: "auto",
   t: "top",
   r: "right",
   b: "bottom",
@@ -24,7 +25,7 @@ $spacing-locations: (
   ), x: (
     "left",
     "right"
-  )
+  ),
 );
 
 $types: (
@@ -41,6 +42,7 @@ $types: (
     @if $breakpoint != 0 {
       $bp: "#{$breakpoint}\\:";
       $s: "-#{$space}";
+      $important: !important;
     } @else {
       $s: "-#{$space}";
     }
@@ -68,10 +70,12 @@ $types: (
   @each $location, $location-value in $spacing-locations {
     @include paddingmargin($space, $value, 0, $location, $location-value);
   }
+}
 
-  @if $spacing-responsive {
+@if $spacing-responsive {
+  @each $space, $value in $spacing {
     @each $breakpoint, $breakpoint-value in $breakpoints {
-      @include mediaquery($breakpoint) {
+      @include breakpoint($breakpoint) {
         @include paddingmargin($space, $value, $breakpoint);
 
         @each $location, $location-value in $spacing-locations {

data/vendor/assets/stylesheets/text/_align.scss

@@ -0,0 +1,25 @@
+$text-align-responsive: true !default;
+
+$align: (
+  left,
+  center,
+  right
+);
+
+@each $value in $align {
+  .text-#{$value} {
+    text-align: $value;
+  }
+}
+
+@if $text-align-responsive {
+  @each $breakpoint, $breakpoint-value in $breakpoints {
+    @include breakpoint($breakpoint) {
+      @each $value in $align {
+        .#{$breakpoint}\:text-#{$value} {
+          text-align: $value;
+        }
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/text/_fonts.scss

@@ -0,0 +1,68 @@
+$sans-serif:  Frutiger,
+              "Frutiger Linotype",
+              Univers,
+              Calibri,
+              "Gill Sans",
+              "Gill Sans MT",
+              "Myriad Pro",
+              Myriad,
+              "DejaVu Sans Condensed",
+              "Liberation Sans",
+              "Nimbus Sans L",
+              Tahoma,
+              Geneva,
+              "Helvetica Neue",
+              Helvetica,
+              Arial,
+              sans-serif;
+
+$serif: "Palatino Linotype",
+        Palatino,
+        Palladio,
+        "URW Palladio L",
+        "Book Antiqua",
+        Baskerville,
+        "Bookman Old Style",
+        "Bitstream Charter",
+        "Nimbus Roman No9 L",
+        Garamond,
+        "Apple Garamond",
+        "ITC Garamond Narrow",
+        "New Century Schoolbook",
+        "Century Schoolbook",
+        "Century Schoolbook L",
+        Georgia,
+        serif;
+
+$monospace: "Palatino Linotype",
+            Palatino,
+            Palladio,
+            "URW Palladio L",
+            "Book Antiqua",
+            Baskerville,
+            "Bookman Old Style",
+            "Bitstream Charter",
+            "Nimbus Roman No9 L",
+            Garamond,
+            "Apple Garamond",
+            "ITC Garamond Narrow",
+            "New Century Schoolbook",
+            "Century Schoolbook",
+            "Century Schoolbook L",
+            Georgia,
+            serif;
+
+$font-families: () !default;
+@if $font-families == () {
+  $font-families: (
+    serif: $serif,
+    sans-serif: $sans-serif,
+    monospace: $monospace
+  );
+}
+
+@each $font-family, $value in $font-families {
+  .font-#{$font-family} {
+    font-family: $value;
+  }
+}

data/vendor/assets/stylesheets/text/_style.scss

@@ -0,0 +1,49 @@
+$decoration: (
+  overline,
+  line-through,
+  underline,
+  none
+);
+
+@each $value in $decoration {
+  .text-#{$value} {
+    text-decoration: $value;
+  }
+}
+
+$style: (
+  normal,
+  italic,
+  oblique
+);
+
+@each $value in $style {
+  .text-#{$value} {
+    font-style: $value;
+  }
+}
+
+$weight: (
+  lighter,
+  normal,
+  bold,
+  bolder
+);
+
+@each $value in $weight {
+  .text-#{$value} {
+    font-weight: $value;
+  }
+}
+
+$transform: (
+  lowercase,
+  uppercase,
+  capitalize
+);
+
+@each $value in $transform {
+  .text-#{$value} {
+    text-transform: $value;
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flake-scss
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Mitcheljager
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-11-05 00:00:00.000000000 Z
+date: 2017-11-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -59,15 +59,21 @@ files:
 - vendor/assets/stylesheets/_flake.scss
 - vendor/assets/stylesheets/_variables.scss
 - vendor/assets/stylesheets/background/_colors.scss
+- vendor/assets/stylesheets/border/_colors.scss
+- vendor/assets/stylesheets/border/_general.scss
 - vendor/assets/stylesheets/general/_display.scss
 - vendor/assets/stylesheets/general/_general.scss
+- vendor/assets/stylesheets/general/_position.scss
 - vendor/assets/stylesheets/helpers/_breakpoints.scss
 - vendor/assets/stylesheets/helpers/_colors-list.scss
 - vendor/assets/stylesheets/helpers/_functions.scss
 - vendor/assets/stylesheets/layout/_flex.scss
 - vendor/assets/stylesheets/sizing/_grid.scss
 - vendor/assets/stylesheets/sizing/_spacing.scss
+- vendor/assets/stylesheets/text/_align.scss
 - vendor/assets/stylesheets/text/_colors.scss
+- vendor/assets/stylesheets/text/_fonts.scss
+- vendor/assets/stylesheets/text/_style.scss
 homepage: https://github.com/Mitcheljager/flake-scss
 licenses:
 - MIT