@mantine/dates/cjs/components/TimePicker/TimePicker.module.cjs.map

Calendars, date and time pickers based on Mantine components

{"version":3,"file":"TimePicker.module.cjs","names":[],"sources":["../../../src/components/TimePicker/TimePicker.module.css"],"sourcesContent":[".fieldsRoot {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow: hidden;\n\n  @mixin where-rtl {\n    flex-direction: row-reverse;\n  }\n}\n\n.fieldsGroup {\n  display: flex;\n  align-items: center;\n  height: calc(var(--input-height) - 15px);\n}\n\n.controlsList {\n  display: flex;\n  flex-direction: column;\n}\n\n.controlsListGroup {\n  display: flex;\n  gap: 4px;\n}\n\n.dropdown {\n  padding: 4px;\n}\n\n.control {\n  text-align: center;\n  min-width: 2.5em;\n  width: max-content;\n  height: 2em;\n  border-radius: var(--mantine-radius-default);\n  font-size: var(--control-font-size, var(--mantine-font-size-sm));\n\n  &:where([data-active]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n  }\n\n  @mixin hover {\n    &:where(:not([data-active])) {\n      color: var(--mantine-color-bright);\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-1);\n      }\n    }\n  }\n}\n\n.presetControl {\n  text-align: center;\n  height: 2em;\n  padding-inline: 0.5em;\n  border-radius: var(--mantine-radius-default);\n  font-size: var(--control-font-size, var(--mantine-font-size-sm));\n\n  &:where([data-active]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n  }\n\n  @mixin hover {\n    &:where(:not([data-active])) {\n      color: var(--mantine-color-bright);\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-1);\n      }\n    }\n  }\n}\n\n.presetsGroup {\n  & + & {\n    margin-top: var(--mantine-spacing-sm);\n  }\n}\n\n.presetsGroupLabel {\n  margin-bottom: 4px;\n  color: var(--mantine-color-dimmed);\n  font-size: calc(var(--control-font-size, var(--mantine-font-size-sm)) - 2px);\n  font-weight: var(--mantine-font-weight-medium);\n  display: flex;\n  align-items: center;\n  padding-inline-start: 7px;\n\n  &::after {\n    content: '';\n    width: 100%;\n    height: 1px;\n    flex: 1;\n    margin-inline-start: var(--mantine-spacing-xs);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n}\n\n.field {\n  width: calc(2ch + 0.3em);\n  caret-color: transparent;\n  font-variant-numeric: tabular-nums;\n  position: relative;\n  height: 100%;\n  line-height: 1;\n  padding-inline: 0.15em;\n  border: 0;\n  text-align: center;\n  text-align-last: center;\n  background-color: transparent;\n  color: var(--input-color);\n  border-radius: 2px;\n  appearance: none;\n\n  &:where([data-am-pm]) {\n    width: auto;\n  }\n\n  &:where(:disabled) {\n    cursor: not-allowed;\n  }\n\n  &::selection {\n    background-color: transparent;\n  }\n\n  &::placeholder {\n    opacity: 1;\n    color: inherit;\n  }\n\n  &:focus {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n    outline: 0;\n\n    &::placeholder {\n      color: var(--mantine-color-white);\n    }\n  }\n}\n"],"mappings":""}