@vendure/admin-ui 3.2.0 → 3.2.2

package/static/styles/global/_overrides.scss

@@ -1,165 +1,165 @@
-@import 'variables';
-@import 'forms';
-@import 'mixins';
-
-.main-container {
-    background-color: var(--clr-global-app-background);
-}
-
-h1:not([cds-text]),
-h2:not([cds-text]),
-h3:not([cds-text]),
-h4:not([cds-text]),
-h5:not([cds-text]),
-h6:not([cds-text]) {
-    font-family: Inter, sans-serif !important;
-}
-
-.p0:not([cds-text]),
-.p1:not([cds-text]),
-.p2:not([cds-text]),
-.p3:not([cds-text]),
-.p4:not([cds-text]),
-.p5:not([cds-text]),
-.p6:not([cds-text]) {
-    font-family: Inter, sans-serif !important;
-}
-
-a:link,
-a:visited {
-    text-decoration: none;
-}
-
-.content-area img,
-.modal-content img {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-}
-
-.modal-header .close,
-.modal-header--accessible .close {
-    border: none;
-    background: none;
-    cursor: pointer;
-}
-
-a:focus,
-button:focus {
-    outline-color: var(--color-primary-400);
-}
-
-.align-center {
-    align-items: center;
-}
-
-.btn-link.btn-warning {
-    color: var(--color-warning-500);
-
-    &:hover {
-        color: var(--color-warning-600);
-    }
-}
-
-.table {
-    border: none;
-    margin: 0;
-    background-color: transparent;
-    td {
-        border: none;
-    }
-    @include table-base-styles;
-}
-
-.full-label,
-.compact-label {
-    margin-inline-start: 6px;
-}
-
-.full-label {
-    display: none;
-}
-
-.compact-label {
-    display: initial;
-}
-
-button.icon-button {
-    border: none;
-    background: none;
-    cursor: pointer;
-    color: var(--color-icon-button);
-    border-radius: var(--border-radius);
-    &:hover {
-        color: var(--color-icon-button-hover);
-    }
-}
-
-@media screen and (min-width: $breakpoint-small) {
-    .full-label {
-        display: initial;
-    }
-    .compact-label {
-        display: none;
-    }
-}
-
-.cdk-overlay-container {
-    z-index: 1050;
-}
-
-.card {
-    margin-top: 0;
-    box-shadow: none;
-
-    .card-header, .card-title {
-        font-size: var(--font-size-sm);
-        font-weight: 500;
-    }
-}
-
-// clr tabs
-.btn.btn-link.nav-link {
-    background-color: transparent;
-}
-clr-tabs .btn.btn-link {
-    box-shadow: none;
-}
-
-
-.alert {
-    border: 1px solid var(--color-primary-150);
-    background-color: var(--color-primary-100);
-    color: var(--color-primary-900);
-    border-radius: var(--border-radius);
-    padding: var(--space-unit);
-
-    .alert-item {
-        display: flex;
-        align-items: flex-start;
-        gap: 4px;
-    }
-
-    &.alert-danger {
-        border-color: var(--color-chip-error-border);
-        background-color: var(--color-chip-error-bg);
-        color: var(--color-chip-error-text);
-    }
-
-    &.alert-warning {
-        border-color: var(--color-chip-warning-border);
-        background-color: var(--color-chip-warning-bg);
-        color: var(--color-chip-warning-text);
-    }
-}
-
-.dropdown {
-    .dropdown-item {
-        color: var(--color-text-200);
-        font-size: var(--font-size-sm);
-        gap: 2px;
-    }
-    .dropdown-divider {
-        margin: 0.3rem 0;
-    }
-}
+@import 'variables';
+@import 'forms';
+@import 'mixins';
+
+.main-container {
+    background-color: var(--clr-global-app-background);
+}
+
+h1:not([cds-text]),
+h2:not([cds-text]),
+h3:not([cds-text]),
+h4:not([cds-text]),
+h5:not([cds-text]),
+h6:not([cds-text]) {
+    font-family: Inter, sans-serif !important;
+}
+
+.p0:not([cds-text]),
+.p1:not([cds-text]),
+.p2:not([cds-text]),
+.p3:not([cds-text]),
+.p4:not([cds-text]),
+.p5:not([cds-text]),
+.p6:not([cds-text]) {
+    font-family: Inter, sans-serif !important;
+}
+
+a:link,
+a:visited {
+    text-decoration: none;
+}
+
+.content-area img,
+.modal-content img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
+.modal-header .close,
+.modal-header--accessible .close {
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+
+a:focus,
+button:focus {
+    outline-color: var(--color-primary-400);
+}
+
+.align-center {
+    align-items: center;
+}
+
+.btn-link.btn-warning {
+    color: var(--color-warning-500);
+
+    &:hover {
+        color: var(--color-warning-600);
+    }
+}
+
+.table {
+    border: none;
+    margin: 0;
+    background-color: transparent;
+    td {
+        border: none;
+    }
+    @include table-base-styles;
+}
+
+.full-label,
+.compact-label {
+    margin-inline-start: 6px;
+}
+
+.full-label {
+    display: none;
+}
+
+.compact-label {
+    display: initial;
+}
+
+button.icon-button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--color-icon-button);
+    border-radius: var(--border-radius);
+    &:hover {
+        color: var(--color-icon-button-hover);
+    }
+}
+
+@media screen and (min-width: $breakpoint-small) {
+    .full-label {
+        display: initial;
+    }
+    .compact-label {
+        display: none;
+    }
+}
+
+.cdk-overlay-container {
+    z-index: 1050;
+}
+
+.card {
+    margin-top: 0;
+    box-shadow: none;
+
+    .card-header, .card-title {
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+    }
+}
+
+// clr tabs
+.btn.btn-link.nav-link {
+    background-color: transparent;
+}
+clr-tabs .btn.btn-link {
+    box-shadow: none;
+}
+
+
+.alert {
+    border: 1px solid var(--color-primary-150);
+    background-color: var(--color-primary-100);
+    color: var(--color-primary-900);
+    border-radius: var(--border-radius);
+    padding: var(--space-unit);
+
+    .alert-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    &.alert-danger {
+        border-color: var(--color-chip-error-border);
+        background-color: var(--color-chip-error-bg);
+        color: var(--color-chip-error-text);
+    }
+
+    &.alert-warning {
+        border-color: var(--color-chip-warning-border);
+        background-color: var(--color-chip-warning-bg);
+        color: var(--color-chip-warning-text);
+    }
+}
+
+.dropdown {
+    .dropdown-item {
+        color: var(--color-text-200);
+        font-size: var(--font-size-sm);
+        gap: 2px;
+    }
+    .dropdown-divider {
+        margin: 0.3rem 0;
+    }
+}

package/static/styles/global/_sass-overrides.scss

@@ -1,8 +1,8 @@
-// Note: variables defined in this file should use the !default flag so they can be
-// overridden by custom Admin UI applications
-$clr-sidenav-width: 10.8rem !default;
-
-$clr-link-visited-color: var(--color-weight-700) !default;
-$clr-link-hover-color: var(--color-weight-700) !default;
-$clr-link-active-color: var(--color-weight-700) !default;
+// Note: variables defined in this file should use the !default flag so they can be
+// overridden by custom Admin UI applications
+$clr-sidenav-width: 10.8rem !default;
+
+$clr-link-visited-color: var(--color-weight-700) !default;
+$clr-link-hover-color: var(--color-weight-700) !default;
+$clr-link-active-color: var(--color-weight-700) !default;
 $clr-link-color: var(--color-weight-700) !default;

package/static/styles/global/_utilities.scss

@@ -1,155 +1,155 @@
-/////////////// layout ///////////////
-.block {
-    display: block !important;
-}
-
-.flex {
-    display: flex !important;
-}
-
-.flex.center {
-    align-items: center;
-    justify-content: center;
-}
-
-.flex.items-center {
-    align-items: center;
-}
-
-.flex.wrap {
-    flex-wrap: wrap;
-}
-
-.flex-spacer {
-    flex: 1;
-}
-
-.max-w-layout {
-    max-width: var(--layout-content-max-width);
-}
-
-.sm\:hidden {
-    @media screen and (max-width: $breakpoint-small) {
-        display: none !important;
-    }
-}
-
-.md\:hidden {
-    @media screen and (max-width: $breakpoint-medium) {
-        display: none !important;
-    }
-}
-
-.ml-auto {
-    margin-inline-start: auto;
-}
-.mr-auto {
-    margin-inline-end: auto;
-}
-.mx-auto {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-}
-
-$spacings: (1, 2, 3, 4, 5, auto);
-
-$sides: (
-    't': 'top',
-    'b': 'bottom',
-    'l': 'inline-start',
-    'r': 'inline-end',
-    '': (
-        'top',
-        'inline-start',
-        'bottom',
-        'inline-end',
-    ),
-    'x': (
-        'inline-start',
-        'inline-end',
-    ),
-    'y': (
-        'top',
-        'bottom',
-    ),
-);
-
-$breakpoints: (
-    '': '',
-    'sm': var(--breakpoint-sm),
-    'md': var(--breakpoint-md),
-    'lg': var(--breakpoint-lg),
-    'xl': var(--breakpoint-xl),
-);
-
-$breakpoint-glue: '\\:' !default;
-@each $breakName, $breakValue in $breakpoints {
-    @if $breakName != '' {
-        @media (min-width: $breakValue) {
-            @each $space in $spacings {
-                @each $prefix, $positions in $sides {
-                    .#{$breakName}\:p#{$prefix}-#{$space} {
-                        @each $pos in $positions {
-                            padding-#{$pos}: if(
-                                $space == auto,
-                                $space,
-                                calc(#{$space} * var(--space-unit))
-                            ) !important;
-                        }
-                    }
-                    .#{$breakName}\:m#{$prefix}-#{$space} {
-                        @each $pos in $positions {
-                            margin-#{$pos}: if(
-                                $space == auto,
-                                $space,
-                                calc(#{$space} * var(--space-unit))
-                            ) !important;
-                        }
-                    }
-                }
-            }
-        }
-    } @else {
-        @each $space in $spacings {
-            @each $prefix, $positions in $sides {
-                .p#{$prefix}-#{$space} {
-                    @each $pos in $positions {
-                        padding-#{$pos}: if(
-                            $space == auto,
-                            $space,
-                            calc(#{$space} * var(--space-unit))
-                        ) !important;
-                    }
-                }
-                .m#{$prefix}-#{$space} {
-                    @each $pos in $positions {
-                        margin-#{$pos}: if(
-                            $space == auto,
-                            $space,
-                            calc(#{$space} * var(--space-unit))
-                        ) !important;
-                    }
-                }
-            }
-        }
-    }
-}
-
-// colour classes
-$colors: ('weight', 'primary', 'secondary', 'success', 'warning', 'error');
-$scale: (100, 125, 150, 200, 300, 400, 500, 600, 700, 800, 900, 950, 975, 1000);
-$properties: (
-    'color': 'color',
-    'bg': 'background-color',
-    'border': 'border-color',
-);
-// create the classes
-@each $color in $colors {
-    @each $scale in $scale {
-        @each $property, $cssProperty in $properties {
-            .#{$property}-#{$color}-#{$scale} {
-                #{$cssProperty}: var(--color-#{$color}-#{$scale});
-            }
-        }
-    }
-}
+/////////////// layout ///////////////
+.block {
+    display: block !important;
+}
+
+.flex {
+    display: flex !important;
+}
+
+.flex.center {
+    align-items: center;
+    justify-content: center;
+}
+
+.flex.items-center {
+    align-items: center;
+}
+
+.flex.wrap {
+    flex-wrap: wrap;
+}
+
+.flex-spacer {
+    flex: 1;
+}
+
+.max-w-layout {
+    max-width: var(--layout-content-max-width);
+}
+
+.sm\:hidden {
+    @media screen and (max-width: $breakpoint-small) {
+        display: none !important;
+    }
+}
+
+.md\:hidden {
+    @media screen and (max-width: $breakpoint-medium) {
+        display: none !important;
+    }
+}
+
+.ml-auto {
+    margin-inline-start: auto;
+}
+.mr-auto {
+    margin-inline-end: auto;
+}
+.mx-auto {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+}
+
+$spacings: (1, 2, 3, 4, 5, auto);
+
+$sides: (
+    't': 'top',
+    'b': 'bottom',
+    'l': 'inline-start',
+    'r': 'inline-end',
+    '': (
+        'top',
+        'inline-start',
+        'bottom',
+        'inline-end',
+    ),
+    'x': (
+        'inline-start',
+        'inline-end',
+    ),
+    'y': (
+        'top',
+        'bottom',
+    ),
+);
+
+$breakpoints: (
+    '': '',
+    'sm': var(--breakpoint-sm),
+    'md': var(--breakpoint-md),
+    'lg': var(--breakpoint-lg),
+    'xl': var(--breakpoint-xl),
+);
+
+$breakpoint-glue: '\\:' !default;
+@each $breakName, $breakValue in $breakpoints {
+    @if $breakName != '' {
+        @media (min-width: $breakValue) {
+            @each $space in $spacings {
+                @each $prefix, $positions in $sides {
+                    .#{$breakName}\:p#{$prefix}-#{$space} {
+                        @each $pos in $positions {
+                            padding-#{$pos}: if(
+                                $space == auto,
+                                $space,
+                                calc(#{$space} * var(--space-unit))
+                            ) !important;
+                        }
+                    }
+                    .#{$breakName}\:m#{$prefix}-#{$space} {
+                        @each $pos in $positions {
+                            margin-#{$pos}: if(
+                                $space == auto,
+                                $space,
+                                calc(#{$space} * var(--space-unit))
+                            ) !important;
+                        }
+                    }
+                }
+            }
+        }
+    } @else {
+        @each $space in $spacings {
+            @each $prefix, $positions in $sides {
+                .p#{$prefix}-#{$space} {
+                    @each $pos in $positions {
+                        padding-#{$pos}: if(
+                            $space == auto,
+                            $space,
+                            calc(#{$space} * var(--space-unit))
+                        ) !important;
+                    }
+                }
+                .m#{$prefix}-#{$space} {
+                    @each $pos in $positions {
+                        margin-#{$pos}: if(
+                            $space == auto,
+                            $space,
+                            calc(#{$space} * var(--space-unit))
+                        ) !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// colour classes
+$colors: ('weight', 'primary', 'secondary', 'success', 'warning', 'error');
+$scale: (100, 125, 150, 200, 300, 400, 500, 600, 700, 800, 900, 950, 975, 1000);
+$properties: (
+    'color': 'color',
+    'bg': 'background-color',
+    'border': 'border-color',
+);
+// create the classes
+@each $color in $colors {
+    @each $scale in $scale {
+        @each $property, $cssProperty in $properties {
+            .#{$property}-#{$color}-#{$scale} {
+                #{$cssProperty}: var(--color-#{$color}-#{$scale});
+            }
+        }
+    }
+}