willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-form/src/components/TimePicker/index.css

@@ -0,0 +1,485 @@
+.willa-time-picker {
+  display: inline-flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  color: var(--willa-input-text);
+  font-family: var(--willa-body-font);
+  font-weight: 400;
+  line-height: 1.4;
+  position: relative;
+}
+
+.willa-form-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--willa-form-scrollbar-thumb) transparent;
+  -ms-overflow-style: auto;
+}
+
+.willa-form-scrollbar::-webkit-scrollbar {
+  width: 0.36rem;
+  height: 0.36rem;
+}
+
+.willa-form-scrollbar::-webkit-scrollbar-track,
+.willa-form-scrollbar::-webkit-scrollbar-track-piece,
+.willa-form-scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.willa-form-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--willa-form-scrollbar-thumb);
+}
+
+.willa-time-picker-control {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.58rem;
+  justify-content: flex-start;
+  border: 1px solid var(--willa-input-border);
+  border-radius: 0.6rem;
+  background: var(--willa-input-bg);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: 0;
+  outline: 0;
+  text-align: left;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.willa-time-picker--clearable .willa-time-picker-control {
+  padding-inline-end: 2rem;
+}
+
+.willa-time-picker--soft .willa-time-picker-control {
+  background: var(--willa-input-soft-bg);
+}
+
+.willa-time-picker:not(.willa-time-picker--disabled)
+  .willa-time-picker-control:hover {
+  border-color: var(--willa-input-border-hover);
+  background: var(--willa-input-bg-hover);
+}
+
+.willa-time-picker-control:focus-visible,
+.willa-time-picker--open .willa-time-picker-control {
+  border-color: var(--willa-input-border-focus);
+  background: var(--willa-input-bg-focus);
+  box-shadow: 0 0 0 3px var(--willa-input-ring);
+}
+
+.willa-time-picker--invalid .willa-time-picker-control,
+.willa-time-picker--invalid.willa-time-picker--open .willa-time-picker-control,
+.willa-time-picker--invalid .willa-time-picker-control:focus-visible {
+  border-color: var(--willa-input-invalid-border);
+}
+
+.willa-time-picker--invalid.willa-time-picker--open .willa-time-picker-control,
+.willa-time-picker--invalid .willa-time-picker-control:focus-visible {
+  box-shadow: 0 0 0 3px var(--willa-input-invalid-ring);
+}
+
+.willa-time-picker--disabled {
+  color: var(--willa-input-disabled-text);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.willa-time-picker--disabled .willa-time-picker-control {
+  background: var(--willa-input-disabled-bg);
+  cursor: not-allowed;
+}
+
+.willa-time-picker--sm {
+  font-size: 0.82rem;
+}
+
+.willa-time-picker--md {
+  font-size: 0.94rem;
+}
+
+.willa-time-picker--lg {
+  font-size: 1.04rem;
+}
+
+.willa-time-picker--sm .willa-time-picker-control {
+  min-height: 2rem;
+  padding: 0.35rem 0.62rem;
+}
+
+.willa-time-picker--md .willa-time-picker-control {
+  min-height: 2.44rem;
+  padding: 0.48rem 0.76rem;
+}
+
+.willa-time-picker--lg .willa-time-picker-control {
+  min-height: 2.88rem;
+  padding: 0.62rem 0.92rem;
+}
+
+.willa-time-picker-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-time-picker-value--placeholder {
+  color: var(--willa-input-placeholder);
+}
+
+.willa-time-picker-icon {
+  width: 1em;
+  height: 1em;
+  flex: none;
+  color: var(--willa-input-addon-text);
+}
+
+.willa-time-picker-clear {
+  position: absolute;
+  inset-inline-end: 0.56rem;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.24rem;
+  height: 1.24rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--willa-input-addon-text);
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    opacity 150ms ease;
+}
+
+.willa-time-picker-clear:hover {
+  background: var(--willa-input-bg-hover);
+  color: var(--willa-input-text);
+}
+
+.willa-time-picker-clear:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-time-picker-panel {
+  position: fixed;
+  z-index: var(--willa-layer-popover, 1000);
+  display: grid;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: calc(100vw - 1rem);
+  justify-items: center;
+  gap: 0.48rem;
+  border: 1px solid var(--willa-date-picker-panel-border);
+  border-radius: 0.72rem;
+  background: var(--willa-date-picker-panel-bg);
+  box-shadow: var(--willa-date-picker-panel-shadow);
+  color: var(--willa-date-picker-text);
+  font-family: var(--willa-body-font);
+  padding: 0.5rem;
+}
+
+.willa-time-picker-panel-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.willa-time-picker-presets {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.34rem;
+  width: 100%;
+}
+
+.willa-time-picker-preset {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  border: 1px solid var(--willa-date-picker-control-border);
+  border-radius: 999px;
+  background: var(--willa-date-picker-wheel-column-bg);
+  color: var(--willa-date-picker-title);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 620;
+  line-height: 1;
+  padding: 0.34rem 0.72rem;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.willa-time-picker-preset:hover {
+  border-color: var(--willa-date-picker-control-border-hover);
+  background: var(--willa-date-picker-day-bg-hover);
+}
+
+.willa-time-picker-preset--selected,
+.willa-time-picker-preset--selected:hover {
+  border-color: var(--willa-date-picker-selected-border);
+  background: var(--willa-date-picker-selected-bg);
+  color: var(--willa-date-picker-selected-text);
+}
+
+.willa-time-picker-preset:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-time-picker-panel--wheel {
+  width: auto;
+  padding: 0.42rem;
+}
+
+.willa-time-picker-wheel {
+  display: grid;
+  gap: 0.32rem;
+  width: 100%;
+  min-width: 0;
+  justify-self: stretch;
+}
+
+.willa-time-picker-wheel-column {
+  display: grid;
+  min-width: 3.75rem;
+  gap: 0.28rem;
+  border-radius: 0.52rem;
+  border: 1px solid var(--willa-date-picker-control-border);
+  background: var(--willa-date-picker-wheel-column-bg);
+  padding: 0.22rem 0.18rem 0.18rem;
+}
+
+.willa-time-picker-wheel-label {
+  border-radius: 0.36rem;
+  background: var(--willa-date-picker-wheel-header-bg);
+  color: var(--willa-date-picker-title);
+  font-size: 0.72rem;
+  font-weight: 650;
+  line-height: 1.35;
+  padding: 0.18rem 0;
+  text-align: center;
+}
+
+.willa-time-picker-wheel-options {
+  display: grid;
+  max-height: 12.2rem;
+  gap: 0.12rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-inline-end: 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.willa-time-picker-wheel-options::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.willa-time-picker-wheel-options--scrollbar {
+  padding-inline-end: 0.65rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--willa-form-scrollbar-thumb) transparent;
+  -ms-overflow-style: auto;
+}
+
+.willa-time-picker-wheel-options--scrollbar::-webkit-scrollbar {
+  width: 0.36rem;
+  height: 0.36rem;
+}
+
+.willa-time-picker-wheel-options--scrollbar::-webkit-scrollbar-track,
+.willa-time-picker-wheel-options--scrollbar::-webkit-scrollbar-track-piece,
+.willa-time-picker-wheel-options--scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.willa-time-picker-wheel-options--scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--willa-form-scrollbar-thumb);
+}
+
+.willa-time-picker-wheel-option {
+  display: inline-flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 1.9rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 0.38rem;
+  background: transparent;
+  color: var(--willa-date-picker-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  padding: 0 0.25rem;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+.willa-time-picker-wheel-option--disabled,
+.willa-time-picker-wheel-option:disabled {
+  color: var(--willa-input-disabled-text);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.willa-time-picker-wheel-option:hover {
+  border-color: var(--willa-date-picker-control-border-hover);
+  background: var(--willa-date-picker-day-bg-hover);
+  color: var(--willa-date-picker-title);
+}
+
+.willa-time-picker-wheel-option--selected,
+.willa-time-picker-wheel-option--selected:hover {
+  border-color: var(--willa-date-picker-selected-border);
+  background: var(--willa-date-picker-selected-bg);
+  color: var(--willa-date-picker-selected-text);
+}
+
+.willa-time-picker-wheel-option:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-time-picker-periods,
+.willa-time-picker-footer {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.42rem;
+}
+
+.willa-time-picker-periods {
+  justify-content: center;
+}
+
+.willa-time-picker-period,
+.willa-time-picker-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.9rem;
+  border: 1px solid var(--willa-date-picker-control-border);
+  border-radius: 0.56rem;
+  background: var(--willa-date-picker-wheel-column-bg);
+  color: var(--willa-date-picker-title);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 620;
+  line-height: 1;
+  padding: 0.34rem 0.64rem;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.willa-time-picker-period:hover,
+.willa-time-picker-action:hover {
+  border-color: var(--willa-date-picker-control-border-hover);
+  background: var(--willa-date-picker-day-bg-hover);
+}
+
+.willa-time-picker-period--selected,
+.willa-time-picker-period--selected:hover {
+  border-color: var(--willa-date-picker-selected-border);
+  background: var(--willa-date-picker-selected-bg);
+  color: var(--willa-date-picker-selected-text);
+}
+
+.willa-time-picker-action {
+  gap: 0.24rem;
+}
+
+.willa-time-picker-action svg {
+  width: 0.88rem;
+  height: 0.88rem;
+}
+
+.willa-time-picker-action--primary {
+  border-color: var(--willa-input-border-focus);
+  background: var(--willa-input-bg-focus);
+}
+
+.willa-time-picker-footer-start,
+.willa-time-picker-footer-end {
+  display: flex;
+  align-items: center;
+  gap: 0.34rem;
+}
+
+@media (max-width: 767px) {
+  .willa-time-picker--sm .willa-time-picker-control {
+    min-height: 2.25rem;
+  }
+
+  .willa-time-picker--md .willa-time-picker-control {
+    min-height: 2.62rem;
+  }
+
+  .willa-time-picker--lg .willa-time-picker-control {
+    min-height: 3rem;
+  }
+
+  .willa-time-picker-panel {
+    gap: 0.54rem;
+    padding: 0.58rem;
+  }
+
+  .willa-time-picker-wheel {
+    gap: 0.24rem;
+  }
+
+  .willa-time-picker-wheel-options {
+    max-height: 13.5rem;
+  }
+
+  .willa-time-picker-wheel-options--scrollbar {
+    padding-inline-end: 0.5rem;
+  }
+
+  .willa-time-picker-wheel-option {
+    min-height: 2.32rem;
+    font-size: 0.86rem;
+  }
+
+  .willa-time-picker-period,
+  .willa-time-picker-action {
+    min-height: 2.2rem;
+    font-size: 0.84rem;
+  }
+}