monkey-style-guide 2.0.46 → 2.0.50

package/assets/scss/partials/components/_buttons.scss

@@ -10,7 +10,7 @@
   padding: 16px;
   border-radius: 8px;
   border: none;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-content: center;
   align-items: center;
@@ -23,6 +23,18 @@
     justify-content: space-between;
   }
 
+  &.sm {
+    height: 32px;
+  }
+
+  &.md {
+    height: 40px;
+  }
+
+  &.lg {
+    height: 48px;
+  }
+
   monkey-icon {
     margin-right: 10px;
   }
@@ -30,6 +42,13 @@
   label {
     cursor: pointer;
   }
+
+  &:disabled {
+    color: #999999 !important;
+    background-color: #ebebeb !important;
+    border: none !important;
+    cursor: unset !important;
+  }
 }
 
 .mecx-button-drop {
@@ -62,17 +81,16 @@
   &__theme {
     color: map-get(map-get($mecx-theme, contrast), main);
     background: map-get($mecx-theme, main);
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-theme, 400)
         radial-gradient(circle, transparent 1%, map-get($mecx-theme, 400) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-theme, 100);
       background-size: 100%;
       transition: background 0s;
@@ -82,17 +100,16 @@
   &__error {
     color: map-get(map-get($mecx-error, contrast), 400);
     background: map-get($mecx-error, main);
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-error, 400)
         radial-gradient(circle, transparent 1%, map-get($mecx-error, 400) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-error, 100);
       background-size: 100%;
       transition: background 0s;
@@ -102,17 +119,16 @@
   &__warning {
     color: map-get(map-get($mecx-warning, contrast), main);
     background: map-get($mecx-warning, main);
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-warning, 400)
         radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-warning, 100);
       background-size: 100%;
       transition: background 0s;
@@ -122,17 +138,16 @@
   &__success {
     color: map-get(map-get($mecx-success, contrast), main);
     background: map-get($mecx-success, main);
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-success, 400)
         radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-success, 100);
       background-size: 100%;
       transition: background 0s;
@@ -145,48 +160,39 @@
 
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-question, 400)
         radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-question, 100);
       background-size: 100%;
       transition: background 0s;
     }
   }
-
-  &:disabled {
-    @extend .text-muted;
-    color: map-get($mecx-theme, main);
-    font-weight: 500;
-    background-color: #ebebeb;
-    border: none;
-  }
 }
 
 .mecx-button-secondary {
   @extend .mecx-button;
 
   &__theme {
-    border: 1px solid map-get($mecx-theme, main);
+    border: 1px solid #d6d6d6;
     background-color: #ffffff;
     color: map-get($mecx-theme, main);
     box-sizing: border-box;
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-theme, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-theme, 400);
       background-size: 100%;
       transition: background 0s;
@@ -201,14 +207,14 @@
 
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-error, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-error, 400);
       background-size: 100%;
       transition: background 0s;
@@ -223,14 +229,14 @@
 
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-warning, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-warning, 400);
       background-size: 100%;
       transition: background 0s;
@@ -245,14 +251,14 @@
 
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-success, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-success, 400);
       background-size: 100%;
       transition: background 0s;
@@ -267,48 +273,38 @@
 
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-question, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-question, 400);
       background-size: 100%;
       transition: background 0s;
     }
   }
-
-  &:disabled {
-    @extend .text-muted;
-    color: map-get($mecx-theme, main);
-    font-weight: 500;
-    background-color: inherit;
-    border: 1px solid #d6d6d6 !important;
-    box-sizing: border-box;
-  }
 }
 
 .mecx-button-tertiary {
   @extend .mecx-button;
 
   &__theme {
-    background-color: map-get($mecx-theme, 100);
-    color: map-get($mecx-theme, 700);
+    background-color: inherit;
+    color: map-get($mecx-theme, main);
     box-sizing: border-box;
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-theme, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-theme, 400);
       background-size: 100%;
       transition: background 0s;
@@ -316,20 +312,19 @@
   }
 
   &__error {
-    background-color: map-get($mecx-error, 100);
-    color: map-get($mecx-error, 700);
+    background-color: inherit;
+    color: map-get($mecx-error, main);
     box-sizing: border-box;
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-error, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-error, 400);
       background-size: 100%;
       transition: background 0s;
@@ -337,20 +332,19 @@
   }
 
   &__warning {
-    background-color: map-get($mecx-warning, 100);
-    color: map-get($mecx-warning, 700);
+    background-color: inherit;
+    color: map-get($mecx-warning, main);
     box-sizing: border-box;
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-warning, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-warning, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-warning, 400);
       background-size: 100%;
       transition: background 0s;
@@ -358,20 +352,19 @@
   }
 
   &__success {
-    background-color: map-get($mecx-success, 100);
-    color: map-get($mecx-success, 700);
+    background-color: inherit;
+    color: map-get($mecx-success, main);
     box-sizing: border-box;
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-success, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-success, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-success, 400);
       background-size: 100%;
       transition: background 0s;
@@ -379,158 +372,24 @@
   }
 
   &__question {
-    background-color: map-get($mecx-question, 100);
+    background-color: inherit;
     color: map-get($mecx-question, 700);
     box-sizing: border-box;
-
     background-position: center;
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-position: center;
       transition: background 0.8s;
       background: map-get($mecx-question, 100)
         radial-gradient(circle, transparent 1%, map-get($mecx-question, 100) 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       background-color: map-get($mecx-question, 400);
       background-size: 100%;
       transition: background 0s;
     }
   }
-
-  &:disabled {
-    @extend .text-muted;
-    color: map-get($mecx-theme, main);
-    font-weight: 500;
-    background-color: #ebebeb;
-    border: none;
-  }
-}
-
-.mecx-button-quaternary {
-  @extend .mecx-button;
-
-  &__theme {
-    background-color: inherit;
-    color: map-get($mecx-theme, main);
-    box-sizing: border-box;
-
-    background-position: center;
-
-    &:hover {
-      color: map-get(map-get($mecx-theme, contrast), 100);
-      background-position: center;
-      transition: background 0.8s;
-      background: map-get($mecx-theme, 100)
-        radial-gradient(circle, transparent 1%, map-get($mecx-theme, 100) 1%) center/15000%;
-    }
-
-    &:active {
-      color: map-get(map-get($mecx-theme, contrast), 100);
-      background-color: map-get($mecx-theme, 400);
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-
-  &__error {
-    background-color: inherit;
-    color: map-get($mecx-error, main);
-    box-sizing: border-box;
-
-    background-position: center;
-
-    &:hover {
-      color: map-get(map-get($mecx-error, contrast), main);
-      background-position: center;
-      transition: background 0.8s;
-      background: map-get($mecx-error, 100)
-        radial-gradient(circle, transparent 1%, map-get($mecx-error, 100) 1%) center/15000%;
-    }
-
-    &:active {
-      color: map-get(map-get($mecx-error, contrast), main);
-      background-color: map-get($mecx-error, 200);
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-
-  &__warning {
-    background-color: inherit;
-    color: map-get($mecx-warning, main);
-    box-sizing: border-box;
-
-    background-position: center;
-
-    &:hover {
-      color: map-get(map-get($mecx-warning, contrast), main);
-      background-position: center;
-      transition: background 0.8s;
-      background: map-get($mecx-warning, 400)
-        radial-gradient(circle, transparent 1%, map-get($mecx-warning, 400) 1%) center/15000%;
-    }
-
-    &:active {
-      color: map-get(map-get($mecx-warning, contrast), main);
-      background-color: map-get($mecx-warning, 100);
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-
-  &__success {
-    background-color: inherit;
-    color: map-get($mecx-success, main);
-    box-sizing: border-box;
-
-    background-position: center;
-
-    &:hover {
-      color: map-get(map-get($mecx-success, contrast), main);
-      background-position: center;
-      transition: background 0.8s;
-      background: map-get($mecx-success, 400)
-        radial-gradient(circle, transparent 1%, map-get($mecx-success, 400) 1%) center/15000%;
-    }
-
-    &:active {
-      color: map-get(map-get($mecx-success, contrast), main);
-      background-color: map-get($mecx-success, 100);
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-
-  &__question {
-    background-color: inherit;
-    color: map-get($mecx-question, main);
-    box-sizing: border-box;
-
-    background-position: center;
-
-    &:hover {
-      color: map-get(map-get($mecx-question, contrast), main);
-      background-position: center;
-      transition: background 0.8s;
-      background: map-get($mecx-question, 400)
-        radial-gradient(circle, transparent 1%, map-get($mecx-question, 400) 1%) center/15000%;
-    }
-
-    &:active {
-      color: map-get(map-get($mecx-question, contrast), main);
-      background-color: map-get($mecx-question, 100);
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-
-  &:disabled {
-    @extend .text-muted;
-    color: map-get($mecx-theme, main);
-    font-weight: 500;
-  }
 }
 
 .mecx-button-none {
@@ -546,14 +405,14 @@
   color: #4b4a53;
   background: #ebebeb;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: #4b4a53;
     background-position: center;
     transition: background 0.8s;
     background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: #4b4a53;
     background-color: #f3f3f3;
     background-size: 100%;
@@ -577,14 +436,14 @@
   box-sizing: border-box;
   border-radius: 8px;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: #4b4a53;
     background-position: center;
     transition: background 0.8s;
     background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: #4b4a53;
     background-color: #f3f3f3;
     background-size: 100%;
@@ -603,14 +462,14 @@
   justify-content: flex-start !important;
   background: inherit;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: #4b4a53;
     background-position: center;
     transition: background 0.8s;
     background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: map-get($mecx-theme, main);
     background-color: #f5f5f5;
     background-size: 100%;
@@ -629,14 +488,14 @@
   background: #f5f5f5;
   justify-content: flex-start !important;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: map-get($mecx-theme, main);
     background-position: center;
     transition: background 0.8s;
     background: #f3f3f3 radial-gradient(circle, transparent 1%, #f3f3f3 1%) center/15000%;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: map-get($mecx-theme, main);
     background-color: #f3f3f3;
     background-size: 100%;
@@ -661,14 +520,14 @@
   color: #4b4a53;
   font-size: 14px !important;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: #4b4a53;
     background-position: center;
     transition: background 0.8s;
     background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: #4b4a53;
     background-color: #f5f5f5;
     background-size: 100%;
@@ -680,14 +539,14 @@
     border: 1px solid #d6d6d6;
     font-size: 14px !important;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: #4b4a53;
       background-position: center;
       transition: background 0.8s;
       background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       color: #4b4a53;
       background-color: #f5f5f5;
       background-size: 100%;
@@ -700,14 +559,14 @@
     border: none;
     font-size: 14px !important;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: #4b4a53;
       background-position: center;
       transition: background 0.8s;
       background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       color: #4b4a53;
       background-color: #f5f5f5;
       background-size: 100%;
@@ -731,14 +590,14 @@
   color: #4b4a53;
   font-size: 14px !important;
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: #4b4a53;
     background-position: center;
     transition: background 0.8s;
     background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: #4b4a53;
     background-color: #ebebeb;
     background-size: 100%;
@@ -750,14 +609,14 @@
     border: 1px solid #d6d6d6;
     font-size: 14px !important;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: #4b4a53;
       background-position: center;
       transition: background 0.8s;
       background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       color: #4b4a53;
       background-color: #ebebeb;
       background-size: 100%;
@@ -770,14 +629,14 @@
     border: none;
     font-size: 14px !important;
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: #4b4a53;
       background-position: center;
       transition: background 0.8s;
       background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
     }
 
-    &:active {
+    &:active:not(:disabled) {
       color: #4b4a53;
       background-color: #ebebeb;
       background-size: 100%;
@@ -800,14 +659,14 @@
   background-color: #f5f5f5;
   color: map-get($mecx-theme, main);
 
-  &:hover {
+  &:hover:not(:disabled) {
     color: map-get($mecx-theme, main);
     background-position: center;
     transition: background 0.8s;
     background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
   }
 
-  &:active {
+  &:active:not(:disabled) {
     color: map-get($mecx-theme, main);
     background-color: #f5f5f5;
     background-size: 100%;

package/assets/scss/partials/components/_input.scss

@@ -12,6 +12,12 @@
   padding: 0 8px;
 }
 
+monkey-input {
+  mecx-form-field mecx-form-field-body {
+    cursor: text;
+  }
+}
+
 input {
   @extend .mecx-input;
   color: #4b4a53;