@visualizevalue/mint-app-base 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/styles/forms.css +6 -4
- package/app/assets/styles/theme.css +8 -0
- package/app/assets/styles/variables.css +1 -1
- package/app/components/Breadcrumbs.vue +2 -2
- package/app/components/Button.vue +4 -3
- package/app/components/Collection/OverviewCard.vue +3 -1
- package/app/components/DialogFrame.vue +5 -3
- package/app/components/Form/Group.vue +14 -0
- package/app/components/Token/OverviewCard.vue +5 -1
- package/package.json +1 -1
|
@@ -6,8 +6,9 @@ textarea,
|
|
|
6
6
|
select {
|
|
7
7
|
--padding-y: var(--size-3);
|
|
8
8
|
--padding-x: var(--size-5);
|
|
9
|
-
--background: var(--background);
|
|
10
|
-
--background-light: var(--
|
|
9
|
+
--background: var(--button-background);
|
|
10
|
+
--background-light: var(--button-background-highlight);
|
|
11
|
+
--border-radius: var(--button-border-radius);
|
|
11
12
|
|
|
12
13
|
width: 100%;
|
|
13
14
|
font-family: var(--font-family-ui);
|
|
@@ -15,8 +16,6 @@ select {
|
|
|
15
16
|
transition: all var(--speed);
|
|
16
17
|
text-transform: var(--text-transform-ui);
|
|
17
18
|
user-select: none;
|
|
18
|
-
border-radius: 0;
|
|
19
|
-
background: var(--background);
|
|
20
19
|
|
|
21
20
|
&::placeholder {
|
|
22
21
|
text-transform: var(--text-transform-ui);
|
|
@@ -32,12 +31,15 @@ select {
|
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
|
|
34
|
+
.form-item,
|
|
35
35
|
.button,
|
|
36
36
|
.input,
|
|
37
37
|
.textarea,
|
|
38
38
|
.select {
|
|
39
39
|
min-height: calc(var(--size-7) + var(--size-2));
|
|
40
40
|
line-height: 1;
|
|
41
|
+
border-radius: var(--border-radius);
|
|
42
|
+
background: var(--background);
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
.input,
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--card-border: var(--border);
|
|
3
3
|
--card-border-radius: var(--border-radius);
|
|
4
|
+
--card-background: var(--background);
|
|
5
|
+
--card-background-highlight: var(--gray-z-2);
|
|
6
|
+
|
|
7
|
+
--button-border: var(--border);
|
|
8
|
+
--button-border-radius: var(--border-radius);
|
|
9
|
+
--button-background: var(--background);
|
|
10
|
+
--button-background-highlight: var(--gray-z-2);
|
|
4
11
|
}
|
|
12
|
+
|
|
@@ -33,7 +33,7 @@ defineProps({
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
> span > a {
|
|
36
|
-
color: var(--
|
|
36
|
+
color: var(--muted);
|
|
37
37
|
transition: all var(--speed);
|
|
38
38
|
|
|
39
39
|
&.router-link-active-exact,
|
|
@@ -44,7 +44,7 @@ defineProps({
|
|
|
44
44
|
|
|
45
45
|
> span:not(:last-child):after {
|
|
46
46
|
content: '/';
|
|
47
|
-
color: var(--
|
|
47
|
+
color: var(--muted-light);
|
|
48
48
|
margin-left: var(--spacer-sm);
|
|
49
49
|
}
|
|
50
50
|
}
|
|
@@ -19,8 +19,9 @@ defineProps({
|
|
|
19
19
|
min-width: fit-content;
|
|
20
20
|
width: fit-content;
|
|
21
21
|
padding: var(--size-2) var(--size-4);
|
|
22
|
-
background: var(--background);
|
|
23
|
-
border: var(--border);
|
|
22
|
+
background: var(--button-background);
|
|
23
|
+
border: var(--button-border);
|
|
24
|
+
border-radius: var(--button-border-radius);
|
|
24
25
|
position: relative;
|
|
25
26
|
display: inline-flex;
|
|
26
27
|
gap: var(--size-2);
|
|
@@ -37,7 +38,7 @@ defineProps({
|
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
&:--highlight {
|
|
40
|
-
background: var(--
|
|
41
|
+
background: var(--button-background-highlight);
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
> span {
|
|
@@ -32,10 +32,12 @@ article.collection-overview-card {
|
|
|
32
32
|
padding: var(--spacer);
|
|
33
33
|
gap: var(--spacer);
|
|
34
34
|
transition: all var(--speed);
|
|
35
|
+
border-radius: var(--card-border-radius);
|
|
36
|
+
background: var(--card-background);
|
|
35
37
|
border: var(--card-border);
|
|
36
38
|
|
|
37
39
|
&:has(> a:--highlight) {
|
|
38
|
-
background: var(--
|
|
40
|
+
background: var(--card-background-highlight);
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
@media (--sm) {
|
|
@@ -30,6 +30,20 @@ fieldset {
|
|
|
30
30
|
> * {
|
|
31
31
|
width: fit-content;
|
|
32
32
|
flex-shrink: 1;
|
|
33
|
+
|
|
34
|
+
&:first-child {
|
|
35
|
+
border-top-right-radius: 0;
|
|
36
|
+
border-bottom-right-radius: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:last-child {
|
|
40
|
+
border-top-left-radius: 0;
|
|
41
|
+
border-bottom-left-radius: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:not(:first-child):not(:last-child) {
|
|
45
|
+
border-radius: 0;
|
|
46
|
+
}
|
|
33
47
|
}
|
|
34
48
|
}
|
|
35
49
|
|
|
@@ -128,9 +128,13 @@ const ownedBalance = computed(() => store.tokenBalance(collection.value.address,
|
|
|
128
128
|
footer {
|
|
129
129
|
width: 100%;
|
|
130
130
|
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
131
132
|
gap: var(--spacer);
|
|
132
133
|
justify-content: space-between;
|
|
133
|
-
|
|
134
|
+
|
|
135
|
+
> * {
|
|
136
|
+
width: 100%;
|
|
137
|
+
}
|
|
134
138
|
|
|
135
139
|
> *:first-child:last-child {
|
|
136
140
|
margin-left: auto;
|