spectre_scss 0.4.2.0 → 0.4.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: be417767231d81cefdf51d3f739bce28c9bf9506
-  data.tar.gz: 2a15d5bc33ed6aef5555f27fe384a60229cfa994
+  metadata.gz: a21322a1c1f3732b1ddeb34f86b7b0d587a53bc4
+  data.tar.gz: 529555351cf07d6167362f95635a8e4f4326e7eb
 SHA512:
-  metadata.gz: 610caeff6cfc7cd4a5a23dd993ac77609d6e1d7eb2a60a52463edf12f4122b434ae153416a486b0e961cda2c5ba49134bc27b8ccde0625932f1a09feae27813d
-  data.tar.gz: fce31040f37c82992886d3b0f50a0b71c0053fa370562db26cd03e872aed6f065ea04a91919c120714ecc7fd88722a65da33c1a30c1ace20262c636ab78f4ae3
+  metadata.gz: 4257b974d3bc94d5b3687e747834ac9d9474c7e7eb715a29f55325b5a506cfbe955c623e47b224592345e572f0e088dfe2b72fcbc0cc6a924cd98cf4add6a25a
+  data.tar.gz: 876f830df1d7e9928cbc8d90aaa468c7ddd582131e55faf2a361d9ce0b6a4c9f3fce69a421569bb9cd62ca2f56070147f7271edb13725875e530835b47590073

data/lib/spectre_scss/version.rb

@@ -1,3 +1,3 @@
 module SpectreScss
-  VERSION = '0.4.2.0'
+  VERSION = '0.4.3.0'
 end

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

@@ -30,6 +30,7 @@
   }
 }
 
+// Remove default details marker in Webkit
 summary.accordion-header {
   &::-webkit-details-marker {
     display: none;

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

@@ -6,7 +6,7 @@
   color: rgba($light-color, .85);
   display: inline-block;
   font-weight: 300;
-  line-height: 1;
+  line-height: 1.25;
   margin: 0;
   position: relative;
   vertical-align: middle;

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

@@ -12,7 +12,7 @@
   height: $control-size;
   line-height: $line-height;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   text-align: center;
   text-decoration: none;
   user-select: none;
@@ -90,13 +90,13 @@
   &.btn-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm $control-padding-h * .75;
+    padding: $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.btn-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg $control-padding-h * 1.25;
+    padding: $control-padding-y-lg $control-padding-x-lg;
   }
 
   // Button Block

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

@@ -4,7 +4,7 @@
   border-radius: $border-radius;
   color: $gray-color-dark;
   text-align: center;
-  padding: 4 * $layout-spacing;
+  padding: $unit-16 $unit-8;
 
   .empty-icon {
     margin-bottom: $layout-spacing-lg;

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

@@ -1,4 +1,16 @@
-// Filters
+// Filters 
+// The number of filter options 
+$filter-number: 8 !default;
+
+%filter-checked-nav { 
+  background: $primary-color;
+  color: $light-color;
+}
+
+%filter-checked-body { 
+  display: none;
+}
+
 .filter {
   .filter-nav {
     margin: $layout-spacing 0;
@@ -10,20 +22,16 @@
   }
 
   .filter-tag {
-    &#tag-all:checked ~ .filter-nav .chip[for="tag-all"],
-    &#tag-action:checked ~ .filter-nav .chip[for="tag-action"],
-    &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
-    &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
-    &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
-      background: $primary-color;
-      color: $light-color;
+    @for $i from 0 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
+        @extend %filter-checked-nav;
+      }
     }
 
-    &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
-    &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]),
-    &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]),
-    &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) {
-      display: none;
+    @for $i from 1 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
+        @extend %filter-checked-body;
+      }
     }
   }
 }

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

@@ -18,14 +18,14 @@ legend {
 // Form element: Label
 .form-label {
   display: block;
-  padding: $control-padding-v + $border-width 0;
+  padding: $control-padding-y + $border-width 0;
 
   &.label-sm {
-    padding: $control-padding-v-sm + $border-width 0;
+    padding: $control-padding-y-sm + $border-width 0;
   }
 
   &.label-lg {
-    padding: $control-padding-v-lg + $border-width 0;
+    padding: $control-padding-y-lg + $border-width 0;
   }
 }
 
@@ -44,7 +44,7 @@ legend {
   line-height: $line-height;
   max-width: 100%;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   position: relative;
   width: 100%;
   &:focus {
@@ -59,13 +59,13 @@ legend {
   &.input-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm $control-padding-h;
+    padding: $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.input-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg $control-padding-h;
+    padding: $control-padding-y-lg $control-padding-x-lg;
   }
 
   &.input-inline {
@@ -112,7 +112,7 @@ textarea.form-input {
   height: $control-size;
   line-height: $line-height;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   vertical-align: middle;
   width: 100%;
 
@@ -125,8 +125,8 @@ textarea.form-input {
     }
   }
   &:not([multiple]):not([size]) {
-    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem;
-    padding-right: $control-icon-size + $control-padding-h;
+    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-x;
   }
   &:focus {
     @include control-shadow();
@@ -140,13 +140,13 @@ textarea.form-input {
   &.select-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h;
+    padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.select-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h;
+    padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
   }
 }
 
@@ -157,7 +157,7 @@ textarea.form-input {
 
   .form-icon {
     height: $control-icon-size;
-    margin: 0 $control-padding-v;
+    margin: 0 $control-padding-y;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -171,7 +171,7 @@ textarea.form-input {
   }
 
   .form-input {
-    padding-left: $control-icon-size + $control-padding-v * 2;
+    padding-left: $control-icon-size + $control-padding-y * 2;
   }
 }
 
@@ -181,7 +181,7 @@ textarea.form-input {
   }
 
   .form-input {
-    padding-right: $control-icon-size + $control-padding-v * 2;
+    padding-right: $control-icon-size + $control-padding-y * 2;
   }
 }
 
@@ -191,7 +191,7 @@ textarea.form-input {
 .form-switch {
   display: inline-block;
   line-height: $line-height;
-  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-h);
+  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-x);
   position: relative;
 
   input {
@@ -301,7 +301,7 @@ textarea.form-input {
 
 // Form element: Switch
 .form-switch {
-  padding-left: ($unit-8 + $control-padding-h);
+  padding-left: ($unit-8 + $control-padding-x);
 
   .form-icon {
     background: $gray-color-light;
@@ -348,15 +348,15 @@ textarea.form-input {
     border: $border-width solid $border-color-dark;
     border-radius: $border-radius;
     line-height: $line-height;
-    padding: $control-padding-v $control-padding-h;
+    padding: $control-padding-y $control-padding-x;
 
     &.addon-sm {
       font-size: $font-size-sm;
-      padding: $control-padding-v-sm $control-padding-h;
+      padding: $control-padding-y-sm $control-padding-x-sm;
     }
     &.addon-lg {
       font-size: $font-size-lg;
-      padding: $control-padding-v-lg $control-padding-h;
+      padding: $control-padding-y-lg $control-padding-x-lg;
     }
   }