feat(@clayui/css): Mixins clay-button-variant adds option to style …

…`::before` and `::after`
liferay · Dec 2, 2021 · 4003b59 · 4003b59
1 parent 9b523cf
commit 4003b59
Showing 1 changed file with 149 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/mixins/_buttons.scss b/packages/clay-css/src/scss/mixins/_buttons.scss
@@ -21,8 +21,20 @@
 /// 		c-inner: (
 /// 		),
 /// 	),
+/// 	before: (
+/// 		// .btn::before
+/// 	),
+/// 	after: (
+/// 		// .btn::after
+/// 	),
 /// 	hover: (
 /// 		// .btn:hover
+/// 		before: (
+/// 			// .btn:hover::before
+/// 		),
+/// 		after: (
+/// 			// .btn:hover::after
+/// 		),
 /// 		inline-item: (
 /// 			// .btn:hover .inline-item
 /// 		),
@@ -38,6 +50,12 @@
 /// 	),
 /// 	focus: (
 /// 		// .btn:focus, .btn.focus
+/// 		before: (
+/// 			// .btn:focus::before
+/// 		),
+/// 		after: (
+/// 			// .btn:focus::after
+/// 		),
 /// 		inline-item: (
 /// 			// .btn:focus .inline-item
 /// 		),
@@ -53,8 +71,20 @@
 /// 	),
 /// 	active: (
 /// 		// .btn:active
+/// 		before: (
+/// 			// .btn:active::before
+/// 		),
+/// 		after: (
+/// 			// .btn:active::after
+/// 		),
 /// 		focus: (
 /// 			// .btn:active:focus
+/// 			before: (
+/// 				// .btn:active:focus::before
+/// 			),
+/// 			after: (
+/// 				// .btn:active:focus::after
+/// 			),
 /// 		),
 /// 		inline-item: (
 /// 			// .btn:active .inline-item
@@ -71,6 +101,12 @@
 /// 	),
 /// 	active-class: (
 /// 		// .btn.active
+/// 		before: (
+/// 			// .btn.active::before
+/// 		),
+/// 		after: (
+/// 			// .btn.active::after
+/// 		),
 /// 		inline-item: (
 /// 			// .btn.active .inline-item
 /// 		),
@@ -86,11 +122,29 @@
 /// 	),
 /// 	disabled: (
 /// 		// .btn:disabled, .btn.disabled
+/// 		before: (
+/// 			// .btn:disabled::before, .btn.disabled::before
+/// 		),
+/// 		after: (
+/// 			// .btn:disabled::after, .btn.disabled::after
+/// 		),
 /// 		focus: (
 /// 			// .btn:disabled:focus, .btn.disabled:focus
+/// 			before: (
+/// 				// .btn:disabled:focus::before, .btn.disabled:focus::before
+/// 			),
+/// 			after: (
+/// 				// .btn:disabled:focus::after, .btn.disabled:focus::after
+/// 			),
 /// 		),
 /// 		active: (
 /// 			// .btn:disabled:active, .btn.disabled:active
+/// 			before: (
+/// 				// .btn:disabled:active::before, .btn.disabled:active::before
+/// 			),
+/// 			after: (
+/// 				// .btn:disabled:active::after, .btn.disabled:active::after
+/// 			),
 /// 		),
 /// 		inline-item: (
 /// 			// .btn:disabled .inline-item, .btn.disabled .inline-item
@@ -105,6 +159,15 @@
 /// 			// .btn:disabled .inline-item-after, .btn.disabled .inline-item-after
 /// 		),
 /// 	),
+/// 	show: (
+/// 		// .btn[aria-expanded='true'], .btn.show
+/// 		before: (
+/// 			// .btn[aria-expanded='true']::before, .btn.show::before
+/// 		),
+/// 		after: (
+/// 			// .btn[aria-expanded='true']::after, .btn.show::after
+/// 		),
+/// 	),
 /// 	c-inner: (
 /// 		// .btn .c-inner
 /// 	),
@@ -514,9 +577,25 @@
 			}
 		}
 
+		&::before {
+			@include clay-css(map-get($map, before));
+		}
+
+		&::after {
+			@include clay-css(map-get($map, after));
+		}
+
 		&:hover {
 			@include clay-css($hover);
 
+			&::before {
+				@include clay-css(map-deep-get($map, hover, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, hover, after));
+			}
+
 			.inline-item {
 				@include clay-css(setter(map-get($hover, inline-item), ()));
 			}
@@ -544,6 +623,14 @@
 		&.focus {
 			@include clay-css($focus);
 
+			&::before {
+				@include clay-css(map-deep-get($map, focus, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, focus, after));
+			}
+
 			.inline-item {
 				@include clay-css(setter(map-get($focus, inline-item), ()));
 			}
@@ -570,8 +657,26 @@
 		&:active {
 			@include clay-css($active);
 
+			&::before {
+				@include clay-css(map-deep-get($map, active, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, active, after));
+			}
+
 			&:focus {
 				@include clay-css($active-focus);
+
+				&::before {
+					@include clay-css(
+						map-deep-get($map, active, focus, before)
+					);
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, active, focus, after));
+				}
 			}
 
 			.inline-item {
@@ -600,6 +705,10 @@
 		&.active {
 			@include clay-css($active-class);
 
+			&::before {
+				@include clay-css(map-deep-get($map, active-class, before));
+			}
+
 			&::after {
 				@include clay-css($active-class-after);
 			}
@@ -633,12 +742,44 @@
 		&.disabled {
 			@include clay-css($disabled);
 
+			&::before {
+				@include clay-css(map-deep-get($map, disabled, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, disabled, after));
+			}
+
 			&:focus {
 				@include clay-css($disabled-focus);
+
+				&::before {
+					@include clay-css(
+						map-deep-get($map, disabled, focus, before)
+					);
+				}
+
+				&::after {
+					@include clay-css(
+						map-deep-get($map, disabled, focus, after)
+					);
+				}
 			}
 
 			&:active {
 				@include clay-css($disabled-active);
+
+				&::before {
+					@include clay-css(
+						map-deep-get($map, disabled, active, before)
+					);
+				}
+
+				&::after {
+					@include clay-css(
+						map-deep-get($map, disabled, active, after)
+					);
+				}
 			}
 
 			.inline-item {
@@ -667,6 +808,14 @@
 		&[aria-expanded='true'],
 		&.show {
 			@include clay-css($show);
+
+			&::before {
+				@include clay-css(map-deep-get($map, show, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, show, after));
+			}
 		}
 
 		@if (map-get($c-inner, enabled)) {