kolibri/packages/themes/kern/src/mixins/_select.mixin.scss at fe10b60d927e3ea28378e2ecac0f79a48bb5665d · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
@use '~@public-ui/components/index' as *;
@use './input-core.mixin' as *;

@mixin kol-select {
	@include input-core;
	.kol-select {
		color: var(--kern-color-layout-text-default);
		background-color: transparent;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: var(--kern-metric-baseline-body-default-padding-top) 0 var(--kern-metric-baseline-body-default-padding-bottom);

		font-family: var(--kern-typography-font-family-default);
		font-size: var(--kern-typography-font-size-static-medium);
		font-weight: var(--kern-typography-font-weight-regular);
		line-height: var(--kern-typography-line-height-static-medium);
		letter-spacing: var(--kern-metric-space-none);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: none;
		font-style: normal;
		text-overflow: ellipsis;

		&--error {
			background: var(--kern-color-feedback-danger-background);
		}

		&:not([multiple]) {
			padding-right: calc(var(--a11y-min-size) + #{to-rem(7)});
			padding-left: to-rem(7);
		}

		&--error[multiple] &__option {
			background: var(--kern-color-feedback-danger-background);
		}

		&__option {
			background: var(--kern-color-form-input-background);

			&:checked:not(:disabled) {
				color: var(--kern-color-layout-text-default);
				background-color: rgb(from var(--kern-color-action-default) r g b / var(--kern-color-action-state-opacity-selected));
			}

			&:hover:not(:disabled) {
				background-color: rgb(from var(--kern-color-action-default) r g b / var(--kern-color-action-state-opacity-hover));
			}

			&:focus:not(:disabled),
			&:focus-visible:not(:disabled) {
				background-color: rgb(from var(--kern-color-action-default) r g b / var(--kern-color-action-state-opacity-focus));
				outline: 0;
			}

			&:active:not(:disabled) {
				background-color: rgb(from var(--kern-color-action-default) r g b / var(--kern-color-action-state-opacity-active));
			}
		}

		&[multiple] &__option {
			padding: 0 to-rem(8);

			&::before {
				margin-right: to-rem(8);
			}
		}
	}

	.kol-form-field {
		&--disabled {
			opacity: var(--kern-color-action-state-opacity-disabled);
		}
	}

	.kol-input-container {
		height: auto;
		min-height: var(--kern-metric-dimension-x-large);
		padding: 0;
		gap: var(--kern-metric-space-none);

		&__adornment--end {
			padding: 0 var(--kern-metric-space-default) 0 0;
		}

		&__adornment--start {
			padding: 0 0 0 var(--kern-metric-space-default);
		}

		&__container:not(:has(select[multiple])) {
			&::after {
				transform: translateY(-50%);
				color: var(--kern-color-action-default);
				display: inline-block;
				position: absolute;
				position: absolute;
				top: var(--kern-metric-dimension-default);
				right: var(--kern-metric-dimension-x-small);
				width: var(--kern-metric-dimension-default);
				height: var(--kern-metric-dimension-default);

				content: '\e925';
				font-family: material-symbols-subset;
				font-size: var(--kern-metric-dimension-default);
				pointer-events: none;
			}
		}
	}
}