/* You can add global styles to this file, and also import other style files */
-@import 'defaults';
+@use './src/styles/defaults' as *;
// Angular2-Tree Component
-@import '~angular-tree-component/dist/angular-tree-component.css';
+@import '~@circlon/angular-tree-component/css/angular-tree-component.css';
// Fork-Awesome
$fa-font-path: '~fork-awesome/fonts';
$font-family-icon: 'ForkAwesome';
-// Bootstrap
-$warning-dark: #fd7e14;
-$theme-colors: (
- 'primary': $color-primary,
- 'secondary': $color-accent,
- 'dark': $color-mild-gray,
- 'warning-dark': $warning-dark
-);
-
-$font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
- 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
$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: (
@import '~bootstrap/scss/bootstrap';
@import '~fork-awesome/scss/fork-awesome';
@import 'app/ceph/dashboard/info-card/info-card-popover.scss';
-@import '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 {
- border-color: $custom-control-indicator-checked-border-color;
- background-color: $component-active-bg;
- }
-
- ~ .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 {
- width: 100%;
- height: 100%;
- font-size: 12px;
-}
-option {
- font-weight: normal;
- font-style: normal;
-}
-
-.full-height {
- height: 100vh;
-}
-.full-width {
- width: 100vw;
-}
-.vertical-align {
- display: flex;
- align-items: center;
-}
-.horizontal-align {
- display: flex;
- justify-content: center;
-}
-.loading {
- position: absolute;
- top: 50%;
- left: 50%;
-}
-.margin-right-md {
- margin-right: 15px;
-}
-.no-border {
- border: 0px;
- box-shadow: 0px 0px 0px !important;
-}
-.italic {
- font-style: italic;
-}
-.bold {
- font-weight: bold;
-}
-.text-right {
- text-align: right;
-}
-.text-monospace {
- font-family: monospace;
-}
-.text-pre-wrap {
- white-space: pre-wrap;
-}
-.text-pre {
- white-space: pre;
-}
-
-/* Buttons */
-.btn-light {
- background-color: $color-solid-white !important;
- border-color: $color-input-border !important;
-
- &:hover {
- background-color: $color-soft-gray !important;
- 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 {
- color: $color-primary;
- background-color: $color-button-badge;
-}
-.btn-group > .btn > i.fa,
-.cd-datatable-actions button.btn i.fa {
- /** Add space between icon and text */
- margin-right: 5px;
-}
+@import './src/styles/bootstrap-extends';
-/* Dropdown */
-.dropdown-menu {
- min-width: 50px;
- z-index: 999999;
-}
-.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 {
- color: $color-dropdown-active-text;
- background-color: $color-dropdown-active-bg;
+@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';
- &,
- &: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-radius: 4px;
- border: 1px solid $color-tags-border;
- box-shadow: inset 0 1px 1px $color-tags-box-shadow;
-}
-uib-accordion .card-title,
-.card .accordion-title {
- font-size: 14px !important;
-}
-.card-header {
- font-size: 1.3em;
-}
-.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;
}
-.noscript p {
- color: $color-noscript-text;
-}
-/* Forms */
-.required::after {
- color: $color-required-text;
- content: '*';
- font-size: 14px;
- padding-left: 4px;
-}
-
-.form-footer {
- width: 100%;
- display: flex;
-}
-
-.form-control {
- display: table-cell;
-
- &:focus {
- border-color: rgba($color-primary, 0.8);
- outline: 0;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px 2px rgba($color-primary, 0.5);
- }
-}
-
-.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) {
- margin-left: 5px;
-}
-/* Modal dialog */
-.modal-footer button.btn:not(:first-child) {
- margin-left: 5px;
-}
-.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 {
- padding: 10px;
- margin-right: 8px;
- background-clip: padding-box;
- background-size: contain;
- background-repeat: no-repeat;
-}
-/* Notification icons */
-.toast-message .custom-icon {
- /* Display icons in white, regardless of their origin color. */
- filter: brightness(0) invert(1);
- -webkit-filter: brightness(0) invert(1);
- -moz-filter: brightness(0) invert(1);
- -o-filter: brightness(0) invert(1);
- -ms-filter: brightness(0) invert(1);
-}
-/* Block UI */
-.block-ui-wrapper {
- background: $color-transparent-black !important;
-}
-
-.tooltip-wide .tooltip-inner {
- width: 400px;
-}
-
-.tooltip-inner {
- background-color: white;
- border: 1px solid grey;
- color: #333;
- font-size: 1.1em;
-}
-
-.toast-message > ul {
- padding-left: 1em;
- margin: 0;
-}
-
-.cd-header,
-legend {
- @extend .pb-1;
- @extend .mt-4;
- @extend .mb-4;
- @extend .border-bottom;
-}
+// TODO: Replace (cd-)col-form-label with something more generic.
@include media-breakpoint-up(sm) {
.col-form-label {
text-align: right;
font-weight: 700;
}
-// Firefox is adding a white background-coor in these components
-cd-submit-button {
- background-color: transparent !important;
-}
-
-// All '.fa' icons will have fixed width
-.fa {
- @extend .fa-fw;
-}
-
-pre {
- @extend .card;
- @extend .bg-light;
- @extend .p-2;
- // @extend my-2;
-}
-
-bfv-messages {
- display: none;
-}
-
-// Display error message in 'input-group' form fields.
-// https://github.com/twbs/bootstrap/issues/23454
-// https://github.com/adrianhurt/play-bootstrap/issues/118
-.form-group.has-error .invalid-feedback {
- display: block;
-}
-
//Displaying the password strength
.password-strength-level {
flex: 100%;
margin-top: 2px;
+
.weak,
.ok,
.strong,
}
.weak {
+ background: $danger;
width: 25%;
- background: $color-solid-red;
}
+
.ok {
+ background: $warning;
width: 50%;
- background: $color-bright-yellow;
}
+
.strong {
+ background: $success;
width: 75%;
- background: $color-bright-green;
}
+
.very-strong {
+ background: darken($success, 15%);
width: 100%;
- background: $color-green;
}
}
// Custom badges.
+.badge-background-gray,
.badge-hdd {
- color: $color-solid-white;
- background-color: $color-blue-gray;
+ background-color: $gray-600;
+ color: $white;
}
+
+.badge-background-primary,
.badge-ssd {
- color: $color-solid-white;
- background-color: $color-blue;
+ background-color: $primary;
+ color: $white;
}
+
.badge-tab {
- color: $color-solid-gray;
- background-color: $color-light-shade-gray;
+ background-color: $gray-200;
+ color: $gray-700;
}
// angular-tree-component
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;
+}
+
+.clickable,
+a {
+ cursor: pointer;
+}
+
+:export {
+ chartHealthCenterTextColor: #151515;
+ chartHealthCenterTextDescriptionColor: #72767b;
+ chartHealthColorBlue: #06c;
+ chartHealthColorCyan: #73c5c5;
+ chartHealthColorGray: #ededed;
+ chartHealthColorGreen: #7cc674;
+ chartHealthColorLightBlue: #519de9;
+ chartHealthColorLightYellow: #f9e0a2;
+ chartHealthColorMagenta: #009596;
+ chartHealthColorOrange: #ef9234;
+ chartHealthColorPurple: #3c3d99;
+ chartHealthColorRed: #c9190b;
+ chartHealthColorYellow: #f6d173;
+ chartHealthTootlipBgColor: #000;
+
+ healthColorError: #f00;
+ healthColorHealthy: #0b0;
+ healthColorWarning: #ffa500;
+}
projects / ceph.git / blobdiff