Merge pull request #307 from picturepan2/0.4.4 v0.4.4

0.4.4

18 files changed, 72 insertions, 66 deletions

diff --git a/src/_badges.scss b/src/_badges.scss
index 9f1d734..554ab1b 100644
--- a/src/_badges.scss
+++ b/src/_badges.scss
@@ -19,16 +19,16 @@
   &[data-badge] {
     &::after {
       font-size: $font-size-sm;
-      height: 18px;
+      height: .9rem;
       line-height: 1;
-      min-width: 18px;
-      padding: 3px 5px;
+      min-width: .9rem;
+      padding: .1rem .2rem;
       text-align: center;
       white-space: nowrap;
     }
   }
   &:not([data-badge]),
-  &[data-badge=''] {
+  &[data-badge=""] {
     &::after {
       height: 6px;
       min-width: 6px;
diff --git a/src/_buttons.scss b/src/_buttons.scss
index c4dc0a6..fd990a4 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -129,13 +129,13 @@
     line-height: $unit-4;
     margin-left: $unit-1;
     margin-right: -2px;
-    opacity: .45;
-    padding: 0 2px;
+    opacity: 1;
+    padding: 0;
     text-decoration: none;
     width: $unit-4;
 
     &:hover {
-      opacity: .85;
+      opacity: .95;
     }
 
     &::before {
diff --git a/src/_calendars.scss b/src/_calendars.scss
index 05606dd..891f84d 100644
--- a/src/_calendars.scss
+++ b/src/_calendars.scss
@@ -52,6 +52,7 @@
       border-radius: 50%;
       color: $gray-color-dark;
       cursor: pointer;
+      font-size: $font-size-sm;
       height: $unit-7;
       line-height: $unit-5;
       outline: none;
diff --git a/src/_carousels.scss b/src/_carousels.scss
index d68c40a..ba87c96 100644
--- a/src/_carousels.scss
+++ b/src/_carousels.scss
@@ -94,7 +94,7 @@
         background: currentColor;
         content: "";
         display: block;
-        height: $border-width-lg;
+        height: $unit-h;
         position: absolute;
         top: .5rem;
         width: 100%;
diff --git a/src/_chips.scss b/src/_chips.scss
index 0610470..f6d7d6e 100644
--- a/src/_chips.scss
+++ b/src/_chips.scss
@@ -5,10 +5,12 @@
   border-radius: 5rem;
   color: $gray-color-dark;
   display: inline-flex;
+  font-size: 90%;
   height: $unit-6;
+  line-height: $unit-4;
   margin: $unit-h;
   max-width: 100%;
-  padding: $unit-h ($unit-2 + $unit-h);
+  padding: $unit-1 $unit-2;
   text-decoration: none;
   vertical-align: middle;
 
@@ -18,7 +20,7 @@
   }
 
   .avatar {
-    margin-left: -($unit-2 + $unit-h);
+    margin-left: -$unit-2;
     margin-right: $unit-1;
   }
 }
diff --git a/src/_codes.scss b/src/_codes.scss
index af7ac90..5b3580f 100644
--- a/src/_codes.scss
+++ b/src/_codes.scss
@@ -2,13 +2,12 @@
 code {
   @include label-base();
   @include label-variant($code-color, lighten($code-color, 33%));
-  font-size: .65rem;
+  font-size: 85%;
 }
 
 .code {
   border-radius: $border-radius;
   color: $body-font-color;
-  line-height: $line-height;
   position: relative;
 
   &::before {
@@ -24,7 +23,7 @@ code {
     background: $bg-color;
     color: inherit;
     display: block;
-    line-height: inherit;
+    line-height: 1.5;
     overflow-x: auto;
     padding: 1rem;
     width: 100%;
diff --git a/src/_forms.scss b/src/_forms.scss
index 3fa2c87..63dbd4f 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -18,6 +18,7 @@ legend {
 // Form element: Label
 .form-label {
   display: block;
+  line-height: $line-height;
   padding: $control-padding-y + $border-width 0;
 
   &.label-sm {
@@ -249,14 +250,14 @@ textarea.form-input {
         border-left-width: 0;
         border-top-width: 0;
         content: "";
-        height: 10px;
+        height: 12px;
         left: 50%;
-        margin-left: -3px;
-        margin-top: -6px;
+        margin-left: -4px;
+        margin-top: -8px;
         position: absolute;
         top: 50%;
         transform: rotate(45deg);
-        width: 6px;
+        width: 8px;
       }
     }
     &:indeterminate + .form-icon {
@@ -278,21 +279,20 @@ textarea.form-input {
 }
 .form-radio {
   .form-icon {
-    border-radius: $control-icon-size / 2;
+    border-radius: 50%;
   }
 
   input {
     &:checked + .form-icon {
       &::before {
         background: $bg-color-light;
-        border-radius: $border-radius;
+        border-radius: 50%;
         content: "";
         height: 4px;
         left: 50%;
-        margin-left: -2px;
-        margin-top: -2px;
         position: absolute;
         top: 50%;
+        transform: translate(-50%, -50%);
         width: 4px;
       }
     }
@@ -314,7 +314,7 @@ textarea.form-input {
     &::before {
       @include control-transition();
       background: $bg-color-light;
-      border-radius: $unit-2;
+      border-radius: 50%;
       content: "";
       display: block;
       height: $unit-4;
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 93788d2..2402dc8 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -90,8 +90,8 @@
 // Label base style
 @mixin label-base() {
   border-radius: $border-radius;
-  line-height: 1;
-  padding: .15rem;
+  line-height: 1.2;
+  padding: .1rem .15rem;
 }
 
 @mixin label-variant($color: $light-color, $bg-color: $primary-color) {
diff --git a/src/_modals.scss b/src/_modals.scss
index ced52a8..2f81ed7 100644
--- a/src/_modals.scss
+++ b/src/_modals.scss
@@ -40,6 +40,7 @@
   &.modal-sm {
     .modal-container {
       max-width: 320px;
+      padding: 0 $unit-2;
     }
   }
 
@@ -60,26 +61,22 @@
   background: $bg-color-light;
   border-radius: $border-radius;
   display: block;
-  padding: 0;
+  padding: 0 $unit-4;
   text-align: left;
 
   .modal-header {
-    padding: $unit-4 $unit-6;
-
-    .modal-title {
-      margin: 0;
-    }
+    padding: $unit-4;
   }
 
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
-    padding: $unit-4 $unit-6;
+    padding: $unit-4;
     position: relative;
   }
 
   .modal-footer {
-    padding: $unit-4 $unit-6;
+    padding: $unit-4;
     text-align: right;
   }
 }
diff --git a/src/_tabs.scss b/src/_tabs.scss
index e9f9e2e..0dcbaf3 100644
--- a/src/_tabs.scss
+++ b/src/_tabs.scss
@@ -10,11 +10,6 @@
   .tab-item {
     margin-top: 0;
 
-    &.tab-action {
-      flex: 1 0 auto;
-      text-align: right;
-    }
-
     a {
       border-bottom: $border-width-lg solid transparent;
       color: inherit;
@@ -32,6 +27,15 @@
       border-bottom-color: $primary-color;
       color: $link-color;
     }
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    .btn-clear {
+      margin-top: -$unit-1;
+    }
   }
 
   &.tab-block {
@@ -46,8 +50,8 @@
       .badge {
         &[data-badge]::after {
           position: absolute;
-          right: -4px;
-          top: -4px;
+          right: $unit-h;
+          top: $unit-h;
           transform: translate(0, 0);
         }
       }
@@ -56,7 +60,7 @@
 
   &:not(.tab-block) {
     .badge {
-      padding-right: 2px;
+      padding-right: 0;
     }
   }
 }
diff --git a/src/_timelines.scss b/src/_timelines.scss
index 88cae04..67041a8 100644
--- a/src/_timelines.scss
+++ b/src/_timelines.scss
@@ -44,7 +44,6 @@
 
       &.icon-lg {
         background: $primary-color;
-        font-size: $font-size-lg;
         line-height: $line-height;
         &::before {
           content: none;
diff --git a/src/_toasts.scss b/src/_toasts.scss
index 99b2e2a..61e7c5f 100644
--- a/src/_toasts.scss
+++ b/src/_toasts.scss
@@ -37,6 +37,6 @@
   }
 
   .btn-clear {
-    margin: 2px -2px 2px 4px;
+    margin: 4px -2px 4px 4px;
   }
 }
diff --git a/src/_typography.scss b/src/_typography.scss
index 17b7f7c..d15d39e 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -9,7 +9,7 @@ h6 {
   color: inherit;
   font-weight: 500;
   line-height: 1.2;
-  margin-bottom: .25em;
+  margin-bottom: .5em;
   margin-top: 0;
 }
 .h1,
@@ -47,8 +47,7 @@ h6,
 
 // Paragraphs
 p {
-  line-height: 1.2 * $line-height;
-  margin: 0 0 $unit-4;
+  margin: 0 0 $line-height;
 }
 
 // Semantic text elements
@@ -67,7 +66,7 @@ abbr[title] {
 kbd {
   @include label-base();
   @include label-variant($light-color, $dark-color);
-  font-size: .65rem;
+  font-size: $font-size-sm;
 }
 
 mark {
diff --git a/src/_variables.scss b/src/_variables.scss
index 2068adc..be56711 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,6 @@
 // Core variables
-// Colors
+$version: "0.4.4";
+
 // Core colors
 $primary-color: #5755d9 !default;
 $primary-color-dark: darken($primary-color, 3%) !default;
@@ -8,14 +9,11 @@ $secondary-color: lighten($primary-color, 37.5%) !default;
 $secondary-color-dark: darken($secondary-color, 3%) !default;
 $secondary-color-light: lighten($secondary-color, 3%) !default;
 
-$link-color: $primary-color !default;
-$link-color-dark: darken($link-color, 5%) !default;
-
 // Gray colors
 $dark-color: #454d5d !default;
 $light-color: #fff !default;
 $gray-color: lighten($dark-color, 40%) !default;
-$gray-color-dark: darken($gray-color, 20%) !default;
+$gray-color-dark: darken($gray-color, 25%) !default;
 $gray-color-light: lighten($gray-color, 20%) !default;
 
 $border-color: lighten($dark-color, 60%) !default;
@@ -34,6 +32,8 @@ $code-color: #e06870 !default;
 $highlight-color: #ffe9b3 !default;
 $body-bg: $bg-color-light !default;
 $body-font-color: lighten($dark-color, 5%) !default;
+$link-color: $primary-color !default;
+$link-color-dark: darken($link-color, 5%) !default;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
@@ -63,10 +63,10 @@ $unit-16: 3.2rem !default;
 
 // Font sizes
 $html-font-size: 20px !default;
-$html-line-height: 1.428571429 !default;
-$font-size: .7rem !default;
-$font-size-sm: .6rem !default;
-$font-size-lg: .8rem !default;
+$html-line-height: 1.5 !default;
+$font-size: .8rem !default;
+$font-size-sm: .7rem !default;
+$font-size-lg: .9rem !default;
 $line-height: 1rem !default;
 
 // Sizes
@@ -76,8 +76,8 @@ $layout-spacing-lg: $unit-4 !default;
 $border-radius: $unit-h !default;
 $border-width: $unit-o !default;
 $border-width-lg: $unit-h !default;
-$control-size: $unit-8 !default;
-$control-size-sm: $unit-6 !default;
+$control-size: $unit-9 !default;
+$control-size-sm: $unit-7 !default;
 $control-size-lg: $unit-10 !default;
 $control-padding-x: $unit-2 !default;
 $control-padding-x-sm: $unit-2 * .75 !default;
@@ -85,7 +85,7 @@ $control-padding-x-lg: $unit-2 * 1.5 !default;
 $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
 $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
 $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
-$control-icon-size: .7rem !default;
+$control-icon-size: .8rem !default;
 $control-min-width: 180px !default;
 $control-max-width: 320px !default;
 
diff --git a/src/icons/_icons-core.scss b/src/icons/_icons-core.scss
index 1bcc10e..577024d 100644
--- a/src/icons/_icons-core.scss
+++ b/src/icons/_icons-core.scss
@@ -45,3 +45,9 @@ $icon-prefix: "icon";
     vertical-align: -10%;
   }
 }
+
+.btn-lg {
+  .#{$icon-prefix} {
+    vertical-align: -15%;
+  }
+}
diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss
index e0de331..ebbad57 100644
--- a/src/spectre-exp.scss
+++ b/src/spectre-exp.scss
@@ -1,8 +1,8 @@
-/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
-// Core variables and mixins
+// Variables and mixins
 @import "variables";
 @import "mixins";
 
+/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
 // Experimentals
 @import "calendars";
 @import "carousels";
diff --git a/src/spectre-icons.scss b/src/spectre-icons.scss
index 63c8034..383624e 100644
--- a/src/spectre-icons.scss
+++ b/src/spectre-icons.scss
@@ -1,9 +1,8 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */
-
-// Core variables and mixins
+// Variables and mixins
 @import "variables";
 @import "mixins";
 
+/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
 // Icons
 @import "icons/icons-core";
 @import "icons/icons-navigation";
diff --git a/src/spectre.scss b/src/spectre.scss
index 2942147..42502a6 100644
--- a/src/spectre.scss
+++ b/src/spectre.scss
@@ -1,13 +1,13 @@
-/*! Spectre.css | MIT License | github.com/picturepan2/spectre */
-// Core variables and mixins
+// Variables and mixins
 @import "variables";
 @import "mixins";
 
+/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
 // Reset and dependencies
 @import "normalize";
 @import "base";
 
-// Core classes
+// Elements
 @import "typography";
 @import "asian";
 @import "tables";