zenkit-css 1.0.0

package/scss/components/_tabs.scss

@@ -0,0 +1,239 @@
+// ========================================
+// ZenKit - Tabs & Nav Tabs
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Base Nav
+// ----------------------------------------
+.nav {
+  --nav-link-padding-x: 1rem;
+  --nav-link-padding-y: 0.5rem;
+  --nav-link-font-size: var(--text-base);
+  --nav-link-font-weight: #{$font-weight-normal};
+  --nav-link-color: var(--link);
+  --nav-link-hover-color: var(--link-hover);
+  --nav-link-disabled-color: var(--text-muted);
+
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+// ----------------------------------------
+// Nav Link
+// ----------------------------------------
+.nav-link {
+  display: block;
+  padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
+  font-size: var(--nav-link-font-size);
+  font-weight: var(--nav-link-font-weight);
+  color: var(--nav-link-color);
+  text-decoration: none;
+  background: none;
+  border: 0;
+  transition: color $transition-fast ease-in-out,
+              background-color $transition-fast ease-in-out,
+              border-color $transition-fast ease-in-out;
+
+  &:hover,
+  &:focus {
+    color: var(--nav-link-hover-color);
+  }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem #{rgba($primary, 0.25)};
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--nav-link-disabled-color);
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+// ----------------------------------------
+// Nav Tabs
+// ----------------------------------------
+.nav-tabs {
+  --nav-tabs-border-width: #{$border-width};
+  --nav-tabs-border-color: var(--border);
+  --nav-tabs-border-radius: var(--radius);
+  --nav-tabs-link-hover-border-color: var(--gray-200) var(--gray-200) var(--border);
+  --nav-tabs-link-active-color: var(--text);
+  --nav-tabs-link-active-bg: var(--bg);
+  --nav-tabs-link-active-border-color: var(--border) var(--border) var(--bg);
+
+  border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
+
+  .nav-link {
+    margin-bottom: calc(-1 * var(--nav-tabs-border-width));
+    border: var(--nav-tabs-border-width) solid transparent;
+    border-top-left-radius: var(--nav-tabs-border-radius);
+    border-top-right-radius: var(--nav-tabs-border-radius);
+
+    &:hover,
+    &:focus {
+      isolation: isolate;
+      border-color: var(--nav-tabs-link-hover-border-color);
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: var(--nav-tabs-link-active-color);
+    background-color: var(--nav-tabs-link-active-bg);
+    border-color: var(--nav-tabs-link-active-border-color);
+  }
+
+  .dropdown-menu {
+    margin-top: calc(-1 * var(--nav-tabs-border-width));
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+// ----------------------------------------
+// Nav Pills
+// ----------------------------------------
+.nav-pills {
+  --nav-pills-border-radius: var(--radius);
+  --nav-pills-link-active-color: var(--white);
+  --nav-pills-link-active-bg: var(--primary);
+
+  .nav-link {
+    border-radius: var(--nav-pills-border-radius);
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    color: var(--nav-pills-link-active-color);
+    background-color: var(--nav-pills-link-active-bg);
+  }
+}
+
+// ----------------------------------------
+// Nav Underline
+// ----------------------------------------
+.nav-underline {
+  --nav-underline-gap: 1rem;
+  --nav-underline-border-width: 0.125rem;
+  --nav-underline-link-active-color: var(--primary);
+
+  gap: var(--nav-underline-gap);
+  border-bottom: 0;
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+    border-bottom: var(--nav-underline-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentColor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-semibold;
+    color: var(--nav-underline-link-active-color);
+    border-bottom-color: currentColor;
+  }
+}
+
+// ----------------------------------------
+// Nav Fill & Justify
+// ----------------------------------------
+.nav-fill {
+  > .nav-link,
+  .nav-item {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
+
+.nav-justified {
+  > .nav-link,
+  .nav-item {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+}
+
+// ----------------------------------------
+// Tab Content
+// ----------------------------------------
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+
+  > .active {
+    display: block;
+  }
+}
+
+// ----------------------------------------
+// Tab Pane Fade
+// ----------------------------------------
+.tab-pane.fade {
+  opacity: 0;
+  transition: opacity $transition-fast linear;
+}
+
+.tab-pane.fade.show {
+  opacity: 1;
+}
+
+// ----------------------------------------
+// Vertical Tabs
+// ----------------------------------------
+.nav-tabs-vertical {
+  flex-direction: column;
+  border-bottom: 0;
+  border-right: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
+
+  .nav-link {
+    margin-right: calc(-1 * var(--nav-tabs-border-width));
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-left-radius: var(--nav-tabs-border-radius);
+    border-bottom-left-radius: var(--nav-tabs-border-radius);
+
+    &:hover,
+    &:focus {
+      border-color: var(--gray-200) var(--border) var(--gray-200) var(--gray-200);
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-color: var(--border) var(--bg) var(--border) var(--border);
+  }
+}
+
+.nav-pills-vertical {
+  flex-direction: column;
+}
+
+// ----------------------------------------
+// Nav Sizes
+// ----------------------------------------
+.nav-sm {
+  --nav-link-padding-x: 0.75rem;
+  --nav-link-padding-y: 0.375rem;
+  --nav-link-font-size: var(--text-sm);
+}
+
+.nav-lg {
+  --nav-link-padding-x: 1.25rem;
+  --nav-link-padding-y: 0.625rem;
+  --nav-link-font-size: var(--text-lg);
+}

package/scss/components/_tag.scss

@@ -0,0 +1,317 @@
+// ========================================
+// ZenKit - Tags
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Base Tag
+// ----------------------------------------
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: var(--text-xs);
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  color: var(--gray-700);
+  background-color: var(--gray-100);
+  border: $border-width solid transparent;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  transition: all var(--transition-fast) ease-in-out;
+}
+
+// ----------------------------------------
+// Tag Sizes
+// ----------------------------------------
+.tag-sm {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+}
+
+.tag-lg {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-sm);
+}
+
+// ----------------------------------------
+// Tag Colors
+// ----------------------------------------
+.tag-primary {
+  color: var(--primary-700);
+  background-color: var(--primary-50);
+}
+
+.tag-secondary {
+  color: var(--gray-700);
+  background-color: var(--gray-100);
+}
+
+.tag-success {
+  color: $success-dark;
+  background-color: $success-light;
+}
+
+.tag-danger {
+  color: $danger-dark;
+  background-color: $danger-light;
+}
+
+.tag-warning {
+  color: $warning-dark;
+  background-color: $warning-light;
+}
+
+.tag-info {
+  color: $info-dark;
+  background-color: $info-light;
+}
+
+.tag-dark {
+  color: var(--white);
+  background-color: var(--gray-800);
+}
+
+.tag-light {
+  color: var(--gray-700);
+  background-color: var(--gray-50);
+  border-color: var(--gray-200);
+}
+
+// ----------------------------------------
+// Solid Tags
+// ----------------------------------------
+.tag-solid-primary {
+  color: var(--white);
+  background-color: var(--primary);
+}
+
+.tag-solid-success {
+  color: var(--white);
+  background-color: $success;
+}
+
+.tag-solid-danger {
+  color: var(--white);
+  background-color: $danger;
+}
+
+.tag-solid-warning {
+  color: var(--gray-900);
+  background-color: $warning;
+}
+
+.tag-solid-info {
+  color: var(--white);
+  background-color: $info;
+}
+
+// ----------------------------------------
+// Outlined Tags
+// ----------------------------------------
+.tag-outline-primary {
+  color: var(--primary);
+  background-color: transparent;
+  border-color: var(--primary);
+}
+
+.tag-outline-success {
+  color: $success;
+  background-color: transparent;
+  border-color: $success;
+}
+
+.tag-outline-danger {
+  color: $danger;
+  background-color: transparent;
+  border-color: $danger;
+}
+
+.tag-outline-warning {
+  color: $warning-dark;
+  background-color: transparent;
+  border-color: $warning;
+}
+
+.tag-outline-info {
+  color: $info;
+  background-color: transparent;
+  border-color: $info;
+}
+
+.tag-outline-dark {
+  color: var(--gray-800);
+  background-color: transparent;
+  border-color: var(--gray-800);
+}
+
+// ----------------------------------------
+// Rounded Tags (Pill)
+// ----------------------------------------
+.tag-rounded {
+  border-radius: var(--radius-full);
+}
+
+// ----------------------------------------
+// Tag with Icon
+// ----------------------------------------
+.tag-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ----------------------------------------
+// Closable Tag
+// ----------------------------------------
+.tag-closable {
+  padding-right: 0.25rem;
+}
+
+.tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  margin-left: 0.125rem;
+  padding: 0;
+  color: currentColor;
+  opacity: 0.6;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: opacity var(--transition-fast) ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+}
+
+// ----------------------------------------
+// Tag Group
+// ----------------------------------------
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag-group-sm {
+  gap: 0.25rem;
+}
+
+// ----------------------------------------
+// Clickable/Interactive Tag
+// ----------------------------------------
+.tag-clickable {
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+// ----------------------------------------
+// Checkable Tag
+// ----------------------------------------
+.tag-checkable {
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    border-color: var(--primary);
+  }
+}
+
+.tag-checkable-checked {
+  color: var(--white);
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+// ----------------------------------------
+// Tag with Dot/Status
+// ----------------------------------------
+.tag-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+
+  &::before {
+    content: "";
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+}
+
+.tag-dot-success::before {
+  background-color: $success;
+}
+
+.tag-dot-danger::before {
+  background-color: $danger;
+}
+
+.tag-dot-warning::before {
+  background-color: $warning;
+}
+
+.tag-dot-info::before {
+  background-color: $info;
+}
+
+// ----------------------------------------
+// Borderless Tag
+// ----------------------------------------
+.tag-borderless {
+  border-color: transparent;
+  background-color: transparent;
+  padding: 0.25rem 0;
+}
+
+// ----------------------------------------
+// Tag with Avatar
+// ----------------------------------------
+.tag-avatar {
+  padding-left: 0.125rem;
+
+  img {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+.tag-lg.tag-avatar img {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.tag-sm.tag-avatar img {
+  width: 1rem;
+  height: 1rem;
+}