@acorex/styles 7.1.1 → 7.1.3

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 (34) hide show
  1. package/index.scss +14 -14
  2. package/package.json +18 -18
  3. package/src/animations/index.scss +86 -86
  4. package/src/base/_normalize.scss +422 -422
  5. package/src/base/index.scss +16 -16
  6. package/src/icons/demo.html +892 -892
  7. package/src/icons/fonts/acorex-icons.svg +70 -70
  8. package/src/icons/style.css +210 -210
  9. package/src/icons/style.scss +335 -335
  10. package/src/icons/variables.scss +65 -65
  11. package/src/mixins/_media.scss +27 -27
  12. package/src/mixins/_util.scss +20 -20
  13. package/src/mixins/index.scss +1 -1
  14. package/src/shared/_actionsheet.scss +40 -40
  15. package/src/shared/_check-box.scss +42 -42
  16. package/src/shared/_decoration.scss +45 -45
  17. package/src/shared/_drop-down.scss +155 -155
  18. package/src/shared/_editor-container.scss +168 -168
  19. package/src/shared/_general-button.scss +42 -42
  20. package/src/shared/_inputs.scss +12 -12
  21. package/src/shared/_list.scss +144 -144
  22. package/src/shared/_radio.scss +38 -38
  23. package/src/shared/_skeleton.scss +26 -26
  24. package/src/shared/_table.scss +111 -111
  25. package/src/shared/_utils.scss +52 -52
  26. package/src/shared/index.scss +12 -12
  27. package/src/themes/default copy.scss +129 -129
  28. package/src/themes/default.scss +142 -142
  29. package/src/utility/_mixins.scss +71 -71
  30. package/src/utility/index.scss +55 -55
  31. package/src/variables/_colors.scss +2 -2
  32. package/src/variables/_degrees.scss +1 -1
  33. package/src/variables/index.scss +1 -1
  34. package/tailwind.config.js +183 -183
package/src/shared/_drop-down.scss CHANGED
@@ -1,155 +1,155 @@
1
- @import '../variables/index.scss';
2
-
3
- @mixin drop-down-item-apperance() {
4
- @each $color in $color_names {
5
- &.ax-#{$color}-default {
6
- background-color: transparent;
7
- color: rgba(var(--ax-color-#{$color}-500));
8
- border: transparent;
9
-
10
- &:hover,
11
- &:focus {
12
- background-color: rgba(var(--ax-color-on-surface));
13
- color: rgba(var(--ax-color-#{$color}-600));
14
- }
15
-
16
- &:active {
17
- color: rgba(var(--ax-color-#{$color}-400));
18
- }
19
-
20
- &.ax-state-selected {
21
- background-color: rgba(var(--ax-color-#{$color}-500));
22
- color: rgba(var(--ax-color-#{$color}-fore));
23
- }
24
- }
25
- }
26
-
27
- &.ax-ghost-default {
28
- background-color: transparent;
29
- color: rgba(var(--ax-color-surface-fore));
30
- border: transparent;
31
-
32
- &:hover,
33
- &:focus,
34
- &:active {
35
- background-color: rgba(var(--ax-color-on-surface));
36
- color: rgba(var(--ax-color-on-surface-fore));
37
- }
38
-
39
- &.ax-state-selected {
40
- background-color: rgba(var(--ax-color-primary-500));
41
- color: rgba(var(--ax-color-primary-fore));
42
- }
43
- }
44
- }
45
-
46
- .ax-drop-down {
47
- display: contents;
48
-
49
- .ax-dropdown-content {
50
- display: flex;
51
- align-items: center;
52
- flex: 1 1 auto;
53
- font-size: 0.875rem;
54
- overflow-y: hidden;
55
- overflow-x: auto;
56
-
57
- &.ax-state-disabled {
58
- opacity: 0.5;
59
- cursor: not-allowed;
60
- }
61
- }
62
- }
63
-
64
- .ax-overlay-pane {
65
- background-color: rgba(var(--ax-color-surface));
66
- border: 1px solid;
67
- border-color: rgba(var(--ax-color-border-default));
68
- border-radius: var(--ax-rounded-border-default);
69
- box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
70
- overflow: hidden;
71
- margin-top: 0.25rem;
72
- ax-header,
73
- ax-footer {
74
- background-color: rgba(var(--ax-color-surface));
75
- padding: 0.75rem;
76
- }
77
-
78
- @include media('phone') {
79
- border-bottom-right-radius: 0px;
80
- border-bottom-left-radius: 0px;
81
- }
82
-
83
- &.ax-overlay-center {
84
- height: fit-content;
85
- max-height: 90vh;
86
- width: 80vw;
87
- }
88
-
89
- &.ax-overlay-actionsheet {
90
- background-color: rgba(var(--ax-color-surface));
91
- width: 100%;
92
- height: auto;
93
- max-height: 85vh;
94
-
95
- &.ax-full {
96
- max-height: 95vh;
97
- height: 95vh;
98
- }
99
- }
100
-
101
- &.ax-overlay-full {
102
- width: 100vw;
103
- height: 100vh;
104
- }
105
-
106
- &.ax-dropdown-list {
107
- display: flex;
108
- flex-direction: column;
109
- border: 1px solid;
110
- border-color: rgba(var(--ax-color-border-default));
111
- border-radius: var(--ax-rounded-border-default);
112
- box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
113
- padding: 0.5rem 0;
114
-
115
- .ax-button-item {
116
- position: relative;
117
- display: inline-flex;
118
- align-items: center;
119
- justify-content: flex-start;
120
- padding: 0.5rem;
121
- padding-inline-start: 1.5rem;
122
- padding-inline-end: 2rem;
123
- font-size: 0.875rem;
124
- color: rgba(var(--ax-color-text-default));
125
- user-select: none;
126
- cursor: pointer;
127
-
128
- &.ax-divide {
129
- border: 1px solid;
130
- border-color: rgba(var(--ax-color-border-default));
131
- }
132
-
133
- &.ax-state-disabled {
134
- opacity: 0.5;
135
- cursor: not-allowed;
136
- }
137
-
138
- ax-prefix,
139
- ax-suffix {
140
- display: flex;
141
- flex-direction: row;
142
- }
143
-
144
- ax-prefix {
145
- padding-inline-end: 0.5rem;
146
- }
147
-
148
- ax-suffix {
149
- padding-inline-start: 0.5rem;
150
- }
151
-
152
- @include drop-down-item-apperance();
153
- }
154
- }
155
- }
1
+ @import '../variables/index.scss';
2
+
3
+ @mixin drop-down-item-apperance() {
4
+ @each $color in $color_names {
5
+ &.ax-#{$color}-default {
6
+ background-color: transparent;
7
+ color: rgba(var(--ax-color-#{$color}-500));
8
+ border: transparent;
9
+
10
+ &:hover,
11
+ &:focus {
12
+ background-color: rgba(var(--ax-color-on-surface));
13
+ color: rgba(var(--ax-color-#{$color}-600));
14
+ }
15
+
16
+ &:active {
17
+ color: rgba(var(--ax-color-#{$color}-400));
18
+ }
19
+
20
+ &.ax-state-selected {
21
+ background-color: rgba(var(--ax-color-#{$color}-500));
22
+ color: rgba(var(--ax-color-#{$color}-fore));
23
+ }
24
+ }
25
+ }
26
+
27
+ &.ax-ghost-default {
28
+ background-color: transparent;
29
+ color: rgba(var(--ax-color-surface-fore));
30
+ border: transparent;
31
+
32
+ &:hover,
33
+ &:focus,
34
+ &:active {
35
+ background-color: rgba(var(--ax-color-on-surface));
36
+ color: rgba(var(--ax-color-on-surface-fore));
37
+ }
38
+
39
+ &.ax-state-selected {
40
+ background-color: rgba(var(--ax-color-primary-500));
41
+ color: rgba(var(--ax-color-primary-fore));
42
+ }
43
+ }
44
+ }
45
+
46
+ .ax-drop-down {
47
+ display: contents;
48
+
49
+ .ax-dropdown-content {
50
+ display: flex;
51
+ align-items: center;
52
+ flex: 1 1 auto;
53
+ font-size: 0.875rem;
54
+ overflow-y: hidden;
55
+ overflow-x: auto;
56
+
57
+ &.ax-state-disabled {
58
+ opacity: 0.5;
59
+ cursor: not-allowed;
60
+ }
61
+ }
62
+ }
63
+
64
+ .ax-overlay-pane {
65
+ background-color: rgba(var(--ax-color-surface));
66
+ border: 1px solid;
67
+ border-color: rgba(var(--ax-color-border-default));
68
+ border-radius: var(--ax-rounded-border-default);
69
+ box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
70
+ overflow: hidden;
71
+ margin-top: 0.25rem;
72
+ ax-header,
73
+ ax-footer {
74
+ background-color: rgba(var(--ax-color-surface));
75
+ padding: 0.75rem;
76
+ }
77
+
78
+ @include media('phone') {
79
+ border-bottom-right-radius: 0px;
80
+ border-bottom-left-radius: 0px;
81
+ }
82
+
83
+ &.ax-overlay-center {
84
+ height: fit-content;
85
+ max-height: 90vh;
86
+ width: 80vw;
87
+ }
88
+
89
+ &.ax-overlay-actionsheet {
90
+ background-color: rgba(var(--ax-color-surface));
91
+ width: 100%;
92
+ height: auto;
93
+ max-height: 85vh;
94
+
95
+ &.ax-full {
96
+ max-height: 95vh;
97
+ height: 95vh;
98
+ }
99
+ }
100
+
101
+ &.ax-overlay-full {
102
+ width: 100vw;
103
+ height: 100vh;
104
+ }
105
+
106
+ &.ax-dropdown-list {
107
+ display: flex;
108
+ flex-direction: column;
109
+ border: 1px solid;
110
+ border-color: rgba(var(--ax-color-border-default));
111
+ border-radius: var(--ax-rounded-border-default);
112
+ box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
113
+ padding: 0.5rem 0;
114
+
115
+ .ax-button-item {
116
+ position: relative;
117
+ display: inline-flex;
118
+ align-items: center;
119
+ justify-content: flex-start;
120
+ padding: 0.5rem;
121
+ padding-inline-start: 1.5rem;
122
+ padding-inline-end: 2rem;
123
+ font-size: 0.875rem;
124
+ color: rgba(var(--ax-color-text-default));
125
+ user-select: none;
126
+ cursor: pointer;
127
+
128
+ &.ax-divide {
129
+ border: 1px solid;
130
+ border-color: rgba(var(--ax-color-border-default));
131
+ }
132
+
133
+ &.ax-state-disabled {
134
+ opacity: 0.5;
135
+ cursor: not-allowed;
136
+ }
137
+
138
+ ax-prefix,
139
+ ax-suffix {
140
+ display: flex;
141
+ flex-direction: row;
142
+ }
143
+
144
+ ax-prefix {
145
+ padding-inline-end: 0.5rem;
146
+ }
147
+
148
+ ax-suffix {
149
+ padding-inline-start: 0.5rem;
150
+ }
151
+
152
+ @include drop-down-item-apperance();
153
+ }
154
+ }
155
+ }
package/src/shared/_editor-container.scss CHANGED
@@ -1,168 +1,168 @@
1
- @import '../mixins/index.scss';
2
- // @include darkMode() {
3
- // .ax-editor-container {
4
- // background-color: rgba(var(--ax-color-on-surface));
5
- // }
6
- // }
7
- .ax-editor-container {
8
- width: 100%;
9
- height: var(--ax-size-default);
10
- display: flex;
11
- background-color: rgba(var(--ax-color-input-surface));
12
- color: rgba(var(--ax-color-input-surface-fore));
13
- border: 1px solid;
14
- border-color: rgba(var(--ax-color-border-default));
15
- border-radius: var(--ax-rounded-border-default);
16
- font-size: 1rem;
17
- overflow: hidden;
18
- &:focus-within {
19
- border-color: rgba(var(--ax-color-primary-500));
20
- box-shadow: 0px 0 0px 1px rgba(var(--ax-color-primary-500));
21
- }
22
-
23
- &.ax-sm {
24
- .ax-input {
25
- font-size: 0.875rem;
26
- line-height: 0.875rem;
27
- padding-inline-start: 0.5rem;
28
- padding-inline-end: 0.375rem;
29
- }
30
- }
31
- &.ax-md {
32
- .ax-input {
33
- font-size: 1rem;
34
- line-height: 1rem;
35
- }
36
- }
37
- &.ax-lg {
38
- .ax-input {
39
- font-size: 1.25rem;
40
- line-height: 1.25rem;
41
- }
42
- }
43
-
44
- .ax-editor-control {
45
- display: flex;
46
- align-items: center;
47
- justify-content: center;
48
- width: var(--ax-size-default);
49
- min-width: var(--ax-size-default);
50
- height: 100%;
51
- font-size: 1.25rem;
52
- line-height: 1.25rem;
53
- color: rgba(var(--ax-color-surface-fore));
54
- }
55
-
56
- &.ax-button-icon {
57
- padding-left: 0.5rem;
58
- padding-right: 0.5rem;
59
- }
60
- .ax-input,
61
- .ax-textarea {
62
- width: 100%;
63
- background-color: transparent;
64
- flex: 1 1 0%;
65
- border: none;
66
- text-align: inherit;
67
- font-family: inherit;
68
- font-size: inherit;
69
- font-weight: 400;
70
- &:focus {
71
- box-shadow: none;
72
- }
73
- }
74
- .ax-input {
75
- padding-inline-start: 1rem /* 16px */;
76
- padding-inline-end: 0.75rem /* 12px */;
77
- }
78
- .ax-textarea {
79
- padding: 0.625rem /* 10px */;
80
- }
81
- & > .ax-prefix {
82
- *,
83
- .ax-button,
84
- ax-title {
85
- border-start-start-radius: 0.25rem /* 4px */;
86
- border-end-start-radius: 0.25rem;
87
- }
88
- }
89
-
90
- & > .ax-suffix {
91
- *,
92
- .ax-button,
93
- ax-title {
94
- border-start-end-radius: 0.25rem /* 4px */;
95
- border-end-end-radius: 0.25rem;
96
- }
97
- }
98
-
99
- & > .ax-prefix,
100
- & > .ax-suffix {
101
- * {
102
- height: 100%;
103
- display: flex;
104
- justify-content: center;
105
- align-items: center;
106
- border-radius: 0px;
107
- }
108
-
109
- ax-icon {
110
- padding-left: 0.5rem /* 8px */;
111
- padding-right: 0.5rem;
112
- }
113
-
114
- ax-title {
115
- padding-left: 1rem /* 16px */;
116
- padding-right: 1rem /* 16px */;
117
- }
118
-
119
- & > ax-text {
120
- font-size: 0.875rem;
121
- background-color: transparent;
122
- display: flex;
123
- align-items: center;
124
- justify-content: center;
125
- padding: 0 0.5rem;
126
- line-height: 1;
127
- }
128
- }
129
-
130
- .ax-button {
131
- height: 100% !important;
132
- border-radius: 0px;
133
-
134
- &.ax-button-icon {
135
- width: var(--ax-size-default);
136
- height: var(--ax-size-default);
137
- }
138
- }
139
-
140
- &.ax-state-disabled {
141
- opacity: 0.5;
142
- }
143
-
144
- &.ax-state-error {
145
- border-color: rgba(var(--ax-color-danger-500));
146
- &:focus-within {
147
- box-shadow: 0px 0 0px 1px rgba(var(--ax-color-danger-500));
148
- }
149
- .ax-input {
150
- &::placeholder {
151
- color: rgba(var(--ax-color-danger-500));
152
- }
153
- }
154
- }
155
-
156
- &.ax-state-success {
157
- outline-color: rgba(var(--ax-color-success-500));
158
- border-color: rgba(var(--ax-color-success-500));
159
- &:focus-within {
160
- box-shadow: 0px 0 0px 1px rgba(var(--ax-color-success-500));
161
- }
162
- .ax-input {
163
- &::placeholder {
164
- color: rgba(var(--ax-color-success-500));
165
- }
166
- }
167
- }
168
- }
1
+ @import '../mixins/index.scss';
2
+ // @include darkMode() {
3
+ // .ax-editor-container {
4
+ // background-color: rgba(var(--ax-color-on-surface));
5
+ // }
6
+ // }
7
+ .ax-editor-container {
8
+ width: 100%;
9
+ height: var(--ax-size-default);
10
+ display: flex;
11
+ background-color: rgba(var(--ax-color-input-surface));
12
+ color: rgba(var(--ax-color-input-surface-fore));
13
+ border: 1px solid;
14
+ border-color: rgba(var(--ax-color-border-default));
15
+ border-radius: var(--ax-rounded-border-default);
16
+ font-size: 1rem;
17
+ overflow: hidden;
18
+ &:focus-within {
19
+ border-color: rgba(var(--ax-color-primary-500));
20
+ box-shadow: 0px 0 0px 1px rgba(var(--ax-color-primary-500));
21
+ }
22
+
23
+ &.ax-sm {
24
+ .ax-input {
25
+ font-size: 0.875rem;
26
+ line-height: 0.875rem;
27
+ padding-inline-start: 0.5rem;
28
+ padding-inline-end: 0.375rem;
29
+ }
30
+ }
31
+ &.ax-md {
32
+ .ax-input {
33
+ font-size: 1rem;
34
+ line-height: 1rem;
35
+ }
36
+ }
37
+ &.ax-lg {
38
+ .ax-input {
39
+ font-size: 1.25rem;
40
+ line-height: 1.25rem;
41
+ }
42
+ }
43
+
44
+ .ax-editor-control {
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ width: var(--ax-size-default);
49
+ min-width: var(--ax-size-default);
50
+ height: 100%;
51
+ font-size: 1.25rem;
52
+ line-height: 1.25rem;
53
+ color: rgba(var(--ax-color-surface-fore));
54
+ }
55
+
56
+ &.ax-button-icon {
57
+ padding-left: 0.5rem;
58
+ padding-right: 0.5rem;
59
+ }
60
+ .ax-input,
61
+ .ax-textarea {
62
+ width: 100%;
63
+ background-color: transparent;
64
+ flex: 1 1 0%;
65
+ border: none;
66
+ text-align: inherit;
67
+ font-family: inherit;
68
+ font-size: inherit;
69
+ font-weight: 400;
70
+ &:focus {
71
+ box-shadow: none;
72
+ }
73
+ }
74
+ .ax-input {
75
+ padding-inline-start: 1rem /* 16px */;
76
+ padding-inline-end: 0.75rem /* 12px */;
77
+ }
78
+ .ax-textarea {
79
+ padding: 0.625rem /* 10px */;
80
+ }
81
+ & > .ax-prefix {
82
+ *,
83
+ .ax-button,
84
+ ax-title {
85
+ border-start-start-radius: 0.25rem /* 4px */;
86
+ border-end-start-radius: 0.25rem;
87
+ }
88
+ }
89
+
90
+ & > .ax-suffix {
91
+ *,
92
+ .ax-button,
93
+ ax-title {
94
+ border-start-end-radius: 0.25rem /* 4px */;
95
+ border-end-end-radius: 0.25rem;
96
+ }
97
+ }
98
+
99
+ & > .ax-prefix,
100
+ & > .ax-suffix {
101
+ * {
102
+ height: 100%;
103
+ display: flex;
104
+ justify-content: center;
105
+ align-items: center;
106
+ border-radius: 0px;
107
+ }
108
+
109
+ ax-icon {
110
+ padding-left: 0.5rem /* 8px */;
111
+ padding-right: 0.5rem;
112
+ }
113
+
114
+ ax-title {
115
+ padding-left: 1rem /* 16px */;
116
+ padding-right: 1rem /* 16px */;
117
+ }
118
+
119
+ & > ax-text {
120
+ font-size: 0.875rem;
121
+ background-color: transparent;
122
+ display: flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ padding: 0 0.5rem;
126
+ line-height: 1;
127
+ }
128
+ }
129
+
130
+ .ax-button {
131
+ height: 100% !important;
132
+ border-radius: 0px;
133
+
134
+ &.ax-button-icon {
135
+ width: var(--ax-size-default);
136
+ height: var(--ax-size-default);
137
+ }
138
+ }
139
+
140
+ &.ax-state-disabled {
141
+ opacity: 0.5;
142
+ }
143
+
144
+ &.ax-state-error {
145
+ border-color: rgba(var(--ax-color-danger-500));
146
+ &:focus-within {
147
+ box-shadow: 0px 0 0px 1px rgba(var(--ax-color-danger-500));
148
+ }
149
+ .ax-input {
150
+ &::placeholder {
151
+ color: rgba(var(--ax-color-danger-500));
152
+ }
153
+ }
154
+ }
155
+
156
+ &.ax-state-success {
157
+ outline-color: rgba(var(--ax-color-success-500));
158
+ border-color: rgba(var(--ax-color-success-500));
159
+ &:focus-within {
160
+ box-shadow: 0px 0 0px 1px rgba(var(--ax-color-success-500));
161
+ }
162
+ .ax-input {
163
+ &::placeholder {
164
+ color: rgba(var(--ax-color-success-500));
165
+ }
166
+ }
167
+ }
168
+ }