@deenruv/admin-ui 1.0.0

package/static/styles/global/_buttons.scss

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

package/static/styles/global/_clarity.scss

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

package/static/styles/global/_forms.scss

@@ -0,0 +1,187 @@
+.clr-form-control {
+    margin-top: 0;
+}
+
+.form,
+form {
+    padding-top: 0;
+}
+
+.form .form-block,
+form .form-block {
+    margin: 0.5rem 0 1.5rem;
+}
+
+.form-grid {
+    display: grid;
+    gap: calc(var(--space-unit) * 4);
+    grid-template-columns: 1fr 1fr;
+    .form-grid-span {
+        grid-column: span 2;
+    }
+
+    @container (max-width: 500px) {
+        grid-template-columns: 1fr;
+    }
+    @container (max-width: 700px) {
+        gap: calc(var(--space-unit) * 2);
+    }
+    @container (max-width: 500px) {
+        grid-template-columns: 1fr;
+
+        .form-grid-span {
+            grid-column: initial;
+        }
+    }
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select,
+textarea,
+.clr-input {
+    color: var(--color-text-100);
+    background-color: var(--color-form-input-bg);
+    &:not([readonly]) {
+        background-color: var(--color-form-input-bg);
+        &:focus {
+            background-size: 0% 100%;
+        }
+    }
+    &[readonly] {
+        border-color: var(--color-weight-200);
+    }
+    font-weight: 400;
+    &::placeholder {
+        color: var(--color-weight-400);
+    }
+
+    &.ng-invalid {
+        color: var(--color-error-700);
+        border-color: var(--color-error-300);
+    }
+}
+
+input:not([type='checkbox']):not([type='radio']),
+textarea,
+select {
+    border-radius: var(--border-radius-input) !important;
+    border: 1px solid var(--color-weight-200);
+    padding: 5px !important;
+    transition: background-color 0.2s, box-shadow 0.2s !important;
+    &:focus {
+        border-color: var(--color-primary-500);
+        box-shadow: 0 0 1px 1px var(--color-form-input-focus);
+        outline: none;
+    }
+    &[readonly]:focus {
+        border-color: var(--color-weight-400);
+    }
+}
+input:not([type='checkbox']):not([type='radio']),
+select {
+    height: 36px !important;
+}
+
+textarea {
+    &:focus {
+        border-color: var(--color-primary-500);
+        outline: none;
+    }
+}
+
+// Add the "expand" class to make the input container full width
+clr-input-container.expand {
+    .clr-control-container {
+        width: 100%;
+
+        input {
+            width: 100%;
+        }
+    }
+}
+
+.clr-input {
+    max-height: none !important;
+}
+
+.clr-input-wrapper {
+    max-height: none !important;
+}
+
+.clr-input-group {
+    height: initial !important;
+    border-bottom: none;
+    &:focus,
+    &.clr-focus {
+        background: none;
+        border-bottom: none;
+    }
+}
+
+.clr-toggle-wrapper .clr-control-label {
+    display: inline-block;
+    font-size: var(--font-size-sm);
+}
+
+.clr-checkbox-wrapper .clr-control-label {
+    display: inline-block;
+}
+
+.tooltip.tooltip-validation::before {
+    top: 10px !important;
+}
+
+select {
+    padding-inline-end: 24px !important;
+}
+
+.select::after,
+.clr-select-wrapper {
+    max-height: inherit;
+}
+.clr-select-wrapper::after {
+    z-index: 10;
+    top: 13px;
+}
+
+.ng-select .ng-select-container {
+    background: var(--color-form-input-bg) !important;
+    color: var(--color-text-100);
+    line-height: initial;
+    position: initial !important;
+    border: 1px solid var(--color-weight-200);
+}
+.ng-select .ng-select-container .ng-value-container {
+    //padding-top: 0;
+    min-width: 60px;
+    .ng-value {
+        margin: 0 6px 0 0;
+        background-color: var(--color-form-input-bg) !important;
+        color: var(--color-text-100) !important;
+    }
+    .ng-input {
+        margin: 0;
+    }
+    input {
+        border: none !important;
+        background: none !important;
+        height: initial !important;
+    }
+}
+.ng-select.ng-select-single > .ng-select-container {
+    //padding-top: 9px;
+    input {
+        padding-inline-start: 0 !important;
+    }
+}
+.ng-select.ng-select-focused > .ng-select-container {
+    border-color: var(--color-primary-500) !important;
+    box-shadow: 0 0 1px 1px var(--color-primary-100);
+    border-radius: 3px;
+}
+.ng-dropdown-panel {
+    background: var(--color-form-input-bg) !important;
+}
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: var(--color-grey-200);
+}

package/static/styles/global/_global.scss

@@ -0,0 +1,41 @@
+html, body:not([cds-text]) {
+    font-size: var(--font-size-sm);
+    font-family: Inter, sans-serif !important;
+    line-height: var(--cds-global-typography-body-line-height);
+    color: var(--color-text-100);
+}
+
+body p:not([cds-text]) {
+    font-family: Inter, sans-serif !important;
+}
+
+.page-block {
+    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);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+::-webkit-scrollbar-corner {
+    background-color: var(--color-scrollbar-bg);
+}
+::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar-thumb);
+    border: 2px solid var(--color-scrollbar-bg);
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+}
+::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-bg);
+}

package/static/styles/global/_overrides.scss

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

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

@@ -0,0 +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;
+$clr-link-color: var(--color-weight-700) !default;