kolibri/packages/themes/bwst/src/components/input-radio.scss at 01314f1ad33966892c1a9e3e565ff6ced5553ddb · public-ui/kolibri · 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
94
95
96
@use '../mixins/to-rem' as *;
@use '../mixins/alert' as *;
@use '../mixins/typography' as *;
@use '../mixins/form-field' as *;
@use '../mixins/field-control' as *;
@use '../mixins/focus-outline' as *;
@use '../mixins/icon' as *;

@layer kol-theme-component {
	@include kol-icon-theme;
	@include kol-alert-theme;
	@include kol-form-field-theme;
	@include kol-field-control-theme;

	.kol-form-field {
		display: grid;
		margin: 0;
		padding: 0;
		border: 0;

		&--error {
			color: var(--color-danger);

			font-weight: 700;
		}

		&__label {
			display: inline-block;
			padding: 0;
		}

		&__input {
			gap: to-rem(4);

			&--orientation-horizontal {
				margin-top: calc(var(--spacing) / 2);
				gap: var(--spacing) calc(var(--spacing) * 2);
			}
		}
	}

	.kol-field-control {
		&__label {
			padding-top: 0.1em;
		}
	}

	.kol-input-radio {
		&__input {
			border-color: var(--color-subtle);
			border-style: solid;
			border-radius: 50%;
			border-width: 2px;

			line-height: 1.5;

			&:not(:disabled):hover {
				box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);
				border-color: var(--color-primary);
			}

			&:focus {
				outline: var(--color-primary-variant) solid to-rem(3);
				outline-offset: 2px;
				transition: 200ms outline-offset linear;

				&:hover {
					box-shadow: none;
				}
			}

			&:checked {
				&:before {
					background-color: var(--color-primary);
				}
			}

			&:disabled {
				background-color: var(--color-mute-variant);
			}
		}
	}

	.kol-input--error:focus {
		outline-color: var(--color-danger);
	}

	.kol-field-control__hint,
	.kol-form-field__hint {
		@include kol-typography-hint;
	}

	.kol-alert--type-error {
		margin-left: -0.25em;
	}
}