1 files changed, 138 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
new file mode 100644
index 000000000..099433d31
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -0,0 +1,138 @@
+/* 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;
+}
+
+// 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;
+}
+
+.clickable,
+a {
+  cursor: pointer;
+}