"inherit",
"initial",
"transparent",
- "/darken/"
+ "/darken/",
+ "/\\w+\\.\\$.+/"
]
}
]
],
"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"
]
}
-@import 'chart-tooltip.scss';
+@use './src/styles/chart-tooltip';
.chart-container {
height: 500px;
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
// Angular2-Tree Component
::ng-deep tree-root {
}
.quota-origin {
- color: $color-brand-teal;
+ color: bd.$color-brand-teal;
cursor: pointer;
&:hover {
- color: $color-gray13;
+ color: bd.$color-gray13;
}
}
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
p {
font-family: monospace;
}
.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;
}
}
-@import 'chart-tooltip.scss';
+@use './src/styles/chart-tooltip';
$canvas-width: 100%;
$canvas-height: 100%;
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
cd-info-card {
padding: 0 0.5vw;
}
.card-text-error {
- color: $color-solid-red;
+ color: bd.$color-solid-red;
display: inline;
}
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
.info-card-popover-cluster-status {
max-height: 20vh;
}
}
-@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;
}
-@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;
$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 {
-@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;
}
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
::ng-deep cd-login-password-form {
h4 {
.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) {
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
::ng-deep cd-login {
h1 {
}
.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 {
.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;
}
}
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;
}
-@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;
}
}
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
::ng-deep #toast-container {
margin-top: 2vw;
margin-top: 2.5vw;
}
- @media (max-width: $screen-md-max) {
+ @media (max-width: bd.$screen-md-max) {
margin-top: 9vw;
}
-@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;
li a {
&:hover {
- background-color: $color-brand-teal;
+ background-color: bd.$color-brand-teal;
}
}
}
-@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;
}
margin-top: 2.5vw;
}
- @media (max-width: $screen-md-max) {
+ @media (max-width: bd.$screen-md-max) {
margin-top: 9vw;
}
-@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 {
}
.modal-header .close {
- color: $color-solid-white;
+ color: bd.$color-solid-white;
font-size: 2em;
}
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
.breadcrumb {
background-color: transparent;
}
.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;
}
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
/* ---------------------------------------------------
NAVBAR STYLE
::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;
}
}
.fa-navicon {
- color: $color-nav-toggle-bar;
+ color: bd.$color-nav-toggle-bar;
}
}
}
.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,
.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;
.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,
.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,
.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;
}
}
- @media (max-width: $screen-sm-max) {
+ @media (max-width: bd.$screen-sm-max) {
.navbar-nav {
margin: 0;
}
.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;
}
}
}
.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 {
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;
}
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;
text-decoration: none;
&:hover {
- background: $color-primary;
- color: $color-solid-white;
+ background: bd.$color-primary;
+ color: bd.$color-solid-white;
}
> .badge {
li.active > a,
li > a a[aria-expanded='true'] {
- color: $color-solid-white;
+ color: bd.$color-solid-white;
}
}
}
}
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;
}
bottom: 0;
position: absolute;
right: 0;
- top: $navbar-height;
+ top: bd.$navbar-height;
transition: all 0.3s;
width: calc(100% - #{$sidebar-width});
@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;
}
}
}
-@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;
}
-@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;
}
-@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;
}
-@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;
}
.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 {
-@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 {
-@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;
}
}
-@import 'chart-tooltip.scss';
+@use './src/styles/chart-tooltip';
.chart-container {
position: static !important;
-@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 {
}
span {
- color: $color-progress-text;
+ color: bd.$color-progress-text;
display: block;
font-weight: normal;
position: absolute;
-@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;
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;
}
.widget-toolbar {
- border-left: 1px solid $color-table-seperator-border;
+ border-left: 1px solid bd.$color-table-seperator-border;
float: right;
padding: 0 8px;
}
.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;
}
::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;
}
}
.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;
}
::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;
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;
.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%;
.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 {
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;
.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;
}
.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;
}
/* 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';
@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;
.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) {
.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;
--- /dev/null
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+
+.chart-container {
+ cursor: pointer;
+ margin: auto;
+ overflow: visible;
+ position: absolute;
+}
+
+canvas {
+ user-select: none;
+}
+
+.chartjs-tooltip {
+ background: bd.$color-chart-tooltip-bg;
+ border-radius: 3px;
+ color: bd.$color-chat-tooltip-text;
+ font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+
+ transform: translate(-50%, 0);
+ transition: all 0.1s ease;
+
+ &.transform-left {
+ transform: translate(-10%, 0);
+
+ &::after {
+ left: 10%;
+ }
+ }
+
+ &.transform-right {
+ transform: translate(-90%, 0);
+
+ &::after {
+ left: 90%;
+ }
+ }
+}
+
+.chartjs-tooltip::after {
+ border-color: bd.$color-chart-tooltip-border transparent transparent transparent;
+ border-style: solid;
+ border-width: 5px;
+ content: ' ';
+ left: 50%;
+ margin-left: -5px;
+ position: absolute;
+ top: 100%; /* At the bottom of the tooltip */
+}
+
+::ng-deep .chartjs-tooltip-key {
+ display: inline-block;
+ height: 10px;
+ margin-right: 10px;
+ width: 10px;
+}
--- /dev/null
+@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;
+}
--- /dev/null
+@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;
+}
--- /dev/null
+@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;
+}
--- /dev/null
+@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;
+ }
+}
--- /dev/null
+@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;
+}
--- /dev/null
+/* 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;
+}
--- /dev/null
+@forward 'basics';
+@forward 'buttons';
+@forward 'dropdown';
+@forward 'forms';
+@forward 'icons';
+++ /dev/null
-@import 'defaults.scss';
-
-.chart-container {
- cursor: pointer;
- margin: auto;
- overflow: visible;
- position: absolute;
-}
-
-canvas {
- user-select: none;
-}
-
-.chartjs-tooltip {
- background: $color-chart-tooltip-bg;
- border-radius: 3px;
- color: $color-chat-tooltip-text;
- font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
- opacity: 0;
- pointer-events: none;
- position: absolute;
-
- transform: translate(-50%, 0);
- transition: all 0.1s ease;
-
- &.transform-left {
- transform: translate(-10%, 0);
-
- &::after {
- left: 10%;
- }
- }
-
- &.transform-right {
- transform: translate(-90%, 0);
-
- &::after {
- left: 90%;
- }
- }
-}
-
-.chartjs-tooltip::after {
- border-color: $color-chart-tooltip-border transparent transparent transparent;
- border-style: solid;
- border-width: 5px;
- content: ' ';
- left: 50%;
- margin-left: -5px;
- position: absolute;
- top: 100%; /* At the bottom of the tooltip */
-}
-
-::ng-deep .chartjs-tooltip-key {
- display: inline-block;
- height: 10px;
- margin-right: 10px;
- width: 10px;
-}
+++ /dev/null
-/*The file suppose to contain all variables, mixins and extends*/
-
-@import 'vendor.variables';
-
-// Bootstrap defaults
-
-$gray-900: #212529 !default;
-
-$screen-sm-min: 576px !default;
-$screen-md-min: 768px !default;
-$screen-lg-min: 992px !default;
-$screen-xl-min: 1200px !default;
-
-$screen-xs-max: calc(#{$screen-sm-min} - 1px);
-$screen-sm-max: calc(#{$screen-md-min} - 1px);
-$screen-md-max: calc(#{$screen-lg-min} - 1px);
-$screen-lg-max: calc(#{$screen-xl-min} - 1px);
-
-$color-solid-red: #f00 !default;
-$color-pink: #a94442 !default;
-$color-light-red: #f2dede !default;
-
-// $color-orange: #ff6600 !default;
-
-$color-bright-yellow: #ffc200 !default;
-$color-light-yellow: #fff3cd !default;
-
-$color-bright-green: #0b0 !default;
-$color-green: #245e03 !default;
-
-$color-blue: #288cea !default;
-$color-light-blue: #d1ecf1 !default;
-$color-sky-blue: #afd9ee !default;
-
-$color-black: #000 !default;
-$color-transparent-black: rgba(0, 0, 0, 0.7) !default;
-$color-transparent-black1: rgba(0, 0, 0, 0.075) !default;
-$color-solid-gray: #555 !default;
-$color-dark-gray: #474544 !default;
-$color-gray: #808080 !default;
-$color-mild-gray: #777 !default;
-$color-blue-gray: #90949c !default;
-$color-grad-gray: #ededed !default;
-$color-shadow-gray: rgba(3, 3, 3, 0.175) !default;
-$color-light-gray: #d1d1d1 !default;
-$color-soft-gray: #ddd !default;
-$color-white-gray: #eee !default;
-$color-shade-gray: #efefef !default;
-$color-gray13: #212121;
-$color-gray20: #333 !default;
-$color-light-shade-gray: #f3f3f3 !default;
-$color-whitesmoke-gray: #f5f5f5 !default;
-$color-solid-white: #fff !default;
-$color-transparent: rgba(0, 0, 0, 0.09) !default;
-$color-input-border: #ced4da;
-$color-input-border-hover: #adadad;
-$color-brand-teal: #2b99a8 !default;
-$color-brand-gray: #374249 !default;
-$color-mirage-gray: #333e46 !default;
-
-$color-primary: $color-brand-teal !default;
-$color-secondary: $color-brand-gray !default;
-$color-accent: #ef5c55 !default;
-$color-primary-transparent: rgba($color-primary, 0.8);
-$color-primary-transparent1: rgba($color-primary, 0.5);
-
-$color-app-bg: $color-solid-white !default;
-// $color-bg-darken: $color-dark-gray !default;
-// $color-links: $color-primary !default;
-// $color-links-focus: $color-dark-gray !default;
-$color-breadcrumb: $color-dark-gray !default;
-// $color-button-text: $color-white-gray !default;
-$color-button: $color-primary !default;
-// $color-button-hover: darken($color-primary, 3) !default;
-// $color-button-border: darken($color-primary, 6) !default;
-$color-button-badge: $color-white-gray !default;
-$color-dropdown-menu: $color-dark-gray !default;
-$color-dropdown-active-text: $color-white-gray !default;
-$color-dropdown-active-bg: $color-primary !default;
-$color-progress-bar-info-bg: $color-primary !default;
-$color-progress-bar-freespace-bg: $color-light-gray !default;
-$color-progress-text: $color-black !default;
-$color-tags-border: $color-light-gray !default;
-$color-tags-box-shadow: $color-transparent !default;
-$color-error-btn-bg: $color-light-red !default;
-$color-error-btn-border: $color-pink !default;
-$color-noscript-text: $color-mild-gray !default;
-$color-required-text: $color-pink !default;
-
-/*Login*/
-$color-login-row-text: $color-solid-white !default;
-$color-login-row-bg: $color-secondary !default;
-$color-password-toggle-text: $color-solid-white !default;
-$color-password-toggle-placeholder-text: $color-blue-gray !default;
-$color-password-toggle-bg: $color-mirage-gray !default;
-$color-password-toggle-focus: $color-primary !default;
-// $color-login-active-row-bg: $color-light-yellow !default;
-// $color-login-active-row-text: $color-black !default;
-
-/*Landing Page*/
-
-/*InfoGroup*/
-// $color-info-group-underline: $color-whitesmoke-gray !default;
-
-/*InfoCard*/
-// $color-info-card-background: $color-whitesmoke-gray !default;
-$color-info-card-border: $color-soft-gray !default;
-
-/*Navigation*/
-$color-navbar-bg: $color-secondary !default;
-$color-navbar-brand: $color-white-gray !default;
-$color-nav-top-bar: $color-primary !default;
-$color-nav-bottom-bar: $color-primary !default;
-$color-nav-toggle-bar: $color-white-gray !default;
-$color-nav-toggle-shadow: $color-solid-white !default;
-$color-nav-collapse-border: $color-white-gray !default;
-$color-nav-open-bg: $color-primary !default;
-$color-nav-links: $color-white-gray !default;
-$color-nav-links-hover: $color-primary !default;
-$color-nav-active-link-bg: $color-primary !default;
-$color-nav-border-top-collapse: $color-white-gray !default;
-
-$navbar-height: 43px;
-$top-notification-height: 37.6px;
-
-/*Helper*/
-$color-helper-bg: $color-primary !default;
-
-/*Table*/
-$color-table-seperator-border: $color-transparent !default;
-$color-table-input-border: $color-transparent !default;
-$color-table-dropdown-bg: $color-whitesmoke-gray !default;
-$color-table-header-bg: $color-whitesmoke-gray !default;
-$color-table-header-border: $color-light-gray !default;
-$color-table-active-row: $color-sky-blue !default;
-$color-table-active-row-hover: $color-light-blue !default;
-// $color-table-progress-bar-bg: $color-sky-blue !default;
-$color-table-progress-bar-active: $color-primary !default;
-$color-table-gradient-1: $color-whitesmoke-gray !default;
-$color-table-gradient-2: $color-grad-gray !default;
-$color-table-sort: $color-primary !default;
-$color-table-empty-row: $color-light-yellow !default;
-$color-table-hover-row: $color-white-gray !default;
-$color-table-even-row-bg: $color-solid-white !default;
-$color-table-odd-row-bg: $color-whitesmoke-gray !default;
-$color-table-datatable-header: $color-whitesmoke-gray !default;
-
-/*Chart tooltip*/
-$color-chart-tooltip-bg: $color-transparent-black !default;
-$color-chat-tooltip-text: $color-solid-white !default;
-$color-chart-tooltip-border: $color-black !default;
-
-/*Popover*/
-$color-popover-seperator-text: $color-blue-gray !default;
-$color-popover-seperator-bg: $color-white-gray !default;
-$color-popover-message-text: $color-dark-gray !default;
-$color-popover-table-text: $color-dark-gray !default;
-$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;
- }
- }
-}
--- /dev/null
+@use '../vendor/variables';
+
+// Bootstrap defaults
+
+$gray-900: #212529 !default;
+
+$screen-sm-min: 576px !default;
+$screen-md-min: 768px !default;
+$screen-lg-min: 992px !default;
+$screen-xl-min: 1200px !default;
+
+$screen-xs-max: calc(#{$screen-sm-min} - 1px);
+$screen-sm-max: calc(#{$screen-md-min} - 1px);
+$screen-md-max: calc(#{$screen-lg-min} - 1px);
+$screen-lg-max: calc(#{$screen-xl-min} - 1px);
+
+$color-solid-red: #f00 !default;
+$color-pink: #a94442 !default;
+$color-light-red: #f2dede !default;
+
+// $color-orange: #ff6600 !default;
+
+$color-bright-yellow: #ffc200 !default;
+$color-light-yellow: #fff3cd !default;
+
+$color-bright-green: #0b0 !default;
+$color-green: #245e03 !default;
+
+$color-blue: #288cea !default;
+$color-light-blue: #d1ecf1 !default;
+$color-sky-blue: #afd9ee !default;
+
+$color-black: #000 !default;
+$color-transparent-black: rgba(0, 0, 0, 0.7) !default;
+$color-transparent-black1: rgba(0, 0, 0, 0.075) !default;
+$color-solid-gray: #555 !default;
+$color-dark-gray: #474544 !default;
+$color-gray: #808080 !default;
+$color-mild-gray: #777 !default;
+$color-blue-gray: #90949c !default;
+$color-grad-gray: #ededed !default;
+$color-shadow-gray: rgba(3, 3, 3, 0.175) !default;
+$color-light-gray: #d1d1d1 !default;
+$color-soft-gray: #ddd !default;
+$color-white-gray: #eee !default;
+$color-shade-gray: #efefef !default;
+$color-gray13: #212121;
+$color-gray20: #333 !default;
+$color-light-shade-gray: #f3f3f3 !default;
+$color-whitesmoke-gray: #f5f5f5 !default;
+$color-solid-white: #fff !default;
+$color-transparent: rgba(0, 0, 0, 0.09) !default;
+$color-input-border: #ced4da;
+$color-input-border-hover: #adadad;
+$color-brand-teal: #2b99a8 !default;
+$color-brand-gray: #374249 !default;
+$color-mirage-gray: #333e46 !default;
+
+$color-primary: $color-brand-teal !default;
+$color-secondary: $color-brand-gray !default;
+$color-accent: #ef5c55 !default;
+$color-primary-transparent: rgba($color-primary, 0.8);
+$color-primary-transparent1: rgba($color-primary, 0.5);
+
+$color-app-bg: $color-solid-white !default;
+// $color-bg-darken: $color-dark-gray !default;
+// $color-links: $color-primary !default;
+// $color-links-focus: $color-dark-gray !default;
+$color-breadcrumb: $color-dark-gray !default;
+// $color-button-text: $color-white-gray !default;
+$color-button: $color-primary !default;
+// $color-button-hover: darken($color-primary, 3) !default;
+// $color-button-border: darken($color-primary, 6) !default;
+$color-button-badge: $color-white-gray !default;
+$color-dropdown-menu: $color-dark-gray !default;
+$color-dropdown-active-text: $color-white-gray !default;
+$color-dropdown-active-bg: $color-primary !default;
+$color-progress-bar-info-bg: $color-primary !default;
+$color-progress-bar-freespace-bg: $color-light-gray !default;
+$color-progress-text: $color-black !default;
+$color-tags-border: $color-light-gray !default;
+$color-tags-box-shadow: $color-transparent !default;
+$color-error-btn-bg: $color-light-red !default;
+$color-error-btn-border: $color-pink !default;
+$color-noscript-text: $color-mild-gray !default;
+$color-required-text: $color-pink !default;
+
+/*Login*/
+$color-login-row-text: $color-solid-white !default;
+$color-login-row-bg: $color-secondary !default;
+$color-password-toggle-text: $color-solid-white !default;
+$color-password-toggle-placeholder-text: $color-blue-gray !default;
+$color-password-toggle-bg: $color-mirage-gray !default;
+$color-password-toggle-focus: $color-primary !default;
+// $color-login-active-row-bg: $color-light-yellow !default;
+// $color-login-active-row-text: $color-black !default;
+
+/*Landing Page*/
+
+/*InfoGroup*/
+// $color-info-group-underline: $color-whitesmoke-gray !default;
+
+/*InfoCard*/
+// $color-info-card-background: $color-whitesmoke-gray !default;
+$color-info-card-border: $color-soft-gray !default;
+
+/*Navigation*/
+$color-navbar-bg: $color-secondary !default;
+$color-navbar-brand: $color-white-gray !default;
+$color-nav-top-bar: $color-primary !default;
+$color-nav-bottom-bar: $color-primary !default;
+$color-nav-toggle-bar: $color-white-gray !default;
+$color-nav-toggle-shadow: $color-solid-white !default;
+$color-nav-collapse-border: $color-white-gray !default;
+$color-nav-open-bg: $color-primary !default;
+$color-nav-links: $color-white-gray !default;
+$color-nav-links-hover: $color-primary !default;
+$color-nav-active-link-bg: $color-primary !default;
+$color-nav-border-top-collapse: $color-white-gray !default;
+
+$navbar-height: 43px;
+$top-notification-height: 37.6px;
+
+/*Helper*/
+$color-helper-bg: $color-primary !default;
+
+/*Table*/
+$color-table-seperator-border: $color-transparent !default;
+$color-table-input-border: $color-transparent !default;
+$color-table-dropdown-bg: $color-whitesmoke-gray !default;
+$color-table-header-bg: $color-whitesmoke-gray !default;
+$color-table-header-border: $color-light-gray !default;
+$color-table-active-row: $color-sky-blue !default;
+$color-table-active-row-hover: $color-light-blue !default;
+// $color-table-progress-bar-bg: $color-sky-blue !default;
+$color-table-progress-bar-active: $color-primary !default;
+$color-table-gradient-1: $color-whitesmoke-gray !default;
+$color-table-gradient-2: $color-grad-gray !default;
+$color-table-sort: $color-primary !default;
+$color-table-empty-row: $color-light-yellow !default;
+$color-table-hover-row: $color-white-gray !default;
+$color-table-even-row-bg: $color-solid-white !default;
+$color-table-odd-row-bg: $color-whitesmoke-gray !default;
+$color-table-datatable-header: $color-whitesmoke-gray !default;
+
+/*Chart tooltip*/
+$color-chart-tooltip-bg: $color-transparent-black !default;
+$color-chat-tooltip-text: $color-solid-white !default;
+$color-chart-tooltip-border: $color-black !default;
+
+/*Popover*/
+$color-popover-seperator-text: $color-blue-gray !default;
+$color-popover-seperator-bg: $color-white-gray !default;
+$color-popover-message-text: $color-dark-gray !default;
+$color-popover-table-text: $color-dark-gray !default;
+$color-popover-date: $color-solid-gray !default;
+
+/*RGW user form*/
+$color-rgw-icon: $color-blue-gray !default;
--- /dev/null
+@function strip-unit($value) {
+ @return $value / ($value * 0 + 1);
+}
--- /dev/null
+@use '../vendor';
+
+@forward 'bootstrap-defaults';
+@forward 'functions';
+@forward 'mixins';
--- /dev/null
+@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;
+ }
+ }
+}
+++ /dev/null
-/* Vendor specific scss */
-
-@import 'defaults.scss';
+++ /dev/null
-/* Vendor specific variables */
--- /dev/null
+@use 'style-overrides';
+@use 'variables';
--- /dev/null
+/* Vendor specific scss */
--- /dev/null
+/* Vendor specific variables */
projects / ceph-ci.git / commitdiff