@acorex/styles 6.1.10 → 7.0.0

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 (81) hide show
  1. package/index.scss +3 -1
  2. package/package.json +1 -1
  3. package/src/base/index.scss +44 -30
  4. package/src/components/_avatar.scss +122 -122
  5. package/src/components/_badge.scss +178 -178
  6. package/src/components/_breadcrumbs.scss +30 -29
  7. package/src/components/_button copy.scss +924 -0
  8. package/src/components/_button.scss +0 -924
  9. package/src/components/_calendar.scss +180 -180
  10. package/src/components/_carousel.scss +44 -44
  11. package/src/components/_checkbox.scss +58 -58
  12. package/src/components/_collapse.scss +48 -48
  13. package/src/components/_color-palette.scss +5 -5
  14. package/src/components/_color-picker.scss +23 -23
  15. package/src/components/_context-menu.scss +0 -16
  16. package/src/components/_data-table.scss +1 -1
  17. package/src/components/_datepicker.scss +5 -5
  18. package/src/components/_decoration.scss +0 -39
  19. package/src/components/_dialog.scss +80 -79
  20. package/src/components/_drawer.scss +112 -112
  21. package/src/components/_dropdown.scss +162 -216
  22. package/src/components/_editor-container.scss +0 -155
  23. package/src/components/_fieldset.scss +1 -6
  24. package/src/components/_image.scss +1 -1
  25. package/src/components/_label.scss +1 -1
  26. package/src/components/_list.scss +0 -83
  27. package/src/components/_loading.scss +1 -50
  28. package/src/components/_menu copy.scss +5 -5
  29. package/src/components/_menu.scss +114 -114
  30. package/src/components/_popup.scss +92 -91
  31. package/src/components/_progress.scss +59 -59
  32. package/src/components/_radio.scss +30 -30
  33. package/src/components/_range-slider.scss +147 -125
  34. package/src/components/_result.scss +2 -2
  35. package/src/components/_selectbox.scss +15 -17
  36. package/src/components/_selection-list.scss +2 -2
  37. package/src/components/_skeleton.scss +2 -2
  38. package/src/components/_switch.scss +0 -186
  39. package/src/components/_table.scss +0 -81
  40. package/src/components/_tabs copy.scss +18 -18
  41. package/src/components/_tabs.scss +235 -235
  42. package/src/components/_textarea.scss +27 -31
  43. package/src/components/_toast.scss +1 -1
  44. package/src/components/_treeview.scss +0 -54
  45. package/src/components/_uploader.scss +0 -18
  46. package/src/components/index.scss +1 -47
  47. package/src/icons/demo.html +892 -738
  48. package/src/icons/fonts/acorex-icons.eot +0 -0
  49. package/src/icons/fonts/acorex-icons.svg +71 -0
  50. package/src/icons/fonts/acorex-icons.ttf +0 -0
  51. package/src/icons/fonts/acorex-icons.woff +0 -0
  52. package/src/icons/selection.json +1 -1
  53. package/src/icons/style.css +210 -177
  54. package/src/icons/style.scss +335 -280
  55. package/src/icons/variables.scss +65 -54
  56. package/src/mixins/_media.scss +27 -0
  57. package/src/mixins/index.scss +1 -0
  58. package/src/shared/_check-box.scss +45 -0
  59. package/src/shared/_decoration.scss +56 -0
  60. package/src/shared/_drop-down.scss +163 -0
  61. package/src/shared/_editor-container.scss +130 -0
  62. package/src/shared/_general-button.scss +42 -0
  63. package/src/shared/_icon-control.scss +0 -0
  64. package/src/shared/_inputs.scss +12 -0
  65. package/src/shared/_list.scss +134 -0
  66. package/src/shared/_radio.scss +37 -0
  67. package/src/shared/_skeleton.scss +26 -0
  68. package/src/shared/_table.scss +116 -0
  69. package/src/shared/_utils.scss +46 -0
  70. package/src/shared/index.scss +12 -0
  71. package/src/utility/_mixins.scss +3 -3
  72. package/src/utility/index.scss +16 -22
  73. package/src/variables/_colors.scss +76 -107
  74. package/src/variables/_degrees.scss +1 -0
  75. package/src/variables/index.scss +2 -0
  76. package/{index.js → tailwind.config.js} +14 -63
  77. package/src/components/_alert.scss +0 -276
  78. package/src/icons/fonts/acorex-icon.eot +0 -0
  79. package/src/icons/fonts/acorex-icon.svg +0 -60
  80. package/src/icons/fonts/acorex-icon.ttf +0 -0
  81. package/src/icons/fonts/acorex-icon.woff +0 -0
package/src/components/_popup.scss CHANGED
@@ -1,105 +1,106 @@
1
- @layer components {
1
+ // @layer components {
2
2
 
3
- .ax-popup {
4
- @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
5
- @include control-states("surface");
6
- ax-header,
7
- ax-footer {
8
- @apply ax-bg-white ax-p-3 ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center;
9
- @include control-states("editor");
10
- }
3
+ // .ax-popup {
4
+ // @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-neutral-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
5
+ // @include control-states("surface");
6
+ // background-color: #fff;
7
+ // ax-header,
8
+ // ax-footer {
9
+ // @apply ax-bg-white ax-p-3 ax-border-neutral-300 dark:ax-border-neutral-700 ax-flex ax-justify-between ax-items-center;
10
+ // @include control-states("editor");
11
+ // }
11
12
 
12
- &:focus
13
- {
14
- @apply ax-ring-1 ax-ring-primary-500 ax-outline-none;
15
- }
13
+ // &:focus
14
+ // {
15
+ // @apply ax-ring-1 ax-ring-primary-500 ax-outline-none;
16
+ // }
16
17
 
17
- ax-footer
18
- {
19
- @apply ax-border-t;
20
- }
21
- .ax-popup-main-container {
22
- @apply ax-overflow-auto ax-flex-1;
23
- }
24
- .ax-popup-footer-container {
25
- }
26
- &.ax-popup-full {
27
- @apply ax-w-screen;
28
- height: calc(100 * var(--ax-vh));
29
- max-height: calc(100 * var(--ax-vh));
30
- }
18
+ // ax-footer
19
+ // {
20
+ // @apply ax-border-t;
21
+ // }
22
+ // .ax-popup-main-container {
23
+ // @apply ax-overflow-auto ax-flex-1;
24
+ // }
25
+ // .ax-popup-footer-container {
26
+ // }
27
+ // &.ax-popup-full {
28
+ // @apply ax-w-screen;
29
+ // height: calc(100 * var(--ax-vh));
30
+ // max-height: calc(100 * var(--ax-vh));
31
+ // }
31
32
 
32
- &.ax-fit {
33
- width: fit-content;
34
- }
33
+ // &.ax-fit {
34
+ // width: fit-content;
35
+ // }
35
36
 
36
- @media all and (min-width: 1280px) {
37
- &.ax-popup-sm {
38
- width: 420px !important;
39
- }
37
+ // @media all and (min-width: 1280px) {
38
+ // &.ax-popup-sm {
39
+ // width: 420px !important;
40
+ // }
40
41
 
41
- &.ax-popup-md {
42
- width: 680px !important;
43
- }
42
+ // &.ax-popup-md {
43
+ // width: 680px !important;
44
+ // }
44
45
 
45
- &.ax-popup-lg {
46
- width: 1024px !important;
47
- }
48
- }
46
+ // &.ax-popup-lg {
47
+ // width: 1024px !important;
48
+ // }
49
+ // }
49
50
 
50
- @media all and (min-width: 1024px) and (max-width: 1279px) {
51
- &.ax-popup-sm {
52
- width: 100vw;
53
- max-height: calc(100 * var(--ax-vh));
54
- .ax-popup-main {
55
- @apply ax-h-screen;
56
- }
57
- }
51
+ // @media all and (min-width: 1024px) and (max-width: 1279px) {
52
+ // &.ax-popup-sm {
53
+ // width: 100vw;
54
+ // max-height: calc(100 * var(--ax-vh));
55
+ // .ax-popup-main {
56
+ // @apply ax-h-screen;
57
+ // }
58
+ // }
58
59
 
59
- &.ax-popup-md {
60
- width: 500px !important;
61
- }
60
+ // &.ax-popup-md {
61
+ // width: 500px !important;
62
+ // }
62
63
 
63
- &.ax-popup-lg {
64
- width: 900px !important;
65
- }
66
- }
64
+ // &.ax-popup-lg {
65
+ // width: 900px !important;
66
+ // }
67
+ // }
67
68
 
68
- @media all and (min-width: 768px) and (max-width: 1023px) {
69
- &.ax-popup-md {
70
- width: 500px !important;
71
- }
72
- &.ax-popup-lg {
73
- width: 700px !important;
74
- }
75
- }
69
+ // @media all and (min-width: 768px) and (max-width: 1023px) {
70
+ // &.ax-popup-md {
71
+ // width: 500px !important;
72
+ // }
73
+ // &.ax-popup-lg {
74
+ // width: 700px !important;
75
+ // }
76
+ // }
76
77
 
77
- @media all and (min-width: 425px) and (max-width: 767px) {
78
- &.ax-popup-sm {
79
- width: 100vw;
80
- height: calc(100 * var(--ax-vh));
81
- max-height: calc(100 * var(--ax-vh));
82
- .ax-popup-main {
83
- @apply ax-h-screen;
84
- }
85
- }
78
+ // @media all and (min-width: 425px) and (max-width: 767px) {
79
+ // &.ax-popup-sm {
80
+ // width: 100vw;
81
+ // height: calc(100 * var(--ax-vh));
82
+ // max-height: calc(100 * var(--ax-vh));
83
+ // .ax-popup-main {
84
+ // @apply ax-h-screen;
85
+ // }
86
+ // }
86
87
 
87
- &.ax-popup-md,
88
- &.ax-popup-lg {
89
- width: 460px !important;
90
- }
91
- }
88
+ // &.ax-popup-md,
89
+ // &.ax-popup-lg {
90
+ // width: 460px !important;
91
+ // }
92
+ // }
92
93
 
93
- @media all and (min-width: 0px) and (max-width: 424px) {
94
- &.ax-popup-md,
95
- &.ax-popup-lg {
96
- width: calc(var(--ax-overlay-full-width) * 1vw);
97
- height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
98
- max-height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
99
- .ax-popup-main {
100
- @apply ax-h-screen;
101
- }
102
- }
103
- }
104
- }
105
- }
94
+ // @media all and (min-width: 0px) and (max-width: 424px) {
95
+ // &.ax-popup-md,
96
+ // &.ax-popup-lg {
97
+ // width: calc(var(--ax-overlay-full-width) * 1vw);
98
+ // height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
99
+ // max-height: calc(var(--ax-overlay-full-width) * var(--ax-vh));
100
+ // .ax-popup-main {
101
+ // @apply ax-h-screen;
102
+ // }
103
+ // }
104
+ // }
105
+ // }
106
+ // }
package/src/components/_progress.scss CHANGED
@@ -1,60 +1,60 @@
1
- @layer components {
2
- .ax-progress-bar {
3
- @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
4
- .ax-prefix{
5
- @apply ax-pe-2;
6
- }
7
- .ax-suffix{
8
- @apply ax-ps-2;
9
- }
10
- .ax-progress-bar-container {
11
- @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 dark:ax-bg-white/10 ax-flex ax-rounded-full;
12
- .ax-progress-bar-rise {
13
- max-width: 100%;
14
- transition: width 1s;
15
- @apply ax-bg-primary-500 ax-h-full ax-absolute ax-start-0 ax-rounded-full;
16
- }
17
- }
1
+ // @layer components {
2
+ // .ax-progress-bar {
3
+ // @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
4
+ // .ax-prefix{
5
+ // @apply ax-pe-2;
6
+ // }
7
+ // .ax-suffix{
8
+ // @apply ax-ps-2;
9
+ // }
10
+ // .ax-progress-bar-container {
11
+ // @apply ax-w-full ax-h-2 ax-relative ax-bg-neutral-200 dark:ax-bg-white/10 ax-flex ax-rounded-full;
12
+ // .ax-progress-bar-rise {
13
+ // max-width: 100%;
14
+ // transition: width 1s;
15
+ // @apply ax-bg-primary-500 ax-h-full ax-absolute ax-start-0 ax-rounded-full;
16
+ // }
17
+ // }
18
18
 
19
- &.ax-primary-default {
20
- .ax-progress-bar-rise {
21
- @apply ax-bg-primary-500 dark:ax-bg-primary-800;
22
- }
23
- }
24
- &.ax-secondary-default {
25
- .ax-progress-bar-rise {
26
- @apply ax-bg-secondary-500 dark:ax-bg-secondary-800;
27
- }
28
- }
29
- &.ax-success-default {
30
- .ax-progress-bar-rise {
31
- @apply ax-bg-success-500 dark:ax-bg-success-800;
32
- }
33
- }
34
- &.ax-warning-default {
35
- .ax-progress-bar-rise {
36
- @apply ax-bg-warning-500 dark:ax-bg-warning-800;
37
- }
38
- }
39
- &.ax-danger-default {
40
- .ax-progress-bar-rise {
41
- @apply ax-bg-danger-500 dark:ax-bg-danger-800;
42
- }
43
- }
44
- &.ax-info-default {
45
- .ax-progress-bar-rise {
46
- @apply ax-bg-info-500 dark:ax-bg-info-800;
47
- }
48
- }
49
- &.ax-light-default {
50
- .ax-progress-bar-rise {
51
- @apply ax-bg-light-300 dark:ax-border-light-500;
52
- }
53
- }
54
- &.ax-dark-default {
55
- .ax-progress-bar-rise {
56
- @apply ax-bg-dark-500 dark:ax-bg-dark-200;
57
- }
58
- }
59
- }
60
- }
19
+ // &.ax-primary-default {
20
+ // .ax-progress-bar-rise {
21
+ // @apply ax-bg-primary-500 dark:ax-bg-primary-800;
22
+ // }
23
+ // }
24
+ // &.ax-secondary-default {
25
+ // .ax-progress-bar-rise {
26
+ // @apply ax-bg-secondary-500 dark:ax-bg-secondary-800;
27
+ // }
28
+ // }
29
+ // &.ax-success-default {
30
+ // .ax-progress-bar-rise {
31
+ // @apply ax-bg-success-500 dark:ax-bg-success-800;
32
+ // }
33
+ // }
34
+ // &.ax-warning-default {
35
+ // .ax-progress-bar-rise {
36
+ // @apply ax-bg-warning-500 dark:ax-bg-warning-800;
37
+ // }
38
+ // }
39
+ // &.ax-danger-default {
40
+ // .ax-progress-bar-rise {
41
+ // @apply ax-bg-danger-500 dark:ax-bg-danger-800;
42
+ // }
43
+ // }
44
+ // &.ax-primary-default {
45
+ // .ax-progress-bar-rise {
46
+ // @apply ax-bg-primary-500 dark:ax-bg-primary-800;
47
+ // }
48
+ // }
49
+ // &.ax-neutral-default {
50
+ // .ax-progress-bar-rise {
51
+ // @apply ax-bg-neutral-300 dark:ax-border-neutral-500;
52
+ // }
53
+ // }
54
+ // &.ax-neutral-default {
55
+ // .ax-progress-bar-rise {
56
+ // @apply ax-bg-neutral-500 dark:ax-bg-neutral-200;
57
+ // }
58
+ // }
59
+ // }
60
+ // }
package/src/components/_radio.scss CHANGED
@@ -1,32 +1,32 @@
1
- @layer components {
2
- .ax-radio {
3
- @apply ax-text-sm ax-font-medium ax-text-light-700;
1
+ // @layer components {
2
+ // .ax-radio {
3
+ // @apply ax-text-sm ax-font-medium ax-text-neutral-700;
4
4
 
5
- .ax-radio {
6
- @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
7
- @include control-states('editor');
5
+ // .ax-radio {
6
+ // @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-neutral-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
7
+ // @include control-states('editor');
8
8
 
9
- &:checked {
10
- @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
11
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
12
- }
13
- &:focus {
14
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
15
- }
16
- &.ax-state-disabled{
17
- @apply ax-opacity-70;
18
- }
19
- &.ax-state-disabled{
20
- @apply ax-opacity-60;
21
- }
22
- &.ax-state-error{
23
- @apply ax-border-danger-500;
24
- }
25
- }
26
- ax-label {
27
- label {
28
- @apply ax-mb-0;
29
- }
30
- }
31
- }
32
- }
9
+ // &:checked {
10
+ // @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
11
+ // background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
12
+ // }
13
+ // &:focus {
14
+ // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
15
+ // }
16
+ // &.ax-state-disabled{
17
+ // @apply ax-opacity-70;
18
+ // }
19
+ // &.ax-state-disabled{
20
+ // @apply ax-opacity-60;
21
+ // }
22
+ // &.ax-state-error{
23
+ // @apply ax-border-danger-500;
24
+ // }
25
+ // }
26
+ // ax-label {
27
+ // label {
28
+ // @apply ax-mb-0;
29
+ // }
30
+ // }
31
+ // }
32
+ // }