oppi.li
1/* based on Fomantic UI input module, with just the parts extracted that we use. If you find any
2 unused rules here after refactoring, please remove them. */
3
4.ui.input {
5 position: relative;
6 font-weight: var(--font-weight-normal);
7 display: inline-flex;
8 color: var(--color-input-text);
9}
10.ui.input > input {
11 margin: 0;
12 max-width: 100%;
13 flex: 1 0 auto;
14 outline: none;
15 font-family: var(--fonts-regular);
16 padding: 0.67857143em 1em;
17 border: 1px solid var(--color-input-border);
18 color: var(--color-input-text);
19 border-radius: 0.28571429rem;
20 line-height: var(--line-height-default);
21 text-align: start;
22}
23
24.ui.disabled.input,
25.ui.input:not(.disabled) input[disabled] {
26 opacity: var(--opacity-disabled);
27}
28.ui.disabled.input > input,
29.ui.input:not(.disabled) input[disabled] {
30 pointer-events: none;
31}
32
33.ui.input.focus > input,
34.ui.input > input:focus {
35 border-color: var(--color-primary);
36}
37
38.ui.input.error > input {
39 background: var(--color-error-bg);
40 border-color: var(--color-error-border);
41 color: var(--color-error-text);
42}
43
44.ui.icon.input > i.icon {
45 display: flex;
46 align-items: center;
47 justify-content: center;
48 cursor: default;
49 position: absolute;
50 text-align: center;
51 top: 0;
52 right: 0;
53 margin: 0;
54 height: 100%;
55 width: 2.67142857em;
56 opacity: 0.5;
57 border-radius: 0 0.28571429rem 0.28571429rem 0;
58 pointer-events: none;
59 padding: 4px;
60}
61
62.ui.icon.input > i.icon.is-loading {
63 position: absolute !important;
64 height: 28px;
65 top: 4px;
66}
67
68.ui.icon.input > i.icon.is-loading > * {
69 visibility: hidden;
70}
71
72.ui.ui.ui.ui.icon.input > textarea,
73.ui.ui.ui.ui.icon.input > input {
74 padding-right: 2.67142857em;
75}
76.ui.icon.input > i.link.icon {
77 cursor: pointer;
78}
79.ui.icon.input > i.circular.icon {
80 top: 0.35em;
81 right: 0.5em;
82}
83
84.ui[class*="left icon"].input > i.icon {
85 right: auto;
86 left: 1px;
87 border-radius: 0.28571429rem 0 0 0.28571429rem;
88}
89.ui[class*="left icon"].input > i.circular.icon {
90 right: auto;
91 left: 0.5em;
92}
93.ui.ui.ui.ui[class*="left icon"].input > textarea,
94.ui.ui.ui.ui[class*="left icon"].input > input {
95 padding-left: 2.67142857em;
96 padding-right: 1em;
97}
98
99.ui.icon.input > textarea:focus ~ .icon,
100.ui.icon.input > input:focus ~ .icon {
101 opacity: 1;
102}
103
104.ui.icon.input > textarea ~ i.icon {
105 height: 3em;
106}
107
108.ui.form .field.error > .ui.action.input > .ui.button,
109.ui.action.input.error > .ui.button {
110 border-top: 1px solid var(--color-error-border);
111 border-bottom: 1px solid var(--color-error-border);
112}
113
114.ui.action.input > .button,
115.ui.action.input > .buttons {
116 display: flex;
117 align-items: center;
118 flex: 0 0 auto;
119}
120.ui.action.input > .button,
121.ui.action.input > .buttons > .button {
122 padding-top: 0.78571429em;
123 padding-bottom: 0.78571429em;
124 margin: 0;
125}
126
127.ui.action.input:not([class*="left action"]) > input {
128 border-top-right-radius: 0;
129 border-bottom-right-radius: 0;
130 border-right-color: transparent;
131}
132
133.ui.action.input > .dropdown:first-child,
134.ui.action.input > .button:first-child,
135.ui.action.input > .buttons:first-child > .button {
136 border-radius: 0.28571429rem 0 0 0.28571429rem;
137}
138.ui.action.input > .dropdown:not(:first-child),
139.ui.action.input > .button:not(:first-child),
140.ui.action.input > .buttons:not(:first-child) > .button {
141 border-radius: 0;
142}
143.ui.action.input > .dropdown:last-child,
144.ui.action.input > .button:last-child,
145.ui.action.input > .buttons:last-child > .button {
146 border-radius: 0 0.28571429rem 0.28571429rem 0;
147}
148
149.ui.fluid.input {
150 display: flex;
151}
152.ui.fluid.input > input {
153 width: 0 !important;
154}
155
156.ui.tiny.input {
157 font-size: 0.85714286em;
158}
159.ui.small.input {
160 font-size: 0.92857143em;
161}
162
163.ui.action.input .ui.ui.button {
164 border-color: var(--color-input-border);
165 padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
166 padding-bottom: 0;
167}
168
169/* currently used for search bar dropdowns in repo search and explore code */
170.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
171 min-width: 10em;
172}
173.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus) {
174 border-right: none;
175}
176.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(.active):hover {
177 border-color: var(--color-input-border);
178}
179.ui.action.input:not([class*="left action"]) .ui.dropdown.selection.upward.visible {
180 border-bottom-left-radius: 0 !important;
181 border-bottom-right-radius: 0 !important;
182}
183.ui.action.input:not([class*="left action"]) > input,
184.ui.action.input:not([class*="left action"]) > input:hover {
185 border-right: none;
186}
187.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection,
188.ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
189.ui.action.input:not([class*="left action"]) > input:focus + .button,
190.ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
191.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
192.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
193 border-left-color: var(--color-primary);
194}
195.ui.action.input:not([class*="left action"]) > input:focus {
196 border-right-color: var(--color-primary);
197}