فهرست منبع

kept the mixins, but removed the includes

MaggieCabrera 3 سال پیش
والد
کامیت
c872c92bbe
4فایلهای تغییر یافته به همراه130 افزوده شده و 32 حذف شده
  1. 103 24
      blockbase/assets/ponyfill.css
  2. 14 0
      blockbase/sass/blocks/_button-mixins.scss
  3. 2 2
      blockbase/sass/blocks/_file.scss
  4. 11 6
      blockbase/sass/blocks/_search.scss

+ 103 - 24
blockbase/assets/ponyfill.css

@@ -343,8 +343,105 @@ input[type=checkbox] + label {
   line-height: 1em;
 }
 
+<<<<<<< HEAD
 .wp-block-button:not(.is-style-outline) > a.has-background {
   border-style: none;
+=======
+/**
+ * Button
+ */
+/**
+ * Block Options
+ */
+.wp-block-button.wp-block-button__link,
+.wp-block-button .wp-block-button__link, .wp-block-button__link.wp-block-button__link,
+.wp-block-button__link .wp-block-button__link {
+  border-width: 0;
+  padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
+  padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
+  padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
+  padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
+  text-decoration: none;
+  font-weight: var(--wp--custom--button--typography--font-weight);
+}
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+  --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+  --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+  --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+  opacity: 1;
+  color: var(--wp--custom--button--color--text);
+  background-color: var(--wp--custom--button--color--background);
+  border-color: currentColor;
+  border-color: currentcolor;
+  border-color: var(--wp--custom--button--border--color);
+}
+.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+  fill: var(--wp--custom--button--color--text);
+}
+.wp-block-button.is-style-outline.wp-block-button__link,
+.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline.wp-block-button__link,
+.wp-block-button__link.is-style-outline .wp-block-button__link {
+  --wp--custom--button--color--text: var(--wp--custom--button--border--color);
+  --wp--custom--button--color--background: transparent;
+  border-style: var(--wp--custom--button--border--style);
+  border-width: var(--wp--custom--button--border--width);
+  padding-top: var(--wp--custom--button--spacing--padding--top);
+  padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
+  padding-left: var(--wp--custom--button--spacing--padding--left);
+  padding-right: var(--wp--custom--button--spacing--padding--right);
+  opacity: 1;
+  color: var(--wp--custom--button--color--text);
+  background-color: var(--wp--custom--button--color--background);
+  border-color: currentColor;
+  border-color: currentcolor;
+}
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
+  --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
+  --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
+  --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+  opacity: 1;
+  color: var(--wp--custom--button--color--text);
+  background-color: var(--wp--custom--button--color--background);
+  border-color: currentColor;
+  border-color: currentcolor;
+  border-color: var(--wp--custom--button--border--color);
+}
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg,
+.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg {
+  fill: var(--wp--custom--button--color--text);
+}
+.wp-block-button.is-style-outline.wp-block-button__link svg,
+.wp-block-button.is-style-outline .wp-block-button__link svg, .wp-block-button__link.is-style-outline.wp-block-button__link svg,
+.wp-block-button__link.is-style-outline .wp-block-button__link svg {
+  fill: var(--wp--custom--button--color--text);
+}
+
+.wp-block-buttons .wp-block-button:last-child {
+  margin-bottom: 0;
+>>>>>>> aff3e9952 (kept the mixins, but removed the includes)
 }
 
 .wp-block-calendar table caption {
@@ -642,20 +739,6 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
   padding: var(--wp--custom--form--padding);
   border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 }
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
-.wp-block-search .wp-block-search__button {
-  border-width: 0;
-  padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
-  padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
-  padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
-  padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
-  opacity: 1;
-  border-color: currentcolor;
-}
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg,
-.wp-block-search .wp-block-search__button svg {
-  fill: var(--wp--custom--button--color--text);
-}
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover,
 .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus,
@@ -664,6 +747,9 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
   --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
   --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
   opacity: 1;
+  color: var(--wp--custom--button--color--text);
+  background-color: var(--wp--custom--button--color--background);
+  border-color: currentColor;
   border-color: currentcolor;
   border-color: var(--wp--custom--button--border--color);
 }
@@ -707,23 +793,16 @@ p.wp-block-site-tagline {
 }
 
 .wp-block-file .wp-block-file__button {
-  border-width: 0;
-  padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
-  padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
-  padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
-  padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
-  opacity: 1;
-  border-color: currentcolor;
   display: inline-block;
 }
-.wp-block-file .wp-block-file__button svg {
-  fill: var(--wp--custom--button--color--text);
-}
 .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus {
   --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
   --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
   --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
   opacity: 1;
+  color: var(--wp--custom--button--color--text);
+  background-color: var(--wp--custom--button--color--background);
+  border-color: currentColor;
   border-color: currentcolor;
   border-color: var(--wp--custom--button--border--color);
 }

+ 14 - 0
blockbase/sass/blocks/_button-mixins.scss

@@ -3,11 +3,16 @@
 @mixin button-main-styles {
 
 	@include button-padding-styles;
+	@include button-typography-styles;
 	@include button-color-styles;
+	border-radius: var(--wp--custom--button--border--radius);
 }
 
 @mixin button-color-styles {
 	opacity: 1;
+	color: var(--wp--custom--button--color--text);
+	background-color: var(--wp--custom--button--color--background);
+	border-color: currentcolor;
 	border-color: currentcolor;
 
 	svg {
@@ -25,6 +30,15 @@
 	padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
 }
 
+//We are keeping the mixin in case it's used by any child themes, but this isn't used by Blockbase any more
+@mixin button-typography-styles {
+	font-weight: var(--wp--custom--button--typography--font-weight);
+	font-family: inherit;
+	font-size: var(--wp--custom--button--typography--font-size);
+	line-height: var(--wp--custom--button--typography--line-height);
+	text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
+}
+
 //apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
 @mixin button-border-styles {
 	border-style: var(--wp--custom--button--border--style);

+ 2 - 2
blockbase/sass/blocks/_file.scss

@@ -1,8 +1,8 @@
-@import 'button-mixins';
+@import "button-mixins";
 
 // TODO: Remove when https://github.com/WordPress/gutenberg/issues/27760 is fixed.
 .wp-block-file .wp-block-file__button {
-	@include button-main-styles;
+
 	@include button-hover-styles;
 	display: inline-block;
 }

+ 11 - 6
blockbase/sass/blocks/_search.scss

@@ -1,12 +1,14 @@
-@import 'button-mixins';
+@import "button-mixins";
 
 .wp-block-search {
 
 	&.wp-block-search__button-inside {
-		.wp-block-search__inside-wrapper{
+
+		.wp-block-search__inside-wrapper {
 			padding: var(--wp--custom--form--border--width);
 			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
 			border-radius: var(--wp--custom--form--border--radius);
+
 			.wp-block-search__input {
 				padding: 0 var(--wp--custom--form--padding);
 			}
@@ -20,14 +22,16 @@
 
 	&.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
 	.wp-block-search__button {
-		@include button-main-styles;
+
 		@include button-hover-styles;
+
 		&.has-icon {
 			line-height: 0;
 		}
 	}
 
 	.wp-block-search__input {
+
 		&::placeholder {
 			color: var(--wp--custom--form--color--text);
 			opacity: 0.66;
@@ -35,10 +39,11 @@
 	}
 
 	/* Block Styles */
-	&.is-style-small-search{
-		--wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small));
+	&.is-style-small-search {
+		--wp--custom--button--typography--font-size: calc(0.8 * var(--wp--preset--font-size--small));
+
 		.wp-block-search__input {
-			padding: calc( 0.5 * var(--wp--custom--form--padding) );
+			padding: calc(0.5 * var(--wp--custom--form--padding));
 		}
 	}
 }