jetpack / modules / calypsoify / gutenberg-styles / button.scss

button.scss in Jetpack – WP Security, Backup, Speed, & Growth 7.6.2, at modules/calypsoify/gutenberg-styles/button.scss

144 lines 2.7 KB

Raw Download Zip

1	.components-button {
2	&.is-default {
3	color: $muriel-gray-700;
4	border-color: $muriel-gray-100;
5	background: $white;
6	box-shadow: none;
7	border-width: 1px 1px 2px;
8
9	&:hover {
10	background: $white;
11	border-color: $muriel-gray-200;
12	box-shadow: none;
13	color: $muriel-gray-700;
14	}
15
16	&:focus:enabled {
17	background: $white;
18	color: $muriel-gray-700;
19	border-color: $color-primary;
20	box-shadow: 0 0 0 2px $color-primary-light;
21	}
22
23	&:active:enabled {
24	background: $white;
25	border-color: $muriel-gray-100;
26	border-width: 2px 1px 1px;
27	box-shadow: none;
28	}
29
30	&:disabled,
31	&[aria-disabled='true']='true'] {
32	color: $muriel-gray-50;
33	background-color: $white;
34	border-color: $muriel-gray-50;
35	text-shadow: none;
36	}
37	}
38
39	&.is-primary {
40	background: $color-accent;
41	border-color: $color-accent-dark;
42	box-shadow: none;
43	color: $white;
44	text-shadow: none;
45
46	&:focus:enabled {
47	background: $muriel-hot-pink-400;
48	border-color: $color-accent;
49	color: $white;
50	box-shadow: 0 0 0 2px $color-accent-light;
51	}
52
53	&:hover {
54	box-shadow: none;
55	background: $muriel-hot-pink-400;
56	border-color: $color-accent-dark;
57	color: $white;
58	}
59
60	&:focus:enabled {
61	box-shadow: 0 0 0 2px $color-accent-light;
62	}
63
64	&:active:enabled {
65	background: $muriel-hot-pink-400;
66	border-color: $color-accent-dark;
67	box-shadow: inset 0 1px 0 $color-accent-dark;
68	}
69
70	&:disabled,
71	&[aria-disabled='true']='true'] {
72	color: $muriel-gray-50;
73	background: $white;
74	border-color: $muriel-gray-50;
75	text-shadow: none;
76
77	&:hover,
78	&:focus,
79	&:active {
80	color: $muriel-gray-50;
81	background-color: $white;
82	border-color: $muriel-gray-50;
83	box-shadow: none;
84	}
85	}
86
87	&.is-busy,
88	&.is-busy:disabled,
89	&.is-busy[aria-disabled='true']='true'] {
90	background-image: linear-gradient(
91	-45deg,
92	$color-accent 28%,
93	$muriel-hot-pink-600 28%,
94	$muriel-hot-pink-600 72%,
95	$color-accent 72%
96	);
97	border-color: $color-accent-dark;
98	}
99	}
100
101	/* Buttons that look like links, for a cross of good semantics with the visual */
102	&.is-link {
103	color: $color-link;
104
105	&:hover,
106	&:active {
107	color: $color-link-dark;
108	}
109
110	&:focus {
111	color: $color-link-dark;
112	box-shadow: 0 0 0 2px $color-primary-light;
113	}
114	}
115
116	/* Link buttons that are red to indicate destructive behavior. */
117	&.is-link.is-destructive {
118	color: $alert-red;
119	}
120
121	&:focus:enabled {
122	// @include button-style__focus-active;
123	}
124
125	&.is-busy {
126	background-image: repeating-linear-gradient(
127	-45deg,
128	$muriel-gray-500,
129	$white 11px,
130	$white 10px,
131	$muriel-gray-500 20px
132	);
133	}
134
135	// Buttons that are text-based.
136	&.is-tertiary {
137	color: $color-link;
138
139	&:not( :disabled ):not( [aria-disabled='true'] ):not( .is-default ):hover {
140	color: $color-link-dark;
141	}
142	}
143	}
144