@acorex/styles 3.0.27 → 3.0.31

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/scss/upload.scss CHANGED
@@ -1,169 +1,169 @@
1
- .ax {
2
- &.upload-file-box {
3
- display: flex;
4
- background: var(--ax-white-color);
5
- flex-direction: column;
6
- justify-content: center;
7
- align-items: center;
8
- padding: 0.5em 0;
9
- border-width: 2px;
10
- border-style: dashed;
11
- border-color: var(--ax-border-dark-color);
12
- min-height: 200px;
13
- cursor: pointer;
14
- position: relative;
15
-
16
- &:hover {
17
- border-color: var(--ax-primary-color);
18
- border-style: solid;
19
- transition: all 0.3s;
20
-
21
- .upload-content {
22
- color: var(--ax-primary-color);
23
- }
24
-
25
- .action-container {
26
- display: flex !important;
27
- }
28
- }
29
-
30
- .upload-content {
31
- text-align: center;
32
- color: var(--ax-border-color);
33
-
34
- i {
35
- font-size: 30px;
36
- }
37
-
38
- p {
39
- padding-top: var(--sp-md-size);
40
-
41
- }
42
- }
43
-
44
- .preview {
45
- background-position: center !important;
46
- background-size: contain !important;
47
- background-repeat: no-repeat !important;
48
- width: 100%;
49
- display: flex;
50
- flex-direction: column;
51
- justify-content: center;
52
- align-items: center;
53
- min-height: 200px;
54
- }
55
-
56
- .action-container {
57
- background: rgba(var(--ax-secondary-color), 0.5);
58
- min-height: 195px;
59
- display: none;
60
- flex-direction: row;
61
- justify-content: center;
62
- align-items: center;
63
- width: 100%;
64
- position: absolute;
65
- top: 0;
66
- bottom: 0;
67
- left: 0;
68
- right: 0;
69
- }
70
-
71
- }
72
-
73
- .ax-upload-drop-over {
74
- position: relative;
75
-
76
- .overlay {
77
- pointer-events: none;
78
- z-index: 1;
79
- display: none;
80
- position: absolute;
81
- align-items: center;
82
- text-align: center;
83
- justify-content: center;
84
- width: 100%;
85
- height: 100%;
86
- top: 0px;
87
- left: 0px;
88
- right: 0px;
89
- bottom: 0px;
90
- background-color: var(--ax-white-color);
91
- outline: 2px dashed var(--ax-primary-color);
92
- outline-offset: 0;
93
- opacity: 0;
94
- transition: display 0s, opacity 0.15s linear, outline-offset 0.15s linear;
95
-
96
- &.show {
97
- display: flex;
98
- opacity: 0.95;
99
- outline-offset: calc(-1 * 0.5em);
100
- }
101
-
102
- .icon-wrapper {
103
- display: flex;
104
- flex-direction: column;
105
- justify-content: center;
106
- align-items: center;
107
-
108
- i {
109
- margin-bottom: 10px;
110
- color: var(--ax-primary-color);
111
- -webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
112
- animation: pulsate-fwd 0.5s ease-in-out infinite both;
113
- }
114
-
115
- span {
116
- color: var(--ax-secondary-light-color);
117
- }
118
- }
119
-
120
- @-webkit-keyframes pulsate-fwd {
121
- 0% {
122
- -webkit-transform: scale(1);
123
- transform: scale(1);
124
- }
125
-
126
- 50% {
127
- -webkit-transform: scale(1.1);
128
- transform: scale(1.1);
129
- }
130
-
131
- 100% {
132
- -webkit-transform: scale(1);
133
- transform: scale(1);
134
- }
135
- }
136
-
137
- @keyframes pulsate-fwd {
138
- 0% {
139
- -webkit-transform: scale(1);
140
- transform: scale(1);
141
- }
142
-
143
- 50% {
144
- -webkit-transform: scale(1.1);
145
- transform: scale(1.1);
146
- }
147
-
148
- 100% {
149
- -webkit-transform: scale(1);
150
- transform: scale(1);
151
- }
152
- }
153
-
154
- }
155
- }
156
-
157
- .ax-upload-progress-panel {
158
- padding: 0.5em;
159
- background-color: var(--ax-white-color);
160
-
161
- small {
162
- display: block;
163
- margin: 0.5em 0 0 0;
164
- white-space: nowrap;
165
- overflow: hidden;
166
- text-overflow: ellipsis;
167
- }
168
- }
1
+ .ax {
2
+ &.upload-file-box {
3
+ display: flex;
4
+ background: var(--ax-white-color);
5
+ flex-direction: column;
6
+ justify-content: center;
7
+ align-items: center;
8
+ padding: 0.5em 0;
9
+ border-width: 2px;
10
+ border-style: dashed;
11
+ border-color: var(--ax-border-dark-color);
12
+ min-height: 200px;
13
+ cursor: pointer;
14
+ position: relative;
15
+
16
+ &:hover {
17
+ border-color: var(--ax-primary-color);
18
+ border-style: solid;
19
+ transition: all 0.3s;
20
+
21
+ .upload-content {
22
+ color: var(--ax-primary-color);
23
+ }
24
+
25
+ .action-container {
26
+ display: flex !important;
27
+ }
28
+ }
29
+
30
+ .upload-content {
31
+ text-align: center;
32
+ color: var(--ax-border-color);
33
+
34
+ i {
35
+ font-size: 30px;
36
+ }
37
+
38
+ p {
39
+ padding-top: var(--sp-md-size);
40
+
41
+ }
42
+ }
43
+
44
+ .preview {
45
+ background-position: center !important;
46
+ background-size: contain !important;
47
+ background-repeat: no-repeat !important;
48
+ width: 100%;
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ align-items: center;
53
+ min-height: 200px;
54
+ }
55
+
56
+ .action-container {
57
+ background: rgba(var(--ax-secondary-color), 0.5);
58
+ min-height: 195px;
59
+ display: none;
60
+ flex-direction: row;
61
+ justify-content: center;
62
+ align-items: center;
63
+ width: 100%;
64
+ position: absolute;
65
+ top: 0;
66
+ bottom: 0;
67
+ left: 0;
68
+ right: 0;
69
+ }
70
+
71
+ }
72
+
73
+ .ax-upload-drop-over {
74
+ position: relative;
75
+
76
+ .overlay {
77
+ pointer-events: none;
78
+ z-index: 1;
79
+ display: none;
80
+ position: absolute;
81
+ align-items: center;
82
+ text-align: center;
83
+ justify-content: center;
84
+ width: 100%;
85
+ height: 100%;
86
+ top: 0px;
87
+ left: 0px;
88
+ right: 0px;
89
+ bottom: 0px;
90
+ background-color: var(--ax-white-color);
91
+ outline: 2px dashed var(--ax-primary-color);
92
+ outline-offset: 0;
93
+ opacity: 0;
94
+ transition: display 0s, opacity 0.15s linear, outline-offset 0.15s linear;
95
+
96
+ &.show {
97
+ display: flex;
98
+ opacity: 0.95;
99
+ outline-offset: calc(-1 * 0.5em);
100
+ }
101
+
102
+ .icon-wrapper {
103
+ display: flex;
104
+ flex-direction: column;
105
+ justify-content: center;
106
+ align-items: center;
107
+
108
+ i {
109
+ margin-bottom: 10px;
110
+ color: var(--ax-primary-color);
111
+ -webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
112
+ animation: pulsate-fwd 0.5s ease-in-out infinite both;
113
+ }
114
+
115
+ span {
116
+ color: var(--ax-secondary-light-color);
117
+ }
118
+ }
119
+
120
+ @-webkit-keyframes pulsate-fwd {
121
+ 0% {
122
+ -webkit-transform: scale(1);
123
+ transform: scale(1);
124
+ }
125
+
126
+ 50% {
127
+ -webkit-transform: scale(1.1);
128
+ transform: scale(1.1);
129
+ }
130
+
131
+ 100% {
132
+ -webkit-transform: scale(1);
133
+ transform: scale(1);
134
+ }
135
+ }
136
+
137
+ @keyframes pulsate-fwd {
138
+ 0% {
139
+ -webkit-transform: scale(1);
140
+ transform: scale(1);
141
+ }
142
+
143
+ 50% {
144
+ -webkit-transform: scale(1.1);
145
+ transform: scale(1.1);
146
+ }
147
+
148
+ 100% {
149
+ -webkit-transform: scale(1);
150
+ transform: scale(1);
151
+ }
152
+ }
153
+
154
+ }
155
+ }
156
+
157
+ .ax-upload-progress-panel {
158
+ padding: 0.5em;
159
+ background-color: var(--ax-white-color);
160
+
161
+ small {
162
+ display: block;
163
+ margin: 0.5em 0 0 0;
164
+ white-space: nowrap;
165
+ overflow: hidden;
166
+ text-overflow: ellipsis;
167
+ }
168
+ }
169
169
  }
@@ -1,106 +1,106 @@
1
- $color-suffix: color;
2
- $size-suffix: size;
3
- $white: #fff;
4
- $black: #000;
5
- $primary: #3b82f6;
6
- $secondary: #ec4899;
7
- $gray: #b1b5bd;
8
- $success: #10b981;
9
- $info: #8b5cf6;
10
- $warning: #f59e0b;
11
- $danger: #ef4444;
12
- $shadow: rgba(0, 0, 0, 0.1);
13
- $colors: (
14
- "white": $white,
15
- "black": $black,
16
- "trans-white": transparentize($white, 0.85),
17
- "trans-black": transparentize($black, 0.85),
18
- "primary": (
19
- "": $primary,
20
- "fore": $white,
21
- "light": lighten($primary, 10%),
22
- "dark": darken($primary, 10%),
23
- "trans-dark": transparentize($primary, 0.85),
24
- "trans-light": transparentize($primary, 0.85),
25
- ),
26
- "secondary": (
27
- "": $secondary,
28
- "fore": $white,
29
- "light": lighten($secondary, 10%),
30
- "dark": darken($secondary, 10%),
31
- "trans-dark": transparentize($secondary, 0.85),
32
- "trans-light": transparentize($secondary, 0.85),
33
- ),
34
- "info": (
35
- "": $info,
36
- "fore": $white,
37
- "light": lighten($info, 10%),
38
- "dark": darken($info, 10%),
39
- "trans-dark": transparentize($info, 0.85),
40
- "trans-light": transparentize($info, 0.85),
41
- ),
42
- "success": (
43
- "": $success,
44
- "fore": $white,
45
- "light": lighten($success, 10%),
46
- "dark": darken($success, 10%),
47
- "trans-dark": transparentize($success, 0.85),
48
- "trans-light": transparentize($success, 0.85),
49
- ),
50
- "warning": (
51
- "": $warning,
52
- "fore": $white,
53
- "light": lighten($warning, 10%),
54
- "dark": darken($warning, 10%),
55
- "trans-dark": transparentize($warning, 0.85),
56
- "trans-light": transparentize($warning, 0.85),
57
- ),
58
- "danger": (
59
- "": $danger,
60
- "fore": $white,
61
- "light": lighten($danger, 10%),
62
- "dark": darken($danger, 10%),
63
- "trans-dark": transparentize($danger, 0.85),
64
- "trans-light": transparentize($danger, 0.85),
65
- ),
66
- "gray": (
67
- "": $gray,
68
- "fore": $black,
69
- "light": lighten($gray, 10%),
70
- "dark": darken($gray, 10%),
71
- "trans-dark": transparentize($gray, 0.85),
72
- "trans-light": transparentize($gray, 0.85),
73
- ),
74
- "light": (
75
- "": darken($gray, 0%),
76
- "fore": #6b6d70,
77
- "light": lighten($gray, 10%),
78
- "dark": darken($gray, 10%),
79
- "trans-dark": transparentize($gray, 0.85),
80
- "trans-light": transparentize($gray, 0.85),
81
- ),
82
- "dark": (
83
- "": $black,
84
- "fore": $white,
85
- "light": lighten($black, 10%),
86
- "dark": darken($black, 10%),
87
- "trans-dark": transparentize($black, 0.85),
88
- "trans-light": transparentize($black, 0.85),
89
- ),
90
- );
91
- $sizes: (
92
- "": (
93
- xxs: 0.4em,
94
- xs: 0.6em,
95
- sm: 0.8em,
96
- md: 1em,
97
- lg: 1.2em,
98
- xl: 1.4em,
99
- xxl: 1.6em,
100
- ),
101
- "border": (
102
- width: 1px,
103
- radius: 4px,
104
- circle: 50px,
105
- ),
106
- );
1
+ $color-suffix: color;
2
+ $size-suffix: size;
3
+ $white: #fff;
4
+ $black: #000;
5
+ $primary: #3b82f6;
6
+ $secondary: #ec4899;
7
+ $gray: #e0e0e0;
8
+ $success: #10b981;
9
+ $info: #8b5cf6;
10
+ $warning: #f59e0b;
11
+ $danger: #ef4444;
12
+ $shadow: rgba(0, 0, 0, 0.1);
13
+ $colors: (
14
+ "white": $white,
15
+ "black": $black,
16
+ "trans-white": transparentize($white, 0.85),
17
+ "trans-black": transparentize($black, 0.85),
18
+ "primary": (
19
+ "": $primary,
20
+ "fore": $white,
21
+ "light": lighten($primary, 10%),
22
+ "dark": darken($primary, 10%),
23
+ "trans-dark": transparentize($primary, 0.85),
24
+ "trans-light": transparentize($primary, 0.85),
25
+ ),
26
+ "secondary": (
27
+ "": $secondary,
28
+ "fore": $white,
29
+ "light": lighten($secondary, 10%),
30
+ "dark": darken($secondary, 10%),
31
+ "trans-dark": transparentize($secondary, 0.85),
32
+ "trans-light": transparentize($secondary, 0.85),
33
+ ),
34
+ "info": (
35
+ "": $info,
36
+ "fore": $white,
37
+ "light": lighten($info, 10%),
38
+ "dark": darken($info, 10%),
39
+ "trans-dark": transparentize($info, 0.85),
40
+ "trans-light": transparentize($info, 0.85),
41
+ ),
42
+ "success": (
43
+ "": $success,
44
+ "fore": $white,
45
+ "light": lighten($success, 10%),
46
+ "dark": darken($success, 10%),
47
+ "trans-dark": transparentize($success, 0.85),
48
+ "trans-light": transparentize($success, 0.85),
49
+ ),
50
+ "warning": (
51
+ "": $warning,
52
+ "fore": $white,
53
+ "light": lighten($warning, 10%),
54
+ "dark": darken($warning, 10%),
55
+ "trans-dark": transparentize($warning, 0.85),
56
+ "trans-light": transparentize($warning, 0.85),
57
+ ),
58
+ "danger": (
59
+ "": $danger,
60
+ "fore": $white,
61
+ "light": lighten($danger, 10%),
62
+ "dark": darken($danger, 10%),
63
+ "trans-dark": transparentize($danger, 0.85),
64
+ "trans-light": transparentize($danger, 0.85),
65
+ ),
66
+ "gray": (
67
+ "": $gray,
68
+ "fore": $black,
69
+ "light": lighten($gray, 10%),
70
+ "dark": darken($gray, 10%),
71
+ "trans-dark": transparentize($gray, 0.85),
72
+ "trans-light": transparentize($gray, 0.85),
73
+ ),
74
+ "light": (
75
+ "": darken($gray, 0%),
76
+ "fore": #6b6d70,
77
+ "light": lighten($gray, 10%),
78
+ "dark": darken($gray, 10%),
79
+ "trans-dark": transparentize($gray, 0.85),
80
+ "trans-light": transparentize($gray, 0.85),
81
+ ),
82
+ "dark": (
83
+ "": $black,
84
+ "fore": $white,
85
+ "light": lighten($black, 10%),
86
+ "dark": darken($black, 10%),
87
+ "trans-dark": transparentize($black, 0.85),
88
+ "trans-light": transparentize($black, 0.85),
89
+ ),
90
+ );
91
+ $sizes: (
92
+ "": (
93
+ xxs: 0.4em,
94
+ xs: 0.6em,
95
+ sm: 0.8em,
96
+ md: 1em,
97
+ lg: 1.2em,
98
+ xl: 1.4em,
99
+ xxl: 1.6em,
100
+ ),
101
+ "border": (
102
+ width: 1px,
103
+ radius: 4px,
104
+ circle: 50px,
105
+ ),
106
+ );