gutenberg / build / styles / preferences / style.css

style.css in Gutenberg 23.4.0, at build/styles/preferences/style.css

161 lines 2.9 KB

Raw Download Zip

1	/**
2	* SCSS Variables.
3	*
4	* Please use variables from this sheet to ensure consistency across the UI.
5	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
6	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
7	*/
8	/**
9	* Colors
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	.preference-base-option + .preference-base-option {
47	margin-top: 16px;
48	}
49
50	/**
51	* Breakpoints & Media Queries
52	*/
53	/**
54	* Typography
55	*/
56	/**
57	* Converts a hex value into the rgb equivalent.
58	*
59	* @param {string} hex - the hexadecimal value to convert
60	* @return {string} comma separated rgb values
61	*/
62	/**
63	* Long content fade mixin
64	*
65	* Creates a fading overlay to signify that the content is longer
66	* than the space allows.
67	*/
68	/**
69	* Breakpoint mixins
70	*/
71	/**
72	* Focus styles.
73	*/
74	/**
75	* Applies editor left position to the selector passed as argument
76	*/
77	/**
78	* Styles that are reused verbatim in a few places
79	*/
80	/**
81	* Allows users to opt-out of animations via OS-level preferences.
82	*/
83	/**
84	* Reset default styles for JavaScript UI based pages.
85	* This is a WP-admin agnostic reset
86	*/
87	/**
88	* Reset the WP Admin page styles for Gutenberg-like pages.
89	*/
90	/**
91	* Creates a checkerboard pattern background to indicate transparency.
92	* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
93	*/
94	@media (min-width: 600px) {
95	.preferences-modal {
96	width: calc(100% - 32px);
97	height: calc(100% - 128px);
98	}
99	}
100	@media (min-width: 782px) {
101	.preferences-modal {
102	width: 750px;
103	}
104	}
105	@media (min-width: 960px) {
106	.preferences-modal {
107	height: 70%;
108	}
109	}
110	@media (max-width: 781px) {
111	.preferences-modal .components-modal__content {
112	padding: 0;
113	}
114	}
115
116	.preferences__tabs-tablist {
117	position: absolute !important;
118	top: 88px;
119	left: 16px;
120	width: 160px;
121	}
122
123	.preferences__tabs-tabpanel {
124	padding-left: 24px;
125	margin-left: 160px;
126	}
127
128	@media (max-width: 781px) {
129	.preferences__provider {
130	height: 100%;
131	}
132	}
133	.preferences-modal__section {
134	border: 0;
135	padding: 0;
136	margin: 0 0 2.5rem 0;
137	}
138	.preferences-modal__section:last-child {
139	margin: 0;
140	}
141
142	.preferences-modal__section-legend {
143	margin-bottom: 8px;
144	}
145
146	.preferences-modal__section-title {
147	font-size: 0.9rem;
148	font-weight: 600;
149	margin-top: 0;
150	}
151
152	.preferences-modal__section-description {
153	margin: -8px 0 8px 0;
154	font-size: 12px;
155	font-style: normal;
156	color: #757575;
157	}
158
159	.preferences-modal__section:has(.preferences-modal__section-content:empty) {
160	display: none;
161	}