feat(buttons): simpler icon button, thanks to buttons stencil update

Orange-OpenSource · Oct 29, 2019 · be155d2 · be155d2
1 parent d12c4a2
commit be155d2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 66 deletions.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -147,51 +147,11 @@ fieldset:disabled a.btn {
   // No need for an active state here
 }
 
-// Boosted mod: icon buttons
+// Boosted mod: icon buttons are squared
 .btn-icon {
   padding: $btn-padding-y;
   // stylelint-disable-next-line declaration-no-important
-  line-height: 1 !important; // Ensure .btn-icon is squared
-  color: $link-color;
-  outline-offset: $border-width * 2;
-  @include transition($transition-focus);
-
-  &.btn-inverse,
-  &.btn-inverse:hover {
-    color: $white;
-  }
-
-  &:hover {
-    color: $link-color;
-    border-color: $gray-500;
-  }
-
-  &:focus,
-  &.focus {
-    border-color: $gray-500;
-    outline: $border-width solid $gray-500;
-    outline-offset: -#{$border-width};
-    box-shadow: $input-btn-focus-box-shadow;
-  }
-
-  &:active,
-  &.active {
-    color: theme-color("primary");
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $gray-500;
-    pointer-events: none;
-  }
-}
-
-.btn-icon-outline {
-  @extend .btn-secondary;
-  padding: $btn-padding-y;
-  // stylelint-disable-next-line declaration-no-important
-  line-height: 1 !important; // Ensure .btn-icon is squared
-  border-color: $gray-500;
+  line-height: .875 !important; // Ensure .btn-icon is squared
 }
 // end mod
 
@@ -203,8 +163,7 @@ fieldset:disabled a.btn {
 .btn-lg {
   @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
   // Boosted mod
-  &.btn-info,
-  &.btn-icon-outline {
+  &.btn-info {
     padding: $btn-padding-y-lg;
   }
   // end mod
@@ -213,8 +172,7 @@ fieldset:disabled a.btn {
 .btn-sm {
   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
   // Boosted mod
-  &.btn-info,
-  &.btn-icon-outline {
+  &.btn-info {
     padding: $btn-padding-y-sm;
   }
   // end mod

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -268,7 +268,6 @@ $border-width:                2px !default;
 $border-color:                theme-color("dark") !default;
 
 $border-radius:               .25rem !default;
-$border-radius-xlg:           .4rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-sm:            .2rem !default;
 
@@ -467,10 +466,6 @@ $input-btn-padding-x-lg:      1.25rem !default;
 $input-btn-font-size-lg:      $font-size-lg !default;
 $input-btn-line-height-lg:    $line-height-lg !default;
 
-$input-btn-padding-y-xlg:     .8125rem !default;
-$input-btn-padding-x-xlg:     1.25rem !default;
-$input-btn-line-height-xlg:   1.5 !default;
-
 $input-btn-border-width:      $border-width !default;
 
 
@@ -494,10 +489,6 @@ $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
 $btn-font-size-lg:            $input-btn-font-size-lg !default;
 $btn-line-height-lg:          $input-btn-line-height-lg !default;
 
-$btn-padding-y-xlg:           $input-btn-padding-y-xlg !default;
-$btn-padding-x-xlg:           $input-btn-padding-x-xlg !default;
-$btn-line-height-xlg:         $input-btn-line-height-xlg !default;
-
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-bold !default;
@@ -513,7 +504,6 @@ $btn-block-spacing-y:         .5rem !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           $border-radius !default;
-$btn-border-radius-xlg:       $border-radius-xlg !default;
 $btn-border-radius-lg:        $border-radius-lg !default;
 $btn-border-radius-sm:        $border-radius-sm !default;
 

diff --git a/site/docs/4.3/components/buttons.md b/site/docs/4.3/components/buttons.md
@@ -14,11 +14,7 @@ Boosted includes several predefined button styles, each serving its own semantic
 {% for color in site.data.theme-colors %}{% if color.name != 'light' and color.name != 'dark' %}
 <button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endif %}{% endfor %}
 <button type="button" class="btn btn-link">Link</button>
-<button type="button" class="btn btn-icon">
-    <span class="sr-only">Icon</span>
-    <span class="icon icon-settings" aria-hidden="true"></span>
-</button>
-<button type="button" class="btn btn-icon-outline">
+<button type="button" class="btn btn-secondary btn-icon">
     <span class="sr-only">Icon</span>
     <span class="icon icon-settings" aria-hidden="true"></span>
 </button>
@@ -36,11 +32,7 @@ To get the inversed button behaviour, simply add `.btn-inverse` class to your `<
 <div class="bg-dark p-3">{% for color in site.data.theme-colors %}{% if color.name != 'light' and color.name != 'dark' %}
     <button type="button" class="btn btn-inverse btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endif %}{% endfor %}
     <button type="button" class="btn btn-inverse btn-link">Link</button>
-    <button type="button" class="btn btn-inverse btn-icon">
-        <span class="sr-only">Icon</span>
-        <span class="icon icon-settings" aria-hidden="true"></span>
-    </button>
-    <button type="button" class="btn btn-inverse btn-icon-outline">
+    <button type="button" class="btn btn-inverse btn-secondary btn-icon">
         <span class="sr-only">Icon</span>
         <span class="icon icon-settings" aria-hidden="true"></span>
     </button>