perf: improve scss for custom shortcodes using css custom properties

1 files changed, 59 insertions, 54 deletions

diff --git a/src/scss/_component.scss b/src/scss/_component.scss
index 8e7a64b..ace1d28 100644
--- a/src/scss/_component.scss
+++ b/src/scss/_component.scss
@@ -63,31 +63,39 @@ figure > figcaption {
 }
 
 .panel {
+	--panel-font-color: #000;
+	--panel-background-color: unset;
+	--panel-border-color: transparent;
+
 	padding: $default-layout-padding;
+	color: var(--panel-font-color, #000);
+	background: var(--panel-background-color, unset);
+	border: 1px solid;
+	border-color: var(--panel-border-color, transparent);
 }
+
 .panel-primary {
-	border: 1px solid $default-border-color;
+	--panel-border-color: #{$default-border-color};
 }
-
 .panel-notice {
-	color: #fff;
-	background: #4ba0e1;
+	--panel-font-color: #fff;
+	--panel-background-color: #4ba0e1;
 }
 .panel-success {
-	color: #fff;
-	background: #609f43;
+	--panel-font-color: #fff;
+	--panel-background-color: #609f43;
 }
 .panel-caution {
-	color: #fff;
-	background: #de776d;
+	--panel-font-color: #fff;
+	--panel-background-color: #de776d;
 }
 .panel-warning {
-	color: #fff;
-	background: #e67e22;
+	--panel-font-color: #fff;
+	--panel-background-color: #e67e22;
 }
 .panel-danger {
-	color: #fff;
-	background: #ce3426;
+	--panel-font-color: #fff;
+	--panel-background-color: #ce3426;
 }
 
 .panel-header {}
@@ -100,62 +108,59 @@ figure > figcaption {
 	font-weight: bold;
 	text-decoration: none;
 	border-radius: .8rem;
-	color: #000;
-	background:$default-background-color;
+
+	--button-font-color: #000;
+	--button-font-hover-color: #000;
+	--button-background-color: #{$default-background-color};
+	--button-background-hover-color: #f7f7f7;
+	--button-border-color: #{$default-border-color};
+
+	color: var(--button-font-color, #000);
+	background: var(--button-background-color, unset);
 	border: 2px solid ;
-	border-color: $default-border-color;
+	border-color: var(--button-border-color, transparent);
 
 	&:hover {
-		color: #000;
+		color:var(--button-font-hover-color, #000);
 		text-decoration: none;
-		background: #f7f7f7;
+		background: var(--button-background-hover-color, unset);
 	}
 }
 
 .button-notice {
-	color: #fff;
-	background: #4ba0e1;
-	border-color: transparent;
-	&:hover {
-		color: #fff;
-		background: #3b89c5;
-	}
+	--button-font-color: #fff;
+	--button-font-hover-color: #fff;
+	--button-background-color: #4ba0e1;
+	--button-background-hover-color: #3b89c5;
+	--button-border-color: transparent;
 }
 .button-success {
-	color: #fff;
-	background: #369b08;
-	border-color: transparent;
-	&:hover {
-		color: #fff;
-		background: #256905;
-	}
+	--button-font-color: #fff;
+	--button-font-hover-color: #fff;
+	--button-background-color: #369b08;
+	--button-background-hover-color: #256905;
+	--button-border-color: transparent;
 }
 .button-caution {
-	color: #fff;
-	background: #f56558;
-	border-color: transparent;
-	&:hover {
-		color: #fff;
-		background: #d45145;
-	}
+	--button-font-color: #fff;
+	--button-font-hover-color: #fff;
+	--button-background-color:  #f56558;
+	--button-background-hover-color: #d45145;
+	--button-border-color: transparent;
 }
 .button-warning {
-	color: #fff;
-	background: #f5811b;
-	border-color: transparent;
-	&:hover {
-		color: #fff;
-		background: #db7012;
-	}
+	--button-font-color: #fff;
+	--button-font-hover-color: #fff;
+	--button-background-color: #f5811b;
+	--button-background-hover-color: #db7012;
+	--button-border-color: transparent;
 }
 .button-danger {
-	color: #fff;
-	background: #ce3426;
-	border-color: transparent;
-	&:hover {
-		color: #fff;
-		background: #a0281d;
-	}
+	--button-font-color: #fff;
+	--button-font-hover-color: #fff;
+	--button-background-color:  #ce3426;
+	--button-background-hover-color: #a0281d;
+	--button-border-color: transparent;
 }
 
 .notification {
@@ -237,7 +242,7 @@ figure > figcaption h4 {
 		font-weight: normal;
 	}
 	p {
-		@extend .stack-unset;
+		@extend .unset-stack;
 		color: #3C4043;
 	}
 	.lastmod {
@@ -284,7 +289,7 @@ figure > figcaption h4 {
 		@include grid-col($col: 12, $flex-shrink: 0, $max-width: 100%);
 
 		.highlight {
-			@extend .stack-reset;
+			@extend .none-stack;
 		}
 	}
 }