@acorex/styles 7.0.21 → 7.0.23

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.
Files changed (5) hide show
  1. package/index.scss +10 -9
  2. package/package.json +1 -1
  3. package/src/animations/index.scss +86 -0
  4. package/src/base/_theme.scss +3 -3
  5. package/src/shared/_general-button.scss +35 -35
package/index.scss CHANGED
@@ -1,11 +1,12 @@
1
- @import "./src/variables/colors";
2
- @import "./src/icons/style.scss";
1
+ @import './src/variables/colors';
2
+ @import './src/icons/style.scss';
3
3
 
4
- @import "tailwindcss/base";
5
- @import "tailwindcss/components";
6
- @import "tailwindcss/utilities";
4
+ @import 'tailwindcss/base';
5
+ @import 'tailwindcss/components';
6
+ @import 'tailwindcss/utilities';
7
7
 
8
- @import "./src/base/index.scss";
9
- @import "./src/mixins/index.scss";
10
- @import "./src/shared/index.scss";
11
- @import "./src/utility/index.scss";
8
+ @import './src/animations/index.scss';
9
+ @import './src/base/index.scss';
10
+ @import './src/mixins/index.scss';
11
+ @import './src/shared/index.scss';
12
+ @import './src/utility/index.scss';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.0.21",
3
+ "version": "7.0.23",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/animations/index.scss ADDED
@@ -0,0 +1,86 @@
1
+ .ax-animate-bounceIn {
2
+ animation: 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both ax-bounceIn;
3
+ }
4
+ .ax-animate-faster {
5
+ animation-duration: 0.5s;
6
+ animation-duration: 500ms;
7
+ }
8
+
9
+ .ax-animate-faster-fadeIn {
10
+ animation-name: ax-fadeIn;
11
+ }
12
+ .ax-animate-zoomIn {
13
+ animation-name: ax-zoomIn;
14
+ }
15
+ .ax-animate-slideInUp {
16
+ animation-name: ax-slideInUp;
17
+ }
18
+ @keyframes ax-slideInUp {
19
+ from {
20
+ transform: translate3d(0, 100%, 0);
21
+ visibility: visible;
22
+ }
23
+
24
+ to {
25
+ transform: translate3d(0, 0, 0);
26
+ }
27
+ }
28
+
29
+ @keyframes ax-zoomIn {
30
+ from {
31
+ opacity: 0;
32
+ transform: scale3d(0.3, 0.3, 0.3);
33
+ }
34
+
35
+ 50% {
36
+ opacity: 1;
37
+ }
38
+ }
39
+
40
+ @keyframes ax-fadeIn {
41
+ from {
42
+ opacity: 0;
43
+ }
44
+
45
+ to {
46
+ opacity: 1;
47
+ }
48
+ }
49
+
50
+ @keyframes ax-bounceIn {
51
+ from,
52
+ 20%,
53
+ 40%,
54
+ 60%,
55
+ 80%,
56
+ to {
57
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
58
+ }
59
+
60
+ 0% {
61
+ opacity: 0;
62
+ transform: scale3d(0.3, 0.3, 0.3);
63
+ }
64
+
65
+ 20% {
66
+ transform: scale3d(1.1, 1.1, 1.1);
67
+ }
68
+
69
+ 40% {
70
+ transform: scale3d(0.9, 0.9, 0.9);
71
+ }
72
+
73
+ 60% {
74
+ opacity: 1;
75
+ transform: scale3d(1.03, 1.03, 1.03);
76
+ }
77
+
78
+ 80% {
79
+ transform: scale3d(0.97, 0.97, 0.97);
80
+ }
81
+
82
+ to {
83
+ opacity: 1;
84
+ transform: scale3d(1, 1, 1);
85
+ }
86
+ }
package/src/base/_theme.scss CHANGED
@@ -8,11 +8,11 @@
8
8
  --ax-color-ghost-fore: 255, 255, 255;
9
9
  }
10
10
  @mixin dark-variables() {
11
- --ax-color-background-default: 21, 27, 36;
11
+ --ax-color-background-default: 23, 32, 46;
12
12
  --ax-color-text-default: 224, 224, 224;
13
13
  --ax-color-border-default: 255, 255, 255, 0.12;
14
- --ax-color-surface: 23, 31, 45;
15
- --ax-color-on-surface: 25, 36, 54;
14
+ --ax-color-surface: 45, 50, 63;
15
+ --ax-color-on-surface: 60, 68, 79;
16
16
  --ax-color-ghost: 255, 255, 255;
17
17
  --ax-color-ghost-fore: 0, 0, 0;
18
18
  }
package/src/shared/_general-button.scss CHANGED
@@ -1,42 +1,42 @@
1
1
  .ax-general-button {
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- border-radius: var(--ax-rounded-border-default);
6
- padding: 0 1rem;
7
- height: var(--ax-size-default);
8
- font-size: 0.875rem;
9
- cursor: pointer;
10
- transition: background-color 0.3s;
11
- color: rgba(var(--ax-color-ghost), 0.6);
2
+ display: inline-flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ border-radius: var(--ax-rounded-border-default);
6
+ padding: 0 1rem;
7
+ height: var(--ax-size-default);
8
+ font-size: 0.875rem;
9
+ cursor: pointer;
10
+ transition: background-color 0.3s;
11
+ color: rgba(var(--ax-color-ghost), 0.6);
12
12
 
13
- &:is(&:hover):not(&:disabled, .ax-state-disabled) {
14
- background: rgba(var(--ax-color-ghost), 0.08);
15
- color: rgba(var(--ax-color-ghost), 0.87);
16
- }
13
+ &:is(&:hover):not(&:disabled, .ax-state-disabled) {
14
+ background: rgba(var(--ax-color-ghost), 0.08);
15
+ color: rgba(var(--ax-color-ghost), 0.87);
16
+ }
17
17
 
18
- &:is(&:focus, &:focus-within):not(&:disabled, .ax-state-disabled) {
19
- background-color: rgba(var(--ax-color-ghost), 0.12);
20
- outline-color: transparent;
21
- }
18
+ &:is(&:focus, &:focus-visible):not(&:disabled, .ax-state-disabled) {
19
+ background-color: rgba(var(--ax-color-ghost), 0.12);
20
+ outline-color: transparent;
21
+ }
22
22
 
23
- &:is(&:active):not(&:disabled, .ax-state-disabled) {
24
- background-color: transparent;
25
- }
23
+ &:is(&:active):not(&:disabled, .ax-state-disabled) {
24
+ background-color: transparent;
25
+ }
26
26
 
27
- &.ax-button-icon {
28
- padding: 0 0.5rem;
29
- font-size: 1.5rem;
30
- width: var(--ax-size-default);
31
- height: var(--ax-size-default);
32
- .ax-icon {
33
- font-size: 1.5rem;
34
- }
27
+ &.ax-button-icon {
28
+ padding: 0 0.5rem;
29
+ font-size: 1.5rem;
30
+ width: var(--ax-size-default);
31
+ height: var(--ax-size-default);
32
+ .ax-icon {
33
+ font-size: 1.5rem;
35
34
  }
35
+ }
36
36
 
37
- &:disabled,
38
- &.ax-state-disabled {
39
- opacity: 0.5;
40
- cursor: not-allowed;
41
- }
42
- }
37
+ &:disabled,
38
+ &.ax-state-disabled {
39
+ opacity: 0.5;
40
+ cursor: not-allowed;
41
+ }
42
+ }