add DotButton component

2021-05-23 21:43:17 +02:00
parent 1405617850
commit 5fcb01d3a6
2 changed files with 120 additions and 0 deletions
@@ -48,3 +48,54 @@
  }
 }

+@mixin dot-button-variant(
+  $background,
+  $border,
+  $hover-background: darken($background, 7.5%),
+  $hover-border: lighten($border, 5%),
+  $active-background: $background,
+  $active-border: $border
+) {
+  color: color-yiq($background);
+  background-color: lighten($background, 15%);
+  @if $background == $white {
+    border-color: $black;
+    border-width: 3px;
+  } @else {
+    border-color: lighten($border, 15%);
+  }
+
+  &:focus,
+  &.focus {
+    color: color-yiq($hover-background);
+    @if $background == $white {
+      border-color: $black;
+    } @else {
+      border-color: $hover-border;
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  // &.disabled,
+  // &:disabled {
+  //   color: color-yiq($background);
+  //   background-color: $background;
+  //   border-color: $border;
+  // }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    @if $background == $white {
+      border-color: $black;
+    } @else {
+      border-color: $active-border;
+
+      &:focus {
+        border-color: $hover-border;
+      }
+    }
+  }
+}