feat(@clayui/css): Date Picker adds Date Range styles

- Adds `.date-picker-col`, `.c-selected`, `.c-selected-start`, and `.c-selected-end` to highlight date ranges - Atlas make date-picker-dropdown-menu narrower due to white gaps between date ranges - Adds Sass map `$date-picker-col`
liferay · Apr 8, 2021 · a385e6a · a385e6a
1 parent c1a1571
commit a385e6a
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 3 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_date-picker.scss b/packages/clay-css/src/scss/atlas/variables/_date-picker.scss
@@ -1,3 +1,13 @@
+// Date Picker Dropdown Menu
+
+$date-picker-dropdown-menu: () !default;
+$date-picker-dropdown-menu: map-deep-merge(
+	(
+		max-width: 368px,
+	),
+	$date-picker-dropdown-menu
+);
+
 // Date Picker Nav
 
 $date-picker-nav-btn: () !default;

diff --git a/packages/clay-css/src/scss/components/_date-picker.scss b/packages/clay-css/src/scss/components/_date-picker.scss
@@ -72,6 +72,49 @@
 	@include clay-row($date-picker-row);
 }
 
+.date-picker-col {
+	@include clay-css($date-picker-col);
+
+	&.c-selected {
+		$_c-selected: setter(map-get($date-picker-col, c-selected), ());
+
+		@include clay-css($_c-selected);
+
+		&:first-child {
+			$_c-selected-first-child: setter(
+				map-get($date-picker-col, c-selected-first-child),
+				()
+			);
+
+			@include clay-css($_c-selected-first-child);
+		}
+
+		&:last-child {
+			$_c-selected-last-child: setter(
+				map-get($date-picker-col, c-selected-last-child),
+				()
+			);
+
+			@include clay-css($_c-selected-last-child);
+		}
+	}
+
+	&.c-selected-start {
+		$_c-selected-start: setter(
+			map-get($date-picker-col, c-selected-start),
+			()
+		);
+
+		@include clay-css($_c-selected-start);
+	}
+
+	&.c-selected-end {
+		$_c-selected-end: setter(map-get($date-picker-col, c-selected-end), ());
+
+		@include clay-css($_c-selected-end);
+	}
+}
+
 .date-picker-days-row {
 	@include clay-row($date-picker-days-row);
 }

diff --git a/packages/clay-css/src/scss/variables/_date-picker.scss b/packages/clay-css/src/scss/variables/_date-picker.scss
@@ -60,12 +60,43 @@ $date-picker-row: map-deep-merge(
 	(
 		display: flex,
 		justify-content: space-between,
+		list-style: none,
 		margin-bottom: 0.5rem,
 		margin-top: 0.5rem,
+		padding: 0,
 	),
 	$date-picker-row
 );
 
+$date-picker-col: () !default;
+$date-picker-col: map-deep-merge(
+	(
+		padding-left: 0.5rem,
+		padding-right: 0.5rem,
+		c-selected: (
+			background-image: linear-gradient($primary-l3, $primary-l3),
+			background-repeat: no-repeat,
+		),
+		c-selected-first-child: (
+			border-bottom-left-radius: 100px,
+			border-top-left-radius: 100px,
+		),
+		c-selected-last-child: (
+			border-bottom-right-radius: 100px,
+			border-top-right-radius: 100px,
+		),
+		c-selected-start: (
+			background-position: right top,
+			background-size: 50% 100%,
+		),
+		c-selected-end: (
+			background-position: left top,
+			background-size: 50% 100%,
+		),
+	),
+	$date-picker-col
+);
+
 $date-picker-days-row: () !default;
 $date-picker-days-row: map-deep-merge(
 	(
@@ -141,16 +172,15 @@ $date-picker-calendar-item: map-deep-merge(
 		align-items: center,
 		bg: transparent,
 		border-width: 0,
-		cursor: $link-cursor,
 		disabled-cursor: $disabled-cursor,
 		display: inline-flex,
 		flex-shrink: 0,
 		font-weight: $font-weight-semi-bold,
 		height: 2rem,
 		justify-content: center,
 		line-height: 1,
-		margin-left: 0.5rem,
-		margin-right: 0.5rem,
+		margin-left: 0,
+		margin-right: 0,
 		padding-bottom: 0,
 		padding-left: 0,
 		padding-right: 0,
@@ -169,6 +199,8 @@ $date-picker-date: map-deep-merge(
 	(
 		border-radius: 100px,
 		color: $gray-600,
+		cursor: $link-cursor,
+		position: relative,
 		hover-bg: $gray-200,
 		focus-box-shadow: $input-btn-focus-box-shadow,
 		focus-outline: 0,