@qrsln/lootstrap 24.3.9-beta.0 → 24.3.12-beta.0

package/dist/css/lootstrap.css

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 /*!
- * CSS Compiled on: 2024-03-09
+ * CSS Compiled on: 2024-03-12
  *
- * Lootstrap v24.3.9-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v24.3.12-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2024 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */
@@ -755,11 +755,6 @@ progress {
   --ls-shadow-hsl: 240deg,7%,18%;
   --ls-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0))
 }
-.Accent-light {
-  --ls-bg-accent-hsl: 217deg,96%,52%;
-  --ls-bg-accent: hsl(217, 96%, 52%);
-  --ls-fg-accent: hsl(0, 0%, 100%)
-}
 .Theme-dark {
   --ls-contrast-hsl: 0deg,0%,100%;
   --ls-bg-hue-hsl: 240deg,7%,18%;
@@ -778,11 +773,6 @@ progress {
 .Theme-dark .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
-.Accent-dark {
-  --ls-bg-accent-hsl: 217deg,97%,76%;
-  --ls-bg-accent: #87b4fd;
-  --ls-fg-accent: hsl(0, 0%, 0%)
-}
 .Theme-night {
   --ls-contrast-hsl: 0deg,0%,100%;
   --ls-bg-hue-hsl: 0deg,0%,7%;
@@ -801,11 +791,21 @@ progress {
 .Theme-night .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
-.Accent-night {
-  --ls-bg-accent-hsl: 217deg,97%,76%;
-  --ls-bg-accent: #87b4fd;
+.Accent-light {
+  --ls-bg-accent-hsl: 0deg,0%,98%;
+  --ls-bg-accent: hsl(0, 0%, 98%);
   --ls-fg-accent: hsl(0, 0%, 0%)
 }
+.Accent-dark {
+  --ls-bg-accent-hsl: 240deg,7%,18%;
+  --ls-bg-accent: hsl(240, 7%, 18%);
+  --ls-fg-accent: hsl(0, 0%, 100%)
+}
+.Accent-night {
+  --ls-bg-accent-hsl: 0deg,0%,7%;
+  --ls-bg-accent: hsl(0, 0%, 7%);
+  --ls-fg-accent: hsl(0, 0%, 100%)
+}
 .Accent-primary {
   --ls-bg-accent-hsl: 217deg,96%,52%;
   --ls-bg-accent: hsl(217, 96%, 52%);
@@ -4035,7 +4035,7 @@ fieldset:disabled .Btn {
   clear: both
 }
 .Placeholder-paragraph .Placeholder:last-child {
-  width: 59%
+  width: 67%
 }
 .Placeholder-paragraph .Placeholder:nth-child(1n) {
   animation-delay: .7s
@@ -4071,16 +4071,16 @@ fieldset:disabled .Btn {
   background-color: transparent
 }
 .Placeholder-textual .Placeholder:nth-child(1n) {
-  background-image: linear-gradient(90deg,currentColor 17%,transparent calc(17% + 1px),transparent calc(17% + 6px),currentColor calc(17% + 6px),currentColor 39%,transparent calc(39% + 1px),transparent calc(39% + 6px),currentColor calc(39% + 6px),currentColor 67%,transparent calc(67% + 1px),transparent calc(67% + 6px),currentColor calc(67% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 10%,transparent calc(10% + 1px),transparent calc(10% + 6px),currentColor calc(10% + 6px),currentColor 42%,transparent calc(42% + 1px),transparent calc(42% + 6px),currentColor calc(42% + 6px),currentColor 79%,transparent calc(79% + 1px),transparent calc(79% + 6px),currentColor calc(79% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(2n) {
-  background-image: linear-gradient(90deg,currentColor 28%,transparent calc(28% + 1px),transparent calc(28% + 6px),currentColor calc(28% + 6px),currentColor 67%,transparent calc(67% + 1px),transparent calc(67% + 6px),currentColor calc(67% + 6px),currentColor 85%,transparent calc(85% + 1px),transparent calc(85% + 6px),currentColor calc(85% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 22%,transparent calc(22% + 1px),transparent calc(22% + 6px),currentColor calc(22% + 6px),currentColor 68%,transparent calc(68% + 1px),transparent calc(68% + 6px),currentColor calc(68% + 6px),currentColor 83%,transparent calc(83% + 1px),transparent calc(83% + 6px),currentColor calc(83% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(3n) {
-  background-image: linear-gradient(90deg,currentColor 26%,transparent calc(26% + 1px),transparent calc(26% + 6px),currentColor calc(26% + 6px),currentColor 77%,transparent calc(77% + 1px),transparent calc(77% + 6px),currentColor calc(77% + 6px),currentColor 82%,transparent calc(82% + 1px),transparent calc(82% + 6px),currentColor calc(82% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 29%,transparent calc(29% + 1px),transparent calc(29% + 6px),currentColor calc(29% + 6px),currentColor 65%,transparent calc(65% + 1px),transparent calc(65% + 6px),currentColor calc(65% + 6px),currentColor 81%,transparent calc(81% + 1px),transparent calc(81% + 6px),currentColor calc(81% + 6px),currentColor)
 }
 .Placeholder-textual .Placeholder:nth-child(4n) {
-  background-image: linear-gradient(90deg,currentColor 17%,transparent calc(17% + 1px),transparent calc(17% + 6px),currentColor calc(17% + 6px),currentColor 60%,transparent calc(60% + 1px),transparent calc(60% + 6px),currentColor calc(60% + 6px),currentColor 80%,transparent calc(80% + 1px),transparent calc(80% + 6px),currentColor calc(80% + 6px),currentColor)
+  background-image: linear-gradient(90deg,currentColor 19%,transparent calc(19% + 1px),transparent calc(19% + 6px),currentColor calc(19% + 6px),currentColor 69%,transparent calc(69% + 1px),transparent calc(69% + 6px),currentColor calc(69% + 6px),currentColor 82%,transparent calc(82% + 1px),transparent calc(82% + 6px),currentColor calc(82% + 6px),currentColor)
 }
 .Placeholder-xs,
 .Placeholder-xs .Placeholder {
@@ -4247,6 +4247,117 @@ fieldset:disabled .Btn {
 .Rating .Centered:not(.Rating-value).Selected .Fraction svg path {
   fill: var(--ls-rating-gradient-id) hsla(var(--ls-contrast-hsl),0.5)
 }
+.Sidenav-transition .Sidenav-backdrop {
+  transition-duration: .4s;
+  transition-timing-function: cubic-bezier(0.25,0.8,0.25,1);
+  transition-property: background-color,visibility
+}
+.Sidenav-transition .Sidenav-content {
+  transition-duration: .4s;
+  transition-timing-function: cubic-bezier(0.25,0.8,0.25,1);
+  transition-property: transform,margin-left,margin-right
+}
+.Sidenav-container {
+  --ls-sidenav-width: 329px;
+  --ls-sidenav-border-radius: 0;
+  --ls-sidenav-divider-color: hsla(var(--ls-bg-accent-hsl), 0.25);
+  position: relative;
+  display: block;
+  overflow: hidden;
+  height: 100%;
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
+  box-sizing: border-box;
+  z-index: 1;
+  -webkit-overflow-scrolling: touch
+}
+.Sidenav-container.Opened .Sidenav-mode-side + .Sidenav-content {
+  margin-left: var(--ls-sidenav-width)
+}
+.Sidenav-container.Opened .Sidenav-mode-push + .Sidenav-content {
+  margin-left: var(--ls-sidenav-width);
+  margin-right: -328px
+}
+.Sidenav-container.Opened .Sidenav {
+  transform: none;
+  visibility: visible
+}
+.Sidenav-container:not(.Opened) .Sidenav {
+  box-shadow: none;
+  visibility: hidden;
+  display: none
+}
+.Sidenav-container .Sidenav-backdrop {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  visibility: hidden
+}
+.Sidenav-container .Sidenav-backdrop.Active {
+  visibility: visible;
+  background-color: hsla(var(--ls-contrast-hsl),.25)
+}
+.Sidenav-container .Sidenav {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  width: var(--ls-sidenav-width);
+  color: var(--ls-fg-surface);
+  background-color: var(--ls-bg-surface);
+  box-shadow: 0 9px 21px hsla(var(--ls-shadow-hsl),.18),0 6px 6px hsla(var(--ls-shadow-hsl),.24);
+  border-top-right-radius: var(--ls-sidenav-border-radius);
+  border-bottom-right-radius: var(--ls-sidenav-border-radius);
+  z-index: 3;
+  outline: 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+  transform: translate3d(-100%,0,0)
+}
+.Sidenav-container .Sidenav.Sidenav-mode-side {
+  z-index: 2;
+  box-shadow: none;
+  border-right-color: var(--ls-sidenav-divider-color);
+  border-right-width: 1px;
+  border-right-style: solid
+}
+.Sidenav-container .Sidenav .Sidenav-inner {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch
+}
+.Sidenav-container .Sidenav-content {
+  position: relative;
+  display: block;
+  height: 100%;
+  z-index: 1;
+  overflow: auto
+}
+.Sidenav-container[fullscreen] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0
+}
+.Sidenav-container[fullscreen].Opened {
+  overflow: hidden
+}
+[dir=rtl] .Sidenav-container .Sidenav {
+  border-radius: var(--ls-sidenav-border-radius) 0 0 var(--ls-sidenav-border-radius);
+  transform: translate3d(100%,0,0)
+}
+[dir=rtl] .Sidenav-container .Sidenav-mode-side {
+  border-left-color: var(--ls-sidenav-divider-color);
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-right: none
+}
 .Scrollbar {
   --ls-scrollbar-width: 0.8rem;
   --ls-scrollbar-track-bg: hsla(var(--ls-bg-accent-hsl), 0.04);