mithril-materialized 3.2.2 → 3.3.0

package/dist/index.css

@@ -41,6 +41,7 @@
   --mm-switch-unchecked-thumb: #f5f5f5;
   --mm-switch-disabled-track: rgba(0, 0, 0, 0.12);
   --mm-switch-disabled-thumb: #bdbdbd;
+  --mm-table-striped-color: rgba(0, 0, 0, 0.05);
 }
 
 body {
@@ -96,6 +97,7 @@ body {
   --mm-switch-unchecked-thumb: #616161;
   --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
   --mm-switch-disabled-thumb: #424242;
+  --mm-table-striped-color: rgba(255, 255, 255, 0.05);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -137,6 +139,7 @@ body {
     --mm-switch-unchecked-thumb: #616161;
     --mm-switch-disabled-track: rgba(255, 255, 255, 0.12);
     --mm-switch-disabled-thumb: #424242;
+    --mm-table-striped-color: rgba(255, 255, 255, 0.05);
   }
 }
 .materialize-red {
@@ -3027,7 +3030,7 @@ table.striped tr {
   border-bottom: none;
 }
 table.striped > tbody > tr:nth-child(odd) {
-  background-color: rgba(242, 242, 242, 0.5);
+  background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
 }
 table.striped > tbody > tr > td {
   border-radius: 0;
@@ -3036,7 +3039,7 @@ table.highlight > tbody > tr {
   transition: background-color 0.25s ease;
 }
 table.highlight > tbody > tr:hover {
-  background-color: rgba(242, 242, 242, 0.5);
+  background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
 }
 table.centered thead tr th, table.centered tbody tr td {
   text-align: center;
@@ -10109,7 +10112,7 @@ nav .theme-toggle:focus {
   }
   :root:not([data-theme]) .datatable-container .datatable.striped tbody tr:nth-child(odd),
   [data-theme=dark] .datatable-container .datatable.striped tbody tr:nth-child(odd) {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
   }
   :root:not([data-theme]) .datatable-container .datatable.fixed-header thead th,
   [data-theme=dark] .datatable-container .datatable.fixed-header thead th {
@@ -11353,4 +11356,239 @@ body.dark {
     background: #f5f5f5;
     color: black;
   }
+}
+/* Rating Component
+   ========================================================================== */
+.rating {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.rating:focus-visible {
+  outline: 2px solid var(--mm-primary-color, #ee6e73);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.rating--read-only {
+  cursor: default;
+}
+.rating--read-only .rating__item {
+  cursor: default;
+}
+.rating--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.rating--disabled .rating__item {
+  cursor: not-allowed;
+}
+.rating--focused:not(.rating--read-only):not(.rating--disabled) .rating__items {
+  transform: scale(1.05);
+}
+
+.rating__items {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  transition: transform 0.15s ease;
+}
+
+.rating__item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.rating__item > .rating__item {
+  display: flex;
+}
+.rating__item:hover:not(.rating__item--disabled) {
+  transform: scale(1.1);
+}
+.rating__item--filled .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+}
+.rating__item--active .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+}
+.rating__item--preview .rating__icon--filled {
+  color: var(--mm-secondary-color, #26a69a);
+}
+.rating__item--half .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+}
+.rating__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.rating__item--disabled .rating__icon--empty {
+  color: var(--mm-text-disabled, rgba(0, 0, 0, 0.38));
+}
+.rating__item--disabled.rating__item--filled .rating__icon--filled, .rating__item--disabled.rating__item--active .rating__icon--filled {
+  color: var(--mm-primary-color, #ee6e73);
+  opacity: 0.7;
+}
+
+.rating__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s ease;
+  line-height: 1;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+.rating__icon--empty {
+  color: var(--mm-text-hint, #9e9e9e);
+}
+.rating__icon--filled {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: transparent;
+  overflow: hidden;
+  transition: color 0.15s ease;
+}
+
+.rating--small .rating__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+.rating--medium .rating__icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+.rating--large .rating__icon {
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+}
+
+.rating--compact .rating__items {
+  gap: 2px;
+}
+
+.rating--standard .rating__items {
+  gap: 4px;
+}
+
+.rating--comfortable .rating__items {
+  gap: 8px;
+}
+
+.rating__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  font-size: 12px;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 1000;
+}
+.rating__tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.8);
+}
+
+.rating__item:hover .rating__tooltip {
+  opacity: 1;
+}
+
+.rating__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (pointer: coarse) {
+  .rating__item {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+[dir=rtl] .rating__tooltip::after {
+  transform: translateX(50%);
+}
+[dir=rtl] .rating__item--half .rating__icon--filled {
+  clip-path: inset(0 0 0 50%) !important;
+}
+
+@media (prefers-contrast: high) {
+  .rating__icon--empty {
+    color: currentColor;
+  }
+  .rating__item--active .rating__icon--filled {
+    color: currentColor;
+  }
+}
+[data-theme=dark] .rating__tooltip {
+  background: rgba(255, 255, 255, 0.9);
+  color: rgba(0, 0, 0, 0.87);
+}
+[data-theme=dark] .rating__tooltip::after {
+  border-top-color: rgba(255, 255, 255, 0.9);
+}
+
+@keyframes rating-fill {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.rating__item--filled .rating__icon--filled {
+  animation: rating-fill 0.2s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rating,
+  .rating__item,
+  .rating__icon,
+  .rating__tooltip,
+  .rating__items {
+    transition: none !important;
+    animation: none !important;
+  }
+  .rating__item:hover:not(.rating__item--disabled) {
+    transform: none;
+  }
+  .rating--focused:not(.rating--read-only):not(.rating--disabled) .rating__items {
+    transform: none;
+  }
 }

package/dist/index.d.ts

@@ -42,4 +42,5 @@ export * from './treeview';
 export * from './timeline';
 export * from './masonry';
 export * from './image-list';
+export * from './rating';
 export * from './types';