-
Notifications
You must be signed in to change notification settings - Fork 0
/
otree-front-ext.css
131 lines (117 loc) · 2.87 KB
/
otree-front-ext.css
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/*
// This file is originally a part of https://github.com/qwiglydee/otree-advanced-demos
// SPDX-FileCopyrightText: © 2024 Maxim Vasilyev <[email protected]>
// SPDX-License-Identifier: MIT
*/
/**
* Some general style and layout enhancements
*/
:root {
--ot-fade-out-time: 150ms;
--ot-fade-in-time: 150ms;
}
/**
* Makes hidden sections to hold space and prevent content from collapsing and re-aligning
*
* @example
* <section id="foo" class="hole-space">...</section>
*
* ot.hideDisplay("foo"); // makes it blank space
*/
.hold-space[hidden] {
display: initial !important;
opacity: 0;
}
/**
* Makes elements to hide out and show up smoothly.
*
* NB: if the element is flexible/aligning (like fullscreen main) it also needs class `d-flex` to work properly
*
* To avoid initial appearence animation, put `hidden` in original html
*
* @example
* <main id="main" class="ot-fade d-flex" hidden>
* <section id="foo" class="ot-fade"> ... </section>
* </main>
*
* ot.showDisplay("main");
* ot.showDisplay("foo");
*/
.ot-fade {
opacity: 1;
transition: opacity var(--ot-fade-in-time) ease-in;
}
.ot-fade[hidden] {
display: initial !important;
opacity: 0;
transition: opacity var(--ot-fade-out-time) ease-out;
}
.ot-fade.d-flex[hidden] {
display: flex !important;
}
/**
* Makes all nested sections/divs appear on top of each other for in-place switching.
*
* @example
* <ot-stacked>
* <section id="question-1">...</section>
* <section id="question-2">...</section>
* <section id="question-2">...</section>
* </ot-stacked>
*
* ot.hideDisplays("question-*");
* ot.showDisplay("question-2");
*/
ot-stacked {
display: grid;
grid-template: "content";
}
ot-stacked > * {
grid-area: content;
z-index: 0;
}
ot-stacked > *[hidden] {
grid-area: content;
z-index: -1;
}
/** make numbers input small and right aligned */
input[type="number"] {
max-width: 10em;
text-align: right;
}
/**
* Enhancing highlight of input-group
*/
.input-group {
border: 1px solid #ced4da;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
border-radius: 0.25rem;
}
.input-group input {
border-color: #ced4da !important;
box-shadow: none !important;
}
.input-group:focus-within {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.input-group:has(.is-invalid) {
border: 1px solid #dc3545;
}
.input-group:has(.is-invalid):focus-within {
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.input-group:has(.is-valid) {
border-color: #198754;
}
.input-group:has(.is-valid):focus-within {
box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
/**
* Enhancing visibility of disabled selected inputs (apparently, with feedback color)
*/
.form-check-input.selected:disabled,
.form-check-input.selected:disabled~.form-check-label
{
opacity: 0.75;
}