@acorex/styles 7.0.18 → 7.0.20

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/icons/Read Me.txt +7 -7
  3. package/src/icons/demo-files/demo.css +152 -152
  4. package/src/icons/demo-files/demo.js +30 -30
  5. package/src/shared/_editor-container.scss +1 -0
  6. package/src/shared/_list.scss +121 -121
  7. package/src/shared/_table.scss +3 -2
  8. package/tailwind.config.js +23 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "7.0.18",
3
+ "version": "7.0.20",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/icons/Read Me.txt CHANGED
@@ -1,7 +1,7 @@
1
- Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
2
-
3
- To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
4
-
5
- You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
6
-
7
- You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
1
+ Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
2
+
3
+ To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
4
+
5
+ You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
6
+
7
+ You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
package/src/icons/demo-files/demo.css CHANGED
@@ -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
+
package/src/icons/demo-files/demo.js CHANGED
@@ -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
+ }());
package/src/shared/_editor-container.scss CHANGED
@@ -42,6 +42,7 @@
42
42
  align-items: center;
43
43
  justify-content: center;
44
44
  width: var(--ax-size-default);
45
+ min-width: var(--ax-size-default);
45
46
  height: var(--ax-size-default);
46
47
  font-size: 1.25rem;
47
48
  line-height: 1.25rem;
package/src/shared/_list.scss CHANGED
@@ -1,134 +1,134 @@
1
- @import "../mixins/index.scss";
1
+ @import '../mixins/index.scss';
2
2
 
3
3
  .ax-list {
4
+ display: flex;
5
+ flex-direction: column;
6
+ overflow: hidden;
7
+ font-size: 0.875rem;
8
+ background-color: rgb(var(--ax-color-surface));
9
+ height: 100%;
10
+ @include media('desktop') {
11
+ max-height: 320px;
12
+ }
13
+
14
+ .ax-header,
15
+ .ax-footer {
4
16
  display: flex;
5
- flex-direction: column;
6
- overflow: hidden;
7
- font-size: 0.875rem;
17
+ justify-content: space-between;
18
+ align-items: center;
8
19
  background-color: rgb(var(--ax-color-surface));
9
- height: 100%;
10
- @include media("desktop") {
11
- max-height: 320px;
12
- }
13
-
14
- .ax-header,
15
- .ax-footer {
16
- display: flex;
17
- justify-content: space-between;
18
- align-items: center;
19
- background-color: rgb(var(--ax-color-surface));
20
- border-color: rgb(var(--ax-color-border-default));
21
- }
22
-
23
- .ax-footer {
24
- border-top: 1px solid;
25
- }
26
-
27
- .ax-content {
28
- flex: 1 1 0%;
29
- overflow-y: auto;
30
- overflow-x: hidden;
31
-
32
- &.ax-list-items-container {
33
- padding-top: 0.5rem;
34
- padding-bottom: 0.5rem;
35
- overflow-y: auto;
36
- height: 100%;
37
-
38
- &.ax-vertical {
39
- display: grid;
40
- grid-template-columns: repeat(1, minmax(0, 1fr));
41
-
42
- &.ax-divide {
43
- border-top: 1px solid;
44
- border-bottom: 1px solid;
45
- }
46
- }
20
+ border-color: rgb(var(--ax-color-border-default));
21
+ }
22
+
23
+ .ax-footer {
24
+ border-top: 1px solid;
25
+ }
26
+
27
+ .ax-content {
28
+ flex: 1 1 0%;
29
+ overflow-y: auto;
30
+ overflow-x: hidden;
31
+
32
+ &.ax-list-items-container {
33
+ padding-top: 0.5rem;
34
+ padding-bottom: 0.5rem;
35
+ overflow-y: auto;
36
+ height: 100%;
37
+
38
+ &.ax-vertical {
39
+ display: grid;
40
+ grid-template-columns: repeat(1, minmax(0, 1fr));
41
+
42
+ &.ax-divide {
43
+ border-top: 1px solid;
44
+ border-bottom: 1px solid;
45
+ }
46
+ }
47
+
48
+ &.ax-default {
49
+ cursor: pointer;
50
+
51
+ .ax-list-item-group {
52
+ & > span {
53
+ font-weight: 500;
54
+ display: flex;
55
+ align-items: center;
56
+ padding: 0.75rem;
57
+ }
58
+
59
+ & > ul {
60
+ padding-left: 0.75rem;
61
+ padding-right: 0.75rem;
62
+ }
63
+ .ax-list-item {
64
+ border-radius: var(--ax-rounded-border-default);
65
+ margin-bottom: 0.2rem;
66
+ }
67
+ }
47
68
 
48
- &.ax-default {
49
- cursor: pointer;
50
-
51
- .ax-list-item-group {
52
- & > span {
53
- font-weight: bold;
54
- display: flex;
55
- align-items: center;
56
- padding: 0.75rem;
57
- }
58
-
59
- & > ul {
60
- padding-left: 0.75rem;
61
- padding-right: 0.75rem;
62
- }
63
- .ax-list-item {
64
- border-radius: var(--ax-rounded-border-default);
65
- margin-bottom: 0.2rem;
66
- }
67
- }
68
-
69
- .ax-list-item {
70
- padding-top: 0.5rem;
71
- padding-bottom: 0.5rem;
72
- padding-inline-start: 0.75rem;
73
- padding-inline-end: 1rem;
74
- position: relative;
75
- &:focus,
76
- &:focus-visible {
77
- outline: 2px solid transparent;
78
- outline-offset: 2px;
79
- }
80
-
81
- &.ax-state-selected {
82
- &:not(&.ax-check-box){
83
- &::after {
84
- position: absolute;
85
- inset-inline-end: 0;
86
- top: 50%;
87
- transform: translate(-50%, -50%);
88
- font-size: 1.5rem;
89
- font-family: "acorex-icons";
90
- content: "\e912";
91
- color: rgb(var(--ax-color-primary));
92
- }
93
- }
94
- }
95
-
96
- // &:not(.ax-check-box) {
97
- // &.ax-state-selected {
98
- // }
99
- // }
100
-
101
- &.ax-state-disabled {
102
- cursor: not-allowed;
103
- opacity: 0.5;
104
- }
105
-
106
- &:focus,
107
- &:focus-within,
108
- &:hover {
109
- background-color: rgba(var(--ax-color-ghost), 0.05);
110
- }
111
- &.ax-state-focus {
112
- background-color: rgba(var(--ax-color-ghost), 0.05);
113
- }
114
- }
69
+ .ax-list-item {
70
+ padding-inline-start: 0.75rem;
71
+ padding-inline-end: 1rem;
72
+ position: relative;
73
+ height: var(--ax-size-default);
74
+ display: flex;
75
+ justify-content: space-between;
76
+ align-items: center;
77
+ user-select: none;
78
+ &:focus,
79
+ &:focus-visible {
80
+ outline: 2px solid transparent;
81
+ outline-offset: 2px;
82
+ }
83
+ &.ax-state-checkbox {
84
+ .ax-checkbox-label {
85
+ margin-inline-start: 0.5rem;
115
86
  }
116
-
117
- .ax-list-loading-container {
118
- display: flex;
119
- justify-content: center;
120
- padding: 0.5rem;
87
+ }
88
+ &.ax-state-selected {
89
+ background-color: rgba(var(--ax-color-primary-50)) !important;
90
+ color: rgba(var(--ax-color-primary-500)) !important;
91
+ .ax-selected-icon {
92
+ color: rgb(var(--ax-color-primary));
93
+ font-size: 1.5rem;
121
94
  }
95
+ }
96
+
97
+ // &:not(.ax-check-box) {
98
+ // &.ax-state-selected {
99
+ // }
100
+ // }
101
+
102
+ &.ax-state-disabled {
103
+ cursor: not-allowed;
104
+ opacity: 0.5;
105
+ }
106
+
107
+ &:focus-visible,
108
+ &:hover {
109
+ background-color: rgba(var(--ax-color-ghost), 0.05);
110
+ }
111
+ &.ax-state-focus {
112
+ background-color: rgba(var(--ax-color-ghost), 0.05);
113
+ }
122
114
  }
123
- }
115
+ }
124
116
 
125
- .ax-search-box-container {
117
+ .ax-list-loading-container {
118
+ display: flex;
119
+ justify-content: center;
126
120
  padding: 0.5rem;
127
-
128
- &.ax-state-hidden {
129
- display: none;
130
- }
121
+ }
131
122
  }
132
- .ax-footer {
123
+ }
124
+
125
+ .ax-search-box-container {
126
+ padding: 0.5rem;
127
+
128
+ &.ax-state-hidden {
129
+ display: none;
133
130
  }
131
+ }
132
+ .ax-footer {
133
+ }
134
134
  }
package/src/shared/_table.scss CHANGED
@@ -11,16 +11,17 @@
11
11
  td {
12
12
  border-bottom: 1px solid;
13
13
  border-color: rgb(var(--ax-color-border-default));
14
- padding: 1rem;
14
+ padding: 0.875rem 1rem;
15
15
  }
16
16
  thead {
17
17
  background-color: rgb(var(--ax-color-ghost), 0.05);
18
18
  border-bottom: 1px solid;
19
19
  border-color: rgb(var(--ax-color-border-default));
20
20
  th {
21
+ text-transform: uppercase;
21
22
  font-weight: 500;
22
23
  text-align: start;
23
- padding: 1rem;
24
+ padding: 0.875rem 1rem;
24
25
  }
25
26
  }
26
27
  &.ax-table-alternate {
package/tailwind.config.js CHANGED
@@ -127,14 +127,30 @@ module.exports = withAnimations({
127
127
  backgroundColor:
128
128
  'rgb(var(--ax-color-default-color) / var(--tw-text-opacity))',
129
129
  },
130
- '.tabs-fit': {},
131
- '.skeleton': {},
130
+ '.tabs-fit': {
131
+ width: '100%',
132
+ },
133
+ '.skeleton': {
134
+ position: 'relative',
135
+ overflow: 'hidden',
136
+ backgroundColor: 'rgba(var(--ax-color-ghost), 0.15)',
137
+ },
132
138
  '.skeleton-animate': {},
133
- '.xs': {},
134
- '.sm': {},
135
- '.md': {},
136
- '.lg': {},
137
- '.xl': {},
139
+ '.xs': {
140
+ '--ax-size-default': '2rem',
141
+ },
142
+ '.sm': {
143
+ '--ax-size-default': '2.25rem',
144
+ },
145
+ '.md': {
146
+ '--ax-size-default': '2.5rem',
147
+ },
148
+ '.lg': {
149
+ '--ax-size-default': '3rem',
150
+ },
151
+ '.xl': {
152
+ '--ax-size-default': '3.5rem',
153
+ },
138
154
  };
139
155
  addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
140
156
  }),