1 files changed, 131 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
new file mode 100644
index 000000000..3ead6efa5
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
@@ -0,0 +1,131 @@
+@use './src/styles/vendor/variables' as vv;
+
+/* Basics */
+html {
+  background-color: vv.$body-bg;
+}
+
+html,
+body {
+  font-size: 12px;
+  height: 100%;
+  width: 100%;
+}
+
+option {
+  font-style: normal;
+  font-weight: normal;
+}
+
+mark {
+  background-color: vv.$yellow;
+  padding: 0;
+}
+
+.full-height {
+  height: 100vh;
+}
+
+.full-width {
+  width: 100vw;
+}
+
+.vertical-align {
+  align-items: center;
+  display: flex;
+}
+
+.horizontal-align {
+  display: flex;
+  justify-content: center;
+}
+
+.loading:not(cd-api-docs *) {
+  left: 50%;
+  position: absolute;
+  top: 50%;
+}
+
+.margin-right-md {
+  margin-right: 15px;
+}
+
+.no-border {
+  border: 0;
+  box-shadow: 0 0 0 !important;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-monospace {
+  font-family: monospace;
+}
+
+.text-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.text-pre {
+  white-space: pre;
+}
+
+.border-danger {
+  border-left: 4px solid vv.$danger;
+}
+
+.border-info {
+  border-left: 4px solid vv.$info;
+}
+
+.border-success {
+  border-left: 4px solid vv.$success;
+}
+
+.vertical-line {
+  border-left: 1px solid vv.$gray-400;
+}
+
+.accordion {
+  .card {
+    border: 0;
+  }
+
+  .card-header {
+    border: 0;
+    border-bottom: 3px solid vv.$white;
+    padding-left: 0;
+
+    .btn:focus,
+    .btn.focus {
+      box-shadow: none;
+    }
+
+    button.dropdown-toggle {
+      position: relative;
+
+      &::after {
+        border: 0;
+        content: '\f054';
+        font-family: 'ForkAwesome';
+        font-size: 1rem;
+        position: absolute;
+        right: 20px;
+        transition: transform 0.3s ease-in-out;
+      }
+
+      &[aria-expanded='true']::after {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}