@vendure/admin-ui 3.2.0 → 3.2.1

package/static/styles/global/_buttons.scss

@@ -1,147 +1,147 @@
-.button,
-.btn {
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    white-space: nowrap;
-    align-items: center;
-    padding: var(--space-unit) calc(var(--space-unit) * 1.5);
-    font-size: var(--font-size-sm) !important;
-    gap: var(--space-unit);
-    border: none;
-    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);
-    background-color: var(--color-button-bg);
-    color: var(--color-weight-700);
-    line-height: var(--cds-global-typography-body-line-height) !important;
-
-    &: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);
-    }
-}
-
-.button-ghost {
-    display: inline-flex;
-    white-space: nowrap;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 0 var(--space-unit);
-    height: calc(var(--space-unit) * 3);
-    font-size: var(--font-size-xs);
-    gap: 4px;
-    border: 1px solid var(--color-weight-300);
-    border-radius: var(--border-radius-lg);
-    cursor: pointer;
-    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);
-}
-
-.button-small {
-    display: inline-flex;
-    white-space: nowrap;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 0 var(--space-unit);
-    height: 22px;
-    font-size: var(--font-size-xs);
-    background-color: var(--color-button-small-bg);
-    color: var(--color-button-small-text);
-    gap: 4px;
-    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);
-}
+.button,
+.btn {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    white-space: nowrap;
+    align-items: center;
+    padding: var(--space-unit) calc(var(--space-unit) * 1.5);
+    font-size: var(--font-size-sm) !important;
+    gap: var(--space-unit);
+    border: none;
+    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);
+    background-color: var(--color-button-bg);
+    color: var(--color-weight-700);
+    line-height: var(--cds-global-typography-body-line-height) !important;
+
+    &: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);
+    }
+}
+
+.button-ghost {
+    display: inline-flex;
+    white-space: nowrap;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 var(--space-unit);
+    height: calc(var(--space-unit) * 3);
+    font-size: var(--font-size-xs);
+    gap: 4px;
+    border: 1px solid var(--color-weight-300);
+    border-radius: var(--border-radius-lg);
+    cursor: pointer;
+    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);
+}
+
+.button-small {
+    display: inline-flex;
+    white-space: nowrap;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 var(--space-unit);
+    height: 22px;
+    font-size: var(--font-size-xs);
+    background-color: var(--color-button-small-bg);
+    color: var(--color-button-small-text);
+    gap: 4px;
+    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/_clarity.scss

@@ -1,140 +1,140 @@
-
-// Clarity Internal Dependencies
-@import '@clr/ui/src/utils/normalize'; // TODO: upgrade to latest normalize, once updated clr-ui can import core as is.
-
-@import '@clr/ui/src/utils/mixins';
-@import '@clr/ui/src/utils/variables/variables';
-@import '@clr/ui/src/utils/variables/properties';
-
-// Layout/Grid
-@import '@clr/ui/src/layout/grid/grid';
-
-@import '@clr/ui/src/typography/typography';
-
-// Component variables
-@import '@clr/ui/src/utils/variables.clarity';
-
-//Reboot
-@import '@clr/ui/src/utils/reboot.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
-@import '@clr/ui/src/utils/a11y';
-
-//Icons & Images
-@import '@clr/ui/src/image/icons.clarity'; // depends on variables.clarity
-@import '@clr/ui/src/image/images.clarity'; // depends on variables.clarity, mixins.clarity, icons.clarity
-
-//Popover
-@import '@clr/ui/src/popover/common/popover.clarity';
-
-// Smart Popover
-//@import './popover/popover-popover.clarity';
-
-//Buttons
-//@import '@clr/ui/src/button/buttons.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity
-//@import '@clr/ui/src/button/button-group/button-group.clarity'; // depends on variables.clarity, mixins.clarity
-//@import '@clr/ui/src/utils/close.clarity'; //depends on variables.clarity, mixins.clarity
-
-//Alerts
-//depends on variables.clarity, mixins.clarity, color.clarity, icons.clarity, buttons.clarity
-//@import '@clr/ui/src/emphasis/alert/alert.clarity';
-
-//Cards
-//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, list-group.clarity, buttons.clarity
-@import '@clr/ui/src/layout/card.clarity';
-
-//Dropdowns
-//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
-@import '@clr/ui/src/popover/dropdown/dropdown.clarity';
-
-//Badges
-// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity
-//@import '@clr/ui/src/emphasis/badges.clarity';
-
-//Labels
-// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity, badges.clarity
-@import '@clr/ui/src/emphasis/labels.clarity';
-
-//Login
-//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, icons.clarity
-@import '@clr/ui/src/layout/login.clarity';
-
-//Layout
-//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
-@import '@clr/ui/src/layout/main-container/layout.clarity';
-
-//Modal
-//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
-@import '@clr/ui/src/modal/modal.clarity';
-
-//Nav
-@import '@clr/ui/src/layout/nav/header.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
-@import '@clr/ui/src/layout/nav/links.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
-@import '@clr/ui/src/layout/nav/nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
-@import '@clr/ui/src/layout/nav/subnav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
-@import '@clr/ui/src/layout/vertical-nav/vertical-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
-@import '@clr/ui/src/layout/nav/responsive-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
-
-//Progress Bars
-//depends on variables.clarity, helpers.clarity, color.clarity, cards.clarity
-@import '@clr/ui/src/progress/progress-bars/progress-bars.clarity';
-
-//Spinners
-//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, icons.clarity
-@import '@clr/ui/src/progress/spinner/spinner.clarity';
-
-//Tables
-//depends on variables.clarity, mixins.clarity, helpers.clarity, typography.clarity
-@import '@clr/ui/src/data/tables.clarity';
-
-//Tooltips
-// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
-@import '@clr/ui/src/popover/tooltip/tooltips.clarity';
-
-//Forms
-@import '@clr/ui/src/forms/styles/mixins.forms';
-@import '@clr/ui/src/forms/styles/properties.forms';
-@import '@clr/ui/src/forms/styles/containers.clarity';
-@import '@clr/ui/src/forms/styles/form.clarity';
-@import '@clr/ui/src/forms/styles/checkbox.clarity';
-@import '@clr/ui/src/forms/styles/file.clarity';
-@import '@clr/ui/src/forms/styles/input.clarity';
-@import '@clr/ui/src/forms/styles/input-group.clarity';
-@import '@clr/ui/src/forms/styles/radio.clarity';
-@import '@clr/ui/src/forms/styles/select.clarity';
-@import '@clr/ui/src/forms/styles/textarea.clarity';
-@import '@clr/ui/src/forms/styles/toggles.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
-@import '@clr/ui/src/forms/styles/range.clarity';
-@import '@clr/ui/src/forms/styles/datalist.clarity';
-@import '@clr/ui/src/forms/datepicker/datepicker.clarity';
-@import '@clr/ui/src/forms/combobox/combobox.clarity';
-
-//Stack View
-//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, forms.clarity
-@import '@clr/ui/src/data/stack-view/stack-view.clarity';
-
-//Tree View
-//depends on variables.clarity, mixins.clarity, helpers.clarity, forms.clarity
-@import '@clr/ui/src/data/tree-view/tree-view.clarity';
-
-//Datagrid
-//depends on variables.clarity, mixins.clarity, helpers.clarity, layers, icons.clarity, tables.clarity, forms.clarity
-@import '@clr/ui/src/data/datagrid/datagrid.clarity';
-
-//Animations
-// no dependencies on other clarity scss
-@import '@clr/ui/src/utils/animations/animations.clarity';
-
-//Tabs
-@import '@clr/ui/src/layout/tabs/tabs.clarity'; // no dependencies on other clarity scss
-
-//Wizards
-// depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
-//@import '@clr/ui/src/wizard/wizard.clarity';
-
-// Signposts
-//@import '@clr/ui/src/popover/signpost/signposts.clarity';
-
-// Stepper
-@import '@clr/ui/src/accordion/accordion.clarity';
-
-// Timeline
-//@import '@clr/ui/src/timeline/timeline.clarity';
+
+// Clarity Internal Dependencies
+@import '@clr/ui/src/utils/normalize'; // TODO: upgrade to latest normalize, once updated clr-ui can import core as is.
+
+@import '@clr/ui/src/utils/mixins';
+@import '@clr/ui/src/utils/variables/variables';
+@import '@clr/ui/src/utils/variables/properties';
+
+// Layout/Grid
+@import '@clr/ui/src/layout/grid/grid';
+
+@import '@clr/ui/src/typography/typography';
+
+// Component variables
+@import '@clr/ui/src/utils/variables.clarity';
+
+//Reboot
+@import '@clr/ui/src/utils/reboot.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
+@import '@clr/ui/src/utils/a11y';
+
+//Icons & Images
+@import '@clr/ui/src/image/icons.clarity'; // depends on variables.clarity
+@import '@clr/ui/src/image/images.clarity'; // depends on variables.clarity, mixins.clarity, icons.clarity
+
+//Popover
+@import '@clr/ui/src/popover/common/popover.clarity';
+
+// Smart Popover
+//@import './popover/popover-popover.clarity';
+
+//Buttons
+//@import '@clr/ui/src/button/buttons.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity
+//@import '@clr/ui/src/button/button-group/button-group.clarity'; // depends on variables.clarity, mixins.clarity
+//@import '@clr/ui/src/utils/close.clarity'; //depends on variables.clarity, mixins.clarity
+
+//Alerts
+//depends on variables.clarity, mixins.clarity, color.clarity, icons.clarity, buttons.clarity
+//@import '@clr/ui/src/emphasis/alert/alert.clarity';
+
+//Cards
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, list-group.clarity, buttons.clarity
+@import '@clr/ui/src/layout/card.clarity';
+
+//Dropdowns
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
+@import '@clr/ui/src/popover/dropdown/dropdown.clarity';
+
+//Badges
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity
+//@import '@clr/ui/src/emphasis/badges.clarity';
+
+//Labels
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity, badges.clarity
+@import '@clr/ui/src/emphasis/labels.clarity';
+
+//Login
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, icons.clarity
+@import '@clr/ui/src/layout/login.clarity';
+
+//Layout
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import '@clr/ui/src/layout/main-container/layout.clarity';
+
+//Modal
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import '@clr/ui/src/modal/modal.clarity';
+
+//Nav
+@import '@clr/ui/src/layout/nav/header.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import '@clr/ui/src/layout/nav/links.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
+@import '@clr/ui/src/layout/nav/nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import '@clr/ui/src/layout/nav/subnav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import '@clr/ui/src/layout/vertical-nav/vertical-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
+@import '@clr/ui/src/layout/nav/responsive-nav.clarity'; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+//Progress Bars
+//depends on variables.clarity, helpers.clarity, color.clarity, cards.clarity
+@import '@clr/ui/src/progress/progress-bars/progress-bars.clarity';
+
+//Spinners
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, icons.clarity
+@import '@clr/ui/src/progress/spinner/spinner.clarity';
+
+//Tables
+//depends on variables.clarity, mixins.clarity, helpers.clarity, typography.clarity
+@import '@clr/ui/src/data/tables.clarity';
+
+//Tooltips
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
+@import '@clr/ui/src/popover/tooltip/tooltips.clarity';
+
+//Forms
+@import '@clr/ui/src/forms/styles/mixins.forms';
+@import '@clr/ui/src/forms/styles/properties.forms';
+@import '@clr/ui/src/forms/styles/containers.clarity';
+@import '@clr/ui/src/forms/styles/form.clarity';
+@import '@clr/ui/src/forms/styles/checkbox.clarity';
+@import '@clr/ui/src/forms/styles/file.clarity';
+@import '@clr/ui/src/forms/styles/input.clarity';
+@import '@clr/ui/src/forms/styles/input-group.clarity';
+@import '@clr/ui/src/forms/styles/radio.clarity';
+@import '@clr/ui/src/forms/styles/select.clarity';
+@import '@clr/ui/src/forms/styles/textarea.clarity';
+@import '@clr/ui/src/forms/styles/toggles.clarity'; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
+@import '@clr/ui/src/forms/styles/range.clarity';
+@import '@clr/ui/src/forms/styles/datalist.clarity';
+@import '@clr/ui/src/forms/datepicker/datepicker.clarity';
+@import '@clr/ui/src/forms/combobox/combobox.clarity';
+
+//Stack View
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, forms.clarity
+@import '@clr/ui/src/data/stack-view/stack-view.clarity';
+
+//Tree View
+//depends on variables.clarity, mixins.clarity, helpers.clarity, forms.clarity
+@import '@clr/ui/src/data/tree-view/tree-view.clarity';
+
+//Datagrid
+//depends on variables.clarity, mixins.clarity, helpers.clarity, layers, icons.clarity, tables.clarity, forms.clarity
+@import '@clr/ui/src/data/datagrid/datagrid.clarity';
+
+//Animations
+// no dependencies on other clarity scss
+@import '@clr/ui/src/utils/animations/animations.clarity';
+
+//Tabs
+@import '@clr/ui/src/layout/tabs/tabs.clarity'; // no dependencies on other clarity scss
+
+//Wizards
+// depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+//@import '@clr/ui/src/wizard/wizard.clarity';
+
+// Signposts
+//@import '@clr/ui/src/popover/signpost/signposts.clarity';
+
+// Stepper
+@import '@clr/ui/src/accordion/accordion.clarity';
+
+// Timeline
+//@import '@clr/ui/src/timeline/timeline.clarity';