@vendure/admin-ui 2.0.1 → 2.0.3

package/static/styles/global/_buttons.scss

@@ -12,70 +12,25 @@
     border-radius: var(--border-radius-sm);
     cursor: pointer;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 4px rgba(0, 0, 0, 0.03),
-        0px 2px 6px rgba(0, 0, 0, 0.03), 0px 2px 11px rgba(0, 0, 0, 0.04);
+    0px 2px 6px rgba(0, 0, 0, 0.03), 0px 2px 11px rgba(0, 0, 0, 0.04);
     background-color: var(--color-button-bg);
     color: var(--color-weight-700);
+
     &:link,
     &:visited {
         color: var(--color-weight-700);
     }
+
     &:disabled {
         background-color: var(--color-weight-100);
         color: var(--color-weight-500);
         cursor: not-allowed;
     }
+
     &:not(:disabled):hover {
         background-color: var(--color-button-hover-bg);
         color: var(--color-weight-800);
     }
-
-    &.primary,
-    &.btn-primary {
-        &:not(:disabled) {
-            background-color: var(--color-primary-700);
-            color: white;
-            &:hover {
-                background-color: var(--color-primary-800);
-                color: white;
-            }
-        }
-    }
-
-    &.success,
-    &.btn-success {
-        &:not(:disabled) {
-            background-color: var(--color-success-700);
-            color: white;
-            &:hover {
-                background-color: var(--color-success-800);
-                color: white;
-            }
-        }
-    }
-
-    &.warning,
-    &.btn-warning {
-        &:not(:disabled) {
-            background-color: var(--color-warning-700);
-            color: white;
-            &:hover {
-                background-color: var(--color-warning-800);
-                color: white;
-            }
-        }
-    }
-
-    &.danger,
-    &.btn-danger {
-        &:not(:disabled) {
-            background-color: var(--color-error-700);
-            color: white;
-            &:hover {
-                background-color: var(--color-error-800);
-                color: white;
-            }
-        }
-    }
 }
 
 .button-ghost {
@@ -94,15 +49,18 @@
     white-space: nowrap;
     color: var(--color-button-ghost-text);
     background-color: var(--color-button-ghost-bg);
+
     &:hover {
         background-color: var(--color-button-ghost-hover-bg);
         color: var(--color-button-ghost-hover-text);
     }
 }
+
 a.button-ghost:link,
 a.button-ghost:visited {
     color: var(--color-button-ghost-text);
 }
+
 a.button-ghost:hover {
     color: var(--color-button-ghost-hover-text);
 }
@@ -122,10 +80,66 @@ a.button-ghost:hover {
     border: none;
     border-radius: var(--border-radius-lg);
     cursor: pointer;
+
     &:not(:disabled):hover {
         background-color: var(--color-button-small-hover-bg);
     }
 }
+
+.button, .btn, .button-small {
+    &.primary,
+    &.btn-primary {
+        &:not(:disabled) {
+            background-color: var(--color-primary-700);
+            color: white;
+
+            &:hover {
+                background-color: var(--color-primary-800);
+                color: white;
+            }
+        }
+    }
+
+    &.success,
+    &.btn-success {
+        &:not(:disabled) {
+            background-color: var(--color-success-700);
+            color: white;
+
+            &:hover {
+                background-color: var(--color-success-800);
+                color: white;
+            }
+        }
+    }
+
+    &.warning,
+    &.btn-warning {
+        &:not(:disabled) {
+            background-color: var(--color-warning-700);
+            color: white;
+
+            &:hover {
+                background-color: var(--color-warning-800);
+                color: white;
+            }
+        }
+    }
+
+    &.danger,
+    &.btn-danger {
+        &:not(:disabled) {
+            background-color: var(--color-error-700);
+            color: white;
+
+            &:hover {
+                background-color: var(--color-error-800);
+                color: white;
+            }
+        }
+    }
+}
+
 a.button-small:link,
 a.button-small:visited {
     color: var(--color-button-small-text);

package/static/styles/global/_forms.scss

@@ -67,7 +67,6 @@ select {
     border-radius: var(--border-radius-input) !important;
     border: 1px solid var(--color-weight-300);
     padding: 5px !important;
-    height: 36px !important;
     transition: background-color 0.2s, box-shadow 0.2s !important;
     &:focus {
         border-color: var(--color-primary-500);
@@ -78,6 +77,10 @@ select {
         border-color: var(--color-weight-400);
     }
 }
+input:not([type='checkbox']):not([type='radio']),
+select {
+    height: 36px !important;
+}
 
 textarea {
     &:focus {
@@ -146,6 +149,7 @@ select {
     color: var(--color-text-100);
     line-height: initial;
     position: initial !important;
+    border: 1px solid var(--color-weight-300);
 }
 .ng-select .ng-select-container .ng-value-container {
     //padding-top: 0;

package/static/styles/theme/default.scss

@@ -185,6 +185,8 @@
 
     --color-login-page-bg: var(--color-weight-100);
 
+    --color-dropdown-item-focus-outline: rgba(77, 207, 255, 0.53);
+
     // Layout
     --layout-content-max-width: 1400px;
     --left-nav-width: 0px;