spectre_scss 0.4.7.0 → 0.5.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1ea1d1c484c013cf10eefca580489847af1dd951
-  data.tar.gz: c162d74dbea4ab72fd64452d810d1756d7b62ebf
+  metadata.gz: 4ba4c16258024296594089eef45fe2e75e06fa34
+  data.tar.gz: 4df599e5e4f8632f4fb7d7ba5ef24f10c5d88d2a
 SHA512:
-  metadata.gz: ec24b709043beb84abbf250c2fe0346d0e6670f1fd356dcf3b4c2f5a92e8579fc6f2bf26ac7b52c2fdb698c4810332c339520d63ad529b0fabb2dc10e77ddb34
-  data.tar.gz: 77aedf675b407e0e5e778039892bb9a22e3c9ce38cd7f9069779627c6ef03e167f83b9742b8e5856aafb1562d9f4dc324a53d5b2728b9a8b286df51a8307140b
+  metadata.gz: 9d278869d2d61cde30e2fc67dd5df92e569179fa728ba27b0f4167ef5d6af6caa6710531cec22b56b3e97c160aa0b031bf06bfea913a0818dfda28703515cd02
+  data.tar.gz: 1cbdfd28b2d4865ccfe6c4270abfb6d7744dd8f1e22f79f3e7879d7d763b121864118596df55ae2bc620a2863a8cea4dded3d7fcb2e845d965d3121e2929bad3

data/lib/spectre_scss/version.rb

@@ -1,3 +1,3 @@
 module SpectreScss
-  VERSION = '0.4.7.0'
+  VERSION = '0.5.0.0'
 end

data/vendor/assets/stylesheets/spectre/_forms.scss

@@ -22,10 +22,12 @@ legend {
   padding: $control-padding-y + $border-width 0;
 
   &.label-sm {
+    font-size: $font-size-sm;
     padding: $control-padding-y-sm + $border-width 0;
   }
 
   &.label-lg {
+    font-size: $font-size-lg;
     padding: $control-padding-y-lg + $border-width 0;
   }
 }
@@ -192,7 +194,9 @@ textarea.form-input {
 .form-switch {
   display: inline-block;
   line-height: $line-height;
-  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-x);
+  margin: ($control-size - $control-size-sm) / 2 0;
+  min-height: 1.2rem;
+  padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
   position: relative;
 
   input {
@@ -219,6 +223,17 @@ textarea.form-input {
     display: inline-block;
     position: absolute;
   }
+
+  // Input checkbox, radio and switch sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    margin: ($control-size-lg - $control-size-sm) / 2 0;
+  }
 }
 
 .form-checkbox,
@@ -349,11 +364,13 @@ textarea.form-input {
     border-radius: $border-radius;
     line-height: $line-height;
     padding: $control-padding-y $control-padding-x;
+    white-space: nowrap;
 
     &.addon-sm {
       font-size: $font-size-sm;
       padding: $control-padding-y-sm $control-padding-x-sm;
     }
+
     &.addon-lg {
       font-size: $font-size-lg;
       padding: $control-padding-y-lg $control-padding-x-lg;
@@ -505,10 +522,4 @@ input {
   .form-group {
     display: flex;
   }
-
-  .form-checkbox,
-  .form-radio,
-  .form-switch {
-    margin: ($control-size - $control-size-sm) / 2 0;
-  }
 }

data/vendor/assets/stylesheets/spectre/_mixins.scss

@@ -1,187 +1,11 @@
 // Mixins
-// Avatar mixin
-@mixin avatar-base($size: $unit-8) {
-  font-size: $size / 2;
-  height: $size;
-  width: $size;
-}
-
-// Background color utility mixin
-@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
-  #{$name} {
-    background: $color;
-
-    @if (lightness($color) < 60) {
-      color: $light-color;
-    }
-  }
-}
-
-// Button variant mixin
-@mixin button-variant($color: $primary-color) {
-  background: $color;
-  border-color: darken($color, 3%);
-  color: $light-color;
-  &:focus {
-    @include control-shadow($color);
-  }
-  &:focus,
-  &:hover {
-    background: darken($color, 2%);
-    border-color: darken($color, 5%);
-    color: $light-color;
-  }
-  &:active,
-  &.active {
-    background: darken($color, 7%);
-    border-color: darken($color, 10%);
-    color: $light-color;
-  }
-  &.loading {
-    @extend .btn-primary.loading;
-  }
-}
-
-@mixin button-outline-variant($color: $primary-color) {
-  background: $light-color;
-  border-color: $color;
-  color: $color;
-  &:focus {
-    @include control-shadow($color);
-  }
-  &:focus,
-  &:hover {
-    background: lighten($color, 50%);
-    border-color: darken($color, 2%);
-    color: $color;
-  }
-  &:active,
-  &.active {
-    background: $color;
-    border-color: darken($color, 5%);
-    color: $light-color;
-  }
-  &.loading {
-    &::after {
-      border-bottom-color: $color;
-      border-left-color: $color;
-    }
-  }
-}
-
-// Clearfix mixin
-@mixin clearfix() {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
-
-// Component focus shadow
-@mixin control-shadow($color: $primary-color) {
-  box-shadow: 0 0 0 .1rem rgba($color, .2);
-}
-
-// Component transition
-@mixin control-transition() {
-  transition: all .2s ease;
-}
-
-// Label base style
-@mixin label-base() {
-  border-radius: $border-radius;
-  line-height: 1.2;
-  padding: .1rem .15rem;
-}
-
-@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
-  background: $bg-color;
-  color: $color;
-}
-
-// Margin utility mixin
-@mixin margin-variant($id: 1, $size: $unit-1) {
-  .m-#{$id} {
-    margin: $size;
-  }
-  .mb-#{$id} {
-    margin-bottom: $size;
-  }
-  .ml-#{$id} {
-    margin-left: $size;
-  }
-  .mr-#{$id} {
-    margin-right: $size;
-  }
-  .mt-#{$id} {
-    margin-top: $size;
-  }
-  .mx-#{$id} {
-    margin-left: $size;
-    margin-right: $size;
-  }
-  .my-#{$id} {
-    margin-bottom: $size;
-    margin-top: $size;
-  }
-}
-
-// Padding utility mixin
-@mixin padding-variant($id: 1, $size: $unit-1) {
-  .p-#{$id} {
-    padding: $size;
-  }
-  .pb-#{$id} {
-    padding-bottom: $size;
-  }
-  .pl-#{$id} {
-    padding-left: $size;
-  }
-  .pr-#{$id} {
-    padding-right: $size;
-  }
-  .pt-#{$id} {
-    padding-top: $size;
-  }
-  .px-#{$id} {
-    padding-left: $size;
-    padding-right: $size;
-  }
-  .py-#{$id} {
-    padding-bottom: $size;
-    padding-top: $size;
-  }
-}
-
-// Shadow mixin
-@mixin shadow-variant($offset) {
-  box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
-}
-
-// Text color utility mixin
-@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
-  #{$name} {
-    color: $color;
-  }
-
-  a#{$name} {
-    &:focus,
-    &:hover {
-      color: darken($color, 5%);
-    }
-  }
-}
-
-// Text Ellipsis
-@mixin text-ellipsis() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Toast variant mixin
-@mixin toast-variant($color: $dark-color) {
-  background: rgba($color, .9);
-  border-color: $color;
-}
+@import "mixins/avatar";
+@import "mixins/button";
+@import "mixins/clearfix";
+@import "mixins/color";
+@import "mixins/label";
+@import "mixins/position";
+@import "mixins/shadow";
+@import "mixins/text";
+@import "mixins/toast";
+@import "mixins/transition";

data/vendor/assets/stylesheets/spectre/_navbar.scss

@@ -10,7 +10,7 @@
     display: flex;
     flex: 1 0 0;
 
-    &:last-child {
+    &:not(:first-child):last-child {
       justify-content: flex-end;
     }
   }

data/vendor/assets/stylesheets/spectre/_off-canvas.scss

@@ -8,6 +8,15 @@ $off-canvas-breakpoint: $size-lg !default;
   position: relative;
   width: 100%;
 
+  .off-canvas-toggle {
+    display: block;
+    left: $layout-spacing;
+    position: absolute;
+    top: $layout-spacing;
+    transition: none;
+    z-index: $zindex-0;
+  }
+
   .off-canvas-sidebar {
     background: $bg-color;
     bottom: 0;
@@ -53,32 +62,21 @@ $off-canvas-breakpoint: $size-lg !default;
       z-index: $zindex-2;
     }
   }
-
-  .off-canvas-toggle {
-    display: block;
-    left: $layout-spacing;
-    position: absolute;
-    top: $layout-spacing;
-    transition: none;
-    z-index: $zindex-0;
-  }
 }
 
 // Responsive layout
 @media (min-width: $off-canvas-breakpoint) {
   .off-canvas {
-    .off-canvas-sidebar {
-      flex: 0 0 auto;
-      position: relative;
-      transform: none;
-    }
-
-    .off-canvas-content {
-      padding-left: $layout-spacing-lg;
-    }
-
-    .off-canvas-toggle {
-      display: none;
+    &.off-canvas-sidebar-show {
+      .off-canvas-toggle {
+        display: none;
+      }
+  
+      .off-canvas-sidebar {
+        flex: 0 0 auto;
+        position: relative;
+        transform: none;
+      }
     }
   }
 }

data/vendor/assets/stylesheets/spectre/_variables.scss

@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.4.7";
+$version: "0.5.0";
 
 // Core colors
 $primary-color: #5755d9 !default;

data/vendor/assets/stylesheets/spectre/mixins/_avatar.scss

@@ -0,0 +1,6 @@
+// Avatar mixin
+@mixin avatar-base($size: $unit-8) {
+  font-size: $size / 2;
+  height: $size;
+  width: $size;
+}

data/vendor/assets/stylesheets/spectre/mixins/_button.scss

@@ -0,0 +1,51 @@
+// Button variant mixin
+@mixin button-variant($color: $primary-color) {
+  background: $color;
+  border-color: darken($color, 3%);
+  color: $light-color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: darken($color, 2%);
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($color, 7%);
+    border-color: darken($color, 10%);
+    color: $light-color;
+  }
+  &.loading {
+    @extend .btn-primary.loading;
+  }
+}
+
+@mixin button-outline-variant($color: $primary-color) {
+  background: $light-color;
+  border-color: $color;
+  color: $color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten($color, 50%);
+    border-color: darken($color, 2%);
+    color: $color;
+  }
+  &:active,
+  &.active {
+    background: $color;
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $color;
+      border-left-color: $color;
+    }
+  }
+}

data/vendor/assets/stylesheets/spectre/mixins/_clearfix.scss

@@ -0,0 +1,8 @@
+// Clearfix mixin
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}

data/vendor/assets/stylesheets/spectre/mixins/_color.scss

@@ -0,0 +1,24 @@
+// Background color utility mixin
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color;
+
+    @if (lightness($color) < 60) {
+      color: $light-color;
+    }
+  }
+}
+
+// Text color utility mixin
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color;
+  }
+
+  a#{$name} {
+    &:focus,
+    &:hover {
+      color: darken($color, 5%);
+    }
+  }
+}

data/vendor/assets/stylesheets/spectre/mixins/_label.scss

@@ -0,0 +1,11 @@
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  line-height: 1.2;
+  padding: .1rem .15rem;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}

data/vendor/assets/stylesheets/spectre/mixins/_position.scss

@@ -0,0 +1,65 @@
+// Margin utility mixin
+@mixin margin-variant($id: 1, $size: $unit-1) {
+  .m-#{$id} {
+    margin: $size;
+  }
+
+  .mb-#{$id} {
+    margin-bottom: $size;
+  }
+
+  .ml-#{$id} {
+    margin-left: $size;
+  }
+
+  .mr-#{$id} {
+    margin-right: $size;
+  }
+
+  .mt-#{$id} {
+    margin-top: $size;
+  }
+
+  .mx-#{$id} {
+    margin-left: $size;
+    margin-right: $size;
+  }
+
+  .my-#{$id} {
+    margin-bottom: $size;
+    margin-top: $size;
+  }
+}
+
+// Padding utility mixin
+@mixin padding-variant($id: 1, $size: $unit-1) {
+  .p-#{$id} {
+    padding: $size;
+  }
+
+  .pb-#{$id} {
+    padding-bottom: $size;
+  }
+
+  .pl-#{$id} {
+    padding-left: $size;
+  }
+
+  .pr-#{$id} {
+    padding-right: $size;
+  }
+
+  .pt-#{$id} {
+    padding-top: $size;
+  }
+
+  .px-#{$id} {
+    padding-left: $size;
+    padding-right: $size;
+  }
+  
+  .py-#{$id} {
+    padding-bottom: $size;
+    padding-top: $size;
+  }
+}

data/vendor/assets/stylesheets/spectre/mixins/_shadow.scss

@@ -0,0 +1,9 @@
+// Component focus shadow
+@mixin control-shadow($color: $primary-color) {
+  box-shadow: 0 0 0 .1rem rgba($color, .2);
+}
+
+// Shadow mixin
+@mixin shadow-variant($offset) {
+  box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
+}

data/vendor/assets/stylesheets/spectre/mixins/_text.scss

@@ -0,0 +1,6 @@
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

data/vendor/assets/stylesheets/spectre/mixins/_toast.scss

@@ -0,0 +1,5 @@
+// Toast variant mixin
+@mixin toast-variant($color: $dark-color) {
+  background: rgba($color, .9);
+  border-color: $color;
+}

data/vendor/assets/stylesheets/spectre/mixins/_transition.scss

@@ -0,0 +1,4 @@
+// Component transition
+@mixin control-transition() {
+  transition: all .2s ease;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spectre_scss
 version: !ruby/object:Gem::Version
-  version: 0.4.7.0
+  version: 0.5.0.0
 platform: ruby
 authors:
 - Zoran
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-11-30 00:00:00.000000000 Z
+date: 2017-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -124,6 +124,16 @@ files:
 - vendor/assets/stylesheets/spectre/icons/_icons-core.scss
 - vendor/assets/stylesheets/spectre/icons/_icons-navigation.scss
 - vendor/assets/stylesheets/spectre/icons/_icons-object.scss
+- vendor/assets/stylesheets/spectre/mixins/_avatar.scss
+- vendor/assets/stylesheets/spectre/mixins/_button.scss
+- vendor/assets/stylesheets/spectre/mixins/_clearfix.scss
+- vendor/assets/stylesheets/spectre/mixins/_color.scss
+- vendor/assets/stylesheets/spectre/mixins/_label.scss
+- vendor/assets/stylesheets/spectre/mixins/_position.scss
+- vendor/assets/stylesheets/spectre/mixins/_shadow.scss
+- vendor/assets/stylesheets/spectre/mixins/_text.scss
+- vendor/assets/stylesheets/spectre/mixins/_toast.scss
+- vendor/assets/stylesheets/spectre/mixins/_transition.scss
 - vendor/assets/stylesheets/spectre/spectre-exp.scss
 - vendor/assets/stylesheets/spectre/spectre-icons.scss
 - vendor/assets/stylesheets/spectre/spectre.scss