@qrsln/lootstrap 22.1.25-beta.0 → 22.2.2-beta.0

package/Readme.md

@@ -1,11 +1,11 @@
-# @qrsln/lootstrap
+## LootStrap
 
 [![Support](https://img.shields.io/badge/Support-white)](https://www.patreon.com/qrsln)
 [![downloads](https://img.shields.io/npm/dm/@qrsln/lootstrap.svg)](https://npmcharts.com/compare/@qrsln/lootstrap?minimal=true)
 [![npm version](https://badge.fury.io/js/%40qrsln%2Flootstrap.svg)](https://badge.fury.io/js/%40qrsln%2Flootstrap)
 
-## Lootstrap
-LootStrap is a scss library and is still in beta! There is much to improve!
+[![Support](https://img.shields.io/badge/GitHub-Repository-green)](https://github.com/krsln/LootStrap)
+[![Demo](https://img.shields.io/badge/Demo-blue)](https://krsln.github.io/Showcase/LootStrap)
+![GitHub top language](https://img.shields.io/github/languages/top/krsln/LootStrap)
 
-[GitHub](https://github.com/krsln/Lootstrap)  
-[![Progress](https://img.shields.io/badge/Demo‌‌‌‌‌‌‌-blue)](https://krsln.github.io/NgLootBox/LootStrap)
+LootStrap is a scss library and is still in beta! There is much to improve!

package/dist/css/lootstrap.css

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 /*!
- * CSS Compiled on: 2022-01-25
+ * CSS Compiled on: 2022-02-02
  *
- * Lootstrap v22.1.25-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v22.2.2-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2022 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */
@@ -5131,6 +5131,21 @@ progress {
 .FST-normal {
   font-style: normal!important
 }
+.FW-light {
+  font-weight: 300!important
+}
+.FW-lighter {
+  font-weight: lighter!important
+}
+.FW-normal {
+  font-weight: 400!important
+}
+.FW-bold {
+  font-weight: 700!important
+}
+.FW-bolder {
+  font-weight: bolder!important
+}
 .Txt-left {
   text-align: left!important
 }
@@ -5843,6 +5858,33 @@ progress {
 .Hidden {
   visibility: hidden!important
 }
+.Themed-body {
+  color: var(--ls-fg-body,var(--ls-fg-body));
+  background-color: var(--ls-bg-body,var(--ls-bg-body));
+  padding: 1rem
+}
+.Themed {
+  color: var(--ls-fg-surface,var(--ls-fg-surface));
+  background-color: var(--ls-bg-surface,var(--ls-bg-surface));
+  border: 1px solid var(--ls-border-color,var(--ls-border-color));
+  box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color-rgb,var(--ls-shadow-color-rgb)),.18),0 2px 2px 0 rgba(var(--ls-shadow-color-rgb,var(--ls-shadow-color-rgb)),.12),0 4px 6px 0 rgba(var(--ls-shadow-color-rgb,var(--ls-shadow-color-rgb)),.06);
+  padding: .5rem
+}
+.Themed.Themed-outline {
+  color: var(--ls-fg-lightest,var(--ls-fg-lightest));
+  background-color: var(--ls-bg-lightest,var(--ls-bg-lightest));
+  border-color: var(--ls-bg-darkest,var(--ls-bg-darkest))
+}
+.Themed .Themed-title {
+  color: var(--ls-fg-dark,var(--ls-fg-dark));
+  background-color: var(--ls-bg-dark,var(--ls-bg-dark));
+  padding: .5rem
+}
+.Themed .Themed-footer {
+  color: var(--ls-fg-lightest,var(--ls-fg-lightest));
+  background-color: var(--ls-bg-lightest,var(--ls-bg-lightest));
+  padding: .5rem
+}
 .Alert {
   display: flex;
   position: relative;
@@ -5851,7 +5893,7 @@ progress {
   background-color: var(--ls-alert-bg-darkest,var(--ls-bg-darkest));
   border: 1px solid var(--ls-alert-border-color,var(--ls-border-color));
   box-shadow: 0 1px 1px -1px rgba(var(--ls-alert-shadow-color-rgb,var(--ls-shadow-color-rgb)),.18),0 2px 2px 0 rgba(var(--ls-alert-shadow-color-rgb,var(--ls-shadow-color-rgb)),.12),0 4px 6px 0 rgba(var(--ls-alert-shadow-color-rgb,var(--ls-shadow-color-rgb)),.06);
-  min-width: 250px;
+  min-width: 200px;
   margin-bottom: .5rem;
   padding: .5rem;
   align-items: center
@@ -5926,7 +5968,8 @@ progress {
   color: inherit
 }
 .Breadcrumb .Breadcrumb-item .Breadcrumb-Link svg {
-  margin-right: .6rem
+  margin-right: .6rem;
+  color: var(--ls-bg-active)
 }
 .Breadcrumb .Breadcrumb-item.Active {
   font-weight: 700
@@ -5956,7 +5999,7 @@ progress {
           mask-repeat: no-repeat;
   -webkit-mask-position: center;
           mask-position: center;
-  background-color: currentColor
+  background-color: var(--ls-bg-active)
 }
 .Breadcrumb-chevron-larger {
   --ls-breadcrumb-divider: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1LjcgOS43Jz48cGF0aCBmaWxsPSdub25lJyBzdHJva2U9J3JnYmEoMCwgMCwgMCwgMC42KScgc3Ryb2tlLXdpZHRoPScxLjMnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLW1pdGVybGltaXQ9JzEwJyBkPSdNLjggOC44bDQtNC00LTQnLz48L3N2Zz4=")
@@ -5968,13 +6011,14 @@ progress {
   --ls-breadcrumb-divider: "/"
 }
 .Breadcrumb-divider .Breadcrumb-item:not(.Breadcrumb-divider .Breadcrumb-item:first-child):before {
-  color: var(--ls-fg-surface);
+  color: var(--ls-bg-active);
   margin-top: -4px;
   content: var(--ls-breadcrumb-divider, "/")
 }
 .Breadcrumb-divider-bar .Breadcrumb-item:not(.Breadcrumb-divider-bar .Breadcrumb-item:first-child):before {
-  border-left: 2px solid currentColor;
-  opacity: .15
+  border-left: 2px solid var(--ls-bg-active);
+  border-right: 2px solid var(--ls-bg-active);
+  opacity: .3
 }
 .Btn-close {
   --svg-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MC40ODcgNjAuNDg3Ij48cGF0aCBkPSJNNyw1OC43MDhjLTEuOTQ0LDEuOTQ0LTQuNzExLDIuMzYtNi4xNDcuOTIzcy0xLjAyMi00LjIuOTIzLTYuMTQ4bDUxLjctNTEuN2MxLjk0NS0xLjk0NSw0LjcxMS0yLjM2LDYuMTQ4LS45MjNzMS4wMjEsNC4yLS45MjMsNi4xNDdaIi8+PHBhdGggZD0iTTEuNzc5LDdDLS4xNjYsNS4wNTktLjU4MSwyLjI5Mi44NTYuODU2UzUuMDU5LS4xNjYsNywxLjc3OWw1MS43MDUsNTEuN2MxLjk0NCwxLjk0NSwyLjM2LDQuNzExLjkyMyw2LjE0OHMtNC4yLDEuMDIxLTYuMTQ4LS45MjNaIi8+PC9zdmc+");
@@ -6101,16 +6145,16 @@ progress {
   box-shadow: none;
   padding: 0
 }
-.Btn-sm {
-  padding: .25rem .5rem;
-  font-size: .875rem;
-  border-radius: .2rem
-}
 .Btn {
   padding: .375rem .75rem;
   font-size: 1rem;
   border-radius: .25rem
 }
+.Btn-sm {
+  padding: .25rem .5rem;
+  font-size: .875rem;
+  border-radius: .2rem
+}
 .Btn-lg {
   padding: .5rem 1rem;
   font-size: 1.25rem;
@@ -6601,6 +6645,7 @@ progress {
   opacity: .5;
   transition: opacity .6s ease
 }
+.Carousel .Carousel-indicators li.Active,
 .Carousel .Carousel-indicators li.active {
   opacity: 1
 }
@@ -6619,6 +6664,7 @@ progress {
           backface-visibility: hidden;
   transition: transform .6s ease-in-out
 }
+.Carousel .Carousel-inner .Carousel-item.Active,
 .Carousel .Carousel-inner .Carousel-item.active {
   display: block
 }
@@ -7092,37 +7138,37 @@ progress {
   background-color: var(--ls-bg-surface)
 }
 .Rating .Square .Square-inner:not(.Rating-value).IsFraction {
-  background: linear-gradient(to right,var(--rating-bg-color) 0,var(--ls-bg-lightest) 100%);
-  -o-border-image: linear-gradient(to right,var(--rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
-     border-image: linear-gradient(to right,var(--rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
-  color: var(--rating-color)
+  background: linear-gradient(to right,var(--ls-rating-bg-color) 0,var(--ls-bg-lightest) 100%);
+  -o-border-image: linear-gradient(to right,var(--ls-rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
+     border-image: linear-gradient(to right,var(--ls-rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
+  color: var(--ls-rating-color)
 }
 .Rating .Square .Square-inner:not(.Rating-value).IsHovered,
 .Rating .Square .Square-inner:not(.Rating-value).IsSelected {
-  border-color: var(--rating-bg-color);
-  background: var(--rating-bg-color);
-  color: var(--rating-color)
+  border-color: var(--ls-rating-bg-color);
+  background: var(--ls-rating-bg-color);
+  color: var(--ls-rating-color)
 }
 .Rating .Square .Square-inner:not(.Rating-value).IsHovered.IsFraction,
 .Rating .Square .Square-inner:not(.Rating-value).IsSelected.IsFraction {
-  background: linear-gradient(to right,var(--rating-bg-color) 0,var(--ls-bg-lightest) 100%);
-  -o-border-image: linear-gradient(to right,var(--rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
-     border-image: linear-gradient(to right,var(--rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
-  color: var(--rating-color)
+  background: linear-gradient(to right,var(--ls-rating-bg-color) 0,var(--ls-bg-lightest) 100%);
+  -o-border-image: linear-gradient(to right,var(--ls-rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
+     border-image: linear-gradient(to right,var(--ls-rating-bg-color) 0%,var(--ls-bg-lightest) 100%) 1;
+  color: var(--ls-rating-color)
 }
 .Rating-star {
-  --rating-mask: url("data:image/svg+xml;base64,IDxzdmcgdmlld0JveD0nMCAwIDE5MCAxOTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBvbHlnb24gcG9pbnRzPScxMDAsMTAgNDAsMTgwIDE5MCw2MCAxMCw2MCAxNjAsMTgwJyAvPjwvc3ZnPgo=");
-  --rating-bg-color: #dbab09;
-  --rating-color: var(--ls-fg-darkest)
+  --ls-rating-mask: url("data:image/svg+xml;base64,IDxzdmcgdmlld0JveD0nMCAwIDE5MCAxOTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBvbHlnb24gcG9pbnRzPScxMDAsMTAgNDAsMTgwIDE5MCw2MCAxMCw2MCAxNjAsMTgwJyAvPjwvc3ZnPgo=");
+  --ls-rating-bg-color: #dbab09;
+  --ls-rating-color: var(--ls-fg-darkest)
 }
 .Rating-heart {
-  --rating-mask: url("data:image/svg+xml;base64,IDxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2aWV3Qm94PSctMSAwIDUyIDUwJz48ZyA+PHBhdGggZD0nTTI0Ljg1LDEwLjEyNmMyLjAxOC00Ljc4Myw2LjYyOC04LjEyNSwxMS45OS04LjEyNWM3LjIyMywwLDEyLjQyNSw2LjE3OSwxMy4wNzksMTMuNTQzIGMwLDAsMC4zNTMsMS44MjgtMC40MjQsNS4xMTljLTEuMDU4LDQuNDgyLTMuNTQ1LDguNDY0LTYuODk4LDExLjUwM0wyNC44NSw0OEw3LjQwMiwzMi4xNjVjLTMuMzUzLTMuMDM4LTUuODQtNy4wMjEtNi44OTgtMTEuNTAzIGMtMC43NzctMy4yOTEtMC40MjQtNS4xMTktMC40MjQtNS4xMTlDMC43MzQsOC4xNzksNS45MzYsMiwxMy4xNTksMkMxOC41MjIsMiwyMi44MzIsNS4zNDMsMjQuODUsMTAuMTI2eicvPjwvZz48L3N2Zz4K");
-  --rating-bg-color: #d73c4c;
-  --rating-color: var(--ls-fg-darkest)
+  --ls-rating-mask: url("data:image/svg+xml;base64,IDxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2aWV3Qm94PSctMSAwIDUyIDUwJz48ZyA+PHBhdGggZD0nTTI0Ljg1LDEwLjEyNmMyLjAxOC00Ljc4Myw2LjYyOC04LjEyNSwxMS45OS04LjEyNWM3LjIyMywwLDEyLjQyNSw2LjE3OSwxMy4wNzksMTMuNTQzIGMwLDAsMC4zNTMsMS44MjgtMC40MjQsNS4xMTljLTEuMDU4LDQuNDgyLTMuNTQ1LDguNDY0LTYuODk4LDExLjUwM0wyNC44NSw0OEw3LjQwMiwzMi4xNjVjLTMuMzUzLTMuMDM4LTUuODQtNy4wMjEtNi44OTgtMTEuNTAzIGMtMC43NzctMy4yOTEtMC40MjQtNS4xMTktMC40MjQtNS4xMTlDMC43MzQsOC4xNzksNS45MzYsMiwxMy4xNTksMkMxOC41MjIsMiwyMi44MzIsNS4zNDMsMjQuODUsMTAuMTI2eicvPjwvZz48L3N2Zz4K");
+  --ls-rating-bg-color: #d73c4c;
+  --ls-rating-color: var(--ls-fg-darkest)
 }
 .Rating-text {
-  --rating-bg-color: var(--ls-bg-active);
-  --rating-color: var(--ls-fg-active)
+  --ls-rating-bg-color: var(--ls-bg-active);
+  --ls-rating-color: var(--ls-fg-active)
 }
 .Rating-text .Square .Square-inner:not(.Rating-value) {
   margin: 1px;
@@ -7153,8 +7199,8 @@ progress {
 }
 .Rating-heart .Square .Square-inner:not(.Rating-value),
 .Rating-star .Square .Square-inner:not(.Rating-value) {
-  -webkit-mask: var(--rating-mask) center no-repeat;
-          mask: var(--rating-mask) center no-repeat;
+  -webkit-mask: var(--ls-rating-mask) center no-repeat;
+          mask: var(--ls-rating-mask) center no-repeat;
   -webkit-mask-size: auto;
           mask-size: auto
 }
@@ -7350,7 +7396,6 @@ progress {
   overflow: visible;
   color: var(--ls-fg-surface);
   background-color: var(--ls-bg-surface);
-  border: 1px solid var(--ls-border-color);
   box-shadow: 0 0 1px 0 rgba(var(--ls-shadow-color-rgb),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color-rgb),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color-rgb),.06) inset;
   background-clip: border-box;
   padding: 0;
@@ -7389,8 +7434,8 @@ progress {
   display: flex;
   width: 32px;
   height: 32px;
-  color: var(--ls-fg-darkest);
-  background-color: var(--ls-bg-darkest);
+  color: var(--ls-fg-active);
+  background-color: var(--ls-bg-active);
   border-radius: 50%;
   box-shadow: 0 0 1px 0 rgba(var(--ls-shadow-color-rgb),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color-rgb),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color-rgb),.06) inset;
   margin-bottom: 1rem
@@ -7503,7 +7548,7 @@ progress {
   border-top-right-radius: var(--ls-border-radius);
   border: 1px solid var(--ls-toast-border-color,var(--ls-border-color));
   box-shadow: 0 1px 1px -1px rgba(var(--ls-toast-shadow-color-rgb,var(--ls-shadow-color-rgb)),.18),0 2px 2px 0 rgba(var(--ls-toast-shadow-color-rgb,var(--ls-shadow-color-rgb)),.12),0 4px 6px 0 rgba(var(--ls-toast-shadow-color-rgb,var(--ls-shadow-color-rgb)),.06);
-  min-width: 250px;
+  min-width: 200px;
   margin-bottom: .5rem
 }
 .Toast .Toast-header {
@@ -7539,6 +7584,99 @@ progress {
 .Toast .Progress .Progress-bar {
   background-color: var(--ls-toast-bg-active,var(--ls-bg-active))
 }
+.TreeView {
+  position: relative;
+  padding: 5px 0;
+  margin-bottom: .5rem
+}
+.TreeView .TreeViewItem {
+  position: relative;
+  display: block;
+  margin-bottom: 5px
+}
+.TreeView .TreeViewItem.TreeViewItem-single .TreeView-leaf:hover {
+  color: var(--ls-fg-light);
+  background-color: var(--ls-bg-light)
+}
+.TreeView .TreeViewItem.TreeViewItem-single .TreeView-leaf:hover.Active .FaIcon {
+  color: var(--ls-bg-active)
+}
+.TreeView .TreeViewItem.TreeViewItem-root > .TreeView-toggle {
+  margin-left: 0
+}
+.TreeView .TreeViewItem.TreeViewItem-root > .TreeView-children {
+  padding: 0 0 0 35px
+}
+.TreeView .TreeViewItem.Disabled {
+  cursor: not-allowed;
+  color: var(--ls-fg-muted);
+  background-color: var(--ls-bg-light)
+}
+.TreeView .TreeViewItem .TreeView-toggle {
+  margin: 4px 4px 4px -18px;
+  color: var(--ls-bg-active)
+}
+.TreeView .TreeViewItem .TreeView-toggle svg {
+  width: 14px!important
+}
+.TreeView .TreeViewItem .TreeView-checkbox,
+.TreeView .TreeViewItem .TreeView-leaf,
+.TreeView .TreeViewItem .TreeView-toggle {
+  display: inline
+}
+.TreeView .TreeViewItem .TreeView-checkbox:hover + .TreeView-leaf {
+  border: 1px solid var(--ls-border-color)
+}
+.TreeView .TreeViewItem .TreeView-leaf {
+  display: inline;
+  border: 1px solid transparent;
+  padding: 2px 6px
+}
+.TreeView .TreeViewItem .TreeView-leaf.Active {
+  color: var(--ls-fg-active);
+  background-color: var(--ls-bg-active);
+  border-color: var(--ls-bg-active);
+  border-radius: .25rem
+}
+.TreeView .TreeViewItem .TreeView-leaf.Active .FaIcon {
+  color: var(--ls-fg-active)
+}
+.TreeView .TreeViewItem .TreeView-leaf .FaIcon {
+  margin-right: .25rem;
+  color: var(--ls-bg-active)
+}
+.TreeView .TreeViewItem .TreeView-children {
+  position: relative;
+  display: block;
+  margin-top: 5px;
+  padding-left: 18px;
+  border-left: 1px solid var(--ls-border-color);
+  border-bottom: 1px solid var(--ls-border-color)
+}
+.TreeView .TreeViewItem .TreeView-children.Expanded {
+  transition: all .3s ease;
+  -webkit-animation: fade-in .3s ease-in-out;
+          animation: fade-in .3s ease-in-out
+}
+.TreeView .TreeViewItem .TreeView-children.Collapsed {
+  display: none
+}
+@-webkit-keyframes fade-in {
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+}
+@keyframes fade-in {
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+}
 .Alert,
 .Breadcrumb,
 .Btn,