sdga-ui 1.0.16 → 1.0.18

package/css/dga-ui.css

@@ -9124,8 +9124,8 @@ textarea.form-control-lg {
   --dga-nav-link-padding-x: 1rem;
   --dga-nav-link-padding-y: 0.5rem;
   --dga-nav-link-font-weight: ;
-  --dga-nav-link-color: var(--dga-link-color);
-  --dga-nav-link-hover-color: var(--dga-link-hover-color);
+  --dga-nav-link-color: var(--dga-primary);
+  --dga-nav-link-hover-color: var(--dga-primary-emphasis);
   --dga-nav-link-disabled-color: var(--dga-secondary-color);
   display: flex;
   flex-wrap: wrap;
@@ -9164,9 +9164,9 @@ textarea.form-control-lg {
 }
 
 .nav-tabs {
-  --dga-nav-tabs-border-width: var(--dga-border-width);
+  --dga-nav-tabs-border-width: 1px;
   --dga-nav-tabs-border-color: var(--dga-border-color);
-  --dga-nav-tabs-border-radius: var(--dga-border-radius);
+  --dga-nav-tabs-border-radius: 0.25rem;
   --dga-nav-tabs-link-hover-border-color: var(--dga-secondary-bg) var(--dga-secondary-bg) var(--dga-border-color);
   --dga-nav-tabs-link-active-color: var(--dga-emphasis-color);
   --dga-nav-tabs-link-active-bg: var(--dga-body-bg);
@@ -9196,7 +9196,7 @@ textarea.form-control-lg {
 }
 
 .nav-pills {
-  --dga-nav-pills-border-radius: var(--dga-border-radius);
+  --dga-nav-pills-border-radius: 0.25rem;
   --dga-nav-pills-link-active-color: #FFFFFF;
   --dga-nav-pills-link-active-bg: #1B8354;
 }
@@ -28268,6 +28268,295 @@ html {
   color: #9DA4AE;
 }
 
+.navbar .nav-tabs {
+  --dga-nav-tabs-link-active-color: #166A45;
+  --dga-nav-tabs-link-active-bg: #FFFFFF;
+  --dga-nav-tabs-link-active-border-color: #E5E7EB #E5E7EB #FFFFFF;
+  border-bottom: 1px solid #E5E7EB;
+}
+.navbar .nav-tabs .nav-link {
+  font-weight: 500;
+  color: #4D5761;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  margin-bottom: -1px;
+  padding: 0.75rem 1rem;
+}
+.navbar .nav-tabs .nav-link:hover {
+  color: #1B8354;
+  background-color: #F9FAFB;
+  border-color: #E5E7EB #E5E7EB #E5E7EB;
+}
+.navbar .nav-tabs .nav-link.active {
+  color: #166A45;
+  background-color: #FFFFFF;
+  border-color: #E5E7EB #E5E7EB transparent;
+}
+.navbar .nav-tabs .nav-link.disabled {
+  color: #9DA4AE;
+}
+.navbar .nav-pills .nav-link {
+  font-weight: 500;
+  color: #4D5761;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+.navbar .nav-pills .nav-link.active {
+  background-color: #1B8354;
+  color: #FFFFFF;
+}
+.navbar .nav-pills .nav-link:hover:not(.active) {
+  background-color: #F3F4F6;
+  color: #111927;
+}
+.navbar .flex-column.nav-tabs {
+  border-bottom: 0;
+  border-inline-end: 1px solid #E5E7EB;
+}
+.navbar .flex-column.nav-tabs .nav-link {
+  border-radius: 0.25rem 0 0 0.25rem;
+  margin-bottom: 0;
+  margin-inline-end: -1px;
+}
+.navbar .flex-column.nav-tabs .nav-link.active {
+  border-color: #E5E7EB transparent #E5E7EB #E5E7EB;
+}
+[dir=rtl] .navbar .flex-column.nav-tabs {
+  border-inline-end: 0;
+  border-inline-start: 1px solid #E5E7EB;
+}
+[dir=rtl] .navbar .flex-column.nav-tabs .nav-link {
+  border-radius: 0 0.25rem 0.25rem 0;
+  margin-inline-end: 0;
+  margin-inline-start: -1px;
+}
+[dir=rtl] .navbar .flex-column.nav-tabs .nav-link.active {
+  border-color: #E5E7EB #E5E7EB #E5E7EB transparent;
+}
+
+.nav {
+  padding: 0;
+}
+
+.nav-tabs {
+  --dga-nav-tabs-border-width: 0;
+  --dga-nav-tabs-border-radius: 0;
+  --dga-nav-tabs-link-active-bg: transparent;
+  position: relative;
+  border-bottom: 3px solid transparent;
+  gap: 0.5rem;
+}
+.nav-tabs::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -3px;
+  width: 100%;
+  height: 3px;
+  background-color: #D2D6DB;
+  border-radius: 9999px;
+  pointer-events: none;
+}
+.nav-tabs .nav-link {
+  font-family: "IBM Plex Sans Arabic";
+  font-weight: 400;
+  color: #384250;
+  border: none;
+  border-radius: 0.25rem;
+  position: relative;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.nav-tabs .nav-link:hover:not(.disabled):not(.active), .nav-tabs .nav-link.pseudo-hover:not(.active) {
+  background-color: #F3F4F6;
+  color: #384250;
+}
+.nav-tabs .nav-link:active:not(.disabled):not(.active), .nav-tabs .nav-link.pseudo-active:not(.active) {
+  background-color: #E5E7EB;
+}
+.nav-tabs .nav-link.active {
+  color: #161616;
+  font-weight: 700;
+  background-color: transparent;
+}
+.nav-tabs .nav-link.disabled {
+  color: #9DA4AE;
+  background-color: transparent;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.nav-tabs.nav-tabs:not(.flex-column) .nav-link::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 1rem;
+  inset-inline-end: 1rem;
+  bottom: 0;
+  height: 3px;
+  background-color: transparent;
+  border-radius: 9999px;
+  z-index: 1;
+  transition: background-color 0.2s ease;
+  margin-bottom: -2.75px;
+}
+.nav-tabs.nav-tabs.flush .nav-link::before {
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+
+.nav-tabs.nav-tabs:not(.flex-column) .nav-link.active::before {
+  background-color: #1B8354;
+}
+.nav-tabs.nav-tabs:not(.flex-column) .nav-link:hover:not(.active):not(.disabled)::before, .nav-tabs.nav-tabs:not(.flex-column) .nav-link.pseudo-hover:not(.active):not(.disabled)::before, .nav-tabs.nav-tabs:not(.flex-column) .nav-link:active:not(.active):not(.disabled)::before, .nav-tabs.nav-tabs:not(.flex-column) .nav-link.pseudo-active:not(.active):not(.disabled)::before {
+  background-color: #161616;
+}
+.nav-tabs.nav-tabs:not(.flex-column) .nav-link.disabled.active::before {
+  background-color: #9DA4AE;
+}
+
+.nav-tabs.nav-tabs:not(.flex-column).nav-lg .nav-link {
+  height: 3.25rem !important;
+  padding: 1rem 1rem !important;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.nav-tabs.nav-tabs:not(.flex-column).nav-md .nav-link {
+  height: 2.75rem !important;
+  padding: 0.75rem 1rem !important;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+.nav-tabs.nav-tabs:not(.flex-column).nav-sm .nav-link {
+  height: 2.25rem !important;
+  padding: 0.5rem 0.75rem !important;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.nav.flex-column.nav-tabs {
+  border-bottom: 0;
+}
+.nav.flex-column.nav-tabs::before {
+  display: none;
+}
+.nav.flex-column.nav-tabs {
+  border-right: 0;
+  gap: 0;
+}
+.nav.flex-column.nav-tabs .nav-link {
+  width: 100%;
+  justify-content: flex-start;
+  border: none;
+  border-bottom: none;
+  border-radius: 0.25rem;
+  margin-bottom: 0.25rem;
+  font-weight: 400;
+  color: #384250;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.nav.flex-column.nav-tabs .nav-link::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  width: 3px;
+  background-color: transparent;
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
+}
+.nav.flex-column.nav-tabs .nav-link i,
+.nav.flex-column.nav-tabs .nav-link img,
+.nav.flex-column.nav-tabs .nav-link svg {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.nav.flex-column.nav-tabs .nav-link:focus, .nav.flex-column.nav-tabs .nav-link:focus-visible {
+  outline: none;
+  border: none;
+}
+.nav.flex-column.nav-tabs .nav-link:hover:not(.disabled):not(.active), .nav.flex-column.nav-tabs .nav-link.pseudo-hover:not(.active) {
+  background-color: #F3F4F6;
+  color: #384250;
+}
+.nav.flex-column.nav-tabs .nav-link:hover:not(.disabled):not(.active)::before, .nav.flex-column.nav-tabs .nav-link.pseudo-hover:not(.active)::before {
+  background-color: #161616;
+}
+.nav.flex-column.nav-tabs .nav-link:active:not(.disabled):not(.active), .nav.flex-column.nav-tabs .nav-link.pseudo-active:not(.active) {
+  background-color: #E5E7EB;
+  color: #161616;
+}
+.nav.flex-column.nav-tabs .nav-link:active:not(.disabled):not(.active)::before, .nav.flex-column.nav-tabs .nav-link.pseudo-active:not(.active)::before {
+  background-color: #161616;
+}
+.nav.flex-column.nav-tabs .nav-link.active {
+  background-color: transparent;
+  color: #161616;
+  font-weight: 600;
+  position: relative;
+}
+.nav.flex-column.nav-tabs .nav-link.active::before {
+  background-color: #1B8354;
+}
+.nav.flex-column.nav-tabs .nav-link.active:hover:not(.disabled), .nav.flex-column.nav-tabs .nav-link.active.pseudo-hover {
+  background-color: transparent;
+}
+.nav.flex-column.nav-tabs .nav-link.active:active:not(.disabled), .nav.flex-column.nav-tabs .nav-link.active.pseudo-active {
+  background-color: transparent;
+}
+.nav.flex-column.nav-tabs .nav-link.disabled, .nav.flex-column.nav-tabs .nav-link:disabled {
+  color: #9DA4AE;
+  background-color: transparent !important;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.nav.flex-column.nav-tabs .nav-link.disabled.active::before, .nav.flex-column.nav-tabs .nav-link:disabled.active::before {
+  background-color: #9DA4AE;
+}
+.nav.flex-column.nav-tabs .nav-link.disabled:not(.active)::before, .nav.flex-column.nav-tabs .nav-link:disabled:not(.active)::before {
+  background-color: transparent;
+}
+.nav.flex-column.nav-tabs.nav-lg .nav-link {
+  min-height: 2.5rem;
+  padding: 0.5rem 0.5rem;
+  font-size: 1rem;
+}
+.nav.flex-column.nav-tabs.nav-lg .nav-link.active {
+  font-weight: 600;
+}
+.nav.flex-column.nav-tabs.nav-md .nav-link {
+  min-height: 2rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+}
+.nav.flex-column.nav-tabs.nav-md .nav-link.active {
+  font-weight: 600;
+}
+.nav.flex-column.nav-tabs.nav-sm .nav-link {
+  min-height: 1.5rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875rem;
+}
+.nav.flex-column.nav-tabs.nav-sm .nav-link.active {
+  font-weight: 500;
+}
+
 .progress-indicator {
   position: relative;
 }