@eleventheye/asui 2.2.2 → 2.3.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 (7) hide show
  1. package/dist/asbutton/styles.d.ts.map +1 -1
  2. package/dist/asbutton/styles.js +47 -13
  3. package/dist/asdropdown/styles.d.ts.map +1 -1
  4. package/dist/asdropdown/styles.js +13 -23
  5. package/dist/astextfield/styles.d.ts.map +1 -1
  6. package/dist/astextfield/styles.js +21 -9
  7. package/package.json +1 -1
package/dist/asbutton/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AAEjF,eAAO,MAAM,cAAc;WAAuB,OAAO;UAAQ,eAAe;YAsH/E,CAAC;AAEF,eAAO,MAAM,aAAa;WAAuB,eAAe;YAG/D,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AAEjF,eAAO,MAAM,cAAc;WAAuB,OAAO;UAAQ,eAAe;YAwJ/E,CAAC;AAEF,eAAO,MAAM,aAAa;WAAuB,eAAe;YAG/D,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC"}
package/dist/asbutton/styles.js CHANGED
@@ -20,6 +20,7 @@ exports.ASButtonStyled = styled_components_1.default.div `
20
20
  background: ${({ theme }) => theme.button.buttonGradientDown};
21
21
  text-transform: uppercase;
22
22
  text-align: center;
23
+ -webkit-tap-highlight-color: transparent;
23
24
 
24
25
  // button height = 50px
25
26
  &.ASLarge {
@@ -58,7 +59,6 @@ exports.ASButtonStyled = styled_components_1.default.div `
58
59
  &.ASLarge,
59
60
  &.ASMedium,
60
61
  &.ASSmall {
61
- &:hover,
62
62
  &.Selected,
63
63
  &:active {
64
64
  &::after {
@@ -66,17 +66,11 @@ exports.ASButtonStyled = styled_components_1.default.div `
66
66
  text-shadow: ${({ theme }) => theme.button.buttonTextShadow};
67
67
  }
68
68
  }
69
- &:hover {
70
- &::after {
71
- box-shadow: ${({ theme }) => theme.button.buttonShadowHover};
72
- }
73
- }
74
69
  }
75
70
 
76
71
  &.ASSmall,
77
72
  &.ASMedium,
78
73
  &.ASLarge {
79
- &:hover,
80
74
  &.Selected,
81
75
  &:active {
82
76
  &::after {
@@ -85,7 +79,6 @@ exports.ASButtonStyled = styled_components_1.default.div `
85
79
  }
86
80
  }
87
81
 
88
- &:hover,
89
82
  &:active,
90
83
  &.Selected {
91
84
  &:not([aria-disabled='true']) {
@@ -95,9 +88,52 @@ exports.ASButtonStyled = styled_components_1.default.div `
95
88
  text-shadow: none;
96
89
  }
97
90
  }
98
- &:hover:not(:active):not(.Selected):not([aria-disabled='true']) {
99
- box-shadow: ${({ theme, size }) => theme.button[`buttonShadowHover${size}`]};
91
+ @media (hover) {
92
+ &.ASSmall,
93
+ &.ASMedium,
94
+ &.ASLarge {
95
+ &:hover {
96
+ &::after {
97
+ color: ${({ theme }) => theme.button.buttonColorHover};
98
+ text-shadow: ${({ theme }) => theme.button.buttonTextShadow};
99
+ }
100
+ }
101
+ &:hover {
102
+ &::after {
103
+ box-shadow: ${({ theme }) => theme.button.buttonShadowHover};
104
+ }
105
+ }
106
+ &:hover {
107
+ &::after {
108
+ transform: translate(-50%, -50%) scale(0.95);
109
+ }
110
+ }
111
+ }
112
+ &:hover {
113
+ &:not([aria-disabled='true']) {
114
+ user-select: none;
115
+ background: ${({ theme }) => theme.button.buttonGradientUp};
116
+ color: transparent;
117
+ text-shadow: none;
118
+ }
119
+ }
120
+ &:hover:not(:active):not(.Selected):not([aria-disabled='true']) {
121
+ box-shadow: ${({ theme, size }) => theme.button[`buttonShadowHover${size}`]};
122
+ }
123
+
124
+ &:hover:is([aria-disabled='true']),
125
+ &:hover:not(:active):not(.Selected):is([aria-disabled='true']) {
126
+ cursor: default;
127
+ background: ${({ theme }) => theme.button.buttonBgDisabled};
128
+ color: transparent;
129
+ text-shadow: none;
130
+ &::after {
131
+ color: ${({ theme }) => theme.button.buttonColorDisabled};
132
+ text-shadow: none;
133
+ }
134
+ }
100
135
  }
136
+
101
137
  &:active,
102
138
  &.Selected {
103
139
  &:not([aria-disabled='true']) {
@@ -109,10 +145,8 @@ exports.ASButtonStyled = styled_components_1.default.div `
109
145
  &.ASSmall:is([aria-disabled='true']),
110
146
  &.ASMedium:is([aria-disabled='true']),
111
147
  &.ASLarge:is([aria-disabled='true']),
112
- &:hover:is([aria-disabled='true']),
113
148
  &:active:is([aria-disabled='true']),
114
- &.Selected:is([aria-disabled='true']),
115
- &:hover:not(:active):not(.Selected):is([aria-disabled='true']) {
149
+ &.Selected:is([aria-disabled='true']) {
116
150
  cursor: default;
117
151
  background: ${({ theme }) => theme.button.buttonBgDisabled};
118
152
  color: transparent;
package/dist/asdropdown/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asdropdown/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,0PAsE5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAoC7D,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB;WAA4B,OAAO;YAIhE,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asdropdown/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,0PA4E5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAoB7D,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB;WAA4B,OAAO;YAIhE,CAAC"}
package/dist/asdropdown/styles.js CHANGED
@@ -7,11 +7,13 @@ exports.ASDropdownStyled = styled_components_1.default.div `
7
7
  position: relative;
8
8
  display: inline-block;
9
9
  width: 100%;
10
+ -webkit-tap-highlight-color: transparent;
10
11
 
11
12
  &.ASSmall {
12
13
  select {
13
14
  height: 30px;
14
15
  font-size: 1.05rem;
16
+ line-height: 1;
15
17
  padding: ${({ $withIcon }) => ($withIcon ? '5px 30px' : '5px 30px 5px 15px')};
16
18
  }
17
19
  &:after {
@@ -23,12 +25,14 @@ exports.ASDropdownStyled = styled_components_1.default.div `
23
25
  &.ASMedium select {
24
26
  height: 40px;
25
27
  font-size: 1.35rem;
28
+ line-height: 1;
26
29
  padding: ${({ $withIcon }) => ($withIcon ? '5px 35px' : '7px 35px 7px 15px')};
27
30
  }
28
31
 
29
32
  &.ASLarge select {
30
33
  height: 50px;
31
34
  font-size: 1.55rem;
35
+ line-height: 1;
32
36
  padding: ${({ $withIcon }) => ($withIcon ? '10px 40px' : '10px 40px 10px 20px')};
33
37
  }
34
38
 
@@ -53,14 +57,16 @@ exports.ASDropdownStyled = styled_components_1.default.div `
53
57
  clip-path: polygon(25% 0, 0 25%, 50% 67%, 100% 25%, 75% 0, 50% 24%);
54
58
  }
55
59
 
56
- & select:hover {
57
- background: ${({ theme }) => theme.dropdown.dropdownGradientDown};
58
- background-color: ${({ theme }) => theme.dropdown.dropdownBg};
59
- text-shadow: ${({ theme }) => theme.dropdown.dropdownTextShadowHover};
60
- }
60
+ @media (hover) {
61
+ & select:hover {
62
+ background: ${({ theme }) => theme.dropdown.dropdownGradientDown};
63
+ background-color: ${({ theme }) => theme.dropdown.dropdownBg};
64
+ text-shadow: ${({ theme }) => theme.dropdown.dropdownTextShadowHover};
65
+ }
61
66
 
62
- &:hover::after {
63
- background-color: ${({ theme }) => theme.dropdown.dropdownColorHover};
67
+ &:hover::after {
68
+ background-color: ${({ theme }) => theme.dropdown.dropdownColorHover};
69
+ }
64
70
  }
65
71
 
66
72
  & select:disabled {
@@ -91,22 +97,6 @@ exports.ASDropdownSelect = styled_components_1.default.select `
91
97
  -webkit-appearance: none;
92
98
  -moz-appearance: none;
93
99
 
94
- [popover] {
95
- // top: 25px !important;
96
-
97
- &:popover-open {
98
- position: absolute;
99
- margin-top: 50px;
100
- width: 200px;
101
- height: 100px;
102
- position: absolute;
103
- inset: unset;
104
- bottom: 5px;
105
- right: 5px;
106
- margin: 0;
107
- }
108
- }
109
-
110
100
  &::-ms-expand {
111
101
  display: none;
112
102
  }
package/dist/astextfield/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/astextfield/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,eAAO,MAAM,yBAAyB;WAAuB,OAAO;YAiHnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAAyB,OAAO;YA4C5D,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAAuB,OAAO;YAO9D,CAAC;AAEF,eAAO,MAAM,qBAAqB;WAAuB,OAAO;YAG/D,CAAC;AAgBF,eAAO,MAAM,oBAAoB,gQAEhC,CAAC;AACF,eAAO,MAAM,aAAa,gQAEzB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/astextfield/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,eAAO,MAAM,yBAAyB;WAAuB,OAAO;YAmHnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAAyB,OAAO;YAkD5D,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAAuB,OAAO;YAS9D,CAAC;AAEF,eAAO,MAAM,qBAAqB;WAAuB,OAAO;YAG/D,CAAC;AAkBF,eAAO,MAAM,oBAAoB,gQAEhC,CAAC;AACF,eAAO,MAAM,aAAa,gQAEzB,CAAC"}
package/dist/astextfield/styles.js CHANGED
@@ -19,7 +19,7 @@ exports.ASTextFieldInputContainer = styled_components_1.default.div `
19
19
  color: ${(props) => props.theme.textfield.color};
20
20
  outline: 1px solid ${(props) => props.theme.textfield.borderColor};
21
21
  border-radius: 35px;
22
-
22
+ -webkit-tap-highlight-color: transparent;
23
23
  padding: 0 12px;
24
24
 
25
25
  .ASTextFieldClearIcon {
@@ -28,8 +28,10 @@ exports.ASTextFieldInputContainer = styled_components_1.default.div `
28
28
  user-select: none;
29
29
  scale: 0.9;
30
30
 
31
- &:hover {
32
- scale: 1;
31
+ @media (hover) {
32
+ &:hover {
33
+ scale: 1;
34
+ }
33
35
  }
34
36
 
35
37
  &:active {
@@ -139,7 +141,13 @@ exports.ASTextFieldInput = styled_components_1.default.input `
139
141
  padding-inline: 6px;
140
142
  color: ${(props) => props.theme.textfield.inputColor};
141
143
 
142
- &:hover,
144
+ @media (hover) {
145
+ &:hover {
146
+ border-color: ${(props) => props.theme.textfield.inputFocusBorderColor};
147
+ box-shadow: inset 0 1px 7px 1px ${(props) => props.theme.textfield.inputFocusBoxShadow};
148
+ }
149
+ }
150
+
143
151
  &:active,
144
152
  &:focus {
145
153
  border-color: ${(props) => props.theme.textfield.inputFocusBorderColor};
@@ -167,8 +175,10 @@ exports.ASTextFieldClickIcon = styled_components_1.default.div `
167
175
  cursor: pointer;
168
176
  user-select: none;
169
177
 
170
- &:hover {
171
- text-shadow: 1px 1px 3px ${(props) => props.theme.textfield.iconTextShadow};
178
+ @media (hover) {
179
+ &:hover {
180
+ text-shadow: 1px 1px 3px ${(props) => props.theme.textfield.iconTextShadow};
181
+ }
172
182
  }
173
183
  `;
174
184
  exports.ASTextFieldSearchIcon = styled_components_1.default.div `
@@ -180,10 +190,12 @@ const IconStyle = (0, styled_components_1.css) `
180
190
  user-select: none;
181
191
  scale: 1.2;
182
192
  transition: scale 0.3s ease-in-out;
183
- &:hover {
184
- scale: 1.4;
185
- }
186
193
 
194
+ @media (hover) {
195
+ &:hover {
196
+ scale: 1.4;
197
+ }
198
+ }
187
199
  &:active {
188
200
  scale: 1.2;
189
201
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eleventheye/asui",
3
- "version": "2.2.2",
3
+ "version": "2.3.0",
4
4
  "private": false,
5
5
  "description": "AS UI React Library by eleventheye (another one!)",
6
6
  "keywords": [