@vaadin/vaadin-material-styles 22.0.0-alpha6 → 22.0.0-beta1
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.
- package/font-icons.js +1 -1
- package/mixins/helper.d.ts +8 -0
- package/mixins/helper.js +26 -0
- package/mixins/input-field-shared.d.ts +5 -0
- package/mixins/input-field-shared.js +195 -0
- package/mixins/required-field.js +2 -7
- package/package.json +29 -25
- package/typography.js +3 -28
- package/version.js +1 -1
package/font-icons.js
CHANGED
|
@@ -11,7 +11,7 @@ $_documentContainer.innerHTML = `
|
|
|
11
11
|
<style>
|
|
12
12
|
@font-face {
|
|
13
13
|
font-family: 'material-icons';
|
|
14
|
-
src: url(data:application/font-woff;charset=utf-8;base64,
|
|
14
|
+
src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
|
|
15
15
|
font-weight: normal;
|
|
16
16
|
font-style: normal;
|
|
17
17
|
}
|
package/mixins/helper.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
7
|
+
import '../color.js';
|
|
8
|
+
|
|
9
|
+
export const helper = css`
|
|
10
|
+
[part='helper-text'] {
|
|
11
|
+
font-size: 0.75rem;
|
|
12
|
+
line-height: 1;
|
|
13
|
+
color: var(--material-secondary-text-color);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:host([has-helper]) [part='helper-text']::before {
|
|
17
|
+
content: '';
|
|
18
|
+
display: block;
|
|
19
|
+
height: 6px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* According to Material guidelines, helper text should be hidden when error message is set and input is invalid */
|
|
23
|
+
:host([has-helper][invalid][has-error-message]) [part='helper-text'] {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
7
|
+
import '../color.js';
|
|
8
|
+
import '../font-icons.js';
|
|
9
|
+
import '../typography.js';
|
|
10
|
+
import { fieldButton } from './field-button.js';
|
|
11
|
+
import { helper } from './helper.js';
|
|
12
|
+
import { requiredField } from './required-field.js';
|
|
13
|
+
|
|
14
|
+
const inputField = css`
|
|
15
|
+
:host {
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
position: relative;
|
|
18
|
+
padding-top: 8px;
|
|
19
|
+
margin-bottom: 8px;
|
|
20
|
+
outline: none;
|
|
21
|
+
color: var(--material-body-text-color);
|
|
22
|
+
font-size: var(--material-body-font-size);
|
|
23
|
+
line-height: 24px;
|
|
24
|
+
font-family: var(--material-font-family);
|
|
25
|
+
-webkit-font-smoothing: antialiased;
|
|
26
|
+
-moz-osx-font-smoothing: grayscale;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:host::before {
|
|
30
|
+
line-height: 32px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Strange gymnastics to make fields vertically align nicely in most cases
|
|
34
|
+
(no label, with label, without prefix, with prefix, etc.) */
|
|
35
|
+
|
|
36
|
+
:host([has-label]) {
|
|
37
|
+
padding-top: 24px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[part='input-field'] {
|
|
41
|
+
position: relative;
|
|
42
|
+
top: -0.2px; /* NOTE(platosha): Adjusts for wrong flex baseline in Chrome & Safari */
|
|
43
|
+
height: 32px;
|
|
44
|
+
padding-left: 0;
|
|
45
|
+
padding-right: 0;
|
|
46
|
+
background-color: transparent;
|
|
47
|
+
margin: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[part='input-field']::before,
|
|
51
|
+
[part='input-field']::after {
|
|
52
|
+
content: '';
|
|
53
|
+
position: absolute;
|
|
54
|
+
bottom: 0;
|
|
55
|
+
left: 0;
|
|
56
|
+
right: 0;
|
|
57
|
+
height: 1px;
|
|
58
|
+
transform-origin: 50% 0%;
|
|
59
|
+
background-color: var(--_material-text-field-input-line-background-color, #000);
|
|
60
|
+
opacity: var(--_material-text-field-input-line-opacity, 0.42);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[part='input-field']::after {
|
|
64
|
+
background-color: var(--material-primary-color);
|
|
65
|
+
opacity: 0;
|
|
66
|
+
height: 2px;
|
|
67
|
+
bottom: 0;
|
|
68
|
+
transform: scaleX(0);
|
|
69
|
+
transition: opacity 0.175s;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
:host([disabled]) [part='label'],
|
|
73
|
+
:host([disabled]) [part='input-field'] ::slotted(:is(input, textarea)) {
|
|
74
|
+
color: var(--material-disabled-text-color);
|
|
75
|
+
-webkit-text-fill-color: var(--material-disabled-text-color);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[part='input-field'] ::slotted(:is(input, textarea)) {
|
|
79
|
+
outline: none;
|
|
80
|
+
margin: 0;
|
|
81
|
+
border: 0;
|
|
82
|
+
border-radius: 0;
|
|
83
|
+
padding: 8px 0;
|
|
84
|
+
width: 100%;
|
|
85
|
+
height: 100%;
|
|
86
|
+
font-family: inherit;
|
|
87
|
+
font-size: 1em;
|
|
88
|
+
line-height: inherit;
|
|
89
|
+
color: inherit;
|
|
90
|
+
background-color: transparent;
|
|
91
|
+
/* Disable default invalid style in Firefox */
|
|
92
|
+
box-shadow: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* TODO: the text opacity should be 42%, but the disabled style is 38%.
|
|
96
|
+
Would need to introduce another property for it if we want to be 100% accurate. */
|
|
97
|
+
::slotted(:is(input, textarea):placeholder-shown) {
|
|
98
|
+
color: var(--material-disabled-text-color);
|
|
99
|
+
transition: opacity 0.175s 0.1s;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* prettier-ignore */
|
|
103
|
+
:host([has-label]:not([focused]):not([invalid]):not([theme='always-float-label'])) ::slotted(:is(input, textarea):placeholder-shown) {
|
|
104
|
+
opacity: 0;
|
|
105
|
+
transition-delay: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
[part='label'] {
|
|
109
|
+
width: 133%;
|
|
110
|
+
transition: transform 0.175s, color 0.175s, width 0.175s;
|
|
111
|
+
transition-timing-function: ease, ease, step-end;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
:host(:hover:not([readonly]):not([invalid])) [part='input-field']::before {
|
|
115
|
+
opacity: var(--_material-text-field-input-line-hover-opacity, 0.87);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:host([focused]:not([invalid])) [part='label'] {
|
|
119
|
+
color: var(--material-primary-text-color);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
:host([focused]) [part='input-field']::after,
|
|
123
|
+
:host([invalid]) [part='input-field']::after {
|
|
124
|
+
opacity: 1;
|
|
125
|
+
transform: none;
|
|
126
|
+
transition: transform 0.175s, opacity 0.175s;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
:host([invalid]) [part='input-field']::after {
|
|
130
|
+
background-color: var(--material-error-color);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host([input-prevented]) [part='input-field'] {
|
|
134
|
+
color: var(--material-error-text-color);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:host([disabled]) {
|
|
138
|
+
pointer-events: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
:host([disabled]) [part='input-field'] {
|
|
142
|
+
color: var(--material-disabled-text-color);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
:host([disabled]) [part='input-field']::before {
|
|
146
|
+
background-color: transparent;
|
|
147
|
+
background-image: linear-gradient(
|
|
148
|
+
90deg,
|
|
149
|
+
var(--_material-text-field-input-line-background-color, #000) 0,
|
|
150
|
+
var(--_material-text-field-input-line-background-color, #000) 2px,
|
|
151
|
+
transparent 2px
|
|
152
|
+
);
|
|
153
|
+
background-size: 4px 1px;
|
|
154
|
+
background-repeat: repeat-x;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Only target the visible floating label */
|
|
158
|
+
:host([has-label]:not([has-value]):not([focused]):not([invalid]):not([theme~='always-float-label'])) [part='label'] {
|
|
159
|
+
width: 100%;
|
|
160
|
+
transform: scale(1) translateY(24px);
|
|
161
|
+
transition-timing-function: ease, ease, step-start;
|
|
162
|
+
pointer-events: none;
|
|
163
|
+
left: auto;
|
|
164
|
+
right: auto;
|
|
165
|
+
transition-delay: 0.1s;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Slotted content */
|
|
169
|
+
[part='input-field'] ::slotted(*:not([part$='-button']):not(input):not(textarea)) {
|
|
170
|
+
color: var(--material-secondary-text-color);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
[part='clear-button']::before {
|
|
174
|
+
content: var(--material-icons-clear);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* RTL specific styles */
|
|
178
|
+
|
|
179
|
+
:host([disabled][dir='rtl']) [part='input-field']::before {
|
|
180
|
+
background-image: linear-gradient(
|
|
181
|
+
-90deg,
|
|
182
|
+
var(--_material-text-field-input-line-background-color, #000) 0,
|
|
183
|
+
var(--_material-text-field-input-line-background-color, #000) 2px,
|
|
184
|
+
transparent 2px
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
`;
|
|
188
|
+
|
|
189
|
+
const inputFieldShared = [requiredField, fieldButton, helper, inputField];
|
|
190
|
+
|
|
191
|
+
registerStyles('', inputFieldShared, {
|
|
192
|
+
moduleId: 'material-input-field-shared-styles'
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
export { inputField, inputFieldShared };
|
package/mixins/required-field.js
CHANGED
|
@@ -23,10 +23,7 @@ const requiredField = css`
|
|
|
23
23
|
transform: scale(0.75);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
combo-box, date-picker, time-picker, date-time-picker, select. */
|
|
28
|
-
:host([required]) [part='label']::after,
|
|
29
|
-
:host([required]) [part='indicator']::after {
|
|
26
|
+
:host([required]) [part='required-indicator']::after {
|
|
30
27
|
content: ' *';
|
|
31
28
|
color: inherit;
|
|
32
29
|
}
|
|
@@ -41,9 +38,7 @@ const requiredField = css`
|
|
|
41
38
|
color: var(--material-error-text-color);
|
|
42
39
|
}
|
|
43
40
|
|
|
44
|
-
|
|
45
|
-
are updated to use ValidateMixin that only sets that attribute when invalid */
|
|
46
|
-
[part='error-message']:not(:empty)::before {
|
|
41
|
+
:host([has-error-message]) [part='error-message']::before {
|
|
47
42
|
content: '';
|
|
48
43
|
display: block;
|
|
49
44
|
height: 6px;
|
package/package.json
CHANGED
|
@@ -1,10 +1,32 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/vaadin-material-styles",
|
|
3
|
-
"version": "22.0.0-
|
|
3
|
+
"version": "22.0.0-beta1",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
4
7
|
"description": "Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/vaadin/web-components.git",
|
|
12
|
+
"directory": "packages/vaadin-material-styles"
|
|
13
|
+
},
|
|
14
|
+
"author": "Vaadin Ltd",
|
|
15
|
+
"homepage": "https://vaadin.com/themes",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/vaadin/vaadin-material-styles/issues"
|
|
18
|
+
},
|
|
5
19
|
"main": "all-imports.js",
|
|
6
20
|
"module": "all-imports.js",
|
|
7
|
-
"
|
|
21
|
+
"scripts": {
|
|
22
|
+
"icons": "gulp icons"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"*.d.ts",
|
|
26
|
+
"*.js",
|
|
27
|
+
"mixins/*.d.ts",
|
|
28
|
+
"mixins/*.js"
|
|
29
|
+
],
|
|
8
30
|
"keywords": [
|
|
9
31
|
"vaadin",
|
|
10
32
|
"material",
|
|
@@ -14,34 +36,16 @@
|
|
|
14
36
|
"web-component",
|
|
15
37
|
"polymer"
|
|
16
38
|
],
|
|
17
|
-
"author": "Vaadin Ltd",
|
|
18
|
-
"license": "Apache-2.0",
|
|
19
|
-
"bugs": {
|
|
20
|
-
"url": "https://github.com/vaadin/vaadin-material-styles/issues"
|
|
21
|
-
},
|
|
22
|
-
"homepage": "https://vaadin.com/themes",
|
|
23
|
-
"files": [
|
|
24
|
-
"*.js",
|
|
25
|
-
"*.d.ts",
|
|
26
|
-
"mixins/*.js",
|
|
27
|
-
"mixins/*.d.ts"
|
|
28
|
-
],
|
|
29
|
-
"scripts": {
|
|
30
|
-
"icons": "gulp icons"
|
|
31
|
-
},
|
|
32
39
|
"dependencies": {
|
|
33
40
|
"@polymer/polymer": "^3.0.0",
|
|
34
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
|
|
35
42
|
},
|
|
36
43
|
"devDependencies": {
|
|
37
|
-
"gulp": "^4.0.
|
|
38
|
-
"gulp-cli": "^2.0
|
|
44
|
+
"gulp": "^4.0.2",
|
|
45
|
+
"gulp-cli": "^2.3.0",
|
|
39
46
|
"gulp-iconfont": "^11.0.0",
|
|
40
47
|
"gulp-sort": "^2.0.0",
|
|
41
|
-
"gulp-svgmin": "^
|
|
42
|
-
},
|
|
43
|
-
"publishConfig": {
|
|
44
|
-
"access": "public"
|
|
48
|
+
"gulp-svgmin": "^4.1.0"
|
|
45
49
|
},
|
|
46
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
|
|
47
51
|
}
|
package/typography.js
CHANGED
|
@@ -29,16 +29,7 @@ const font = css`
|
|
|
29
29
|
`;
|
|
30
30
|
|
|
31
31
|
const typography = css`
|
|
32
|
-
body
|
|
33
|
-
font-family: var(--material-font-family);
|
|
34
|
-
font-size: var(--material-body-font-size);
|
|
35
|
-
line-height: 1.4;
|
|
36
|
-
-webkit-text-size-adjust: 100%;
|
|
37
|
-
-webkit-font-smoothing: antialiased;
|
|
38
|
-
-moz-osx-font-smoothing: grayscale;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
/* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */
|
|
32
|
+
body,
|
|
42
33
|
:host {
|
|
43
34
|
font-family: var(--material-font-family);
|
|
44
35
|
font-size: var(--material-body-font-size);
|
|
@@ -114,27 +105,11 @@ const typography = css`
|
|
|
114
105
|
|
|
115
106
|
registerStyles('', typography, { moduleId: 'material-typography' });
|
|
116
107
|
|
|
117
|
-
const inputs = css`
|
|
118
|
-
/* Slotted input styles */
|
|
119
|
-
input[slot='input']::placeholder,
|
|
120
|
-
textarea[slot='textarea']::placeholder {
|
|
121
|
-
color: var(--material-disabled-text-color);
|
|
122
|
-
transition: opacity 0.175s 0.1s;
|
|
123
|
-
opacity: 1;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
[has-label]:not([focused]):not([invalid]):not([theme~='always-float-label']) > input[slot='input']::placeholder,
|
|
127
|
-
[has-label]:not([focused]):not([invalid]):not([theme~='always-float-label']) > input[slot='textarea']::placeholder {
|
|
128
|
-
opacity: 0;
|
|
129
|
-
transition-delay: 0;
|
|
130
|
-
}
|
|
131
|
-
`;
|
|
132
|
-
|
|
133
108
|
const $tpl = document.createElement('template');
|
|
134
|
-
$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}
|
|
109
|
+
$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
|
|
135
110
|
document.head.appendChild($tpl.content);
|
|
136
111
|
|
|
137
|
-
export { font,
|
|
112
|
+
export { font, typography };
|
|
138
113
|
|
|
139
114
|
/* Import Roboto from Google Fonts */
|
|
140
115
|
if (!window.polymerSkipLoadingFontRoboto) {
|