1 files changed, 148 insertions, 0 deletions
diff --git a/src/style/scss/themes/1802/button.scss b/src/style/scss/themes/1802/button.scss
new file mode 100644
index 0000000..05d91d5
--- /dev/null
+++ b/src/style/scss/themes/1802/button.scss
@@ -0,0 +1,148 @@
+.sdc-button {
+  @include box-sizing;
+  display: inline-block;
+
+  outline: none;
+  border-radius: 2px;
+  padding: 0 16px;
+
+  height: 32px;
+  line-height: 32px;
+  width: 120px;
+  min-width: 90px;
+
+  cursor: pointer;
+  text-align: center;
+  @include body-1;
+  &:disabled {
+    cursor: default;
+  }
+
+  // Primary button
+  &.sdc-button__primary {
+    border: none;
+    background-color: $blue;
+    color: $white;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: $light-blue;
+      }
+      &:focus:not(:active) {
+        border: 0.5px solid $white;
+        background-color: $light-blue;
+        box-shadow: 0px 0px 0px 1px $light-blue;
+      }
+    }
+
+    &:disabled{
+      background: $blue-disabled;
+    }
+  }
+
+  // Secondary button
+  &.sdc-button__secondary {
+    border: 1px solid $light-gray;
+    background-color: transparent;
+    color: $text-black;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: transparent;
+        color:$text-black;
+        border: 1px solid $gray;
+      }
+      &:focus:not(:active) {
+        color: $text-black;
+        box-shadow: inset 0px 0px 0px 0px $light-gray, 0px 0px 0px 1px $gray;
+      }
+    }
+
+    &:disabled {
+      color: $blue-disabled;
+      border-color: $blue-disabled;
+    }
+  }
+
+  // Link button
+  &.sdc-button__link {
+    background-color: transparent;
+    color: $blue;
+    fill: $blue;
+    border: none;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        color: $light-blue;
+      }
+      &:focus:not(:active) {
+        border: 1px solid $dark-blue;
+        color: $light-blue;
+      }
+    }
+
+    &:disabled{
+      color: $blue-disabled;
+    }
+  }
+
+
+  // alert button
+  &.sdc-button__alert {
+    border: none;
+    background-color: $red;
+    color: $white;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: $light-red;
+      }
+      &:focus:not(:active) {
+        border: 0.5px solid $white;
+        background-color: $light-red;
+        box-shadow: 0px 0px 0px 1px $light-red;
+      }
+    }
+
+    &:disabled{
+      background: $disabled-red;
+    }
+  }
+
+
+  /*** Sizes ***/
+  &.btn-large{
+    width: $btn-large;
+  }
+
+  &.btn-medium{
+    width: $btn-medium;
+  }
+
+  &.btn-small{
+    width: $btn-small;
+  }
+
+  &.btn-x-small{
+    width: $btn-extra-small;
+  }
+
+  &.btn-default{
+    width: $btn-default;
+  }
+
+  /*** Buttons with icons ***/
+  .sdc-icon-right{
+    margin-left: 15px;
+  }
+
+  .sdc-icon-left{
+    margin-right: 15px;
+  }
+
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+