hootstrap 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cc6bd784cded17d07383a7e7d2ea984087206cff
-  data.tar.gz: 20f73f391c359f9ca99f97250ea37b6938c8b6a3
+  metadata.gz: da868be7ee40e74865380df9c13233011ea353ce
+  data.tar.gz: 3cdc24150b46e029948ddb9f3c06c7a397808e3f
 SHA512:
-  metadata.gz: fe25819f5212424580b9274126920bbfa997a5c835408477196d1cefb50212dc024cc359f5c0c72a192db8febf1b1c4f9fb0422c667944974f8eee01d279024a
-  data.tar.gz: 1aec8e30bc0effb469e57fcea284dd88044b814aec1ebb1daf292e0a11be97ba028949ca036ef9abcff320f04ef7ffb8bc849291547566163e650d2bca2deb19
+  metadata.gz: 7f12d2164af5ce0541cceea7750ef98ef530fd5172bd4035dde02b97e06bbcdbccc7f225f245d668dabb41024266a9e18e08cb29f14077b721238b6264814fda
+  data.tar.gz: 5d9a56e5838cefb7f3e849f894da3d70085824dd098688212fe83247044448688887698cfc79b02ca192798d4d479cbdefca74a72a6f04031a10a529691ee625

data/assets/stylesheets/hootstrap/base/_variables.scss

@@ -96,7 +96,7 @@ $theme-color-interval: 8%;
 $enable-caret: true;
 $enable-rounded: true;
 $enable-shadows: true;
-$enable-gradients: true;
+$enable-gradients: false;
 $enable-transitions: true;
 $enable-hover-media-query: true;
 $enable-grid-classes: true;
@@ -308,6 +308,10 @@ $input-btn-padding-y: .375rem;
 $input-btn-padding-x: .75rem;
 $input-btn-line-height: $line-height-base;
 
+$input-btn-focus-width: 0.15rem;
+$input-btn-focus-color: rgba($component-active-bg, 0.25);
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
+
 $input-btn-padding-y-sm: .25rem;
 $input-btn-padding-x-sm: .5rem;
 $input-btn-line-height-sm: $line-height-sm;
@@ -316,10 +320,14 @@ $input-btn-padding-y-lg: .5rem;
 $input-btn-padding-x-lg: 1rem;
 $input-btn-line-height-lg: $line-height-lg;
 
+$btn-padding-y: 0.4375rem;
+$btn-padding-x: 0.8125rem;
 $btn-font-weight: $font-weight-normal;
-$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
+$btn-box-shadow: 0 1px 1px rgba($black, .075);
+$btn-focus-width: $input-btn-focus-width;
+$btn-hover-box-shadow: 0 3px 5px rgba($black, .125);
 $btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25);
-$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
+$btn-active-box-shadow: 0 3px 5px rgba($black, .125);
 
 $btn-link-disabled-color: $gray-600;
 
@@ -349,7 +357,7 @@ $input-border-radius-sm: $border-radius-sm;
 
 $input-focus-bg: $input-bg;
 $input-focus-border-color: $blue;
-$input-focus-box-shadow: inset 0 0 1px rgba($blue, 0.75);
+$input-focus-box-shadow: $input-btn-focus-box-shadow;
 $input-focus-color: $input-color;
 
 $input-placeholder-color: $gray-600;
@@ -458,9 +466,8 @@ $custom-select-border-width: $input-btn-border-width;
 $custom-select-border-color: $input-border-color;
 $custom-select-border-radius: $border-radius;
 
-$custom-select-focus-border-color: lighten(theme-color("primary"), 25%);
-$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075),
-  0 0 5px rgba($custom-select-focus-border-color, .5);
+$custom-select-focus-border-color: $input-focus-border-color;
+$custom-select-focus-box-shadow: $input-focus-box-shadow;
 
 $custom-select-font-size-sm: 75%;
 $custom-select-height-sm: $input-height-sm;

data/assets/stylesheets/hootstrap/base/mixins/_button.scss

@@ -3,41 +3,53 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variants($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
+@mixin button-variants($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
   color: color-yiq($background);
-  background: linear-gradient(to right, $background, lighten($background, 5%));
-  background-color: $background;
+  @include gradient-bg($background);
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   @include hover {
-    color: color-yiq($active-background);
-    background: linear-gradient(to right, $active-background, $background);
-    background-color: $active-background;
-    border-color: $active-border;
-    // box-shadow: 0 1px 1px 0 rgba($gray-dark, 0.15);
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
   }
 
   &:focus,
   &.focus {
-    background-color: $active-background;
-    box-shadow: 0 0 0 1px $white, 0 0 0 3px rgba($active-background, 0.25);
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+    } @else {
+      box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+    }
   }
 
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
+    color: color-yiq($background);
     background-color: $background;
     border-color: $border;
-    pointer-events: none;
   }
 
-  &:active,
-  &.active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
     background-color: $active-background;
-    background-image: none; // Remove the gradient for the pressed/active state
+    @if $enable-gradients {
+      background-image: none; // Remove the gradient for the pressed/active state
+    }
     border-color: $active-border;
-    @include box-shadow($btn-active-box-shadow);
+
+    &:focus {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+      }
+    }
   }
 }

data/lib/hootstrap/version.rb

@@ -1,3 +1,3 @@
 module Hootstrap
-  VERSION = '0.2.0'
+  VERSION = '0.3.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hootstrap
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Justin Licata
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-01 00:00:00.000000000 Z
+date: 2018-03-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.0.0.beta
+        version: '4.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.0.0.beta
+        version: '4.0'
 description: The design system of ProctorU, including components, patterns, and utilities.
 email:
 - jlicata@proctoru.com