newspack-plugin/src/newspack-ui/scss/elements/forms/_checkbox-radio.scss at 5414d5b34e8fbfa93971763230ccf4637b6620bf · Automattic/newspack-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
.newspack-ui {
	input[type="checkbox"],
	input[type="radio"] {
		appearance: none;
		background: white;
		border: solid 1px var(--newspack-ui-color-input-border);
		box-shadow: none;
		color: white;
		cursor: pointer;
		display: inline-grid;
		font: inherit;
		height: var(--newspack-ui-spacer-4) !important;
		margin: 0;
		place-content: center;
		transition:
			background-color 125ms ease-in-out,
			border-color 125ms ease-in-out,
			outline 125ms ease-in-out;
		width: var(--newspack-ui-spacer-4) !important;

		&::before {
			content: "";
			display: block;
			opacity: 0;
		}

		&:checked {
			&::before {
				opacity: 1;
			}
		}

		&:focus {
			outline: unset;
		}

		&:focus-visible {
			outline: 2px solid var(--newspack-ui-color-neutral-90);
			outline-offset: 1px;

			&:not(:checked) {
				border: 0;
				outline-offset: -1px;
			}
		}

		&:disabled {
			cursor: not-allowed;
			opacity: 0.75;
		}
	}

	label.checkbox {
		font-size: var(--newspack-ui-font-size-s) !important;
		font-weight: normal !important;
		line-height: var(--newspack-ui-line-height-s) !important;
	}

	input[type="checkbox"] {
		border-radius: var(--newspack-ui-border-radius-2xs);

		&::before {
			background:
				transparent
				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E")
				0 0 no-repeat;
			height: var(--newspack-ui-spacer-5);
			margin: 0;
			width: var(--newspack-ui-spacer-5);
		}

		&:checked {
			background: var(--newspack-ui-color-neutral-90);
			border-color: transparent;
		}
	}

	input[type="radio"] {
		border-radius: 100%;

		&::before {
			background: var(--newspack-ui-color-neutral-0);
			border-radius: 100%;
			height: var(--newspack-ui-spacer-base);
			width: var(--newspack-ui-spacer-base);
		}

		&:checked {
			background: var(--newspack-ui-color-neutral-90);
			border-color: var(--newspack-ui-color-neutral-90);
		}
	}
}