@clusterenvision/ui-scss 1.94.3

package/src/components/form-controls/_select.scss

@@ -0,0 +1,242 @@
+
+
+@use "../../abstracts/functions" as fn;
+@use "../../abstracts/mixins"    as mx;
+
+.select,
+.ce-dropdown {
+  position: relative;
+  width: 100%;
+  display: inline-block;
+
+  
+  &__toggle,
+  &__trigger {
+    width: 100%;
+    padding: var(--ce-select-padding, 0.625rem 1rem);
+    min-height: 44px;
+    background-color: fn.color(white);
+    color: fn.color(dark);
+    border: 1px solid fn.color(muted);
+    border-radius: fn.radius(sm);
+    font-size: 0.9375rem;
+    line-height: 1.5;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ce-select-gap, var(--ce-spacing-sm, 0.5rem));
+    transition: all 0.2s ease;
+    text-align: left;
+
+    &:hover {
+      border-color: fn.color(primary);
+    }
+
+    &:focus,
+    &:focus-visible {
+      border-color: fn.color(primary);
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(fn.color(primary), 0.1);
+    }
+  }
+
+  &__label {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-weight: 500;
+    font-size: 0.9375rem;
+    line-height: 1.5;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: fn.radius(pill);
+    font-size: 0.85rem;
+    color: var(--ce-control-handle-fg, #fff);
+    background-color: var(--ce-control-handle-bg, fn.color(primary));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+    pointer-events: none;
+    box-shadow: var(--ce-select-icon-shadow, 0 6px 12px rgba(16, 24, 40, 0.12));
+  }
+
+  &__toggle[aria-expanded="true"] &__icon,
+  &__trigger[aria-expanded="true"] &__icon {
+    transform: rotate(180deg);
+  }
+
+  
+  &__menu {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    left: 0;
+    right: 0;
+    background-color: fn.color(white);
+    border: 1px solid fn.color(muted);
+    border-radius: fn.radius(sm);
+    box-shadow: var(--ce-select-menu-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 1000;
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(-0.5rem);
+    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+
+    &.is-visible {
+      opacity: 1 !important;
+      visibility: visible !important;
+      pointer-events: auto !important;
+      transform: translateY(0) !important;
+    }
+  }
+
+  
+  &--open &__menu {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+    transform: translateY(0) !important;
+  }
+
+  
+  &__toggle[aria-expanded="true"] ~ &__menu {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+    transform: translateY(0) !important;
+  }
+
+  
+  &:focus-within &__menu {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+    transform: translateY(0) !important;
+  }
+
+  
+  &:hover &__menu {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+    transform: translateY(0) !important;
+  }
+
+  
+  &__item {
+    padding: var(--ce-select-item-padding, 0.75rem 1rem);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    display: flex;
+    align-items: center;
+    gap: var(--ce-select-item-gap, 0.75rem);
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    font-size: 0.9375rem;
+    color: fn.color(dark);
+
+    &:hover {
+      background-color: fn.color(light);
+    }
+
+    &:focus,
+    &:focus-visible {
+      background-color: rgba(fn.color(primary), 0.1);
+      outline: none;
+    }
+
+    &--selected {
+      background-color: rgba(fn.color(primary), 0.1);
+      color: fn.color(primary);
+      font-weight: 500;
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__item-icon {
+    font-size: 1.25em;
+    flex-shrink: 0;
+  }
+
+  &__item-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-label {
+    display: block;
+    font-weight: 500;
+  }
+
+  &__item-description {
+    display: block;
+    font-size: 0.8125rem;
+    color: fn.color(muted);
+    margin-top: 0.125rem;
+  }
+
+  &--error {
+    .select__trigger,
+    .select__toggle,
+    .ce-dropdown__trigger,
+    .ce-dropdown__toggle {
+      border-color: fn.color(danger);
+    }
+  }
+
+  &:disabled {
+    .select__trigger,
+    .select__toggle,
+    .ce-dropdown__trigger,
+    .ce-dropdown__toggle {
+      background-color: fn.color(light);
+      color: fn.color(muted);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+}
+
+
+select.select {
+  width: 100%;
+  padding: fn.space(sm) fn.space(md);
+  background-color: fn.color(white);
+  color: fn.color(dark);
+  border: 1px solid fn.color(muted);
+  border-radius: fn.radius(sm);
+  appearance: none;
+  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" width="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right fn.space(md) center;
+  background-size: 1rem;
+  @extend %transition !optional;
+
+  &:focus {
+    border-color: fn.color(primary);
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(fn.color(primary), 0.2);
+  }
+
+  &:disabled {
+    background-color: fn.color(light);
+    color: fn.color(muted);
+    cursor: not-allowed;
+  }
+}

package/src/components/form-controls/_textarea.scss

@@ -0,0 +1,45 @@
+// components/form-controls/_textarea.scss
+
+@use "../../abstracts/functions" as fn;
+@use "../../abstracts/mixins"    as mx;
+
+.textarea {
+  display: var(--ce-textarea-display, block);
+  width: var(--ce-textarea-width, 100%);
+  padding: var(--ce-textarea-padding, #{fn.space(sm)} #{fn.space(md)});
+  font-size: var(--ce-textarea-size, 1rem);
+  color: var(--ce-textarea-color, #{fn.color(dark)});
+  background-color: var(--ce-textarea-bg, #{fn.color(white)});
+  border: var(--ce-textarea-border, 1px solid #{fn.color(muted)});
+  border-radius: var(--ce-textarea-radius, #{fn.radius(sm)});
+  resize: var(--ce-textarea-resize, vertical);
+  min-height: var(--ce-textarea-min-height, 100px);
+  @extend %transition !optional;
+
+
+  &:focus {
+    border-color: var(--ce-textarea-focus-border, #{fn.color(primary)});
+    outline: var(--ce-textarea-focus-outline, none);
+    box-shadow: var(
+      --ce-textarea-focus-shadow,
+      0 0 0 3px rgba(fn.color(primary), 0.2)
+    );
+  }
+
+  &:disabled {
+    background-color: var(--ce-textarea-disabled-bg, #{fn.color(light)});
+    color: var(--ce-textarea-disabled-color, #{fn.color(muted)});
+    cursor: var(--ce-textarea-disabled-cursor, not-allowed);
+  }
+
+  &--error {
+    border-color: var(--ce-textarea-error-border, #{fn.color(danger)});
+
+    &:focus {
+      box-shadow: var(
+        --ce-textarea-error-shadow,
+        0 0 0 3px rgba(fn.color(danger), 0.2)
+      );
+    }
+  }
+}

package/src/components/form-controls/_toggle.scss

@@ -0,0 +1,47 @@
+// components/form-controls/_toggle.scss
+
+@use "../../abstracts/functions" as fn;
+
+.toggle {
+  position: relative;
+  width: 2.5rem;
+  height: 1.4rem;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: fn.color(muted);
+    border-radius: fn.radius(pill);
+    transition: 0.4s;
+    cursor: pointer;
+
+    &::before {
+      content: "";
+      position: absolute;
+      height: 1rem;
+      width: 1rem;
+      left: 4px;
+      bottom: 4px;
+      background-color: fn.color(white);
+      transition: 0.4s;
+      border-radius: var(--ce-toggle-thumb-radius, var(--ce-radius-circle, 50%));
+    }
+  }
+
+  input:checked + .slider {
+    background-color: fn.color(primary);
+
+    &::before {
+      transform: translateX(1.1rem);
+    }
+  }
+}

package/src/components/navigation/_breadcrumbs.scss

@@ -0,0 +1,41 @@
+
+
+@use "../../abstracts/functions" as fn;
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: var(--ce-breadcrumbs-gap, var(--ce-spacing-sm, 0.5rem));
+  font-size: 0.95rem;
+  color: var(--theme-breadcrumbs-fg, fn.color(muted));
+  padding: fn.space(xs) 0;
+  list-style: none;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    color: var(--theme-breadcrumbs-item, fn.color(dark));
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover,
+    &:focus-visible {
+      color: var(--theme-breadcrumbs-hover, fn.color(primary));
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+    &.active {
+      color: var(--theme-breadcrumbs-active, fn.color(primary));
+      font-weight: 600;
+      cursor: default;
+    }
+  }
+
+  &__separator {
+    color: var(--theme-breadcrumbs-separator, fn.color(muted));
+    margin: var(--ce-breadcrumbs-separator-margin, 0 0.25rem);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}

package/src/components/navigation/_menu.scss

@@ -0,0 +1,75 @@
+// components/navigation/_menu.scss
+
+@use "../../abstracts/functions" as fn;
+
+.menu {
+  display: var(--ce-menu-display, flex);
+  flex-direction: var(--ce-menu-direction, column);
+  min-width: var(--ce-menu-min-width, 180px);
+  background-color: var(--ce-menu-bg, var(--theme-menu-bg, #{fn.color(white)}));
+  color: var(--ce-menu-color, var(--theme-menu-fg, #{fn.color(dark)}));
+  border-radius: var(--ce-menu-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-menu-shadow, #{fn.shadow(sm)});
+  border-width: var(--ce-menu-border-width, 1px);
+  border-style: var(--ce-menu-border-style, solid);
+  border-color: var(
+    --ce-menu-border,
+    var(--theme-menu-border, #{fn.color(muted)})
+  );
+  padding: var(--ce-menu-padding, #{fn.space(xs)} 0);
+  font-size: var(--ce-menu-size, 1rem);
+  z-index: var(--ce-menu-z, #{fn.z(menu)});
+
+  &__item {
+    display: var(--ce-menu-item-display, flex);
+    align-items: var(--ce-menu-item-align, center);
+    padding: var(--ce-menu-item-padding, #{fn.space(xs)} #{fn.space(md)});
+    cursor: var(--ce-menu-item-cursor, pointer);
+    color: var(
+      --ce-menu-item-color,
+      var(--theme-menu-item-fg, #{fn.color(dark)})
+    );
+    background: var(--ce-menu-item-bg, none);
+    border: var(--ce-menu-item-border, none);
+    font-size: var(--ce-menu-item-size, inherit);
+    transition: var(--ce-menu-item-transition, background-color 0.2s, color 0.2s);
+    outline: var(--ce-menu-item-outline, none);
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(
+        --ce-menu-item-hover-bg,
+        var(--theme-menu-item-hover, #{fn.color(primary)})
+      );
+      color: var(
+        --ce-menu-item-hover-color,
+        var(--theme-menu-item-hover-fg, #{fn.color(white)})
+      );
+      outline: var(
+        --ce-menu-item-focus-outline,
+        2px solid var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-menu-item-focus-offset, 2px);
+    }
+    &.active {
+      background-color: var(
+        --ce-menu-item-active-bg,
+        var(--theme-menu-item-active, #{fn.color(primary)})
+      );
+      color: var(
+        --ce-menu-item-active-color,
+        var(--theme-menu-item-active-fg, #{fn.color(white)})
+      );
+    }
+  }
+
+  &__divider {
+    height: var(--ce-menu-divider-height, 1px);
+    background-color: var(
+      --ce-menu-divider-bg,
+      var(--theme-menu-divider, #{fn.color(muted)})
+    );
+    margin: var(--ce-menu-divider-margin, #{fn.space(xs)} 0);
+    border: var(--ce-menu-divider-border, none);
+  }
+}

package/src/components/navigation/_navbar.scss

@@ -0,0 +1,79 @@
+// components/navigation/_navbar.scss
+
+@use "../../abstracts/functions" as fn;
+@use "../../abstracts/mixins"    as mx;
+
+.navbar {
+  display: var(--ce-navbar-display, flex);
+  align-items: var(--ce-navbar-align, center);
+  justify-content: var(--ce-navbar-justify, space-between);
+  padding: var(--ce-navbar-padding, #{fn.space(md)} #{fn.space(xl)});
+  background-color: var(--ce-navbar-bg, #{fn.color(primary)});
+  color: var(--ce-navbar-color, #{fn.color(white)});
+  z-index: var(--ce-navbar-z, #{fn.z(sticky)});
+
+  .navbar__brand {
+    font-weight: var(--ce-navbar-brand-weight, bold);
+    font-size: var(--ce-navbar-brand-size, 1.25rem);
+    color: var(--ce-navbar-brand-color, #{fn.color(white)});
+    text-decoration: var(--ce-navbar-brand-decoration, none);
+  }
+
+  .navbar__links {
+    display: var(--ce-navbar-links-display, flex);
+    gap: var(--ce-navbar-links-gap, #{fn.space(md)});
+
+    a {
+      color: var(--ce-navbar-link-color, #{fn.color(white)});
+      text-decoration: var(--ce-navbar-link-decoration, none);
+      font-weight: var(--ce-navbar-link-weight, 500);
+
+      &:hover {
+        text-decoration: var(--ce-navbar-link-hover-decoration, underline);
+      }
+    }
+  }
+
+  .navbar__menu-toggle {
+    display: var(--ce-navbar-toggle-display, none);
+    background: var(--ce-navbar-toggle-bg, transparent);
+    border: var(--ce-navbar-toggle-border, none);
+    color: var(--ce-navbar-toggle-color, #{fn.color(white)});
+    font-size: var(--ce-navbar-toggle-size, 1.5rem);
+
+    @include mx.media-breakpoint-up(sm) {
+      display: var(--ce-navbar-toggle-desktop-display, none);
+    }
+  }
+
+  @include mx.media-breakpoint-up(sm) {
+    .navbar__links {
+      display: var(--ce-navbar-links-desktop-display, flex);
+    }
+  }
+
+  @media (max-width: 767px) {
+    flex-direction: var(--ce-navbar-mobile-direction, column);
+    align-items: var(--ce-navbar-mobile-align, flex-start);
+
+    .navbar__links {
+      display: var(--ce-navbar-mobile-links-display, none);
+      flex-direction: var(--ce-navbar-mobile-links-direction, column);
+      width: var(--ce-navbar-mobile-links-width, 100%);
+
+      &.open {
+        display: var(--ce-navbar-mobile-links-open-display, flex);
+      }
+
+      a {
+        padding: var(--ce-navbar-mobile-link-padding, #{fn.space(sm)} 0);
+        border-bottom-width: var(--ce-navbar-mobile-link-border-width, 1px);
+        border-bottom-style: var(--ce-navbar-mobile-link-border-style, solid);
+        border-bottom-color: var(
+          --ce-navbar-mobile-link-border,
+          rgba(255, 255, 255, 0.2)
+        );
+      }
+    }
+  }
+}

package/src/components/navigation/_pagination.scss

@@ -0,0 +1,85 @@
+// components/navigation/_pagination.scss
+
+@use "../../abstracts/functions" as fn;
+
+.pagination {
+  display: var(--ce-pagination-display, flex);
+  align-items: var(--ce-pagination-align, center);
+  gap: var(--ce-pagination-gap, 0.5rem);
+  list-style: var(--ce-pagination-list-style, none);
+  padding: var(--ce-pagination-padding, 0);
+  margin: var(--ce-pagination-margin, #{fn.space(md)} 0);
+
+  &__item {
+    display: var(--ce-pagination-item-display, inline-flex);
+    align-items: var(--ce-pagination-item-align, center);
+    justify-content: var(--ce-pagination-item-justify, center);
+    min-width: var(--ce-pagination-item-min-width, 2rem);
+    height: var(--ce-pagination-item-height, 2rem);
+    border-radius: var(--ce-pagination-item-radius, #{fn.radius(sm)});
+    background-color: var(
+      --ce-pagination-item-bg,
+      var(--theme-pagination-bg, #{fn.color(light)})
+    );
+    color: var(
+      --ce-pagination-item-fg,
+      var(--theme-pagination-fg, #{fn.color(dark)})
+    );
+    font-size: var(--ce-pagination-item-size, 1rem);
+    font-weight: var(--ce-pagination-item-weight, 500);
+    cursor: var(--ce-pagination-item-cursor, pointer);
+    transition: var(
+      --ce-pagination-item-transition,
+      background-color 0.2s, color 0.2s
+    );
+    border: var(
+      --ce-pagination-item-border,
+      1px solid var(--theme-pagination-border, #{fn.color(muted)})
+    );
+
+    &.active {
+      background-color: var(
+        --ce-pagination-item-active-bg,
+        var(--theme-pagination-active-bg, #{fn.color(primary)})
+      );
+      color: var(
+        --ce-pagination-item-active-fg,
+        var(--theme-pagination-active-fg, #{fn.color(white)})
+      );
+      border-color: var(
+        --ce-pagination-item-active-border,
+        var(--theme-pagination-active-border, #{fn.color(primary)})
+      );
+    }
+    &:hover {
+      background-color: var(
+        --ce-pagination-item-hover-bg,
+        var(--theme-pagination-hover-bg, #{fn.color(primary)})
+      );
+      color: var(
+        --ce-pagination-item-hover-fg,
+        var(--theme-pagination-hover-fg, #{fn.color(white)})
+      );
+    }
+    &:focus-visible {
+      outline: var(
+        --ce-pagination-item-focus-outline,
+        2px solid var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-pagination-item-focus-offset, 2px);
+    }
+  }
+
+  &__ellipsis {
+    min-width: var(--ce-pagination-ellipsis-min-width, 2rem);
+    height: var(--ce-pagination-ellipsis-height, 2rem);
+    display: var(--ce-pagination-ellipsis-display, flex);
+    align-items: var(--ce-pagination-ellipsis-align, center);
+    justify-content: var(--ce-pagination-ellipsis-justify, center);
+    color: var(
+      --ce-pagination-ellipsis-color,
+      var(--theme-pagination-ellipsis, #{fn.color(muted)})
+    );
+    font-size: var(--ce-pagination-ellipsis-size, 1rem);
+  }
+}

package/src/components/navigation/_sidebar.scss

@@ -0,0 +1,44 @@
+// components/navigation/_sidebar.scss
+
+@use "../../abstracts/functions" as fn;
+
+.sidebar {
+  width: 250px;
+  background-color: fn.color(dark);
+  color: fn.color(white);
+  height: 100vh;
+  padding: fn.space(lg);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  .sidebar__header {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-bottom: fn.space(xl);
+  }
+
+  .sidebar__nav {
+    display: flex;
+    flex-direction: column;
+    gap: fn.space(sm);
+
+    a {
+      color: fn.color(white);
+      text-decoration: none;
+      padding: fn.space(sm);
+      border-radius: fn.radius(sm);
+
+      &:hover {
+        background-color: fn.color(primary);
+      }
+
+      &.active {
+        background-color: fn.color(primary);
+        font-weight: bold;
+      }
+    }
+  }
+}