@clayui/css 3.160.0 → 3.162.0

package/src/scss/atlas-custom-properties/variables/_date-picker.scss

@@ -0,0 +1,619 @@
+// Date Picker Dropdown Menu
+
+$date-picker-dropdown-menu: () !default;
+$date-picker-dropdown-menu: map-deep-merge(
+	(
+		max-height: var(--date-picker-dropdown-menu-max-height, none),
+		max-width: var(--date-picker-dropdown-menu-max-width, 352px),
+		padding-bottom: var(--date-picker-dropdown-menu-padding-bottom, 0),
+		padding-left: var(--date-picker-dropdown-menu-padding-left, 0),
+		padding-right: var(--date-picker-dropdown-menu-padding-right, 0),
+		padding-top: var(--date-picker-dropdown-menu-padding-top, 0),
+		width: var(--date-picker-dropdown-menu-width, 100%),
+		media-breakpoint-down: (
+			xs: (
+				font-size:
+					var(--date-picker-dropdown-menu-xs-down-font-size, 12px),
+				margin: var(--date-picker-dropdown-menu-xs-down-margin, 0),
+				max-height:
+					var(--date-picker-dropdown-menu-xs-down-max-height, 255px),
+				max-width:
+					var(--date-picker-dropdown-menu-xs-down-max-width, 264px),
+			),
+		),
+	),
+	$date-picker-dropdown-menu
+);
+
+// Date Picker Nav
+
+$date-picker-nav-row: () !default;
+$date-picker-nav-row: map-deep-merge(
+	(
+		display: flex,
+		margin-left: var(--date-picker-nav-row-margin-left, -2px),
+		margin-right: var(--date-picker-nav-row-margin-right, -2px),
+	),
+	$date-picker-nav-row
+);
+
+$date-picker-nav-btn: () !default;
+$date-picker-nav-btn: map-deep-merge(
+	(
+		color: var(--date-picker-nav-btn-color, $gray-600),
+		transition: var(--date-picker-nav-btn-transition, $component-transition),
+		hover: (
+			background-color:
+				var(--date-picker-nav-btn-hover-background-color, $gray-200),
+			color: var(--date-picker-nav-btn-hover-color, $gray-900),
+		),
+
+		focus: (
+			background-color:
+				var(--date-picker-nav-btn-focus-background-color, $gray-200),
+			box-shadow:
+				var(
+					--date-picker-nav-btn-focus-box-shadow,
+					$component-focus-box-shadow
+				),
+			color: var(--date-picker-nav-btn-focus-color, $gray-900),
+		),
+
+		active: (
+			background-color:
+				var(--date-picker-nav-btn-active-active, $gray-200),
+		),
+
+		disabled: (
+			background-color:
+				var(
+					--date-picker-nav-btn-disabled-background-color,
+					transparent
+				),
+			box-shadow: var(--date-picker-nav-btn-disabled-box-shadow, none),
+			color: var(--date-picker-nav-btn-disabled-color, $gray-500),
+		),
+	),
+	$date-picker-nav-btn
+);
+
+$date-picker-nav-btn-monospaced: () !default;
+$date-picker-nav-btn-monospaced: map-deep-merge(
+	(
+		margin-bottom: var(--date-picker-nav-btn-monospaced-margin-bottom, 0),
+		margin-left: var(--date-picker-nav-btn-monospaced-margin-left, 2px),
+		margin-right: var(--date-picker-nav-btn-monospaced-margin-right, 2px),
+		margin-top: var(--date-picker-nav-btn-monospaced-margin-top, 0),
+		media-breakpoint-down: (
+			xs: (
+				font-size:
+					var(
+						--date-picker-nav-btn-monospaced-xs-down-font-size,
+						12px
+					),
+				height:
+					var(--date-picker-nav-btn-monospaced-xs-down-height, 24px),
+				max-height:
+					var(
+						--date-picker-nav-btn-monospaced-xs-down-max-height,
+						24px
+					),
+				max-width:
+					var(
+						--date-picker-nav-btn-monospaced-xs-down-max-width,
+						24px
+					),
+				min-width:
+					var(
+						--date-picker-nav-btn-monospaced-xs-down-min-width,
+						24px
+					),
+			),
+		),
+	),
+	$date-picker-nav-btn-monospaced
+);
+
+$date-picker-nav-select: () !default;
+$date-picker-nav-select: map-deep-merge(
+	(
+		background-color:
+			var(--date-picker-nav-select-background-color, transparent),
+		border-color: var(--date-picker-nav-select-border-color, transparent),
+		color: var(--date-picker-nav-select-color, $secondary),
+		font-size: var(--date-picker-nav-select-font-size, $font-size-sm),
+		font-weight:
+			var(--date-picker-nav-select-font-weight, $font-weight-semi-bold),
+		height: var(--date-picker-nav-select-height, $input-height-sm),
+		padding-bottom: var(--date-picker-nav-select-padding-bottom, 0),
+		padding-left: var(--date-picker-nav-select-padding-left, 8px),
+		padding-top: var(--date-picker-nav-select-padding-top, 0),
+		hover: (
+			background-color:
+				var(--date-picker-nav-select-hover-background-color, $gray-200),
+			color: var(--date-picker-nav-select-hover-color, $gray-900),
+		),
+
+		focus: (
+			background-color:
+				var(--date-picker-nav-select-focus-background-color, $gray-200),
+			color: var(--date-picker-nav-select-focus-color, $gray-900),
+		),
+
+		disabled: (
+			background-color:
+				var(
+					--date-picker-nav-select-disabled-background-color,
+					transparent
+				),
+			color:
+				var(
+					--date-picker-nav-select-disabled-color,
+					$input-disabled-color
+				),
+		),
+
+		media-breakpoint-down: (
+			xs: (
+				font-size: var(--date-picker-nav-select-xs-down-font-size, 12px),
+				height: var(--date-picker-nav-select-xs-down-height, 24px),
+			),
+		),
+	),
+	$date-picker-nav-select
+);
+
+// Date Picker Row
+
+$date-picker-row: () !default;
+$date-picker-row: map-deep-merge(
+	(
+		display: flex,
+		justify-content: space-between,
+		list-style: none,
+		margin-bottom: var(--date-picker-row-margin-bottom, 8px),
+		margin-top: var(--date-picker-row-margin-top, 8px),
+		padding: var(--date-picker-row-padding, 0),
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: var(--date-picker-row-xs-down-margin-bottom, 4px),
+				margin-top: var(--date-picker-row-xs-down-margin-top, 4px),
+			),
+		),
+	),
+	$date-picker-row
+);
+
+$date-picker-col: () !default;
+$date-picker-col: map-deep-merge(
+	(
+		display: flex,
+		flex-grow: 1,
+		justify-content: center,
+
+		c-selected: (
+			background-image:
+				var(
+					--date-picker-col-c-selected-background-image,
+					linear-gradient($primary-l3, $primary-l3)
+				),
+			background-repeat:
+				var(--date-picker-col-c-selected-background-repeat, no-repeat),
+		),
+
+		c-selected-first-child: (
+			border-bottom-left-radius:
+				var(
+					--date-picker-col-c-selected-first-child-border-bottom-left-radius,
+					100px
+				),
+			border-top-left-radius:
+				var(
+					--date-picker-col-c-selected-first-child-border-top-left-radius,
+					100px
+				),
+		),
+
+		c-selected-last-child: (
+			border-bottom-right-radius:
+				var(
+					--date-picker-col-c-selected-last-child-border-bottom-right-radius,
+					100px
+				),
+			border-top-right-radius:
+				var(
+					--date-picker-col-c-selected-last-child-border-top-right-radius,
+					100px
+				),
+		),
+
+		c-selected-start: (
+			background-position:
+				var(
+					--date-picker-col-c-selected-start-background-position,
+					right top
+				),
+			background-size:
+				var(
+					--date-picker-col-c-selected-start-background-size,
+					50% 100%
+				),
+		),
+
+		c-selected-end: (
+			background-position:
+				var(
+					--date-picker-col-c-selected-end-background-position,
+					left top
+				),
+			background-size:
+				var(--date-picker-col-c-selected-end-background-size, 50% 100%),
+		),
+	),
+	$date-picker-col
+);
+
+$date-picker-days-row: () !default;
+$date-picker-days-row: map-deep-merge(
+	(
+		margin-bottom: var(--date-picker-days-row-margin-bottom, 16px),
+		margin-top: var(--date-picker-days-row-margin-top, 0),
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom:
+					var(--date-picker-days-row-xs-down-margin-bottom, 4px),
+			),
+		),
+	),
+	$date-picker-days-row
+);
+
+$date-picker-date-row: () !default;
+
+// Date Picker Day
+
+$date-picker-day: () !default;
+$date-picker-day: map-deep-merge(
+	(
+		height: var(--date-picker-day-height, 21px),
+	),
+	$date-picker-day
+);
+
+// Date Picker Calendar
+
+$date-picker-calendar-container: () !default;
+$date-picker-calendar-container: map-merge(
+	(
+		float: left,
+		min-width: 100%,
+	),
+	$date-picker-calendar-container
+);
+
+$date-picker-calendar-header-container: () !default;
+$date-picker-calendar-header-container: map-merge(
+	(
+		padding-bottom:
+			var(--date-picker-calendar-header-container-padding-bottom, 16px),
+		padding-left:
+			var(--date-picker-calendar-header-container-padding-left, 16px),
+		padding-right:
+			var(--date-picker-calendar-header-container-padding-right, 16px),
+		padding-top:
+			var(--date-picker-calendar-header-container-padding-top, 16px),
+		media-breakpoint-down: (
+			xs: (
+				padding-bottom:
+					var(
+						--date-picker-calendar-header-container-xs-down-padding-bottom,
+						4px
+					),
+				padding-left:
+					var(
+						--date-picker-calendar-header-container-xs-down-padding-left,
+						6px
+					),
+				padding-right:
+					var(
+						--date-picker-calendar-header-container-xs-down-padding-right,
+						6px
+					),
+				padding-top:
+					var(
+						--date-picker-calendar-header-container-xs-down-padding-top,
+						8px
+					),
+			),
+		),
+	),
+	$date-picker-calendar-header-container
+);
+
+$date-picker-calendar-body-container: () !default;
+$date-picker-calendar-body-container: map-merge(
+	(
+		padding-bottom:
+			var(--date-picker-calendar-body-container-padding-bottom, 8px),
+		padding-left:
+			var(--date-picker-calendar-body-container-padding-left, 8px),
+		padding-right:
+			var(--date-picker-calendar-body-container-padding-right, 8px),
+		media-breakpoint-down: (
+			xs: (
+				padding-bottom:
+					var(
+						--date-picker-calendar-body-container-xs-down-padding-bottom,
+						4px
+					),
+				padding-left:
+					var(
+						--date-picker-calendar-body-container-xs-down-padding-left,
+						6px
+					),
+				padding-right:
+					var(
+						--date-picker-calendar-body-container-xs-down-padding-right,
+						6px
+					),
+			),
+		),
+	),
+	$date-picker-calendar-body-container
+);
+
+$date-picker-calendar-footer-container: () !default;
+$date-picker-calendar-footer-container: map-merge(
+	(
+		border-color:
+			var(--date-picker-calendar-footer-container-border-color, $gray-400),
+		border-style:
+			var(--date-picker-calendar-footer-container-border-style, solid),
+		border-width:
+			var(--date-picker-calendar-footer-container-border-width, 1px 0 0 0),
+		padding-bottom:
+			var(--date-picker-calendar-footer-container-padding-bottom, 8px),
+		padding-left:
+			var(--date-picker-calendar-footer-container-padding-left, 14px),
+		padding-right:
+			var(--date-picker-calendar-footer-container-padding-right, 14px),
+		padding-top:
+			var(--date-picker-calendar-footer-container-padding-top, 8px),
+		media-breakpoint-down: (
+			xs: (
+				padding-left:
+					var(
+						--date-picker-calendar-footer-container-xs-down-padding-left,
+						6px
+					),
+				padding-right:
+					var(
+						--date-picker-calendar-footer-container-xs-down-padding-right,
+						6px
+					),
+				padding-top:
+					var(
+						--date-picker-calendar-footer-container-xs-down-padding-top,
+						7px
+					),
+			),
+		),
+	),
+	$date-picker-calendar-footer-container
+);
+
+// Date Picker Calendar Item
+
+$date-picker-calendar-item: () !default;
+$date-picker-calendar-item: map-deep-merge(
+	(
+		align-items: center,
+		background-color:
+			var(
+				--date-picker-calendar-item-background-color,
+				setter(map-get($date-picker-calendar-item, bg), transparent)
+			),
+		border-width: var(--date-picker-calendar-item-border-width, 0),
+		disabled-cursor: $disabled-cursor,
+		display: inline-flex,
+		flex-shrink: 0,
+		font-weight: $font-weight-semi-bold,
+		height: var(--date-picker-calendar-item-height, 32px),
+		justify-content: center,
+		line-height: var(--date-picker-calendar-item-line-height, 1),
+		margin-left: var(--date-picker-calendar-item-margin-left, 0),
+		margin-right: var(--date-picker-calendar-item-margin-right, 0),
+		padding-bottom: var(--date-picker-calendar-item-padding-bottom, 0),
+		padding-left: var(--date-picker-calendar-item-padding-left, 0),
+		padding-right: var(--date-picker-calendar-item-padding-right, 0),
+		padding-top: var(--date-picker-calendar-item-padding-top, 0),
+		transition: $component-transition,
+		user-select: none,
+		vertical-align: middle,
+		white-space: nowrap,
+		width: var(--date-picker-calendar-item-width, 32px),
+		media-breakpoint-down: (
+			xs: (
+				height: var(--date-picker-calendar-item-xs-down-height, 24px),
+				width: var(--date-picker-calendar-item-xs-down-width, 24px),
+			),
+		),
+	),
+	$date-picker-calendar-item
+);
+
+$date-picker-date: () !default;
+$date-picker-date: map-deep-merge(
+	(
+		border-radius: var(--date-picker-date-border-radius, 100px),
+		color: var(--date-picker-date-color, $gray-600),
+		cursor: $link-cursor,
+		position: relative,
+
+		hover: (
+			background-color:
+				var(--date-picker-date-hover-background-color, $gray-200),
+			color: var(--date-picker-date-hover-color, $gray-900),
+		),
+
+		focus: (
+			background-color:
+				var(--date-picker-date-focus-background-color, $gray-200),
+			box-shadow:
+				var(
+					--date-picker-date-focus-box-shadow,
+					$component-focus-box-shadow
+				),
+			color: var(--date-picker-date-focus-color, $gray-900),
+			outline: 0,
+		),
+
+		active: (
+			background-color:
+				var(
+					--date-picker-date-active-background-color,
+					$component-active-bg
+				),
+			color: var(--date-picker-date-active-color, $component-active-color),
+		),
+
+		disabled: (
+			background-color:
+				var(--date-picker-date-disabled-background-color, transparent),
+			box-shadow: var(--date-picker-date-disabled-box-shadow, none),
+			color: var(--date-picker-date-disabled-color, $gray-500),
+		),
+	),
+	$date-picker-date
+);
+
+$date-picker-previous-month-date: () !default;
+$date-picker-previous-month-date: map-deep-merge(
+	(
+		color: var(--date-picker-previous-month-date-color, $gray-500),
+		active: (
+			background-color:
+				var(
+					--date-picker-previous-month-date-background-color,
+					$primary-l2
+				),
+			color: var(--date-picker-previous-month-date-color, $secondary),
+		),
+	),
+	$date-picker-previous-month-date
+);
+
+$date-picker-next-month-date: () !default;
+$date-picker-next-month-date: map-deep-merge(
+	(
+		color: var(--date-picker-next-month-date-color, $gray-500),
+		active: (
+			background-color:
+				var(
+					--date-picker-next-month-date-active-background-color,
+					$primary-l2
+				),
+			color: var(--date-picker-next-month-date-active-color, $primary-l3),
+		),
+	),
+	$date-picker-next-month-date
+);
+
+// Date Picker Input Group
+
+$date-picker-input-group-item: () !default;
+$date-picker-input-group-item: map-deep-merge(
+	(
+		margin-left: var(--date-picker-input-group-item-margin-left, 2px),
+	),
+	$date-picker-input-group-item
+);
+
+$date-picker-input-group-text: () !default;
+$date-picker-input-group-text: map-deep-merge(
+	(
+		background-color:
+			var(
+				--date-picker-input-group-text-background-color,
+				setter(map-get($date-picker-input-group-text, bg), transparent)
+			),
+		border-color:
+			var(--date-picker-input-group-text-border-color, transparent),
+		min-width: var(--date-picker-input-group-text-min-width, 32px),
+		padding-left: var(--date-picker-input-group-text-padding-left, 4px),
+		padding-right: var(--date-picker-input-group-text-padding-right, 4px),
+		media-breakpoint-down: (
+			xs: (
+				font-size:
+					var(
+						--date-picker-input-group-text-xs-down-font-size,
+						inherit
+					),
+				height:
+					var(
+						--date-picker-input-group-text-xs-down-height,
+						$input-height-sm
+					),
+				min-width:
+					var(--date-picker-input-group-text-xs-down-min-width, 24px),
+			),
+		),
+	),
+	$date-picker-input-group-text
+);
+
+$date-picker-input-form-control: () !default;
+$date-picker-input-form-control: map-deep-merge(
+	(
+		media-breakpoint-down: (
+			xs: (
+				border-radius:
+					var(
+						--date-picker-input-form-control-border-radius,
+						clay-enable-rounded($input-border-radius-sm)
+					),
+				font-size:
+					var(
+						--date-picker-input-form-control-font-size,
+						$input-font-size-sm
+					),
+				height:
+					var(
+						--date-picker-input-form-control-height,
+						$input-height-sm
+					),
+				line-height:
+					var(
+						--date-picker-input-form-control-line-height,
+						$input-line-height-sm
+					),
+				min-height:
+					var(
+						--date-picker-input-form-control-min-height,
+						$input-height-sm
+					),
+				padding-bottom:
+					var(
+						--date-picker-input-form-control-padding-bottom,
+						$input-padding-y-sm
+					),
+				padding-left:
+					var(
+						--date-picker-input-form-control-padding-left,
+						$input-padding-x-sm
+					),
+				padding-right:
+					var(
+						--date-picker-input-form-control-padding-right,
+						$input-padding-x-sm
+					),
+				padding-top:
+					var(
+						--date-picker-input-form-control-padding-top,
+						$input-padding-y-sm
+					),
+			),
+		),
+	),
+	$date-picker-input-form-control
+);