@c10t/nice-component-library 0.0.1-beta

package/src/styles/themes/button-default.style.scss

@@ -0,0 +1,961 @@
+$white: #ffffff;
+$white-hover: #ffffff;
+$white-disabled: #ffffff;
+$primary: #00977D;
+$primary-hover: #0FC5A5;
+$primary-active: #007F68;
+$primary-disabled: #7fcbbe;
+$secondary: #FFA903;
+$secondary-hover: #FFCB68;
+$secondary-active: #F3A101;
+$secondary-disabled: #ffd481;
+$secondary-outline: #7A7A7A;
+$secondary-outline-hover: #A7A7A7;
+$secondary-outline-disabled: #A7A7A780;
+$info: #3366FF;
+$info-hover: #3366FF99;
+$info-active: #0067b7;
+$info-disabled: #3366FF80;
+$danger: #FC5555;
+$danger-hover: #FF7D7D;
+$danger-active: #E14242;
+$danger-disabled: #FC5555;
+$approve: #02AC45;
+$approve-hover: #0CBF53;
+$approve-active: #029E40;
+$approve-disabled: #02AC45;
+$state-pending: #FFA903;
+$state-rejected: #FF645C;
+$state-approved: #007DDD;
+$state-ongoing: #02AC45;
+$state-closed: #A7A7A7;
+$state-cancelled: #FF645C;
+$state-delivering: #007DDD;
+$state-delivered: #4CD964;
+$state-confirmed: #7B61FF;
+$state-returned: #A7A7A7;
+$state-waiting: #F27C0F;
+$state-active: #02AC45;
+$state-expired: #A7A7A7;
+$state-inactive: #6AC7B7;
+$icon-disabled: #bfbfbf;
+        
+button {
+  i {
+    font-weight: 300;
+  }
+
+  // Button
+  &.mat-button {
+    height: 40px;
+    font-size: 16px;
+    margin-right: 5px;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    min-width: 120px;
+
+    &.dashed {
+      border-style: dashed;
+    }
+
+    &.primary {
+      color: $white;
+      background-color: $primary;
+      border-color: $primary;
+
+      i {
+        color: $white;
+      }
+
+      &:focus, &:hover {
+        color: $white;
+        background-color: $primary-hover;
+        border-color: $primary-hover;
+      }
+
+      &:active {
+        color: $white;
+        background-color: $primary-active;
+        border-color: $primary-active;
+      }
+
+      &[disabled] {
+        color: $white;
+        background-color: $primary-disabled;
+        border-color: $primary-disabled;
+
+
+      }
+
+      &.outline {
+        color: $primary;
+        background-color: $white;
+        border-color: $primary;
+
+        i {
+          color: $primary;
+        }
+
+        &:focus, &:hover {
+          color: $white;
+          background-color: $primary;
+          border-color: $primary;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &:active {
+          color: $white;
+          background-color: $primary;
+          border-color: $primary;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &[disabled] {
+          color: $primary-disabled;
+          background-color: $white-disabled;
+          border-color: $primary-disabled;
+
+          i {
+            color: $primary-disabled;
+          }
+        }
+      }
+
+      &.dashed {
+        color: $primary;
+        background-color: $white;
+        border-color: $primary;
+
+        i {
+          color: $primary;
+        }
+
+        &:focus, &:hover {
+          color: $primary-hover;
+          background-color: $white-hover;
+          border-color: $primary-hover;
+
+          i {
+            color: $primary-hover;
+          }
+        }
+
+        &:active {
+          color: $primary-active;
+          background-color: $white;
+          border-color: $primary-active;
+
+          i {
+            color: $primary-active;
+          }
+        }
+
+        &[disabled] {
+          color: $primary-disabled;
+          background-color: $white-disabled;
+          border-color: $primary-disabled;
+
+          i {
+            color: $primary-disabled;
+          }
+        }
+      }
+    }
+
+    &.secondary {
+      color: $white;
+      background-color: $secondary;
+      border-color: $secondary;
+
+      i {
+        color: $white;
+      }
+
+      &:focus, &:hover {
+        color: $white;
+        background-color: $secondary-hover;
+        border-color: $secondary-hover;
+      }
+
+      &:active {
+        color: $white;
+        background-color: $secondary-active;
+        border-color: $secondary-active;
+      }
+
+      &[disabled] {
+        color: $white;
+        background-color: $secondary-disabled;
+        border-color: $secondary-disabled;
+      }
+
+      &.outline {
+        color: $secondary-outline;
+        background-color: $white;
+        border-color: $secondary-outline;
+
+        i {
+          color: $secondary-outline;
+        }
+
+        &:focus, &:hover {
+          color: $white;
+          background-color: $secondary-outline-hover;
+          border-color: $secondary-outline-hover;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &:active {
+          color: $white;
+          background-color: $secondary-outline;
+          border-color: $secondary-outline;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &[disabled] {
+          color: $secondary-outline-disabled;
+          background-color: $white-disabled;
+          border-color: $secondary-outline-disabled;
+
+          i {
+            color: $secondary-outline-disabled;
+          }
+        }
+      }
+
+      &.dashed {
+        color: $secondary;
+        background-color: $white;
+        border-color: $secondary;
+
+        i {
+          color: $secondary;
+        }
+
+        &:focus, &:hover {
+          color: $secondary-hover;
+          background-color: $white-hover;
+          border-color: $secondary-hover;
+
+          i {
+            color: $secondary-hover;
+          }
+        }
+
+        &:active {
+          color: $white;
+          background-color: $secondary-active;
+          border-color: $secondary-active;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &[disabled] {
+          color: $secondary-disabled;
+          background-color: $white-disabled;
+          border-color: $secondary-disabled;
+
+          i {
+            color: $secondary-disabled;
+          }
+        }
+      }
+    }
+
+    &.gray {
+      color: $white;
+      background-color: #7A7A7A;
+      border-color: #7A7A7A;
+
+      i {
+        color: $white;
+      }
+
+      &:focus, &:hover {
+        color: $white;
+        background-color: #67676799;
+        border-color: #67676799;
+      }
+
+      &:active {
+        color: $white;
+        background-color: #F3A101;
+        border-color: #F3A101;
+      }
+
+      &[disabled] {
+        color: $white;
+        background-color: #FFA90380;
+        border-color: #FFA90380;
+      }
+
+      &.outline {
+        color: #7A7A7A;
+        background-color: $white;
+        border-color: #7A7A7A;
+
+        i {
+          color: #7A7A7A;
+        }
+
+        &:focus, &:hover {
+          color: $white;
+          background-color: #A7A7A7;
+          border-color: #A7A7A7;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &:active {
+          color: $white;
+          background-color: #7A7A7A;
+          border-color: #7A7A7A;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &[disabled] {
+          color: #7A7A7A80;
+          background-color: $white-disabled;
+          border-color: #7A7A7A80;
+
+          i {
+            color: #7A7A7A80;
+          }
+        }
+      }
+
+      &.dashed {
+        color: #FFBE41;
+        background-color: $white;
+        border-color: #FFBE41;
+
+        i {
+          color: #FFBE41;
+        }
+
+        &:focus, &:hover {
+          color: #FFBE4199;
+          background-color: $white-hover;
+          border-color: #FFBE4199;
+
+          i {
+            color: #FFBE4199;
+          }
+        }
+
+        &:active {
+          color: $white;
+          background-color: #FFBE41;
+          border-color: #FFBE41;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &[disabled] {
+          color: #FFBE4180;
+          background-color: $white-disabled;
+          border-color: #FFBE4180;
+
+          i {
+            color: #FFBE4180;
+          }
+        }
+      }
+    }
+
+    &.info {
+      color: $white;
+      background-color: $info;
+      border-color: $info;
+
+      i {
+        color: $white;
+      }
+
+      &:focus, &:hover {
+        color: $white;
+        background-color: $info-hover;
+        border-color: $info-hover;
+      }
+
+      &:active {
+        color: $white;
+        background-color: $info-active;
+        border-color: $info-active;
+      }
+
+      &[disabled] {
+        color: $white;
+        background-color: $info-disabled;
+        border-color: $info-disabled;
+      }
+
+      &.outline {
+        color: $info;
+        background-color: $white;
+        border-color: $info;
+
+        i {
+          color: $info;
+        }
+
+        &:focus, &:hover {
+          color: $white;
+          background-color: $info;
+          border-color: $info;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &:active {
+          color: $white;
+          background-color: $info-active;
+          border-color: $info-active;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &[disabled] {
+          color: $info-disabled;
+          background-color: $white-disabled;
+          border-color: $info-disabled;
+
+          i {
+            color: $info-disabled;
+          }
+        }
+      }
+
+      &.dashed {
+        color: $info;
+        background-color: $white;
+        border-color: $info;
+
+        i {
+          color: $info;
+        }
+
+        &:focus, &:hover {
+          color: $info-hover;
+          background-color: $white-hover;
+          border-color: $info-hover;
+
+          i {
+            color: $info-hover;
+          }
+        }
+
+        &:active {
+          color: $info-active;
+          background-color: $white;
+          border-color: $info-active;
+
+          i {
+            color: $info-active;
+          }
+        }
+
+        &[disabled] {
+          color: $info-disabled;
+          background-color: $white-disabled;
+          border-color: $info-disabled;
+
+          i {
+            color: $info-disabled;
+          }
+        }
+      }
+    }
+
+    &.danger {
+      color: $white;
+      background-color: $danger;
+      border-color: $danger;
+
+      i {
+        color: $white;
+      }
+
+      &:focus, &:hover {
+        color: $white;
+        background-color: $danger-hover;
+        border-color: $danger-hover;
+      }
+
+      &:active {
+        color: $white;
+        background-color: $danger-active;
+        border-color: $danger-active;
+      }
+
+      &[disabled] {
+        color: $white-disabled;
+        background-color: $danger-disabled;
+        border-color: $danger-disabled;
+      }
+
+      &.outline {
+        color: $danger;
+        background-color: $white;
+        border-color: $danger;
+
+        i {
+          color: $danger;
+        }
+
+        &:focus, &:hover {
+          color: $white;
+          background-color: $danger;
+          border-color: $danger;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &:active {
+          color: $white;
+          background-color: $danger-active;
+          border-color: $danger-active;
+
+          i {
+            color: $white;
+          }
+        }
+
+        &[disabled] {
+          color: $danger-disabled;
+          background-color: $white-disabled;
+          border-color: $danger-disabled;
+
+          i {
+            color: $danger-disabled;
+          }
+        }
+      }
+
+      &.dashed {
+        color: $danger;
+        background-color: $white;
+        border-color: $danger;
+
+        i {
+          color: $danger;
+        }
+
+        &:focus, &:hover {
+          color: $danger-hover;
+          background-color: $white-hover;
+          border-color: $danger-hover;
+
+          i {
+            color: $danger;
+          }
+        }
+
+        &:active {
+          color: $danger-active;
+          background-color: $white;
+          border-color: $danger-active;
+
+          i {
+            color: $danger;
+          }
+        }
+
+        &[disabled] {
+          color: $danger-disabled;
+          background-color: $white-disabled;
+          border-color: $danger-disabled;
+
+          i {
+            color: $danger-disabled;
+          }
+        }
+      }
+    }
+
+    &.approve {
+      color: $white;
+      background-color: $approve;
+      border-color: $approve;
+
+      i {
+        color: $white;
+      }
+
+      &:focus, &:hover {
+        color: $white;
+        background-color: $approve-hover;
+        border-color: $approve-hover;
+      }
+
+      &:active {
+        color: $white;
+        background-color: $approve-active;
+        border-color: $approve-active;
+      }
+
+      &[disabled] {
+        color: $white-disabled;
+        background-color: $approve-disabled;
+        border-color: $approve-disabled;
+
+        i {
+          color: $white-disabled;
+        }
+      }
+    }
+  }
+
+  // Icon
+  &.mat-icon-button {
+    background-color: transparent;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    line-height: initial;
+
+    i, mat-icon {
+      font-size: 14px;
+      font-weight: 900;
+    }
+
+    &.primary {
+      background-color: #DBF7E0;
+
+      i, mat-icon {
+        color: $primary;
+      }
+
+      &:focus, &:hover {
+        border: 1px solid $primary;
+
+        i, mat-icon {
+          color: $primary;
+        }
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border: none;
+
+        i, mat-icon {
+          color: $icon-disabled;
+        }
+      }
+    }
+
+    &.secondary {
+      background-color: #FFEFD2;
+
+      i, mat-icon {
+        color: $secondary;
+      }
+
+      &:focus, &:hover {
+        border: 1px solid $secondary;
+
+        i, mat-icon {
+          color: $secondary;
+        }
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border: none;
+
+        i, mat-icon {
+          color: $icon-disabled;
+        }
+      }
+    }
+
+    &.gray {
+      background-color: #676767;
+
+      i, mat-icon {
+        color: #7A7A7A;
+      }
+
+      &:focus, &:hover {
+        border: 1px solid #676767;
+
+        i, mat-icon {
+          color: #676767;
+        }
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border: none;
+
+        i, mat-icon {
+          color: $icon-disabled;
+        }
+      }
+    }
+
+    &.info {
+      background-color: #E6F2FC;
+
+      i, mat-icon {
+        color: $info;
+      }
+
+      &:focus, &:hover {
+        border: 1px solid $info;
+
+        i, mat-icon {
+          color: $info;
+        }
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border: none;
+
+        i, mat-icon {
+          color: $icon-disabled;
+        }
+      }
+    }
+
+    &.danger {
+      background-color: #FFF0EF;
+
+      i, mat-icon {
+        color: $danger;
+      }
+
+      &:focus, &:hover {
+        border: 1px solid $danger;
+
+        i, mat-icon {
+          color: $danger;
+        }
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border: none;
+
+        i, mat-icon {
+          color: $icon-disabled;
+        }
+      }
+    }
+
+    &.approve {
+      background-color: #DBF7E0;
+
+      i, mat-icon {
+        color: $approve;
+      }
+
+      &:focus, &:hover {
+        border: 1px solid $approve;
+
+        i, mat-icon {
+          color: $approve;
+        }
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        border: none;
+
+        i, mat-icon {
+          color: $icon-disabled;
+        }
+      }
+    }
+  }
+
+  // State
+  &.mat-state-button {
+    font-size: 14px;
+    font-weight: bold;
+    height: 24px;
+    min-width: 100px;
+    border-radius: 15px;
+    margin-left: 5px;
+    border: none;
+    outline: none;
+
+    &.pending {
+      color: $white;
+      background-color: $state-pending;
+
+      &.rectangle {
+        color: $state-pending;
+        background-color: transparent;
+      }
+    }
+
+    &.rejected {
+      color: $white;
+      background-color: $state-rejected;
+
+      &.rectangle {
+        color: $state-rejected;
+        background-color: transparent;
+      }
+    }
+
+    &.approved {
+      color: $white;
+      background-color: $state-approved;
+
+      &.rectangle {
+        color: $state-approved;
+        background-color: transparent;
+      }
+    }
+
+    &.ongoing {
+      color: $white;
+      background-color: $state-ongoing;
+
+      &.rectangle {
+        color: $state-ongoing;
+        background-color: transparent;
+      }
+    }
+
+    &.closed {
+      color: $white;
+      background-color: $state-closed;
+
+      &.rectangle {
+        color: $state-closed;
+        background-color: transparent;
+      }
+    }
+
+    &.cancelled {
+      color: $white;
+      background-color: $state-cancelled;
+
+      &.rectangle {
+        color: $state-cancelled;
+        background-color: transparent;
+      }
+    }
+
+    &.delivering {
+      color: $white;
+      background-color: $state-delivering;
+
+      &.rectangle {
+        color: $state-delivering;
+        background-color: transparent;
+      }
+    }
+
+    &.delivered {
+      color: $white;
+      background-color: $state-delivered;
+
+      &.rectangle {
+        color: $state-delivered;
+        background-color: transparent;
+      }
+    }
+
+    &.confirmed {
+      color: $white;
+      background-color: $state-confirmed;
+
+      &.rectangle {
+        color: $state-confirmed;
+        background-color: transparent;
+      }
+    }
+
+    &.returned {
+      color: $white;
+      background-color: $state-returned;
+
+      &.rectangle {
+        color: $state-returned;
+        background-color: transparent;
+      }
+    }
+
+    &.waiting {
+      color: $white;
+      background-color: $state-waiting;
+
+      &.rectangle {
+        color: $state-waiting;
+        background-color: transparent;
+      }
+    }
+
+    &.active {
+      color: $white;
+      background-color: $state-active;
+
+      &.rectangle {
+        color: $state-active;
+        background-color: transparent;
+      }
+    }
+
+    &.expired {
+      color: $white;
+      background-color: $state-expired;
+
+      &.rectangle {
+        color: $state-expired;
+        background-color: transparent;
+      }
+    }
+
+    &.inactive {
+      color: $white;
+      background-color: $state-inactive;
+
+      &.rectangle {
+        color: $state-inactive;
+        background-color: transparent;
+      }
+    }
+
+    &.rectangle:after {
+      content: "\f111";
+      font-family: "Font Awesome 5 Pro";
+      font-size: 10px;
+      position: relative;
+      top: -1px;
+      left: 5px;
+    }
+  }
+}