beyond-webui 1.0.98 → 1.1.1

package/theme-chalk/src/autocomplete.scss

@@ -63,6 +63,13 @@
     }
   }
 
+  .no-data {
+    &:hover {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+
   @include when(loading) {
     li {
       text-align: center;

package/theme-chalk/src/button.scss

@@ -6,6 +6,7 @@
 @use 'mixins/utils' as *;
 @use 'mixins/var' as *;
 
+
 $button-icon-span-gap: () !default;
 $button-icon-span-gap: map.merge(
     (
@@ -40,28 +41,25 @@ $button-icon-span-gap: map.merge(
   vertical-align: middle;
   -webkit-appearance: none;
   background-color: getCssVar('button', 'bg-color');
-  border: 1px solid #697386;
+  border: getCssVar('border');
+  border-color: getCssVar('button', 'border-color');
 
   &:hover {
-    background-color: #f3f3f6;
+    background-color: getCssVar('button', 'hover', 'bg-color');
     outline: none;
   }
-
   &:focus {
-    background-color: #f3f3f6;
-    border: 1px solid #697386;
     outline: none;
   }
 
   &:active {
-    color: #ff761f;
-    border-color: #ff761f;
-    background-color: #fff4ed;
+    background-color: getCssVar('button', 'active', 'bg-color');
     outline: none;
+    box-shadow: none;
   }
 
   &:focus-visible {
-    outline: 1px solid getCssVar('button', 'outline-color');
+    outline: 2px solid rgba(36, 48, 55, 0.80);
     outline-offset: 1px;
   }
 
@@ -71,7 +69,7 @@ $button-icon-span-gap: map.merge(
   }
 
   & + & {
-    margin-left: 12px;
+    margin-left: 8px;
   }
 
   @include button-size(
@@ -96,36 +94,18 @@ $button-icon-span-gap: map.merge(
   }
 
   @include when(plain) {
-    background-color: #fff4ed;
-    border: 1px solid #ff761f;
-    color: #ff761f;
-    &:hover {
-      color: #ff8d44;
-      border-color: #ff8d44;
-    }
-    &:active {
-      color: #fff;
-      border-color: transparent;
-      background-color: #f36b10;
-    }
-    &:focus {
-      border: 1px solid #ff761f;
-    }
-    &.is-disabled {
-      background-color: #f3f3f6;
-    }
-    //@include css-var-from-global(
-    //      ('button', 'hover', 'text-color'),
-    //      ('color', 'primary')
-    //);
-    //@include css-var-from-global(
-    //      ('button', 'hover', 'bg-color'),
-    //      ('fill-color', 'blank')
-    //);
-    //@include css-var-from-global(
-    //      ('button', 'hover', 'border-color'),
-    //      ('color', 'primary')
-    //);
+    @include css-var-from-global(
+          ('button', 'hover', 'text-color'),
+          ('color', 'primary')
+    );
+    @include css-var-from-global(
+          ('button', 'hover', 'bg-color'),
+          ('fill-color', 'blank')
+    );
+    @include css-var-from-global(
+          ('button', 'hover', 'border-color'),
+          ('color', 'primary')
+    );
   }
 
   @include when(active) {
@@ -139,10 +119,11 @@ $button-icon-span-gap: map.merge(
     &,
     &:hover,
     &:focus {
-      color: #c7c7c7;
+      color: getCssVar('button', 'disabled', 'text-color');
       cursor: not-allowed;
-      border: 1px solid #c7c7c7;
-      background-color: #fff;
+      background-image: none;
+      background-color: getCssVar('button', 'disabled', 'bg-color');
+      border-color: getCssVar('button', 'disabled', 'border-color');
     }
   }
 
@@ -168,40 +149,40 @@ $button-icon-span-gap: map.merge(
     border-radius: getCssVar('border-radius', 'round');
   }
   @include when(circle) {
+    width: map.get($input-height, 'default');
     border-radius: 50%;
     padding: map.get($button-padding-vertical, 'default') - $button-border-width;
   }
 
   @include when(text) {
     color: getCssVar('button', 'text-color');
-    border: 0 solid transparent;
+    border: 1px solid transparent;
     background-color: transparent;
 
     @include when(disabled) {
-      color: #c7c7c7;
+      color: getCssVar('button', 'disabled', 'text-color');
       background-color: transparent !important;
       &:hover {
         border-color: transparent;
       }
     }
-
+    &:focus-visible {
+      background-color: #E7ECEF !important;
+    }
     &:not(.is-disabled) {
-      &:hover {
-        background-color: #f3f3f6;
-      }
-
+      &:hover,
       &:focus {
-        border: 1px solid #ffbb8f;
+        background-color: #f2f5f7;
       }
 
       &:focus-visible {
-        outline: 1px solid getCssVar('button', 'outline-color');
+        outline: 2px solid getCssVar('button', 'outline-color');
         outline-offset: 1px;
       }
 
       &:active {
-        color: #ff761f;
-        background-color: #fff4ed;
+        background-color: #fff;
+        border-color: #697579;
       }
 
       @include when(has-bg) {
@@ -295,60 +276,47 @@ $button-icon-span-gap: map.merge(
   }
 
   @each $type in (primary, success, warning, danger, info) {
+
     @include m($type) {
-      border: 2px solid transparent;
-      @include button-variant($type);
-      @include when(disabled) {
-        &,
-        &:hover,
-        &:focus {
-          color: #c7c7c7;
-          cursor: not-allowed;
-          background-image: none;
-          background-color: #f3f3f6;
-          border-color: #f3f3f6;
+      box-shadow: 0 1px 0 0 rgba(26, 26, 26, 0.07),
+      0 1px 0 0 rgba(204, 204, 204, 0.5) inset,
+      0 -1px 0 0 rgba(0, 0, 0, 0.17) inset,
+      -1px 0 0 0 rgba(0, 0, 0, 0.13) inset,
+      1px 0 0 0 rgba(0, 0, 0, 0.13) inset;
+      &.is-disabled, &.is-disabled:hover {
+        background-color: rgba(193, 204, 214, 0.38);
+        border-color: rgba(193, 204, 214, 0.38);
+        box-shadow: none;
+        color: rgba(91, 114, 130, 0.38);
+      }
+      &.is-plain {
+        background-color: #FFF7F3;
+        border-color: #FFC5A1;
+        color: #EB5100;
+        box-shadow: none;
+
+        &:hover {
+          background-color: #FFECE0;
+        }
+
+        &:active {
+          background-color: #FFDECA;
+        }
+
+        &.is-disabled {
+          background-color: #F2F5F7 !important;
+          border-color: #DCE3E8 !important;
+          color: #5b7282 !important;
         }
       }
-    }
-  }
-  @include m(primary) {
-    box-shadow: 0 3px 5px 0 rgba(89, 41, 11, 0.15), 0 1px 1px 0 rgba(48, 22, 5, 0.10);
-    &:hover {
-      background-color: #ff8d44;
-    }
-    &:active {
-      color: #fff;
-      background-color: #f36b10;
-    }
-    &:focus {
-      background-color: #ff761f;
-      border: 2px solid #ffbb8f;
-    }
-  }
-  @include m(danger) {
-    &:hover {
-      background-color: #e0450e;
-    }
-    &:active {
-      color: #fff;
-      background-color: #cf2203;
-    }
-    &:focus {
-      background-color: #db2807;
-      border: 2px solid #ffbb8f;
-    }
-    @include when(disabled) {
-      &,
-      &:hover,
-      &:focus {
-        color: #c7c7c7;
-        cursor: not-allowed;
-        background-image: none;
-        background-color: #f3f3f6;
-        border-color: #f3f3f6;
+
+      &:hover {
+        background-color: getCssVar('button', $type+'-hover-color');;
       }
+      @include button-variant($type);
     }
   }
+
   @each $size in (large, small) {
     @include m($size) {
       @include set-css-var-value(