gutenberg / build / styles / block-library / search / style.css

style.css in Gutenberg trunk, at build/styles/block-library/search/style.css

156 lines 3.5 KB

Raw Download Zip

1	/**
2	* Colors
3	*/
4	/**
5	* SCSS Variables.
6	*
7	* Please use variables from this sheet to ensure consistency across the UI.
8	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10	*/
11	/**
12	* Fonts & basic variables.
13	*/
14	/**
15	* Typography
16	*/
17	/**
18	* Grid System.
19	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
20	*/
21	/**
22	* Radius scale.
23	*/
24	/**
25	* Elevation scale.
26	*/
27	/**
28	* Dimensions.
29	*/
30	/**
31	* Mobile specific styles
32	*/
33	/**
34	* Editor styles.
35	*/
36	/**
37	* Block & Editor UI.
38	*/
39	/**
40	* Block paddings.
41	*/
42	/**
43	* React Native specific.
44	* These variables do not appear to be used anywhere else.
45	*/
46	.wp-block-search__button {
47	margin-left: 10px;
48	word-break: normal;
49	}
50	.wp-block-search__button.has-icon {
51	line-height: 0;
52	}
53	.wp-block-search__button svg {
54	min-width: 24px;
55	min-height: 24px;
56	width: 1.25em;
57	height: 1.25em;
58	fill: currentColor;
59	vertical-align: text-bottom;
60	}
61
62	:where(.wp-block-search__button) {
63	border: 1px solid #ccc;
64	padding: 6px 10px;
65	}
66
67	.wp-block-search__inside-wrapper {
68	display: flex;
69	flex: auto;
70	flex-wrap: nowrap;
71	max-width: 100%;
72	}
73
74	:where(.wp-block-search__label) {
75	width: 100%;
76	}
77
78	.wp-block-search.wp-block-search__button-only .wp-block-search__button {
79	margin-left: 0;
80	flex-shrink: 0;
81	max-width: 100%;
82	box-sizing: border-box;
83	display: flex;
84	justify-content: center;
85	}
86	.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
87	transition-property: width;
88	min-width: 0 !important;
89	}
90	.wp-block-search.wp-block-search__button-only .wp-block-search__input {
91	transition-duration: 300ms;
92	flex-basis: 100%;
93	}
94	.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden {
95	overflow: hidden;
96	}
97	.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
98	overflow: hidden;
99	}
100	.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
101	width: 0 !important;
102	min-width: 0 !important;
103	padding-left: 0 !important;
104	padding-right: 0 !important;
105	border-left-width: 0 !important;
106	border-right-width: 0 !important;
107	flex-grow: 0;
108	margin: 0;
109	flex-basis: 0;
110	}
111
112	:where(.wp-block-search__input) {
113	font-family: inherit;
114	font-weight: inherit;
115	font-size: inherit;
116	line-height: inherit;
117	letter-spacing: inherit;
118	text-transform: inherit;
119	font-style: inherit;
120	padding: 8px;
121	flex-grow: 1;
122	margin-left: 0;
123	margin-right: 0;
124	min-width: 3rem;
125	border: 1px solid #949494;
126	text-decoration: unset !important;
127	appearance: initial;
128	}
129
130	:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
131	padding: 4px;
132	border-width: 1px;
133	border-style: solid;
134	border-color: #949494;
135	background-color: #fff;
136	box-sizing: border-box;
137	}
138	:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
139	border-radius: 0;
140	border: none;
141	padding: 0 4px;
142	}
143	:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
144	outline: none;
145	}
146	:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
147	padding: 4px 8px;
148	}
149
150	.wp-block-search.aligncenter .wp-block-search__inside-wrapper {
151	margin: auto;
152	}
153
154	.wp-block[data-align=right] .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
155	float: right;
156	}