Skip to content

Commit be23c90

Browse files
preschianpreschian
committed
Merge branch 'main' of github.com:kodadot/nft-gallery into ci--adjust-collection-test
2 parents 18d6a5e + 228827b commit be23c90

23 files changed

+146
-285
lines changed

‎assets/styles/base/_typography.scss

+2-16
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,6 @@
22
font-family: monospace;
33
}
44

5-
.text__stroked {
6-
-webkit-text-stroke-width: 2px;
7-
padding: 0 8px 0 0;
8-
@include ktheme() {
9-
color: theme('k-primary');
10-
-webkit-text-fill-color: theme('black');
11-
-webkit-text-stroke-color: theme('k-primary');
12-
}
13-
}
14-
155
.heading {
166
display: flex;
177
flex-direction: column;
@@ -62,13 +52,9 @@
6252
blockquote,
6353
strong,
6454
pre:not(.hljs) {
65-
@include ktheme() {
66-
color: theme('text-color');
67-
}
55+
color: var(--text-color);
6856
}
6957
blockquote {
70-
@include ktheme() {
71-
background-color: theme('background-color');
72-
}
58+
background-color: var(--background-color);
7359
}
7460
}

‎assets/styles/components/_button.scss

+7-20
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,33 @@
22
text-transform: uppercase;
33
font-weight: 400;
44
transition: all 0.3s;
5-
6-
@include ktheme() {
7-
color: theme('text-color');
8-
background-color: theme('background-color');
9-
}
5+
color: rgb(var(--text-color));
6+
background-color: var(--background-color);
107
}
118

129
.button.is-text {
1310
&:hover {
1411
border: none;
15-
@include ktheme() {
16-
background-color: theme('k-hovergrey');
17-
}
12+
background-color: var(--link-hover);
1813
}
1914

2015
&:focus {
21-
@include ktheme() {
22-
background-color: theme('k-hovergrey');
23-
}
16+
background-color: var(--link-hover);
2417
border: none;
2518
}
2619
}
2720

2821
button.button.is-bordered {
29-
@include ktheme() {
30-
border-top: 2px solid theme('k-primary') !important;
31-
}
22+
border-top: 2px solid var(--k-primary) !important;
3223
}
3324

3425
button.button.is-bordered-light {
3526
border-color: transparent;
36-
@include ktheme() {
37-
border-top: 1px solid theme('k-primary') !important;
38-
}
27+
border-top: 1px solid var(--k-primary) !important;
3928
}
4029

4130
button.button.navbar-link-background {
42-
@include ktheme() {
43-
border-top: 2px solid theme('k-accentlight2') !important;
44-
}
31+
border-top: 2px solid var(--k-accent-light-2) !important;
4532
}
4633

4734
.share-button {

‎assets/styles/components/_card.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
.card.bordered {
99
@apply rounded shadow-none;
1010

11-
@include ktheme() {
12-
border-top: 1px solid theme('k-primary');
13-
}
11+
border-top: 1px solid var(--k-primary);
12+
1413
&-content {
1514
padding-left: 1rem;
1615
padding-top: 1rem;

‎assets/styles/components/_carousel-arrows.scss

+20-54
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
2-
31
.arrow {
42
$side-y: 32px;
53
$side-x: 55px;
@@ -11,15 +9,12 @@
119

1210
&-left {
1311
left: -30px;
12+
border-right: solid $side-x var(--black);
1413

15-
@include ktheme() {
16-
border-right: solid $side-x theme('black');
17-
}
1814
&::after {
1915
content: '';
2016
width: 0;
2117
height: 0;
22-
2318
position: absolute;
2419
top: -($side-y - 2);
2520
right: -($side-x - 1);
@@ -30,9 +25,7 @@
3025
content: '';
3126
width: 0;
3227
height: 0;
33-
3428
position: absolute;
35-
3629
top: -($side-y - 6);
3730
right: -($side-x + 4);
3831
}
@@ -46,7 +39,6 @@
4639
content: '';
4740
width: 0;
4841
height: 0;
49-
5042
position: absolute;
5143
top: -($side-y - 2);
5244
left: -($side-x - 1);
@@ -57,44 +49,38 @@
5749
content: '';
5850
width: 0;
5951
height: 0;
60-
6152
position: absolute;
6253
top: -($side-y - 6);
6354
left: -($side-x - 4);
6455
}
6556
}
6657

67-
6858
@media screen and (max-width: 640px) {
6959
display: none;
7060
}
7161

7262
&.arrow-icon {
73-
@include ktheme() {
74-
box-shadow: theme('primary-shadow');
75-
border: 1px solid theme('border-color');
76-
color: theme('text-color');
77-
background: theme('background-color');
78-
&:hover {
79-
background: theme('k-accentHover');
80-
.icon {
81-
color: theme('black') !important;
82-
}
63+
box-shadow: var(--primary-shadow);
64+
border: 1px solid var(--border-color);
65+
color: rgb(var(--text-color));
66+
background: var(--background-color);
67+
68+
&:hover {
69+
background: var(--k-accent-hover);
70+
.icon {
71+
color: var(--black) !important;
8372
}
8473
}
8574
}
8675
}
8776

88-
89-
9077
// We have to duplicate this block to use variables properly unless upgrade to sass 3.x version
9178
// red: https://stackoverflow.com/questions/12365703/scss-variable-scope
9279

9380
.arrow-small-size {
9481
$side-y-small: 20px;
9582
$side-x-small: 32px;
9683
&.arrow {
97-
9884
width: $side-x-small;
9985
height: $side-x-small;
10086

@@ -106,20 +92,16 @@
10692

10793
border-bottom: solid $side-y-small transparent;
10894
border-top: solid $side-y-small transparent;
109-
@include ktheme() {
110-
border-right: solid $side-x-small theme('black');
111-
}
95+
border-right: solid $side-x-small var(--black);
96+
11297
&::after {
11398
content: '';
11499
width: 0;
115100
height: 0;
116-
117101
position: absolute;
118102
border-bottom: solid $side-y-small - 2 transparent;
119103
border-top: solid $side-y-small - 2 transparent;
120-
@include ktheme() {
121-
border-right: solid $side-x-small - 2 theme('white');
122-
}
104+
border-right: solid $side-x-small - 2 var(--white);
123105
top: -($side-y-small - 2);
124106
right: -($side-x-small - 1);
125107
transition-duration: 0.2s;
@@ -129,14 +111,10 @@
129111
content: '';
130112
width: 0;
131113
height: 0;
132-
133114
position: absolute;
134115
border-bottom: solid $side-y-small transparent;
135116
border-top: solid $side-y-small transparent;
136-
@include ktheme() {
137-
border-right: solid $side-x-small theme('black');
138-
}
139-
117+
border-right: solid $side-x-small var(--black);
140118
top: -($side-y-small - 6);
141119
right: -($side-x-small + 4);
142120
}
@@ -148,20 +126,16 @@
148126

149127
border-bottom: solid $side-y-small transparent;
150128
border-top: solid $side-y-small transparent;
151-
@include ktheme() {
152-
border-left: solid $side-x-small theme('black');
153-
}
129+
border-left: solid $side-x-small var(--black);
130+
154131
&::after {
155132
content: '';
156133
width: 0;
157134
height: 0;
158-
159135
position: absolute;
160136
border-bottom: solid $side-y-small - 2 transparent;
161137
border-top: solid $side-y-small - 2 transparent;
162-
@include ktheme() {
163-
border-left: solid $side-x-small - 2 theme('white');
164-
}
138+
border-left: solid $side-x-small - 2 var(--white);
165139
top: -($side-y-small - 2);
166140
left: -($side-x-small - 1);
167141
transition-duration: 0.2s;
@@ -171,37 +145,29 @@
171145
content: '';
172146
width: 0;
173147
height: 0;
174-
175148
position: absolute;
176149
border-bottom: solid $side-y-small transparent;
177150
border-top: solid $side-y-small transparent;
178-
@include ktheme() {
179-
border-left: solid $side-x-small theme('black');
180-
}
151+
border-left: solid $side-x-small var(--black);
181152
top: -($side-y-small - 6);
182153
left: -($side-x-small - 4);
183154
}
184155
}
185156

186157
&:hover {
187158
&.arrow-left::after {
188-
@include ktheme() {
189-
border-right: solid $side-x-small - 2 theme('k-accentlight');
190-
}
159+
border-right: solid $side-x-small - 2 var(--k-accent-light);
191160
}
192161

193162
&.arrow-right::after {
194-
@include ktheme() {
195-
border-left: solid $side-x-small - 2 theme('k-accentlight');
196-
}
163+
border-left: solid $side-x-small - 2 var(--k-accent-light);
197164
}
198165
}
199166

200167
@media screen and (max-width: 640px) {
201168
display: none;
202169
}
203170
}
204-
205171
}
206172

207173

‎assets/styles/components/_carousel.scss

+12-20
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,27 @@
88
a:hover {
99
color: unset !important;
1010
}
11-
@include ktheme() {
12-
background: theme('background-color');
13-
border: 1px solid theme('card-border-color');
14-
&:hover {
15-
border-color: theme('border-color');
16-
.carousel-media {
17-
opacity: theme('card-hover-opacity');
18-
}
11+
background: var(--background-color);
12+
border: 1px solid var(--card-border-color);
13+
&:hover {
14+
border-color: var(--border-color);
15+
.carousel-media {
16+
opacity: var(--card-hover-opacity);
1917
}
2018
}
2119
}
2220

2321
.carousel-media {
2422
display: grid;
2523
align-items: center;
26-
@include ktheme() {
27-
border-bottom: 1px solid theme('card-border-color');
28-
}
24+
border-bottom: 1px solid var(--card-border-color);
25+
2926
&-collection {
3027
border-bottom: none !important;
3128
padding: 16px 16px 0 16px;
3229

3330
a {
34-
@include ktheme() {
35-
border: 1px solid theme('card-border-color');
36-
}
37-
31+
border: 1px solid var(--card-border-color);
3832
display: block;
3933
}
4034
}
@@ -66,11 +60,9 @@
6660
outline: none;
6761
}
6862

69-
@include ktheme() {
70-
background: theme('k-shade');
71-
&.active {
72-
background: theme('k-grey');
73-
}
63+
background: rgb(var(--k-shade));
64+
&.active {
65+
background: var(--k-grey);
7466
}
7567
}
7668
}

0 commit comments

Comments
 (0)