gutenberg / build / styles / preferences / style.css

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

167 lines 3.1 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	* Standard focus rings for the WordPress Design System.
76	*
77	* Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
78	* e.g. `&:focus { @include outset-ring__focus(); }`.
79	*/
80	/**
81	* Applies editor left position to the selector passed as argument
82	*/
83	/**
84	* Styles that are reused verbatim in a few places
85	*/
86	/**
87	* Allows users to opt-out of animations via OS-level preferences.
88	*/
89	/**
90	* Reset default styles for JavaScript UI based pages.
91	* This is a WP-admin agnostic reset
92	*/
93	/**
94	* Reset the WP Admin page styles for Gutenberg-like pages.
95	*/
96	/**
97	* Creates a checkerboard pattern background to indicate transparency.
98	* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
99	*/
100	@media (min-width: 600px) {
101	.preferences-modal {
102	width: calc(100% - 32px);
103	height: calc(100% - 128px);
104	}
105	}
106	@media (min-width: 782px) {
107	.preferences-modal {
108	width: 750px;
109	}
110	}
111	@media (min-width: 960px) {
112	.preferences-modal {
113	height: 70%;
114	}
115	}
116	@media (max-width: 781px) {
117	.preferences-modal .components-modal__content {
118	padding: 0;
119	}
120	}
121
122	.preferences__tabs-tablist {
123	position: absolute !important;
124	top: 88px;
125	left: 16px;
126	width: 160px;
127	}
128
129	.preferences__tabs-tabpanel {
130	padding-left: 24px;
131	margin-left: 160px;
132	}
133
134	@media (max-width: 781px) {
135	.preferences__provider {
136	height: 100%;
137	}
138	}
139	.preferences-modal__section {
140	border: 0;
141	padding: 0;
142	margin: 0 0 2.5rem 0;
143	}
144	.preferences-modal__section:last-child {
145	margin: 0;
146	}
147
148	.preferences-modal__section-legend {
149	margin-bottom: 8px;
150	}
151
152	.preferences-modal__section-title {
153	font-size: 0.9rem;
154	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
155	margin-top: 0;
156	}
157
158	.preferences-modal__section-description {
159	margin: -8px 0 8px 0;
160	font-size: 12px;
161	font-style: normal;
162	color: #757575;
163	}
164
165	.preferences-modal__section:has(.preferences-modal__section-content:empty) {
166	display: none;
167	}