/* You can add global styles to this file, and also import other style files */
-
@import 'defaults';
-$fa-font-path: '../node_modules/fork-awesome/fonts';
-@import '../node_modules/fork-awesome/scss/fork-awesome';
-$font_family_1: 'ForkAwesome';
+
+// Angular2-Tree Component
+@import '~angular-tree-component/dist/angular-tree-component.css';
+
+// Fork-Awesome
+$fa-font-path: '~fork-awesome/fonts';
+$font-family-icon: 'ForkAwesome';
+
+// Bootstrap
+$theme-colors: (
+ 'primary': $color-primary,
+ 'secondary': $color-accent,
+ 'dark': $color-mild-gray
+);
+
+$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;
+
+@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 {
height: 100%;
font-size: 12px;
}
-a {
- color: $color-links;
- cursor: pointer;
-}
-a:hover,
-a:focus {
- color: $color-links-focus;
-}
h1 {
letter-spacing: -1px;
font-size: 2em;
font-weight: normal;
font-style: normal;
}
-/* For awesome-bootstrap-checkbox */
-.checkbox input[type='checkbox']:checked + label:after {
- font-family: $font_family_1;
-}
-/*******/
+
.full-height {
- height: 100%;
+ 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%;
.text-monospace {
font-family: monospace;
}
+.text-pre {
+ white-space: pre-wrap;
+}
/* 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,
}
}
}
-.btn-primary {
- color: $color-button-text;
- background-color: $color-accent;
- border-color: $color-accent;
- border-radius: $button-radius;
-}
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary.active,
-.open .dropdown-toggle.btn-primary {
- color: $color-button-text;
- background-color: lighten($color-accent, 10);
- border-color: lighten($color-accent, 10);
-}
-.btn-primary:active,
-.btn-primary.active,
-.open .dropdown-toggle.btn-primary {
- background-image: none;
-
- &:hover,
- &:focus {
- background-color: lighten($color-accent, 10);
- border-color: lighten($color-accent, 10);
- }
-}
-.btn-primary.disabled,
-.btn-primary[disabled],
-fieldset[disabled] .btn-primary,
-.btn-primary.disabled:hover,
-.btn-primary[disabled]:hover,
-fieldset[disabled] .btn-primary:hover,
-.btn-primary.disabled:focus,
-.btn-primary[disabled]:focus,
-fieldset[disabled] .btn-primary:focus,
-.btn-primary.disabled:active,
-.btn-primary[disabled]:active,
-fieldset[disabled] .btn-primary:active,
-.btn-primary.disabled.active,
-.btn-primary[disabled].active,
-fieldset[disabled] .btn-primary.active {
- background-color: $color-accent;
- border-color: $color-accent;
-}
.btn-primary .badge {
color: $color-primary;
background-color: $color-button-badge;
}
-.btn-primary .caret {
- color: $color-button-caret;
-}
-.btn-default {
- border-radius: $button-radius;
-}
-.form-group .btn-default {
- border-radius: 4px;
-}
.btn-group > .btn > i.fa,
-button.btn.btn-label > i.fa {
+.cd-datatable-actions button.btn i.fa {
/** Add space between icon and text */
- padding-right: 5px;
+ margin-right: 5px;
}
/* Dropdown */
}
.dropdown-menu > li > a > i.fa {
/** Add space between icon and text */
- padding-right: 5px;
+ margin-right: 5px;
}
.dropdown-menu > .active > a {
color: $color-dropdown-active-text;
background-color: darken($color-dropdown-active-bg, 10);
}
}
-.dataTables_wrapper .dropdown-menu > li.divider {
+.dataTables_wrapper .dropdown-menu > li.dropdown-divider {
cursor: auto;
}
/* Grid */
.container,
.container-fluid {
- padding-left: 30px;
- padding-right: 30px;
+ padding-left: 30px !important;
+ padding-right: 30px !important;
}
.row {
margin-left: -30px;
.col-sm-7,
.col-sm-8,
.col-sm-9,
-.col-xs-1,
-.col-xs-10,
-.col-xs-11,
-.col-xs-12,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-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;
}
-/* Caret */
-.caret {
- color: $color-caret-text;
-}
-/* Progressbar */
-.progress-bar {
- background-image: none !important;
-}
-.progress-bar-info {
- background-color: $color-progress-bar-info-bg;
-}
-.progress-bar-freespace {
- background-color: $color-progress-bar-freespace-bg;
-}
-.oaprogress {
- position: relative;
- margin-bottom: 0;
-}
-.oaprogress div.progress-bar {
- position: static;
-}
-.oaprogress span {
- position: absolute;
- display: block;
- width: 100%;
- color: $color-oaprogress-text;
- font-weight: normal;
-}
tags-input .tags {
border-radius: 4px;
border: 1px solid $color-tags-border;
box-shadow: inset 0 1px 1px $color-tags-box-shadow;
}
-uib-accordion .panel-title,
-.panel .accordion-title {
+uib-accordion .card-title,
+.card .accordion-title {
font-size: 14px !important;
}
-.panel-body h2:first-child {
- margin-top: 0;
+.card-header {
+ font-size: 1.3em;
}
-.pull-left {
- float: left;
+.card-body h2:first-child {
+ margin-top: 0;
}
.disabled {
pointer-events: none;
}
-.clickable {
+.clickable,
+a {
cursor: pointer;
}
-.has-error .has-error-btn,
-.has-error .has-error-btn:disabled:hover {
+:invalid .has-error-btn,
+:invalid .has-error-btn:disabled:hover {
background-color: $color-error-btn-bg;
border-color: $color-error-btn-border;
}
.noscript p {
color: $color-noscript-text;
}
-.required {
- color: $color-required-text;
-}
/* Forms */
-.form-group > .control-label > span.required {
- @extend .fa;
- @extend .fa-asterisk;
- @extend .required;
- font-size: 6px;
+.required::after {
+ color: $color-required-text;
+ content: '*';
+ font-size: 14px;
padding-left: 4px;
- vertical-align: text-top;
}
+
+.form-footer {
+ width: 100%;
+ display: flex;
+}
+
.form-control {
display: table-cell;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px 2px rgba($color-primary, 0.5);
}
}
-/* Panel */
-.panel-footer button.btn:not(:first-child) {
+
+.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;
}
-.margin-right-sm {
- margin-right: 10px;
-}
.nav-tabs {
margin-bottom: 15px;
}
}
.custom-icon {
padding: 10px;
- margin-right: 1em;
+ margin-right: 8px;
background-clip: padding-box;
background-size: contain;
background-repeat: no-repeat;
background: $color-transparent-black !important;
}
-h3.page-header {
- margin-left: 1em;
- margin-top: 1em;
- border-color: #f0f0f0;
-}
-
.tooltip-wide .tooltip-inner {
width: 400px;
}
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;
+}
+
+@include media-breakpoint-up(sm) {
+ .col-form-label {
+ text-align: right;
+ }
+}
+
+.col-form-label {
+ 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,
+ .very-strong {
+ border-radius: 0.25rem;
+ height: 13px;
+ }
+
+ .weak {
+ width: 25%;
+ background: $color-solid-red;
+ }
+ .ok {
+ width: 50%;
+ background: $color-bright-yellow;
+ }
+ .strong {
+ width: 75%;
+ background: $color-bright-green;
+ }
+ .very-strong {
+ width: 100%;
+ background: $color-green;
+ }
+}
+
+// Custom badges.
+.badge-hdd {
+ color: $color-solid-white;
+ background-color: $color-blue-gray;
+}
+.badge-ssd {
+ color: $color-solid-white;
+ background-color: $color-blue;
+}
+.badge-tab {
+ color: $color-solid-gray;
+ background-color: $color-light-shade-gray;
+}
+
+// angular-tree-component
+tree-root {
+ tree-viewport {
+ // Fix visual bug when tree is empty
+ min-height: 1em;
+ }
+}
projects / ceph.git / blobdiff