$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 './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;
}
-.noscript p {
- color: $color-noscript-text;
-}
-
-/* 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;
-}
-
-/* Block UI */
-.block-ui-wrapper {
- background: $color-transparent-black !important;
-}
-
-.tooltip-inner {
- background-color: $color-solid-white;
- border: 1px solid $color-gray20;
- color: $color-gray13;
- font-size: 1.1em;
-}
-
-.toast-message > ul {
- margin: 0;
- padding-left: 1em;
-}
-
.cd-header,
legend {
@extend .pb-1;
}
.weak {
- background: $color-solid-red;
+ background: $danger;
width: 25%;
}
.ok {
- background: $color-bright-yellow;
+ background: $warning;
width: 50%;
}
.strong {
- background: $color-bright-green;
+ background: $success;
width: 75%;
}
.very-strong {
- background: $color-green;
+ background: darken($success, 30%);
width: 100%;
}
}
// Custom badges.
.badge-hdd {
- background-color: $color-blue-gray;
- color: $color-solid-white;
+ background-color: $gray-600;
+ color: $white;
}
.badge-ssd {
- background-color: $color-blue;
- color: $color-solid-white;
+ background-color: $primary;
+ color: $white;
}
.badge-tab {
- background-color: $color-light-shade-gray;
- color: $color-solid-gray;
+ background-color: $gray-200;
+ color: $gray-700;
}
// angular-tree-component
min-height: 1em;
}
}
+
+// Other
+tags-input .tags {
+ border-radius: 4px;
+ border: 1px solid $gray-400;
+ 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;
+}
@use '../vendor/variables';
-// Bootstrap defaults
+// Color system
-$gray-900: #212529 !default;
+$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;
+$secondary: #374249;
+$success: $green;
+$info: $primary;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: #777777;
+
+$theme-colors: (
+ "accent": $red
+);
+
+// Body
+
+$body-color-bright: $light;
+$body-bg: $white;
+$body-color: $gray-900;
+
+// 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';
+
+// Card
+
+$card-cap-bg: $gray-100;
+
+// Grid
+
+$grid-gutter-width: 30px;
+
+// Navs
+
+$nav-tabs-margin-bottom: 1rem;
+
+// Tooltips
+
+$tooltip-color: $white;
+$tooltip-bg: $body-color;
+
+// Misc
$screen-sm-min: 576px !default;
$screen-md-min: 768px !default;
$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;
projects / ceph-ci.git / commitdiff