UNPKG

@govbr-ds/core

Version:

Padrão Digital de Governo

1 lines 20.1 kB
{"version":3,"file":"components/datetimepicker/datetimepicker.min.css","mappings":"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","sources":["webpack://core/./src/components/datetimepicker/_datetimepicker.scss","webpack://core/./src/components/datetimepicker/_mixins.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_input.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/components/input/_mixins.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.flatpickr-calendar {\n @include flatpicker-configs;\n}\n\n.#{$prefix}datetimepicker {\n @include datetimepicker-configs;\n}\n","// Dependências\n@import \"../input/mixins\";\n\n// Mixins\n@mixin datetimepicker-configs {\n @include datetimepicker-dark-mode;\n @include datetimepicker-disabled;\n}\n\n@mixin datetimepicker-dark-mode {\n @include input-dark-mode;\n}\n\n@mixin datetimepicker-disabled {\n input[disabled] {\n cursor: not-allowed;\n }\n}\n\n// stylelint-disable selector-class-pattern\n@mixin flatpicker-configs {\n @include flatpicker-tokens;\n @include flatpicker-default;\n @include flatpicker-months;\n @include flatpicker-days;\n @include flatpicker-timepicker;\n}\n\n@mixin flatpicker-tokens {\n --flatpicker-padding: var(--spacing-scale-2x);\n --datetimepicker-day-size: 24px;\n --datetimepicker-arrows: 32px;\n}\n\n@mixin flatpicker-default {\n box-shadow: var(--surface-shadow-md);\n // Remover a seta do dropdown\n &.arrowTop::before,\n &.arrowTop::after {\n border-color: transparent;\n }\n\n &.open {\n z-index: var(--z-index-layer-2);\n }\n}\n\n@mixin flatpicker-months {\n .flatpickr-months {\n align-items: center;\n display: flex;\n padding: var(--flatpicker-padding) var(--flatpicker-padding) 0;\n // Setas de navegação\n .flatpickr-prev-month,\n .flatpickr-next-month {\n height: auto;\n padding: 0;\n position: static;\n\n &.flatpickr-disabled {\n @include disabled;\n display: block;\n }\n }\n // Barra de mês\n .flatpickr-month {\n flex: 1;\n height: auto;\n overflow: visible;\n }\n // Container do mês\n .flatpickr-current-month {\n display: flex;\n height: auto;\n padding: 0 var(--flatpicker-padding);\n position: static;\n width: 100%;\n }\n // Select do mês\n .flatpickr-monthDropdown-months {\n border-radius: var(--surface-rounder-sm);\n color: var(--interactive);\n font-size: var(--font-size-scale-up-01);\n font-weight: var(--font-weight-semi-bold);\n margin: 0;\n padding: 0;\n\n .flatpickr-monthDropdown-month {\n color: var(--color);\n }\n\n &:hover {\n background: transparent;\n }\n }\n // Input do ano\n .numInputWrapper {\n flex: 1;\n margin-left: var(--flatpicker-padding);\n width: auto;\n\n input.cur-year {\n border: var(--surface-width-sm) solid var(--border-color);\n border-radius: var(--surface-rounder-sm);\n color: var(--color);\n font-size: var(--font-size-scale-base);\n font-weight: var(--font-weight-semi-bold);\n padding: 0 var(--spacing-scale-base);\n }\n\n span.arrowUp,\n span.arrowDown {\n display: none;\n }\n }\n }\n}\n\n@mixin flatpicker-days {\n // Semanas\n .flatpickr-weekdaycontainer {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n padding: 0 var(--flatpicker-padding);\n }\n\n span.flatpickr-weekday {\n color: var(--color);\n font-size: var(--font-size);\n font-weight: var(--font-weight-medium);\n }\n // Dias\n .dayContainer {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n padding: 0 var(--flatpicker-padding) var(--flatpicker-padding);\n }\n\n .flatpickr-day {\n color: var(--interactive);\n font-weight: var(--font-weight-semi-bold);\n height: var(--datetimepicker-day-size);\n line-height: var(--font-line-height-medium);\n margin: calc(var(--flatpicker-padding) * 0.25) auto;\n max-width: var(--datetimepicker-day-size);\n width: var(--datetimepicker-day-size);\n @include focus;\n\n &.focus-visible {\n --focus-offset: 0;\n background: transparent;\n border-color: transparent;\n }\n\n &:hover {\n background: var(--hover-effect);\n }\n // Dia de outros meses\n &.prevMonthDay,\n &.nextMonthDay {\n font-weight: var(--font-weight-medium);\n opacity: 0.6;\n }\n // Dia hoje\n &.today {\n background: var(--orange-vivid-5);\n border-color: transparent;\n color: var(--red-warm-vivid-50);\n }\n // Dia desativado\n &.flatpickr-disabled {\n @include disabled;\n color: var(--color);\n\n &:hover {\n background: transparent;\n }\n }\n // Intervalo de dias\n &.inRange {\n --interactive-rgb: var(--blue-warm-vivid-50-rgb);\n --hover: var(--hover-dark);\n background-image: linear-gradient(\n rgba(var(--interactive-rgb), var(--hover)),\n rgba(var(--interactive-rgb), var(--hover))\n );\n border-color: transparent;\n box-shadow: none;\n color: var(--color-dark);\n opacity: 1;\n }\n // Dia selecionado\n &.selected,\n &.startRange,\n &.endRange {\n background: var(--selected);\n border-color: transparent;\n color: var(--color-dark);\n opacity: 1;\n }\n }\n}\n\n@mixin flatpicker-timepicker {\n .flatpickr-time {\n display: flex;\n justify-content: center;\n margin: 0 var(--flatpicker-padding);\n max-height: none;\n // Input\n input {\n @include input-box;\n margin: calc(var(--flatpicker-padding) * 0.25) 0;\n }\n // Agrupador\n .numInputWrapper {\n align-items: center;\n display: flex;\n flex: 0 1 90px;\n flex-flow: column;\n height: auto;\n padding: calc(var(--flatpicker-padding) * 0.5) var(--flatpicker-padding);\n\n &:hover {\n background: transparent;\n }\n // Setas\n span {\n @include hover;\n align-items: center;\n border: 0;\n border-radius: 50px;\n color: var(--interactive);\n display: flex;\n height: var(--datetimepicker-arrows);\n justify-content: center;\n opacity: 1;\n padding: 0;\n position: static;\n width: var(--datetimepicker-arrows);\n\n &::after {\n border: none;\n\n position: static;\n }\n\n &.arrowUp {\n order: -1;\n\n &::after {\n transform: rotate(225deg) translate(-1px, -1px);\n }\n }\n }\n }\n }\n // Fora do DatePicker\n &.hasTime {\n .flatpickr-time {\n border-color: var(--border-color);\n height: auto;\n }\n\n &.noCalendar {\n .flatpickr-time {\n border-color: transparent;\n }\n }\n }\n}\n\n// stylelint-enable selector-class-pattern\n","// Desabilitado\n@mixin disabled {\n cursor: not-allowed;\n opacity: var(--disabled);\n\n * {\n pointer-events: none;\n }\n}\n\n// Dark mode\n@mixin dark-mode(\n $color: \"color-dark\",\n $color-rgb: \"color-dark-rgb\",\n $text-color: $color,\n $interactive: \"interactive-dark\",\n $interactive-rgb: \"interactive-dark-rgb\",\n $visited: \"visited-dark\",\n $hover: \"hover-dark\",\n $pressed: \"pressed-dark\",\n $focus-color: \"focus-color-dark\",\n $focus: $focus-color\n) {\n --color: var(--#{$color});\n --color-rgb: var(--#{$color-rgb});\n --text-color: var(--#{$text-color});\n --interactive: var(--#{$interactive});\n --interactive-rgb: var(--#{$interactive-rgb});\n --visited: var(--#{$visited});\n --hover: var(--#{$hover});\n --pressed: var(--#{$pressed});\n --focus-color: var(--#{$focus-color});\n --focus: var(--#{$focus});\n}\n@mixin light-mode(\n $color: \"color-light\",\n $color-rgb: \"color-light-rgb\",\n $text-color: $color,\n $interactive: \"interactive-light\",\n $interactive-rgb: \"interactive-light-rgb\",\n $visited: \"visited-light\",\n $hover: \"hover-light\",\n $pressed: \"pressed-light\",\n $focus-color: \"focus-color-light\",\n $focus: $focus-color\n) {\n --color: var(--#{$color});\n --color-rgb: var(--#{$color-rgb});\n --text-color: var(--#{$text-color});\n --interactive: var(--#{$interactive});\n --interactive-rgb: var(--#{$interactive-rgb});\n --visited: var(--#{$visited});\n --hover: var(--#{$hover});\n --pressed: var(--#{$pressed});\n --focus-color: var(--#{$focus-color});\n --focus: var(--#{$focus});\n}\n","/// Aplica foco: feedback ao navegar por teclado no elemento\n/// @example scss - Uso prático\n/// a {\n/// @include focus;\n/// }\n@mixin focus {\n &:focus {\n outline: none;\n }\n\n &.focus-visible,\n &:focus-visible {\n outline-color: var(--focus);\n outline-offset: var(--focus-offset);\n outline-style: var(--focus-style);\n outline-width: var(--focus-width);\n }\n}\n\n/// Aplica foco tênue\n/// @example scss - Uso prático\n/// input {\n/// &:focus,\n/// &:focus-visible,\n/// &.focus-visible {\n/// @include focus-soft;\n/// }\n/// }\n@mixin focus-soft {\n border-color: var(--focus) !important;\n box-shadow: 0 0 0 var(--surface-width-md) var(--focus);\n outline: none;\n}\n","// TODO: Verificar se os estados hover e focus estão funcionando\n@mixin input-box {\n --input-background: var(--bg-color);\n --input-border-color: var(--color-secondary-06);\n --input-border-width: 1px;\n --input-border-style: solid;\n --input-padding: 0 var(--spacing-scale-half);\n --input-radius: var(--surface-rounder-sm);\n // Atenção! As seguintes propriedades devem seguir as definições em utilities/_typography.scss\n // color\n // font-size\n // font-weight\n background: var(--input-background);\n border: var(--input-border-width) var(--input-border-style) var(--input-border-color);\n border-radius: var(--input-radius);\n color: var(--text-color);\n display: block;\n font-size: var(--font-size-scale-up-01);\n font-weight: var(--font-weight-medium);\n height: var(--input-size);\n padding: var(--input-padding);\n width: 100%;\n\n @include hover(\"color\");\n\n &:focus,\n &:focus-visible,\n &.focus-visible {\n @include focus-soft;\n }\n\n &.has-icon {\n padding-right: v(spacing-scale-5x);\n }\n\n &[type=\"password\"]::-ms-reveal,\n &[type=\"password\"]::-ms-clear {\n display: none;\n }\n}\n\n@mixin input-states {\n @each $color in success, danger, warning, info {\n &.#{$color},\n &[data-#{$color}] {\n input {\n border: 2px solid var(--color-#{$color});\n }\n .feedback.color-#{$color} {\n align-items: center;\n background: $color;\n color: var(--color-secondary-01) !important;\n display: inline-flex;\n height: 35px;\n margin-bottom: var(--spacing-scale-base);\n padding: 5px;\n }\n @if ($color == warning) {\n .feedback.color-warning {\n color: var(--color-secondary-08) !important;\n }\n }\n }\n }\n}\n\n@mixin input-sizes {\n --input-small: 48px;\n --input-medium: 40px;\n --input-large: 32px;\n --input-size: var(--input-medium);\n\n @each $size in \"small\", \"medium\", \"large\" {\n &.#{$size},\n &[data-#{$size}] {\n --input-size: var(--input-#{$size});\n }\n }\n}\n","/// Aplica hover: feedback ao colocar o cursor no elemento\n/// @param {String} $color [\"interactive\"] - Cor do hover **(Opcional)**\n/// @example scss - Uso prático\n/// a {\n/// @include hover;\n/// }\n@mixin hover($color: \"interactive\") {\n &:not(:disabled) {\n &:hover {\n background-image: linear-gradient(\n rgba(var(--#{$color}-rgb), var(--hover)),\n rgba(var(--#{$color}-rgb), var(--hover))\n );\n }\n }\n}\n","@mixin input-configs {\n @include input-tokens;\n @include input-default;\n @include input-inline;\n @include input-icon;\n @include input-button;\n @include input-highlight;\n @include input-autocomplete;\n @include input-states;\n @include input-densities;\n @include input-dark;\n}\n\n@mixin input-tokens {\n --input-button-margin: var(--spacing-scale-half);\n --input-padding: 0 var(--spacing-scale-2x);\n --input-padding-button: var(--spacing-scale-5x);\n --input-padding-icon: var(--spacing-scale-5x);\n --input-size: var(--input-medium);\n --input-small: 32px;\n --input-medium: 40px;\n --input-large: 48px;\n --input-highlight: 56px;\n}\n\n@mixin input-default {\n @include light-mode;\n color: var(--color);\n position: relative;\n\n input {\n background-color: var(--background-light);\n border-color: var(--border-color-alternative);\n border-radius: var(--surface-rounder-sm);\n border-style: var(--border-style);\n border-width: var(--border-width);\n color: var(--color-light);\n display: block;\n font-size: var(--font-size-scale-up-01);\n font-weight: var(--font-weight-medium);\n height: var(--input-size);\n margin-top: var(--spacing-scale-half);\n padding-bottom: 0;\n padding-left: var(--spacing-scale-2x);\n padding-right: var(--spacing-scale-2x);\n padding-top: 0;\n width: 100%;\n\n // Remove ícones nativos de browsers\n // mostrar senha IE/Edge\n &::-ms-reveal,\n &::-ms-clear,\n &::-webkit-calendar-picker-indicator {\n display: none;\n }\n // busca no Chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n appearance: none;\n }\n }\n}\n\n@mixin input-inline {\n &.input-inline {\n display: flex;\n\n .input-label {\n margin-right: var(--spacing-scale-baseh);\n margin-top: calc(var(--input-size) * 0.5 - var(--spacing-scale-half));\n }\n\n .input-content {\n flex: 1;\n }\n }\n}\n\n@mixin input-icon {\n .input-group {\n position: relative;\n }\n\n .input-icon {\n align-items: center;\n color: var(--border-color-alternative);\n display: flex;\n height: var(--input-size);\n margin-left: var(--spacing-scale-baseh);\n position: absolute;\n\n + input {\n padding-left: var(--input-padding-icon);\n }\n }\n}\n\n@mixin input-button {\n .#{$prefix}button {\n --button-size: var(--button-small);\n @include light-mode;\n border-radius: 50%;\n float: right;\n margin-right: var(--input-button-margin);\n margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n padding: 0;\n position: relative;\n // Centraliza botão\n transform: translateY(calc((var(--input-size) - var(--button-size)) * 0.5));\n width: var(--button-size);\n }\n\n &.input-button {\n input {\n padding-right: var(--input-padding-button);\n }\n }\n // Manter compatibilidade com versão 15.0.2 e anteriores\n &.has-icon {\n input {\n padding-right: var(--input-padding-icon);\n }\n .#{$prefix}button.circle {\n float: right;\n margin-right: var(--spacing-scale-half);\n margin-top: calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);\n transform: translateY(0);\n }\n\n &.small {\n .#{$prefix}button.circle {\n margin-top: calc((var(--button-size) + var(--spacing-scale-base)) * -1);\n }\n }\n\n &.large {\n .#{$prefix}button.circle {\n margin-top: calc(var(--button-size) * -1);\n }\n }\n }\n}\n\n@mixin input-highlight {\n &.input-highlight {\n --input-button-margin: var(--spacing-scale-2x);\n --input-padding: 0 var(--spacing-scale-3x);\n --input-padding-button: var(--spacing-scale-7x);\n --input-padding-icon: var(--spacing-scale-7x);\n --input-size: var(--input-highlight);\n\n input {\n background-color: var(--gray-2);\n border-color: transparent;\n padding-left: var(--spacing-scale-3x);\n padding-right: var(--spacing-scale-3x);\n }\n\n .input-icon {\n margin-left: var(--spacing-scale-3x);\n\n + input {\n padding-left: var(--spacing-scale-7x);\n }\n }\n }\n}\n\n// TODO: Este mixin ainda é necessário?\n@mixin input-autocomplete {\n .#{$prefix}list {\n box-shadow: var(--surface-shadow-md);\n max-height: 530px;\n overflow: auto;\n position: absolute;\n width: 100%;\n z-index: var(--z-index-layer-2);\n\n @include scrollbar;\n\n .#{$prefix}item {\n --item-padding-y: var(--spacing-scale-2x);\n @include hover(\"color\");\n\n &:not(:first-child) {\n border-top: var(--surface-width-sm) solid var(--border-color);\n }\n }\n }\n}\n\n@mixin input-states {\n // Borda do input\n @each $color in \"success\", \"danger\", \"warning\", \"info\" {\n &.#{$color},\n &[data-#{$color}] {\n input {\n border-color: var(--#{$color});\n border-width: 2px;\n }\n }\n }\n\n input {\n // Hover\n @include hover(\"color\");\n // Foco tênue\n &:focus,\n &:focus-visible,\n &.focus-visible {\n @include focus-soft;\n }\n }\n // Componente Message (Feedback)\n .feedback {\n margin-bottom: var(--spacing-scale-half);\n }\n}\n\n@mixin input-densities {\n @each $size in small, medium, large {\n &.#{$size},\n &[data-#{$size}] {\n --input-size: var(--input-#{$size});\n }\n }\n}\n\n@mixin input-dark {\n &.inverted,\n &.dark-mode {\n &,\n label {\n --color: var(--color-dark);\n --focus-color: var(--focus-color-dark);\n }\n }\n}\n\n@mixin input-dark-mode {\n &.inverted,\n &.dark-mode {\n .#{$prefix}input {\n &,\n label {\n --color: var(--color-dark);\n --focus-color: var(--focus-color-dark);\n }\n }\n }\n}\n"],"names":[],"sourceRoot":""}