@vendure/admin-ui 2.0.6 → 2.1.0-next.1

package/static/styles/_mixins.scss

@@ -30,14 +30,14 @@
     tr th:first-of-type {
         text-align: center;
         @media screen and (min-width: $breakpoint-medium) {
-            padding-left: var(--surface-margin-left);
-            text-align: left;
+            padding-inline-start: var(--surface-margin-left);
+            text-align: start;
         }
     }
 
     th:last-of-type,
     td:last-of-type {
-        border-right: 1px solid var(--color-weight-200);
+        border-inline-end: 1px solid var(--color-weight-200);
     }
 
     tr:first-of-type th:last-of-type {

package/static/styles/global/_forms.scss

@@ -132,7 +132,7 @@ clr-input-container.expand {
 }
 
 select {
-    padding-right: 24px !important;
+    padding-inline-end: 24px !important;
 }
 
 .select::after,
@@ -171,7 +171,7 @@ select {
 .ng-select.ng-select-single > .ng-select-container {
     //padding-top: 9px;
     input {
-        padding-left: 0 !important;
+        padding-inline-start: 0 !important;
     }
 }
 .ng-select.ng-select-focused > .ng-select-container {

package/static/styles/global/_global.scss

@@ -4,8 +4,8 @@ html, body:not([cds-text]) {
 }
 
 .page-block {
-    margin-left: var(--surface-margin-left);
-    margin-right: var(--space-unit);
+    margin-inline-start: var(--surface-margin-left);
+    margin-inline-end: var(--space-unit);
     margin-top: var(--space-unit);
     max-width: var(--layout-content-max-width);
 }

package/static/styles/global/_overrides.scss

@@ -63,7 +63,7 @@ button:focus {
 
 .full-label,
 .compact-label {
-    margin-left: 6px;
+    margin-inline-start: 6px;
 }
 
 .full-label {
@@ -79,6 +79,10 @@ button.icon-button {
     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) {

package/static/styles/global/_utilities.scss

@@ -37,14 +37,14 @@
 }
 
 .ml-auto {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 .mr-auto {
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
 }
 
 $spacings: (1, 2, 3, 4, 5, auto);

package/static/styles/rtl.scss

@@ -0,0 +1,143 @@
+// This file contains overrides to handle specific layout/display issues when in a right-to-left language.
+.app-container[dir="rtl"] {
+    .nav-group-header {
+        font-size: 20px !important;
+    }
+
+    .nav-link {
+        font-size: 16px !important;
+    }
+
+    .nav-link span {
+        margin-inline-end: 6px !important;
+    }
+
+    .section-header {
+        padding-inline-end: 16px !important;
+        padding-inline-start: 32px !important;
+    }
+
+    .dropdown-content-wrapper {
+        direction: rtl !important;
+    }
+
+    .dropdown-item {
+        padding-inline-end: 12px !important;
+        padding-inline-start: 12px !important;
+    }
+
+    .dropdown-item clr-icon {
+        margin-inline-start: 6px !important;
+    }
+
+    .login-wrapper-inner {
+        flex-direction: row-reverse;
+    }
+
+    .login-wrapper-form {
+        direction: rtl;
+    }
+
+    .dropdown-menu .dropdown-header {
+        text-align: end;
+    }
+
+    .button-small {
+        font-size: 14px;
+    }
+
+    .flex .button-small {
+        margin-inline-start: 6px !important;
+        margin-inline-end: 6px !important;
+    }
+
+    .page-title h1 {
+        font-size: 26px;
+        margin-inline-end: 32px;
+    }
+
+    .table thead tr th {
+        text-align: end !important;
+    }
+
+    .table thead tr th:first-child {
+        padding-inline-end: 48px !important;
+        padding-inline-start: 8px !important;
+    }
+
+    .table tbody tr td {
+        text-align: end !important;
+    }
+
+    .is-warning {
+        transform: rotate(360deg) scaleX(-1);
+    }
+
+    .modal-content {
+        direction: rtl;
+    }
+
+    vdr-timeline-entry .entry .entry-body {
+        margin-right: 20px;
+    }
+
+    vdr-timeline-entry .entry .entry-body .name {
+        margin-right: 12px;
+    }
+
+    .visible-toggle.clr-control-label {
+        margin-right: 30px;
+    }
+
+    .clr-toggle-wrapper {
+        margin-right: 0;
+        margin-left: 0.6rem;
+    }
+
+    .clr-toggle-wrapper input[type=checkbox]:checked + label::before {
+        right: -42px !important;
+        left: 0 !important;
+    }
+
+
+    .clr-toggle-wrapper input[type=checkbox]:not(:checked) + label {
+        &::before {
+            right: -2.1rem !important;
+        }
+        &::after {
+            right: -25px;
+        }
+    }
+
+    .header-title-row .ml-3 {
+        margin-right: 24px;
+    }
+
+    .calendar-button {
+        border: 1px solid var(--color-weight-300) !important;
+    }
+
+    .selected-datetime {
+
+
+    }
+
+    .input-wrapper input:not([type=checkbox]):not([type=radio]) {
+        border-bottom-left-radius: 0px !important;
+        border-bottom-right-radius: 4px !important;
+        border-top-left-radius: 0px !important;
+        border-top-right-radius: 4px !important;
+        border-inline-end: 1px solid var(--color-weight-300) !important;
+        border-inline-start: 0px !important;
+    }
+
+    .clr-toggle-wrapper .clr-control-label {
+        margin-right: 42px;
+        margin-left: 0px;
+    }
+
+    vdr-ab-left > clr-checkbox-wrapper {
+        margin-inline-end: 16px;
+    }
+
+}

package/static/styles/styles.scss

@@ -12,3 +12,5 @@
 
 @import 'theme/default';
 @import 'theme/dark';
+
+@import "rtl";

package/static/styles/theme/dark.scss

@@ -93,6 +93,7 @@
     --color-chip-error-bg: var(--color-error-700);
 
     --color-icon-button: var(--color-grey-200);
+    --color-icon-button-hover: var(--color-primary-200);
     --color-form-input-bg: var(--color-weight-150);
     --color-form-input-focus: var(--color-primary-500);
     --color-timeline-thread: var(--color-primary-700);

package/static/styles/theme/default.scss

@@ -152,6 +152,7 @@
 
 
     --color-icon-button: var(--color-grey-600);
+    --color-icon-button-hover: var(--color-primary-600);
     --color-form-input-bg: white;
     --color-form-input-focus: var(--color-primary-100);
     --color-timeline-thread: var(--color-primary-100);