Decor buttons

Signed-off-by: Valentin Popov <info@valentineus.link>

1 files changed, 81 insertions, 0 deletions

diff --git a/_scss/components/theme/_buttons.scss b/_scss/components/theme/_buttons.scss
new file mode 100644
index 0000000..fd11d1b
--- /dev/null
+++ b/_scss/components/theme/_buttons.scss
@@ -0,0 +1,81 @@
+.button,
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  background-color: $color-primary;
+  border: .1rem solid $color-primary;
+  border-radius: .4rem;
+  color: $color-initial;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.1rem;
+  font-weight: 700;
+  height: 3.8rem;
+  letter-spacing: .1rem;
+  line-height: 3.8rem;
+  padding: 0 3rem;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  &:focus,
+  &:hover {
+    background-color: $color-secondary;
+    border-color: $color-secondary;
+    color: $color-initial;
+    outline: 0;
+  }
+
+  &[disabled] {
+    cursor: default;
+    opacity: .5;
+
+    &:focus,
+    &:hover {
+      background-color: $color-primary;
+      border-color: $color-primary;
+    }
+  }
+
+  &.button-outline {
+    background-color: transparent;
+    color: $color-primary;
+
+    &:focus,
+    &:hover {
+      background-color: transparent;
+      border-color: $color-secondary;
+      color: $color-secondary;
+    }
+
+    &[disabled] {
+      &:focus,
+      &:hover {
+        border-color: inherit;
+        color: $color-primary;
+      }
+    }
+  }
+
+  &.button-clear {
+    background-color: transparent;
+    border-color: transparent;
+    color: $color-primary;
+
+    &:focus,
+    &:hover {
+      background-color: transparent;
+      border-color: transparent;
+      color: $color-secondary;
+    }
+
+    &[disabled] {
+      &:focus,
+      &:hover {
+        color: $color-primary;
+      }
+    }
+  }
+}