@dile/ui 2.8.8 → 2.10.1
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.
|
@@ -19,8 +19,8 @@ export class DileAccordionItem extends DileSlideDown(LitElement) {
|
|
|
19
19
|
border-radius: var(--dile-accordion-item-border-radius, none);
|
|
20
20
|
|
|
21
21
|
/** Others */
|
|
22
|
-
color: var(--dile-accordion-item-color, white);
|
|
23
|
-
background: var(--dile-accordion-item-background, transparent);
|
|
22
|
+
color: var(--dile-accordion-item-color, var(--dile-on-background-color, white));
|
|
23
|
+
background: var(--dile-accordion-item-background, var(--dile-background-color, transparent));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
button{
|
|
@@ -31,15 +31,15 @@ export class DileAccordionItem extends DileSlideDown(LitElement) {
|
|
|
31
31
|
padding: var(--dile-accordion-item-button-padding, .7rem);
|
|
32
32
|
border: var(--dile-accordion-item-button-border, none);
|
|
33
33
|
border-radius: var(--dile-accordion-item-button-border-radius, var(--dile-accordion-item-border-radius, .5rem));
|
|
34
|
-
box-shadow: var(--dile-accordion-item-button-box-shadow,
|
|
34
|
+
box-shadow: var(--dile-accordion-item-button-box-shadow, none);
|
|
35
35
|
margin-bottom: 0;
|
|
36
36
|
transition: margin-bottom .2s .3s ease-in-out;
|
|
37
37
|
|
|
38
38
|
/** Others */
|
|
39
39
|
font-family: inherit;
|
|
40
40
|
font-size: var(--dile-accordion-item-button-font-size, 1.1rem);
|
|
41
|
-
background: var(--dile-accordion-item-button-background, var(--dile-accordion-item-background, black));
|
|
42
|
-
color: var(--dile-accordion-item-button-color, var(--dile-accordion-item-color, white));
|
|
41
|
+
background: var(--dile-accordion-item-button-background, var(--dile-accordion-item-background, var(--dile-primary-color, black)));
|
|
42
|
+
color: var(--dile-accordion-item-button-color, var(--dile-accordion-item-color, var(--dile-on-primary-color, white)));
|
|
43
43
|
cursor: pointer;
|
|
44
44
|
|
|
45
45
|
}
|
|
@@ -59,7 +59,7 @@ export class DileAccordionItem extends DileSlideDown(LitElement) {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
span.icon svg{
|
|
62
|
-
fill: var(--dile-accordion-item-button-icon-closed-color, var(--dile-accordion-item-button-icon-color, var(--dile-accordion-item-button-color, var(--dile-accordion-item-color, white))));
|
|
62
|
+
fill: var(--dile-accordion-item-button-icon-closed-color, var(--dile-accordion-item-button-icon-color, var(--dile-accordion-item-button-color, var(--dile-accordion-item-color, var(--dile-on-primary-color, white)))));
|
|
63
63
|
scale: 1.8;
|
|
64
64
|
transition: fill .3s ease-in-out;
|
|
65
65
|
}
|
|
@@ -74,7 +74,7 @@ export class DileAccordionItem extends DileSlideDown(LitElement) {
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
span.icon.opened svg{
|
|
77
|
-
fill: var(--dile-accordion-item-button-icon-opened-color, var(--dile-accordion-item-button-icon-color, var(--dile-accordion-item-button-color, var(--dile-accordion-item-color, white))));
|
|
77
|
+
fill: var(--dile-accordion-item-button-icon-opened-color, var(--dile-accordion-item-button-icon-color, var(--dile-accordion-item-button-color, var(--dile-accordion-item-color, var(--dile-on-primary-color, white)))));
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
.contentContainer{
|
|
@@ -87,9 +87,9 @@ export class DileAccordionItem extends DileSlideDown(LitElement) {
|
|
|
87
87
|
/** Others */
|
|
88
88
|
border: var(--dile-accordion-item-content-border, none);
|
|
89
89
|
border-radius: var(--dile-accordion-item-content-border-radius, var(--dile-accordion-item-border-radius, .5rem));
|
|
90
|
-
box-shadow: var(--dile-accordion-item-content-box-shadow,
|
|
91
|
-
background: var(--dile-accordion-item-content-background, var(--dile-accordion-item-background,
|
|
92
|
-
color: var(--dile-accordion-item-content-color, var(--dile-accordion-item-color,
|
|
90
|
+
box-shadow: var(--dile-accordion-item-content-box-shadow, none);
|
|
91
|
+
background: var(--dile-accordion-item-content-background, var(--dile-accordion-item-background, var(--dile-background-color, transparent)));
|
|
92
|
+
color: var(--dile-accordion-item-content-color, var(--dile-accordion-item-color, var(--dile-on-background-color, #303030)));
|
|
93
93
|
transition: height .3s ease-in-out;
|
|
94
94
|
}
|
|
95
95
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { html, css, LitElement } from "lit";
|
|
2
2
|
import { DileEmmitChange } from '../../../mixins/form/index.js';
|
|
3
|
+
import { checkboxBlankIcon, checkboxCheckedIcon } from '@dile/icons';
|
|
3
4
|
|
|
4
5
|
export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
5
6
|
static get properties() {
|
|
@@ -26,6 +27,7 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
26
27
|
return css`
|
|
27
28
|
:host {
|
|
28
29
|
display: inline-block;
|
|
30
|
+
--dile-icon-size: var(--dile-checkbox-size, 20px);
|
|
29
31
|
}
|
|
30
32
|
div {
|
|
31
33
|
display: flex;
|
|
@@ -38,34 +40,15 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
38
40
|
}
|
|
39
41
|
.checkbox {
|
|
40
42
|
display: flex;
|
|
41
|
-
|
|
42
|
-
border-radius: 4px;
|
|
43
|
-
width: var(--dile-checkbox-size, 20px);
|
|
44
|
-
height: var(--dile-checkbox-size, 20px);
|
|
45
|
-
line-height: 0;
|
|
43
|
+
--dile-icon-color: var(--dile-checkbox-checked-color, #30a030);
|
|
46
44
|
align-items: center;
|
|
47
45
|
justify-content: center;
|
|
48
46
|
}
|
|
49
47
|
.isUnchecked {
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
path[fill="none"],
|
|
53
|
-
.checked path[fill="none"] {
|
|
54
|
-
fill: transparent;
|
|
55
|
-
}
|
|
56
|
-
path {
|
|
57
|
-
fill: var(--dile-checkbox-fill-color, #fff);
|
|
58
|
-
}
|
|
59
|
-
.checked path {
|
|
60
|
-
fill: var(--dile-checkbox-unchecked-fill-color, #fff);
|
|
61
|
-
}
|
|
62
|
-
svg {
|
|
63
|
-
width: var(--dile-checkbox-size, 20px);
|
|
64
|
-
height: var(--dile-checkbox-size, 20px);
|
|
65
|
-
line-height: var(--dile-checkbox-size, 20px);
|
|
48
|
+
--dile-icon-color: var(--dile-checkbox-unchecked-color, #303030);
|
|
66
49
|
}
|
|
67
50
|
.label {
|
|
68
|
-
margin-left:
|
|
51
|
+
margin-left: var(--dile-checkbox-label-margin-left, 0.25rem);
|
|
69
52
|
font-weight: var(--dile-checkbox-font-weight, normal);
|
|
70
53
|
color: var(--dile-checkbox-label-color, var(--dile-on-background-color, #303030));
|
|
71
54
|
}
|
|
@@ -88,7 +71,7 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
88
71
|
}
|
|
89
72
|
|
|
90
73
|
updated(changedProperties) {
|
|
91
|
-
if (changedProperties.has(
|
|
74
|
+
if (changedProperties.has('checked')) {
|
|
92
75
|
this.emmitChange();
|
|
93
76
|
this.internals.setFormValue(this.checked ? 'true' : null);
|
|
94
77
|
}
|
|
@@ -134,20 +117,10 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
134
117
|
}
|
|
135
118
|
|
|
136
119
|
get checkedIcon() {
|
|
137
|
-
return html`<
|
|
138
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
139
|
-
<path
|
|
140
|
-
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
|
141
|
-
/>
|
|
142
|
-
</svg>`;
|
|
120
|
+
return html`<dile-icon .icon="${checkboxCheckedIcon}"></dile-icon>`;
|
|
143
121
|
}
|
|
144
122
|
get unCheckedIcon() {
|
|
145
|
-
return html`<
|
|
146
|
-
<path
|
|
147
|
-
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
|
148
|
-
/>
|
|
149
|
-
<path d="M0 0h24v24H0z" fill="none" />
|
|
150
|
-
</svg>`;
|
|
123
|
+
return html`<dile-icon .icon="${checkboxBlankIcon}"></dile-icon>`;
|
|
151
124
|
}
|
|
152
125
|
|
|
153
126
|
doKeyPress(e) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.10.1",
|
|
4
4
|
"description": "UI Core components from dile-components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "da7dcc3e69b2e1f5b02f7c603d99e6d7972c2e07"
|
|
30
30
|
}
|