Balasana: Add style for the cookie widget

balasana/sass/_config-child-theme-deep.scss

@@ -165,7 +165,7 @@ $config-button: (
 	// Fonts
 	"font": (
 		"family": map-deep-get($config-global, "font", "family", "ui"),
-		"size": map-deep-get($config-global, "font", "size", "base"),
+		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"weight": 700,
 		"line-height": 1,
 	),

balasana/sass/_extra-child-theme.scss

@@ -14,6 +14,7 @@ $spacing_unit: map-deep-get($config-global, "spacing", "unit");
 $spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
 $spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
 $border_radius_sm: map-deep-get($config-global, "border-radius", "sm");
+$font_size_sm: map-deep-get($config-global, "font", "size", "sm");
 $font_size_lg: map-deep-get($config-global, "font", "size", "lg");
 $font_size_xl: map-deep-get($config-global, "font", "size", "xl");
 
@@ -390,3 +391,71 @@ table,
 .has-large-font-size {
 	line-height: #{(strip-unit($baseline-unit) * 5) / (strip-unit($font_size_lg * $typescale-root))};
 }
+
+// Cookie
+body {
+	.widget_eu_cookie_law_widget {
+		background: transparent;
+		bottom: 0;
+		left: 0;
+		padding: 0;
+		right: 0;
+
+		&.widget.top {
+			bottom: auto;
+			top: 0;
+		}
+
+		#eu-cookie-law {
+			background: rgba($color_background, 0.9);
+			border: none;
+			color: $color_foreground;
+			font-size: $font_size_sm;
+			line-height: inherit;
+			padding: $spacing_unit;
+
+			@media (max-width: 600px) {
+				padding-bottom: #{4 * $spacing_horizontal + $spacing_unit};
+			}
+
+			&.negative {
+				background: rgba($color_foreground, 0.9);
+				color: $color_background;
+
+				input.accept {
+					background: $color_background;
+					color: $color_foreground;
+
+					&:active,
+					&:focus,
+					&:hover {
+						background: $color_background_light;
+					}
+				}
+			}
+
+			input.accept {
+				margin: 0;
+				margin-left: #{2 * $spacing_horizontal};
+
+				@extend %button-style;
+
+				@media (max-width: 600px) {
+					bottom: $spacing_unit;
+					left: $spacing_unit;
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	&.admin-bar .widget_eu_cookie_law_widget {
+		&.widget.top {
+			top: 32px;
+
+			@media (max-width: 782px) {
+				top: 46px;
+			}
+		}
+	}
+}

balasana/style-editor.css

@@ -299,7 +299,7 @@ object {
 	color: white;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1em;
+	font-size: 0.83333em;
 	line-height: 1;
 	background-color: #0877D8;
 	border-radius: 4px;

balasana/style-rtl.css

@@ -1075,13 +1075,13 @@ button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all {
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-size: 0.83333rem;
 	background-color: #0877D8;
 	border-radius: 4px;
 	border-width: 0;
@@ -1092,11 +1092,11 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1107,7 +1107,7 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1115,7 +1115,7 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
@@ -1123,15 +1123,15 @@ button:hover,
 .button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: #065ca7;
 }
@@ -3770,3 +3770,68 @@ table th,
 .has-large-font-size {
 	line-height: 1.38889;
 }
+
+body .widget_eu_cookie_law_widget {
+	background: transparent;
+	bottom: 0;
+	right: 0;
+	padding: 0;
+	left: 0;
+}
+
+body .widget_eu_cookie_law_widget.widget.top {
+	bottom: auto;
+	top: 0;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law {
+	background: rgba(255, 255, 255, 0.9);
+	border: none;
+	color: #303030;
+	font-size: 0.83333rem;
+	line-height: inherit;
+	padding: 16px;
+}
+
+@media (max-width: 600px) {
+	body .widget_eu_cookie_law_widget #eu-cookie-law {
+		padding-bottom: 80px;
+	}
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
+	background: rgba(48, 48, 48, 0.9);
+	color: white;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept {
+	background: white;
+	color: #303030;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:active, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:focus, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:hover {
+	background: #F0F0F0;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	margin: 0;
+	margin-right: 32px;
+}
+
+@media (max-width: 600px) {
+	body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+		bottom: 16px;
+		right: 16px;
+		margin: 0;
+	}
+}
+
+body.admin-bar .widget_eu_cookie_law_widget.widget.top {
+	top: 32px;
+}
+
+@media (max-width: 782px) {
+	body.admin-bar .widget_eu_cookie_law_widget.widget.top {
+		top: 46px;
+	}
+}

balasana/style.css

@@ -1075,13 +1075,13 @@ button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all {
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-size: 0.83333rem;
 	background-color: #0877D8;
 	border-radius: 4px;
 	border-width: 0;
@@ -1092,11 +1092,11 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1107,7 +1107,7 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1115,7 +1115,7 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
 	margin-top: -0.11em;
 }
 
@@ -1123,15 +1123,15 @@ button:hover,
 .button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
 	background-color: #065ca7;
 }
@@ -3787,3 +3787,68 @@ table th,
 .has-large-font-size {
 	line-height: 1.38889;
 }
+
+body .widget_eu_cookie_law_widget {
+	background: transparent;
+	bottom: 0;
+	left: 0;
+	padding: 0;
+	right: 0;
+}
+
+body .widget_eu_cookie_law_widget.widget.top {
+	bottom: auto;
+	top: 0;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law {
+	background: rgba(255, 255, 255, 0.9);
+	border: none;
+	color: #303030;
+	font-size: 0.83333rem;
+	line-height: inherit;
+	padding: 16px;
+}
+
+@media (max-width: 600px) {
+	body .widget_eu_cookie_law_widget #eu-cookie-law {
+		padding-bottom: 80px;
+	}
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law.negative {
+	background: rgba(48, 48, 48, 0.9);
+	color: white;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept {
+	background: white;
+	color: #303030;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:active, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:focus, body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:hover {
+	background: #F0F0F0;
+}
+
+body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	margin: 0;
+	margin-left: 32px;
+}
+
+@media (max-width: 600px) {
+	body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+		bottom: 16px;
+		left: 16px;
+		margin: 0;
+	}
+}
+
+body.admin-bar .widget_eu_cookie_law_widget.widget.top {
+	top: 32px;
+}
+
+@media (max-width: 782px) {
+	body.admin-bar .widget_eu_cookie_law_widget.widget.top {
+		top: 46px;
+	}
+}