@dodlhuat/basix 1.1.1 → 1.2.1

package/css/style.scss

@@ -1,39 +1,51 @@
-@use "reset";
-@use "parameters" as *;
-@use "colors";
-@use "defaults";
-@use "grid";
-@use "typography";
-@use "card";
-@use "table";
-@use "alert";
-@use "form";
-@use "icons";
-@use "scrollbar";
-@use "button";
-@use "modal";
-@use "placeholder";
-@use "progress";
-@use "spinner";
-@use "toast";
-@use "push-menu";
-@use "checkbox";
-@use "radiobutton";
-@use "switch";
-@use "tooltip";
-@use "chips";
-@use "tree";
-@use "datepicker";
-@use "flyout-menu";
-@use "tabs";
-@use "accordion";
-@use "timeline";
-@use "chat-bubbles";
-@use "carousel";
-@use "code-viewer";
-@use "file-uploader";
-@use "gallery";
-@use "dropdown";
-@use "virtual-dropdown";
-@use "timepicker";
-@use "range-slider";
+@use "reset";
+@use "parameters" as *;
+@use "colors";
+@use "defaults";
+@use "grid";
+@use "typography";
+@use "card";
+@use "table";
+@use "alert";
+@use "form";
+@use "icons";
+@use "scrollbar";
+@use "button";
+@use "modal";
+@use "popover";
+@use "placeholder";
+@use "progress";
+@use "spinner";
+@use "toast";
+@use "push-menu";
+@use "checkbox";
+@use "radiobutton";
+@use "switch";
+@use "tooltip";
+@use "breadcrumb";
+@use "chips";
+@use "badge";
+@use "stepper";
+@use "tree";
+@use "datepicker";
+@use "flyout-menu";
+@use "tabs";
+@use "accordion";
+@use "timeline";
+@use "chat-bubbles";
+@use "carousel";
+@use "code-viewer";
+@use "file-uploader";
+@use "gallery";
+@use "dropdown";
+@use "virtual-dropdown";
+@use "timepicker";
+@use "range-slider";
+@use "editor";
+@use "bottom-sheet";
+@use "context-menu";
+@use "calendar";
+@use "group-picker";
+@use "chart";
+@use "sidebar-nav";
+@use "docs";

package/css/table.scss

@@ -1,199 +1,199 @@
-@use "properties";
-@use "parameters" as *;
-
-/* Controls */
-.table-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: $spacing;
-  flex-wrap: wrap;
-  gap: calc($spacing * 0.75);
-}
-
-/* Table Styles */
-.table-wrapper {
-  overflow-x: auto;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
-  -webkit-overflow-scrolling: touch;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  text-align: left;
-  font-size: 0.875rem;
-}
-
-thead {
-  background-color: var(--primary-light);
-  border-bottom: 1px solid var(--divider);
-}
-
-th {
-  padding: calc($spacing * 0.75) $spacing;
-  font-weight: 600;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--secondary-text);
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  transition: background 160ms ease;
-
-  &:hover {
-    background-color: var(--hover);
-  }
-}
-
-th.sort-asc::after,
-th.sort-desc::after {
-  font-size: 0.65em;
-  margin-left: 0.35em;
-  opacity: 0.7;
-}
-
-th.sort-asc::after {
-  content: " \25B2";
-}
-
-th.sort-desc::after {
-  content: " \25BC";
-}
-
-td {
-  padding: calc($spacing * 0.75) $spacing;
-  border-bottom: 1px solid var(--divider);
-  color: var(--primary-text);
-}
-
-tr:last-child td {
-  border-bottom: none;
-}
-
-tbody tr {
-  transition: background 160ms ease;
-
-  &:hover {
-    background-color: var(--hover);
-  }
-}
-
-/* Pagination */
-.pagination {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: $spacing;
-  padding-top: $spacing;
-  border-top: 1px solid var(--divider);
-  flex-wrap: wrap;
-  gap: calc($spacing * 0.75);
-}
-
-.pagination-info {
-  font-size: 0.875rem;
-  color: var(--secondary-text);
-}
-
-.pagination-buttons {
-  display: flex;
-  gap: 4px;
-}
-
-.page-btn {
-  padding: calc($spacing * 0.4) calc($spacing * 0.75);
-  border: 1px solid var(--divider);
-  background: transparent;
-  color: var(--primary-text);
-  border-radius: $border-radius;
-  cursor: pointer;
-  font-size: 0.875rem;
-  transition: background 160ms ease,
-              border-color 160ms ease;
-
-  &:hover:not(:disabled) {
-    background: var(--hover);
-    border-color: var(--secondary-text);
-  }
-}
-
-.page-btn.active {
-  background-color: var(--accent-color);
-  color: var(--accent-color-text);
-  border-color: var(--accent-color);
-
-  &:hover:not(:disabled) {
-    background-color: var(--accent-color-lighten);
-    border-color: var(--accent-color-lighten);
-  }
-}
-
-.page-btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* Mobile Responsive Styles */
-@media (max-width: 768px) {
-  .table-controls {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  table,
-  thead,
-  tbody,
-  th,
-  td,
-  tr {
-    display: block;
-  }
-
-  thead {
-    display: none;
-  }
-
-  tbody tr {
-    border: 1px solid var(--divider);
-    border-radius: $border-radius;
-    margin-bottom: calc($spacing * 0.75);
-    padding: calc($spacing * 0.75);
-    background: var(--background);
-
-    &:hover {
-      background-color: var(--hover);
-    }
-  }
-
-  td {
-    border: none;
-    padding: calc($spacing * 0.5) 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    text-align: right;
-    border-bottom: 1px solid var(--divider);
-  }
-
-  td:last-child {
-    border-bottom: none;
-  }
-
-  td::before {
-    content: attr(data-label);
-    font-weight: 600;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-    color: var(--secondary-text);
-    text-align: left;
-    margin-right: calc($spacing * 0.75);
-  }
-
-  .table-wrapper {
-    border: none;
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+/* Controls */
+.table-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $spacing;
+  flex-wrap: wrap;
+  gap: calc($spacing * 0.75);
+}
+
+/* Table Styles */
+.table-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  -webkit-overflow-scrolling: touch;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+thead {
+  background-color: var(--primary-light);
+  border-bottom: 1px solid var(--divider);
+}
+
+th {
+  padding: calc($spacing * 0.75) $spacing;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--secondary-text);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: background 160ms ease;
+
+  &:hover {
+    background-color: var(--hover);
+  }
+}
+
+th.sort-asc::after,
+th.sort-desc::after {
+  font-size: 0.65em;
+  margin-left: 0.35em;
+  opacity: 0.7;
+}
+
+th.sort-asc::after {
+  content: " \25B2";
+}
+
+th.sort-desc::after {
+  content: " \25BC";
+}
+
+td {
+  padding: calc($spacing * 0.75) $spacing;
+  border-bottom: 1px solid var(--divider);
+  color: var(--primary-text);
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+tbody tr {
+  transition: background 160ms ease;
+
+  &:hover {
+    background-color: var(--hover);
+  }
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: $spacing;
+  padding-top: $spacing;
+  border-top: 1px solid var(--divider);
+  flex-wrap: wrap;
+  gap: calc($spacing * 0.75);
+}
+
+.pagination-info {
+  font-size: 0.875rem;
+  color: var(--secondary-text);
+}
+
+.pagination-buttons {
+  display: flex;
+  gap: 4px;
+}
+
+.page-btn {
+  padding: calc($spacing * 0.4) calc($spacing * 0.75);
+  border: 1px solid var(--divider);
+  background: transparent;
+  color: var(--primary-text);
+  border-radius: $border-radius;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 160ms ease,
+              border-color 160ms ease;
+
+  &:hover:not(:disabled) {
+    background: var(--hover);
+    border-color: var(--secondary-text);
+  }
+}
+
+.page-btn.active {
+  background-color: var(--accent-color);
+  color: var(--accent-color-text);
+  border-color: var(--accent-color);
+
+  &:hover:not(:disabled) {
+    background-color: var(--accent-color-lighten);
+    border-color: var(--accent-color-lighten);
+  }
+}
+
+.page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Mobile Responsive Styles */
+@media (max-width: 768px) {
+  .table-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  table,
+  thead,
+  tbody,
+  th,
+  td,
+  tr {
+    display: block;
+  }
+
+  thead {
+    display: none;
+  }
+
+  tbody tr {
+    border: 1px solid var(--divider);
+    border-radius: $border-radius;
+    margin-bottom: calc($spacing * 0.75);
+    padding: calc($spacing * 0.75);
+    background: var(--background);
+
+    &:hover {
+      background-color: var(--hover);
+    }
+  }
+
+  td {
+    border: none;
+    padding: calc($spacing * 0.5) 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: right;
+    border-bottom: 1px solid var(--divider);
+  }
+
+  td:last-child {
+    border-bottom: none;
+  }
+
+  td::before {
+    content: attr(data-label);
+    font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--secondary-text);
+    text-align: left;
+    margin-right: calc($spacing * 0.75);
+  }
+
+  .table-wrapper {
+    border: none;
+  }
+}