diff options
Diffstat (limited to '')
| -rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/styles.scss | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss new file mode 100644 index 000000000..47dfaf0d4 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -0,0 +1,241 @@ +/* You can add global styles to this file, and also import other style files */ +@use './src/styles/defaults' as *; + +// Angular2-Tree Component +@import '@circlon/angular-tree-component/css/angular-tree-component.css'; + +// Fork-Awesome +$fa-font-path: '~fork-awesome/fonts'; +$font-family-icon: 'ForkAwesome'; + +$badge-font-size: 1rem; +$form-feedback-font-size: 100%; +$popover-max-width: 350px; +$popover-font-size: 1rem; + +// https://getbootstrap.com/docs/4.5/layout/grid/#variables +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + 2xl: 1450px +); + +@import 'bootstrap/scss/bootstrap'; +@import 'fork-awesome/scss/fork-awesome'; +@import 'app/ceph/dashboard/info-card/info-card-popover.scss'; +@import 'app/ceph/rgw/rgw-overview-dashboard/rgw-overview-card-popover.scss'; +@import './src/styles/bootstrap-extends'; + +@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'; +@import './src/styles/ceph-custom/navs'; +@import './src/styles/ceph-custom/toast'; + +/* If javascript is disabled. */ +.noscript { + padding-top: 5em; +} + +// TODO: Replace (cd-)col-form-label with something more generic. +@include media-breakpoint-up(sm) { + .col-form-label { + text-align: right; + } +} + +.col-form-label { + font-weight: 700; +} + +//Displaying the password strength +.password-strength-level { + flex: 100%; + margin-top: 2px; + + .weak, + .ok, + .strong, + .very-strong { + border-radius: 0.25rem; + height: 13px; + } + + .weak { + background: $danger; + width: 25%; + } + + .ok { + background: $warning; + width: 50%; + } + + .strong { + background: $success; + width: 75%; + } + + .very-strong { + background: darken($success, 15%); + width: 100%; + } +} + +// Custom badges. +.badge-background-gray, +.badge-hdd { + background-color: $gray-600; + color: $white; +} + +.badge-background-primary, +.badge-ssd { + background-color: $primary; + color: $white; +} + +.badge-tab { + background-color: $gray-200; + color: $gray-700; +} + +.badge-cd-label-green { + background-color: $green-300; + color: $white; +} + +.badge-cd-label-cyan { + background-color: $cyan-300; + color: $white; +} + +.badge-cd-label-purple { + background-color: $purple-300; + color: $white; +} + +.badge-cd-label-light-blue { + background-color: $light-blue-300; + color: $white; +} + +.badge-cd-label-gold { + background-color: $gold-300; + color: $white; +} + +.badge-cd-label-light-green { + background-color: $light-green-300; + color: $white; + font-weight: bolder; +} + +// angular-tree-component +tree-root { + tree-viewport { + // Fix visual bug when tree is empty + min-height: 1em; + } +} + +// Other +tags-input .tags { + border: 1px solid $gray-400; + border-radius: 4px; + box-shadow: inset 0 1px 1px rgba($black, 0.09); +} + +.card-header { + font-size: 1.3em; +} + +.card-body h2:first-child { + margin-top: 0; +} + +.disabled { + pointer-events: none; +} + +a { + &:hover { + text-decoration: underline; + } +} + +.clickable, +a { + cursor: pointer; + text-decoration: none; +} + +a.nav-link, +a.btn-light { + text-decoration: none; +} + +// Overrides the badge to rounded-pill +.badge { + @extend .badge, .mb-1; +} + +// Overriding badges to match the class name of badges in Bootstrap v5 +.badge-primary { + @extend .badge, .bg-primary; +} + +.badge-secondary { + @extend .badge, .bg-secondary; +} + +.badge-success { + @extend .badge, .bg-success; +} + +.badge-danger { + @extend .badge, .bg-danger; +} + +.badge-info { + @extend .badge, .bg-primary; +} + +.badge-warning { + @extend .badge, .bg-warning, .text-dark; +} + +.badge-light { + @extend .badge, .bg-light, .text-dark; +} + +.badge-dark { + @extend .badge, .bg-dark; +} + +formly-form { + .ng-touched.ng-invalid { + @extend .is-invalid; + } + + .ng-touched.ng-valid { + @extend .is-valid; + } + + .form-label { + @extend .cd-col-form-label; + text-align: start; + white-space: nowrap; + width: fit-content; + + span[aria-hidden='true'] { + color: $danger; + } + } +} |