瀏覽代碼

Try applying file block styles in the editor.

Jeff Ong 4 年之前
父節點
當前提交
25c8c6e6fe

+ 71 - 1
seedlet/assets/css/style-editor.css

@@ -317,6 +317,45 @@ a {
 	cursor: pointer;
 }
 
+.wp-block-search .wp-block-search__button, .wp-block-a8c-blog-posts + .button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before, .wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-search .wp-block-search__button:active, .wp-block-a8c-blog-posts + .button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-search .wp-block-search__button:hover, .wp-block-a8c-blog-posts + .button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-a8c-blog-posts + .button:focus, .wp-block-search .has-focus.wp-block-search__button, .wp-block-a8c-blog-posts + .has-focus.button {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
 body {
 	--wp--typography--line-height: var(--global--line-height-body);
 	color: var(--global--color-foreground);
@@ -551,17 +590,48 @@ div[data-type="core/button"] {
 	text-decoration: none;
 }
 
+.wp-block-file .wp-block-file__button-richtext-wrapper {
+	display: block;
+	margin-left: 0;
+}
+
 .wp-block-file .wp-block-file__button {
+	line-height: var(--button--line-height);
 	color: var(--button--color-text);
+	cursor: pointer;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	line-height: var(--button--line-height);
 	background-color: var(--button--color-background);
 	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	display: inline-block;
+	margin: calc( 0.5 * var(--global--spacing-unit)) 0 0 0;
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
+.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-file .wp-block-file__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-file .wp-block-file__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-file .wp-block-file__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
 .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);

文件差異過大導致無法顯示
+ 1 - 1
seedlet/assets/css/style-editor.css.map


+ 2 - 1
seedlet/assets/sass/base/_editor.scss

@@ -1,5 +1,6 @@
 @import '../structure/responsive-logic';
-@import '../base/base';
+@import 'base';
+@import 'extends';
 
 body {
 	--wp--typography--line-height: var(--global--line-height-body);

+ 10 - 15
seedlet/assets/sass/blocks/file/_editor.scss

@@ -1,26 +1,21 @@
 .wp-block-file {
-
 	.wp-block-file__textlink {
 		border-bottom: 1px solid var(--global--color-secondary);
 		color: var(--global--color-primary);
 		text-decoration: none;
 	}
 
+	.wp-block-file__button-richtext-wrapper {
+		display: block;
+		margin-left: 0;
+	}
+
 	.wp-block-file__button {
-		color: var(--button--color-text);
-		font-weight: var(--button--font-weight);
-		font-family: var(--button--font-family);
-		font-size: var(--button--font-size);
-		line-height: var(--button--line-height);
-		background-color: var(--button--color-background);
-		border-radius: var(--button--border-radius);
-		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+		// Extend button style
+		@include button-style;
 
-		&:hover,
-		&:focus,
-		&.has-focus {
-			color: var(--button--color-text-hover);
-			background-color: var(--button--color-background-hover);
-		}
+		display: inline-block;
+		margin: calc( 0.5 * var(--global--spacing-unit) ) 0 0 0;
+		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 	}
 }

部分文件因文件數量過多而無法顯示