@smwb/ui-styles 1.0.0

package/less/components/table/table.less

@@ -0,0 +1,192 @@
+.smwb-table {
+  // table-layout: fixed;
+  width: 100%;
+  white-space: nowrap;
+  border-collapse: collapse;
+  overflow: scroll;
+
+  &.smwb-hovered {
+    tbody {
+      tr:hover {
+        background: var(--smui-onSurfaceHover);
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__error {
+    margin-bottom: @tableToolbarMarginBottom;
+  }
+  &__container {
+    display: flex;
+    overflow-x: auto;
+    border: 1px solid var(--smui-tableBorderColor);
+    border-radius: 4px;
+    flex-direction: column;
+    &.smwb-withPagination {
+      border-radius: 4px 4px 0 0;
+    }
+  }
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--smui-surfaceBackground);
+    &_loading {
+      pointer-events: none;
+    }
+  }
+
+  &__cell {
+    position: relative;
+    .lineClamp(1);
+    padding: 0 @tableCellPaddingX;
+    height: 52px;
+    vertical-align: middle;
+    overflow: hidden;
+    word-wrap: break-word;
+    &.smwb-head-cell {
+      height: 56px;
+      text-align: left;
+      font-weight: 500;
+      &.smwb-sortable {
+        cursor: pointer;
+      }
+      .smwb-head-cell__content {
+        align-items: center;
+        display: inline-flex;
+        vertical-align: middle;
+        gap: @tableActionsGap;
+        user-select: none;
+        input {
+          font-weight: 500;
+        }
+      }
+      &.smwb-align_left {
+        text-align: left;
+      }
+      &.smwb-align_center {
+        text-align: center;
+      }
+      &.smwb-align_right {
+        text-align: right;
+      }
+      .smwb-head-cell__icon {
+        flex-shrink: 0;
+        display: none;
+        transition: all 0.15s ease-in-out;
+        fill: var(--smui-primaryTextColor);
+      }
+      &.smwb-sorted_asc {
+        .smwb-head-cell__icon {
+          display: inline-flex;
+          transform: rotate(0);
+        }
+      }
+      &.smwb-sorted_desc {
+        .smwb-head-cell__icon {
+          display: inline-flex;
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  &__head {
+    .smwb-table__row {
+      border-top: none;
+    }
+  }
+
+  &__row {
+    border-top: 1px solid var(--smui-tableBorderColor);
+  }
+
+  &.smwb-dense {
+    .smwb-table__cell {
+      padding: 0 @tableCellPaddingX;
+      height: 36px;
+      vertical-align: middle;
+      &.smwb-head-cell {
+        height: 40px;
+      }
+    }
+
+    .smwb-table__row {
+      border-top: 1px solid var(--smui-tableBorderColor);
+    }
+  }
+
+  &__loader {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    &__row {
+      height: 100px;
+      position: relative;
+    }
+  }
+}
+
+.smwb-scrollbar {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--smui-scrollThumbColor);
+    border-radius: 999px;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.lineClamp(@val) {
+  -webkit-line-clamp: @val;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.smwb-head-cell_sortable .smwb-head-cell__content {
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+.smwb-head-cell_sortable .smwb-head-cell__content:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+}
+
+.smwb-table__row_selected {
+  background-color: var(--smui-onSurfaceHover);
+}
+
+.smwb-table__caption {
+  caption-side: top;
+  text-align: left;
+  padding: 8px 12px;
+  color: var(--smui-onSurfaceVariant);
+}
+
+.smwb-table_sticky-header {
+  overflow: visible;
+}
+
+.smwb-table__container:has(.smwb-table_sticky-header) {
+  overflow: visible;
+}
+
+.smwb-table_sticky-header .smwb-table__head .smwb-table__cell {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--smui-surfaceBackground);
+}

package/less/components/table/tablePagination/tablePagination.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../../_prelude.less";
+@import "./tablePagination.less";

package/less/components/table/tablePagination/tablePagination.less

@@ -0,0 +1,62 @@
+.smwb-table__pagination {
+  display: flex;
+  width: 100%;
+  height: 52px;
+  border: 1px solid var(--smui-tableBorderColor);
+  border-top: 0;
+  border-radius: 0 0 4px 4px;
+  justify-content: flex-end;
+  padding: 0 @tablePaginationPaddingX;
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 2px 3px 0px rgba(0, 0, 0, 0.12);
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: @tablePaginationOuterGap;
+  }
+  &__buttons {
+    display: flex;
+    align-items: center;
+    gap: @tablePaginationControlsGap;
+  }
+  &__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    &:disabled {
+      pointer-events: none;
+      opacity: 0.38;
+    }
+    .smwb-icon__wrapper {
+      color: var(--smui-primaryTextColor);
+      transition: all 0.15s ease-in-out;
+    }
+  }
+  &__rows {
+    display: flex;
+    gap: @tablePaginationRowsGap;
+    align-items: center;
+  }
+  &__select {
+    width: 100px;
+    border: 1px solid var(--smui-tableBorderColor);
+    border-radius: 4px;
+    padding: @tablePaginationSelectPaddingY 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+    background-color: var(--smui-surfaceBackground);
+    color: var(--smui-primaryTextColor);
+    &:focus {
+      border: 1px solid var(--smui-primaryColor);
+    }
+    .smwb-select-option {
+      background-color: var(--smui-surfaceBackground);
+      &.smwb-selected {
+        display: none;
+      }
+    }
+  }
+  &__current-count {
+    word-spacing: 3px;
+  }
+}

package/less/components/tabs/tab/tab.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../../_prelude.less";
+@import "./tab.less";

package/less/components/tabs/tab/tab.less

@@ -0,0 +1,114 @@
+.smwb-tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 @tabPaddingX;
+  min-height: 48px;
+  border: none;
+  outline: none;
+  background: none;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 2.25rem;
+  font-weight: 600;
+  letter-spacing: 0.0892857143em;
+  text-decoration: none;
+  text-transform: uppercase;
+  -webkit-appearance: none;
+  z-index: 1;
+
+  &:before {
+    position: absolute;
+    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    content: "";
+    transition: opacity 15ms linear, background-color 15ms linear;
+    z-index: 1;
+    background-color: @tabBgColor;
+  }
+
+  &:hover {
+    &:before {
+      opacity: @tabOpacityHover;
+    }
+  }
+
+  &:focus {
+    &:before {
+      opacity: @tabOpacityFocus;
+      transition-duration: 75ms;
+    }
+  }
+
+  &__content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: inherit;
+  }
+
+  &__text-label {
+    display: inline-block;
+    line-height: 1;
+    color: var(--smui-tabColorDefault);
+    transition: color 0.15s linear;
+    z-index: 2;
+  }
+
+  &__icon {
+    color: var(--smui-tabIconColor);
+    fill: currentColor;
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    transition: color 0.15s linear;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--active &__text-label,
+  &--active &__icon {
+    transition-delay: 0.1s;
+    color: var(--smui-primaryColor);
+  }
+
+  &--stacked {
+    height: 72px;
+  }
+
+  &--stacked &__text-label {
+    padding-top: @tabIconPaddingTop;
+    padding-bottom: @tabIconPaddingBottom;
+  }
+
+  &--stacked &__content {
+    flex-direction: column;
+  }
+
+  &:not(&--stacked) &__icon + &__text-label {
+    padding-left: @tabLabelPaddingLeft;
+  }
+
+  &__ripple-child {
+    color: @tabBgColor;
+  }
+}
+
+.smwb-tab--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}

package/less/components/tabs/tabs.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./tabs.less";

package/less/components/tabs/tabs.less

@@ -0,0 +1,44 @@
+.smwb-tabs {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+
+  &__scroller {
+    position: relative;
+    display: inline-block;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &--scrollable {
+      overflow: auto hidden;
+      // Hide dimensionless scrollbar on macOS
+      scrollbar-width: none; // Firefox
+
+      &::-webkit-scrollbar {
+        display: none; // Safari + Chrome
+      }
+    }
+  }
+
+  &__scroll-area {
+    display: flex;
+  }
+
+  &__indicator {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &__indicator-content {
+    width: 100%;
+    height: inherit;
+    background-color: var(--smui-primaryColor);
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}

package/less/components/textField/textField.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./textField.less";