@deenruv/admin-ui-plugin 1.0.0

package/lib/admin-ui/styles/global/_utilities.scss

@@ -0,0 +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});
+            }
+        }
+    }
+}

package/lib/admin-ui/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-200) !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/lib/admin-ui/styles/styles.scss

@@ -0,0 +1,19 @@
+@import "global/sass-overrides";
+@import "global/clarity";
+@import "@cds/core/global.min.css";
+@import "@clr/icons/clr-icons.min.css";
+@import "@ng-select/ng-select/themes/default.theme.css";
+@import '@angular/cdk/overlay-prebuilt.css';
+@import "global/buttons";
+@import "global/forms";
+@import "global/overrides";
+@import "global/utilities";
+@import "fonts";
+@import "global/global";
+
+@import "component/prosemirror";
+
+@import 'theme/default';
+@import 'theme/dark';
+
+@import "rtl";