Skip to content

Commit 424df7d

Browse files
vikiivalvikiival
authored
Merge branch 'main' into issue-11331-0
2 parents 6022d51 + a87a950 commit 424df7d

File tree

18 files changed

+149
-307
lines changed

18 files changed

+149
-307
lines changed

‎assets/styles/abstracts/_theme.scss

-14
Original file line numberDiff line numberDiff line change
@@ -100,17 +100,3 @@ $themes: (
100100
'separator-line-color': #6b6b6b,
101101
),
102102
);
103-
104-
@mixin ktheme() {
105-
@each $theme, $map in $themes {
106-
$theme-map: $map !global;
107-
.#{$theme} & {
108-
@content;
109-
}
110-
}
111-
$theme-map: null !global;
112-
}
113-
114-
@function theme($key) {
115-
@return map-get($theme-map, $key);
116-
}

‎assets/styles/components/_connect-wallet.scss

+28-45
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '@/assets/styles/abstracts/variables';
2-
31
@keyframes rotate {
42
0% {
53
transform: rotate(0deg);
@@ -24,39 +22,28 @@
2422
position: fixed;
2523
top: 0;
2624
right: 0;
27-
height: calc(100% - $navbar-desktop-min-height) ;
28-
margin-top: $navbar-desktop-min-height;
25+
@apply h-[calc(100%-theme(spacing.navbar-desktop))] mt-[theme(spacing.navbar-desktop)];
2926
max-width: 360px;
3027
width: 100%;
3128

32-
@include mobile {
33-
inset: 0;
34-
border-left: none !important;
35-
max-width: 100vw;
36-
height: calc(100% - $navbar-mobile-min-height) ;
37-
margin-top: $navbar-mobile-min-height;
38-
}
39-
@include ktheme() {
40-
background: theme('background-color');
41-
border-left: 1px solid theme('border-color');
42-
}
29+
@apply bulma-mobile:inset-0 bulma-mobile:border-l-0 bulma-mobile:max-w-full
30+
bulma-mobile:h-[calc(100%-theme(spacing.navbar-mobile))] bulma-mobile:mt-[theme(spacing.navbar-mobile)];
31+
32+
background: var(--background-color);
33+
border-left: 1px solid var(--border-color);
4334

4435
.modal-card-body {
4536
padding: 0;
4637
display: block;
47-
@include ktheme() {
48-
background-color: theme('background-color');
49-
}
38+
background-color: var(--background-color);
5039

5140
hr {
5241
@apply bg-k-shade2 #{!important};
5342
}
5443
}
5544

5645
footer {
57-
@include ktheme() {
58-
border-top: 1px solid theme('border-color');
59-
}
46+
border-top: 1px solid var(--border-color);
6047
}
6148

6249
.confirm-button {
@@ -77,35 +64,32 @@
7764
.icon {
7865
margin-right: 0 !important;
7966
}
80-
@include ktheme() {
81-
color: theme('text-color');
82-
&:hover {
83-
background-color: theme('k-accentlight2') !important;
84-
}
67+
68+
color: rgb(var(--text-color));
69+
&:hover {
70+
background-color: var(--k-accent-light-2) !important;
8571
}
8672
}
73+
8774
.auth-tip {
8875
margin: 0 2rem;
89-
@include ktheme() {
90-
color: theme('text-color');
91-
border-left: 1px solid theme('k-shade');
92-
}
76+
color: rgb(var(--text-color));
77+
border-left: 1px solid rgb(var(--k-shade));
9378
i {
9479
animation: rotate 1s linear infinite;
9580
}
9681
}
82+
9783
.account-list {
9884
.account-item {
9985
padding: 10px 0;
10086
margin: 0 2rem;
10187
a {
102-
@include ktheme() {
103-
color: theme('text-color');
104-
border-left: 1px solid theme('k-shade');
88+
color: rgb(var(--text-color));
89+
border-left: 1px solid rgb(var(--k-shade));
10590

106-
&:hover {
107-
color: theme('text-color');
108-
}
91+
&:hover {
92+
color: rgb(var(--text-color));
10993
}
11094

11195
.account-name {
@@ -116,9 +100,7 @@
116100
}
117101
}
118102
&:hover {
119-
@include ktheme() {
120-
background-color: theme('k-accentlight2') !important;
121-
}
103+
background-color: var(--k-accent-light-2) !important;
122104
}
123105
}
124106
}
@@ -128,6 +110,11 @@
128110
height: 100%;
129111
overflow-y: auto;
130112
}
113+
114+
.identity-address a {
115+
font-weight: normal !important;
116+
color: var(--k-blue) !important;
117+
}
131118
}
132119

133120
.wallet-asset {
@@ -139,15 +126,11 @@
139126

140127
.identity-address a {
141128
font-weight: normal !important;
142-
@include ktheme() {
143-
color: theme('k-blue') !important;
144-
}
129+
color: var(--k-blue) !important;
145130
}
146131
}
147132
}
148133

149134
.modal-card-title {
150-
@include ktheme() {
151-
color: theme('text-color');
152-
}
135+
color: rgb(var(--text-color));
153136
}

‎assets/styles/components/_gallery-item.scss

+14-26
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@
66
align-items: center;
77
}
88

9-
@include ktheme() {
10-
box-shadow: theme('primary-shadow');
11-
border: 1px solid theme('border-color');
12-
}
9+
box-shadow: var(--primary-shadow);
10+
border: 1px solid var(--border-color);
1311
}
1412
}
1513

@@ -27,10 +25,8 @@
2725

2826
.gallery-item {
2927
.media-object {
30-
@include ktheme() {
31-
box-shadow: theme('primary-shadow');
32-
border: 1px solid theme('border-color');
33-
}
28+
box-shadow: var(--primary-shadow);
29+
border: 1px solid var(--border-color);
3430
}
3531
}
3632

@@ -39,18 +35,14 @@
3935
background-color: transparent;
4036
margin: 1rem 0;
4137
white-space: pre-wrap;
42-
@include ktheme() {
43-
border: 1px solid theme('k-shade');
44-
color: theme('k-shade');
45-
}
38+
border: 1px solid rgb(var(--k-shade));
39+
color: rgb(var(--k-shade));
4640
}
4741

4842
a {
49-
@include ktheme() {
50-
color: theme('k-blue') !important;
51-
&:hover {
52-
color: theme('k-blue-hover') !important;
53-
}
43+
color: var(--k-blue) !important;
44+
&:hover {
45+
color: var(--k-blue-hover) !important;
5446
}
5547
}
5648

@@ -69,20 +61,16 @@
6961
}
7062
a {
7163
@apply cursor-pointer;
72-
@include ktheme() {
73-
color: theme('k-blue') !important;
74-
&:hover {
75-
color: theme('k-blue-hover') !important;
76-
}
64+
color: var(--k-blue) !important;
65+
&:hover {
66+
color: var(--k-blue-hover) !important;
7767
}
7868
}
7969
}
8070

8171
.gallery-item-disabled {
82-
@include ktheme() {
83-
box-shadow: 4px 4px theme('k-grey');
84-
width: 10rem;
85-
}
72+
box-shadow: 4px 4px var(--k-grey);
73+
width: 10rem;
8674

8775
.o-tip,
8876
.is-neo {

‎assets/styles/components/_nft-card.scss

+23-31
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
1-
@function hex-to-rgba($hex, $alpha: 1) {
2-
@return rgba(red($hex), green($hex), blue($hex), $alpha);
3-
}
4-
51
.nft-card {
62
@apply relative h-full bg-background-color border border-card-border-color;
73

8-
@include ktheme() {
9-
.border-stacked {
10-
border-color: theme('card-border-color-light') !important;
11-
}
4+
.border-stacked {
5+
border-color: var(--card-border-color-light) !important;
6+
}
127

13-
&:not(.loading):hover {
14-
border: 1px solid theme('border-color');
8+
&:not(.loading):hover {
9+
border: 1px solid var(--border-color);
1510

16-
.nft-media::after {
17-
content: '';
18-
display: block;
19-
position: absolute;
20-
top: 0;
21-
right: 0;
22-
bottom: 0;
23-
left: 0;
24-
background-color: hex-to-rgba(theme('background-color'), 0.2);
25-
}
11+
.nft-media::after {
12+
content: '';
13+
display: block;
14+
position: absolute;
15+
top: 0;
16+
right: 0;
17+
bottom: 0;
18+
left: 0;
19+
background-color: rgba(var(--background-color), 0.2);
2620
}
2721
}
22+
2823
.show-on-hover {
2924
display: none !important;
3025
}
@@ -50,29 +45,26 @@
5045
}
5146

5247
.stacked-shadow {
53-
@include ktheme() {
54-
box-shadow: 5px 5px theme('card-border-color-light');
55-
bottom: 10px;
56-
right: 10px;
57-
}
48+
box-shadow: 5px 5px var(--card-border-color-light);
49+
bottom: 10px;
50+
right: 10px;
5851
}
52+
5953
.theme-background {
60-
@include ktheme() {
61-
background: theme('background-color');
62-
}
54+
background: var(--background-color);
6355
}
6456
}
57+
6558
.card-icon {
6659
@apply absolute z-[1] right-4 top-4;
6760
}
61+
6862
.nft-media {
6963
box-shadow: none;
7064
}
7165

7266
.nft-media-info {
73-
@include ktheme() {
74-
border-top: 1px solid theme('card-border-color');
75-
}
67+
border-top: 1px solid var(--card-border-color);
7668
padding: 13px;
7769
min-height: 102px;
7870

0 commit comments

Comments
 (0)