Skip to content

Commit aac425f

Browse files
DannyMoerkerkeDannyMoerkerke
committed
- updated to 1.2.15
- cleaned up styling of material-button.js
1 parent 507f9b3 commit aac425f

File tree

2 files changed

+130
-120
lines changed

2 files changed

+130
-120
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dannymoerkerke/material-webcomponents",
3-
"version": "1.2.14",
3+
"version": "1.2.15",
44
"description": "Material Design implemented in Custom elements",
55
"author": "Danny Moerkerke <danny@dannymoerkerke.nl>",
66
"license": "ISC",

‎src/material-button.js

Lines changed: 129 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -10,123 +10,120 @@ export class MaterialButton extends HTMLElement {
1010
const shadowRoot = this.attachShadow({mode: 'open'});
1111

1212
shadowRoot.innerHTML = `
13-
<style>
14-
:host {
15-
--button-color: transparent;
16-
--button-color-hover: #e2e2e2;
17-
--font-color: #000000;
18-
--font-size: 1em;
19-
--icon-size: 24px;
20-
--button-padding: 0 8px 0 8px;
21-
--button-padding-circle: 8px;
22-
--border-radius: 2px;
23-
display: block;
24-
width: fit-content;
25-
}
26-
:host([raised]) {
27-
--button-color: #e2e2e2;
28-
}
29-
button {
30-
border: none;
31-
border-radius: var(--border-radius);
32-
min-height: 36px;
33-
padding: var(--button-padding);
34-
font-size: var(--font-size);
35-
color: var(--font-color);
36-
background-color: var(--button-color);
37-
cursor: pointer;
38-
outline: none;
39-
display: flex;
40-
align-items: center;
41-
justify-content: center;
42-
position: relative;
43-
overflow: hidden;
44-
}
45-
:host([label]) button {
46-
min-width: 88px;
47-
}
48-
button:hover {
49-
transition: background-color 0.3s ease-out;
50-
background-color: var(--button-color-hover);
51-
}
52-
:host([disabled]) button {
53-
opacity: 0.5;
54-
cursor: not-allowed;
55-
}
56-
:host([disabled]) button:hover {
57-
background-color: transparent;
58-
}
59-
:host([disabled]) button .ripple {
60-
display: none;
61-
}
62-
button.active .ripple {
63-
animation-name: ripple;
64-
animation-duration: 0.4s;
65-
animation-timing-function: ease-out;
66-
background-color: #808080;
67-
border-radius: 50%;
68-
position: absolute;
69-
top: 50%;
70-
left: 50%;
71-
transform: translate(-50%, -50%);
72-
}
73-
#label {
74-
display: inline-block;
75-
position: relative;
76-
margin-right: 8px;
77-
margin-left: 8px;
78-
}
79-
:host([circle]) button {
80-
border-radius: 50%;
81-
--button-padding: var(--button-padding-circle);
82-
}
83-
:host([raised]) button {
84-
background-color: var(--button-color);
85-
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
86-
}
87-
:host([raised]) button[disabled]:hover {
88-
background-color: var(--button-color);
89-
}
90-
::slotted([slot="left-icon"]) {
91-
float: left;
92-
font-size: var(--icon-size) !important;
93-
}
94-
::slotted([slot="right-icon"]) {
95-
float: right;
96-
font-size: var(--icon-size) !important;
97-
}
98-
::slotted([slot="file-input"]) {
99-
position: absolute;
100-
top: 0;
101-
left: 0;
102-
bottom: 0;
103-
right: 0;
104-
opacity: 0;
105-
z-index: 9;
106-
}
107-
108-
@keyframes ripple {
109-
from {
110-
width: 0;
111-
height: 0;
112-
opacity: 0.8;
113-
}
114-
to {
115-
width: 100px;
116-
height: 100px;
117-
opacity: 0.1;
118-
}
119-
}
120-
</style>
121-
122-
<button type="button">
123-
<div class="ripple"></div>
124-
<slot name="file-input"></slot>
125-
<slot name="left-icon"></slot>
126-
<span id="label"></span>
127-
<slot name="right-icon"></slot>
128-
</button>
129-
`;
13+
<style>
14+
:host {
15+
--button-color: transparent;
16+
--button-color-hover: #e2e2e2;
17+
--font-color: #000000;
18+
--font-size: 1em;
19+
--icon-size: 24px;
20+
--button-padding: 0 8px 0 8px;
21+
--button-padding-circle: 8px;
22+
--border-radius: 2px;
23+
display: block;
24+
width: fit-content;
25+
}
26+
27+
button {
28+
border: none;
29+
border-radius: var(--border-radius);
30+
min-height: 36px;
31+
padding: var(--button-padding);
32+
font-size: var(--font-size);
33+
color: var(--font-color);
34+
background-color: var(--button-color);
35+
cursor: pointer;
36+
outline: none;
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
position: relative;
41+
overflow: hidden;
42+
}
43+
44+
button:hover {
45+
transition: background-color 0.3s ease-out;
46+
background-color: var(--button-color-hover);
47+
}
48+
49+
#label {
50+
display: inline-block;
51+
position: relative;
52+
margin-right: 8px;
53+
margin-left: 8px;
54+
}
55+
56+
:host([label]) button {
57+
min-width: 88px;
58+
}
59+
60+
:host([raised]) {
61+
--button-color: #e2e2e2;
62+
}
63+
64+
:host([raised]) button {
65+
background-color: var(--button-color);
66+
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
67+
}
68+
69+
:host([disabled]) {
70+
cursor: not-allowed;
71+
}
72+
73+
:host([disabled]) button {
74+
opacity: 0.5;
75+
pointer-events: none;
76+
}
77+
78+
:host([active]) .ripple {
79+
animation-name: ripple;
80+
animation-duration: 0.4s;
81+
animation-timing-function: ease-out;
82+
background-color: #808080;
83+
border-radius: 50%;
84+
position: absolute;
85+
top: 50%;
86+
left: 50%;
87+
transform: translate(-50%, -50%);
88+
}
89+
90+
:host([circle]) button {
91+
border-radius: 50%;
92+
--button-padding: var(--button-padding-circle);
93+
}
94+
95+
::slotted([slot="file-input"]) {
96+
position: absolute;
97+
top: 0;
98+
left: 0;
99+
bottom: 0;
100+
right: 0;
101+
opacity: 0;
102+
z-index: 9;
103+
}
104+
105+
@keyframes ripple {
106+
from {
107+
width: 0;
108+
height: 0;
109+
opacity: 0.8;
110+
}
111+
to {
112+
width: 100px;
113+
height: 100px;
114+
opacity: 0.1;
115+
}
116+
}
117+
</style>
118+
119+
<button type="button">
120+
<div class="ripple"></div>
121+
<slot name="file-input"></slot>
122+
<slot name="left-icon"></slot>
123+
<span id="label"></span>
124+
<slot name="right-icon"></slot>
125+
</button>
126+
`;
130127

131128
this.button = this.shadowRoot.querySelector('button');
132129
this.label = this.shadowRoot.querySelector('#label');
@@ -137,11 +134,11 @@ export class MaterialButton extends HTMLElement {
137134
this.hasAttribute('label') ? this.label.textContent = this.getAttribute('label') : this.label.style.display = 'none';
138135

139136
this.button.addEventListener('click', () => {
140-
this.button.classList.add('active');
137+
this.active = true;
141138
});
142139

143140
this.ripple.addEventListener('animationend', () => {
144-
this.button.classList.remove('active');
141+
this.active = false;
145142
});
146143
}
147144

@@ -165,6 +162,19 @@ export class MaterialButton extends HTMLElement {
165162
this.removeAttribute('disabled');
166163
}
167164
}
165+
166+
get active() {
167+
return this.hasAttribute('active');
168+
}
169+
170+
set active(isActive) {
171+
if(isActive) {
172+
this.setAttribute('active', '');
173+
}
174+
else {
175+
this.removeAttribute('active');
176+
}
177+
}
168178
}
169179

170180
if(!customElements.get('material-button')) {

0 commit comments

Comments
 (0)