瀏覽代碼

removed typography styles for buttons

MaggieCabrera 3 年之前
父節點
當前提交
7715a4defa
共有 2 個文件被更改,包括 11 次插入25 次删除
  1. 0 10
      blockbase/assets/ponyfill.css
  2. 11 15
      blockbase/sass/blocks/_button-mixins.scss

+ 0 - 10
blockbase/assets/ponyfill.css

@@ -649,11 +649,6 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
   padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + 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-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));
   padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
-  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;
   opacity: 1;
   opacity: 1;
   color: var(--wp--custom--button--color--text);
   color: var(--wp--custom--button--color--text);
   background-color: var(--wp--custom--button--color--background);
   background-color: var(--wp--custom--button--color--background);
@@ -722,11 +717,6 @@ p.wp-block-site-tagline {
   padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + 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-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));
   padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
-  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;
   opacity: 1;
   opacity: 1;
   color: var(--wp--custom--button--color--text);
   color: var(--wp--custom--button--color--text);
   background-color: var(--wp--custom--button--color--background);
   background-color: var(--wp--custom--button--color--background);

+ 11 - 15
blockbase/sass/blocks/_button-mixins.scss

@@ -1,8 +1,8 @@
 // NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere.  This can be removed when those no longer exist.
 // NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere.  This can be removed when those no longer exist.
 // See https://github.com/WordPress/gutenberg/issues/29167
 // See https://github.com/WordPress/gutenberg/issues/29167
 @mixin button-main-styles {
 @mixin button-main-styles {
+
 	@include button-padding-styles;
 	@include button-padding-styles;
-	@include button-typography-styles;
 	@include button-color-styles;
 	@include button-color-styles;
 	border-radius: var(--wp--custom--button--border--radius);
 	border-radius: var(--wp--custom--button--border--radius);
 }
 }
@@ -11,7 +11,8 @@
 	opacity: 1;
 	opacity: 1;
 	color: var(--wp--custom--button--color--text);
 	color: var(--wp--custom--button--color--text);
 	background-color: var(--wp--custom--button--color--background);
 	background-color: var(--wp--custom--button--color--background);
-	border-color: currentColor;
+	border-color: currentcolor;
+
 	svg {
 	svg {
 		fill: var(--wp--custom--button--color--text);
 		fill: var(--wp--custom--button--color--text);
 	}
 	}
@@ -21,18 +22,10 @@
 //standard and outline buttons are equal.
 //standard and outline buttons are equal.
 @mixin button-padding-styles {
 @mixin button-padding-styles {
 	border-width: 0;
 	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) );
-}
-
-@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
+	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));
 }
 }
 
 
 //apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
 //apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
@@ -52,6 +45,7 @@
 @mixin button-hover-styles {
 @mixin button-hover-styles {
 	//The following changes should ONLY be changed if the user has NOT set a custom color
 	//The following changes should ONLY be changed if the user has NOT set a custom color
 	&:not(.has-background):not(.has-text-color) {
 	&:not(.has-background):not(.has-text-color) {
+
 		&:hover,
 		&:hover,
 		&:focus,
 		&:focus,
 		&.has-focus {
 		&.has-focus {
@@ -59,6 +53,7 @@
 			--wp--custom--button--color--text: var(--wp--custom--button--hover--color--text);
 			--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--color--background: var(--wp--custom--button--hover--color--background);
 			--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
 			--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
+
 			@include button-color-styles;
 			@include button-color-styles;
 			border-color: var(--wp--custom--button--border--color);
 			border-color: var(--wp--custom--button--border--color);
 		}
 		}
@@ -67,11 +62,12 @@
 
 
 //Mixins for the alternative outline style
 //Mixins for the alternative outline style
 @mixin button-outline-hover-styles {
 @mixin button-outline-hover-styles {
+
 	&:hover,
 	&:hover,
 	&:focus,
 	&:focus,
 	&.has-focus {
 	&.has-focus {
 		border-style: var(--wp--custom--button--border--style);
 		border-style: var(--wp--custom--button--border--style);
-		border-color: currentColor;
+		border-color: currentcolor;
 		border-width: var(--wp--custom--button--border--width);
 		border-width: var(--wp--custom--button--border--width);
 		padding-top: var(--wp--custom--button--spacing--padding--top);
 		padding-top: var(--wp--custom--button--spacing--padding--top);
 		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
 		padding-bottom: var(--wp--custom--button--spacing--padding--bottom);