@aotearoan/neon 28.7.2 → 28.7.4
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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aotearoan/neon",
|
|
3
3
|
"description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
|
|
4
|
-
"version": "28.7.
|
|
4
|
+
"version": "28.7.4",
|
|
5
5
|
"main": "./dist/neon.cjs.js",
|
|
6
6
|
"module": "./dist/neon.es.js",
|
|
7
7
|
"types": "./dist/src/neon.d.ts",
|
|
@@ -4,10 +4,6 @@
|
|
|
4
4
|
.neon-banner {
|
|
5
5
|
z-index: var(--neon-z-index-top);
|
|
6
6
|
|
|
7
|
-
&__action {
|
|
8
|
-
margin-left: auto;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
7
|
&__message {
|
|
12
8
|
--neon-font-weight-strong: var(--neon-font-weight-semi-bold);
|
|
13
9
|
}
|
|
@@ -31,6 +27,13 @@
|
|
|
31
27
|
.neon-button--outline {
|
|
32
28
|
--neon-background-color-outline-button: var(--neon-background-color);
|
|
33
29
|
}
|
|
30
|
+
|
|
31
|
+
@include responsive.responsive(mobile-large) {
|
|
32
|
+
.neon-note__content {
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
align-items: flex-start;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
@include responsive.responsive(desktop-large) {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
&:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
|
|
27
|
+
&:focus-visible:not(.neon-button--disabled):not(.neon-button--no-outline) {
|
|
28
28
|
@include outline.box-shadow-outline(var(--neon-rgb-#{$from-color}));
|
|
29
29
|
}
|
|
30
30
|
}
|
|
@@ -44,11 +44,12 @@
|
|
|
44
44
|
);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
+
&:hover:not(.neon-button--disabled),
|
|
47
48
|
&:active:not(.neon-button--disabled) {
|
|
48
49
|
background: var(--neon-background-solid-button-dark-#{$color});
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
&:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
|
|
52
|
+
&:focus-visible:not(.neon-button--disabled):not(.neon-button--no-outline) {
|
|
52
53
|
@include outline.box-shadow-outline(var(--neon-background-rgb-solid-button-dark-#{$color}));
|
|
53
54
|
}
|
|
54
55
|
}
|
|
@@ -81,7 +82,7 @@
|
|
|
81
82
|
border-color: var(--neon-background-outline-button-active-#{$color});
|
|
82
83
|
}
|
|
83
84
|
|
|
84
|
-
&:focus:not(.neon-button--disabled):not(.neon-button--no-outline) {
|
|
85
|
+
&:focus-visible:not(.neon-button--disabled):not(.neon-button--no-outline) {
|
|
85
86
|
@include outline.box-shadow-outline(var(--neon-rgb-#{$color}));
|
|
86
87
|
}
|
|
87
88
|
}
|
|
@@ -95,7 +96,7 @@
|
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
&:hover:not(.neon-button--disabled),
|
|
98
|
-
&:focus:not(.neon-button--disabled) {
|
|
99
|
+
&:focus-visible:not(.neon-button--disabled) {
|
|
99
100
|
background: var(--neon-background-color-text-button-hover);
|
|
100
101
|
}
|
|
101
102
|
|
|
@@ -106,7 +107,7 @@
|
|
|
106
107
|
|
|
107
108
|
@mixin input-button($color) {
|
|
108
109
|
&:active:not(.neon-button--disabled),
|
|
109
|
-
&:focus:not(.neon-button--disabled) {
|
|
110
|
+
&:focus-visible:not(.neon-button--disabled) {
|
|
110
111
|
background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-input-background-active));
|
|
111
112
|
border: var(--neon-border-width-input) var(--neon-border-style) var(--neon-color-#{$color});
|
|
112
113
|
}
|
|
@@ -429,11 +430,10 @@
|
|
|
429
430
|
flex-direction: row;
|
|
430
431
|
justify-content: flex-end;
|
|
431
432
|
align-items: center;
|
|
432
|
-
gap: var(--neon-
|
|
433
|
+
gap: var(--neon-gap-button-group);
|
|
433
434
|
|
|
434
435
|
@include responsive.responsive(mobile-large) {
|
|
435
436
|
flex-direction: column-reverse;
|
|
436
|
-
gap: calc(3 * var(--neon-base-space));
|
|
437
437
|
|
|
438
438
|
& > .neon-button {
|
|
439
439
|
@include neon-full-width-button;
|
|
@@ -840,6 +840,11 @@
|
|
|
840
840
|
* Button letter spacing
|
|
841
841
|
*/
|
|
842
842
|
--neon-letter-spacing-button: var(--neon-letter-spacing-m);
|
|
843
|
+
/**
|
|
844
|
+
* @component NeonButton
|
|
845
|
+
* Gap between buttons when using the .neon-button-group class
|
|
846
|
+
*/
|
|
847
|
+
--neon-gap-button-group: var(--neon-space-8);
|
|
843
848
|
|
|
844
849
|
/* tabs */
|
|
845
850
|
/**
|