Skip to content

Commit

Permalink
refactor: drop use of include option with registerStyles (#2454)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomivirkki
tomivirkki authored Sep 6, 2021
1 parent 3a2be1e commit 1ed5818
Show file tree
Hide file tree
Showing 87 changed files with 6,244 additions and 6,248 deletions.
560 changes: 280 additions & 280 deletions packages/button/theme/lumo/vaadin-button-styles.js
View file

Large diffs are not rendered by default.

348 changes: 174 additions & 174 deletions packages/button/theme/material/vaadin-button-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,178 +3,178 @@ import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/shadow.js';
import '@vaadin/vaadin-material-styles/typography.js';

registerStyles(
'vaadin-button',
css`
const button = css`
:host {
padding: 8px;
min-width: 64px;
box-sizing: border-box;
display: inline-flex;
align-items: baseline;
justify-content: center;
border-radius: 4px;
color: var(--material-primary-text-color);
font-family: var(--material-font-family);
text-transform: uppercase;
font-size: var(--material-button-font-size);
line-height: 20px;
font-weight: 500;
letter-spacing: 0.05em;
white-space: nowrap;
overflow: hidden;
transition: box-shadow 0.2s;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@-moz-document url-prefix() {
:host {
padding: 8px;
min-width: 64px;
box-sizing: border-box;
display: inline-flex;
align-items: baseline;
justify-content: center;
border-radius: 4px;
color: var(--material-primary-text-color);
font-family: var(--material-font-family);
text-transform: uppercase;
font-size: var(--material-button-font-size);
line-height: 20px;
font-weight: 500;
letter-spacing: 0.05em;
white-space: nowrap;
overflow: hidden;
transition: box-shadow 0.2s;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@-moz-document url-prefix() {
:host {
vertical-align: -13px;
}
}
:host::before,
:host::after {
content: '';
pointer-events: none;
position: absolute;
border-radius: inherit;
opacity: 0;
background-color: currentColor;
}
:host::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 0.5s;
}
:host::after {
border-radius: 50%;
width: 320px;
height: 320px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.9s;
}
[part='label'] ::slotted(*) {
vertical-align: middle;
}
:host(:hover)::before,
:host([focus-ring])::before {
opacity: 0.08;
transition-duration: 0.2s;
}
:host([active])::before {
opacity: 0.16;
transition: opacity 0.4s;
}
:host([active])::after {
transform: translate(-50%, -50%) scale(0.0000001); /* animation works weirdly with scale(0) */
opacity: 0.1;
transition: 0s;
}
:host(:hover:not([active]))::after {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
:host([disabled]) {
pointer-events: none;
color: var(--material-disabled-text-color);
}
/* Contained and outline variants */
:host([theme~='contained']),
:host([theme~='outlined']) {
padding: 8px 16px;
}
:host([theme~='outlined']) {
box-shadow: inset 0 0 0 1px var(--_material-button-outline-color, rgba(0, 0, 0, 0.2));
}
:host([theme~='contained']:not([disabled])) {
background-color: var(--material-primary-color);
color: var(--material-primary-contrast-color);
box-shadow: var(--material-shadow-elevation-2dp);
}
:host([theme~='contained'][disabled]) {
background-color: var(--material-secondary-background-color);
}
:host([theme~='contained']:hover) {
box-shadow: var(--material-shadow-elevation-4dp);
}
:host([theme~='contained'][active]) {
box-shadow: var(--material-shadow-elevation-8dp);
}
/* Icon alignment */
[part] ::slotted(vaadin-icon),
[part] ::slotted(iron-icon) {
display: block;
width: 18px;
height: 18px;
}
[part='prefix'] ::slotted(vaadin-icon),
[part='prefix'] ::slotted(iron-icon) {
margin-right: 8px;
margin-left: -4px;
}
[part='suffix'] ::slotted(vaadin-icon),
[part='suffix'] ::slotted(iron-icon) {
margin-left: 8px;
margin-right: -4px;
}
/* RTL specific styles */
:host([dir='rtl'])::before {
left: auto;
right: 0;
}
:host([dir='rtl'])::after {
left: auto;
right: 50%;
transform: translate(50%, -50%);
}
:host([active][dir='rtl'])::after {
transform: translate(50%, -50%) scale(0.0000001);
}
:host(:hover:not([active])[dir='rtl'])::after {
transform: translate(50%, -50%) scale(1);
}
:host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon),
:host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) {
margin-right: -4px;
margin-left: 8px;
}
:host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon),
:host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) {
margin-left: -4px;
margin-right: 8px;
}
`,
{ moduleId: 'material-button' }
);
vertical-align: -13px;
}
}
:host::before,
:host::after {
content: '';
pointer-events: none;
position: absolute;
border-radius: inherit;
opacity: 0;
background-color: currentColor;
}
:host::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 0.5s;
}
:host::after {
border-radius: 50%;
width: 320px;
height: 320px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.9s;
}
[part='label'] ::slotted(*) {
vertical-align: middle;
}
:host(:hover)::before,
:host([focus-ring])::before {
opacity: 0.08;
transition-duration: 0.2s;
}
:host([active])::before {
opacity: 0.16;
transition: opacity 0.4s;
}
:host([active])::after {
transform: translate(-50%, -50%) scale(0.0000001); /* animation works weirdly with scale(0) */
opacity: 0.1;
transition: 0s;
}
:host(:hover:not([active]))::after {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
:host([disabled]) {
pointer-events: none;
color: var(--material-disabled-text-color);
}
/* Contained and outline variants */
:host([theme~='contained']),
:host([theme~='outlined']) {
padding: 8px 16px;
}
:host([theme~='outlined']) {
box-shadow: inset 0 0 0 1px var(--_material-button-outline-color, rgba(0, 0, 0, 0.2));
}
:host([theme~='contained']:not([disabled])) {
background-color: var(--material-primary-color);
color: var(--material-primary-contrast-color);
box-shadow: var(--material-shadow-elevation-2dp);
}
:host([theme~='contained'][disabled]) {
background-color: var(--material-secondary-background-color);
}
:host([theme~='contained']:hover) {
box-shadow: var(--material-shadow-elevation-4dp);
}
:host([theme~='contained'][active]) {
box-shadow: var(--material-shadow-elevation-8dp);
}
/* Icon alignment */
[part] ::slotted(vaadin-icon),
[part] ::slotted(iron-icon) {
display: block;
width: 18px;
height: 18px;
}
[part='prefix'] ::slotted(vaadin-icon),
[part='prefix'] ::slotted(iron-icon) {
margin-right: 8px;
margin-left: -4px;
}
[part='suffix'] ::slotted(vaadin-icon),
[part='suffix'] ::slotted(iron-icon) {
margin-left: 8px;
margin-right: -4px;
}
/* RTL specific styles */
:host([dir='rtl'])::before {
left: auto;
right: 0;
}
:host([dir='rtl'])::after {
left: auto;
right: 50%;
transform: translate(50%, -50%);
}
:host([active][dir='rtl'])::after {
transform: translate(50%, -50%) scale(0.0000001);
}
:host(:hover:not([active])[dir='rtl'])::after {
transform: translate(50%, -50%) scale(1);
}
:host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon),
:host([dir='rtl']) [part='prefix'] ::slotted(iron-icon) {
margin-right: -4px;
margin-left: 8px;
}
:host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon),
:host([dir='rtl']) [part='suffix'] ::slotted(iron-icon) {
margin-left: -4px;
margin-right: 8px;
}
`;

registerStyles('vaadin-button', button, { moduleId: 'material-button' });

export { button };
Loading

0 comments on commit 1ed5818

Please sign in to comment.