sdga-ui 1.0.8 → 1.0.10

package/css/dga-ui.css

@@ -8729,8 +8729,8 @@ textarea.form-control-lg {
   --dga-dropdown-link-color: #111927;
   --dga-dropdown-link-hover-color: rgb(9.2589285714, 13.6160714286, 21.2410714286);
   --dga-dropdown-link-hover-bg: #F3F4F6;
-  --dga-dropdown-link-active-color: #FFFFFF;
-  --dga-dropdown-link-active-bg: #1B8354;
+  --dga-dropdown-link-active-color: #161616;
+  --dga-dropdown-link-active-bg: #E5E7EB;
   --dga-dropdown-link-disabled-color: #6C737F;
   --dga-dropdown-item-padding-x: 1rem;
   --dga-dropdown-item-padding-y: 0.25rem;
@@ -8996,8 +8996,8 @@ textarea.form-control-lg {
   --dga-dropdown-link-hover-color: #FFFFFF;
   --dga-dropdown-divider-bg: #E5E7EB;
   --dga-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
-  --dga-dropdown-link-active-color: #FFFFFF;
-  --dga-dropdown-link-active-bg: #1B8354;
+  --dga-dropdown-link-active-color: #161616;
+  --dga-dropdown-link-active-bg: #E5E7EB;
   --dga-dropdown-link-disabled-color: #6C737F;
   --dga-dropdown-header-color: #6C737F;
 }
@@ -9145,7 +9145,7 @@ textarea.form-control-lg {
 }
 .nav-link:focus-visible {
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(17, 25, 39, 0.25);
+  box-shadow: none;
 }
 .nav-link.disabled, .nav-link:disabled {
   color: var(--dga-nav-link-disabled-color);
@@ -9246,23 +9246,23 @@ textarea.form-control-lg {
 }
 
 .navbar {
-  --dga-navbar-padding-x: 1rem;
-  --dga-navbar-padding-y: 0.5rem;
-  --dga-navbar-color: rgba(22, 22, 22, 0.55);
-  --dga-navbar-hover-color: rgba(22, 22, 22, 0.7);
+  --dga-navbar-padding-x: 2rem;
+  --dga-navbar-padding-y: 0;
+  --dga-navbar-color: #161616;
+  --dga-navbar-hover-color: #161616;
   --dga-navbar-disabled-color: rgba(22, 22, 22, 0.3);
-  --dga-navbar-active-color: rgba(22, 22, 22, 0.9);
+  --dga-navbar-active-color: #161616;
   --dga-navbar-brand-padding-y: 0.3125rem;
   --dga-navbar-brand-margin-end: 1rem;
   --dga-navbar-brand-font-size: 1.125rem;
-  --dga-navbar-brand-color: rgba(22, 22, 22, 0.9);
-  --dga-navbar-brand-hover-color: rgba(22, 22, 22, 0.9);
-  --dga-navbar-nav-link-padding-x: 0.5rem;
+  --dga-navbar-brand-color: #161616;
+  --dga-navbar-brand-hover-color: #161616;
+  --dga-navbar-nav-link-padding-x: 1rem;
   --dga-navbar-toggler-padding-y: 0.25rem;
   --dga-navbar-toggler-padding-x: 0.75rem;
   --dga-navbar-toggler-font-size: 1.125rem;
-  --dga-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2822, 22, 22, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-  --dga-navbar-toggler-border-color: rgba(22, 22, 22, 0.1);
+  --dga-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23161616' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --dga-navbar-toggler-border-color: transparent;
   --dga-navbar-toggler-border-radius: 0.25rem;
   --dga-navbar-toggler-focus-width: 0.25rem;
   --dga-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
@@ -12624,11 +12624,11 @@ textarea.form-control-lg {
   --dga-btn-close-focus-opacity: 1;
   --dga-btn-close-disabled-opacity: 0.25;
   box-sizing: content-box;
-  width: 0.7031rem;
-  height: 0.7031rem;
-  padding: 0.5rem 0.5rem;
+  width: 0.56rem;
+  height: 0.56rem;
+  padding: 0.3rem 0.3rem;
   color: var(--dga-btn-close-color);
-  background: transparent var(--dga-btn-close-bg) center/0.7031rem auto no-repeat;
+  background: transparent var(--dga-btn-close-bg) center/0.56rem auto no-repeat;
   filter: var(--dga-btn-close-filter);
   border: 0;
   border-radius: 0.375rem;
@@ -26178,13 +26178,14 @@ textarea.form-control-lg {
   --dga-text-muted: rgba(255, 255, 255, 0.8);
   --dga-border-color: rgba(255, 255, 255, 0.3);
 }
-.on-primary *:focus-visible {
+.on-primary *:focus-visible,
+.on-primary *:focus {
   outline-color: #FFFFFF !important;
 }
 
 .list-unstyled {
   padding-left: unset;
-  padding-right: unset;
+  padding-inline-start: 0;
 }
 
 th {
@@ -26195,6 +26196,198 @@ html {
   text-size-adjust: 100%;
 }
 
+.dga-featured-icon {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  background: #F3FCF6;
+  font-size: 1.3rem;
+}
+.dga-featured-icon.dga-featured-icon-sm {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.875rem;
+}
+.dga-featured-icon.dga-featured-icon-md {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.3rem;
+}
+.dga-featured-icon.dga-featured-icon-lg {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.875rem;
+}
+.dga-featured-icon.dga-featured-icon-circle {
+  border-radius: 9999px;
+}
+.dga-featured-icon.dga-featured-icon-rounded-lg {
+  border-radius: 1rem;
+}
+.dga-featured-icon.dga-featured-icon-rounded-sm {
+  border-radius: 0.25rem;
+}
+.dga-featured-icon.dga-featured-icon-rounded-md, .dga-featured-icon.dga-featured-icon-rounded {
+  border-radius: 0.5rem;
+}
+.dga-featured-icon.dga-featured-icon-success {
+  background-color: #ECFDF3;
+}
+.dga-featured-icon.dga-featured-icon-success svg,
+.dga-featured-icon.dga-featured-icon-success i {
+  fill: #067647;
+  color: #067647;
+  stroke: #067647;
+}
+.dga-featured-icon.dga-featured-icon-success.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.dga-featured-icon-success.disabled svg,
+.dga-featured-icon.dga-featured-icon-success.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon.dga-featured-icon-primary {
+  background-color: #F3FCF6;
+}
+.dga-featured-icon.dga-featured-icon-primary svg,
+.dga-featured-icon.dga-featured-icon-primary i {
+  fill: #166A45;
+  color: #166A45;
+  stroke: #166A45;
+}
+.dga-featured-icon.dga-featured-icon-primary.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.dga-featured-icon-primary.disabled svg,
+.dga-featured-icon.dga-featured-icon-primary.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon.dga-featured-icon-danger {
+  background-color: #FEF3F2;
+}
+.dga-featured-icon.dga-featured-icon-danger svg,
+.dga-featured-icon.dga-featured-icon-danger i {
+  fill: #B42318;
+  color: #B42318;
+  stroke: #B42318;
+}
+.dga-featured-icon.dga-featured-icon-danger.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.dga-featured-icon-danger.disabled svg,
+.dga-featured-icon.dga-featured-icon-danger.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon.dga-featured-icon-warning {
+  background-color: #FFFAEB;
+}
+.dga-featured-icon.dga-featured-icon-warning svg,
+.dga-featured-icon.dga-featured-icon-warning i {
+  fill: #B54708;
+  color: #B54708;
+  stroke: #B54708;
+}
+.dga-featured-icon.dga-featured-icon-warning.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.dga-featured-icon-warning.disabled svg,
+.dga-featured-icon.dga-featured-icon-warning.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon.dga-featured-icon-info {
+  background-color: #EFF8FF;
+}
+.dga-featured-icon.dga-featured-icon-info svg,
+.dga-featured-icon.dga-featured-icon-info i {
+  fill: #175CD3;
+  color: #175CD3;
+  stroke: #175CD3;
+}
+.dga-featured-icon.dga-featured-icon-info.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.dga-featured-icon-info.disabled svg,
+.dga-featured-icon.dga-featured-icon-info.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon.dga-featured-icon-secondary {
+  background-color: #F9FAFB;
+}
+.dga-featured-icon.dga-featured-icon-secondary svg,
+.dga-featured-icon.dga-featured-icon-secondary i {
+  fill: #384250;
+  color: #384250;
+  stroke: #384250;
+}
+.dga-featured-icon.dga-featured-icon-secondary.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.dga-featured-icon-secondary.disabled svg,
+.dga-featured-icon.dga-featured-icon-secondary.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon.dga-featured-icon-neutral {
+  background-color: #F9FAFB;
+}
+.dga-featured-icon.dga-featured-icon-neutral svg,
+.dga-featured-icon.dga-featured-icon-neutral i {
+  fill: #384250;
+  color: #384250;
+  stroke: #384250;
+}
+.dga-featured-icon.dga-featured-icon-neutral.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.dga-featured-icon-neutral.disabled svg,
+.dga-featured-icon.dga-featured-icon-neutral.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon.disabled {
+  background-color: #F3F4F6;
+}
+.dga-featured-icon.disabled svg,
+.dga-featured-icon.disabled i {
+  fill: #9DA4AE;
+  color: #9DA4AE;
+  stroke: #9DA4AE;
+}
+.dga-featured-icon svg,
+.dga-featured-icon i {
+  fill: #1B8354;
+  color: #1B8354;
+  font-size: 1em;
+  display: grid;
+  place-items: center;
+}
+
+.on-primary .dga-featured-icon, .on-primary.dga-featured-icon {
+  background: rgba(255, 255, 255, 0.1);
+}
+.on-primary .dga-featured-icon svg,
+.on-primary .dga-featured-icon i, .on-primary.dga-featured-icon svg,
+.on-primary.dga-featured-icon i {
+  stroke: #FFFFFF;
+  fill: #FFFFFF;
+  color: #FFFFFF;
+}
+
 .link-primary {
   color: rgba(27, 131, 84, var(--dga-link-opacity, 1)) !important;
   text-decoration-color: rgba(27, 131, 84, var(--dga-link-decoration-opacity, 1)) !important;
@@ -26211,6 +26404,11 @@ html {
   color: rgba(136, 216, 173, var(--dga-link-opacity, 1)) !important;
   text-decoration-color: rgba(136, 216, 173, var(--dga-link-decoration-opacity, 1)) !important;
 }
+.link-primary.disabled {
+  color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
+  text-decoration-color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
+  pointer-events: none;
+}
 
 .link-neutral {
   color: rgba(56, 66, 80, var(--dga-link-opacity, 1)) !important;
@@ -26228,6 +26426,11 @@ html {
   color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
   text-decoration-color: rgba(157, 164, 174, var(--dga-link-decoration-opacity, 1)) !important;
 }
+.link-neutral.disabled {
+  color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
+  text-decoration-color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
+  pointer-events: none;
+}
 
 .on-primary .link-primary {
   color: rgba(255, 255, 255, var(--dga-link-opacity, 1)) !important;
@@ -26245,6 +26448,11 @@ html {
   color: rgba(255, 255, 255, var(--dga-link-opacity, 0.6)) !important;
   text-decoration-color: rgba(255, 255, 255, var(--dga-link-decoration-opacity, 0.6)) !important;
 }
+.on-primary .link-primary.disabled {
+  color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
+  text-decoration-color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
+  pointer-events: none;
+}
 .on-primary .link-neutral {
   color: rgba(255, 255, 255, var(--dga-link-opacity, 1)) !important;
   text-decoration-color: rgba(255, 255, 255, var(--dga-link-decoration-opacity, 1)) !important;
@@ -26261,8 +26469,7 @@ html {
   color: rgba(255, 255, 255, var(--dga-link-opacity, 0.6)) !important;
   text-decoration-color: rgba(255, 255, 255, var(--dga-link-decoration-opacity, 0.6)) !important;
 }
-
-a.disabled {
+.on-primary .link-neutral.disabled {
   color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
   text-decoration-color: rgba(157, 164, 174, var(--dga-link-opacity, 1)) !important;
   pointer-events: none;
@@ -26682,73 +26889,6 @@ a.disabled {
   background-color: #E5E7EB;
   cursor: not-allowed;
 }
-.card.disabled .card-title-icon::after {
-  background-color: #F3F4F6;
-}
-.card.disabled .card-title-icon {
-  color: #9DA4AE;
-}
-.card .card-title-icon::after {
-  content: "";
-  width: 3rem;
-  height: 3rem;
-  border-radius: 9999px;
-  background-color: #F3FCF6;
-  position: absolute;
-  z-index: -1;
-}
-.card .card-title-icon {
-  width: 3rem;
-  height: 3rem;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #067647;
-  z-index: 1;
-}
-.card .card-title-icon.card-title-icon-success {
-  color: #067647;
-}
-.card .card-title-icon.card-title-icon-success::after {
-  background-color: #ECFDF3;
-}
-.card .card-title-icon.card-title-icon-primary {
-  color: #166A45;
-}
-.card .card-title-icon.card-title-icon-primary::after {
-  background-color: #F3FCF6;
-}
-.card .card-title-icon.card-title-icon-danger {
-  color: #B42318;
-}
-.card .card-title-icon.card-title-icon-danger::after {
-  background-color: #FEF3F2;
-}
-.card .card-title-icon.card-title-icon-warning {
-  color: #B54708;
-}
-.card .card-title-icon.card-title-icon-warning::after {
-  background-color: #FFFAEB;
-}
-.card .card-title-icon.card-title-icon-info {
-  color: #175CD3;
-}
-.card .card-title-icon.card-title-icon-info::after {
-  background-color: #EFF8FF;
-}
-.card .card-title-icon.card-title-icon-secondary {
-  color: #384250;
-}
-.card .card-title-icon.card-title-icon-secondary::after {
-  background-color: #F9FAFB;
-}
-.card .card-title-icon.card-title-icon-neutral {
-  color: #384250;
-}
-.card .card-title-icon.card-title-icon-neutral::after {
-  background-color: #F9FAFB;
-}
 .card .card-title-checked {
   margin-inline-start: auto;
   margin-inline-end: 1rem;
@@ -26827,6 +26967,10 @@ a.disabled {
   padding-inline-end: 4.5rem;
   padding-inline-start: 1.5rem;
 }
+.alert.alert-dismissible .btn-close {
+  right: unset;
+  inset-inline-end: 0;
+}
 .alert.alert-primary {
   border-inline-start-color: rgba(27, 131, 84, 0.7);
   --dga-alert-bg: #F7FDF9;
@@ -26908,6 +27052,7 @@ a.disabled {
     gap: 1rem;
     border-inline-start-width: var(--dga-border-width);
     border-top-width: 0.5rem;
+    position: relative;
   }
   .alert.alert-primary {
     border-inline-start-color: var(--dga-border-color);
@@ -26991,14 +27136,9 @@ a.disabled {
     --dga-btn-disabled-bg: #E5E7EB;
     --dga-btn-disabled-border-color: #E5E7EB;
   }
-}
-
-.alert-dismissible .btn-close {
-  padding: 0.5rem 0.5rem;
-  position: absolute;
-  top: 1rem;
-  right: unset;
-  inset-inline-end: 1.5rem;
+  .alert.alert-dismissible {
+    padding: 1rem 1.5rem;
+  }
 }
 
 .toast-container {
@@ -27649,4 +27789,137 @@ a.disabled {
   }
 }
 
+.navbar {
+  position: relative;
+}
+.navbar .nav-link {
+  display: flex;
+  height: 4.5rem;
+  min-width: 4.5rem;
+  font-size: 1rem;
+  padding: var(--spacing-md, 0.5rem) var(--spacing-xl, 1rem);
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25rem;
+  gap: 0.25rem;
+  position: relative;
+}
+.navbar .nav-link.icon-top {
+  flex-direction: column;
+}
+.navbar .nav-link::before {
+  content: "";
+  transition: transform 0.3s ease-in-out;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 1rem);
+  height: 0.375rem;
+  border-radius: 9999px;
+}
+.navbar .nav-link:hover {
+  background-color: #F3F4F6;
+}
+.navbar .nav-link:hover::before {
+  background-color: #9DA4AE;
+}
+.navbar .nav-link:active {
+  background-color: #E5E7EB;
+}
+.navbar .nav-link:active::before {
+  background-color: #1F2A37;
+}
+.navbar .nav-link:disabled, .navbar .nav-link.disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: transparent;
+  color: #9DA4AE;
+}
+.navbar .nav-link:disabled::before, .navbar .nav-link.disabled::before {
+  background-color: transparent;
+}
+.navbar .nav-link.active {
+  background-color: #1B8354;
+  color: #FFFFFF;
+}
+.navbar .nav-link.active::before {
+  background-color: #54C08A;
+}
+.navbar .nav-link.active:hover {
+  background-color: #166A45;
+}
+.navbar .nav-link.active:hover::before {
+  background-color: #54C08A;
+}
+.navbar .nav-link.active:active {
+  background-color: #104631;
+}
+.navbar .nav-link.active:active::before {
+  background-color: #54C08A;
+}
+.navbar .nav-link.active:disabled, .navbar .nav-link.active.disabled {
+  pointer-events: none;
+  cursor: default;
+  color: #9DA4AE;
+  background-color: transparent;
+}
+.navbar .nav-link.active:disabled::before, .navbar .nav-link.active.disabled::before {
+  background-color: #E5E7EB;
+}
+.navbar .dropdown {
+  position: unset;
+}
+.navbar .dropdown-menu {
+  height: max-content;
+  transition: transform 1s ease-in-out;
+  inset: auto 0 auto auto !important;
+  padding: 2rem 5rem;
+  width: 100%;
+  border: none;
+  margin: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.navbar .dropdown-menu .dropdown-header {
+  color: #1B8354;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.navbar .dropdown-menu .dropdown-item-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.navbar .dropdown-menu.show {
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 1.5rem var(--spacing-3xl, 1.5rem);
+  align-self: stretch;
+  flex-wrap: wrap;
+}
+
+.on-primary .dropdown-menu .dropdown-item,
+.on-primary .dropdown-menu .dropdown-header, .on-primary.dropdown-menu .dropdown-item,
+.on-primary.dropdown-menu .dropdown-header {
+  color: #FFFFFF;
+}
+.on-primary .dropdown-menu .dropdown-item:hover, .on-primary.dropdown-menu .dropdown-item:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #FFFFFF;
+}
+.on-primary .dropdown-menu .dropdown-item:active, .on-primary.dropdown-menu .dropdown-item:active {
+  background-color: rgba(255, 255, 255, 0.4);
+  color: #FFFFFF;
+}
+.on-primary .dropdown-menu .dropdown-item.disabled,
+.on-primary .dropdown-menu .dropdown-item.disabled:hover,
+.on-primary .dropdown-menu .dropdown-item.disabled:active, .on-primary.dropdown-menu .dropdown-item.disabled,
+.on-primary.dropdown-menu .dropdown-item.disabled:hover,
+.on-primary.dropdown-menu .dropdown-item.disabled:active {
+  background-color: transparent;
+  color: #9DA4AE;
+}
+
 /*# sourceMappingURL=dga-ui.css.map */