update ceph source to reef 18.1.2

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / styles.scss

/* You can add global styles to this file, and also import other style files */
@use './src/styles/defaults' as *;

// Angular2-Tree Component
@import '~@circlon/angular-tree-component/css/angular-tree-component.css';

// Fork-Awesome
$fa-font-path: '~fork-awesome/fonts';
$font-family-icon: 'ForkAwesome';

$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: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  2xl: 1450px
);

@import '~bootstrap/scss/bootstrap';
@import '~fork-awesome/scss/fork-awesome';
@import 'app/ceph/dashboard/info-card/info-card-popover.scss';
@import './src/styles/bootstrap-extends';

@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';

/* If javascript is disabled. */
.noscript {
  padding-top: 5em;
}

// TODO: Replace (cd-)col-form-label with something more generic.
@include media-breakpoint-up(sm) {
  .col-form-label {
    text-align: right;
  }
}

.col-form-label {
  font-weight: 700;
}

//Displaying the password strength
.password-strength-level {
  flex: 100%;
  margin-top: 2px;

  .weak,
  .ok,
  .strong,
  .very-strong {
    border-radius: 0.25rem;
    height: 13px;
  }

  .weak {
    background: $danger;
    width: 25%;
  }

  .ok {
    background: $warning;
    width: 50%;
  }

  .strong {
    background: $success;
    width: 75%;
  }

  .very-strong {
    background: darken($success, 15%);
    width: 100%;
  }
}

// Custom badges.
.badge-background-gray,
.badge-hdd {
  background-color: $gray-600;
  color: $white;
}

.badge-background-primary,
.badge-ssd {
  background-color: $primary;
  color: $white;
}

.badge-tab {
  background-color: $gray-200;
  color: $gray-700;
}

.badge-cd-label-green {
  background-color: $green-300;
  color: $white;
}

.badge-cd-label-cyan {
  background-color: $cyan-300;
  color: $white;
}

.badge-cd-label-purple {
  background-color: $purple-300;
  color: $white;
}

.badge-cd-label-light-blue {
  background-color: $light-blue-300;
  color: $white;
}

.badge-cd-label-gold {
  background-color: $gold-300;
  color: $white;
}

.badge-cd-label-light-green {
  background-color: $light-green-300;
  color: $white;
  font-weight: bolder;
}

// angular-tree-component
tree-root {
  tree-viewport {
    // Fix visual bug when tree is empty
    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;
}

a {
  &:hover {
    text-decoration: underline;
  }
}

.clickable,
a {
  cursor: pointer;
  text-decoration: none;
}

a.nav-link,
a.btn-light {
  text-decoration: none;
}

// Overrides the badge to rounded-pill
.badge {
  @extend .badge, .rounded-pill, .mb-1;
}

// Overriding badges to match the class name of badges in Bootstrap v5
.badge-primary {
  @extend .badge, .bg-primary;
}

.badge-secondary {
  @extend .badge, .bg-secondary;
}

.badge-success {
  @extend .badge, .bg-success;
}

.badge-danger {
  @extend .badge, .bg-danger;
}

.badge-info {
  @extend .badge, .bg-primary;
}

.badge-warning {
  @extend .badge, .bg-warning, .text-dark;
}

.badge-light {
  @extend .badge, .bg-light, .text-dark;
}

.badge-dark {
  @extend .badge, .bg-dark;
}

formly-form {
  .ng-touched.ng-invalid {
    @extend .is-invalid;
  }

  .ng-touched.ng-valid {
    @extend .is-valid;
  }

  .form-label {
    @extend .cd-col-form-label;
    text-align: start;
    white-space: nowrap;
    width: fit-content;

    span[aria-hidden='true'] {
      color: $danger;
    }
  }
}