feat(buttons): new with outlined variant

Orange-OpenSource · Oct 25, 2019 · 526bcef · 526bcef
1 parent 6b66a03
commit 526bcef
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 1 deletion.
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -139,6 +139,54 @@ fieldset:disabled a.btn {
   // No need for an active state here
 }
 
+// Boosted mod: icon buttons
+.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;
+}
+// end mod
+
 
 //
 // Button Sizes
@@ -147,18 +195,34 @@ fieldset:disabled a.btn {
 // Boosted mod
 .btn-xlg {
   @include button-size($btn-padding-y-xlg, $btn-padding-x-xlg, $font-size-xlg, $btn-line-height-xlg, $btn-border-radius-xlg);
+  &.btn-info,
+  &.btn-icon-outline {
+    padding: $btn-padding-y-xlg;
+  }
 }
 // end mod
 
 .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 {
+    padding: $btn-padding-y-lg;
+  }
+  // end mod
 }
 
 .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 {
+    padding: $btn-padding-y-sm;
+  }
+  // end mod
 }
 
-// Boosted mod for social links
+// Boosted mod: social buttons
 .btn-social {
   width: 2em;
   height: 2em;

diff --git a/site/docs/4.3/components/buttons.md b/site/docs/4.3/components/buttons.md
@@ -14,6 +14,14 @@ Boosted includes several predefined button styles, each serving its own semantic
 {% for color in site.data.theme-colors %}
 <button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% 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">
+    <span class="sr-only">Icon</span>
+    <span class="icon icon-settings" aria-hidden="true"></span>
+</button>
 {% endcapture %}
 {% include example.html content=example %}
 
@@ -28,6 +36,14 @@ 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 %}
     <button type="button" class="btn btn-inverse btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% 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">
+        <span class="sr-only">Icon</span>
+        <span class="icon icon-settings" aria-hidden="true"></span>
+    </button>
 </div>
 {% endcapture %}
 {% include example.html content=example %}