@dodlhuat/basix 1.0.0 → 1.1.0

package/css/timepicker.scss

@@ -1,72 +1,151 @@
-.timespan-picker {
-  display: flex;
-  align-items: flex-end;
-  gap: 1rem;
-  padding: 1rem;
-  background: #f8f9fa;
-  border-radius: 8px;
-  max-width: 400px;
-}
-
-.timespan-field {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.timespan-field label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #495057;
-}
-
-.timespan-field input[type="time"] {
-  padding: 0.75rem;
-  font-size: 1rem;
-  border: 1px solid #ced4da;
-  border-radius: 6px;
-  background: white;
-  transition: border-color 0.2s ease;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.timespan-field input[type="time"]:focus {
-  outline: none;
-  border-color: #0066cc;
-  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
-}
-
-.timespan-field input[type="time"]:invalid {
-  border-color: #dc3545;
-}
-
-.timespan-separator {
-  font-size: 1.5rem;
-  color: #6c757d;
-  padding-bottom: 0.75rem;
-  user-select: none;
-}
-
-@media (max-width: 480px) {
-  .timespan-picker {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-    padding: 1rem 0.75rem;
-  }
-
-  .timespan-separator {
-    text-align: center;
-    padding: 0;
-    transform: rotate(90deg);
-  }
-
-  .timespan-field input[type="time"] {
-    font-size: 1.125rem;
-    padding: 1rem;
-    min-height: 48px;
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+.timespan-picker {
+  display: flex;
+  align-items: stretch;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  border-radius: $border-radius;
+  overflow: hidden;
+  box-shadow: $shadow;
+  transition: border-color 0.2s ease;
+
+  &.is-error {
+    border-color: var(--error);
+  }
+}
+
+.timespan-field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: calc($spacing * 0.75) $spacing;
+  min-width: 0;
+
+  label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--secondary-text);
+    margin-bottom: calc($spacing / 4);
+    pointer-events: none;
+    display: block;
+  }
+
+  input[type="time"] {
+    // reset form.scss defaults
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+    min-height: unset;
+    border-radius: 0;
+    // own styles
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--primary-text);
+    font-family: inherit;
+    width: 100%;
+    outline: none;
+    cursor: pointer;
+    transition: color 0.15s ease;
+
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+
+    &::-webkit-datetime-edit {
+      padding: 0;
+    }
+
+    &::-webkit-datetime-edit-fields-wrapper {
+      padding: 0;
+    }
+  }
+}
+
+.timespan-picker.is-error .timespan-field-end input[type="time"] {
+  color: var(--error);
+}
+
+.timespan-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 calc($spacing * 0.75);
+  border-left: 1px solid var(--divider);
+  border-right: 1px solid var(--divider);
+  background: var(--background);
+  min-width: 4.5rem;
+  gap: calc($spacing / 5);
+  flex-shrink: 0;
+}
+
+.timespan-arrow {
+  font-size: 1rem;
+  color: var(--secondary-text);
+  line-height: 1;
+}
+
+.timespan-duration {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--accent-color);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  line-height: 1;
+  min-height: 0.75rem;
+
+  .timespan-picker.is-error & {
+    color: var(--error);
+  }
+}
+
+// 24h position bar
+.timespan-bar {
+  margin-top: calc($spacing / 2);
+  height: 3px;
+  background: var(--divider);
+  border-radius: 99px;
+  overflow: hidden;
+  position: relative;
+}
+
+.timespan-bar-fill {
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background: var(--accent-color);
+  border-radius: inherit;
+  transition: left 0.3s ease, width 0.3s ease;
+
+  .timespan-picker.is-error ~ .timespan-bar & {
+    background: var(--error);
+  }
+}
+
+@media (max-width: 480px) {
+  .timespan-picker {
+    flex-direction: column;
+  }
+
+  .timespan-center {
+    flex-direction: row;
+    justify-content: space-between;
+    border-left: none;
+    border-right: none;
+    border-top: 1px solid var(--divider);
+    border-bottom: 1px solid var(--divider);
+    padding: calc($spacing / 2) $spacing;
+    min-width: unset;
+  }
+
+  .timespan-field input[type="time"] {
+    font-size: 2rem;
+  }
+}

package/css/toast.scss

@@ -2,80 +2,81 @@
 @use "parameters" as *;
 
 .toast {
-  display: inline-block;
-  box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
-  background: var(--background);
-  border-radius: $border-radius;
-  padding: calc($spacing / 2);
-  min-width: 250px;
+  display: flex;
+  flex-direction: column;
   position: fixed;
-  left: -200px;
   bottom: $spacing;
-  z-index: 1;
-  transition: all 150ms ease-in;
+  left: $spacing;
+  right: $spacing;
+  max-width: 380px;
+  margin: 0 auto;
+  background: var(--background);
+  border-radius: calc($border-radius * 2);
+  box-shadow: $shadow, 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: calc($spacing * 0.75) $spacing;
+  z-index: 1000;
+  overflow: hidden;
+  transform: translateY(calc(100% + $spacing * 2));
+  opacity: 0;
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
+              opacity 200ms ease;
 
   .bar {
-    display: block;
-    height: 4px;
-    width: 100%;
-    background: var(--accent-color);
     position: absolute;
-    left: 0;
     top: 0;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    background: var(--accent-color);
+    border-radius: 0 0 2px 2px;
     transition: width 250ms linear;
   }
 
   &.show {
-    left: $spacing;
+    transform: translateY(0);
+    opacity: 1;
   }
 
-  &.success {
-    color: inherit;
-
-    .bar {
-      background: var(--success);
-    }
+  &.success .bar {
+    background: var(--success);
   }
 
-  &.warning {
-    color: inherit;
-
-    .bar {
-      background: var(--warning);
-    }
-
+  &.warning .bar {
+    background: var(--warning);
   }
 
-  &.error {
-    color: inherit;
-
-    .bar {
-      background: var(--error);
-    }
+  &.error .bar {
+    background: var(--error);
   }
 
   .close {
     cursor: pointer;
-    float: right;
-    z-index: 999;
-    position: relative;
+    position: absolute;
+    top: calc($spacing * 0.75);
+    right: calc($spacing * 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: $border-radius;
+    transition: background 150ms ease;
+
+    &:hover {
+      background: var(--secondary-background);
+    }
   }
 
   .header {
-    position: relative;
-    width: 100%;
-    padding-right: calc($spacing / 2);
-    left: calc(-1 * $spacing / 2);
-    padding-left: calc($spacing / 2);
-    padding-bottom: calc($spacing / 2);
-    border-bottom: 1px solid var(--divider);
-    font-weight: bold;
+    padding-right: 1.5rem;
+    padding-bottom: calc($spacing / 3);
+    font-weight: 700;
   }
 
   .content {
-    padding-top: calc($spacing / 2);
     margin: 0;
+    color: var(--secondary-text);
+    font-size: 0.875rem;
+    line-height: 1.5;
   }
 }

package/css/tooltip.scss

@@ -1,122 +1,112 @@
-@use "properties";
-@use "parameters" as *;
-
-.tooltip {
-  position: fixed;
-  z-index: 10000;
-  background: var(--disabled);
-  color: var(--secondary-text);
-  border-radius: $border-radius;
-  padding: $spacing calc($spacing * 1.5);
-  max-width: 300px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  box-shadow: $shadow;
-}
-
-.tooltip.visible {
-  opacity: 1;
-}
-
-.tooltip-content {
-  position: relative;
-}
-
-/* Arrow styles */
-.tooltip::before {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border: calc($spacing * 0.5) solid transparent;
-}
-
-.tooltip[data-position="top"]::before {
-  bottom: calc(($spacing / 2) * -1);
-  left: 50%;
-  transform: translateX(-50%);
-  border-top-color: var(--disabled);
-  border-bottom: 0;
-}
-
-.tooltip[data-position="bottom"]::before {
-  top: calc(($spacing / 2) * -1);
-  left: 50%;
-  transform: translateX(-50%);
-  border-bottom-color: var(--disabled);
-  border-top: 0;
-}
-
-.tooltip[data-position="left"]::before {
-  right: calc(($spacing / 2) * -1);
-  top: 50%;
-  transform: translateY(-50%);
-  border-left-color: var(--disabled);
-  border-right: 0;
-}
-
-.tooltip[data-position="right"]::before {
-  left: calc(($spacing / 2) * -1);
-  top: 50%;
-  transform: translateY(-50%);
-  border-right-color: var(--disabled);
-  border-left: 0;
-}
-
-.tooltip-content code {
-  padding: 2px 6px;
-  font-family: "Courier New", monospace;
-  font-size: 0.9em;
-}
-
-.tooltip.tooltip-info {
-  background: var(--accent-color);
-}
-
-.tooltip.tooltip-info::before {
-  border-top-color: var(--accent-color);
-  border-bottom-color: var(--accent-color);
-  border-left-color: var(--accent-color);
-  border-right-color: var(--accent-color);
-}
-
-.tooltip.tooltip-success {
-  background: var(--success);
-}
-
-.tooltip.tooltip-success::before {
-  border-top-color: var(--success);
-  border-bottom-color: var(--success);
-  border-left-color: var(--success);
-  border-right-color: var(--success);
-}
-
-.tooltip.tooltip-warning {
-  background: var(--warning);
-  color: var(--disabled);
-}
-
-.tooltip.tooltip-warning::before {
-  border-top-color: var(--warning);
-  border-bottom-color: var(--warning);
-  border-left-color: var(--warning);
-  border-right-color: var(--warning);
-}
-
-.tooltip.tooltip-error {
-  background: var(--error);
-}
-
-.tooltip.tooltip-error::before {
-  border-top-color: var(--error);
-  border-bottom-color: var(--error);
-  border-left-color: var(--error);
-  border-right-color: var(--error);
-}
-
-/* Large tooltip variant */
-.tooltip.tooltip-large {
-  max-width: 500px;
-  padding: $spacing calc($spacing * 1.5);
-}
+@use "properties";
+@use "parameters" as *;
+
+.tooltip {
+  --tooltip-bg: var(--divider);
+  position: fixed;
+  z-index: 10000;
+  background: var(--divider);
+  color: var(--primary-text);
+  border-radius: $border-radius;
+  padding: 0.4rem 0.7rem;
+  max-width: 300px;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  word-break: break-word;
+  opacity: 0;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+
+  &[data-position="top"]    { transform: translateY(4px); }
+  &[data-position="bottom"] { transform: translateY(-4px); }
+  &[data-position="left"]   { transform: translateX(4px); }
+  &[data-position="right"]  { transform: translateX(-4px); }
+
+  &.visible {
+    opacity: 1;
+    transform: translate(0);
+  }
+
+  // ── Arrow ─────────────────────────────────────────────────
+  &::before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+  }
+
+  &[data-position="top"]::before {
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: var(--tooltip-bg);
+    border-bottom: none;
+  }
+
+  &[data-position="bottom"]::before {
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: var(--tooltip-bg);
+    border-top: none;
+  }
+
+  &[data-position="left"]::before {
+    right: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left-color: var(--tooltip-bg);
+    border-right: none;
+  }
+
+  &[data-position="right"]::before {
+    left: -5px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-right-color: var(--tooltip-bg);
+    border-left: none;
+  }
+
+  // ── Variants ──────────────────────────────────────────────
+  &.tooltip-info {
+    --tooltip-bg: var(--accent-color);
+    background: var(--accent-color);
+    color: var(--accent-color-text);
+  }
+
+  &.tooltip-success {
+    --tooltip-bg: var(--success);
+    background: var(--success);
+    color: var(--background);
+  }
+
+  &.tooltip-warning {
+    --tooltip-bg: var(--warning);
+    background: var(--warning);
+    color: var(--background);
+  }
+
+  &.tooltip-error {
+    --tooltip-bg: var(--error);
+    background: var(--error);
+    color: var(--background);
+  }
+
+  // ── Size variant ──────────────────────────────────────────
+  &.tooltip-large {
+    max-width: 500px;
+    font-size: 0.875rem;
+    padding: 0.6rem 0.9rem;
+  }
+
+  // ── Code inside tooltip ───────────────────────────────────
+  code {
+    padding: 1px 5px;
+    font-family: "Courier New", monospace;
+    font-size: 0.9em;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: calc($border-radius / 2);
+  }
+}