feat(@clayui/css): Cadmin Popover adds popover-secondary

liferay · Apr 12, 2022 · 0e42484 · 0e42484
1 parent 2abad63
commit 0e42484
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 24 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_popovers.scss b/packages/clay-css/src/scss/cadmin/components/_popovers.scss
@@ -1,5 +1,15 @@
-.popover {
-	@include clay-popover-variant($cadmin-popover);
+// Popovers
+
+@each $selector, $value in $cadmin-popovers {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-popover-variant($value);
+	}
 }
 
 %bs-popover-bottom {
@@ -140,28 +150,46 @@
 	@extend %bs-popover-top !optional;
 }
 
-.popover-header {
-	@include clay-css($cadmin-popover-header);
+// Popover Headers
 
-	&.popover-header-borderless {
-		@include clay-css(map-get($cadmin-popover-header, borderless));
-	}
+@each $selector, $value in $cadmin-popover-headers {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
 
-	&::before {
-		@include clay-css(map-get($cadmin-popover-header, before));
+	#{$selector} {
+		@include clay-popover-header-variant($value);
 	}
+}
 
-	&::after {
-		@include clay-css(map-get($cadmin-popover-header, after));
-	}
+// Popover Bodies
+
+@each $selector, $value in $cadmin-popover-bodies {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
 
-	&::empty {
-		@include clay-css(map-get($cadmin-popover-header, empty));
+	#{$selector} {
+		@include clay-popover-header-variant($value);
 	}
 }
 
-.popover-body {
-	@include clay-css($cadmin-popover-body);
+// Popover Widths
+
+@each $selector, $value in $cadmin-popover-widths {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-popover-variant($value);
+	}
 }
 
 // Top

diff --git a/packages/clay-css/src/scss/cadmin/variables/_popovers.scss b/packages/clay-css/src/scss/cadmin/variables/_popovers.scss
@@ -9,7 +9,6 @@ $cadmin-popover-inner-border-radius: $cadmin-popover-border-radius -
 $cadmin-popover-box-shadow: 0 1px 15px -2px rgba(0, 0, 0, 0.2) !default;
 $cadmin-popover-font-size: $cadmin-font-size-sm !default;
 $cadmin-popover-max-width: 232px !default; // 232px
-$cadmin-popover-width-lg: 421px !default;
 
 $cadmin-popover-inline-scroller-max-height: 238px !default; // 238px
 
@@ -101,16 +100,34 @@ $cadmin-popover: map-deep-merge(
 				position: absolute,
 			),
 		),
-		width-lg: (
-			max-width: $cadmin-popover-width-lg,
-		),
 		inline-scroller: (
 			max-height: $cadmin-popover-inline-scroller-max-height,
 		),
 	),
 	$cadmin-popover
 );
 
+// Popovers
+
+$cadmin-popovers: () !default;
+$cadmin-popovers: map-deep-merge(
+	(
+		popover: $cadmin-popover,
+		popover-secondary: (
+			box-shadow: 0 8px 16px 0 rgba($cadmin-primary, 0.16),
+			popover-header: (
+				background-color: transparent,
+				border-color: transparent,
+				padding-bottom: 0,
+			),
+			close: (
+				color: $cadmin-gray-600,
+			),
+		),
+	),
+	$cadmin-popovers
+);
+
 // .popover-header
 
 $cadmin-popover-header: () !default;
@@ -133,17 +150,23 @@ $cadmin-popover-header: map-deep-merge(
 		margin-top: $cadmin-popover-header-margin-y,
 		padding: $cadmin-popover-header-padding-y
 			$cadmin-popover-header-padding-x,
-		borderless: (
-			border: none,
-			padding: 0.75rem 0 0,
-		),
 		empty: (
 			display: none,
 		),
 	),
 	$cadmin-popover-header
 );
 
+// Popover Headers
+
+$cadmin-popover-headers: () !default;
+$cadmin-popover-headers: map-deep-merge(
+	(
+		popover-header: $cadmin-popover-header,
+	),
+	$cadmin-popover-headers
+);
+
 // .popover-body
 
 $cadmin-popover-body: () !default;
@@ -159,6 +182,28 @@ $cadmin-popover-body: map-merge(
 	$cadmin-popover-body
 );
 
+// Popover Bodies
+
+$cadmin-popover-bodies: () !default;
+$cadmin-popover-bodies: map-deep-merge(
+	(
+		popover-body: $cadmin-popover-body,
+	),
+	$cadmin-popover-bodies
+);
+
+// Popover Widths
+
+$cadmin-popover-widths: () !default;
+$cadmin-popover-widths: map-deep-merge(
+	(
+		popover-width-lg: (
+			max-width: 421px,
+		),
+	),
+	$cadmin-popover-widths
+);
+
 // .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
 
 $cadmin-clay-popover-top: () !default;