@acorex/styles 5.9.0 → 6.0.2

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 (51) hide show
  1. package/index.js +8 -12
  2. package/index.scss +4 -4
  3. package/package.json +17 -10
  4. package/src/components/_action-sheet.scss +1 -2
  5. package/src/components/_alert.scss +56 -54
  6. package/src/components/_avatar.scss +0 -2
  7. package/src/components/_badge.scss +29 -5
  8. package/src/components/_breadcrumbs.scss +2 -3
  9. package/src/components/_button.scss +9 -13
  10. package/src/components/_calendar.scss +5 -5
  11. package/src/components/_checkbox.scss +3 -8
  12. package/src/components/_collapse.scss +0 -1
  13. package/src/components/_color-palette.scss +5 -5
  14. package/src/components/_color-picker.scss +1 -1
  15. package/src/components/_data-table.scss +5 -5
  16. package/src/components/_datapager.scss +3 -3
  17. package/src/components/_decoration.scss +10 -10
  18. package/src/components/_dialog.scss +1 -1
  19. package/src/components/_drawer.scss +7 -7
  20. package/src/components/_dropdown.scss +8 -10
  21. package/src/components/_editor-container.scss +12 -12
  22. package/src/components/_fieldset.scss +1 -1
  23. package/src/components/_form.scss +1 -1
  24. package/src/components/_label.scss +1 -1
  25. package/src/components/_list.scss +8 -23
  26. package/src/components/_loading.scss +14 -21
  27. package/src/components/_menu.scss +3 -4
  28. package/src/components/_numberbox.scss +1 -3
  29. package/src/components/_popup.scss +3 -7
  30. package/src/components/_progress.scss +2 -3
  31. package/src/components/_radio.scss +1 -1
  32. package/src/components/_range-slider.scss +2 -2
  33. package/src/components/_result.scss +0 -1
  34. package/src/components/_selectbox.scss +2 -2
  35. package/src/components/_switch.scss +0 -1
  36. package/src/components/_tabs.scss +3 -3
  37. package/src/components/_textarea.scss +5 -6
  38. package/src/components/_toast.scss +1 -1
  39. package/src/components/_treeview.scss +0 -1
  40. package/src/components/index.scss +0 -2
  41. package/src/icons/demo-files/demo.css +152 -152
  42. package/src/icons/demo-files/demo.js +30 -30
  43. package/src/icons/demo.html +556 -556
  44. package/src/icons/fonts/acorex-icon.svg +46 -46
  45. package/src/icons/style.css +138 -138
  46. package/src/icons/style.scss +215 -215
  47. package/src/icons/variables.scss +41 -41
  48. package/src/utility/_mixins.scss +63 -0
  49. package/src/components/_picker.scss +0 -179
  50. package/src/components/_side-menu.scss +0 -42
  51. package/src/components/_switch copy.scss +0 -185
@@ -1,5 +1,4 @@
1
1
  @layer components {
2
- ax-textarea,
3
2
  .ax-textarea {
4
3
  min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
5
4
  @apply ax-relative ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
@@ -18,19 +17,19 @@
18
17
  @apply ax-outline-transparent;
19
18
  }
20
19
  }
21
- > ax-prefix,
22
- > ax-suffix {
20
+ > .ax-prefix,
21
+ > .ax-suffix {
23
22
  @apply ax-mb-2 ax-p-1.5 ax-absolute;
24
23
  @include control-states("editor");
25
- ax-button {
24
+ .ax-button {
26
25
  @apply ax-text-sm;
27
26
  --ax-base-size: 5px;
28
27
  }
29
28
  }
30
- > ax-prefix {
29
+ > .ax-prefix {
31
30
  @apply ax-top-0 ax-end-0;
32
31
  }
33
- > ax-suffix {
32
+ > .ax-suffix {
34
33
  @apply ax-bottom-0 ax-end-0;
35
34
  }
36
35
 
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- ax-toast {
2
+ .ax-toast {
3
3
  width: max(20vw, 350px);
4
4
  @include screen("mobile") {
5
5
  width: 98vw;
@@ -1,5 +1,4 @@
1
1
  @layer components {
2
- ax-tree-view,
3
2
  .ax-tree-view {
4
3
  > ul {
5
4
  li {
@@ -22,7 +22,6 @@
22
22
  @import "./label";
23
23
  @import "./list";
24
24
  @import "./numberbox";
25
- @import "./picker";
26
25
  @import "./loading";
27
26
  @import "./menu";
28
27
  @import "./popup";
@@ -33,7 +32,6 @@
33
32
  @import "./result";
34
33
  @import "./selectbox";
35
34
  @import "./selection-list";
36
- @import "./side-menu";
37
35
  @import "./skeleton";
38
36
  @import "./switch";
39
37
  @import "./table";
@@ -1,152 +1,152 @@
1
- body {
2
- padding: 0;
3
- margin: 0;
4
- font-family: sans-serif;
5
- font-size: 1em;
6
- line-height: 1.5;
7
- color: #555;
8
- background: #fff;
9
- }
10
- h1 {
11
- font-size: 1.5em;
12
- font-weight: normal;
13
- }
14
- small {
15
- font-size: .66666667em;
16
- }
17
- a {
18
- color: #e74c3c;
19
- text-decoration: none;
20
- }
21
- a:hover, a:focus {
22
- box-shadow: 0 1px #e74c3c;
23
- }
24
- .bshadow0, input {
25
- box-shadow: inset 0 -2px #e7e7e7;
26
- }
27
- input:hover {
28
- box-shadow: inset 0 -2px #ccc;
29
- }
30
- input, fieldset {
31
- font-family: sans-serif;
32
- font-size: 1em;
33
- margin: 0;
34
- padding: 0;
35
- border: 0;
36
- }
37
- input {
38
- color: inherit;
39
- line-height: 1.5;
40
- height: 1.5em;
41
- padding: .25em 0;
42
- }
43
- input:focus {
44
- outline: none;
45
- box-shadow: inset 0 -2px #449fdb;
46
- }
47
- .glyph {
48
- font-size: 16px;
49
- width: 15em;
50
- padding-bottom: 1em;
51
- margin-right: 4em;
52
- margin-bottom: 1em;
53
- float: left;
54
- overflow: hidden;
55
- }
56
- .liga {
57
- width: 80%;
58
- width: calc(100% - 2.5em);
59
- }
60
- .talign-right {
61
- text-align: right;
62
- }
63
- .talign-center {
64
- text-align: center;
65
- }
66
- .bgc1 {
67
- background: #f1f1f1;
68
- }
69
- .fgc1 {
70
- color: #999;
71
- }
72
- .fgc0 {
73
- color: #000;
74
- }
75
- p {
76
- margin-top: 1em;
77
- margin-bottom: 1em;
78
- }
79
- .mvm {
80
- margin-top: .75em;
81
- margin-bottom: .75em;
82
- }
83
- .mtn {
84
- margin-top: 0;
85
- }
86
- .mtl, .mal {
87
- margin-top: 1.5em;
88
- }
89
- .mbl, .mal {
90
- margin-bottom: 1.5em;
91
- }
92
- .mal, .mhl {
93
- margin-left: 1.5em;
94
- margin-right: 1.5em;
95
- }
96
- .mhmm {
97
- margin-left: 1em;
98
- margin-right: 1em;
99
- }
100
- .mls {
101
- margin-left: .25em;
102
- }
103
- .ptl {
104
- padding-top: 1.5em;
105
- }
106
- .pbs, .pvs {
107
- padding-bottom: .25em;
108
- }
109
- .pvs, .pts {
110
- padding-top: .25em;
111
- }
112
- .unit {
113
- float: left;
114
- }
115
- .unitRight {
116
- float: right;
117
- }
118
- .size1of2 {
119
- width: 50%;
120
- }
121
- .size1of1 {
122
- width: 100%;
123
- }
124
- .clearfix:before, .clearfix:after {
125
- content: " ";
126
- display: table;
127
- }
128
- .clearfix:after {
129
- clear: both;
130
- }
131
- .hidden-true {
132
- display: none;
133
- }
134
- .textbox0 {
135
- width: 3em;
136
- background: #f1f1f1;
137
- padding: .25em .5em;
138
- line-height: 1.5;
139
- height: 1.5em;
140
- }
141
- #testDrive {
142
- display: block;
143
- padding-top: 24px;
144
- line-height: 1.5;
145
- }
146
- .fs0 {
147
- font-size: 16px;
148
- }
149
- .fs1 {
150
- font-size: 32px;
151
- }
152
-
1
+ body {
2
+ padding: 0;
3
+ margin: 0;
4
+ font-family: sans-serif;
5
+ font-size: 1em;
6
+ line-height: 1.5;
7
+ color: #555;
8
+ background: #fff;
9
+ }
10
+ h1 {
11
+ font-size: 1.5em;
12
+ font-weight: normal;
13
+ }
14
+ small {
15
+ font-size: .66666667em;
16
+ }
17
+ a {
18
+ color: #e74c3c;
19
+ text-decoration: none;
20
+ }
21
+ a:hover, a:focus {
22
+ box-shadow: 0 1px #e74c3c;
23
+ }
24
+ .bshadow0, input {
25
+ box-shadow: inset 0 -2px #e7e7e7;
26
+ }
27
+ input:hover {
28
+ box-shadow: inset 0 -2px #ccc;
29
+ }
30
+ input, fieldset {
31
+ font-family: sans-serif;
32
+ font-size: 1em;
33
+ margin: 0;
34
+ padding: 0;
35
+ border: 0;
36
+ }
37
+ input {
38
+ color: inherit;
39
+ line-height: 1.5;
40
+ height: 1.5em;
41
+ padding: .25em 0;
42
+ }
43
+ input:focus {
44
+ outline: none;
45
+ box-shadow: inset 0 -2px #449fdb;
46
+ }
47
+ .glyph {
48
+ font-size: 16px;
49
+ width: 15em;
50
+ padding-bottom: 1em;
51
+ margin-right: 4em;
52
+ margin-bottom: 1em;
53
+ float: left;
54
+ overflow: hidden;
55
+ }
56
+ .liga {
57
+ width: 80%;
58
+ width: calc(100% - 2.5em);
59
+ }
60
+ .talign-right {
61
+ text-align: right;
62
+ }
63
+ .talign-center {
64
+ text-align: center;
65
+ }
66
+ .bgc1 {
67
+ background: #f1f1f1;
68
+ }
69
+ .fgc1 {
70
+ color: #999;
71
+ }
72
+ .fgc0 {
73
+ color: #000;
74
+ }
75
+ p {
76
+ margin-top: 1em;
77
+ margin-bottom: 1em;
78
+ }
79
+ .mvm {
80
+ margin-top: .75em;
81
+ margin-bottom: .75em;
82
+ }
83
+ .mtn {
84
+ margin-top: 0;
85
+ }
86
+ .mtl, .mal {
87
+ margin-top: 1.5em;
88
+ }
89
+ .mbl, .mal {
90
+ margin-bottom: 1.5em;
91
+ }
92
+ .mal, .mhl {
93
+ margin-left: 1.5em;
94
+ margin-right: 1.5em;
95
+ }
96
+ .mhmm {
97
+ margin-left: 1em;
98
+ margin-right: 1em;
99
+ }
100
+ .mls {
101
+ margin-left: .25em;
102
+ }
103
+ .ptl {
104
+ padding-top: 1.5em;
105
+ }
106
+ .pbs, .pvs {
107
+ padding-bottom: .25em;
108
+ }
109
+ .pvs, .pts {
110
+ padding-top: .25em;
111
+ }
112
+ .unit {
113
+ float: left;
114
+ }
115
+ .unitRight {
116
+ float: right;
117
+ }
118
+ .size1of2 {
119
+ width: 50%;
120
+ }
121
+ .size1of1 {
122
+ width: 100%;
123
+ }
124
+ .clearfix:before, .clearfix:after {
125
+ content: " ";
126
+ display: table;
127
+ }
128
+ .clearfix:after {
129
+ clear: both;
130
+ }
131
+ .hidden-true {
132
+ display: none;
133
+ }
134
+ .textbox0 {
135
+ width: 3em;
136
+ background: #f1f1f1;
137
+ padding: .25em .5em;
138
+ line-height: 1.5;
139
+ height: 1.5em;
140
+ }
141
+ #testDrive {
142
+ display: block;
143
+ padding-top: 24px;
144
+ line-height: 1.5;
145
+ }
146
+ .fs0 {
147
+ font-size: 16px;
148
+ }
149
+ .fs1 {
150
+ font-size: 32px;
151
+ }
152
+
@@ -1,30 +1,30 @@
1
- if (!('boxShadow' in document.body.style)) {
2
- document.body.setAttribute('class', 'noBoxShadow');
3
- }
4
-
5
- document.body.addEventListener("click", function(e) {
6
- var target = e.target;
7
- if (target.tagName === "INPUT" &&
8
- target.getAttribute('class').indexOf('liga') === -1) {
9
- target.select();
10
- }
11
- });
12
-
13
- (function() {
14
- var fontSize = document.getElementById('fontSize'),
15
- testDrive = document.getElementById('testDrive'),
16
- testText = document.getElementById('testText');
17
- function updateTest() {
18
- testDrive.innerHTML = testText.value || String.fromCharCode(160);
19
- if (window.icomoonLiga) {
20
- window.icomoonLiga(testDrive);
21
- }
22
- }
23
- function updateSize() {
24
- testDrive.style.fontSize = fontSize.value + 'px';
25
- }
26
- fontSize.addEventListener('change', updateSize, false);
27
- testText.addEventListener('input', updateTest, false);
28
- testText.addEventListener('change', updateTest, false);
29
- updateSize();
30
- }());
1
+ if (!('boxShadow' in document.body.style)) {
2
+ document.body.setAttribute('class', 'noBoxShadow');
3
+ }
4
+
5
+ document.body.addEventListener("click", function(e) {
6
+ var target = e.target;
7
+ if (target.tagName === "INPUT" &&
8
+ target.getAttribute('class').indexOf('liga') === -1) {
9
+ target.select();
10
+ }
11
+ });
12
+
13
+ (function() {
14
+ var fontSize = document.getElementById('fontSize'),
15
+ testDrive = document.getElementById('testDrive'),
16
+ testText = document.getElementById('testText');
17
+ function updateTest() {
18
+ testDrive.innerHTML = testText.value || String.fromCharCode(160);
19
+ if (window.icomoonLiga) {
20
+ window.icomoonLiga(testDrive);
21
+ }
22
+ }
23
+ function updateSize() {
24
+ testDrive.style.fontSize = fontSize.value + 'px';
25
+ }
26
+ fontSize.addEventListener('change', updateSize, false);
27
+ testText.addEventListener('input', updateTest, false);
28
+ testText.addEventListener('change', updateTest, false);
29
+ updateSize();
30
+ }());