@dodlhuat/basix 1.0.0

package/css/scrollbar.scss

@@ -0,0 +1,69 @@
+@use "properties";
+
+:root {
+  --track-width: 12px;
+  --track-radius: 8px;
+  --thumb-min: 28px;
+  --track-gap: 8px;
+}
+
+.scroll-container {
+  position: relative;
+  background: var(--secondary-background);
+  border-radius: 8px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+
+  .viewport {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    padding-right: calc(var(--track-width) + var(--track-gap));
+    box-sizing: content-box;
+
+    .content {
+      margin: 0;
+    }
+  }
+
+  .viewport::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .viewport {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .scrollbar {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    bottom: 8px;
+    width: var(--track-width);
+    pointer-events: none;
+  }
+
+  .track {
+    position: relative;
+    height: 100%;
+    border-radius: var(--track-radius);
+    width: 100%;
+    pointer-events: auto;
+  }
+
+  .thumb {
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    top: 0px;
+    height: 40px;
+    border-radius: calc(var(--track-radius) - 2px);
+    background: var(--secondary-text);
+    cursor: pointer;
+    pointer-events: auto;
+    touch-action: none;
+  }
+}
+

package/css/spinner.css

@@ -0,0 +1,118 @@
+:root {
+  --primary-text: #1E1F24;
+  --secondary-text: #62636C;
+  --divider: #D8D9E0;
+  --accent-text: #3D63DD;
+  --error: #D64545;
+  --warning: #C28A00;
+  --success: #2E8B57;
+  --secondary-background: #E7E8EC;
+  --background: #F9F9FB;
+  --accent-color: #3D63DD;
+  --accent-color-lighten: #87A5EF;
+  --accent-color-text: #D8D9E0;
+  --disabled: #D8D9E0;
+}
+
+[data-theme=dark] {
+  --primary-text: #EEEEF0;
+  --secondary-text: #B2B3BD;
+  --divider: #393A40;
+  --accent-text: #0E496D;
+  --error: #FF6B6B;
+  --warning: #F7B500;
+  --success: #5CC689;
+  --background: #111113;
+  --secondary-background: #19191B;
+  --accent-color: #1B7BB4;
+  --accent-color-lighten: #175982;
+  --accent-color-text: #B2B3BD;
+  --disabled: #303136;
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--accent-color);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.loading, .loading:before, .loading:after {
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}
+
+.loading {
+  position: relative;
+  background-color: rgba(var(--accent-color), 1);
+  opacity: 1;
+  animation: spScaleAlpha 1s infinite linear;
+}
+
+.loading:before, .loading:after {
+  content: "";
+  position: absolute;
+  opacity: 0.25;
+}
+
+.loading:before {
+  left: 30px;
+  animation: spScaleAlphaBefore 1s infinite linear;
+}
+
+.loading:after {
+  left: -30px;
+  animation: spScaleAlphaAfter 1s infinite linear;
+}
+
+@keyframes spScaleAlpha {
+  0% {
+    opacity: 1;
+  }
+  33% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes spScaleAlphaBefore {
+  0% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+  }
+  66% {
+    opacity: 0.25;
+  }
+}
+@keyframes spScaleAlphaAfter {
+  33% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
+}/*# sourceMappingURL=spinner.css.map */

package/css/spinner.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["properties.scss","spinner.css","spinner.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC5BA;EACE,WAAA;EACA,YAAA;EACA,qCAAA;EACA,gCAAA;EACA,kBAAA;EACA,qBAAA;EACA,sBAAA;EACA,sCAAA;AD+BF;;AC5BA;EACE;IACE,uBAAA;ED+BF;EC7BA;IACE,yBAAA;ED+BF;AACF;AC5BA;EACE,kBAAA;EACA,qCAAA;EACA,WAAA;EACA,YAAA;EACA,qBAAA;AD8BF;;AC3BA;EACE,kBAAA;EACA,8CAAA;EACA,UAAA;EACA,0CAAA;AD8BF;;AC3BA;EACE,WAAA;EACA,kBAAA;EACA,aAAA;AD8BF;;AC3BA;EACE,UAAA;EACA,gDAAA;AD8BF;;AC3BA;EACE,WAAA;EACA,+CAAA;AD8BF;;AC3BA;EACE;IACE,UAAA;ED8BF;EC5BA;IACE,aAAA;ED8BF;EC5BA;IACE,aAAA;ED8BF;EC5BA;IACE,UAAA;ED8BF;AACF;AC3BA;EACE;IACE,aAAA;ED6BF;EC3BA;IACE,UAAA;ED6BF;EC3BA;IACE,aAAA;ED6BF;AACF;AC1BA;EACE;IACE,aAAA;ED4BF;EC1BA;IACE,UAAA;ED4BF;EC1BA;IACE,aAAA;ED4BF;AACF","file":"spinner.css"}

package/css/spinner.scss

@@ -0,0 +1,91 @@
+@use "properties";
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--accent-color);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading, .loading::before, .loading::after {
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}
+
+.loading {
+  position: relative;
+  background-color: rgba(var(--accent-color), 1);
+  opacity: 1;
+  animation: spScaleAlpha 1s infinite linear;
+}
+
+.loading::before, .loading::after {
+  content: '';
+  position: absolute;
+  opacity: 0.25;
+}
+
+.loading::before {
+  left: 30px;
+  animation: spScaleAlphaBefore 1s infinite linear;
+}
+
+.loading::after {
+  left: -30px;
+  animation: spScaleAlphaAfter 1s infinite linear;
+}
+
+@keyframes spScaleAlpha {
+  0% {
+    opacity: 1;
+  }
+  33% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 0.25;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes spScaleAlphaBefore {
+  0% {
+    opacity: 0.25;
+  }
+  33% {
+    opacity: 1;
+  }
+  66% {
+    opacity: 0.25;
+  }
+}
+
+@keyframes spScaleAlphaAfter {
+  33% {
+    opacity: 0.25;
+  }
+  66% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
+}