angelovcom.net

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

_editor.scss (2625B)

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