From e8d80f285c92163676cdb4d48b811e7cf1dc253c Mon Sep 17 00:00:00 2001 From: Enno Gotthold Date: Mon, 6 Jul 2020 11:01:45 +0200 Subject: [PATCH] mgr/dashboard: Introduces SASS modules Fixes: https://tracker.ceph.com/issues/45934 Signed-off-by: Enno Gotthold --- .../mgr/dashboard/frontend/.stylelintrc | 3 +- .../mgr/dashboard/frontend/angular.json | 4 +- .../cephfs-chart/cephfs-chart.component.scss | 2 +- .../cephfs-directories.component.scss | 6 +- .../app/ceph/cluster/logs/logs.component.scss | 8 +- .../health-pie/health-pie.component.scss | 2 +- .../dashboard/health/health.component.scss | 4 +- .../info-card/info-card-popover.scss | 15 +- .../info-card/info-card.component.scss | 9 +- .../pool/pool-list/pool-list.component.scss | 10 +- .../login-password-form.component.scss | 10 +- .../app/core/auth/login/login.component.scss | 24 +- .../role-details/role-details.component.scss | 6 +- .../blank-layout/blank-layout.component.scss | 4 +- .../login-layout/login-layout.component.scss | 8 +- .../workbench-layout.component.scss | 6 +- .../navigation/about/about.component.scss | 10 +- .../breadcrumbs/breadcrumbs.component.scss | 6 +- .../navigation/navigation.component.scss | 74 ++-- .../notifications.component.scss | 6 +- .../components/helper/helper.component.scss | 4 +- .../components/modal/modal.component.scss | 6 +- .../notifications-sidebar.component.scss | 10 +- .../select-badges.component.scss | 4 +- .../components/select/select.component.scss | 6 +- .../sparkline/sparkline.component.scss | 2 +- .../usage-bar/usage-bar.component.scss | 8 +- .../datatable/table/table.component.scss | 51 +-- .../mgr/dashboard/frontend/src/styles.scss | 377 +----------------- ...chart-tooltip.scss => _chart-tooltip.scss} | 8 +- .../src/styles/ceph-custom/_basics.scss | 92 +++++ .../src/styles/ceph-custom/_buttons.scss | 66 +++ .../src/styles/ceph-custom/_dropdown.scss | 36 ++ .../src/styles/ceph-custom/_forms.scss | 68 ++++ .../src/styles/ceph-custom/_grid.scss | 94 +++++ .../src/styles/ceph-custom/_icons.scss | 16 + .../src/styles/ceph-custom/_index.scss | 5 + .../_bootstrap-defaults.scss} | 40 +- .../src/styles/defaults/_functions.scss | 3 + .../frontend/src/styles/defaults/_index.scss | 5 + .../frontend/src/styles/defaults/_mixins.scss | 35 ++ .../frontend/src/styles/vendor/_index.scss | 2 + .../_style-overrides.scss} | 2 - .../_variables.scss} | 0 44 files changed, 589 insertions(+), 568 deletions(-) rename src/pybind/mgr/dashboard/frontend/src/styles/{chart-tooltip.scss => _chart-tooltip.scss} (80%) create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_icons.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_index.scss rename src/pybind/mgr/dashboard/frontend/src/styles/{defaults.scss => defaults/_bootstrap-defaults.scss} (85%) create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/defaults/_functions.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss rename src/pybind/mgr/dashboard/frontend/src/styles/{vendor.overrides.scss => vendor/_style-overrides.scss} (50%) rename src/pybind/mgr/dashboard/frontend/src/styles/{vendor.variables.scss => vendor/_variables.scss} (100%) diff --git a/src/pybind/mgr/dashboard/frontend/.stylelintrc b/src/pybind/mgr/dashboard/frontend/.stylelintrc index 1d2dde45254d..244a8f22cdfc 100644 --- a/src/pybind/mgr/dashboard/frontend/.stylelintrc +++ b/src/pybind/mgr/dashboard/frontend/.stylelintrc @@ -27,7 +27,8 @@ "inherit", "initial", "transparent", - "/darken/" + "/darken/", + "/\\w+\\.\\$.+/" ] } ] diff --git a/src/pybind/mgr/dashboard/frontend/angular.json b/src/pybind/mgr/dashboard/frontend/angular.json index 6ed23a879eaf..73d9118ec169 100644 --- a/src/pybind/mgr/dashboard/frontend/angular.json +++ b/src/pybind/mgr/dashboard/frontend/angular.json @@ -51,15 +51,13 @@ ], "styles": [ "node_modules/ngx-toastr/toastr.css", - "src/styles.scss", - "src/styles/vendor.overrides.scss" + "src/styles.scss" ], "scripts": [ "node_modules/chart.js/dist/Chart.bundle.js" ], "stylePreprocessorOptions": { "includePaths": [ - "src/styles", "src" ] } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss index 753313a64cbb..f90af6f5a917 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss @@ -1,4 +1,4 @@ -@import 'chart-tooltip.scss'; +@use './src/styles/chart-tooltip'; .chart-container { height: 500px; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss index 6e684fd6e7b8..040c588dc865 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; // Angular2-Tree Component ::ng-deep tree-root { @@ -8,10 +8,10 @@ } .quota-origin { - color: $color-brand-teal; + color: bd.$color-brand-teal; cursor: pointer; &:hover { - color: $color-gray13; + color: bd.$color-gray13; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss index 023ea6a03e44..d916170dc976 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; p { font-family: monospace; @@ -27,15 +27,15 @@ p { } .err { - color: $color-pink; + color: bd.$color-pink; } .warn { - color: $color-bright-yellow; + color: bd.$color-bright-yellow; } .info { - color: $color-brand-teal; + color: bd.$color-brand-teal; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss index 81c57a4d06a5..64e7a9822e22 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss @@ -1,4 +1,4 @@ -@import 'chart-tooltip.scss'; +@use './src/styles/chart-tooltip'; $canvas-width: 100%; $canvas-height: 100%; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss index 4b76b2286770..c89a4c1541da 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; cd-info-card { padding: 0 0.5vw; @@ -27,7 +27,7 @@ cd-info-card { } .card-text-error { - color: $color-solid-red; + color: bd.$color-solid-red; display: inline; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss index 164c74d196db..4680dafe4026 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .info-card-popover-cluster-status { max-height: 20vh; @@ -11,32 +11,31 @@ } } -@media (max-width: $screen-lg-max) { +@media (max-width: bd.$screen-lg-max) { .info-card-popover-cluster-status { max-width: 31vw; } } -@media (max-width: $screen-md-max) { +@media (max-width: bd.$screen-md-max) { .info-card-popover-cluster-status { max-width: 46vw; } } -@media (max-width: $screen-sm-max) { +@media (max-width: bd.$screen-sm-max) { .info-card-popover-cluster-status { max-width: 83vw; } } .info-card-content-clickable { - border: 1px solid; - border-color: $color-shade-gray; + border: 1px solid bd.$color-shade-gray; border-radius: 3px; cursor: pointer; padding: 7px; } .info-card-content-clickable:hover { - background-color: $color-light-shade-gray; - border-color: $color-light-gray; + background-color: bd.$color-light-shade-gray; + border-color: bd.$color-light-gray; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss index c04a400e43df..d1426d61bf8a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss @@ -1,4 +1,5 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; +@use './src/styles/defaults/mixins'; $card-font-min-width: 320px; $card-font-max-width: 2048px; @@ -6,15 +7,15 @@ $card-font-min-size: 12px; $card-font-max-size: 21px; .card { - @include fluid-font-size( + @include mixins.fluid-font-size( $card-font-min-width, $card-font-max-width, $card-font-min-size, $card-font-max-size ); - border: 0.5px solid $color-info-card-border; + border: 0.5px solid bd.$color-info-card-border; border-radius: 3px; - box-shadow: 0 1px 1px $color-shadow-gray; + box-shadow: 0 1px 1px bd.$color-shadow-gray; height: 100%; .card-body { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss index 252903bee975..168b878e6cb8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss @@ -1,17 +1,17 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; ::ng-deep .pg-clean { - color: $color-bright-green; + color: bd.$color-bright-green; } ::ng-deep .pg-working { - color: $color-primary; + color: bd.$color-primary; } ::ng-deep .pg-warning { - color: $color-bright-yellow; + color: bd.$color-bright-yellow; } ::ng-deep .pg-unknown { - color: $color-solid-red; + color: bd.$color-solid-red; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss index b99d90528793..a141e275f88f 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; ::ng-deep cd-login-password-form { h4 { @@ -9,16 +9,16 @@ .btn-password:focus, .form-control, .form-control:focus { - background-color: $color-password-toggle-bg; - color: $color-password-toggle-text; + background-color: bd.$color-password-toggle-bg; + color: bd.$color-password-toggle-text; } .form-control::placeholder { - color: $color-password-toggle-placeholder-text; + color: bd.$color-password-toggle-placeholder-text; } .btn-password:focus { - outline-color: $color-password-toggle-focus; + outline-color: bd.$color-password-toggle-focus; } button.btn:not(:first-child) { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss index 3685a06eca17..3e84175a425a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; ::ng-deep cd-login { h1 { @@ -6,13 +6,13 @@ } .form-group { - background-color: $color-password-toggle-bg; - border-left: 4px solid $color-solid-white; + background-color: bd.$color-password-toggle-bg; + border-left: 4px solid bd.$color-solid-white; height: auto; margin-bottom: 2rem; &:focus-within { - border-left: 4px solid $color-accent; + border-left: 4px solid bd.$color-accent; } .invalid-feedback { @@ -24,28 +24,28 @@ .btn-password:focus, .form-control, .form-control:focus { - background-color: $color-password-toggle-bg; + background-color: bd.$color-password-toggle-bg; border: 0; box-shadow: none; - color: $color-password-toggle-text; + color: bd.$color-password-toggle-text; filter: none; outline: none; } .placeholder { - color: $color-password-toggle-placeholder-text; + color: bd.$color-password-toggle-placeholder-text; } .btn-password:focus { - outline-color: $color-password-toggle-focus; + outline-color: bd.$color-password-toggle-focus; } } // This will override the colors applied by chrome @keyframes autofill { to { - background-color: $color-password-toggle-bg; - color: $color-password-toggle-text; + background-color: bd.$color-password-toggle-bg; + color: bd.$color-password-toggle-text; } } @@ -53,7 +53,7 @@ input:-webkit-autofill { animation-fill-mode: both; animation-name: autofill; border-radius: 0; - box-shadow: 0 0 0 1000px $color-password-toggle-bg inset; - -webkit-text-fill-color: $color-password-toggle-text; + box-shadow: 0 0 0 1000px bd.$color-password-toggle-bg inset; + -webkit-text-fill-color: bd.$color-password-toggle-text; transition-property: none; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss index ad27bd32273e..1eeaca9149a0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss @@ -1,13 +1,13 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; thead { - background-color: $color-table-header-bg; + background-color: bd.$color-table-header-bg; } .fa { font-size: large; &.fa-square-o { - color: $color-light-gray; + color: bd.$color-light-gray; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss index e5fbfa446aad..360d55369227 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; ::ng-deep #toast-container { margin-top: 2vw; @@ -7,7 +7,7 @@ margin-top: 2.5vw; } - @media (max-width: $screen-md-max) { + @media (max-width: bd.$screen-md-max) { margin-top: 9vw; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss index df7819c0ded8..956fb5abe87d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss @@ -1,11 +1,11 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; ::ng-deep .login { - background-color: $color-login-row-bg; + background-color: bd.$color-login-row-bg; background-image: url('assets/ceph_background.gif'); background-position: right bottom; background-repeat: no-repeat; - color: $color-login-row-text; + color: bd.$color-login-row-text; header { position: absolute; @@ -19,7 +19,7 @@ li a { &:hover { - background-color: $color-brand-teal; + background-color: bd.$color-brand-teal; } } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss index 71366d038350..3de3264f199f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss @@ -1,7 +1,7 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .dashboard { - background-color: $color-whitesmoke-gray; + background-color: bd.$color-whitesmoke-gray; margin: 0; padding: 0; } @@ -17,7 +17,7 @@ margin-top: 2.5vw; } - @media (max-width: $screen-md-max) { + @media (max-width: bd.$screen-md-max) { margin-top: 9vw; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss index 25b862564aaf..10cfaa89c34a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss @@ -1,12 +1,12 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .about-container { - background-color: $color-secondary; + background-color: bd.$color-secondary; background-image: url('assets/ceph_background.gif'); background-position: right bottom; background-repeat: no-repeat; - color: $color-solid-white; - text-shadow: 1px 1px $color-secondary; + color: bd.$color-solid-white; + text-shadow: 1px 1px bd.$color-secondary; } .product-versions { @@ -22,7 +22,7 @@ } .modal-header .close { - color: $color-solid-white; + color: bd.$color-solid-white; font-size: 2em; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss index 89e7a715c2f3..979fa9c2e85a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .breadcrumb { background-color: transparent; @@ -8,12 +8,12 @@ } .breadcrumb > li + li::before { - color: $color-breadcrumb; + color: bd.$color-breadcrumb; content: '\f101'; font-family: 'ForkAwesome'; padding: 0 5px 0 7px; } .breadcrumb > li > span { - color: $color-breadcrumb; + color: bd.$color-breadcrumb; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss index c928dd9b8417..d905f52067c2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; /* --------------------------------------------------- NAVBAR STYLE @@ -6,16 +6,16 @@ ::ng-deep .cd-navbar-top { .cd-navbar-brand { - background: $color-navbar-bg; - border-top: 4px solid $color-nav-top-bar; + background: bd.$color-navbar-bg; + border-top: 4px solid bd.$color-nav-top-bar; &.isPwdDisplayed { - top: $top-notification-height; + top: bd.$top-notification-height; } .navbar-brand, .navbar-brand:hover { - color: $color-navbar-brand; + color: bd.$color-navbar-brand; height: auto; padding: 0; } @@ -33,7 +33,7 @@ } .fa-navicon { - color: $color-nav-toggle-bar; + color: bd.$color-nav-toggle-bar; } } @@ -42,8 +42,8 @@ } .cd-navbar-utility > .active > a { - background-color: $color-nav-links-hover; - color: $color-nav-links; + background-color: bd.$color-nav-links-hover; + color: bd.$color-nav-links; } .cd-navbar-utility > li > .open > a, @@ -51,14 +51,14 @@ .cd-navbar-utility > li > .open > a:hover { background-color: transparent; border-color: transparent; - color: $color-nav-links; + color: bd.$color-nav-links; } } .navbar-nav > li > .cd-navbar > [ngbDropdown] > a, .navbar-nav > li > .cd-navbar > a, .navbar-nav > li > a { - color: $color-nav-links; + color: bd.$color-nav-links; display: block; line-height: 1; padding: 13.5px 18px !important; @@ -68,7 +68,7 @@ .navbar-nav .nav-link, .navbar-nav .nav-link:hover { - color: $color-nav-links; + color: bd.$color-nav-links; } .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover, @@ -76,7 +76,7 @@ .navbar-nav > li > .cd-navbar > a:hover, .navbar-nav > li > a:hover, .navbar-nav > li:hover { - background-color: $color-nav-links-hover; + background-color: bd.$color-nav-links-hover; } .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a, @@ -90,10 +90,10 @@ .navbar-nav > .open > a:hover { background-color: transparent; border-color: transparent; - color: $color-nav-links; + color: bd.$color-nav-links; } - @media (min-width: $screen-md-min) { + @media (min-width: bd.$screen-md-min) { .cd-navbar-utility { border-bottom: 0; font-size: 1.1rem; @@ -103,7 +103,7 @@ } } - @media (max-width: $screen-sm-max) { + @media (max-width: bd.$screen-sm-max) { .navbar-nav { margin: 0; @@ -112,24 +112,24 @@ } .open .dropdown-menu { - background-color: $color-nav-open-bg; + background-color: bd.$color-nav-open-bg; border: 0; padding-bottom: 0; padding-top: 0; } .open .dropdown-menu > li > a { - color: $color-nav-links; + color: bd.$color-nav-links; padding: 5px 15px 5px 35px; } .open .dropdown-menu > .active > a { - background-color: $color-nav-active-link-bg; + background-color: bd.$color-nav-active-link-bg; } + } - > li > a:hover { - background-color: $color-nav-active-link-bg; - } + .navbar-nav > li > a:hover { + background-color: bd.$color-nav-active-link-bg; } } } @@ -143,9 +143,9 @@ $sidebar-width: 200px; .cd-navbar-primary .active > a, .cd-navbar-primary > .active > a:focus, .cd-navbar-primary > .active > a:hover { - background-color: $color-nav-links-hover !important; + background-color: bd.$color-nav-links-hover !important; border: 0 !important; - color: $color-nav-links !important; + color: bd.$color-nav-links !important; } .wrapper { @@ -153,13 +153,13 @@ $sidebar-width: 200px; width: 100%; #sidebar { - background: $color-navbar-bg; + background: bd.$color-navbar-bg; bottom: 0; - color: $color-solid-white; + color: bd.$color-solid-white; left: 0; overflow-y: auto; position: fixed; - top: $navbar-height; + top: bd.$navbar-height; transition: all 0.3s; width: $sidebar-width; z-index: 999; @@ -175,12 +175,12 @@ $sidebar-width: 200px; } p { - color: $color-solid-white; + color: bd.$color-solid-white; padding: 10px; } li a { - color: $color-solid-white; + color: bd.$color-solid-white; display: block; font-size: 1.1em; padding: 10px; @@ -188,8 +188,8 @@ $sidebar-width: 200px; text-decoration: none; &:hover { - background: $color-primary; - color: $color-solid-white; + background: bd.$color-primary; + color: bd.$color-solid-white; } > .badge { @@ -199,7 +199,7 @@ $sidebar-width: 200px; li.active > a, li > a a[aria-expanded='true'] { - color: $color-solid-white; + color: bd.$color-solid-white; } } } @@ -223,7 +223,7 @@ $sidebar-width: 200px; } ul ul a { - background: lighten($color-navbar-bg, 10); + background: lighten(bd.$color-navbar-bg, 10); font-size: 0.9em !important; padding-left: 30px !important; } @@ -245,7 +245,7 @@ $sidebar-width: 200px; bottom: 0; position: absolute; right: 0; - top: $navbar-height; + top: bd.$navbar-height; transition: all 0.3s; width: calc(100% - #{$sidebar-width}); @@ -261,19 +261,19 @@ $sidebar-width: 200px; @for $i from 1 through 2 { :host.top-notification-#{$i} { .cd-navbar-top .cd-navbar-brand { - top: $top-notification-height * $i; + top: bd.$top-notification-height * $i; } #sidebar { - top: $navbar-height + $top-notification-height * $i; + top: bd.$navbar-height + bd.$top-notification-height * $i; } #content { - top: $navbar-height + $top-notification-height * $i; + top: bd.$navbar-height + bd.$top-notification-height * $i; } cd-notifications-sidebar { - top: $navbar-height + $top-notification-height * $i + 10px; + top: bd.$navbar-height + bd.$top-notification-height * $i + 10px; } } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss index d86ba90bccc7..a4e2673f63b8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss @@ -1,9 +1,9 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .running i { - color: $color-primary; + color: bd.$color-primary; } .running:hover i { - color: $color-solid-white; + color: bd.$color-solid-white; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss index e2844d0debbb..fe48bea33a7a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss @@ -1,7 +1,7 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; i { - color: $color-helper-bg; + color: bd.$color-helper-bg; cursor: pointer; padding-left: 4px; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss index 05ba40f50373..51af300723b0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss @@ -1,12 +1,12 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/mixins'; .modal-header { - @include hf; + @include mixins.hf; border-radius: 5px 5px 0 0; } ::ng-deep .modal-footer { - @include hf; + @include mixins.hf; border-radius: 0 0 5px 5px; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss index 8e1334853f04..d6b5f639dea1 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss @@ -1,11 +1,11 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; :host { bottom: 10px; max-width: 90vw; position: fixed; right: -350px; - top: $navbar-height + 10px; + top: bd.$navbar-height + 10px; transition: all 0.6s; @@ -27,14 +27,14 @@ ngx-simplebar { } .separator { - background-color: $color-popover-seperator-bg; - color: $color-popover-seperator-text; + background-color: bd.$color-popover-seperator-bg; + color: bd.$color-popover-seperator-text; font-size: 1rem; padding: 5px 12px; } .btn-link .fa-trash-o { - color: $color-black; + color: bd.$color-black; } table { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss index 925ef0df6a7d..f6306f6700dd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss @@ -1,7 +1,7 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .badge-remove { - color: $color-solid-white; + color: bd.$color-solid-white; } i.fa-pencil { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss index b8acc1fd8d22..6adfb0e3e113 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss @@ -1,13 +1,13 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .select-menu-item { - border-bottom: 1px solid $color-transparent; + border-bottom: 1px solid bd.$color-transparent; cursor: pointer; display: block; font-size: 1rem; &:hover { - background-color: $color-whitesmoke-gray; + background-color: bd.$color-whitesmoke-gray; } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss index ef4ae7a322bc..25486150be45 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss @@ -1,4 +1,4 @@ -@import 'chart-tooltip.scss'; +@use './src/styles/chart-tooltip'; .chart-container { position: static !important; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss index 54131a6d413b..80700d158504 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss @@ -1,11 +1,11 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .bg-info { - background-color: $color-progress-bar-info-bg !important; + background-color: bd.$color-progress-bar-info-bg !important; } .bg-freespace { - background-color: $color-progress-bar-freespace-bg !important; + background-color: bd.$color-progress-bar-freespace-bg !important; } .progress { @@ -18,7 +18,7 @@ } span { - color: $color-progress-text; + color: bd.$color-progress-text; display: block; font-weight: normal; position: absolute; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss index 27ffa89164ab..e102a91872e5 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss @@ -1,7 +1,8 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; +@use './src/styles/defaults/mixins'; @mixin row-details-icon { - color: $gray-900; + color: bd.$gray-900; font-family: 'ForkAwesome', sans-serif; font-size: 1rem; line-height: 1; @@ -11,7 +12,7 @@ margin-bottom: 25px; .separator { - border-left: 1px solid $color-table-seperator-border; + border-left: 1px solid bd.$color-table-seperator-border; display: inline-block; height: 30px; margin-left: 5px; @@ -20,7 +21,7 @@ } .widget-toolbar { - border-left: 1px solid $color-table-seperator-border; + border-left: 1px solid bd.$color-table-seperator-border; float: right; padding: 0 8px; @@ -36,8 +37,8 @@ } .dataTables_header { - background-color: $color-table-header-bg; - border: 1px solid $color-table-header-border; + background-color: bd.$color-table-header-bg; + border: 1px solid bd.$color-table-header-border; border-bottom: 0; padding: 5px; position: relative; @@ -47,7 +48,7 @@ } ::ng-deep .table-filters { - border-left: 1px solid $color-table-seperator-border; + border-left: 1px solid bd.$color-table-seperator-border; float: right; padding-left: 8px; } @@ -61,7 +62,7 @@ } .input-group { - border-left: 1px solid $color-table-input-border; + border-left: 1px solid bd.$color-table-input-border; float: right; max-width: 250px; padding-left: 8px; @@ -86,7 +87,7 @@ } ::ng-deep .cd-datatable { - border: 1px solid $color-table-header-border; + border: 1px solid bd.$color-table-header-border; margin-bottom: 0; max-width: none !important; @@ -99,10 +100,10 @@ width: 100%; .container { - background-color: $color-table-active-row; + background-color: bd.$color-table-active-row; .bar { - background-color: $color-table-active-row; + background-color: bd.$color-table-active-row; height: 100%; left: 0; overflow: hidden; @@ -112,7 +113,7 @@ .bar::before { animation: progress-loading 3s linear infinite; - background-color: $color-table-progress-bar-active; + background-color: bd.$color-table-progress-bar-active; content: ''; display: block; height: 100%; @@ -125,24 +126,24 @@ .datatable-header { background-clip: padding-box; - background-color: $color-table-datatable-header; + background-color: bd.$color-table-datatable-header; background-image: linear-gradient( to bottom, - $color-table-gradient-1 0, - $color-table-gradient-2 100% + bd.$color-table-gradient-1 0, + bd.$color-table-gradient-2 100% ); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0); .sort-asc, .sort-desc { - color: $color-table-sort; + color: bd.$color-table-sort; } .datatable-header-cell { - @include table-cell; - font-weight: bold; + @include mixins.table-cell; + font-weight: bold; text-align: left; .datatable-header-cell-label { @@ -184,7 +185,7 @@ margin-bottom: -6px; .empty-row { - background-color: $color-table-empty-row; + background-color: bd.$color-table-empty-row; font-style: italic; font-weight: bold; padding-bottom: 5px; @@ -194,27 +195,27 @@ .datatable-body-row { &.clickable:hover .datatable-row-group { - background-color: $color-table-hover-row; + background-color: bd.$color-table-hover-row; transition-duration: 0.3s; transition-property: background; transition-timing-function: linear; } &.datatable-row-even { - background-color: $color-table-even-row-bg; + background-color: bd.$color-table-even-row-bg; } &.datatable-row-odd { - background-color: $color-table-odd-row-bg; + background-color: bd.$color-table-odd-row-bg; } &.active, &.active:hover { - background-color: $color-table-active-row-hover; + background-color: bd.$color-table-active-row-hover; } .datatable-body-cell { - @include table-cell; + @include mixins.table-cell; &:first-child { border-left: 0; @@ -228,7 +229,7 @@ } .datatable-row-detail { - border-bottom: 2px solid $color-table-header-border; + border-bottom: 2px solid bd.$color-table-header-border; overflow-y: visible !important; padding: 20px; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index 58f4eb707156..6954c771453f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -1,5 +1,5 @@ /* You can add global styles to this file, and also import other style files */ -@import 'defaults.scss'; +@use './src/styles/defaults' as *; // Angular2-Tree Component @import '~angular-tree-component/dist/angular-tree-component.css'; @@ -25,291 +25,15 @@ $popover-max-width: 350px; @import '~bootstrap/scss/bootstrap'; @import '~fork-awesome/scss/fork-awesome'; @import 'app/ceph/dashboard/info-card/info-card-popover.scss'; -@import 'bootstrap-extends'; +@import './src/styles/bootstrap-extends'; -/* Reset checkbox success color */ -.was-validated .custom-control-input:valid, -.custom-control-input.is-valid { - ~ .custom-control-label { - color: initial; - } - - &:checked ~ .custom-control-label::before { - background-color: $component-active-bg; - border-color: $custom-control-indicator-checked-border-color; - } - - ~ .custom-control-label::before { - border-color: $custom-control-indicator-border-color; - } - - &:focus ~ .custom-control-label::before { - box-shadow: $custom-control-indicator-focus-box-shadow; - } - - &:focus:not(:checked) ~ .custom-control-label::before { - border-color: $custom-control-indicator-focus-border-color; - } -} - -/* Basics */ -html { - background-color: $color-app-bg; -} - -html, -body { - font-size: 12px; - height: 100%; - width: 100%; -} - -h1 { - font-size: 2em; - letter-spacing: -1px; -} - -h2 { - font-size: 1.833em; - letter-spacing: -1px; -} - -h3 { - display: block; - font-size: 1.583em; - font-weight: 400; -} - -h4 { - font-size: 1.5em; - line-height: normal; -} - -option { - font-style: normal; - font-weight: normal; -} - -.full-height { - height: 100vh; -} - -.full-width { - width: 100vw; -} - -.vertical-align { - align-items: center; - display: flex; -} +@import './src/styles/ceph-custom/basics'; +@import './src/styles/ceph-custom/buttons'; +@import './src/styles/ceph-custom/dropdown'; +@import './src/styles/ceph-custom/forms'; +@import './src/styles/ceph-custom/grid'; +@import './src/styles/ceph-custom/icons'; -.horizontal-align { - display: flex; - justify-content: center; -} - -.loading { - left: 50%; - position: absolute; - top: 50%; -} - -.margin-right-md { - margin-right: 15px; -} - -.no-border { - border: 0; - box-shadow: 0 0 0 !important; -} - -.italic { - font-style: italic; -} - -.bold { - font-weight: bold; -} - -.text-right { - text-align: right; -} - -.text-monospace { - font-family: monospace; -} - -.text-pre { - white-space: pre-wrap; -} - -/* Buttons */ -.btn-light { - background-color: $color-solid-white; - border-color: $color-input-border !important; - - &:hover { - background-color: $color-soft-gray; - border-color: $color-input-border-hover !important; - } -} - -// We have some inputs that don't have a corresponding formControlName, -// to be able to get the same styling and no JS errors we need use a different -// class name -.cd-form-control { - @extend .form-control; -} - -.btn { - &, - &:active, - &.active { - &:focus, - &.focus { - outline: 0; - } - } -} - -.btn-primary .badge { - background-color: $color-button-badge; - color: $color-primary; -} - -.btn-group > .btn > i.fa, -.cd-datatable-actions button.btn i.fa { - /** Add space between icon and text */ - margin-right: 5px; -} - -/* Dropdown */ -.dropdown-menu { - min-width: 50px; - z-index: 999999; - - button.dropdown-item:focus { - outline: none; - } -} - -.dropdown-menu > li > a { - color: $color-dropdown-menu; - cursor: pointer; -} - -.dropdown-menu > li > a > i.fa { - /** Add space between icon and text */ - margin-right: 5px; -} - -.dropdown-menu > .active > a { - background-color: $color-dropdown-active-bg; - color: $color-dropdown-active-text; - - &, - &:hover, - &:focus { - background-color: darken($color-dropdown-active-bg, 10); - } -} - -.dataTables_wrapper .dropdown-menu > li.dropdown-divider { - cursor: auto; -} - -/* Grid */ -.container, -.container-fluid { - padding-left: 30px !important; - padding-right: 30px !important; -} - -.row { - margin-left: -30px; - margin-right: -30px; -} - -.col-lg-1, -.col-lg-10, -.col-lg-11, -.col-lg-12, -.col-lg-2, -.col-lg-3, -.col-lg-4, -.col-lg-5, -.col-lg-6, -.col-lg-7, -.col-lg-8, -.col-lg-9, -.col-md-1, -.col-md-10, -.col-md-11, -.col-md-12, -.col-md-2, -.col-md-3, -.col-md-4, -.col-md-5, -.col-md-6, -.col-md-7, -.col-md-8, -.col-md-9, -.col-sm-1, -.col-sm-10, -.col-sm-11, -.col-sm-12, -.col-sm-2, -.col-sm-3, -.col-sm-4, -.col-sm-5, -.col-sm-6, -.col-sm-7, -.col-sm-8, -.col-sm-9, -.col-1, -.col-10, -.col-11, -.col-12, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9 { - padding-left: 30px; - padding-right: 30px; -} - -tags-input .tags { - border: 1px solid $color-tags-border; - border-radius: 4px; - box-shadow: inset 0 1px 1px $color-tags-box-shadow; -} - -.card-header { - font-size: 1.3em; -} - -.card-body h2:first-child { - margin-top: 0; -} - -.disabled { - pointer-events: none; -} - -.clickable, -a { - cursor: pointer; -} - -:invalid .has-error-btn, -:invalid .has-error-btn:disabled:hover { - background-color: $color-error-btn-bg; - border-color: $color-error-btn-border; -} /* If javascript is disabled. */ .noscript { padding-top: 5em; @@ -318,71 +42,6 @@ a { .noscript p { color: $color-noscript-text; } -/* Forms */ -.required::after { - color: $color-required-text; - content: '*'; - font-size: 1.167rem; - padding-left: 4px; -} - -.form-footer { - display: flex; - width: 100%; -} - -.form-control { - display: table-cell; - - &:focus { - border-color: $color-primary-transparent; - box-shadow: inset 0 1px 1px $color-transparent-black1, 0 0 8px 2px $color-primary-transparent1; - outline: 0; - } -} - -.custom-checkbox { - padding-top: 7px; -} - -.cd-col-form { - @extend .col-12; - @extend .col-lg-8; - @extend .col-xl-6; -} - -.cd-col-form-label { - @extend .col-form-label; - @extend .col-sm-4; - @extend .col-md-4; - @extend .col-lg-3; -} - -.cd-col-form-input { - @extend .col-sm-8; - @extend .col-md-8; - @extend .col-lg-9; -} - -.cd-col-form-offset { - @extend .offset-sm-4; - @extend .offset-lg-3; - @extend .cd-col-form-input; -} - -cd-modal { - .cd-col-form-label { - @extend .col-lg-4; - } - - .cd-col-form-input { - @extend .col-lg-8; - } - - .cd-col-form-offset { - @extend .offset-lg-4; - } -} /* Card */ .card-footer button.btn:not(:first-child) { @@ -396,27 +55,7 @@ cd-modal { .nav-tabs { margin-bottom: 15px; } -/* Icons */ -.ceph-icon { - background: url('assets/Ceph_Logo_Stacked_RGB_120411_fa_228x228.png'); -} -.prometheus-icon { - background: url('assets/prometheus_logo.svg'); -} - -.custom-icon { - background-clip: padding-box; - background-repeat: no-repeat; - background-size: contain; - margin-right: 8px; - padding: 10px; -} -/* Notification icons */ -.toast-message .custom-icon { - /* Display icons in white, regardless of their origin color. */ - filter: brightness(0) invert(1); -} /* Block UI */ .block-ui-wrapper { background: $color-transparent-black !important; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss similarity index 80% rename from src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss rename to src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss index 3e9469eea286..d05bedee5c03 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss @@ -1,4 +1,4 @@ -@import 'defaults.scss'; +@use './src/styles/defaults/bootstrap-defaults' as bd; .chart-container { cursor: pointer; @@ -12,9 +12,9 @@ canvas { } .chartjs-tooltip { - background: $color-chart-tooltip-bg; + background: bd.$color-chart-tooltip-bg; border-radius: 3px; - color: $color-chat-tooltip-text; + color: bd.$color-chat-tooltip-text; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important; opacity: 0; pointer-events: none; @@ -41,7 +41,7 @@ canvas { } .chartjs-tooltip::after { - border-color: $color-chart-tooltip-border transparent transparent transparent; + border-color: bd.$color-chart-tooltip-border transparent transparent transparent; border-style: solid; border-width: 5px; content: ' '; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss new file mode 100644 index 000000000000..7cfe9244aa48 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss @@ -0,0 +1,92 @@ +@use './src/styles/defaults/bootstrap-defaults' as bd; + +/* Basics */ +html { + background-color: bd.$color-app-bg; +} + +html, +body { + font-size: 12px; + height: 100%; + width: 100%; +} + +h1 { + font-size: 2em; + letter-spacing: -1px; +} + +h2 { + font-size: 1.833em; + letter-spacing: -1px; +} + +h3 { + display: block; + font-size: 1.583em; + font-weight: 400; +} + +h4 { + font-size: 1.5em; + line-height: normal; +} + +option { + font-style: normal; + font-weight: normal; +} + +.full-height { + height: 100vh; +} + +.full-width { + width: 100vw; +} + +.vertical-align { + align-items: center; + display: flex; +} + +.horizontal-align { + display: flex; + justify-content: center; +} + +.loading { + left: 50%; + position: absolute; + top: 50%; +} + +.margin-right-md { + margin-right: 15px; +} + +.no-border { + border: 0; + box-shadow: 0 0 0 !important; +} + +.italic { + font-style: italic; +} + +.bold { + font-weight: bold; +} + +.text-right { + text-align: right; +} + +.text-monospace { + font-family: monospace; +} + +.text-pre { + white-space: pre-wrap; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss new file mode 100644 index 000000000000..6e82857821fd --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss @@ -0,0 +1,66 @@ +@use './src/styles/defaults/bootstrap-defaults' as bd; + +/* Reset checkbox success color */ +.was-validated .custom-control-input:valid, +.custom-control-input.is-valid { + ~ .custom-control-label { + color: initial; + } + + &:checked ~ .custom-control-label::before { + background-color: $component-active-bg; + border-color: $custom-control-indicator-checked-border-color; + } + + ~ .custom-control-label::before { + border-color: $custom-control-indicator-border-color; + } + + &:focus ~ .custom-control-label::before { + box-shadow: $custom-control-indicator-focus-box-shadow; + } + + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: $custom-control-indicator-focus-border-color; + } +} + +/* Buttons */ +.btn-light { + background-color: bd.$color-solid-white; + border-color: bd.$color-input-border !important; + + &:hover { + background-color: bd.$color-soft-gray; + border-color: bd.$color-input-border-hover !important; + } +} + +// We have some inputs that don't have a corresponding formControlName, +// to be able to get the same styling and no JS errors we need use a different +// class name +.cd-form-control { + @extend .form-control; +} + +.btn { + &, + &:active, + &.active { + &:focus, + &.focus { + outline: 0; + } + } +} + +.btn-primary .badge { + background-color: bd.$color-button-badge; + color: bd.$color-primary; +} + +.btn-group > .btn > i.fa, +.cd-datatable-actions button.btn i.fa { + /** Add space between icon and text */ + margin-right: 5px; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss new file mode 100644 index 000000000000..16c7ed750e4f --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss @@ -0,0 +1,36 @@ +@use './src/styles/defaults/bootstrap-defaults' as bd; + +/* Dropdown */ +.dropdown-menu { + min-width: 50px; + z-index: 999999; + + button.dropdown-item:focus { + outline: none; + } +} + +.dropdown-menu > li > a { + color: bd.$color-dropdown-menu; + cursor: pointer; +} + +.dropdown-menu > li > a > i.fa { + /** Add space between icon and text */ + margin-right: 5px; +} + +.dropdown-menu > .active > a { + background-color: bd.$color-dropdown-active-bg; + color: bd.$color-dropdown-active-text; + + &, + &:hover, + &:focus { + background-color: darken(bd.$color-dropdown-active-bg, 10); + } +} + +.dataTables_wrapper .dropdown-menu > li.dropdown-divider { + cursor: auto; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss new file mode 100644 index 000000000000..ad6cda1f9551 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss @@ -0,0 +1,68 @@ +@use './src/styles/defaults/bootstrap-defaults' as bd; + +/* Forms */ +.required::after { + color: bd.$color-required-text; + content: '*'; + font-size: 1.167rem; + padding-left: 4px; +} + +.form-footer { + display: flex; + width: 100%; +} + +.form-control { + display: table-cell; + + &:focus { + border-color: bd.$color-primary-transparent; + box-shadow: inset 0 1px 1px bd.$color-transparent-black1, + 0 0 8px 2px bd.$color-primary-transparent1; + outline: 0; + } +} + +.custom-checkbox { + padding-top: 7px; +} + +.cd-col-form { + @extend .col-12; + @extend .col-lg-8; + @extend .col-xl-6; +} + +.cd-col-form-label { + @extend .col-form-label; + @extend .col-sm-4; + @extend .col-md-4; + @extend .col-lg-3; +} + +.cd-col-form-input { + @extend .col-sm-8; + @extend .col-md-8; + @extend .col-lg-9; +} + +.cd-col-form-offset { + @extend .offset-sm-4; + @extend .offset-lg-3; + @extend .cd-col-form-input; +} + +cd-modal { + .cd-col-form-label { + @extend .col-lg-4; + } + + .cd-col-form-input { + @extend .col-lg-8; + } + + .cd-col-form-offset { + @extend .offset-lg-4; + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss new file mode 100644 index 000000000000..ef977e7d69e5 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss @@ -0,0 +1,94 @@ +@use '../defaults/bootstrap-defaults' as bd; + +/* Grid */ +.container, +.container-fluid { + padding-left: 30px !important; + padding-right: 30px !important; +} + +.row { + margin-left: -30px; + margin-right: -30px; +} + +.col-lg-1, +.col-lg-10, +.col-lg-11, +.col-lg-12, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-md-1, +.col-md-10, +.col-md-11, +.col-md-12, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-sm-1, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-1, +.col-10, +.col-11, +.col-12, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9 { + padding-left: 30px; + padding-right: 30px; +} + +tags-input .tags { + border: 1px solid bd.$color-tags-border; + border-radius: 4px; + box-shadow: inset 0 1px 1px bd.$color-tags-box-shadow; +} + +.card-header { + font-size: 1.3em; +} + +.card-body h2:first-child { + margin-top: 0; +} + +.disabled { + pointer-events: none; +} + +.clickable, +a { + cursor: pointer; +} + +:invalid .has-error-btn, +:invalid .has-error-btn:disabled:hover { + background-color: bd.$color-error-btn-bg; + border-color: bd.$color-error-btn-border; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_icons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_icons.scss new file mode 100644 index 000000000000..7d8cdf9dd271 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_icons.scss @@ -0,0 +1,16 @@ +/* Icons */ +.ceph-icon { + background: url('assets/Ceph_Logo_Stacked_RGB_White_120411_fa_256x256.png'); +} + +.prometheus-icon { + background: url('assets/prometheus_logo.svg'); +} + +.custom-icon { + background-clip: padding-box; + background-repeat: no-repeat; + background-size: contain; + margin-right: 8px; + padding: 10px; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_index.scss new file mode 100644 index 000000000000..ec9c5b28bacd --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_index.scss @@ -0,0 +1,5 @@ +@forward 'basics'; +@forward 'buttons'; +@forward 'dropdown'; +@forward 'forms'; +@forward 'icons'; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss similarity index 85% rename from src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss rename to src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss index d58ab89295d4..cb2d966b65bd 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss @@ -1,6 +1,4 @@ -/*The file suppose to contain all variables, mixins and extends*/ - -@import 'vendor.variables'; +@use '../vendor/variables'; // Bootstrap defaults @@ -159,39 +157,3 @@ $color-popover-date: $color-solid-gray !default; /*RGW user form*/ $color-rgw-icon: $color-blue-gray !default; - -@mixin table-cell { - border: 0; - border-bottom: 1px solid $color-light-gray; - border-left: 1px solid $color-light-gray; - padding: 5px; -} - -@mixin hf { - background-color: $color-whitesmoke-gray; - border-bottom: 1px solid $color-light-gray; -} - -@function strip-unit($value) { - @return $value / ($value * 0 + 1); -} - -@mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) { - $u1: unit($min-vw); - $u2: unit($max-vw); - $u3: unit($min-font-size); - $u4: unit($max-font-size); - - @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { - font-size: $min-font-size; - @media screen and (min-width: $min-vw) { - font-size: calc( - #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * - ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) - ); - } - @media screen and (min-width: $max-vw) { - font-size: $max-font-size; - } - } -} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_functions.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_functions.scss new file mode 100644 index 000000000000..9e4f87eba12a --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_functions.scss @@ -0,0 +1,3 @@ +@function strip-unit($value) { + @return $value / ($value * 0 + 1); +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss new file mode 100644 index 000000000000..98a20db9fc24 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss @@ -0,0 +1,5 @@ +@use '../vendor'; + +@forward 'bootstrap-defaults'; +@forward 'functions'; +@forward 'mixins'; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss new file mode 100644 index 000000000000..37d076ab20f8 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss @@ -0,0 +1,35 @@ +@use '../vendor/variables'; +@use 'bootstrap-defaults'; +@use 'functions'; + +@mixin table-cell { + border: 0; + border-bottom: 1px solid bootstrap-defaults.$color-light-gray; + border-left: 1px solid bootstrap-defaults.$color-light-gray; + padding: 5px; +} + +@mixin hf { + background-color: bootstrap-defaults.$color-whitesmoke-gray; + border-bottom: 1px solid bootstrap-defaults.$color-light-gray; +} + +@mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) { + $u1: unit($min-vw); + $u2: unit($max-vw); + $u3: unit($min-font-size); + $u4: unit($max-font-size); + + @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { + font-size: $min-font-size; + @media screen and (min-width: $min-vw) { + font-size: calc( + #{$min-font-size} + #{functions.strip-unit($max-font-size - $min-font-size)} * + ((100vw - #{$min-vw}) / #{functions.strip-unit($max-vw - $min-vw)}) + ); + } + @media screen and (min-width: $max-vw) { + font-size: $max-font-size; + } + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss new file mode 100644 index 000000000000..0d73747bcc12 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss @@ -0,0 +1,2 @@ +@use 'style-overrides'; +@use 'variables'; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor.overrides.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss similarity index 50% rename from src/pybind/mgr/dashboard/frontend/src/styles/vendor.overrides.scss rename to src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss index ac78087b6363..cb697f0ed41d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor.overrides.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss @@ -1,3 +1 @@ /* Vendor specific scss */ - -@import 'defaults.scss'; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor.variables.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss similarity index 100% rename from src/pybind/mgr/dashboard/frontend/src/styles/vendor.variables.scss rename to src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss -- 2.47.3