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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
@use "./abstract/_members" as *
.cache-toggle
cursor: pointer
.side-panel
background-color: #fff
padding: 0.3em
width: 28%
top: 3.7em
position: fixed
.corpus-doc-view
.annotated-field-wrapper
.annotated-field-runs
max-height: 200px
overflow-y: scroll
.list-group
.list-group-item-heading
display: inline-block
width: 60px
@include right-handed
left: 70%
.header
float: right
@include left-handed
left: 2%
.header
float: left
.simple-layout
height: 100%
.license
padding-top: 10px
.spinner
position: absolute
left: 50%
top: 50%
.table
tr
td
color: #005a9aff
.active
font-weight: bold
text-decoration: underline
.ngrams-selector
display: flex
.ngrams-chooser
padding: 3px
.trash
text-decoration: line-through
.action-search
margin: 10px
.context-menu
position: fixed
.search-bar
margin: 10px
/* */
.body
ul
li
color: #005a9aff
.nav
color: #005a9aff
.btn-primary
color: white
background-color: #005a9aff
border-color: black
ul
.nav
color: #005a9aff
li
color: #005a9aff
.frame
height: 100vh
iframe
border: 0
.join-button
padding-bottom: 100px
padding-top: 100px
// Add pointer to Bootstrap Select
select.form-control
cursor: pointer
#app
width: 100%
.router-inner
display: flex
&.left-handed
flex-direction: row
&.right-handed
flex-direction: row
.main-page
$self: &
$page-padding: space-x(3) space-x(4)
$topbar-height: 56px // ~ unworthy empirical value (@TODO topbar height calculation)
flex-grow: 1 // quick workaround, stretching block when subjected to flex API
&__main-row
display: flex
&--with-y-tiles
#{ $self }__main-route
width: 60%
#{ $self }__vertical-tiles
width: 40%
&--only-y-tiles
// ensure minimum height, so that the border delimiting "main route" and
// its "vertical tiles" will not end abruptly
min-height: calc( 100vh - #{ $topbar-height })
// main route ~ main tile
&__main-route
padding: $page-padding
width: 100%
// optional vertical tiles ~ y axis column
&__vertical-tiles
display: flex
flex-direction: column
// optional horizontal tiles ~ x axis row
&__horizontal-tiles
display: flex
flex-direction: row
// dynamic width according to number of tiles
@for $i from 1 through 10
&--#{ $i } .tile-block
width: calc( 100% / #{ $i })
.tile-block
$tile-padding: space-x(0.5) space-x(2) space-x(1.5)
&__header
display: flex
@include right-handed
justify-content: flex-end
@include left-handed
justify-content: flex-start
&__body
padding: $tile-padding
.action-upload-button
$spinner-size: 23px // @TODO use futur bootstrap button deferred status here
$spinner-left-offset: -32px
$spinner-top-offset: 6px
position: relative
&__spinner
position: absolute
width: $spinner-size
height: $spinner-size
left: $spinner-left-offset
top: $spinner-top-offset