The SCSS class cd-col-form-label is the specific and correct class to use. Previously sometimes the class col-form-label was used.
Fixes: https://tracker.ceph.com/issues/46382
Signed-off-by: Enno Gotthold <egotthold@suse.de>
-.invalid-feedback {
- display: block;
-}
}
.quota-origin {
- color: bd.$color-brand-teal;
+ color: bd.$primary;
cursor: pointer;
&:hover {
<ng-template #logFiltersTpl>
<div class="form-inline">
<div class="form-group">
- <label class="col-form-label"
+ <label for="logs-priority"
i18n>Priority:</label>
- <select class="form-control custom-select"
+ <select id="logs-priority"
+ class="form-control custom-select"
[(ngModel)]="priority"
(ngModelChange)="filterLogs()">
<option *ngFor="let prio of prioritys"
</div>
<div class="form-group">
- <label class="col-form-label"
+ <label for="logs-keyword"
i18n>Keyword:</label>
<div class="input-group">
<div class="input-group-prepend">
</div>
<input class="form-control"
+ id="logs-keyword"
type="text"
[(ngModel)]="search"
(keyup)="filterLogs()">
</div>
<div class="form-group">
- <label class="col-form-label"
+ <label for="logs-date"
i18n>Date:</label>
<div class="input-group">
<input class="form-control"
+ id="logs-date"
placeholder="YYYY-MM-DD"
ngbDatepicker
#d="ngbDatepicker"
</div>
<div class="form-group">
- <label class="col-form-label"
- i18n>Time range:</label>
+ <label i18n>Time range:</label>
<ngb-timepicker [spinners]="false"
[(ngModel)]="startTime"
(ngModelChange)="filterLogs()"></ngb-timepicker>
- <span class="middle"> — </span>
+ <span> — </span>
<ngb-timepicker [spinners]="false"
[(ngModel)]="endTime"
::ng-deep ngb-timepicker input.ngb-tp-input {
width: 3.5rem !important;
}
-
-.middle {
- padding-top: 7px;
-}
*ngFor="let moduleOption of moduleOptions | keyvalue">
<!-- Field label -->
- <label class="col-form-label col-sm-5"
+ <label class="cd-col-form-label"
for="{{ moduleOption.value.name }}">
{{ moduleOption.value.name }}
<cd-helper *ngIf="moduleOption.value.long_desc || moduleOption.value.desc">
<!-- Field control -->
<!-- bool -->
- <div class="col-sm-7"
+ <div class="cd-col-form-input"
*ngIf="moduleOption.value.type === 'bool'">
<div class="custom-control custom-checkbox">
<input id="{{ moduleOption.value.name }}"
</div>
<!-- addr|str|uuid -->
- <div class="col-sm-7"
+ <div class="cd-col-form-input"
*ngIf="['addr', 'str', 'uuid'].includes(moduleOption.value.type)">
<input id="{{ moduleOption.value.name }}"
class="form-control"
</div>
<!-- uint|int|size|secs -->
- <div class="col-sm-7"
+ <div class="cd-col-form-input"
*ngIf="['uint', 'int', 'size', 'secs'].includes(moduleOption.value.type)">
<input id="{{ moduleOption.value.name }}"
class="form-control"
</div>
<!-- float -->
- <div class="col-sm-7"
+ <div class="cd-col-form-input"
*ngIf="moduleOption.value.type === 'float'">
<input id="{{ moduleOption.value.name }}"
class="form-control"
}
configurePgScrubAction() {
- this.bsModalRef = this.modalService.show(OsdPgScrubModalComponent, { size: 'lg' });
+ this.bsModalRef = this.modalService.show(OsdPgScrubModalComponent, undefined, { size: 'lg' });
}
}
<div class="modal-body">
<!-- Priority -->
<div class="form-group row">
- <label class="col-form-label col-sm-6 required"
+ <label class="cd-col-form-label required"
for="priority"
i18n>Priority</label>
- <div class="col-sm-6">
+ <div class="cd-col-form-input">
<select class="form-control custom-select"
formControlName="priority"
id="priority"
<!-- Customize priority -->
<div class="form-group row">
- <div class="offset-sm-6 col-sm-6">
+ <div class="cd-col-form-offset">
<div class="custom-control custom-checkbox">
<input formControlName="customizePriority"
class="custom-control-input"
<!-- Priority values -->
<div class="form-group row"
*ngFor="let attr of priorityAttrs | keyvalue">
- <label class="col-form-label col-sm-6"
+ <label class="cd-col-form-label"
[for]="attr.key">
<span [ngClass]="{'required': osdRecvSpeedForm.getValue('customizePriority')}">
{{ attr.value.text }}
</span>
<cd-helper *ngIf="attr.value.desc">{{ attr.value.desc }}</cd-helper>
</label>
- <div class="col-sm-6">
+ <div class="cd-col-form-input">
<input class="form-control"
type="number"
[id]="attr.key"
<div class="modal-body">
<div class="row">
<label for="weight"
- class="col-sm-2 col-form-label">Weight</label>
- <div class="col-sm-10">
+ class="cd-col-form-label">Weight</label>
+ <div class="cd-col-form-input">
<input id="weight"
class="form-control"
type="number"
}
.info-card-content-clickable {
- border: 1px solid bd.$color-shade-gray;
+ border: 1px solid bd.$gray-200;
border-radius: 3px;
cursor: pointer;
padding: 7px;
}
.info-card-content-clickable:hover {
- background-color: bd.$color-light-shade-gray;
- border-color: bd.$color-light-gray;
+ background-color: bd.$gray-200;
+ border-color: bd.$gray-400;
}
-<div class="card"
+<div class="card shadow-sm"
[ngClass]="cardClass">
<div class="card-body d-flex align-items-center justify-content-center">
<h5 class="card-title m-4">
);
border: 0.5px solid bd.$gray-300;
border-radius: 3px;
- box-shadow: 0 1px 1px rgba(3, 3, 3, 0.175);
height: 100%;
.card-body {
@use './src/styles/defaults/bootstrap-defaults' as bd;
+
+::ng-deep cd-login-password-form {
+ h4 {
+ margin: 0 0 30px;
+ }
+
+ .btn-password,
+ .btn-password:focus,
+ .form-control,
+ .form-control:focus {
+ background-color: bd.$gray-800;
+ color: bd.$white;
+ }
+
+ .form-control::placeholder {
+ color: bd.$gray-500;
+ }
+
+ .btn-password:focus {
+ outline-color: bd.$primary;
+ }
+
+ button.btn:not(:first-child) {
+ margin-left: 5px;
+ }
+}
-@use "sass:map";
+@use 'sass:map';
@use './src/styles/defaults/bootstrap-defaults' as bd;
+$dark-secondary: darken(bd.$secondary, 4%);
+
::ng-deep cd-login {
.form-group {
- background-color: bd.$color-password-toggle-bg;
- border-left: 4px solid bd.$color-solid-white;
+ background-color: $dark-secondary;
+ border-left: 4px solid bd.$white;
height: auto;
margin-bottom: 2rem;
&:focus-within {
- border-left: 4px solid map.get(bd.$theme-colors, "accent");
- }
-
- .invalid-feedback {
- display: inline;
+ border-left: 4px solid map.get(bd.$theme-colors, 'accent');
}
}
.btn-password:focus,
.form-control,
.form-control:focus {
- background-color: bd.$color-password-toggle-bg;
+ background-color: $dark-secondary;
border: 0;
box-shadow: none;
- color: bd.$color-password-toggle-text;
+ color: bd.$body-color-bright;
filter: none;
outline: none;
}
.placeholder {
- color: bd.$color-password-toggle-placeholder-text;
+ color: bd.$gray-600;
}
.btn-password:focus {
- outline-color: bd.$color-password-toggle-focus;
+ outline-color: bd.$primary;
}
}
// This will override the colors applied by chrome
@keyframes autofill {
to {
- background-color: bd.$color-password-toggle-bg;
- color: bd.$color-password-toggle-text;
+ background-color: $dark-secondary;
+ color: bd.$body-color-bright;
}
}
animation-fill-mode: both;
animation-name: autofill;
border-radius: 0;
- box-shadow: 0 0 0 1000px bd.$color-password-toggle-bg inset;
- -webkit-text-fill-color: bd.$color-password-toggle-text;
+ box-shadow: 0 0 0 1000px $dark-secondary inset;
+ -webkit-text-fill-color: bd.$body-color-bright;
transition-property: none;
}
.fa {
font-size: large;
+
&.fa-square-o {
color: bd.$gray-400;
}
::ng-deep .cd-navbar-top {
.cd-navbar-brand {
- background: bd.$color-navbar-bg;
- border-top: 4px solid bd.$color-nav-top-bar;
+ background: bd.$secondary;
+ border-top: 4px solid bd.$primary;
&.isPwdDisplayed {
top: bd.$top-notification-height;
.navbar-brand,
.navbar-brand:hover {
- color: bd.$color-navbar-brand;
+ color: bd.$gray-200;
height: auto;
padding: 0;
}
}
.fa-navicon {
- color: bd.$color-nav-toggle-bar;
+ color: bd.$gray-200;
}
}
}
.cd-navbar-utility > .active > a {
- background-color: bd.$color-nav-links-hover;
- color: bd.$color-nav-links;
+ background-color: bd.$primary;
+ color: bd.$gray-200;
}
.cd-navbar-utility > li > .open > a,
.cd-navbar-utility > li > .open > a:hover {
background-color: transparent;
border-color: transparent;
- color: bd.$color-nav-links;
+ color: bd.$gray-200;
}
}
.navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
.navbar-nav > li > .cd-navbar > a,
.navbar-nav > li > a {
- color: bd.$color-nav-links;
+ color: bd.$gray-200;
display: block;
line-height: 1;
padding: 13.5px 18px !important;
.navbar-nav .nav-link,
.navbar-nav .nav-link:hover {
- color: bd.$color-nav-links;
+ color: bd.$gray-200;
}
.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: bd.$color-nav-links-hover;
+ background-color: bd.$primary;
}
.navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
.navbar-nav > .open > a:hover {
background-color: transparent;
border-color: transparent;
- color: bd.$color-nav-links;
+ color: bd.$gray-200;
}
@media (min-width: bd.$screen-md-min) {
}
.open .dropdown-menu {
- background-color: bd.$color-nav-open-bg;
+ background-color: bd.$primary;
border: 0;
padding-bottom: 0;
padding-top: 0;
}
.open .dropdown-menu > li > a {
- color: bd.$color-nav-links;
+ color: bd.$gray-200;
padding: 5px 15px 5px 35px;
}
.open .dropdown-menu > .active > a {
- background-color: bd.$color-nav-active-link-bg;
+ background-color: bd.$primary;
}
}
.navbar-nav > li > a:hover {
- background-color: bd.$color-nav-active-link-bg;
+ background-color: bd.$primary;
}
}
}
.cd-navbar-primary .active > a,
.cd-navbar-primary > .active > a:focus,
.cd-navbar-primary > .active > a:hover {
- background-color: bd.$color-nav-links-hover !important;
+ background-color: bd.$primary !important;
border: 0 !important;
- color: bd.$color-nav-links !important;
+ color: bd.$gray-200 !important;
}
.wrapper {
width: 100%;
#sidebar {
- background: bd.$color-navbar-bg;
+ background: bd.$secondary;
bottom: 0;
color: bd.$white;
left: 0;
text-decoration: none;
&:hover {
- background: bd.$color-primary;
+ background: bd.$primary;
color: bd.$white;
}
}
ul ul a {
- background: lighten(bd.$color-navbar-bg, 10);
+ background: lighten(bd.$secondary, 10);
font-size: 0.9em !important;
padding-left: 40px !important;
}
<div *ngFor="let option of options; let last = last">
<div class="form-group row pt-2"
*ngIf="option.type === 'bool'">
- <label class="col-form-label col-6"
+ <label class="cd-col-form-label"
[for]="option.name">
<b>{{ option.text }}</b>
<br>
</span>
</label>
- <div class="col-6">
+ <div class="cd-col-form-input">
<div class="custom-control custom-checkbox">
<input class="custom-control-input"
type="checkbox"
<div class="form-group row pt-2"
*ngIf="option.type !== 'bool'">
- <label class="col-6 col-form-label"
+ <label class="cd-col-form-label"
[for]="option.name">{{ option.text }}
<br>
<span class="text-muted">
{{ option.long_desc }}</cd-helper>
</span>
</label>
- <div class="col-6">
+ <div class="cd-col-form-input">
<div class="input-group">
<input class="form-control"
[type]="option.additionalTypeInfo.inputType"
<ng-container *ngIf="grafanaExist && dashboardExist">
<div class="row">
- <div class="col-12">
+ <div class="col">
<div class="form-inline timepicker">
<label for="timepicker"
- class="ml-1 my-1 col-form-label"
+ class="ml-1 my-1"
i18n>Grafana Time Picker</label>
<select id="timepicker"
</div>
<div class="row">
- <div class="col-12">
+ <div class="col">
<div class="grafana-container">
<iframe #iframe
id="iframe"
}
.separator {
- background-color: bd.$color-popover-seperator-bg;
- color: bd.$color-popover-seperator-text;
+ background-color: bd.$gray-200;
+ color: bd.$gray-600;
font-size: 1rem;
padding: 5px 12px;
}
<div class="container-fluid">
<div class="row">
- <div class="col-12">
- <div class="float-right d-inline-flex">
+ <div class="col d-flex justify-content-end">
+ <form class="form-inline">
<label for="refreshInterval"
class="col-form-label my-0 mx-2"
i18n>Refresh</label>
<option *ngFor="let key of intervalKeys"
[value]="intervalList[key]">{{ key }}</option>
</select>
- </div>
+ </form>
</div>
</div>
</div>
(keyup)="$event.keyCode == 13 ? selectOption() : updateFilter()"
class="form-control text-center" />
<ng-container *ngFor="let error of Object.keys(messages.customValidations)">
- <span class="invalid-feedback text-center"
+ <span class="invalid-feedback text-center d-block"
*ngIf="form.showError('filter', formDir) && filter.hasError(error)">
{{ messages.customValidations[error] }}
</span>
@use './src/styles/defaults/bootstrap-defaults' as bd;
.select-menu-item {
- border-bottom: 1px solid bd.$color-transparent;
+ border-bottom: 1px solid bd.$datatable-divider-color;
cursor: pointer;
display: block;
font-size: 1rem;
&:hover {
- background-color: bd.$color-whitesmoke-gray;
+ background-color: bd.$gray-200;
}
}
}
.bg-freespace {
- background-color: bd.$gray-500 !important;
+ background-color: bd.$gray-400 !important;
}
.progress {
margin-bottom: 25px;
.separator {
- border-left: 1px solid bd.$color-table-seperator-border;
+ border-left: 1px solid bd.$datatable-divider-color;
display: inline-block;
height: 30px;
margin-left: 5px;
}
.widget-toolbar {
- border-left: 1px solid bd.$color-table-seperator-border;
+ border-left: 1px solid bd.$datatable-divider-color;
float: right;
padding: 0 8px;
}
.dataTables_header {
- background-color: bd.$color-table-header-bg;
- border: 1px solid bd.$color-table-header-border;
+ background-color: bd.$gray-100;
+ border: 1px solid bd.$gray-400;
border-bottom: 0;
padding: 5px;
position: relative;
}
::ng-deep .table-filters {
- border-left: 1px solid bd.$color-table-seperator-border;
+ border-left: 1px solid bd.$datatable-divider-color;
float: right;
padding-left: 8px;
}
}
.input-group {
- border-left: 1px solid bd.$color-table-input-border;
+ border-left: 1px solid bd.$datatable-divider-color;
float: right;
max-width: 250px;
padding-left: 8px;
}
::ng-deep .cd-datatable {
- border: 1px solid bd.$color-table-header-border;
+ border: 1px solid bd.$gray-400;
margin-bottom: 0;
max-width: none !important;
width: 100%;
.container {
- background-color: bd.$color-table-active-row;
+ background-color: bd.$primary;
.bar {
- background-color: bd.$color-table-active-row;
+ background-color: bd.$primary;
height: 100%;
left: 0;
overflow: hidden;
.bar::before {
animation: progress-loading 3s linear infinite;
- background-color: bd.$color-table-progress-bar-active;
+ background-color: bd.$primary;
content: '';
display: block;
height: 100%;
.datatable-header {
background-clip: padding-box;
- background-color: bd.$color-table-datatable-header;
- background-image: linear-gradient(
- to bottom,
- bd.$color-table-gradient-1 0,
- bd.$color-table-gradient-2 100%
- );
+ background-color: bd.$gray-100;
+ background-image: linear-gradient(to bottom, bd.$gray-100 0, bd.$gray-200 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
.sort-asc,
.sort-desc {
- color: bd.$color-table-sort;
+ color: bd.$primary;
}
.datatable-header-cell {
margin-bottom: -6px;
.empty-row {
- background-color: bd.$color-table-empty-row;
+ background-color: lighten(bd.$primary, 45%);
font-style: italic;
font-weight: bold;
padding-bottom: 5px;
.datatable-body-row {
&.clickable:hover .datatable-row-group {
- background-color: bd.$color-table-hover-row;
+ background-color: lighten(bd.$primary, 45%);
transition-duration: 0.3s;
transition-property: background;
transition-timing-function: linear;
}
&.datatable-row-even {
- background-color: bd.$color-table-even-row-bg;
+ background-color: bd.$white;
}
&.datatable-row-odd {
- background-color: bd.$color-table-odd-row-bg;
+ background-color: bd.$gray-100;
}
&.active,
&.active:hover {
- background-color: bd.$color-table-active-row-hover;
+ background-color: lighten(bd.$primary, 35%);
}
.datatable-body-cell {
}
.datatable-row-detail {
- border-bottom: 2px solid bd.$color-table-header-border;
+ border-bottom: 2px solid bd.$gray-400;
overflow-y: visible !important;
padding: 20px;
}
padding-top: 5em;
}
-.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%;
}
.very-strong {
- background: darken($success, 30%);
+ background: darken($success, 15%);
width: 100%;
}
}
// Other
tags-input .tags {
- border-radius: 4px;
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;
}
.chartjs-tooltip {
- background: rgba(bd.$black, .7);
+ background: rgba(bd.$black, 0.7);
border-radius: 3px;
color: bd.$white;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
@extend .col-8;
}
}
+
+.cd-header,
+legend {
+ @extend .pb-1;
+ @extend .mt-4;
+ @extend .mb-4;
+ @extend .border-bottom;
+}
+
+// All '.fa' icons will have fixed width
+.fa {
+ @extend .fa-fw;
+}
+
+pre {
+ @extend .card;
+ @extend .bg-light;
+ @extend .p-2;
+}
.full-height {
height: 100vh;
}
+
.full-width {
width: 100vw;
}
+
.vertical-align {
align-items: center;
display: flex;
}
+
.horizontal-align {
display: flex;
justify-content: center;
/** Add space between icon and text */
margin-right: 5px;
}
+
+.card-footer button.btn:not(:first-child) {
+ margin-left: 5px;
+}
-@use "sass:map";
@use '../defaults/bootstrap-defaults' as bd;
/* Forms */
.required::after {
- color: map.get(bd.$theme-colors, "accent");
+ color: bd.$danger;
content: '*';
font-size: 1.167rem;
padding-left: 4px;
&:focus {
border-color: rgba(bd.$primary, 0.8);
- box-shadow: inset 0 1px 1px rgba(bd.$black, .75),
- 0 0 8px 2px rgba(bd.$primary, 0.5);
+ box-shadow: inset 0 1px 1px rgba(bd.$black, 0.75), 0 0 8px 2px rgba(bd.$primary, 0.5);
outline: 0;
}
}
@extend .offset-lg-4;
}
}
+
+.invalid-feedback {
+ display: block;
+}
@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;
-}
-
-.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;
+ padding: 0 bd.$grid-gutter-width;
}
.toast-message > ul {
- padding-left: 1rem;
margin: 0;
+ padding-left: 1rem;
}
// Color system
-$white: #ffffff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000000 !default;
-
-$blue: #007bff !default;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #a94442;
-$red: #ef5c55;
-$orange: #fd7e14 !default;
-$yellow: #ffc200;
-$green: #00bb00;
-$teal: #20c997 !default;
-$cyan: #17a2b8 !default;
-
-$primary: #2b99a8;
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$blue: #007bff !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #a94442;
+$red: #ef5c55;
+$orange: #fd7e14 !default;
+$yellow: #ffc200;
+$green: #0b0;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+
+$primary: #2b99a8;
$secondary: #374249;
-$success: $green;
-$info: $primary;
-$warning: $yellow;
-$danger: $red;
-$light: $gray-100;
-$dark: #777777;
+$success: $green;
+$info: $primary;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: #777;
$theme-colors: (
- "accent": $red
+ 'accent': #ef5c55
);
// Body
// Typography
$font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
-'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
// Card
$grid-gutter-width: 30px;
+// Table
+
+$datatable-divider-color: rgba($black, 0.09);
+
// Navs
$nav-tabs-margin-bottom: 1rem;
// Tooltips
-$tooltip-color: $white;
-$tooltip-bg: $body-color;
+$tooltip-color: $white;
+$tooltip-bg: $body-color;
// Misc
@use '../vendor/variables';
-@use 'bootstrap-defaults';
+@use 'bootstrap-defaults' as bd;
@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;
+ border-bottom: 1px solid bd.$gray-400;
+ border-left: 1px solid bd.$gray-400;
padding: 5px;
}
@mixin hf {
- background-color: bootstrap-defaults.$color-whitesmoke-gray;
- border-bottom: 1px solid bootstrap-defaults.$color-light-gray;
+ background-color: bd.$gray-200;
+ border-bottom: 1px solid bd.$gray-400;
}
@mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {
projects / ceph.git / commitdiff