pull in v11.0.1 from upstream

resources/css/components/_button.scss

@@ -0,0 +1,108 @@
+button {
+  &%block,
+  &.block {
+    background-color: transparent;
+    border: none;
+    font-size: 1em;
+    padding: 0;
+  }
+}
+
+button,
+input[type="submit"] {
+  &.button {
+    appearance: none;
+  }
+}
+
+%button,
+.button {
+  display: inline-block;
+  padding: 0.5em 1.25em;
+  border: 0.125em solid $black;
+  border-radius: 0.25em;
+  background-color: $black;
+  color: $white;
+  font-family: $font;
+  font-weight: 700;
+  text-decoration: none;
+  white-space: normal;
+  cursor: pointer;
+  transition: 300ms ease all;
+
+  .knockout & {
+    background-color: $white;
+    border-color: $white;
+    color: currentcolor;
+  }
+
+  &:hover,
+  &:focus {
+    color: $white;
+    text-decoration: none;
+    background-color: rgba($black, 0.5);
+    border-color: rgba($black, 0.5);
+
+    .knockout & {
+      background-color: rgba($white, 0.5);
+      border-color: rgba($white, 0.5);
+      color: currentcolor;
+    }
+  }
+
+  &.outline {
+    border-color: $black;
+    background-color: transparent;
+    color: $black;
+
+    &:hover,
+    &:focus {
+      background-color: $black;
+      color: $white;
+    }
+
+    .knockout & {
+      @media screen {
+        border-color: $white;
+        color: $white;
+
+        &:hover,
+        &:focus {
+          background-color: $white;
+          color: $black;
+        }
+      }
+    }
+  }
+
+  &.wide {
+    padding-right: 3em;
+    padding-left: 3em;
+  }
+
+  &.thin {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+  }
+
+  &.full {
+    display: block;
+    width: 100%;
+    padding-right: 0.625em;
+    padding-left: 0.625em;
+    text-align: center;
+  }
+
+  &.small { font-size: 1em; }
+  &.smaller { font-size: 0.875em; }
+  &.big { font-size: 1.25em; }
+  &.bigger { font-size: 1.5em; }
+}
+
+.button-wrap {
+  margin: 1.5em -0.25em -0.25em;
+
+  .button {
+    margin: 0.25em;
+  }
+}