@vendure/admin-ui 2.0.0-next.2 → 2.0.0-next.21

package/static/styles/global/_forms.scss

@@ -46,7 +46,7 @@ textarea,
 
 input,
 select {
-    border-radius: 3px !important;
+    border-radius: var(--border-radius-input) !important;
     border: 1px solid var(--color-grey-300) !important;
     padding: 5px !important;
     height: initial !important;
@@ -95,10 +95,6 @@ clr-input-container.expand {
     }
 }
 
-clr-select-container {
-    margin-bottom: 18px;
-}
-
 .tooltip.tooltip-validation::before {
     top: 10px !important;
 }
@@ -108,6 +104,9 @@ select {
 }
 
 .select::after,
+.clr-select-wrapper {
+    max-height: inherit;
+}
 .clr-select-wrapper::after {
     z-index: 10;
     top: 13px;
@@ -127,12 +126,14 @@ select {
     }
     input {
         border: none !important;
-        padding: 0;
         background: none !important;
     }
 }
 .ng-select.ng-select-single > .ng-select-container {
     padding-top: 9px;
+    input {
+        padding-left: 0 !important;
+    }
 }
 .ng-select.ng-select-focused > .ng-select-container {
     border-color: var(--color-primary-500) !important;
@@ -143,5 +144,5 @@ select {
     background: var(--color-form-input-bg) !important;
 }
 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-    background-color: var(--color-grey-100);
+    background-color: var(--color-grey-200);
 }

package/static/styles/global/_overrides.scss

@@ -5,6 +5,12 @@
     background-color: var(--clr-global-app-background);
 }
 
+.content-area img, .modal-content img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
 a:link, a:visited {
     color: var(--clr-btn-link-color);
 }
@@ -28,9 +34,13 @@ a:focus, button:focus {
 .table {
     border-color: var(--color-component-border-100);
 
-    td.align-middle {
+    td.align-middle, th.align-middle {
         vertical-align: middle!important;
     }
+
+    td.right {
+        text-align: right;
+    }
 }
 
 .full-label, .compact-label {

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

@@ -0,0 +1,3 @@
+// 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;

package/static/styles/global/_utilities.scss

@@ -7,14 +7,20 @@ $space-1: math.div($space-unit, 2);
 $space-2: $space-unit;
 $space-3: $space-unit * 2;
 $space-4: $space-unit * 3;
+$space-5: $space-unit * 4;
 
 /////////////// layout ///////////////
+.block {
+    display: block;
+}
+
 .flex {
     display: flex;
 }
 
 .flex.center {
     align-items: center;
+    justify-content: center;
 }
 
 .flex.wrap {
@@ -66,6 +72,14 @@ $space-4: $space-unit * 3;
 .mx4 { margin-left:   $space-4; margin-right:  $space-4 }
 .my4 { margin-top:    $space-4; margin-bottom: $space-4 }
 
+.m5  { margin:        $space-5 }
+.mt5 { margin-top:    $space-5 }
+.mr5 { margin-right:  $space-5 }
+.mb5 { margin-bottom: $space-5 }
+.ml5 { margin-left:   $space-5 }
+.mx5 { margin-left:   $space-5; margin-right:  $space-5 }
+.my5 { margin-top:    $space-5; margin-bottom: $space-5 }
+
 .mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
 .mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
 .mxn3 { margin-left: -$space-3; margin-right: -$space-3; }

package/static/styles/styles.scss

@@ -1,3 +1,4 @@
+@import "global/sass-overrides";
 @import "~@clr/icons/clr-icons.min.css";
 @import "~@clr/ui/src/utils/components.clarity";
 @import "~@ng-select/ng-select/themes/default.theme.css";

package/static/styles/theme/default.scss

@@ -74,6 +74,7 @@
     --color-icon-button: var(--color-grey-600);
     --color-form-input-bg: white;
     --color-timeline-thread: var(--color-primary-100);
+
     --color-chip-warning-border: var(--color-warning-200);
     --color-chip-warning-text: var(--color-warning-600);
     --color-chip-warning-bg: var(--color-warning-100);
@@ -83,6 +84,7 @@
     --color-chip-error-border: var(--color-error-200);
     --color-chip-error-text: var(--color-error-600);
     --color-chip-error-bg: var(--color-error-100);
+
     --color-json-editor-background-color: var(--color-grey-200);
     --color-json-editor-text: var(--color-grey-600);
     --color-json-editor-string: var(--color-secondary-600);
@@ -92,7 +94,17 @@
     --color-json-editor-key: var(--color-success-500);
     --color-json-editor-error: var(--color-error-500);
 
-    // Other variables
+    // Login page
     --login-page-bg: url(data:image/gif;base64,R0lGODlhFAAhAKIAABwcHBsbGxcXFx0dHRUVFRkZGR4eHhQUFCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ2NzI5LCAyMDEyLzA1LzAzLTEzOjQwOjAzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTIuMCBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTg1NDlCNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTg1NDlDNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5ODU0OTk2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5ODU0OUE2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAFAAhAAADfSi23M7igEcZOIfUSvApm1N42RAuQ0cqZ0Ri0xa8nlaltAdSY44RJsfAt3q4iLDGDFlj4Ji6RQ/6GwypqyOtwO12BQKv+EawnRq93dlwLa0NWtZpSYptniRzZfpSP9o0QBVaNHJKUHYoKkh6BnxIaoBMgnBYGAp0lgCLlgQJADs=);
+    --color-login-gradient-top: var(--color-primary-800);
+    --color-login-gradient-bottom: black;
+
+    // header
+    --color-header-gradient-from: var(--color-primary-800);
+    --color-header-gradient-to: var(--color-primary-900);
+
+    // Other variables
     --breakpoint-small: 768px;
+    --border-radius-img: var(--clr-global-borderradius);
+    --border-radius-input: var(--clr-global-borderradius);
 }

package/static/styles/ui-extension-theme.scss

@@ -1,6 +1,7 @@
 // This file is used to compile the theme.min.css file which can be used
 // by ui extensions to get the same styles as the main app.
 
+@import "global/sass-overrides";
 // Clarity Component SCSS
 @import "~@clr/ui/src/main";
 @import "global/overrides";