balmet.com

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

_style.scss (2785B)

      1 .wp-block-search {
      2 	max-width: var(--responsive--aligndefault-width);
      3 
      4 	&__button-only.aligncenter {
      5 
      6 		.wp-block-search__inside-wrapper {
      7 			justify-content: center;
      8 		}
      9 	}
     10 
     11 	.wp-block-search__label {
     12 		font-size: var(--form--font-size);
     13 		font-weight: var(--form--label-weight);
     14 		margin-bottom: calc(var(--global--spacing-vertical) / 3);
     15 	}
     16 
     17 	.wp-block-search__input {
     18 		border: var(--form--border-width) solid var(--form--border-color);
     19 		border-radius: var(--form--border-radius);
     20 		color: var(--form--color-text);
     21 		line-height: var(--form--line-height);
     22 		max-width: inherit;
     23 		margin-right: calc(-1 * var(--button--border-width));
     24 		padding: var(--form--spacing-unit);
     25 
     26 		&:focus {
     27 			color: var(--form--color-text);
     28 			border-color: var(--form--border-color);
     29 		}
     30 
     31 		.has-background & {
     32 			border-color: var(--local--color-primary, var(--global--color-primary)) !important;
     33 		}
     34 	}
     35 
     36 	button.wp-block-search__button {
     37 		margin-left: 0;
     38 		line-height: 1;
     39 
     40 		&.has-icon {
     41 			padding: 6px calc(0.5 * var(--button--padding-horizontal));
     42 
     43 			svg {
     44 				width: 40px;
     45 				height: 40px;
     46 				fill: currentColor;
     47 			}
     48 		}
     49 
     50 		&:hover,
     51 		&:active {
     52 
     53 			.has-background & {
     54 				background-color: var(--local--color-background, var(--global--color-background)) !important;
     55 				color: var(--local--color-primary, var(--global--color-primary)) !important;
     56 			}
     57 
     58 			.has-text-color & {
     59 				color: var(--local--color-primary, var(--global--color-primary)) !important;
     60 			}
     61 		}
     62 	}
     63 
     64 	&.wp-block-search__button-inside {
     65 
     66 		.wp-block-search__inside-wrapper {
     67 			background-color: var(--global--color-white);
     68 			border: var(--form--border-width) solid var(--form--border-color);
     69 			border-radius: var(--form--border-radius);
     70 			padding: var(--form--border-width);
     71 
     72 			.has-background & {
     73 				border-color: var(--local--color-primary, var(--global--color-primary)) !important;
     74 			}
     75 
     76 			.wp-block-search__input {
     77 				margin-left: 0;
     78 				margin-right: 0;
     79 				padding-left: var(--form--spacing-unit);
     80 
     81 				// Add outline for focus styles to override default
     82 				&:focus {
     83 					color: var(--form--color-text);
     84 					outline-offset: -2px;
     85 					outline: 2px dotted var(--form--border-color);
     86 				}
     87 			}
     88 
     89 			button.wp-block-search__button {
     90 				padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     91 
     92 				// Search button always needs black contrast against white form background
     93 				&:hover {
     94 					color: var(--global--color-dark-gray);
     95 				}
     96 
     97 				.is-dark-theme & {
     98 					color: var(--global--color-dark-gray);
     99 
    100 					&:hover {
    101 						background-color: var(--global--color-dark-gray);
    102 						color: var(--global--color-white);
    103 					}
    104 				}
    105 
    106 				&.has-icon {
    107 					padding: 6px calc(0.5 * var(--button--padding-horizontal));
    108 				}
    109 			}
    110 		}
    111 	}
    112 }
    113 
    114 .wp-block-search__button {
    115 	box-shadow: none;
    116 }