keii.dev
1// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
2// See the LICENCE file in the repository root for full licence text.
3
4.input-container {
5 --label-font-size: @font-size--normal;
6 --label-line-height: 1.25;
7 --label-height: calc(
8 var(--label-font-size) * var(--label-line-height) + var(--label-padding) * 2
9 );
10 --label-colour: hsl(var(--hsl-c2));
11 --label-padding: 5px;
12 --label-pointer-events: auto;
13 --input-bg: hsl(var(--hsl-b6));
14 --input-border-colour: var(--input-border-base-colour);
15 --input-border-base-colour: transparent;
16 --input-border-hover-colour: hsl(var(--hsl-l3));
17 --input-border-focus-colour: hsl(var(--hsl-l1));
18 --input-border-error-colour: hsl(var(--hsl-red-2));
19 --input-border-error-focus-colour: hsl(var(--hsl-red-3));
20 --input-padding: var(--label-height) var(--input-padding-right)
21 var(--input-padding-base) var(--input-padding-base);
22 --input-padding-base: 10px;
23 --input-padding-right: var(--input-padding-base);
24
25 display: grid;
26 text-transform: initial;
27 font-weight: initial;
28 font-size: inherit;
29 position: relative;
30
31 margin: 0;
32 width: 100%;
33
34 &:focus-within {
35 --input-border-colour: var(--input-border-focus-colour);
36 }
37
38 &:hover {
39 --input-border-colour: var(--input-border-hover-colour);
40 }
41
42 &--2 {
43 grid-column-end: span 2;
44 }
45
46 &--4 {
47 grid-column-end: span 2;
48
49 @media @desktop {
50 grid-column-end: span 4;
51 }
52 }
53
54 &--beatmap-owner-editor {
55 --input-bg: hsl(var(--hsl-b6));
56 --input-padding: 5px;
57 }
58
59 &--error {
60 --input-border-colour: var(--input-border-error-colour);
61 --input-border-focus-colour: var(--input-border-error-focus-colour);
62 --input-border-hover-colour: var(--input-border-error-focus-colour);
63 }
64
65 &--fill {
66 flex: 1;
67 min-height: 150px;
68 }
69
70 &--genre {
71 --label-colour: hsl(var(--hsl-c1));
72 --input-bg: transparent;
73 --input-border-hover-colour: transparent;
74 --input-border-focus-colour: transparent;
75 --input-border-error-colour: transparent;
76 }
77
78 &--judging {
79 margin: 20px 0;
80 }
81
82 &--search-box {
83 font-size: @font-size--title-small-4;
84 --input-padding: 15px var(--input-padding-base);
85 }
86
87 &--select {
88 --arrow-width: calc(var(--input-padding-base) * 2 + 1em);
89 --input-padding-right: var(--arrow-width);
90 --label-pointer-events: none;
91
92 &::after {
93 .fas();
94 .center-content();
95 content: @fa-var-chevron-down;
96 width: var(--arrow-width);
97 position: absolute;
98 right: 0;
99 bottom: 0;
100 height: 100%;
101 pointer-events: none;
102 }
103 }
104
105 // Floats the label so the input can receive click event on the entire area.
106 // Mainly useful for select input to allow showing the dropdown when the
107 // label is clicked.
108 &__label {
109 display: flex;
110 justify-content: space-between;
111 color: var(--label-colour);
112 font-size: var(--label-font-size);
113 line-height: var(--label-line-height);
114 margin: 0;
115 padding: var(--label-padding) var(--input-padding-base) 0;
116 position: absolute;
117 width: 100%;
118 pointer-events: var(--label-pointer-events);
119 }
120}