Merge pull request #551 from picturepan2/0.5.8 v0.5.8

0.5.8

7 files changed, 56 insertions, 29 deletions

diff --git a/src/_forms.scss b/src/_forms.scss
index c9f011a..20a6b4f 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -203,7 +203,7 @@ textarea.form-input {
   display: block;
   line-height: $line-height;
   margin: ($control-size - $control-size-sm) / 2 0;
-  min-height: 1.2rem;
+  min-height: $control-size-sm;
   padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
   position: relative;
 
diff --git a/src/_layout.scss b/src/_layout.scss
index b416e6b..1f6b77c 100644
--- a/src/_layout.scss
+++ b/src/_layout.scss
@@ -76,7 +76,8 @@
   &.col-4,
   &.col-3,
   &.col-2,
-  &.col-1 {
+  &.col-1,
+  &.col-auto {
     flex: none;
   }
 }
@@ -143,7 +144,8 @@
   .col-xl-4,
   .col-xl-3,
   .col-xl-2,
-  .col-xl-1 {
+  .col-xl-1,
+  .col-xl-auto {
     flex: none;
   }
   .col-xl-12 {
@@ -182,6 +184,9 @@
   .col-xl-1 {
     width: 8.33333333%;
   }
+  .col-xl-auto {
+    width: auto;
+  }
   .hide-xl {
     display: none !important;
   }
@@ -201,7 +206,8 @@
   .col-lg-4,
   .col-lg-3,
   .col-lg-2,
-  .col-lg-1 {
+  .col-lg-1,
+  .col-lg-auto {
     flex: none;
   }
   .col-lg-12 {
@@ -240,6 +246,9 @@
   .col-lg-1 {
     width: 8.33333333%;
   }
+  .col-lg-auto {
+    width: auto;
+  }
   .hide-lg {
     display: none !important;
   }
@@ -259,7 +268,8 @@
   .col-md-4,
   .col-md-3,
   .col-md-2,
-  .col-md-1 {
+  .col-md-1,
+  .col-md-auto {
     flex: none;
   }
   .col-md-12 {
@@ -298,6 +308,9 @@
   .col-md-1 {
     width: 8.33333333%;
   }
+  .col-md-auto {
+    width: auto;
+  }
   .hide-md {
     display: none !important;
   }
@@ -317,7 +330,8 @@
   .col-sm-4,
   .col-sm-3,
   .col-sm-2,
-  .col-sm-1 {
+  .col-sm-1,
+  .col-sm-auto {
     flex: none;
   }
   .col-sm-12 {
@@ -356,6 +370,9 @@
   .col-sm-1 {
     width: 8.33333333%;
   }
+  .col-sm-auto {
+    width: auto;
+  }
   .hide-sm {
     display: none !important;
   }
@@ -375,7 +392,8 @@
   .col-xs-4,
   .col-xs-3,
   .col-xs-2,
-  .col-xs-1 {
+  .col-xs-1,
+  .col-xs-auto {
     flex: none;
   }
   .col-xs-12 {
@@ -414,6 +432,9 @@
   .col-xs-1 {
     width: 8.33333333%;
   }
+  .col-xs-auto {
+    width: auto;
+  }
   .hide-xs {
     display: none !important;
   }
diff --git a/src/_menus.scss b/src/_menus.scss
index 5bc5ef8..411cada 100644
--- a/src/_menus.scss
+++ b/src/_menus.scss
@@ -18,8 +18,8 @@
   .menu-item {
     margin-top: 0;
     padding: 0 $unit-2;
+    position: relative;
     text-decoration: none;
-    user-select: none;
 
     & > a {
       border-radius: $border-radius;
@@ -52,11 +52,15 @@
   }
 
   .menu-badge {
-    float: right;
-    padding: $unit-1 0;
+    align-items: center;
+    display: flex;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
 
-    .btn {
-      margin-top: -$unit-h;
+    .label {
+      margin-right: $unit-2;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/_variables.scss b/src/_variables.scss
index e8c846c..7bf1a13 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.5.7";
+$version: "0.5.8";
 
 // Core features
 $rtl: false !default;
@@ -21,6 +21,7 @@ $gray-color-light: lighten($gray-color, 20%) !default;
 
 $border-color: lighten($dark-color, 65%) !default;
 $border-color-dark: darken($border-color, 10%) !default;
+$border-color-light: lighten($border-color, 8%) !default;
 $bg-color: lighten($dark-color, 75%) !default;
 $bg-color-dark: darken($bg-color, 3%) !default;
 $bg-color-light: $light-color !default;
diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss
index add0cf6..c1b8928 100644
--- a/src/_viewer-360.scss
+++ b/src/_viewer-360.scss
@@ -1,19 +1,21 @@
 // 360 Degree Viewer
-// The number of images 
-$image-height: 9rem;
-$image-number: 36 !default;
-$image-width: 24rem;
 
-.viewer-360 {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  
+// Mixin: Viewer slider sizes
+@mixin viewer-slider-size($image-number: 36) {
   @for $s from 1 through ($image-number) {
-    .viewer-slider[value='#{$s}'] + .viewer-image {
+    .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
       background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
     }
   }
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  // Copy and add more numbers if you need
+  @include viewer-slider-size(36);
 
   .viewer-slider {
     cursor: ew-resize;
@@ -26,8 +28,7 @@ $image-width: 24rem;
     background-position-y: 0;
     background-repeat: no-repeat;
     background-size: 100%;
-    height: $image-height;
+    max-width: 100%;
     order: 1;
-    width: $image-width;
   }
-}
+}
\ No newline at end of file
diff --git a/src/mixins/_label.scss b/src/mixins/_label.scss
index 70dcac3..1574f02 100644
--- a/src/mixins/_label.scss
+++ b/src/mixins/_label.scss
@@ -1,7 +1,7 @@
 // Label base style
 @mixin label-base() {
   border-radius: $border-radius;
-  line-height: 1.2;
+  line-height: 1.25;
   padding: .1rem .2rem;
 }
 
diff --git a/src/utilities/_divider.scss b/src/utilities/_divider.scss
index 5d0feb2..e6c09d2 100644
--- a/src/utilities/_divider.scss
+++ b/src/utilities/_divider.scss
@@ -16,7 +16,7 @@
 }
 
 .divider {
-  border-top: $border-width solid $border-color;
+  border-top: $border-width solid $border-color-light;
   height: $border-width;
   margin: $unit-2 0;