Skip to content

Commit efc712a

Browse files
AwakichAwakich
committed
add styles for task, subtask, different-tasks, complete pages & success modals
1 parent 0594ee4 commit efc712a

9 files changed

Lines changed: 52 additions & 51 deletions

File tree

‎projects/skills/src/app/task/complete/complete.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
@use "styles/typography";
33

44
.complete {
5+
min-height: 358px;
56
padding: 24px;
67
background-color: var(--light-white);
78
border: 0.5px solid var(--medium-grey-for-outline);
89
border-radius: var(--rounded-lg);
9-
min-height: 358px;
1010

1111
&__block {
1212
display: flex;
1313
flex-direction: column;
1414
align-items: center;
15-
text-align: center;
1615
justify-content: center;
17-
margin: 50px 0px;
16+
margin: 50px 0;
17+
text-align: center;
1818
}
1919

2020
&__text {

‎projects/skills/src/app/task/shared/exclude-task/exclude-task.component.scss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
}
1212

1313
&__text {
14-
margin: 23px 0px;
14+
margin: 23px 0;
1515

1616
&--hasVideo {
1717
display: flex;
1818
align-items: center;
19-
justify-content: center;
2019
align-self: center;
20+
justify-content: center;
2121

2222
iframe {
2323
border-radius: var(--rounded-lg);
@@ -33,8 +33,8 @@
3333

3434
&__item {
3535
display: flex;
36-
align-items: center;
3736
gap: 14px;
37+
align-items: center;
3838

3939
&--success {
4040
::ng-deep {
@@ -63,13 +63,14 @@
6363
}
6464
}
6565

66-
&__body, &__content {
66+
&__body,
67+
&__content {
68+
flex-grow: 1;
69+
min-height: 358px;
6770
padding: 24px;
6871
background-color: var(--light-white);
6972
border: 0.5px solid var(--medium-grey-for-outline);
7073
border-radius: var(--rounded-lg);
71-
flex-grow: 1;
72-
min-height: 358px;
7374
}
7475

7576
&__content {

‎projects/skills/src/app/task/shared/radio-select-task/radio-select-task.component.scss‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818

1919
&__title {
20-
margin: 23px 0px;
20+
margin: 23px 0;
2121
}
2222

2323
&__list {
@@ -27,12 +27,12 @@
2727
}
2828

2929
&__img {
30+
width: 100%;
3031
max-width: 150px;
31-
max-height: 207px;
3232
height: 100%;
33-
width: 100%;
34-
object-fit: contain;
33+
max-height: 207px;
3534
margin: calc(75px - 24px) calc(92px - 24px);
35+
object-fit: contain;
3636

3737
&-text {
3838
text-align: center;
@@ -41,40 +41,40 @@
4141

4242
&__item {
4343
display: flex;
44-
align-items: center;
4544
gap: 14px;
45+
align-items: center;
4646
cursor: pointer;
4747

4848
label {
4949
cursor: pointer;
5050
}
5151

5252
input[type="radio"] {
53-
appearance: none;
54-
-webkit-appearance: none;
53+
position: relative;
5554
min-width: 18px;
5655
min-height: 18px;
57-
border-radius: 50%;
56+
cursor: pointer;
57+
background: transparent;
5858
border: 0.5px solid var(--medium-grey-for-outline);
59+
border-radius: 50%;
5960
outline: none;
60-
background: transparent;
61-
position: relative;
62-
cursor: pointer;
61+
appearance: none;
62+
appearance: none;
6363
}
6464

6565
input[type="radio"]:checked {
6666
background-color: var(--accent);
6767
}
6868

6969
input[type="radio"]:checked::after {
70-
content: "";
7170
position: absolute;
7271
top: 50%;
7372
left: 50%;
7473
width: 8px;
7574
height: 8px;
76-
border-radius: 50%;
75+
content: "";
7776
background-color: var(--light-white);
77+
border-radius: 50%;
7878
transform: translate(-50%, -50%);
7979
}
8080

@@ -91,13 +91,14 @@
9191
}
9292
}
9393

94-
&__body, &__content {
94+
&__body,
95+
&__content {
96+
flex-grow: 1;
97+
min-height: 358px;
9598
padding: 24px;
9699
background-color: var(--light-white);
97100
border: 0.5px solid var(--medium-grey-for-outline);
98101
border-radius: var(--rounded-lg);
99-
flex-grow: 1;
100-
min-height: 358px;
101102
}
102103

103104
&__body {
@@ -110,7 +111,6 @@
110111
min-width: 333px;
111112
}
112113

113-
114114
:host ::ng-deep &__hint p {
115115
margin-top: 20px;
116116

‎projects/skills/src/app/task/shared/video-task/info-task.component.scss‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
flex-direction: column-reverse;
77
gap: 20px;
88
align-items: center;
9+
min-height: 336px;
910
padding: 24px;
1011
background-color: var(--light-white);
1112
border: 0.5px solid var(--medium-grey-for-outline);
1213
border-radius: var(--rounded-lg);
13-
min-height: 336px;
1414

1515
@include responsive.apply-desktop {
1616
flex-direction: row-reverse;
@@ -25,19 +25,18 @@
2525
&--hasImage {
2626
@include responsive.apply-desktop {
2727
flex-direction: row;
28-
justify-content: space-between;
29-
align-items: center;
3028
gap: 114px;
29+
align-items: center;
30+
justify-content: space-between;
3131
padding: 24px 90px 24px 24px;
3232
}
3333
}
3434

35-
3635
&__img {
36+
width: 100%;
3737
max-width: 200px;
38-
max-height: 200px;
3938
height: 100%;
40-
width: 100%;
39+
max-height: 200px;
4140
object-fit: contain;
4241
}
4342

@@ -59,7 +58,7 @@
5958
&--hasVideo {
6059
align-self: center;
6160
justify-content: center;
62-
border-radius: var(--rounded-lg);
61+
border-radius: var(--rounded-lg);
6362
}
6463
}
6564
}
@@ -91,7 +90,7 @@
9190
}
9291

9392
&__text-content {
94-
display: flex;;
93+
display: flex;
9594
flex-direction: column;
9695
gap: 24px;
9796
}

‎projects/skills/src/app/task/shared/write-task/write-task.component.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,31 @@
1111
}
1212
}
1313

14-
&__header, &__content {
14+
&__header,
15+
&__content {
16+
flex-grow: 1;
17+
min-height: 358px;
1518
padding: 24px;
1619
background: var(--light-white);
1720
border: 0.5px solid var(--medium-grey-for-outline);
1821
border-radius: var(--rounded-lg);
19-
flex-grow: 1;
20-
min-height: 358px;
2122
}
2223

2324
&__content {
2425
min-width: 333px;
2526
padding: 12px 24px;
2627
}
2728

28-
&__description, &__text {
29+
&__description,
30+
&__text {
2931
margin-top: 23px;
3032
white-space: pre-line;
3133

3234
&--hasVideo {
3335
display: flex;
3436
align-items: center;
35-
justify-content: center;
3637
align-self: center;
38+
justify-content: center;
3739
}
3840
}
3941

‎projects/skills/src/app/task/subtask/subtask.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
}
1515

1616
.action {
17-
margin-top: 20px;
1817
display: grid;
1918
grid-template-columns: 6.2fr 4fr;
2019
grid-gap: 20px;
20+
margin-top: 20px;
2121

2222
:last-child {
2323
width: 333px;

‎projects/skills/src/app/task/task/task.component.scss‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
}
1313

1414
&__tasks {
15-
text-align: center;
1615
margin-bottom: 12px;
16+
text-align: center;
1717
}
1818

1919
&__skill-name {
@@ -33,22 +33,20 @@
3333

3434
.progress {
3535
&__task {
36-
border-radius: var(--rounded-xl);
37-
background-color: var(--light-white);
3836
height: 23px;
39-
padding: 4px 0px;
37+
padding: 4px 0;
4038
text-align: center;
39+
background-color: var(--light-white);
40+
border-radius: var(--rounded-xl);
4141

4242
&--done {
43-
background-color: var(--green);
44-
border: 0px !important;
4543
color: var(--light-white);
44+
background-color: var(--green);
45+
border: 0 !important;
4646
}
4747

4848
&--current {
4949
border: 0.5px solid var(--accent);
5050
}
5151
}
5252
}
53-
54-

‎projects/skills/src/app/trajectories/track-career/detail/info/info.component.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,14 +160,14 @@
160160
align-items: center;
161161
justify-content: center;
162162
max-height: calc(100vh - 40px);
163-
padding: 0px 200px;
163+
padding: 0 200px;
164164

165165
&__text {
166166
color: var(--dark-grey);
167167
text-align: center;
168168
}
169169

170170
&__img {
171-
margin: 30px 0px;
171+
margin: 30px 0;
172172
}
173173
}

‎projects/skills/src/app/trajectories/track-career/shared/trajectory/trajectory.component.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@
6969
transform: rotate(-53deg);
7070
}
7171

72-
p, i {
72+
p,
73+
i {
7374
color: var(--black);
7475
}
7576
}

0 commit comments

Comments
 (0)