Skip to content

Commit f25ce8d

Browse files
harunollyoharunollyo
authored
Merge pull request #2324 from themeum/v4-learning-area-lesson
Learning area lesson page implemented
2 parents aaf2770 + 2d11506 commit f25ce8d

File tree

46 files changed

+2794
-882
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2794
-882
lines changed

‎assets/core/scss/components/_tabs.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
gap: $tutor-spacing-2;
99
overflow-x: auto;
1010
overflow-y: hidden;
11-
11+
position: relative;
1212
scrollbar-width: none;
1313
-ms-overflow-style: none;
1414

@@ -49,15 +49,19 @@
4949
color: $tutor-text-brand;
5050
}
5151

52-
&:hover {
52+
&:hover,
53+
&:focus {
5354
background-color: $tutor-tab-l3-active-hover;
5455
color: $tutor-text-primary;
56+
box-shadow: none;
5557
}
5658
}
5759

58-
&:hover:not(:disabled):not(.tutor-tabs-tab-active) {
60+
&:hover:not(:disabled):not(.tutor-tabs-tab-active),
61+
&:focus:not(:disabled):not(.tutor-tabs-tab-active) {
5962
color: $tutor-text-primary;
6063
background-color: $tutor-tab-l3-active-hover;
64+
box-shadow: none;
6165

6266
svg {
6367
color: $tutor-text-primary;

‎assets/core/scss/components/_tooltip.scss‎

Lines changed: 81 additions & 223 deletions
Original file line numberDiff line numberDiff line change
@@ -1,282 +1,140 @@
11
// Tooltip Component
22
// RTL-aware tooltip positioning and styling
33

4+
@use '../tokens' as *;
45
@use '../mixins' as *;
56
@use '../mixins/rtl' as rtl;
67

8+
.tutor-tooltip-wrap {
9+
position: relative;
10+
display: inline-block;
11+
12+
&:hover {
13+
.tutor-tooltip:not([x-data]) {
14+
opacity: 1;
15+
visibility: visible;
16+
}
17+
}
18+
}
19+
720
.tutor-tooltip {
8-
position: absolute;
21+
@include tutor-typography('tiny', 'regular', 'primary-inverse');
22+
position: fixed;
923
z-index: 1070;
1024
max-width: 200px;
11-
padding: var(--tutor-spacing-2, 4px) var(--tutor-spacing-3, 6px);
12-
font-size: var(--tutor-font-size-p3, 12px);
13-
line-height: var(--tutor-line-height-p3, 18px);
14-
color: var(--tutor-text-inverse);
15-
background-color: var(--tutor-gray-900);
16-
border-radius: var(--tutor-radius-sm, 4px);
17-
box-shadow: var(--tutor-shadow-md);
25+
padding: $tutor-spacing-4;
26+
background-color: $tutor-surface-dark;
27+
border-radius: $tutor-radius-sm;
28+
box-shadow: $tutor-shadow-md;
1829
word-wrap: break-word;
19-
20-
// Default text alignment
21-
@include rtl.text-align-start();
30+
text-align: start;
31+
32+
&-large {
33+
max-width: 320px;
34+
padding: $tutor-spacing-5;
35+
}
36+
37+
&-arrow-start {
38+
&.tutor-tooltip-top,
39+
&.tutor-tooltip-bottom {
40+
&::before {
41+
@include rtl.arrow-start($tutor-spacing-5);
42+
}
43+
}
44+
}
45+
46+
&-arrow-center {
47+
&.tutor-tooltip-top,
48+
&.tutor-tooltip-bottom {
49+
&::before {
50+
left: 50%;
51+
right: auto;
52+
transform: translateX(-50%);
53+
}
54+
}
55+
}
56+
57+
&-arrow-end {
58+
&.tutor-tooltip-top,
59+
&.tutor-tooltip-bottom {
60+
&::before {
61+
@include rtl.arrow-end($tutor-spacing-5);
62+
}
63+
}
64+
}
2265

23-
// Arrow base styles
2466
&::before {
2567
content: '';
2668
position: absolute;
2769
width: 0;
2870
height: 0;
29-
border: 4px solid transparent;
71+
border: 6px solid transparent;
3072
}
3173

32-
// Top positioning
33-
&--top {
34-
margin-bottom: 4px;
35-
74+
&-top {
75+
margin-bottom: $tutor-spacing-2;
76+
3677
&::before {
3778
top: 100%;
38-
border-top-color: var(--tutor-gray-900);
79+
border-top-color: $tutor-surface-dark;
3980
border-bottom: none;
40-
41-
@include rtl.arrow-start(12px);
42-
}
43-
44-
&.tutor-tooltip--center::before {
45-
left: 50%;
46-
right: auto;
47-
transform: translateX(-50%);
48-
}
49-
50-
&.tutor-tooltip--end::before {
51-
@include rtl.arrow-end(12px);
5281
}
5382
}
5483

55-
// Bottom positioning
56-
&--bottom {
57-
margin-top: 4px;
58-
84+
&-bottom {
85+
margin-top: $tutor-spacing-2;
86+
5987
&::before {
6088
bottom: 100%;
61-
border-bottom-color: var(--tutor-gray-900);
89+
border-bottom-color: $tutor-surface-dark;
6290
border-top: none;
63-
64-
@include rtl.arrow-start(12px);
65-
}
66-
67-
&.tutor-tooltip--center::before {
68-
left: 50%;
69-
right: auto;
70-
transform: translateX(-50%);
71-
}
72-
73-
&.tutor-tooltip--end::before {
74-
@include rtl.arrow-end(12px);
7591
}
7692
}
7793

78-
// Left positioning (start in RTL context)
79-
&--start {
80-
[dir="ltr"] & {
81-
margin-right: 4px;
82-
}
83-
[dir="rtl"] & {
84-
margin-left: 4px;
85-
}
86-
94+
&-start {
95+
margin-inline-end: $tutor-spacing-2;
96+
8797
&::before {
8898
top: 50%;
99+
inset-inline-start: 100%;
100+
border-inline-start-color: $tutor-surface-dark;
89101
transform: translateY(-50%);
90-
91-
[dir="ltr"] & {
92-
left: 100%;
93-
border-left-color: var(--tutor-gray-900);
94-
border-right: none;
95-
}
96-
[dir="rtl"] & {
97-
right: 100%;
98-
border-right-color: var(--tutor-gray-900);
99-
border-left: none;
100-
}
101102
}
102103
}
103104

104-
// Right positioning (end in RTL context)
105-
&--end {
106-
[dir="ltr"] & {
107-
margin-left: 4px;
108-
}
109-
[dir="rtl"] & {
110-
margin-right: 4px;
111-
}
112-
105+
&-end {
106+
margin-inline-start: $tutor-spacing-2;
107+
113108
&::before {
114109
top: 50%;
110+
inset-inline-end: 100%;
111+
border-inline-end-color: $tutor-surface-dark;
115112
transform: translateY(-50%);
116-
117-
[dir="ltr"] & {
118-
right: 100%;
119-
border-right-color: var(--tutor-gray-900);
120-
border-left: none;
121-
}
122-
[dir="rtl"] & {
123-
left: 100%;
124-
border-left-color: var(--tutor-gray-900);
125-
border-right: none;
126-
}
127-
}
128-
}
129-
130-
// Theme variants
131-
&--light {
132-
color: var(--tutor-text-primary);
133-
background-color: var(--tutor-surface-l1);
134-
border: 1px solid var(--tutor-border-idle);
135-
136-
&.tutor-tooltip--top::before {
137-
border-top-color: var(--tutor-surface-l1);
138-
}
139-
140-
&.tutor-tooltip--bottom::before {
141-
border-bottom-color: var(--tutor-surface-l1);
142-
}
143-
144-
&.tutor-tooltip--start::before {
145-
[dir="ltr"] & {
146-
border-left-color: var(--tutor-surface-l1);
147-
}
148-
[dir="rtl"] & {
149-
border-right-color: var(--tutor-surface-l1);
150-
}
151-
}
152-
153-
&.tutor-tooltip--end::before {
154-
[dir="ltr"] & {
155-
border-right-color: var(--tutor-surface-l1);
156-
}
157-
[dir="rtl"] & {
158-
border-left-color: var(--tutor-surface-l1);
159-
}
160-
}
161-
}
162-
163-
&--error {
164-
background-color: var(--tutor-error);
165-
166-
&.tutor-tooltip--top::before {
167-
border-top-color: var(--tutor-error);
168-
}
169-
170-
&.tutor-tooltip--bottom::before {
171-
border-bottom-color: var(--tutor-error);
172-
}
173-
174-
&.tutor-tooltip--start::before {
175-
[dir="ltr"] & {
176-
border-left-color: var(--tutor-error);
177-
}
178-
[dir="rtl"] & {
179-
border-right-color: var(--tutor-error);
180-
}
181-
}
182-
183-
&.tutor-tooltip--end::before {
184-
[dir="ltr"] & {
185-
border-right-color: var(--tutor-error);
186-
}
187-
[dir="rtl"] & {
188-
border-left-color: var(--tutor-error);
189-
}
190-
}
191-
}
192-
193-
&--success {
194-
background-color: var(--tutor-success);
195-
196-
&.tutor-tooltip--top::before {
197-
border-top-color: var(--tutor-success);
198-
}
199-
200-
&.tutor-tooltip--bottom::before {
201-
border-bottom-color: var(--tutor-success);
202-
}
203-
204-
&.tutor-tooltip--start::before {
205-
[dir="ltr"] & {
206-
border-left-color: var(--tutor-success);
207-
}
208-
[dir="rtl"] & {
209-
border-right-color: var(--tutor-success);
210-
}
211-
}
212-
213-
&.tutor-tooltip--end::before {
214-
[dir="ltr"] & {
215-
border-right-color: var(--tutor-success);
216-
}
217-
[dir="rtl"] & {
218-
border-left-color: var(--tutor-success);
219-
}
220-
}
221-
}
222-
223-
&--warning {
224-
background-color: var(--tutor-warning);
225-
226-
&.tutor-tooltip--top::before {
227-
border-top-color: var(--tutor-warning);
228-
}
229-
230-
&.tutor-tooltip--bottom::before {
231-
border-bottom-color: var(--tutor-warning);
232-
}
233-
234-
&.tutor-tooltip--start::before {
235-
[dir="ltr"] & {
236-
border-left-color: var(--tutor-warning);
237-
}
238-
[dir="rtl"] & {
239-
border-right-color: var(--tutor-warning);
240-
}
241-
}
242-
243-
&.tutor-tooltip--end::before {
244-
[dir="ltr"] & {
245-
border-right-color: var(--tutor-warning);
246-
}
247-
[dir="rtl"] & {
248-
border-left-color: var(--tutor-warning);
249-
}
250113
}
251114
}
252115
}
253116

254117
// Animation classes for Alpine.js
255118
.tutor-tooltip {
256-
&[x-cloak] {
257-
display: none !important;
258-
}
259-
260-
// Fade and scale animation
261-
&.tutor-tooltip-enter {
119+
&-enter {
262120
opacity: 0;
263121
transform: scale(0.8);
264122
}
265-
266-
&.tutor-tooltip-enter-active {
123+
124+
&-enter-active {
267125
opacity: 1;
268126
transform: scale(1);
269127
@include tutor-transition((opacity, transform), 0.15s);
270128
}
271-
272-
&.tutor-tooltip-leave {
129+
130+
&-leave {
273131
opacity: 1;
274132
transform: scale(1);
275133
}
276-
277-
&.tutor-tooltip-leave-active {
134+
135+
&-leave-active {
278136
opacity: 0;
279137
transform: scale(0.8);
280138
@include tutor-transition((opacity, transform), 0.15s);
281139
}
282-
}
140+
}

0 commit comments

Comments
 (0)