Button code cleanup (#22951)

* use a mixin there
* revamp .btn-link to match default and outline variants
* remove unnecessary properties

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 30a14d88333674e8b45b4aaac603a58b58931ecd..4063506825ed72a2213287d5939f0a12a7d4d22d 100644 (file)
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -10,7 +10,6 @@
   > .btn {
     position: relative;
     flex: 0 1 auto;
-    margin-bottom: 0;
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
@@ -66,15 +65,18 @@
 .btn-group > .btn-group {
   float: left;
 }
+
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
+
 .btn-group > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
     @include border-right-radius(0);
   }
 }
+
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
   @include border-left-radius(0);
 }
@@ -129,7 +131,6 @@
 //
 
 .btn-group-vertical {
-  display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
@@ -146,30 +147,35 @@
     margin-top: -$input-btn-border-width;
     margin-left: 0;
   }
-}
 
-.btn-group-vertical > .btn {
-  &:not(:first-child):not(:last-child) {
-    border-radius: 0;
+  > .btn {
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
   }
+
   &:first-child:not(:last-child) {
     @include border-bottom-radius(0);
   }
+
   &:last-child:not(:first-child) {
     @include border-top-radius(0);
   }
-}
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
-  border-radius: 0;
-}
-.btn-group-vertical > .btn-group:first-child:not(:last-child) {
-  > .btn:last-child,
-  > .dropdown-toggle {
-    @include border-bottom-radius(0);
+
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
+    border-radius: 0;
+  }
+
+  > .btn-group:first-child:not(:last-child) {
+    > .btn:last-child,
+    > .dropdown-toggle {
+      @include border-bottom-radius(0);
+    }
+  }
+
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
+    @include border-top-radius(0);
   }
-}
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  @include border-top-radius(0);
 }
 
 

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 607f24a2d0e97da55c25de5cd265d7f40fb846be..a708560b3e26603b6535f12fc77c704c115daae2 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -71,36 +71,28 @@ fieldset[disabled] a.btn {
 .btn-link {
   font-weight: $font-weight-normal;
   color: $link-color;
+  background-color: transparent;
   border-radius: 0;
 
-  &,
-  &:active,
-  &.active,
-  &:disabled {
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
     background-color: transparent;
-    @include box-shadow(none);
+    border-color: transparent;
   }
-  &,
+
   &:focus,
-  &:active {
+  &.focus {
     border-color: transparent;
     box-shadow: none;
   }
-  @include hover {
-    border-color: transparent;
-  }
-  @include hover-focus {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-    background-color: transparent;
-  }
-  &:disabled {
-    color: $btn-link-disabled-color;
 
-    @include hover-focus {
-      text-decoration: none;
-    }
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
   }
+
+  // No need for an active state here
 }
 
 

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index f7ec5764e7bd317e1d6e21cb06472c2d38370abf..312a18f1d8f9c2dcacde8a5558c248b1ee537935 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -9,7 +9,7 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
-  &:hover {
+  @include hover {
     @include color-yiq($background);
     background-color: $active-background;
     border-color: $active-border;