balmet.com

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

_style.scss (2734B)

      1 /**
      2  * Button
      3  */
      4 .site .button,
      5 button,
      6 input[type="submit"],
      7 input[type="reset"],
      8 .wp-block-search .wp-block-search__button,
      9 .wp-block-button .wp-block-button__link,
     10 .wp-block-file a.wp-block-file__button {
     11 	// Extend button style
     12 	@include button-style();
     13 }
     14 
     15 /**
     16  * Block Options
     17  */
     18 .wp-block-button {
     19 
     20 	// Target the default and filled button states.
     21 	&:not(.is-style-outline) {
     22 
     23 		.wp-block-button__link:not(:hover):not(:active) {
     24 
     25 			// Text colors
     26 			&:not(.has-text-color) {
     27 				color: var(--global--color-background);
     28 
     29 				// Nested
     30 				.has-background & {
     31 					color: var(--local--color-background, var(--global--color-background));
     32 
     33 					&.has-background {
     34 						color: var(--global--color-primary);
     35 					}
     36 				}
     37 			}
     38 
     39 			// Background-colors
     40 			&:not(.has-background) {
     41 				background-color: var(--global--color-primary);
     42 
     43 				// Nested
     44 				.has-background & {
     45 					background-color: var(--local--color-primary, var(--global--color-primary));
     46 				}
     47 			}
     48 		}
     49 
     50 		// Hover Button color should match parent element foreground color
     51 		.wp-block-button__link:hover,
     52 		.wp-block-button__link:active {
     53 			border-color: currentColor !important;
     54 			background-color: transparent !important;
     55 			color: inherit !important;
     56 		}
     57 	}
     58 
     59 	// Outline Style.
     60 	&.is-style-outline {
     61 
     62 		.wp-block-button__link:not(:hover):not(:active) {
     63 
     64 			// Border colors
     65 			&:not(.has-text-color),
     66 			&:not(.has-background),
     67 			&.has-background {
     68 				border-color: currentColor;
     69 			}
     70 
     71 			// Text colors
     72 			&:not(.has-text-color) {
     73 				color: var(--global--color-primary);
     74 
     75 				// Nested
     76 				.has-background & {
     77 					color: var(--local--color-primary, var(--global--color-primary));
     78 				}
     79 			}
     80 
     81 			&.has-background {
     82 				// Nested
     83 				.has-background &:not(.has-text-color) {
     84 					color: inherit;
     85 				}
     86 			}
     87 
     88 			// Background-colors
     89 			&:not(.has-background) {
     90 				background-color: transparent;
     91 			}
     92 		}
     93 
     94 		.wp-block-button__link:hover,
     95 		.wp-block-button__link:active {
     96 
     97 			border-color: transparent !important;
     98 			background-color: var(--global--color-primary) !important;
     99 			color: var(--global--color-background) !important;
    100 
    101 			.has-background & {
    102 				background-color: var(--local--color-primary, var(--global--color-primary)) !important;
    103 				color: var(--local--color-background, var(--global--color-background)) !important;
    104 			}
    105 
    106 			.has-text-color & {
    107 				color: var(--local--color-background, var(--global--color-background)) !important;
    108 			}
    109 		}
    110 	}
    111 
    112 	// Squared Style
    113 	.is-style-squared .wp-block-button__link {
    114 		border-radius: 0;
    115 	}
    116 }
    117 
    118 .is-style-outline .wp-block-button__link[style*="radius"]:focus,
    119 .wp-block-button a.wp-block-button__link[style*="radius"]:focus {
    120 	outline-offset: 2px;
    121 	outline: 2px dotted var(--button--color-background);
    122 }