@sankhyalabs/ezui 1.1.63 → 1.1.67
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/dist/cjs/ez-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-button_16.cjs.entry.js +8 -14
- package/dist/cjs/ez-dialog.cjs.entry.js +3 -3
- package/dist/cjs/ez-label-chip.cjs.entry.js +2 -2
- package/dist/cjs/ez-popover.cjs.entry.js +10 -1
- package/dist/cjs/ez-popup.cjs.entry.js +2 -2
- package/dist/cjs/ez-toast.cjs.entry.js +1 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.css +20 -31
- package/dist/collection/components/ez-action-chip/ez-action-chip.js +1 -1
- package/dist/collection/components/ez-button/ez-button.css +38 -16
- package/dist/collection/components/ez-calendar/ez-calendar.css +55 -28
- package/dist/collection/components/ez-check/ez-check.css +76 -43
- package/dist/collection/components/ez-check/ez-check.js +1 -1
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +20 -0
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +60 -86
- package/dist/collection/components/ez-date-input/ez-date-input.css +9 -6
- package/dist/collection/components/ez-date-input/ez-date-input.js +1 -1
- package/dist/collection/components/ez-dialog/ez-dialog.css +125 -52
- package/dist/collection/components/ez-dialog/ez-dialog.js +2 -2
- package/dist/collection/components/ez-form/subcomponents/form-metadata.js +2 -2
- package/dist/collection/components/ez-label-chip/ez-label-chip.css +65 -59
- package/dist/collection/components/ez-label-chip/ez-label-chip.js +16 -16
- package/dist/collection/components/ez-modal/ez-modal.css +57 -0
- package/dist/collection/components/ez-modal/ez-modal.js +1 -1
- package/dist/collection/components/ez-number-input/ez-number-input.css +25 -1
- package/dist/collection/components/ez-number-input/ez-number-input.js +1 -1
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.css +3 -1
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.js +1 -1
- package/dist/collection/components/ez-popover/ez-popover.css +10 -8
- package/dist/collection/components/ez-popover/ez-popover.js +26 -1
- package/dist/collection/components/ez-popup/ez-popup.css +97 -80
- package/dist/collection/components/ez-popup/ez-popup.js +2 -2
- package/dist/collection/components/ez-search/ez-search.js +1 -1
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +30 -22
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +1 -1
- package/dist/collection/components/ez-text-area/ez-text-area.css +25 -10
- package/dist/collection/components/ez-text-area/ez-text-area.js +1 -1
- package/dist/collection/components/ez-text-input/ez-text-input.css +23 -7
- package/dist/collection/components/ez-text-input/ez-text-input.js +1 -1
- package/dist/collection/components/ez-time-input/ez-time-input.css +16 -1
- package/dist/collection/components/ez-toast/ez-toast.css +23 -10
- package/dist/collection/components/ez-upload/ez-upload.css +85 -16
- package/dist/collection/components/ez-upload/ez-upload.js +1 -7
- package/dist/custom-elements/index.js +27 -24
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +8 -14
- package/dist/esm/ez-dialog.entry.js +3 -3
- package/dist/esm/ez-label-chip.entry.js +2 -2
- package/dist/esm/ez-popover.entry.js +11 -2
- package/dist/esm/ez-popup.entry.js +2 -2
- package/dist/esm/ez-toast.entry.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-4f4b8aae.entry.js +1 -0
- package/dist/ezui/p-7c7dbfcb.entry.js +1 -0
- package/dist/ezui/p-8c8f1c00.entry.js +1 -0
- package/dist/ezui/{p-c3b18332.entry.js → p-8d547517.entry.js} +1 -1
- package/dist/ezui/p-9702db61.entry.js +1 -0
- package/dist/ezui/p-afc553a4.entry.js +1 -0
- package/dist/ezui/p-ee5058c1.entry.js +1 -0
- package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +3 -0
- package/dist/types/components/ez-check/ez-check.d.ts +3 -0
- package/dist/types/components/ez-collapsible-box/ez-collapsible-box.d.ts +3 -0
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +3 -0
- package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +7 -1
- package/dist/types/components/ez-modal/ez-modal.d.ts +1 -1
- package/dist/types/components/ez-number-input/ez-number-input.d.ts +3 -0
- package/dist/types/components/ez-numeric-input/ez-numeric-input.d.ts +3 -0
- package/dist/types/components/ez-popover/ez-popover.d.ts +6 -0
- package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
- package/dist/types/components/ez-search/ez-search.d.ts +3 -0
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +3 -0
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +3 -0
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +3 -0
- package/dist/types/components/ez-upload/ez-upload.d.ts +1 -1
- package/dist/types/components.d.ts +43 -3
- package/package.json +1 -1
- package/dist/ezui/p-171bdc12.entry.js +0 -1
- package/dist/ezui/p-34e7a3b9.entry.js +0 -1
- package/dist/ezui/p-88b9c3d4.entry.js +0 -1
- package/dist/ezui/p-9cd820c7.entry.js +0 -1
- package/dist/ezui/p-aa94210b.entry.js +0 -1
- package/dist/ezui/p-c0c6804e.entry.js +0 -1
|
@@ -1,18 +1,38 @@
|
|
|
1
1
|
:host {
|
|
2
|
+
/*@doc Define a altura do componente quando collapsado.*/
|
|
2
3
|
--collapsible-box--height: 42px;
|
|
3
4
|
|
|
5
|
+
/*@doc Define o tamanho da fonte do header.*/
|
|
4
6
|
--collapsible-box--font-size: var(--title--medium, 14px);
|
|
7
|
+
/*@doc Define a família da fonte do header.*/
|
|
5
8
|
--collapsible-box--font-family: var(--font-pattern, Arial);
|
|
9
|
+
/*@doc Define o peso da fonte header.*/
|
|
6
10
|
--collapsible-box--font-weight: var(--text-weight--large, 600);
|
|
11
|
+
/*@doc Define a cor da fonte do header.*/
|
|
7
12
|
--collapsible-box--color: var(--title--primary);
|
|
8
13
|
|
|
14
|
+
/*@doc Contém a imagem do chevron no tamanho xsmall.*/
|
|
9
15
|
--collapsible-box__btn--image--xsmall: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="12px" width="7.5px"><path d="M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z"/></svg>');
|
|
16
|
+
|
|
17
|
+
/*@doc Contém a imagem do chevron no tamanho small.*/
|
|
10
18
|
--collapsible-box__btn--image--small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="14px" width="8.68px"><path d="M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z"/></svg>');
|
|
19
|
+
|
|
20
|
+
/*@doc Contém a imagem do chevron no tamanho medium.*/
|
|
11
21
|
--collapsible-box__btn--image--medium: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
|
|
22
|
+
|
|
23
|
+
/*@doc Contém a imagem do chevron no tamanho large.*/
|
|
12
24
|
--collapsible-box__btn--image--large: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="18px" width="11.25px"><path d="M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z"/></svg>');
|
|
25
|
+
|
|
26
|
+
/*@doc Contém a imagem do chevron no tamanho xlarge.*/
|
|
13
27
|
--collapsible-box__btn--image--xlarge: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="12.5px"><path d="M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z"/></svg>');
|
|
28
|
+
|
|
29
|
+
/*@doc Define a cor do chevron.*/
|
|
14
30
|
--collapsible-box__btn--fill: var(--collapsible-box--color);
|
|
31
|
+
|
|
32
|
+
/*@doc Define a largura do botão que contém o chevron.*/
|
|
15
33
|
--collapsible-box__btn--width: 10px;
|
|
34
|
+
|
|
35
|
+
/*@doc Define a altura do botão que contém o chevron.*/
|
|
16
36
|
--collapsible-box__btn--height: 16px;
|
|
17
37
|
|
|
18
38
|
/***************
|
|
@@ -1,44 +1,65 @@
|
|
|
1
1
|
:host {
|
|
2
|
+
|
|
2
3
|
/* dimensions */
|
|
4
|
+
/*@doc Define altura do input.*/
|
|
3
5
|
--cx--height: 42px;
|
|
6
|
+
/*@doc Define largura do input.*/
|
|
4
7
|
--cx--width: 100%;
|
|
8
|
+
/*@doc Define largura do slot do ícone do input.*/
|
|
5
9
|
--cx__icon--width: 48px;
|
|
10
|
+
|
|
6
11
|
/* general */
|
|
12
|
+
/*@doc Define o raio da borda do input.*/
|
|
7
13
|
--cx--border-radius: var(--border--radius-medium, 12px);
|
|
14
|
+
/*@doc Define o raio da borda do input quando pequeno.*/
|
|
8
15
|
--cx--border-radius-small: var(--border--radius-small, 6px);
|
|
16
|
+
/*@doc Define o tamanho da fonte dentro do input.*/
|
|
9
17
|
--cx--font-size: var(--text--medium, 14px);
|
|
18
|
+
/*@doc Define a família da fonte dentro do input.*/
|
|
10
19
|
--cx--font-family: var(--font-pattern, Arial);
|
|
20
|
+
/*@doc Define o peso da fonte dentro do input quando pesada.*/
|
|
11
21
|
--cx--font-weight--large: var(--text-weight--large, 500);
|
|
22
|
+
/*@doc Define o peso da fonte dentro do input quando média.*/
|
|
12
23
|
--cx--font-weight--medium: var(--text-weight--medium, 400);
|
|
13
|
-
|
|
14
|
-
--cx--
|
|
15
|
-
--cx--shadow: var(--shadow, 0px 0px 16px 0px rgba(0, 38, 111, .12));
|
|
16
|
-
--cx--background-color--xlight: var(--background--xlight,#fff);
|
|
24
|
+
/*@doc Define a cor de fundo da lista de opções.*/
|
|
25
|
+
--cx--background-color--xlight: var(--background--xlight, #fff);
|
|
17
26
|
|
|
18
27
|
/* input */
|
|
28
|
+
/*@doc Define a cor de fundo do input.*/
|
|
19
29
|
--cx__input--background-color: var(--background--medium, #e0e0e0);
|
|
30
|
+
/*@doc Define o estilo da borda do input.*/
|
|
20
31
|
--cx__input--border: var(--border--medium, 2px solid);
|
|
32
|
+
/*@doc Define a cor da borda do input.*/
|
|
21
33
|
--cx__input--border-color: var(--cx__input--background-color);
|
|
22
34
|
/*no modo normal usamos a borda com a mesma cor do bg*/
|
|
35
|
+
/*@doc Define a cor da borda do input quando focado.*/
|
|
23
36
|
--cx__input--focus--border-color: var(--color--primary, #008561);
|
|
37
|
+
/*@doc Define a cor de fundo do input quando desabilitado.*/
|
|
24
38
|
--cx__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
|
|
39
|
+
/*@doc Define a cor do texto dentro do input quando desabilitado.*/
|
|
25
40
|
--cx__input--disabled--color: var(--text--disable, #AFB6C0);
|
|
41
|
+
/*@doc Define a cor da borda do input quando com erro.*/
|
|
26
42
|
--cx__input--error--border-color: #CC2936;
|
|
43
|
+
|
|
27
44
|
/* label */
|
|
45
|
+
/*@doc Define a cor do label.*/
|
|
28
46
|
--cx__label--color: var(--title--primary, #919191);
|
|
29
|
-
/* message box */
|
|
30
|
-
--cx__message_box--font-size: var(--text--small, 12px);
|
|
31
|
-
--cx__message_box--info--color: var(--color--success, #22085d);
|
|
32
|
-
--cx__message_box--error--color: var(--color--error, #FF0000);
|
|
33
47
|
|
|
34
48
|
/* list */
|
|
35
|
-
|
|
36
|
-
--cx__list-text--
|
|
37
|
-
|
|
49
|
+
/*@doc Define a cor do texto da lista de opções.*/
|
|
50
|
+
--cx__list-text--primary: var(--text--primary, #626e82);
|
|
51
|
+
/*@doc Define a altura do box da lista de opções.*/
|
|
52
|
+
--cx__list-height: calc(var(--cx--font-size) + var(--cx--space--medium));
|
|
38
53
|
|
|
54
|
+
/*@doc Contém a imagem do ícone que aciona a lista.*/
|
|
39
55
|
--cx--drop-down__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px"><path d="M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z"/></svg>');
|
|
56
|
+
/*@doc Contém a imagem do ícone de pesquisa.*/
|
|
40
57
|
--cx--search__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="22px" width="22px"><path d="m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z"/></svg>');
|
|
41
58
|
|
|
59
|
+
/* espaçamento */
|
|
60
|
+
--cx--space--medium: var(--space--medium, 12px);
|
|
61
|
+
--cx--space--small: var(--space--small, 6px);
|
|
62
|
+
|
|
42
63
|
/***************
|
|
43
64
|
host style
|
|
44
65
|
***************/
|
|
@@ -50,17 +71,17 @@
|
|
|
50
71
|
width: var(--cx--width);
|
|
51
72
|
}
|
|
52
73
|
|
|
53
|
-
ez-text-input{
|
|
74
|
+
ez-text-input {
|
|
54
75
|
--it__input--background-color: var(--cx__input--background-color, #FFFFFF);
|
|
55
76
|
--it__input--border-color: var(--cx__input--border-color, #DCE0E8);
|
|
56
77
|
}
|
|
57
78
|
|
|
58
|
-
.list-container{
|
|
79
|
+
.list-container {
|
|
59
80
|
position: relative;
|
|
60
81
|
width: 100%;
|
|
61
82
|
}
|
|
62
83
|
|
|
63
|
-
.options-list{
|
|
84
|
+
.options-list {
|
|
64
85
|
box-sizing: border-box;
|
|
65
86
|
width: 100%;
|
|
66
87
|
|
|
@@ -68,7 +89,7 @@ ez-text-input{
|
|
|
68
89
|
z-index: var(--more-visible, 2);
|
|
69
90
|
display: flex;
|
|
70
91
|
flex-direction: column;
|
|
71
|
-
|
|
92
|
+
|
|
72
93
|
/*public*/
|
|
73
94
|
background-color: var(--cx--background-color--xlight);
|
|
74
95
|
padding: var(--cx--space--small);
|
|
@@ -79,19 +100,20 @@ ez-text-input{
|
|
|
79
100
|
overflow: auto;
|
|
80
101
|
}
|
|
81
102
|
|
|
82
|
-
.item{
|
|
103
|
+
.item {
|
|
83
104
|
text-align: left;
|
|
84
105
|
display: flex;
|
|
85
106
|
justify-content: space-between;
|
|
86
107
|
align-items: center;
|
|
87
108
|
border-radius: var(--cx--border-radius-small);
|
|
88
109
|
padding: 0 var(--cx--space--small);
|
|
89
|
-
list-style-type: none;
|
|
110
|
+
list-style-type: none;
|
|
90
111
|
|
|
91
|
-
min-height: var(--cx__list-height)
|
|
112
|
+
min-height: var(--cx__list-height);
|
|
113
|
+
;
|
|
92
114
|
}
|
|
93
115
|
|
|
94
|
-
.item--label{
|
|
116
|
+
.item--label {
|
|
95
117
|
text-align: left;
|
|
96
118
|
flex-basis: 85%;
|
|
97
119
|
flex-grow: 1;
|
|
@@ -103,7 +125,7 @@ ez-text-input{
|
|
|
103
125
|
text-overflow: ellipsis;
|
|
104
126
|
}
|
|
105
127
|
|
|
106
|
-
.item--value{
|
|
128
|
+
.item--value {
|
|
107
129
|
text-align: right;
|
|
108
130
|
flex-basis: 15%;
|
|
109
131
|
flex-grow: 0;
|
|
@@ -115,73 +137,26 @@ ez-text-input{
|
|
|
115
137
|
text-overflow: ellipsis;
|
|
116
138
|
}
|
|
117
139
|
|
|
118
|
-
li:hover{
|
|
119
|
-
background-color: var(--background--medium);
|
|
140
|
+
li:hover {
|
|
141
|
+
background-color: var(--background--medium);
|
|
120
142
|
}
|
|
121
143
|
|
|
122
|
-
.preselected{
|
|
123
|
-
background-color: var(--background--medium);
|
|
144
|
+
.preselected {
|
|
145
|
+
background-color: var(--background--medium);
|
|
124
146
|
}
|
|
125
147
|
|
|
126
|
-
|
|
127
|
-
color: var(--cx__list-text--primary);
|
|
128
|
-
border-radius: var(--cx--border-radius-small);
|
|
129
|
-
padding: 0 var(--cx--space--small);
|
|
130
|
-
height: var(--cx__list-height);
|
|
131
|
-
font-weight: var(--cx--font-weight--large);
|
|
132
|
-
font-family: var(--cx--font-family);
|
|
133
|
-
line-height: var(--cx__list-height);
|
|
134
|
-
vertical-align: middle;
|
|
135
|
-
text-overflow: ellipsis;
|
|
136
|
-
width: 80%;
|
|
137
|
-
min-width: 30px;
|
|
138
|
-
overflow-x: hidden;
|
|
139
|
-
text-align: left;
|
|
140
|
-
}*/
|
|
141
|
-
|
|
142
|
-
/*.--li__spanlabel--full-width{
|
|
143
|
-
color: var(--cx__list-text--primary);
|
|
144
|
-
border-radius: var(--cx--border-radius-small);
|
|
145
|
-
padding: 0 var(--cx--space--small);
|
|
146
|
-
height: var(--cx__list-height);
|
|
147
|
-
font-weight: var(--cx--font-weight--large);
|
|
148
|
-
font-family: var(--cx--font-family);
|
|
149
|
-
line-height: var(--cx__list-height);
|
|
150
|
-
vertical-align: middle;
|
|
151
|
-
text-overflow: ellipsis;
|
|
152
|
-
width: 100%;
|
|
153
|
-
min-width: 30px;
|
|
154
|
-
overflow-x: hidden;
|
|
155
|
-
text-align: left;
|
|
156
|
-
}*/
|
|
157
|
-
|
|
158
|
-
/*.--li__spanvalue{
|
|
159
|
-
color: var(--cx__list-text--secondary);
|
|
160
|
-
border-radius: var(--cx--border-radius-small);
|
|
161
|
-
padding: 0 var(--cx--space--small);
|
|
162
|
-
height: var(--cx__list-height);
|
|
163
|
-
font-weight: var(--cx--font-weight--medium);
|
|
164
|
-
font-family: var(--cx--font-family);
|
|
165
|
-
line-height: var(--cx__list-height);
|
|
166
|
-
vertical-align: middle;
|
|
167
|
-
text-overflow: ellipsis;
|
|
168
|
-
width: 20%;
|
|
169
|
-
min-width: 20px;
|
|
170
|
-
overflow-x: hidden;
|
|
171
|
-
}*/
|
|
172
|
-
|
|
173
|
-
.btn-open-options{
|
|
148
|
+
.btn-open-options {
|
|
174
149
|
outline: none;
|
|
175
150
|
border: none;
|
|
176
151
|
background-color: unset;
|
|
177
152
|
cursor: pointer;
|
|
178
153
|
}
|
|
179
154
|
|
|
180
|
-
.btn-open-options:disabled{
|
|
155
|
+
.btn-open-options:disabled {
|
|
181
156
|
cursor: unset;
|
|
182
157
|
}
|
|
183
158
|
|
|
184
|
-
.btn-open-options::after{
|
|
159
|
+
.btn-open-options::after {
|
|
185
160
|
content: '';
|
|
186
161
|
display: flex;
|
|
187
162
|
background-color: var(--text--primary, #008561);
|
|
@@ -190,41 +165,40 @@ li:hover{
|
|
|
190
165
|
-webkit-mask-image: var(--cx--drop-down__image);
|
|
191
166
|
mask-image: var(--cx--drop-down__image);
|
|
192
167
|
}
|
|
193
|
-
|
|
168
|
+
|
|
169
|
+
.btn-open-options:disabled:after {
|
|
194
170
|
background-color: var(--text--disable, #AFB6C0);
|
|
195
171
|
}
|
|
196
172
|
|
|
197
|
-
.btn-open-options:enabled:hover::after{
|
|
173
|
+
.btn-open-options:enabled:hover::after {
|
|
198
174
|
background-color: var(--color--primary, #4e4e4e);
|
|
199
175
|
}
|
|
200
176
|
|
|
201
|
-
.btn-open-search{
|
|
177
|
+
.btn-open-search {
|
|
202
178
|
outline: none;
|
|
203
179
|
border: none;
|
|
204
180
|
background-color: unset;
|
|
205
181
|
cursor: pointer;
|
|
206
182
|
}
|
|
207
183
|
|
|
208
|
-
.btn-open-search:disabled{
|
|
184
|
+
.btn-open-search:disabled {
|
|
209
185
|
cursor: unset;
|
|
210
186
|
}
|
|
211
187
|
|
|
212
|
-
.btn-open-search::after{
|
|
188
|
+
.btn-open-search::after {
|
|
213
189
|
content: '';
|
|
214
190
|
display: flex;
|
|
215
191
|
background-color: var(--text--primary, #008561);
|
|
216
192
|
width: 22px;
|
|
217
|
-
height: 22px;
|
|
193
|
+
height: 22px;
|
|
218
194
|
-webkit-mask-image: var(--cx--search__image);
|
|
219
195
|
mask-image: var(--cx--search__image);
|
|
220
196
|
}
|
|
221
|
-
|
|
197
|
+
|
|
198
|
+
.btn-open-search:disabled:after {
|
|
222
199
|
background-color: var(--text--disable, #AFB6C0);
|
|
223
200
|
}
|
|
224
201
|
|
|
225
|
-
.btn-open-search:enabled:hover::after{
|
|
202
|
+
.btn-open-search:enabled:hover::after {
|
|
226
203
|
background-color: var(--color--primary, #4e4e4e);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
204
|
+
}
|
|
@@ -1,28 +1,31 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: block;
|
|
3
3
|
width: 100%;
|
|
4
|
+
/*@doc Define a cor de fundo do input.*/
|
|
4
5
|
--it__input--background-color: var(--background--medium, #e0e0e0);
|
|
6
|
+
/*@doc Define a cor da borda do input.*/
|
|
5
7
|
--it__input--border-color: var(--it__input--background-color);
|
|
8
|
+
/*@doc Contém a imagem do calendário.*/
|
|
6
9
|
--di__calendar-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="15px"><path d="M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z"/></svg>');
|
|
7
10
|
}
|
|
8
11
|
|
|
9
|
-
.text-input{
|
|
12
|
+
.text-input {
|
|
10
13
|
--it__input--background-color: inherit;
|
|
11
14
|
--it__input--border-color: inherit;
|
|
12
15
|
}
|
|
13
16
|
|
|
14
|
-
.btn-open-cal{
|
|
17
|
+
.btn-open-cal {
|
|
15
18
|
outline: none;
|
|
16
19
|
border: none;
|
|
17
20
|
background-color: unset;
|
|
18
21
|
cursor: pointer;
|
|
19
22
|
}
|
|
20
23
|
|
|
21
|
-
.btn-open-cal:disabled{
|
|
24
|
+
.btn-open-cal:disabled {
|
|
22
25
|
cursor: unset;
|
|
23
26
|
}
|
|
24
27
|
|
|
25
|
-
.btn-open-cal::after{
|
|
28
|
+
.btn-open-cal::after {
|
|
26
29
|
content: '';
|
|
27
30
|
display: flex;
|
|
28
31
|
background-color: var(--text--primary, #008561);
|
|
@@ -32,10 +35,10 @@
|
|
|
32
35
|
mask-image: var(--di__calendar-image);
|
|
33
36
|
}
|
|
34
37
|
|
|
35
|
-
.btn-open-cal:disabled:after{
|
|
38
|
+
.btn-open-cal:disabled:after {
|
|
36
39
|
background-color: var(--text--disable, #AFB6C0);
|
|
37
40
|
}
|
|
38
41
|
|
|
39
|
-
.btn-open-cal:enabled:hover::after{
|
|
42
|
+
.btn-open-cal:enabled:hover::after {
|
|
40
43
|
background-color: var(--color--primary, #4e4e4e);
|
|
41
44
|
}
|