@descope/web-components-ui 1.0.91 → 1.0.93
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +244 -223
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/Button.js +39 -25
- package/src/components/descope-container/Container.js +1 -0
- package/src/components/descope-email-field/EmailField.js +1 -0
- package/src/components/descope-passcode/Passcode.js +42 -41
- package/src/components/descope-text-field/TextField.js +1 -0
- package/src/theme/components/button.js +31 -37
- package/src/theme/components/container.js +3 -0
- package/src/theme/components/divider.js +5 -4
- package/src/theme/globals.js +10 -6
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[662],{3029:(t,n,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[662],{3029:(t,n,e)=>{e.r(n),e.d(n,{Button:()=>u}),e(729);var r=e(2061),o=e(4567),a=e(4988);const i=(0,o.iY)("button"),{host:d,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}},s=(0,r.qC)((0,a.yk)({mappings:{color:{},textDecoration:l,fontSize:{},cursor:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},width:d,gap:l,verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}]}}),a.e4,a.Ae)((0,a.DM)({slots:["prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${c}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:i})),{color:p,fontSize:b}=s.cssVarList,c=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`,u=s;customElements.define(i,u)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[317],{147:(t,e
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[317],{147:(t,o,e)=>{e.r(o),e.d(o,{Container:()=>a});var n=e(4988),r=e(693),s=e(2061);const i=(0,e(4567).iY)("container");class d extends((0,r.s)({componentName:i,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}}const a=(0,s.qC)((0,n.yk)({mappings:{height:{selector:()=>":host"},width:{selector:()=>":host"},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],flexDirection:{},justifyContent:{},alignItems:{},gap:{},flexWrap:{},backgroundColor:{},color:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{}}}),n.e4,n.Ae)(d);customElements.define(i,a)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailField:()=>s}),e(9437);var n=e(4988),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const r=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${r.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${r.cssVarList.height}) var(${r.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-email-field > label,\n\tvaadin-email-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-email-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-email-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-email-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=r;customElements.define(d,s)}}]);
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailField:()=>s}),e(9437);var n=e(4988),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const r=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${r.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${r.cssVarList.height}) var(${r.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-email-field > label,\n\tvaadin-email-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-email-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-email-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-email-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=r;customElements.define(d,s)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(4988),r=n(4447),o=n(7361),d=n(9063),a=n(2061),l=n(4567);const p=(0,l.iY)("passcode"),{borderStyle:s,borderWidth:c,...u}=r.Z,{digitField:g,label:h,requiredIndicator:f,internalWrapper:m,focusedValidDigitField:b}={focusedValidDigitField:{selector:()=>`${d.Z.componentName}[focused="true"]:not([invalid="true"])`},digitField:{selector:()=>d.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"}},
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(4988),r=n(4447),o=n(7361),d=n(9063),a=n(2061),l=n(4567);const p=(0,l.iY)("passcode"),{borderStyle:s,borderWidth:c,...u}=r.Z,{digitField:g,label:h,requiredIndicator:f,internalWrapper:m,focusedValidDigitField:b}={focusedValidDigitField:{selector:()=>`${d.Z.componentName}[focused="true"]:not([invalid="true"])`},digitField:{selector:()=>d.Z.componentName},label:{selector:"> label"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"}},y=d.Z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{...u,borderColor:{...g,property:y.borderColor},outlineColor:{...g,property:y.outlineColor},outlineWidth:[{...g,property:y.outlineWidth},{...m,property:"padding"}],color:[u.color,h,f],padding:{...g,property:y.padding},margin:{...g,property:y.margin},textAlign:{...g,property:y.textAlign},caretColor:{...g,property:y.caretColor},digitsGap:{...m,property:"gap"},focusedValidDigitFieldBorderColor:{...b,property:y.borderColor}}}),i.e4,i.dj,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${o.f} \n\t\t\t\tbordered="true" \n\t\t\t\tname="code" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${o.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,l.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n :host {\n --vaadin-field-default-width: auto;\n\t\t\tdisplay: inline-block;\n }\n\n descope-passcode-internal {\n\t\t-webkit-mask-image: none;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmin-height: initial;\n }\n\n\tdescope-passcode-internal .wrapper {\n\t\tbox-sizing: border-box;\n\t\tmin-height: initial;\n\t\theight: 100%;\n\t\tjustify-content: center;\n }\n\n\tdescope-passcode-internal descope-text-field {\n\t\twidth: var(${y.height})\t\t\t\n\t}\n\n vaadin-text-field::part(input-field) {\n\t\tbackground-color: transparent;\n\t\tpadding: 0;\n\t\toverflow: hidden;\n\t\t-webkit-mask-image: none;\n }\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: initial;\n\t}\n\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n `,excludeAttrsSync:["tabindex"],componentName:p}));n(9357),n(4775),customElements.define(p,x)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>f,f:()=>l});var i=n(4988),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>f,f:()=>l});var i=n(4988),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let s="";const r=["type"],o=(0,d.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return r.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>s,excludeAttrsSync:["tabindex"],componentName:l}));s=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\t--vaadin-field-default-width: auto;\n\t}\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field[disabled] > input:placeholder-shown,\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\n\tvaadin-text-field input {\n\t\t-webkit-mask-image: none;\n\t}\n\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: unset;\n\t}\n`;const f=o},9357:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>i.Z}),n(9789);var i=n(9063);customElements.define(i.f,i.Z)}}]);
|
package/package.json
CHANGED
@@ -9,49 +9,63 @@ import {
|
|
9
9
|
|
10
10
|
export const componentName = getComponentName('button');
|
11
11
|
|
12
|
-
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
13
12
|
const resetStyles = `
|
14
13
|
:host {
|
15
14
|
display: inline-block;
|
16
15
|
}
|
17
|
-
vaadin-button {
|
16
|
+
vaadin-button {
|
17
|
+
margin: 0;
|
18
|
+
min-width: 0;
|
19
|
+
width: 100%;
|
20
|
+
height: auto;
|
21
|
+
}
|
22
|
+
vaadin-button::part(label) {
|
23
|
+
padding: 0;
|
24
|
+
}
|
18
25
|
vaadin-button::part(prefix) {
|
19
26
|
margin-left: 0;
|
20
27
|
margin-right: 0;
|
21
28
|
}
|
22
29
|
`;
|
30
|
+
|
23
31
|
const iconStyles = `
|
24
32
|
vaadin-button::part(prefix),
|
25
33
|
vaadin-button::part(label) {
|
26
34
|
display: flex;
|
27
35
|
justify-content: center;
|
28
36
|
align-items: center;
|
29
|
-
gap: 5px;
|
30
37
|
}
|
31
38
|
`;
|
32
39
|
|
33
|
-
|
40
|
+
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
34
41
|
|
35
|
-
const {
|
42
|
+
const { host, label } = {
|
43
|
+
host: { selector: () => ':host' },
|
36
44
|
label: { selector: '::part(label)' },
|
37
|
-
host: { selector: () => ':host' }
|
38
45
|
};
|
39
46
|
|
40
47
|
const Button = compose(
|
41
48
|
createStyleMixin({
|
42
49
|
mappings: {
|
50
|
+
color: {},
|
51
|
+
textDecoration: label,
|
52
|
+
fontSize: {},
|
53
|
+
cursor: {},
|
43
54
|
backgroundColor: {},
|
44
55
|
borderRadius: {},
|
45
|
-
color: label,
|
46
56
|
borderColor: {},
|
47
57
|
borderStyle: {},
|
48
58
|
borderWidth: {},
|
49
|
-
fontSize: {},
|
50
|
-
height: {},
|
51
59
|
width: host,
|
52
|
-
|
53
|
-
|
54
|
-
|
60
|
+
gap: label,
|
61
|
+
verticalPadding: [
|
62
|
+
{ property: 'padding-top' },
|
63
|
+
{ property: 'padding-bottom' },
|
64
|
+
],
|
65
|
+
horizontalPadding: [
|
66
|
+
{ property: 'padding-left' },
|
67
|
+
{ property: 'padding-right' },
|
68
|
+
]
|
55
69
|
}
|
56
70
|
}),
|
57
71
|
draggableMixin,
|
@@ -60,44 +74,44 @@ const Button = compose(
|
|
60
74
|
createProxy({
|
61
75
|
slots: ['prefix', 'label', 'suffix'],
|
62
76
|
wrappedEleName: 'vaadin-button',
|
63
|
-
style: () =>
|
64
|
-
|
77
|
+
style: () => `
|
78
|
+
${resetStyles}
|
79
|
+
${iconStyles}
|
80
|
+
${loadingIndicatorStyles}
|
81
|
+
${editorOverrides}
|
82
|
+
`,
|
65
83
|
excludeAttrsSync: ['tabindex'],
|
66
84
|
componentName
|
67
85
|
})
|
68
86
|
);
|
69
87
|
|
88
|
+
const { color, fontSize } = Button.cssVarList;
|
70
89
|
const loadingIndicatorStyles = `
|
71
90
|
@keyframes spin {
|
72
91
|
0% { -webkit-transform: rotate(0deg); }
|
73
92
|
100% { -webkit-transform: rotate(360deg); }
|
74
93
|
}
|
75
94
|
:host([loading="true"]) ::before {
|
76
|
-
--marginRatio: 1.35;
|
77
|
-
color: var(${Button.cssVarList.color});
|
78
95
|
animation: spin 2s linear infinite;
|
79
96
|
position: absolute;
|
80
|
-
top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
81
|
-
left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
82
97
|
content: '';
|
83
98
|
z-index: 1;
|
84
99
|
box-sizing: border-box;
|
85
100
|
border-radius: 50%;
|
86
101
|
border-bottom-color: transparent;
|
87
102
|
border-left-color: transparent;
|
88
|
-
border-width: calc(var(${Button.cssVarList.height}) / 12);
|
89
103
|
border-style: solid;
|
90
|
-
|
91
|
-
|
104
|
+
color: var(${color});
|
105
|
+
top: calc(50% - (var(${fontSize}) / 2));
|
106
|
+
left: calc(50% - (var(${fontSize}) / 2));
|
107
|
+
border-width: calc(var(${fontSize}) / 10);
|
108
|
+
width: var(${fontSize});
|
109
|
+
height: var(${fontSize});
|
92
110
|
}
|
93
111
|
:host([loading="true"])::part(prefix),
|
94
112
|
:host([loading="true"])::part(label) {
|
95
113
|
visibility: hidden;
|
96
114
|
}
|
97
|
-
|
98
|
-
vaadin-button {
|
99
|
-
width: 100%;
|
100
|
-
}
|
101
115
|
`;
|
102
116
|
|
103
117
|
export default Button;
|
@@ -93,55 +93,56 @@ const Passcode = compose(
|
|
93
93
|
}
|
94
94
|
|
95
95
|
descope-passcode-internal {
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
96
|
+
-webkit-mask-image: none;
|
97
|
+
padding: 0;
|
98
|
+
width: 100%;
|
99
|
+
height: 100%;
|
100
|
+
min-height: initial;
|
101
101
|
}
|
102
102
|
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
103
|
+
descope-passcode-internal .wrapper {
|
104
|
+
box-sizing: border-box;
|
105
|
+
min-height: initial;
|
106
|
+
height: 100%;
|
107
|
+
justify-content: center;
|
107
108
|
}
|
108
109
|
|
109
|
-
|
110
|
-
|
111
|
-
|
110
|
+
descope-passcode-internal descope-text-field {
|
111
|
+
width: var(${textVars.height})
|
112
|
+
}
|
112
113
|
|
113
114
|
vaadin-text-field::part(input-field) {
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
115
|
+
background-color: transparent;
|
116
|
+
padding: 0;
|
117
|
+
overflow: hidden;
|
118
|
+
-webkit-mask-image: none;
|
118
119
|
}
|
119
120
|
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
121
|
+
vaadin-text-field {
|
122
|
+
margin: 0;
|
123
|
+
padding: 0;
|
124
|
+
width: 100%
|
125
|
+
}
|
126
|
+
|
127
|
+
vaadin-text-field::before {
|
128
|
+
height: initial;
|
129
|
+
}
|
130
|
+
|
131
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
132
|
+
opacity: 1;
|
133
|
+
}
|
134
|
+
|
135
|
+
vaadin-text-field::part(input-field):focus {
|
136
|
+
cursor: text;
|
137
|
+
}
|
138
|
+
|
139
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
140
|
+
font-size: "12px";
|
141
|
+
content: "*";
|
142
|
+
}
|
143
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
144
|
+
border: 0 solid;
|
145
|
+
}
|
145
146
|
`,
|
146
147
|
excludeAttrsSync: ['tabindex'],
|
147
148
|
componentName
|
@@ -15,46 +15,37 @@ const mode = {
|
|
15
15
|
|
16
16
|
const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
|
17
17
|
|
18
|
+
const verticalPaddingRatio = 3;
|
19
|
+
const horizontalPaddingRatio = 2;
|
20
|
+
|
18
21
|
const button = {
|
19
22
|
...helperTheme,
|
20
|
-
[vars.width]: 'fit-content',
|
21
|
-
size: {
|
22
|
-
xs: {
|
23
|
-
[vars.height]: '10px',
|
24
|
-
[vars.fontSize]: '10px',
|
25
|
-
[vars.padding]: `0 ${globalRefs.spacing.xs}`
|
26
|
-
},
|
27
|
-
sm: {
|
28
|
-
[vars.height]: '20px',
|
29
|
-
[vars.fontSize]: '10px',
|
30
|
-
[vars.padding]: `0 ${globalRefs.spacing.sm}`
|
31
|
-
},
|
32
|
-
md: {
|
33
|
-
[vars.height]: '30px',
|
34
|
-
[vars.fontSize]: '14px',
|
35
|
-
[vars.padding]: `0 ${globalRefs.spacing.md}`
|
36
|
-
},
|
37
|
-
lg: {
|
38
|
-
[vars.height]: '40px',
|
39
|
-
[vars.fontSize]: '20px',
|
40
|
-
[vars.padding]: `0 ${globalRefs.spacing.lg}`
|
41
|
-
},
|
42
|
-
xl: {
|
43
|
-
[vars.height]: '50px',
|
44
|
-
[vars.fontSize]: '25px',
|
45
|
-
[vars.padding]: `0 ${globalRefs.spacing.xl}`
|
46
|
-
}
|
47
|
-
},
|
48
23
|
|
49
|
-
[vars.borderRadius]: globalRefs.radius.lg,
|
50
24
|
[vars.cursor]: 'pointer',
|
25
|
+
|
26
|
+
[vars.borderRadius]: globalRefs.radius.sm,
|
51
27
|
[vars.borderWidth]: '2px',
|
52
28
|
[vars.borderStyle]: 'solid',
|
53
29
|
[vars.borderColor]: 'transparent',
|
54
30
|
|
31
|
+
[vars.gap]: '0.25em',
|
32
|
+
[vars.height]: '100%',
|
33
|
+
|
34
|
+
[vars.verticalPadding]: `calc(var(${vars.fontSize}) / ${verticalPaddingRatio})`,
|
35
|
+
[vars.horizontalPadding]: `calc(var(${vars.fontSize}) / ${horizontalPaddingRatio})`,
|
36
|
+
|
37
|
+
size: {
|
38
|
+
xs: { [vars.fontSize]: '12px' },
|
39
|
+
sm: { [vars.fontSize]: '14px' },
|
40
|
+
md: { [vars.fontSize]: '18px' },
|
41
|
+
lg: { [vars.fontSize]: '22px' },
|
42
|
+
xl: { [vars.fontSize]: '26px' }
|
43
|
+
},
|
44
|
+
|
55
45
|
_fullWidth: {
|
56
46
|
[vars.width]: '100%'
|
57
47
|
},
|
48
|
+
|
58
49
|
_loading: {
|
59
50
|
[vars.cursor]: 'wait'
|
60
51
|
},
|
@@ -66,27 +57,30 @@ const button = {
|
|
66
57
|
_hover: {
|
67
58
|
[vars.backgroundColor]: helperRefs.dark
|
68
59
|
},
|
69
|
-
|
70
|
-
[vars.backgroundColor]: helperRefs.
|
60
|
+
_active: {
|
61
|
+
[vars.backgroundColor]: helperRefs.dark
|
71
62
|
}
|
72
63
|
},
|
64
|
+
|
73
65
|
outline: {
|
74
66
|
[vars.color]: helperRefs.main,
|
75
|
-
[vars.borderColor]:
|
67
|
+
[vars.borderColor]: 'currentColor',
|
76
68
|
_hover: {
|
77
69
|
[vars.color]: helperRefs.dark,
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
}
|
70
|
+
},
|
71
|
+
_active: {
|
72
|
+
[vars.color]: helperRefs.light,
|
82
73
|
}
|
83
74
|
},
|
75
|
+
|
84
76
|
link: {
|
85
77
|
[vars.color]: helperRefs.main,
|
86
|
-
[vars.lineHeight]: helperRefs.height,
|
87
78
|
_hover: {
|
88
79
|
[vars.color]: helperRefs.main,
|
89
80
|
[vars.textDecoration]: 'underline'
|
81
|
+
},
|
82
|
+
_active: {
|
83
|
+
[vars.color]: helperRefs.dark
|
90
84
|
}
|
91
85
|
}
|
92
86
|
}
|
@@ -28,6 +28,9 @@ const [helperTheme, helperRefs, helperVars] =
|
|
28
28
|
const container = {
|
29
29
|
...helperTheme,
|
30
30
|
[vars.width]: '100%',
|
31
|
+
[vars.boxShadow]: 'none',
|
32
|
+
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
33
|
+
[vars.color]: globalRefs.colors.surface.contrast,
|
31
34
|
verticalPadding: {
|
32
35
|
sm: { [vars.verticalPadding]: '5px' },
|
33
36
|
md: { [vars.verticalPadding]: '10px' },
|
@@ -1,5 +1,8 @@
|
|
1
1
|
import Divider, { componentName } from '../../components/descope-divider/Divider';
|
2
|
-
import { createHelperVars } from '../../helpers/themeHelpers';
|
2
|
+
import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
|
3
|
+
import globals from '../globals';
|
4
|
+
|
5
|
+
const globalRefs = getThemeRefs(globals);
|
3
6
|
|
4
7
|
const vars = Divider.cssVarList;
|
5
8
|
|
@@ -7,13 +10,11 @@ const thickness = '2px'
|
|
7
10
|
const textPaddingSize = '10px'
|
8
11
|
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName);
|
9
12
|
|
10
|
-
|
11
13
|
const divider = {
|
12
14
|
...helperTheme,
|
13
15
|
[vars.alignItems]: 'center',
|
14
16
|
[vars.dividerHeight]: helperRefs.thickness,
|
15
|
-
[vars.backgroundColor]:
|
16
|
-
[vars.opacity]: '0.2',
|
17
|
+
[vars.backgroundColor]: globalRefs.colors.surface.main,
|
17
18
|
[vars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
|
18
19
|
[vars.width]: '100%',
|
19
20
|
[vars.flexDirection]: 'row',
|
package/src/theme/globals.js
CHANGED
@@ -66,15 +66,19 @@ const spacing = {
|
|
66
66
|
};
|
67
67
|
|
68
68
|
const border = {
|
69
|
-
|
70
|
-
|
71
|
-
|
69
|
+
xs: '1px',
|
70
|
+
sm: '2px',
|
71
|
+
md: '3px',
|
72
|
+
lg: '4px',
|
73
|
+
xl: '5px'
|
72
74
|
};
|
73
75
|
|
74
76
|
const radius = {
|
75
|
-
|
76
|
-
|
77
|
-
|
77
|
+
xs: '5px',
|
78
|
+
sm: '10px',
|
79
|
+
md: '15px',
|
80
|
+
lg: '20px',
|
81
|
+
xl: '25px'
|
78
82
|
};
|
79
83
|
|
80
84
|
const shadow = {
|