Skip to content

Commit 5458aa4

Browse files
bennypowersbennypowers
committed
refactor(button): split css into modules
1 parent 617d06e commit 5458aa4

5 files changed

Lines changed: 244 additions & 237 deletions

File tree

‎elements/pf-button/pf-button-plain.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
:host([plain]) {
2+
--pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent);
3+
}
4+
5+
:host([plain]) button {
6+
--pf-c-button--after--BorderWidth: 0;
7+
--pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,
8+
var(--pf-global--Color--100, #151515));
9+
--pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color,
10+
var(--pf-global--disabled-color--200, #d2d2d2));
11+
color: var(--pf-c-button--m-plain--Color,
12+
var(--pf-global--Color--200, #6a6e73));
13+
background-color: var(--pf-c-button--m-plain--BackgroundColor,
14+
transparent);
15+
}
16+
17+
:host([plain]) button:active {
18+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,
19+
var(--pf-global--Color--100, #151515));
20+
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,
21+
tranparent);
22+
}
23+
24+
:host([plain]) button:focus {
25+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color,
26+
var(--pf-global--Color--100, #151515));
27+
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor,
28+
transparent);
29+
}
30+
31+
:host([plain]) button:hover {
32+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color,
33+
var(--pf-global--Color--100, #151515));
34+
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor,
35+
transparent);
36+
}
37+
38+
:host([plain]) :not(.hasIcon) [part=icon],
39+
:host([loading][plain]) [part=icon] {
40+
left: 16px;
41+
}
42+
43+
:host([plain]) [part=icon] {
44+
display: contents;
45+
}
46+
47+
:host([plain][disabled]),
48+
:host([plain][disabled][variant=link]) button,
49+
:host([plain][disabled]) button,
50+
:host([plain]) button[aria-disabled=true],
51+
:host([plain]) button:disabled {
52+
color: var(--pf-c-button--disabled--Color,
53+
var(--pf-c-button--m-plain--disabled--Color,
54+
var(--pf-global--disabled--color--200, #d2d2d2)));
55+
}
56+
57+
:host(:not([plain])) .hasIcon [part=icon] {
58+
--pf-icon--size: 16px;
59+
position: relative;
60+
}
61+

‎elements/pf-button/pf-button-tokens.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
:host {
2+
--pf-c-button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
3+
--pf-c-button--PaddingRight: var(--pf-global--spacer--md, 1rem);
4+
--pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
5+
--pf-c-button--PaddingLeft: var(--pf-global--spacer--md, 1rem);
6+
--pf-c-button--LineHeight: var(--pf-global--LineHeight--md, 1.5);
7+
--pf-c-button--FontWeight: var(--pf-global--FontWeight--normal, 400);
8+
--pf-c-button--FontSize: var(--pf-global--FontSize--md, 1rem);
9+
--pf-c-button--BackgroundColor: transparent;
10+
--pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
11+
--pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
12+
--pf-c-button--after--BorderColor: transparent;
13+
--pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
14+
--pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
15+
--pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
16+
--pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
17+
--pf-c-button--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
18+
--pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
19+
--pf-c-button--disabled--after--BorderColor: transparent;
20+
--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);
21+
--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100, #fff);
22+
--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);
23+
--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100, #fff);
24+
--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);
25+
--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100, #fff);
26+
--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);
27+
--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100, #fff);
28+
--pf-c-button--m-secondary--BackgroundColor: transparent;
29+
--pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100, #06c);
30+
--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100, #06c);
31+
--pf-c-button--m-secondary--hover--BackgroundColor: transparent;
32+
--pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100, #06c);
33+
--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100, #06c);
34+
--pf-c-button--m-secondary--focus--BackgroundColor: transparent;
35+
--pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100, #06c);
36+
--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100, #06c);
37+
--pf-c-button--m-secondary--active--BackgroundColor: transparent;
38+
--pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100, #06c);
39+
--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100, #06c);
40+
--pf-c-button--m-secondary--m-danger--BackgroundColor: transparent;
41+
--pf-c-button--m-secondary--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);
42+
--pf-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
43+
--pf-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
44+
--pf-c-button--m-secondary--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);
45+
--pf-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
46+
--pf-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
47+
--pf-c-button--m-secondary--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);
48+
--pf-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
49+
--pf-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
50+
--pf-c-button--m-secondary--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);
51+
--pf-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);
52+
--pf-c-button--m-tertiary--BackgroundColor: transparent;
53+
--pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--Color--100, #151515);
54+
--pf-c-button--m-tertiary--Color: var(--pf-global--Color--100, #151515);
55+
--pf-c-button--m-tertiary--hover--BackgroundColor: transparent;
56+
--pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--Color--100, #151515);
57+
--pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100, #151515);
58+
--pf-c-button--m-tertiary--focus--BackgroundColor: transparent;
59+
--pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--Color--100, #151515);
60+
--pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100, #151515);
61+
--pf-c-button--m-tertiary--active--BackgroundColor: transparent;
62+
--pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--Color--100, #151515);
63+
--pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100, #151515);
64+
--pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
65+
--pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100, #151515);
66+
--pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);
67+
--pf-c-button--m-warning--hover--Color: var(--pf-global--Color--dark-100, #151515);
68+
--pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);
69+
--pf-c-button--m-warning--focus--Color: var(--pf-global--Color--dark-100, #151515);
70+
--pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);
71+
--pf-c-button--m-warning--active--Color: var(--pf-global--Color--dark-100, #151515);
72+
--pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
73+
--pf-c-button--m-danger--Color: var(--pf-global--Color--light-100, #fff);
74+
--pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200, #a30000);
75+
--pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100, #fff);
76+
--pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200, #a30000);
77+
--pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100, #fff);
78+
--pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200, #a30000);
79+
--pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100, #fff);
80+
--pf-c-button--m-link--BackgroundColor: transparent;
81+
--pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);
82+
--pf-c-button--m-link--hover--BackgroundColor: transparent;
83+
--pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover, #004080);
84+
--pf-c-button--m-link--focus--BackgroundColor: transparent;
85+
--pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover, #004080);
86+
--pf-c-button--m-link--active--BackgroundColor: transparent;
87+
--pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover, #004080);
88+
--pf-c-button--m-link--disabled--BackgroundColor: transparent;
89+
--pf-c-button--m-link--m-inline--FontSize: inherit;
90+
--pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover, underline);
91+
--pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover, #004080);
92+
--pf-c-button--m-link--m-inline--PaddingTop: 0;
93+
--pf-c-button--m-link--m-inline--PaddingRight: 0;
94+
--pf-c-button--m-link--m-inline--PaddingBottom: 0;
95+
--pf-c-button--m-link--m-inline--PaddingLeft: 0;
96+
--pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs, 0.25rem);
97+
--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm, 0.5rem));
98+
--pf-c-button--m-link--m-danger--BackgroundColor: transparent;
99+
--pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);
100+
--pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
101+
--pf-c-button--m-link--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);
102+
--pf-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
103+
--pf-c-button--m-link--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);
104+
--pf-c-button--m-link--m-danger--active--BackgroundColor: transparent;
105+
--pf-c-button--m-link--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);
106+
--pf-c-button--m-plain--BackgroundColor: transparent;
107+
--pf-c-button--m-plain--Color: var(--pf-global--Color--200, #6a6e73);
108+
--pf-c-button--m-plain--hover--BackgroundColor: transparent;
109+
--pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100, #151515);
110+
--pf-c-button--m-plain--focus--BackgroundColor: transparent;
111+
--pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100, #151515);
112+
--pf-c-button--m-plain--active--BackgroundColor: transparent;
113+
--pf-c-button--m-plain--active--Color: var(--pf-global--Color--100, #151515);
114+
--pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
115+
--pf-c-button--m-plain--disabled--BackgroundColor: transparent;
116+
--pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
117+
--pf-c-button--m-control--Color: var(--pf-global--Color--100, #151515);
118+
--pf-c-button--m-control--BorderRadius: 0;
119+
--pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
120+
--pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
121+
--pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
122+
--pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
123+
--pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
124+
--pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
125+
--pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
126+
--pf-c-button--m-control--hover--Color: var(--pf-global--Color--100, #151515);
127+
--pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
128+
--pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
129+
--pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
130+
--pf-c-button--m-control--active--Color: var(--pf-global--Color--100, #151515);
131+
--pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
132+
--pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
133+
--pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
134+
--pf-c-button--m-control--focus--Color: var(--pf-global--Color--100, #151515);
135+
--pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
136+
--pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
137+
--pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
138+
--pf-c-button--m-control--m-expanded--Color: var(--pf-global--Color--100, #151515);
139+
--pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
140+
--pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);
141+
--pf-c-button--m-small--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
142+
--pf-c-button--m-display-lg--PaddingTop: var(--pf-global--spacer--md, 1rem);
143+
--pf-c-button--m-display-lg--PaddingRight: var(--pf-global--spacer--xl, 2rem);
144+
--pf-c-button--m-display-lg--PaddingBottom: var(--pf-global--spacer--md, 1rem);
145+
--pf-c-button--m-display-lg--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
146+
--pf-c-button--m-display-lg--FontWeight: var(--pf-global--FontWeight--bold, 700);
147+
--pf-c-button--m-link--m-display-lg--FontSize: var(--pf-global--FontSize--lg, 1.125rem);
148+
--pf-c-button__icon--m-start--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
149+
--pf-c-button__icon--m-end--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
150+
--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem));
151+
--pf-c-button__progress--Opacity: 0;
152+
--pf-c-button__progress--TranslateY: -50%;
153+
--pf-c-button__progress--TranslateX: 0;
154+
--pf-c-button__progress--Top: 50%;
155+
--pf-c-button__progress--Left: var(--pf-global--spacer--md, 1rem);
156+
--pf-c-button--m-progress--TransitionProperty: padding;
157+
--pf-c-button--m-progress--TransitionDuration: var(--pf-global--TransitionDuration, 250ms);
158+
--pf-c-button--m-progress--PaddingRight: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);
159+
--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);
160+
--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md, 1rem);
161+
--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width));
162+
--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100, #06c);
163+
--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
164+
--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
165+
--pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
166+
--pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100, #151515);
167+
--pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
168+
--pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
169+
--pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
170+
}

0 commit comments

Comments
 (0)