soneta-ui-style

2026-03-22 20:56:25 +01:00
parent ccaf27e569
commit 81b895cf2f
707 changed files with 33942 additions and 0 deletions
@@ -0,0 +1,143 @@
+@import "../../Themes/common/PredefinedMixins.scss";
+@import "./partial.scss";
+@import "./Variables.scss";
+
+.spinner :global {
+  animation: rotate 2s linear infinite;
+  -webkit-animation: rotate 2s linear infinite;
+}
+
+.spinner .path :global {
+  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+}
+
+.spinner.button .path :global {
+  animation: dash 1.5s ease-in-out infinite, wait-color 6s ease-in-out infinite;
+  -webkit-animation: dash 1.5s ease-in-out infinite, wait-color 6s ease-in-out infinite;
+}
+
+.outterSpinnerWrapper {
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  border: $progress_bar_spinner_border;
+
+  .spinnerWrapper {
+    display: flex;
+    justify-content: center;
+    width: 450px;
+    height: 340px;
+    padding: 0 10px 0 10px;
+    background-color: $progress_bar_spinner_wrapper_bg;
+    box-shadow: $theme_shadow;
+
+    border-radius: $modal_border_radius;
+    font-family: $tertiaryFont;
+
+    &.transparent {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    .spinnerContainer {
+      position: absolute;
+      top: 49%;
+      left: 50%;
+      width: 150px;
+      height: 150px;
+      margin-top: -95px;
+      margin-left: -75px;
+
+      &:before {
+        content: "";
+        display: block;
+        padding-top: 100%;
+      }
+      .spinner {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform-origin: center center;
+        -webkit-transform-origin: center center;
+
+        .path {
+          stroke-width: 2px;
+          stroke-dasharray: 1, 200;
+          stroke-dashoffset: 0;
+          stroke-linecap: round;
+        }
+      }
+
+      .progressBarWrapper {
+        stroke-dashoffset: 0;
+        stroke-width: 2px;
+        position: absolute;
+        top: 0;
+
+        .progressBar {
+          stroke: $progress_bar_circle_bg;
+          transition: stroke-dashoffset 0.5s linear;
+        }
+
+        .progressBarBcgCircle {
+          stroke: $progress_bar_background_circle_bg;
+        }
+      }
+
+      .progressInPercent {
+        position: absolute;
+        top: 69px;
+        width: 100%;
+        text-align: center;
+        font-size: 16pt;
+        color: $progress_bar_in_percent_fg;
+      }
+    }
+
+    .btnInformation {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: $progress_bar_btn_information_fg;
+      position: relative;
+
+      .phase {
+        margin-top: 145px;
+        color: $progress_bar_information_fg;
+        font-weight: 600;
+      }
+
+      .information {
+        color: $progress_bar_information_fg;
+        overflow: hidden;
+        width: 400px;
+        text-align: center;
+        height: 3em;
+        line-height: 1.5em;
+      }
+
+      .disabledBtn {
+        color: $command_primary_disabled_fg;
+        background-color: $command_primary_disabled_bg;
+        border-color: $command_primary_disabled_border_color;
+      }
+    }
+  }
+}
+
+.button-spinner-wrapper {
+  width: 30px;
+  height: 30px;
+
+  .spinner {
+    .path {
+      stroke-width: 3px;
+      stroke-linecap: round;
+    }
+  }
+}