← All changes | css/common/_switch.scss +32 -17 4.0.0-beta.1 → trunk View file →

		@@ -1,8 +1,6 @@
1	1	@use 'theme';
2	2
3		-$off-color: #789;
4		-
5	3	.snippet-execution-button,
6	4	.snippet-activation-switch,
7	5	input[type='checkbox'].switch {
8	6	display: block;
		@@ -8,8 +6,10 @@
8	6	display: block;
9	7	position: relative;
10	8	}
11	9
	10	+// Activation switch: an accent-coloured 36x19 pill shared by the list-table
	11	+// activate column, snippet cards and settings toggles.
12	12	.snippet-activation-switch,
13	13	input[type='checkbox'].switch {
14	14	appearance: none;
15	15	outline: 0;
		@@ -14,13 +14,13 @@
14	14	appearance: none;
15	15	outline: 0;
16	16	cursor: pointer;
17	17	margin: 0;
18		- inline-size: 32px;
	18	+ inline-size: 36px;
19	19	block-size: 19px;
20		- border-radius: 34px;
	20	+ border-radius: 999px;
21	21	text-align: start;
22		- border: 1px solid $off-color;
	22	+ border: 1px solid var(--cs-color-accent);
23	23	box-sizing: border-box;
24	24
25	25	&::before {
26	26	transition: all .1s;
		@@ -27,9 +27,9 @@
27	27	content: '';
28	28	block-size: 13px;
29	29	inline-size: 13px;
30	30	display: inline-block;
31		- background-color: $off-color;
	31	+ background-color: var(--cs-color-accent);
32	32	border-radius: 50%;
33	33	margin: 2px;
34	34
35	35	@media (prefers-reduced-motion: reduce) {
		@@ -35,17 +35,26 @@
35	35	@media (prefers-reduced-motion: reduce) {
36	36	transition-duration: 0.01s;
37	37	}
38	38	}
	39	+
	40	+ &:focus {
	41	+ box-shadow: none;
	42	+ }
	43	+
	44	+ &:focus-visible {
	45	+ outline: 2px solid var(--cs-color-accent);
	46	+ }
39	47	}
40	48
41	49	.active-snippet .snippet-activation-switch,
42	50	input[type='checkbox'].switch:checked {
43		- background-color: #0073aa;
	51	+ background-color: var(--cs-color-accent);
44	52
	53	+ // Travel distance: pill width minus the knob, its margins and the borders.
45	54	&::before {
46		- background-color: white;
47		- transform: translateX(calc(100% * var(--cs-direction-multiplier)));
	55	+ background-color: #fff;
	56	+ transform: translateX(calc((100% + 4px) * var(--cs-direction-multiplier)));
48	57	}
49	58	}
50	59
51	60	.erroneous-snippet .snippet-activation-switch::before {
		@@ -53,9 +62,9 @@
53	62	transform: translateX(calc(50% * var(--cs-direction-multiplier)));
54	63	text-align: center;
55	64	font-weight: bold;
56	65	line-height: 1;
57		- color: #1d2327;
	66	+ color: var(--cs-color-text);
58	67	}
59	68
60	69	a.snippet-condition-count {
61	70	border-radius: 50%;
		@@ -67,14 +76,14 @@
67	76	align-items: center;
68	77	box-sizing: border-box;
69	78
70	79	.inactive-snippet & {
71		- color: #ccc;
	80	+ color: var(--cs-color-border);
72	81	}
73	82
74	83	.active-snippet & {
75	84	font-weight: bold;
76		- color: theme.$accent;
	85	+ color: var(--cs-color-accent);
77	86	}
78	87	}
79	88
80	89	.snippet-execution-button {
		@@ -82,25 +91,26 @@
82	91	margin-block-start: 9px;
83	92	inline-size: 0;
84	93	block-size: 0;
85	94	border-block: 9px solid transparent;
86		- border-inline-start: 10px solid #ccc;
	95	+ border-inline-start: 10px solid var(--cs-color-border);
87	96
88	97	&::before {
89	98	content: '';
90	99	position: absolute;
91		- inset: -14px -8px -14px -21px;
	100	+ inset-block: -14px;
	101	+ inset-inline: -21px -8px;
92	102	border-radius: 50%;
93		- border: 1.8px solid #ccc;
	103	+ border: 1.8px solid var(--cs-color-border);
94	104	z-index: 2;
95	105	}
96	106
97	107	&:hover {
98		- border-inline-start-color: theme.$accent;
	108	+ border-inline-start-color: var(--cs-color-accent);
99	109	transition: border-inline-start-color 0.6s;
100	110
101	111	&::before {
102		- border-color: theme.$accent;
	112	+ border-color: var(--cs-color-accent);
103	113	transition: border-color 0.6s;
104	114	}
105	115
106	116	@media (prefers-reduced-motion: reduce) {
		@@ -110,5 +120,10 @@
110	120	transition-duration: 0.01s;
111	121	}
112	122	}
113	123	}
	124	+}
	125	+
	126	+.code-snippets-card .snippet-execution-button {
	127	+ margin-block-start: 0;
	128	+ margin-inline-end: 9px;
114	129	}