Skip to content

Commit 4637f90

Browse files
donnapepdonnapep
committed
AI reorg of button styles to reduce complexity
1 parent e7cf660 commit 4637f90

File tree

1 file changed

+125
-162
lines changed

1 file changed

+125
-162
lines changed

‎assets/css/learning-mode-compat.scss

Lines changed: 125 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,131 @@ $breakpoint: 782px;
2929
font-size: clamp(2.25rem, 1.536rem + 1.905vw, 3.25rem);
3030
line-height: 1.23;
3131
}
32+
33+
/* Button Styles */
34+
.wp-block-button,
35+
.sensei-course-theme__button {
36+
cursor: pointer;
37+
font-family: var(--wp--preset--font-family--body-font);
38+
font-size: 1.125rem;
39+
font-weight: 400;
40+
letter-spacing: normal;
41+
margin: 0;
42+
text-align: center;
43+
text-decoration: none !important;
44+
text-transform: unset;
45+
46+
/* Common button link styles */
47+
.wp-block-button__link,
48+
&.is-primary,
49+
&.is-secondary,
50+
&.is-link {
51+
border-radius: 2px;
52+
box-sizing: border-box;
53+
border-style: solid;
54+
border-width: 1px;
55+
display: inline-block;
56+
font-weight: 400;
57+
height: 100%;
58+
justify-content: center;
59+
padding: 0.83em 1.11em;
60+
text-decoration: none;
61+
62+
@media screen and (max-width: $breakpoint) {
63+
padding: 0.83em 0.556em;
64+
}
65+
}
66+
67+
/* Primary/Fill Button Style */
68+
&:not(.is-style-outline):not(.is-style-link) .wp-block-button__link,
69+
&.is-primary {
70+
background-color: var(--sensei-secondary-color);
71+
border-color: var(--sensei-secondary-color);
72+
color: var(--sensei-button-text-color);
73+
74+
&:not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover {
75+
background-color: var(--sensei-primary-color);
76+
border-color: var(--sensei-primary-color);
77+
color: var(--sensei-button-fill-hover-color);
78+
}
79+
80+
&:focus-visible {
81+
border: 1px solid var(--sensei-button-fill-hover-color);
82+
box-shadow: 0px 0px 0px 1.5px var(--sensei-secondary-color);
83+
}
84+
}
85+
86+
/* Outline Button Style */
87+
&.is-style-outline .wp-block-button__link,
88+
&.is-secondary {
89+
background-color: transparent;
90+
border-color: var(--sensei-primary-color);
91+
color: var(--sensei-primary-color);
92+
93+
&:hover {
94+
background-color: var(--sensei-button-outline-hover-color);
95+
}
96+
97+
&:focus-visible {
98+
border-width: 1.5px;
99+
}
100+
}
101+
102+
/* Link Button Style */
103+
&.is-style-link .wp-block-button__link,
104+
&.is-link {
105+
background: none;
106+
border: none;
107+
color: var(--sensei-primary-color);
108+
line-height: 1em;
109+
110+
&:hover {
111+
background-color: var(--sensei-button-outline-hover-color);
112+
color: var(--sensei-primary-color) !important;
113+
}
114+
115+
&:focus-visible {
116+
border: solid 1.5px var(--sensei-secondary-color);
117+
}
118+
}
119+
120+
/* Button States */
121+
&[aria-disabled='true'],
122+
&:disabled {
123+
cursor: not-allowed;
124+
opacity: 0.5;
125+
pointer-events: none;
126+
}
127+
128+
&.is-completed {
129+
&.is-primary {
130+
background: var(--text-color) !important;
131+
border-color: var(--text-color) !important;
132+
color: var(--bg-color) !important;
133+
opacity: 0.8;
134+
}
135+
136+
&.is-secondary {
137+
display: flex;
138+
opacity: 1;
139+
}
140+
}
141+
142+
&.is-busy {
143+
animation: components-button__busy-animation 25000ms infinite linear;
144+
background-image: linear-gradient(
145+
-45deg,
146+
rgba(255, 255, 255, 0.5) 28%,
147+
rgba(255, 255, 255, 0.1) 28%,
148+
rgba(255, 255, 255, 0.1) 72%,
149+
rgba(255, 255, 255, 0.5) 72%
150+
);
151+
152+
&:disabled {
153+
cursor: not-allowed;
154+
}
155+
}
156+
}
32157
}
33158

34159
/* Header */
@@ -125,168 +250,6 @@ $breakpoint: 782px;
125250
color: var(--sensei-lesson-meta-color);
126251
}
127252

128-
/* Buttons */
129-
.sensei-course-theme {
130-
a, button {
131-
&:focus {
132-
outline: none;
133-
}
134-
135-
&:focus-visible {
136-
transition: none;
137-
outline: dashed 1px var(--sensei-primary-color);
138-
}
139-
}
140-
}
141-
142-
.editor-styles-wrapper .sensei-course-theme__main-content .wp-block-button,
143-
.sensei-course-theme .wp-block-button,
144-
.sensei-course-theme__button {
145-
cursor: pointer;
146-
font-family: var(--wp--preset--font-family--body-font);
147-
font-size: 1.125rem;
148-
font-weight: 400;
149-
letter-spacing: normal;
150-
margin: 0;
151-
text-align: center;
152-
text-decoration: none !important;
153-
text-transform: unset;
154-
155-
.wp-block-button__link {
156-
background-color: var(--sensei-secondary-color);
157-
border: solid 1px var(--sensei-secondary-color);
158-
color: var(--sensei-button-text-color);
159-
font-family: inherit;
160-
font-size: inherit;
161-
font-weight: inherit;
162-
text-transform: unset;
163-
164-
&:hover {
165-
background-color: inherit !important;
166-
color: inherit !important;
167-
text-decoration: none !important;
168-
}
169-
}
170-
171-
&.is-primary,
172-
&.is-secondary,
173-
&.is-link,
174-
&.wp-block-button > .wp-block-button__link {
175-
border-radius: 2px;
176-
box-sizing: border-box;
177-
display: inline-block;
178-
font-weight: 400;
179-
height: 100%;
180-
justify-content: center;
181-
padding: 0.83em 1.11em;
182-
text-decoration: none;
183-
184-
@media screen and (max-width: $breakpoint) {
185-
padding: 0.83em 0.556em;
186-
}
187-
}
188-
189-
&.is-primary,
190-
&.is-secondary,
191-
&.wp-block-button {
192-
&.wp-block-button__link {
193-
border: none;
194-
}
195-
}
196-
197-
&.wp-block-button {
198-
padding: 0;
199-
}
200-
201-
&.is-primary,
202-
&.wp-block-button:not(.is-style-outline, .is-style-link) {
203-
&:not(.sensei-course-theme-quiz-graded-notice__pending-grade):hover {
204-
color: var(--sensei-button-fill-hover-color);
205-
background-color: var(--sensei-primary-color);
206-
border-color: var(--sensei-primary-color);
207-
}
208-
209-
&:focus {
210-
border: 1px solid var(--sensei-button-fill-hover-color);
211-
box-shadow: 0px 0px 0px 1.5px var(--sensei-secondary-color);
212-
}
213-
}
214-
215-
&.is-secondary,
216-
&.wp-block-button.is-style-outline {
217-
--wp--custom--button--border--color: var(--sensei-primary-color);
218-
color: var(--sensei-primary-color);
219-
flex-shrink: 0;
220-
221-
&:hover {
222-
background-color: var(--sensei-button-outline-hover-color);
223-
color: var(--sensei-primary-color);
224-
225-
.wp-block-button__link {
226-
border-color: var(--sensei-primary-color);
227-
}
228-
}
229-
230-
&:focus {
231-
border-width: 1.5px;
232-
}
233-
}
234-
235-
&.is-link {
236-
background: none;
237-
color: var(--sensei-primary-color);
238-
line-height: 1em;
239-
padding: 0.83em 1.11em;
240-
241-
&:hover {
242-
background-color: var(--sensei-button-outline-hover-color);
243-
color: var(--sensei-primary-color) !important;
244-
}
245-
246-
&:focus {
247-
border: solid 1.5px var(--sensei-secondary-color);
248-
}
249-
250-
@media screen and (max-width: $breakpoint) {
251-
padding: 0.83em 0.556em;
252-
}
253-
}
254-
255-
&[aria-disabled='true'],
256-
&:disabled {
257-
opacity: 0.5;
258-
pointer-events: none;
259-
cursor: not-allowed;
260-
}
261-
262-
&.is-completed.is-primary {
263-
opacity: 0.8;
264-
color: var(--bg-color) !important;
265-
background: var(--text-color) !important;
266-
border-color: var(--text-color) !important;
267-
}
268-
269-
&.is-completed.is-secondary {
270-
display: flex;
271-
opacity: 1;
272-
}
273-
274-
&.is-busy {
275-
background-image: linear-gradient(
276-
-45deg,
277-
rgba(255, 255, 255, 0.5) 28%,
278-
rgba(255, 255, 255, 0.1) 28%,
279-
rgba(255, 255, 255, 0.1) 72%,
280-
rgba(255, 255, 255, 0.5) 72%
281-
);
282-
animation: components-button__busy-animation 25000ms infinite linear;
283-
284-
&:disabled {
285-
cursor: not-allowed;
286-
}
287-
}
288-
}
289-
290253
.sensei-course-theme,
291254
.editor-styles-wrapper {
292255
.wp-block-sensei-lms-lesson-actions {

0 commit comments

Comments
 (0)