balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

_editor.scss (3112B)

      1 .wp-block-button__link {
      2 	// Extend button style
      3 	@include button-style();
      4 }
      5 
      6 /**
      7  * Block Options
      8  */
      9 
     10 // The parent container does not need outer margins applied.
     11 // The children should all have top and bottom margins.
     12 [data-block].wp-block-buttons {
     13 	margin-top: 0;
     14 	margin-bottom: 0;
     15 
     16 	.wp-block-button:first-child {
     17 		margin-top: var(--global--spacing-vertical);
     18 	}
     19 
     20 	.wp-block-button:last-child {
     21 		margin-bottom: var(--global--spacing-vertical);
     22 	}
     23 }
     24 
     25 .wp-block-button {
     26 
     27 	// Target the default and filled button states.
     28 	&:not(.is-style-outline) {
     29 
     30 		.wp-block-button__link:not(:hover):not(:active) {
     31 
     32 			// Text colors
     33 			&:not(.has-text-color) {
     34 				color: var(--global--color-background);
     35 
     36 				// Nested
     37 				.has-background & {
     38 					color: var(--local--color-background, var(--global--color-background));
     39 
     40 					&.has-background {
     41 						color: var(--global--color-primary);
     42 					}
     43 				}
     44 			}
     45 
     46 			// Background-colors
     47 			&:not(.has-background) {
     48 				background-color: var(--global--color-primary);
     49 
     50 				// Nested
     51 				.has-background & {
     52 					background-color: var(--local--color-primary, var(--global--color-primary));
     53 				}
     54 			}
     55 		}
     56 
     57 		// Hover Button color should match parent element foreground color
     58 		.wp-block-button__link:hover,
     59 		.wp-block-button__link:active {
     60 			border-color: currentColor !important;
     61 			background-color: transparent !important;
     62 			color: inherit !important;
     63 		}
     64 
     65 		// Remove :focus styles in the editor
     66 		.wp-block-button__link:focus {
     67 			outline-offset: inherit;
     68 			outline: inherit;
     69 		}
     70 	}
     71 
     72 	// Outline Style.
     73 	&.is-style-outline {
     74 
     75 		.wp-block-button__link:not(:hover):not(:active) {
     76 
     77 			// Border colors
     78 			&:not(.has-text-color),
     79 			&:not(.has-background),
     80 			&.has-background {
     81 				border-color: currentColor;
     82 			}
     83 
     84 			// Text colors
     85 			&:not(.has-text-color) {
     86 				color: var(--global--color-primary);
     87 
     88 				// Nested
     89 				.has-background & {
     90 					color: var(--local--color-primary, var(--global--color-primary));
     91 				}
     92 			}
     93 
     94 			&.has-background {
     95 				// Nested
     96 				.has-background &:not(.has-text-color) {
     97 					color: inherit;
     98 				}
     99 			}
    100 
    101 			// Background-colors
    102 			&:not(.has-background) {
    103 				background-color: transparent;
    104 			}
    105 		}
    106 
    107 		// Hover Button color should match default button style
    108 		.wp-block-button__link:hover,
    109 		.wp-block-button__link:active {
    110 
    111 			background-color: var(--global--color-primary) !important;
    112 			border-color: transparent !important;
    113 			color: var(--global--color-background) !important;
    114 
    115 			.has-background & {
    116 				background-color: var(--local--color-primary, var(--global--color-primary)) !important;
    117 				color: var(--local--color-background, var(--global--color-background)) !important;
    118 			}
    119 
    120 			.has-text-color & {
    121 				color: var(--local--color-background, var(--global--color-background)) !important;
    122 			}
    123 		}
    124 
    125 		// Remove :focus styles in the editor
    126 		.wp-block-button__link:focus {
    127 			outline-offset: inherit;
    128 			outline: inherit;
    129 		}
    130 	}
    131 
    132 	// Squared Style
    133 	&.is-style-squared {
    134 		border-radius: 0;
    135 	}
    136 }
    137 
    138 .is-style-outline .wp-block-button__link[style*="radius"],
    139 .wp-block-button__link[style*="radius"] {
    140 	outline-offset: 2px;
    141 }