`s.
5 |
6 | .nav {
7 | display: flex;
8 | flex-wrap: wrap;
9 | padding-left: 0;
10 | margin-bottom: 0;
11 | list-style: none;
12 | }
13 |
14 | .nav-link {
15 | display: block;
16 | padding: $nav-link-padding-y $nav-link-padding-x;
17 |
18 | @include hover-focus {
19 | text-decoration: none;
20 | }
21 |
22 | // Disabled state lightens text
23 | &.disabled {
24 | color: $nav-link-disabled-color;
25 | pointer-events: none;
26 | cursor: default;
27 | }
28 | }
29 |
30 | //
31 | // Tabs
32 | //
33 |
34 | .nav-tabs {
35 | border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
36 |
37 | .nav-item {
38 | margin-bottom: -$nav-tabs-border-width;
39 | }
40 |
41 | .nav-link {
42 | border: $nav-tabs-border-width solid transparent;
43 | @include border-top-radius($nav-tabs-border-radius);
44 |
45 | @include hover-focus {
46 | border-color: $nav-tabs-link-hover-border-color;
47 | }
48 |
49 | &.disabled {
50 | color: $nav-link-disabled-color;
51 | background-color: transparent;
52 | border-color: transparent;
53 | }
54 | }
55 |
56 | .nav-link.active,
57 | .nav-item.show .nav-link {
58 | color: $nav-tabs-link-active-color;
59 | background-color: $nav-tabs-link-active-bg;
60 | border-color: $nav-tabs-link-active-border-color;
61 | }
62 |
63 | .dropdown-menu {
64 | // Make dropdown border overlap tab border
65 | margin-top: -$nav-tabs-border-width;
66 | // Remove the top rounded corners here since there is a hard edge above the menu
67 | @include border-top-radius(0);
68 | }
69 | }
70 |
71 |
72 | //
73 | // Pills
74 | //
75 |
76 | .nav-pills {
77 | .nav-link {
78 | @include border-radius($nav-pills-border-radius);
79 | }
80 |
81 | .nav-link.active,
82 | .show > .nav-link {
83 | color: $nav-pills-link-active-color;
84 | background-color: $nav-pills-link-active-bg;
85 | }
86 | }
87 |
88 |
89 | //
90 | // Justified variants
91 | //
92 |
93 | .nav-fill {
94 | .nav-item {
95 | flex: 1 1 auto;
96 | text-align: center;
97 | }
98 | }
99 |
100 | .nav-justified {
101 | .nav-item {
102 | flex-basis: 0;
103 | flex-grow: 1;
104 | text-align: center;
105 | }
106 | }
107 |
108 |
109 | // Tabbable tabs
110 | //
111 | // Hide tabbable panes to start, show them when `.active`
112 |
113 | .tab-content {
114 | > .tab-pane {
115 | display: none;
116 | }
117 | > .active {
118 | display: block;
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_navbar.scss:
--------------------------------------------------------------------------------
1 | // Contents
2 | //
3 | // Navbar
4 | // Navbar brand
5 | // Navbar nav
6 | // Navbar text
7 | // Navbar divider
8 | // Responsive navbar
9 | // Navbar position
10 | // Navbar themes
11 |
12 |
13 | // Navbar
14 | //
15 | // Provide a static navbar from which we expand to create full-width, fixed, and
16 | // other navbar variations.
17 |
18 | .navbar {
19 | position: relative;
20 | display: flex;
21 | flex-wrap: wrap; // allow us to do the line break for collapsing content
22 | align-items: center;
23 | justify-content: space-between; // space out brand from logo
24 | padding: $navbar-padding-y $navbar-padding-x;
25 |
26 | // Because flex properties aren't inherited, we need to redeclare these first
27 | // few properties so that content nested within behave properly.
28 | > .container,
29 | > .container-fluid {
30 | display: flex;
31 | flex-wrap: wrap;
32 | align-items: center;
33 | justify-content: space-between;
34 | }
35 | }
36 |
37 |
38 | // Navbar brand
39 | //
40 | // Used for brand, project, or site names.
41 |
42 | .navbar-brand {
43 | display: inline-block;
44 | padding-top: $navbar-brand-padding-y;
45 | padding-bottom: $navbar-brand-padding-y;
46 | margin-right: $navbar-padding-x;
47 | font-size: $navbar-brand-font-size;
48 | line-height: inherit;
49 | white-space: nowrap;
50 |
51 | @include hover-focus {
52 | text-decoration: none;
53 | }
54 | }
55 |
56 |
57 | // Navbar nav
58 | //
59 | // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
60 |
61 | .navbar-nav {
62 | display: flex;
63 | flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
64 | padding-left: 0;
65 | margin-bottom: 0;
66 | list-style: none;
67 |
68 | .nav-link {
69 | padding-right: 0;
70 | padding-left: 0;
71 | }
72 |
73 | .dropdown-menu {
74 | position: static;
75 | float: none;
76 | }
77 | }
78 |
79 |
80 | // Navbar text
81 | //
82 | //
83 |
84 | .navbar-text {
85 | display: inline-block;
86 | padding-top: $nav-link-padding-y;
87 | padding-bottom: $nav-link-padding-y;
88 | }
89 |
90 |
91 | // Responsive navbar
92 | //
93 | // Custom styles for responsive collapsing and toggling of navbar contents.
94 | // Powered by the collapse Bootstrap JavaScript plugin.
95 |
96 | // When collapsed, prevent the toggleable navbar contents from appearing in
97 | // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
98 | // on the `.navbar` parent.
99 | .navbar-collapse {
100 | flex-basis: 100%;
101 | flex-grow: 1;
102 | // For always expanded or extra full navbars, ensure content aligns itself
103 | // properly vertically. Can be easily overridden with flex utilities.
104 | align-items: center;
105 | }
106 |
107 | // Button for toggling the navbar when in its collapsed state
108 | .navbar-toggler {
109 | padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
110 | font-size: $navbar-toggler-font-size;
111 | line-height: 1;
112 | background-color: transparent; // remove default button style
113 | border: $border-width solid transparent; // remove default button style
114 | @include border-radius($navbar-toggler-border-radius);
115 |
116 | @include hover-focus {
117 | text-decoration: none;
118 | }
119 |
120 | // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
121 | &:not(:disabled):not(.disabled) {
122 | cursor: pointer;
123 | }
124 | }
125 |
126 | // Keep as a separate element so folks can easily override it with another icon
127 | // or image file as needed.
128 | .navbar-toggler-icon {
129 | display: inline-block;
130 | width: 1.5em;
131 | height: 1.5em;
132 | vertical-align: middle;
133 | content: "";
134 | background: no-repeat center center;
135 | background-size: 100% 100%;
136 | }
137 |
138 | // Generate series of `.navbar-expand-*` responsive classes for configuring
139 | // where your navbar collapses.
140 | .navbar-expand {
141 | @each $breakpoint in map-keys($grid-breakpoints) {
142 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
143 | $infix: breakpoint-infix($next, $grid-breakpoints);
144 |
145 | &#{$infix} {
146 | @include media-breakpoint-down($breakpoint) {
147 | > .container,
148 | > .container-fluid {
149 | padding-right: 0;
150 | padding-left: 0;
151 | }
152 | }
153 |
154 | @include media-breakpoint-up($next) {
155 | flex-flow: row nowrap;
156 | justify-content: flex-start;
157 |
158 | .navbar-nav {
159 | flex-direction: row;
160 |
161 | .dropdown-menu {
162 | position: absolute;
163 | }
164 |
165 | .nav-link {
166 | padding-right: $navbar-nav-link-padding-x;
167 | padding-left: $navbar-nav-link-padding-x;
168 | }
169 | }
170 |
171 | // For nesting containers, have to redeclare for alignment purposes
172 | > .container,
173 | > .container-fluid {
174 | flex-wrap: nowrap;
175 | }
176 |
177 | .navbar-collapse {
178 | display: flex !important; // stylelint-disable-line declaration-no-important
179 |
180 | // Changes flex-bases to auto because of an IE10 bug
181 | flex-basis: auto;
182 | }
183 |
184 | .navbar-toggler {
185 | display: none;
186 | }
187 | }
188 | }
189 | }
190 | }
191 |
192 |
193 | // Navbar themes
194 | //
195 | // Styles for switching between navbars with light or dark background.
196 |
197 | // Dark links against a light background
198 | .navbar-light {
199 | .navbar-brand {
200 | color: $navbar-light-brand-color;
201 |
202 | @include hover-focus {
203 | color: $navbar-light-brand-hover-color;
204 | }
205 | }
206 |
207 | .navbar-nav {
208 | .nav-link {
209 | color: $navbar-light-color;
210 |
211 | @include hover-focus {
212 | color: $navbar-light-hover-color;
213 | }
214 |
215 | &.disabled {
216 | color: $navbar-light-disabled-color;
217 | }
218 | }
219 |
220 | .show > .nav-link,
221 | .active > .nav-link,
222 | .nav-link.show,
223 | .nav-link.active {
224 | color: $navbar-light-active-color;
225 | }
226 | }
227 |
228 | .navbar-toggler {
229 | color: $navbar-light-color;
230 | border-color: $navbar-light-toggler-border-color;
231 | }
232 |
233 | .navbar-toggler-icon {
234 | background-image: $navbar-light-toggler-icon-bg;
235 | }
236 |
237 | .navbar-text {
238 | color: $navbar-light-color;
239 | a {
240 | color: $navbar-light-active-color;
241 |
242 | @include hover-focus {
243 | color: $navbar-light-active-color;
244 | }
245 | }
246 | }
247 | }
248 |
249 | // White links against a dark background
250 | .navbar-dark {
251 | .navbar-brand {
252 | color: $navbar-dark-brand-color;
253 |
254 | @include hover-focus {
255 | color: $navbar-dark-brand-hover-color;
256 | }
257 | }
258 |
259 | .navbar-nav {
260 | .nav-link {
261 | color: $navbar-dark-color;
262 |
263 | @include hover-focus {
264 | color: $navbar-dark-hover-color;
265 | }
266 |
267 | &.disabled {
268 | color: $navbar-dark-disabled-color;
269 | }
270 | }
271 |
272 | .show > .nav-link,
273 | .active > .nav-link,
274 | .nav-link.show,
275 | .nav-link.active {
276 | color: $navbar-dark-active-color;
277 | }
278 | }
279 |
280 | .navbar-toggler {
281 | color: $navbar-dark-color;
282 | border-color: $navbar-dark-toggler-border-color;
283 | }
284 |
285 | .navbar-toggler-icon {
286 | background-image: $navbar-dark-toggler-icon-bg;
287 | }
288 |
289 | .navbar-text {
290 | color: $navbar-dark-color;
291 | a {
292 | color: $navbar-dark-active-color;
293 |
294 | @include hover-focus {
295 | color: $navbar-dark-active-color;
296 | }
297 | }
298 | }
299 | }
300 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_pagination.scss:
--------------------------------------------------------------------------------
1 | .pagination {
2 | display: flex;
3 | @include list-unstyled();
4 | @include border-radius();
5 | }
6 |
7 | .page-link {
8 | position: relative;
9 | display: block;
10 | padding: $pagination-padding-y $pagination-padding-x;
11 | margin-left: -$pagination-border-width;
12 | line-height: $pagination-line-height;
13 | color: $pagination-color;
14 | background-color: $pagination-bg;
15 | border: $pagination-border-width solid $pagination-border-color;
16 |
17 | &:hover {
18 | z-index: 2;
19 | color: $pagination-hover-color;
20 | text-decoration: none;
21 | background-color: $pagination-hover-bg;
22 | border-color: $pagination-hover-border-color;
23 | }
24 |
25 | &:focus {
26 | z-index: 2;
27 | outline: $pagination-focus-outline;
28 | box-shadow: $pagination-focus-box-shadow;
29 | }
30 |
31 | // Opinionated: add "hand" cursor to non-disabled .page-link elements
32 | &:not(:disabled):not(.disabled) {
33 | cursor: pointer;
34 | }
35 | }
36 |
37 | .page-item {
38 | &:first-child {
39 | .page-link {
40 | margin-left: 0;
41 | @include border-left-radius($border-radius);
42 | }
43 | }
44 | &:last-child {
45 | .page-link {
46 | @include border-right-radius($border-radius);
47 | }
48 | }
49 |
50 | &.active .page-link {
51 | z-index: 1;
52 | color: $pagination-active-color;
53 | background-color: $pagination-active-bg;
54 | border-color: $pagination-active-border-color;
55 | }
56 |
57 | &.disabled .page-link {
58 | color: $pagination-disabled-color;
59 | pointer-events: none;
60 | // Opinionated: remove the "hand" cursor set previously for .page-link
61 | cursor: auto;
62 | background-color: $pagination-disabled-bg;
63 | border-color: $pagination-disabled-border-color;
64 | }
65 | }
66 |
67 |
68 | //
69 | // Sizing
70 | //
71 |
72 | .pagination-lg {
73 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
74 | }
75 |
76 | .pagination-sm {
77 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
78 | }
79 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_popover.scss:
--------------------------------------------------------------------------------
1 | .popover {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | z-index: $zindex-popover;
6 | display: block;
7 | max-width: $popover-max-width;
8 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9 | // So reset our font and text properties to avoid inheriting weird values.
10 | @include reset-text();
11 | font-size: $popover-font-size;
12 | // Allow breaking very long words so they don't overflow the popover's bounds
13 | word-wrap: break-word;
14 | background-color: $popover-bg;
15 | background-clip: padding-box;
16 | border: $popover-border-width solid $popover-border-color;
17 | @include border-radius($popover-border-radius);
18 | @include box-shadow($popover-box-shadow);
19 |
20 | .arrow {
21 | position: absolute;
22 | display: block;
23 | width: $popover-arrow-width;
24 | height: $popover-arrow-height;
25 | margin: 0 $border-radius-lg;
26 |
27 | &::before,
28 | &::after {
29 | position: absolute;
30 | display: block;
31 | content: "";
32 | border-color: transparent;
33 | border-style: solid;
34 | }
35 | }
36 | }
37 |
38 | .bs-popover-top {
39 | margin-bottom: $popover-arrow-height;
40 |
41 | .arrow {
42 | bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
43 | }
44 |
45 | .arrow::before,
46 | .arrow::after {
47 | border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
48 | }
49 |
50 | .arrow::before {
51 | bottom: 0;
52 | border-top-color: $popover-arrow-outer-color;
53 | }
54 |
55 | .arrow::after {
56 | bottom: $popover-border-width;
57 | border-top-color: $popover-arrow-color;
58 | }
59 | }
60 |
61 | .bs-popover-right {
62 | margin-left: $popover-arrow-height;
63 |
64 | .arrow {
65 | left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
66 | width: $popover-arrow-height;
67 | height: $popover-arrow-width;
68 | margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
69 | }
70 |
71 | .arrow::before,
72 | .arrow::after {
73 | border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
74 | }
75 |
76 | .arrow::before {
77 | left: 0;
78 | border-right-color: $popover-arrow-outer-color;
79 | }
80 |
81 | .arrow::after {
82 | left: $popover-border-width;
83 | border-right-color: $popover-arrow-color;
84 | }
85 | }
86 |
87 | .bs-popover-bottom {
88 | margin-top: $popover-arrow-height;
89 |
90 | .arrow {
91 | top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
92 | }
93 |
94 | .arrow::before,
95 | .arrow::after {
96 | border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
97 | }
98 |
99 | .arrow::before {
100 | top: 0;
101 | border-bottom-color: $popover-arrow-outer-color;
102 | }
103 |
104 | .arrow::after {
105 | top: $popover-border-width;
106 | border-bottom-color: $popover-arrow-color;
107 | }
108 |
109 | // This will remove the popover-header's border just below the arrow
110 | .popover-header::before {
111 | position: absolute;
112 | top: 0;
113 | left: 50%;
114 | display: block;
115 | width: $popover-arrow-width;
116 | margin-left: -$popover-arrow-width / 2;
117 | content: "";
118 | border-bottom: $popover-border-width solid $popover-header-bg;
119 | }
120 | }
121 |
122 | .bs-popover-left {
123 | margin-right: $popover-arrow-height;
124 |
125 | .arrow {
126 | right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
127 | width: $popover-arrow-height;
128 | height: $popover-arrow-width;
129 | margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
130 | }
131 |
132 | .arrow::before,
133 | .arrow::after {
134 | border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
135 | }
136 |
137 | .arrow::before {
138 | right: 0;
139 | border-left-color: $popover-arrow-outer-color;
140 | }
141 |
142 | .arrow::after {
143 | right: $popover-border-width;
144 | border-left-color: $popover-arrow-color;
145 | }
146 | }
147 |
148 | .bs-popover-auto {
149 | &[x-placement^="top"] {
150 | @extend .bs-popover-top;
151 | }
152 | &[x-placement^="right"] {
153 | @extend .bs-popover-right;
154 | }
155 | &[x-placement^="bottom"] {
156 | @extend .bs-popover-bottom;
157 | }
158 | &[x-placement^="left"] {
159 | @extend .bs-popover-left;
160 | }
161 | }
162 |
163 |
164 | // Offset the popover to account for the popover arrow
165 | .popover-header {
166 | padding: $popover-header-padding-y $popover-header-padding-x;
167 | margin-bottom: 0; // Reset the default from Reboot
168 | font-size: $font-size-base;
169 | color: $popover-header-color;
170 | background-color: $popover-header-bg;
171 | border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
172 | $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
173 | @include border-top-radius($offset-border-width);
174 |
175 | &:empty {
176 | display: none;
177 | }
178 | }
179 |
180 | .popover-body {
181 | padding: $popover-body-padding-y $popover-body-padding-x;
182 | color: $popover-body-color;
183 | }
184 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_print.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important, selector-no-qualifying-type
2 |
3 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
4 |
5 | // ==========================================================================
6 | // Print styles.
7 | // Inlined to avoid the additional HTTP request:
8 | // https://www.phpied.com/delay-loading-your-print-css/
9 | // ==========================================================================
10 |
11 | @if $enable-print-styles {
12 | @media print {
13 | *,
14 | *::before,
15 | *::after {
16 | // Bootstrap specific; comment out `color` and `background`
17 | //color: $black !important; // Black prints faster
18 | text-shadow: none !important;
19 | //background: transparent !important;
20 | box-shadow: none !important;
21 | }
22 |
23 | a {
24 | &:not(.btn) {
25 | text-decoration: underline;
26 | }
27 | }
28 |
29 | // Bootstrap specific; comment the following selector out
30 | //a[href]::after {
31 | // content: " (" attr(href) ")";
32 | //}
33 |
34 | abbr[title]::after {
35 | content: " (" attr(title) ")";
36 | }
37 |
38 | // Bootstrap specific; comment the following selector out
39 | //
40 | // Don't show links that are fragment identifiers,
41 | // or use the `javascript:` pseudo protocol
42 | //
43 |
44 | //a[href^="#"]::after,
45 | //a[href^="javascript:"]::after {
46 | // content: "";
47 | //}
48 |
49 | pre {
50 | white-space: pre-wrap !important;
51 | }
52 | pre,
53 | blockquote {
54 | border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
55 | page-break-inside: avoid;
56 | }
57 |
58 | //
59 | // Printing Tables:
60 | // http://css-discuss.incutio.com/wiki/Printing_Tables
61 | //
62 |
63 | thead {
64 | display: table-header-group;
65 | }
66 |
67 | tr,
68 | img {
69 | page-break-inside: avoid;
70 | }
71 |
72 | p,
73 | h2,
74 | h3 {
75 | orphans: 3;
76 | widows: 3;
77 | }
78 |
79 | h2,
80 | h3 {
81 | page-break-after: avoid;
82 | }
83 |
84 | // Bootstrap specific changes start
85 |
86 | // Specify a size and min-width to make printing closer across browsers.
87 | // We don't set margin here because it breaks `size` in Chrome. We also
88 | // don't use `!important` on `size` as it breaks in Chrome.
89 | @page {
90 | size: $print-page-size;
91 | }
92 | body {
93 | min-width: $print-body-min-width !important;
94 | }
95 | .container {
96 | min-width: $print-body-min-width !important;
97 | }
98 |
99 | // Bootstrap components
100 | .navbar {
101 | display: none;
102 | }
103 | .badge {
104 | border: $border-width solid $black;
105 | }
106 |
107 | .table {
108 | border-collapse: collapse !important;
109 |
110 | td,
111 | th {
112 | background-color: $white !important;
113 | }
114 | }
115 |
116 | .table-bordered {
117 | th,
118 | td {
119 | border: 1px solid $gray-300 !important;
120 | }
121 | }
122 |
123 | .table-dark {
124 | color: inherit;
125 |
126 | th,
127 | td,
128 | thead th,
129 | tbody + tbody {
130 | border-color: $table-border-color;
131 | }
132 | }
133 |
134 | .table .thead-dark th {
135 | color: inherit;
136 | border-color: $table-border-color;
137 | }
138 |
139 | // Bootstrap specific changes end
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_progress.scss:
--------------------------------------------------------------------------------
1 | @keyframes progress-bar-stripes {
2 | from { background-position: $progress-height 0; }
3 | to { background-position: 0 0; }
4 | }
5 |
6 | .progress {
7 | display: flex;
8 | height: $progress-height;
9 | overflow: hidden; // force rounded corners by cropping it
10 | font-size: $progress-font-size;
11 | background-color: $progress-bg;
12 | @include border-radius($progress-border-radius);
13 | @include box-shadow($progress-box-shadow);
14 | }
15 |
16 | .progress-bar {
17 | display: flex;
18 | flex-direction: column;
19 | justify-content: center;
20 | color: $progress-bar-color;
21 | text-align: center;
22 | white-space: nowrap;
23 | background-color: $progress-bar-bg;
24 | @include transition($progress-bar-transition);
25 | }
26 |
27 | .progress-bar-striped {
28 | @include gradient-striped();
29 | background-size: $progress-height $progress-height;
30 | }
31 |
32 | .progress-bar-animated {
33 | animation: progress-bar-stripes $progress-bar-animation-timing;
34 | }
35 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_reboot.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2 |
3 | // Reboot
4 | //
5 | // Normalization of HTML elements, manually forked from Normalize.css to remove
6 | // styles targeting irrelevant browsers while applying new styles.
7 | //
8 | // Normalize is licensed MIT. https://github.com/necolas/normalize.css
9 |
10 |
11 | // Document
12 | //
13 | // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
14 | // 2. Change the default font family in all browsers.
15 | // 3. Correct the line height in all browsers.
16 | // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
17 | // 5. Change the default tap highlight to be completely transparent in iOS.
18 |
19 | *,
20 | *::before,
21 | *::after {
22 | box-sizing: border-box; // 1
23 | }
24 |
25 | html {
26 | font-family: sans-serif; // 2
27 | line-height: 1.15; // 3
28 | -webkit-text-size-adjust: 100%; // 4
29 | -webkit-tap-highlight-color: rgba($black, 0); // 5
30 | }
31 |
32 | // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
33 | // TODO: remove in v5
34 | // stylelint-disable-next-line selector-list-comma-newline-after
35 | article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
36 | display: block;
37 | }
38 |
39 | // Body
40 | //
41 | // 1. Remove the margin in all browsers.
42 | // 2. As a best practice, apply a default `background-color`.
43 | // 3. Set an explicit initial text-align value so that we can later use
44 | // the `inherit` value on things like `` elements.
45 |
46 | body {
47 | margin: 0; // 1
48 | font-family: $font-family-base;
49 | font-size: $font-size-base;
50 | font-weight: $font-weight-base;
51 | line-height: $line-height-base;
52 | color: $body-color;
53 | text-align: left; // 3
54 | background-color: $body-bg; // 2
55 | }
56 |
57 | // Suppress the focus outline on elements that cannot be accessed via keyboard.
58 | // This prevents an unwanted focus outline from appearing around elements that
59 | // might still respond to pointer events.
60 | //
61 | // Credit: https://github.com/suitcss/base
62 | [tabindex="-1"]:focus {
63 | outline: 0 !important;
64 | }
65 |
66 |
67 | // Content grouping
68 | //
69 | // 1. Add the correct box sizing in Firefox.
70 | // 2. Show the overflow in Edge and IE.
71 |
72 | hr {
73 | box-sizing: content-box; // 1
74 | height: 0; // 1
75 | overflow: visible; // 2
76 | }
77 |
78 |
79 | //
80 | // Typography
81 | //
82 |
83 | // Remove top margins from headings
84 | //
85 | // By default, ``-`` all receive top and bottom margins. We nuke the top
86 | // margin for easier control within type scales as it avoids margin collapsing.
87 | // stylelint-disable-next-line selector-list-comma-newline-after
88 | h1, h2, h3, h4, h5, h6 {
89 | margin-top: 0;
90 | margin-bottom: $headings-margin-bottom;
91 | }
92 |
93 | // Reset margins on paragraphs
94 | //
95 | // Similarly, the top margin on ``s get reset. However, we also reset the
96 | // bottom margin to use `rem` units instead of `em`.
97 | p {
98 | margin-top: 0;
99 | margin-bottom: $paragraph-margin-bottom;
100 | }
101 |
102 | // Abbreviations
103 | //
104 | // 1. Duplicate behavior to the data-* attribute for our tooltip plugin
105 | // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
106 | // 3. Add explicit cursor to indicate changed behavior.
107 | // 4. Remove the bottom border in Firefox 39-.
108 | // 5. Prevent the text-decoration to be skipped.
109 |
110 | abbr[title],
111 | abbr[data-original-title] { // 1
112 | text-decoration: underline; // 2
113 | text-decoration: underline dotted; // 2
114 | cursor: help; // 3
115 | border-bottom: 0; // 4
116 | text-decoration-skip-ink: none; // 5
117 | }
118 |
119 | address {
120 | margin-bottom: 1rem;
121 | font-style: normal;
122 | line-height: inherit;
123 | }
124 |
125 | ol,
126 | ul,
127 | dl {
128 | margin-top: 0;
129 | margin-bottom: 1rem;
130 | }
131 |
132 | ol ol,
133 | ul ul,
134 | ol ul,
135 | ul ol {
136 | margin-bottom: 0;
137 | }
138 |
139 | dt {
140 | font-weight: $dt-font-weight;
141 | }
142 |
143 | dd {
144 | margin-bottom: .5rem;
145 | margin-left: 0; // Undo browser default
146 | }
147 |
148 | blockquote {
149 | margin: 0 0 1rem;
150 | }
151 |
152 | b,
153 | strong {
154 | font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
155 | }
156 |
157 | small {
158 | font-size: 80%; // Add the correct font size in all browsers
159 | }
160 |
161 | //
162 | // Prevent `sub` and `sup` elements from affecting the line height in
163 | // all browsers.
164 | //
165 |
166 | sub,
167 | sup {
168 | position: relative;
169 | font-size: 75%;
170 | line-height: 0;
171 | vertical-align: baseline;
172 | }
173 |
174 | sub { bottom: -.25em; }
175 | sup { top: -.5em; }
176 |
177 |
178 | //
179 | // Links
180 | //
181 |
182 | a {
183 | color: $link-color;
184 | text-decoration: $link-decoration;
185 | background-color: transparent; // Remove the gray background on active links in IE 10.
186 |
187 | @include hover {
188 | color: $link-hover-color;
189 | text-decoration: $link-hover-decoration;
190 | }
191 | }
192 |
193 | // And undo these styles for placeholder links/named anchors (without href)
194 | // which have not been made explicitly keyboard-focusable (without tabindex).
195 | // It would be more straightforward to just use a[href] in previous block, but that
196 | // causes specificity issues in many other styles that are too complex to fix.
197 | // See https://github.com/twbs/bootstrap/issues/19402
198 |
199 | a:not([href]):not([tabindex]) {
200 | color: inherit;
201 | text-decoration: none;
202 |
203 | @include hover-focus {
204 | color: inherit;
205 | text-decoration: none;
206 | }
207 |
208 | &:focus {
209 | outline: 0;
210 | }
211 | }
212 |
213 |
214 | //
215 | // Code
216 | //
217 |
218 | pre,
219 | code,
220 | kbd,
221 | samp {
222 | font-family: $font-family-monospace;
223 | font-size: 1em; // Correct the odd `em` font sizing in all browsers.
224 | }
225 |
226 | pre {
227 | // Remove browser default top margin
228 | margin-top: 0;
229 | // Reset browser default of `1em` to use `rem`s
230 | margin-bottom: 1rem;
231 | // Don't allow content to break outside
232 | overflow: auto;
233 | }
234 |
235 |
236 | //
237 | // Figures
238 | //
239 |
240 | figure {
241 | // Apply a consistent margin strategy (matches our type styles).
242 | margin: 0 0 1rem;
243 | }
244 |
245 |
246 | //
247 | // Images and content
248 | //
249 |
250 | img {
251 | vertical-align: middle;
252 | border-style: none; // Remove the border on images inside links in IE 10-.
253 | }
254 |
255 | svg {
256 | // Workaround for the SVG overflow bug in IE10/11 is still required.
257 | // See https://github.com/twbs/bootstrap/issues/26878
258 | overflow: hidden;
259 | vertical-align: middle;
260 | }
261 |
262 |
263 | //
264 | // Tables
265 | //
266 |
267 | table {
268 | border-collapse: collapse; // Prevent double borders
269 | }
270 |
271 | caption {
272 | padding-top: $table-cell-padding;
273 | padding-bottom: $table-cell-padding;
274 | color: $table-caption-color;
275 | text-align: left;
276 | caption-side: bottom;
277 | }
278 |
279 | th {
280 | // Matches default ` | ` alignment by inheriting from the ``, or the
281 | // closest parent with a set `text-align`.
282 | text-align: inherit;
283 | }
284 |
285 |
286 | //
287 | // Forms
288 | //
289 |
290 | label {
291 | // Allow labels to use `margin` for spacing.
292 | display: inline-block;
293 | margin-bottom: $label-margin-bottom;
294 | }
295 |
296 | // Remove the default `border-radius` that macOS Chrome adds.
297 | //
298 | // Details at https://github.com/twbs/bootstrap/issues/24093
299 | button {
300 | border-radius: 0;
301 | }
302 |
303 | // Work around a Firefox/IE bug where the transparent `button` background
304 | // results in a loss of the default `button` focus styles.
305 | //
306 | // Credit: https://github.com/suitcss/base/
307 | button:focus {
308 | outline: 1px dotted;
309 | outline: 5px auto -webkit-focus-ring-color;
310 | }
311 |
312 | input,
313 | button,
314 | select,
315 | optgroup,
316 | textarea {
317 | margin: 0; // Remove the margin in Firefox and Safari
318 | font-family: inherit;
319 | font-size: inherit;
320 | line-height: inherit;
321 | }
322 |
323 | button,
324 | input {
325 | overflow: visible; // Show the overflow in Edge
326 | }
327 |
328 | button,
329 | select {
330 | text-transform: none; // Remove the inheritance of text transform in Firefox
331 | }
332 |
333 | // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
334 | // controls in Android 4.
335 | // 2. Correct the inability to style clickable types in iOS and Safari.
336 | button,
337 | [type="button"], // 1
338 | [type="reset"],
339 | [type="submit"] {
340 | -webkit-appearance: button; // 2
341 | }
342 |
343 | // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
344 | button::-moz-focus-inner,
345 | [type="button"]::-moz-focus-inner,
346 | [type="reset"]::-moz-focus-inner,
347 | [type="submit"]::-moz-focus-inner {
348 | padding: 0;
349 | border-style: none;
350 | }
351 |
352 | input[type="radio"],
353 | input[type="checkbox"] {
354 | box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
355 | padding: 0; // 2. Remove the padding in IE 10-
356 | }
357 |
358 |
359 | input[type="date"],
360 | input[type="time"],
361 | input[type="datetime-local"],
362 | input[type="month"] {
363 | // Remove the default appearance of temporal inputs to avoid a Mobile Safari
364 | // bug where setting a custom line-height prevents text from being vertically
365 | // centered within the input.
366 | // See https://bugs.webkit.org/show_bug.cgi?id=139848
367 | // and https://github.com/twbs/bootstrap/issues/11266
368 | -webkit-appearance: listbox;
369 | }
370 |
371 | textarea {
372 | overflow: auto; // Remove the default vertical scrollbar in IE.
373 | // Textareas should really only resize vertically so they don't break their (horizontal) containers.
374 | resize: vertical;
375 | }
376 |
377 | fieldset {
378 | // Browsers set a default `min-width: min-content;` on fieldsets,
379 | // unlike e.g. ` `s, which have `min-width: 0;` by default.
380 | // So we reset that to ensure fieldsets behave more like a standard block element.
381 | // See https://github.com/twbs/bootstrap/issues/12359
382 | // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
383 | min-width: 0;
384 | // Reset the default outline behavior of fieldsets so they don't affect page layout.
385 | padding: 0;
386 | margin: 0;
387 | border: 0;
388 | }
389 |
390 | // 1. Correct the text wrapping in Edge and IE.
391 | // 2. Correct the color inheritance from `fieldset` elements in IE.
392 | legend {
393 | display: block;
394 | width: 100%;
395 | max-width: 100%; // 1
396 | padding: 0;
397 | margin-bottom: .5rem;
398 | font-size: 1.5rem;
399 | line-height: inherit;
400 | color: inherit; // 2
401 | white-space: normal; // 1
402 | }
403 |
404 | progress {
405 | vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
406 | }
407 |
408 | // Correct the cursor style of increment and decrement buttons in Chrome.
409 | [type="number"]::-webkit-inner-spin-button,
410 | [type="number"]::-webkit-outer-spin-button {
411 | height: auto;
412 | }
413 |
414 | [type="search"] {
415 | // This overrides the extra rounded corners on search inputs in iOS so that our
416 | // `.form-control` class can properly style them. Note that this cannot simply
417 | // be added to `.form-control` as it's not specific enough. For details, see
418 | // https://github.com/twbs/bootstrap/issues/11586.
419 | outline-offset: -2px; // 2. Correct the outline style in Safari.
420 | -webkit-appearance: none;
421 | }
422 |
423 | //
424 | // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
425 | //
426 |
427 | [type="search"]::-webkit-search-decoration {
428 | -webkit-appearance: none;
429 | }
430 |
431 | //
432 | // 1. Correct the inability to style clickable types in iOS and Safari.
433 | // 2. Change font properties to `inherit` in Safari.
434 | //
435 |
436 | ::-webkit-file-upload-button {
437 | font: inherit; // 2
438 | -webkit-appearance: button; // 1
439 | }
440 |
441 | //
442 | // Correct element displays
443 | //
444 |
445 | output {
446 | display: inline-block;
447 | }
448 |
449 | summary {
450 | display: list-item; // Add the correct display in all browsers
451 | cursor: pointer;
452 | }
453 |
454 | template {
455 | display: none; // Add the correct display in IE
456 | }
457 |
458 | // Always hide an element with the `hidden` HTML attribute (from PureCSS).
459 | // Needed for proper display in IE 10-.
460 | [hidden] {
461 | display: none !important;
462 | }
463 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_root.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // Custom variable values only support SassScript inside `#{}`.
3 | @each $color, $value in $colors {
4 | --#{$color}: #{$value};
5 | }
6 |
7 | @each $color, $value in $theme-colors {
8 | --#{$color}: #{$value};
9 | }
10 |
11 | @each $bp, $value in $grid-breakpoints {
12 | --breakpoint-#{$bp}: #{$value};
13 | }
14 |
15 | // Use `inspect` for lists so that quoted items keep the quotes.
16 | // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
17 | --font-family-sans-serif: #{inspect($font-family-sans-serif)};
18 | --font-family-monospace: #{inspect($font-family-monospace)};
19 | }
20 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_spinners.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Rotating border
3 | //
4 |
5 | @keyframes spinner-border {
6 | to { transform: rotate(360deg); }
7 | }
8 |
9 | .spinner-border {
10 | display: inline-block;
11 | width: $spinner-width;
12 | height: $spinner-height;
13 | vertical-align: text-bottom;
14 | border: $spinner-border-width solid currentColor;
15 | border-right-color: transparent;
16 | border-radius: 50%;
17 | animation: spinner-border .75s linear infinite;
18 | }
19 |
20 | .spinner-border-sm {
21 | width: $spinner-width-sm;
22 | height: $spinner-height-sm;
23 | border-width: $spinner-border-width-sm;
24 | }
25 |
26 | //
27 | // Growing circle
28 | //
29 |
30 | @keyframes spinner-grow {
31 | 0% {
32 | transform: scale(0);
33 | }
34 | 50% {
35 | opacity: 1;
36 | }
37 | }
38 |
39 | .spinner-grow {
40 | display: inline-block;
41 | width: $spinner-width;
42 | height: $spinner-height;
43 | vertical-align: text-bottom;
44 | background-color: currentColor;
45 | border-radius: 50%;
46 | opacity: 0;
47 | animation: spinner-grow .75s linear infinite;
48 | }
49 |
50 | .spinner-grow-sm {
51 | width: $spinner-width-sm;
52 | height: $spinner-height-sm;
53 | }
54 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_tables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Basic Bootstrap table
3 | //
4 |
5 | .table {
6 | width: 100%;
7 | margin-bottom: $spacer;
8 | background-color: $table-bg; // Reset for nesting within parents with `background-color`.
9 |
10 | th,
11 | td {
12 | padding: $table-cell-padding;
13 | vertical-align: top;
14 | border-top: $table-border-width solid $table-border-color;
15 | }
16 |
17 | thead th {
18 | vertical-align: bottom;
19 | border-bottom: (2 * $table-border-width) solid $table-border-color;
20 | }
21 |
22 | tbody + tbody {
23 | border-top: (2 * $table-border-width) solid $table-border-color;
24 | }
25 |
26 | .table {
27 | background-color: $body-bg;
28 | }
29 | }
30 |
31 |
32 | //
33 | // Condensed table w/ half padding
34 | //
35 |
36 | .table-sm {
37 | th,
38 | td {
39 | padding: $table-cell-padding-sm;
40 | }
41 | }
42 |
43 |
44 | // Border versions
45 | //
46 | // Add or remove borders all around the table and between all the columns.
47 |
48 | .table-bordered {
49 | border: $table-border-width solid $table-border-color;
50 |
51 | th,
52 | td {
53 | border: $table-border-width solid $table-border-color;
54 | }
55 |
56 | thead {
57 | th,
58 | td {
59 | border-bottom-width: 2 * $table-border-width;
60 | }
61 | }
62 | }
63 |
64 | .table-borderless {
65 | th,
66 | td,
67 | thead th,
68 | tbody + tbody {
69 | border: 0;
70 | }
71 | }
72 |
73 | // Zebra-striping
74 | //
75 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
76 |
77 | .table-striped {
78 | tbody tr:nth-of-type(#{$table-striped-order}) {
79 | background-color: $table-accent-bg;
80 | }
81 | }
82 |
83 |
84 | // Hover effect
85 | //
86 | // Placed here since it has to come after the potential zebra striping
87 |
88 | .table-hover {
89 | tbody tr {
90 | @include hover {
91 | background-color: $table-hover-bg;
92 | }
93 | }
94 | }
95 |
96 |
97 | // Table backgrounds
98 | //
99 | // Exact selectors below required to override `.table-striped` and prevent
100 | // inheritance to nested tables.
101 |
102 | @each $color, $value in $theme-colors {
103 | @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
104 | }
105 |
106 | @include table-row-variant(active, $table-active-bg);
107 |
108 |
109 | // Dark styles
110 | //
111 | // Same table markup, but inverted color scheme: dark background and light text.
112 |
113 | // stylelint-disable-next-line no-duplicate-selectors
114 | .table {
115 | .thead-dark {
116 | th {
117 | color: $table-dark-color;
118 | background-color: $table-dark-bg;
119 | border-color: $table-dark-border-color;
120 | }
121 | }
122 |
123 | .thead-light {
124 | th {
125 | color: $table-head-color;
126 | background-color: $table-head-bg;
127 | border-color: $table-border-color;
128 | }
129 | }
130 | }
131 |
132 | .table-dark {
133 | color: $table-dark-color;
134 | background-color: $table-dark-bg;
135 |
136 | th,
137 | td,
138 | thead th {
139 | border-color: $table-dark-border-color;
140 | }
141 |
142 | &.table-bordered {
143 | border: 0;
144 | }
145 |
146 | &.table-striped {
147 | tbody tr:nth-of-type(odd) {
148 | background-color: $table-dark-accent-bg;
149 | }
150 | }
151 |
152 | &.table-hover {
153 | tbody tr {
154 | @include hover {
155 | background-color: $table-dark-hover-bg;
156 | }
157 | }
158 | }
159 | }
160 |
161 |
162 | // Responsive tables
163 | //
164 | // Generate series of `.table-responsive-*` classes for configuring the screen
165 | // size of where your table will overflow.
166 |
167 | .table-responsive {
168 | @each $breakpoint in map-keys($grid-breakpoints) {
169 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
170 | $infix: breakpoint-infix($next, $grid-breakpoints);
171 |
172 | &#{$infix} {
173 | @include media-breakpoint-down($breakpoint) {
174 | display: block;
175 | width: 100%;
176 | overflow-x: auto;
177 | -webkit-overflow-scrolling: touch;
178 | -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
179 |
180 | // Prevent double border on horizontal scroll due to use of `display: block;`
181 | > .table-bordered {
182 | border: 0;
183 | }
184 | }
185 | }
186 | }
187 | }
188 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_toasts.scss:
--------------------------------------------------------------------------------
1 | .toast {
2 | max-width: $toast-max-width;
3 | overflow: hidden; // cheap rounded corners on nested items
4 | font-size: $toast-font-size; // knock it down to 14px
5 | background-color: $toast-background-color;
6 | background-clip: padding-box;
7 | border: $toast-border-width solid $toast-border-color;
8 | border-radius: $toast-border-radius;
9 | box-shadow: $toast-box-shadow;
10 | backdrop-filter: blur(10px);
11 | opacity: 0;
12 |
13 | &:not(:last-child) {
14 | margin-bottom: $toast-padding-x;
15 | }
16 |
17 | &.showing {
18 | opacity: 1;
19 | }
20 |
21 | &.show {
22 | display: block;
23 | opacity: 1;
24 | }
25 |
26 | &.hide {
27 | display: none;
28 | }
29 | }
30 |
31 | .toast-header {
32 | display: flex;
33 | align-items: center;
34 | padding: $toast-padding-y $toast-padding-x;
35 | color: $toast-header-color;
36 | background-color: $toast-header-background-color;
37 | background-clip: padding-box;
38 | border-bottom: $toast-border-width solid $toast-header-border-color;
39 | }
40 |
41 | .toast-body {
42 | padding: $toast-padding-x; // apply to both vertical and horizontal
43 | }
44 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_tooltip.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | .tooltip {
3 | position: absolute;
4 | z-index: $zindex-tooltip;
5 | display: block;
6 | margin: $tooltip-margin;
7 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8 | // So reset our font and text properties to avoid inheriting weird values.
9 | @include reset-text();
10 | font-size: $tooltip-font-size;
11 | // Allow breaking very long words so they don't overflow the tooltip's bounds
12 | word-wrap: break-word;
13 | opacity: 0;
14 |
15 | &.show { opacity: $tooltip-opacity; }
16 |
17 | .arrow {
18 | position: absolute;
19 | display: block;
20 | width: $tooltip-arrow-width;
21 | height: $tooltip-arrow-height;
22 |
23 | &::before {
24 | position: absolute;
25 | content: "";
26 | border-color: transparent;
27 | border-style: solid;
28 | }
29 | }
30 | }
31 |
32 | .bs-tooltip-top {
33 | padding: $tooltip-arrow-height 0;
34 |
35 | .arrow {
36 | bottom: 0;
37 |
38 | &::before {
39 | top: 0;
40 | border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
41 | border-top-color: $tooltip-arrow-color;
42 | }
43 | }
44 | }
45 |
46 | .bs-tooltip-right {
47 | padding: 0 $tooltip-arrow-height;
48 |
49 | .arrow {
50 | left: 0;
51 | width: $tooltip-arrow-height;
52 | height: $tooltip-arrow-width;
53 |
54 | &::before {
55 | right: 0;
56 | border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
57 | border-right-color: $tooltip-arrow-color;
58 | }
59 | }
60 | }
61 |
62 | .bs-tooltip-bottom {
63 | padding: $tooltip-arrow-height 0;
64 |
65 | .arrow {
66 | top: 0;
67 |
68 | &::before {
69 | bottom: 0;
70 | border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
71 | border-bottom-color: $tooltip-arrow-color;
72 | }
73 | }
74 | }
75 |
76 | .bs-tooltip-left {
77 | padding: 0 $tooltip-arrow-height;
78 |
79 | .arrow {
80 | right: 0;
81 | width: $tooltip-arrow-height;
82 | height: $tooltip-arrow-width;
83 |
84 | &::before {
85 | left: 0;
86 | border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
87 | border-left-color: $tooltip-arrow-color;
88 | }
89 | }
90 | }
91 |
92 | .bs-tooltip-auto {
93 | &[x-placement^="top"] {
94 | @extend .bs-tooltip-top;
95 | }
96 | &[x-placement^="right"] {
97 | @extend .bs-tooltip-right;
98 | }
99 | &[x-placement^="bottom"] {
100 | @extend .bs-tooltip-bottom;
101 | }
102 | &[x-placement^="left"] {
103 | @extend .bs-tooltip-left;
104 | }
105 | }
106 |
107 | // Wrapper for the tooltip content
108 | .tooltip-inner {
109 | max-width: $tooltip-max-width;
110 | padding: $tooltip-padding-y $tooltip-padding-x;
111 | color: $tooltip-color;
112 | text-align: center;
113 | background-color: $tooltip-bg;
114 | @include border-radius($tooltip-border-radius);
115 | }
116 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_transitions.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable selector-no-qualifying-type
2 |
3 | .fade {
4 | @include transition($transition-fade);
5 |
6 | &:not(.show) {
7 | opacity: 0;
8 | }
9 | }
10 |
11 | .collapse {
12 | &:not(.show) {
13 | display: none;
14 | }
15 | }
16 |
17 | .collapsing {
18 | position: relative;
19 | height: 0;
20 | overflow: hidden;
21 | @include transition($transition-collapse);
22 | }
23 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_type.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important, selector-list-comma-newline-after
2 |
3 | //
4 | // Headings
5 | //
6 |
7 | h1, h2, h3, h4, h5, h6,
8 | .h1, .h2, .h3, .h4, .h5, .h6 {
9 | margin-bottom: $headings-margin-bottom;
10 | font-family: $headings-font-family;
11 | font-weight: $headings-font-weight;
12 | line-height: $headings-line-height;
13 | color: $headings-color;
14 | }
15 |
16 | h1, .h1 { font-size: $h1-font-size; }
17 | h2, .h2 { font-size: $h2-font-size; }
18 | h3, .h3 { font-size: $h3-font-size; }
19 | h4, .h4 { font-size: $h4-font-size; }
20 | h5, .h5 { font-size: $h5-font-size; }
21 | h6, .h6 { font-size: $h6-font-size; }
22 |
23 | .lead {
24 | font-size: $lead-font-size;
25 | font-weight: $lead-font-weight;
26 | }
27 |
28 | // Type display classes
29 | .display-1 {
30 | font-size: $display1-size;
31 | font-weight: $display1-weight;
32 | line-height: $display-line-height;
33 | }
34 | .display-2 {
35 | font-size: $display2-size;
36 | font-weight: $display2-weight;
37 | line-height: $display-line-height;
38 | }
39 | .display-3 {
40 | font-size: $display3-size;
41 | font-weight: $display3-weight;
42 | line-height: $display-line-height;
43 | }
44 | .display-4 {
45 | font-size: $display4-size;
46 | font-weight: $display4-weight;
47 | line-height: $display-line-height;
48 | }
49 |
50 |
51 | //
52 | // Horizontal rules
53 | //
54 |
55 | hr {
56 | margin-top: $hr-margin-y;
57 | margin-bottom: $hr-margin-y;
58 | border: 0;
59 | border-top: $hr-border-width solid $hr-border-color;
60 | }
61 |
62 |
63 | //
64 | // Emphasis
65 | //
66 |
67 | small,
68 | .small {
69 | font-size: $small-font-size;
70 | font-weight: $font-weight-normal;
71 | }
72 |
73 | mark,
74 | .mark {
75 | padding: $mark-padding;
76 | background-color: $mark-bg;
77 | }
78 |
79 |
80 | //
81 | // Lists
82 | //
83 |
84 | .list-unstyled {
85 | @include list-unstyled;
86 | }
87 |
88 | // Inline turns list items into inline-block
89 | .list-inline {
90 | @include list-unstyled;
91 | }
92 | .list-inline-item {
93 | display: inline-block;
94 |
95 | &:not(:last-child) {
96 | margin-right: $list-inline-padding;
97 | }
98 | }
99 |
100 |
101 | //
102 | // Misc
103 | //
104 |
105 | // Builds on `abbr`
106 | .initialism {
107 | font-size: 90%;
108 | text-transform: uppercase;
109 | }
110 |
111 | // Blockquotes
112 | .blockquote {
113 | margin-bottom: $spacer;
114 | font-size: $blockquote-font-size;
115 | }
116 |
117 | .blockquote-footer {
118 | display: block;
119 | font-size: $blockquote-small-font-size;
120 | color: $blockquote-small-color;
121 |
122 | &::before {
123 | content: "\2014\00A0"; // em dash, nbsp
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/_utilities.scss:
--------------------------------------------------------------------------------
1 | @import "utilities/align";
2 | @import "utilities/background";
3 | @import "utilities/borders";
4 | @import "utilities/clearfix";
5 | @import "utilities/display";
6 | @import "utilities/embed";
7 | @import "utilities/flex";
8 | @import "utilities/float";
9 | @import "utilities/overflow";
10 | @import "utilities/position";
11 | @import "utilities/screenreaders";
12 | @import "utilities/shadows";
13 | @import "utilities/sizing";
14 | @import "utilities/spacing";
15 | @import "utilities/text";
16 | @import "utilities/visibility";
17 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/bootstrap-grid.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Grid v4.2.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2018 The Bootstrap Authors
4 | * Copyright 2011-2018 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | html {
9 | box-sizing: border-box;
10 | -ms-overflow-style: scrollbar;
11 | }
12 |
13 | *,
14 | *::before,
15 | *::after {
16 | box-sizing: inherit;
17 | }
18 |
19 | @import "functions";
20 | @import "variables";
21 |
22 | @import "mixins/breakpoints";
23 | @import "mixins/grid-framework";
24 | @import "mixins/grid";
25 |
26 | @import "grid";
27 | @import "utilities/display";
28 | @import "utilities/flex";
29 | @import "utilities/spacing";
30 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/bootstrap-reboot.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Reboot v4.2.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2018 The Bootstrap Authors
4 | * Copyright 2011-2018 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
7 | */
8 |
9 | @import "functions";
10 | @import "variables";
11 | @import "mixins";
12 | @import "reboot";
13 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/bootstrap.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v4.2.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2018 The Bootstrap Authors
4 | * Copyright 2011-2018 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | @import "functions";
9 | @import "variables";
10 | @import "mixins";
11 | @import "root";
12 | @import "reboot";
13 | @import "type";
14 | @import "images";
15 | @import "code";
16 | @import "grid";
17 | @import "tables";
18 | @import "forms";
19 | @import "buttons";
20 | @import "transitions";
21 | @import "dropdown";
22 | @import "button-group";
23 | @import "input-group";
24 | @import "custom-forms";
25 | @import "nav";
26 | @import "navbar";
27 | @import "card";
28 | @import "breadcrumb";
29 | @import "pagination";
30 | @import "badge";
31 | @import "jumbotron";
32 | @import "alert";
33 | @import "progress";
34 | @import "media";
35 | @import "list-group";
36 | @import "close";
37 | @import "toasts";
38 | @import "modal";
39 | @import "tooltip";
40 | @import "popover";
41 | @import "carousel";
42 | @import "spinners";
43 | @import "utilities";
44 | @import "print";
45 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_alert.scss:
--------------------------------------------------------------------------------
1 | @mixin alert-variant($background, $border, $color) {
2 | color: $color;
3 | @include gradient-bg($background);
4 | border-color: $border;
5 |
6 | hr {
7 | border-top-color: darken($border, 5%);
8 | }
9 |
10 | .alert-link {
11 | color: darken($color, 10%);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_background-variant.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Contextual backgrounds
4 |
5 | @mixin bg-variant($parent, $color) {
6 | #{$parent} {
7 | background-color: $color !important;
8 | }
9 | a#{$parent},
10 | button#{$parent} {
11 | @include hover-focus {
12 | background-color: darken($color, 10%) !important;
13 | }
14 | }
15 | }
16 |
17 | @mixin bg-gradient-variant($parent, $color) {
18 | #{$parent} {
19 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_badge.scss:
--------------------------------------------------------------------------------
1 | @mixin badge-variant($bg) {
2 | color: color-yiq($bg);
3 | background-color: $bg;
4 |
5 | @at-root a#{&} {
6 | @include hover-focus {
7 | color: color-yiq($bg);
8 | background-color: darken($bg, 10%);
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_border-radius.scss:
--------------------------------------------------------------------------------
1 | // Single side border-radius
2 |
3 | @mixin border-radius($radius: $border-radius) {
4 | @if $enable-rounded {
5 | border-radius: $radius;
6 | }
7 | }
8 |
9 | @mixin border-top-radius($radius) {
10 | @if $enable-rounded {
11 | border-top-left-radius: $radius;
12 | border-top-right-radius: $radius;
13 | }
14 | }
15 |
16 | @mixin border-right-radius($radius) {
17 | @if $enable-rounded {
18 | border-top-right-radius: $radius;
19 | border-bottom-right-radius: $radius;
20 | }
21 | }
22 |
23 | @mixin border-bottom-radius($radius) {
24 | @if $enable-rounded {
25 | border-bottom-right-radius: $radius;
26 | border-bottom-left-radius: $radius;
27 | }
28 | }
29 |
30 | @mixin border-left-radius($radius) {
31 | @if $enable-rounded {
32 | border-top-left-radius: $radius;
33 | border-bottom-left-radius: $radius;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow($shadow...) {
2 | @if $enable-shadows {
3 | box-shadow: $shadow;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | // Breakpoint viewport sizes and media queries.
2 | //
3 | // Breakpoints are defined as a map of (name: minimum width), order from small to large:
4 | //
5 | // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
6 | //
7 | // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8 |
9 | // Name of the next breakpoint, or null for the last breakpoint.
10 | //
11 | // >> breakpoint-next(sm)
12 | // md
13 | // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
14 | // md
15 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
16 | // md
17 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18 | $n: index($breakpoint-names, $name);
19 | @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
20 | }
21 |
22 | // Minimum breakpoint width. Null for the smallest (first) breakpoint.
23 | //
24 | // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
25 | // 576px
26 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
27 | $min: map-get($breakpoints, $name);
28 | @return if($min != 0, $min, null);
29 | }
30 |
31 | // Maximum breakpoint width. Null for the largest (last) breakpoint.
32 | // The maximum value is calculated as the minimum of the next one less 0.02px
33 | // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
34 | // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
35 | // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
36 | // See https://bugs.webkit.org/show_bug.cgi?id=178261
37 | //
38 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
39 | // 767.98px
40 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
41 | $next: breakpoint-next($name, $breakpoints);
42 | @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
43 | }
44 |
45 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
46 | // Useful for making responsive utilities.
47 | //
48 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
49 | // "" (Returns a blank string)
50 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
51 | // "-sm"
52 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
53 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
54 | }
55 |
56 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
57 | // Makes the @content apply to the given breakpoint and wider.
58 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
59 | $min: breakpoint-min($name, $breakpoints);
60 | @if $min {
61 | @media (min-width: $min) {
62 | @content;
63 | }
64 | } @else {
65 | @content;
66 | }
67 | }
68 |
69 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
70 | // Makes the @content apply to the given breakpoint and narrower.
71 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
72 | $max: breakpoint-max($name, $breakpoints);
73 | @if $max {
74 | @media (max-width: $max) {
75 | @content;
76 | }
77 | } @else {
78 | @content;
79 | }
80 | }
81 |
82 | // Media that spans multiple breakpoint widths.
83 | // Makes the @content apply between the min and max breakpoints
84 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
85 | $min: breakpoint-min($lower, $breakpoints);
86 | $max: breakpoint-max($upper, $breakpoints);
87 |
88 | @if $min != null and $max != null {
89 | @media (min-width: $min) and (max-width: $max) {
90 | @content;
91 | }
92 | } @else if $max == null {
93 | @include media-breakpoint-up($lower, $breakpoints) {
94 | @content;
95 | }
96 | } @else if $min == null {
97 | @include media-breakpoint-down($upper, $breakpoints) {
98 | @content;
99 | }
100 | }
101 | }
102 |
103 | // Media between the breakpoint's minimum and maximum widths.
104 | // No minimum for the smallest breakpoint, and no maximum for the largest one.
105 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
106 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
107 | $min: breakpoint-min($name, $breakpoints);
108 | $max: breakpoint-max($name, $breakpoints);
109 |
110 | @if $min != null and $max != null {
111 | @media (min-width: $min) and (max-width: $max) {
112 | @content;
113 | }
114 | } @else if $max == null {
115 | @include media-breakpoint-up($name, $breakpoints) {
116 | @content;
117 | }
118 | } @else if $min == null {
119 | @include media-breakpoint-down($name, $breakpoints) {
120 | @content;
121 | }
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Button variants
2 | //
3 | // Easily pump out default styles, as well as :hover, :focus, :active,
4 | // and disabled options for all buttons
5 |
6 | @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
7 | color: color-yiq($background);
8 | @include gradient-bg($background);
9 | border-color: $border;
10 | @include box-shadow($btn-box-shadow);
11 |
12 | @include hover {
13 | color: color-yiq($hover-background);
14 | @include gradient-bg($hover-background);
15 | border-color: $hover-border;
16 | }
17 |
18 | &:focus,
19 | &.focus {
20 | // Avoid using mixin so we can pass custom focus shadow properly
21 | @if $enable-shadows {
22 | box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
23 | } @else {
24 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
25 | }
26 | }
27 |
28 | // Disabled comes first so active can properly restyle
29 | &.disabled,
30 | &:disabled {
31 | color: color-yiq($background);
32 | background-color: $background;
33 | border-color: $border;
34 | // Remove CSS gradients if they're enabled
35 | @if $enable-gradients {
36 | background-image: none;
37 | }
38 | }
39 |
40 | &:not(:disabled):not(.disabled):active,
41 | &:not(:disabled):not(.disabled).active,
42 | .show > &.dropdown-toggle {
43 | color: color-yiq($active-background);
44 | background-color: $active-background;
45 | @if $enable-gradients {
46 | background-image: none; // Remove the gradient for the pressed/active state
47 | }
48 | border-color: $active-border;
49 |
50 | &:focus {
51 | // Avoid using mixin so we can pass custom focus shadow properly
52 | @if $enable-shadows {
53 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
54 | } @else {
55 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
56 | }
57 | }
58 | }
59 | }
60 |
61 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
62 | color: $color;
63 | border-color: $color;
64 |
65 | @include hover {
66 | color: $color-hover;
67 | background-color: $active-background;
68 | border-color: $active-border;
69 | }
70 |
71 | &:focus,
72 | &.focus {
73 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
74 | }
75 |
76 | &.disabled,
77 | &:disabled {
78 | color: $color;
79 | background-color: transparent;
80 | }
81 |
82 | &:not(:disabled):not(.disabled):active,
83 | &:not(:disabled):not(.disabled).active,
84 | .show > &.dropdown-toggle {
85 | color: color-yiq($active-background);
86 | background-color: $active-background;
87 | border-color: $active-border;
88 |
89 | &:focus {
90 | // Avoid using mixin so we can pass custom focus shadow properly
91 | @if $enable-shadows and $btn-active-box-shadow != none {
92 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
93 | } @else {
94 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
95 | }
96 | }
97 | }
98 | }
99 |
100 | // Button sizes
101 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
102 | padding: $padding-y $padding-x;
103 | font-size: $font-size;
104 | line-height: $line-height;
105 | // Manually declare to provide an override to the browser default
106 | @if $enable-rounded {
107 | border-radius: $border-radius;
108 | } @else {
109 | border-radius: 0;
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_caret.scss:
--------------------------------------------------------------------------------
1 | @mixin caret-down {
2 | border-top: $caret-width solid;
3 | border-right: $caret-width solid transparent;
4 | border-bottom: 0;
5 | border-left: $caret-width solid transparent;
6 | }
7 |
8 | @mixin caret-up {
9 | border-top: 0;
10 | border-right: $caret-width solid transparent;
11 | border-bottom: $caret-width solid;
12 | border-left: $caret-width solid transparent;
13 | }
14 |
15 | @mixin caret-right {
16 | border-top: $caret-width solid transparent;
17 | border-right: 0;
18 | border-bottom: $caret-width solid transparent;
19 | border-left: $caret-width solid;
20 | }
21 |
22 | @mixin caret-left {
23 | border-top: $caret-width solid transparent;
24 | border-right: $caret-width solid;
25 | border-bottom: $caret-width solid transparent;
26 | }
27 |
28 | @mixin caret($direction: down) {
29 | @if $enable-caret {
30 | &::after {
31 | display: inline-block;
32 | margin-left: $caret-width * .85;
33 | vertical-align: $caret-width * .85;
34 | content: "";
35 | @if $direction == down {
36 | @include caret-down;
37 | } @else if $direction == up {
38 | @include caret-up;
39 | } @else if $direction == right {
40 | @include caret-right;
41 | }
42 | }
43 |
44 | @if $direction == left {
45 | &::after {
46 | display: none;
47 | }
48 |
49 | &::before {
50 | display: inline-block;
51 | margin-right: $caret-width * .85;
52 | vertical-align: $caret-width * .85;
53 | content: "";
54 | @include caret-left;
55 | }
56 | }
57 |
58 | &:empty::after {
59 | margin-left: 0;
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_clearfix.scss:
--------------------------------------------------------------------------------
1 | @mixin clearfix() {
2 | &::after {
3 | display: block;
4 | clear: both;
5 | content: "";
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_float.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @mixin float-left {
4 | float: left !important;
5 | }
6 | @mixin float-right {
7 | float: right !important;
8 | }
9 | @mixin float-none {
10 | float: none !important;
11 | }
12 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_forms.scss:
--------------------------------------------------------------------------------
1 | // Form control focus state
2 | //
3 | // Generate a customized focus state and for any input with the specified color,
4 | // which defaults to the `$input-focus-border-color` variable.
5 | //
6 | // We highly encourage you to not customize the default value, but instead use
7 | // this to tweak colors on an as-needed basis. This aesthetic change is based on
8 | // WebKit's default styles, but applicable to a wider range of browsers. Its
9 | // usability and accessibility should be taken into account with any change.
10 | //
11 | // Example usage: change the default blue border and shadow to white for better
12 | // contrast against a dark gray background.
13 | @mixin form-control-focus() {
14 | &:focus {
15 | color: $input-focus-color;
16 | background-color: $input-focus-bg;
17 | border-color: $input-focus-border-color;
18 | outline: 0;
19 | // Avoid using mixin so we can pass custom focus shadow properly
20 | @if $enable-shadows {
21 | box-shadow: $input-box-shadow, $input-focus-box-shadow;
22 | } @else {
23 | box-shadow: $input-focus-box-shadow;
24 | }
25 | }
26 | }
27 |
28 |
29 | @mixin form-validation-state($state, $color) {
30 | .#{$state}-feedback {
31 | display: none;
32 | width: 100%;
33 | margin-top: $form-feedback-margin-top;
34 | font-size: $form-feedback-font-size;
35 | color: $color;
36 | }
37 |
38 | .#{$state}-tooltip {
39 | position: absolute;
40 | top: 100%;
41 | z-index: 5;
42 | display: none;
43 | max-width: 100%; // Contain to parent when possible
44 | padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
45 | margin-top: .1rem;
46 | font-size: $form-feedback-tooltip-font-size;
47 | line-height: $form-feedback-tooltip-line-height;
48 | color: color-yiq($color);
49 | background-color: rgba($color, $form-feedback-tooltip-opacity);
50 | @include border-radius($form-feedback-tooltip-border-radius);
51 | }
52 |
53 | .form-control {
54 | .was-validated &:#{$state},
55 | &.is-#{$state} {
56 | border-color: $color;
57 |
58 | @if $enable-validation-icons {
59 | padding-right: $input-height-inner;
60 | background-repeat: no-repeat;
61 | background-position: center right calc(#{$input-height-inner} / 4);
62 | background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
63 |
64 | @if $state == "valid" {
65 | background-image: $form-feedback-icon-valid;
66 | } @else {
67 | background-image: $form-feedback-icon-invalid;
68 | }
69 | }
70 |
71 | &:focus {
72 | border-color: $color;
73 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
74 | }
75 |
76 | ~ .#{$state}-feedback,
77 | ~ .#{$state}-tooltip {
78 | display: block;
79 | }
80 | }
81 | }
82 |
83 | // stylelint-disable-next-line selector-no-qualifying-type
84 | textarea.form-control {
85 | .was-validated &:#{$state},
86 | &.is-#{$state} {
87 | @if $enable-validation-icons {
88 | padding-right: $input-height-inner;
89 | background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
90 | }
91 | }
92 | }
93 |
94 | .custom-select {
95 | .was-validated &:#{$state},
96 | &.is-#{$state} {
97 | border-color: $color;
98 |
99 | @if $enable-validation-icons {
100 | $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
101 | padding-right: $custom-select-feedback-icon-padding-right;
102 | background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
103 | }
104 |
105 | &:focus {
106 | border-color: $color;
107 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
108 | }
109 |
110 | ~ .#{$state}-feedback,
111 | ~ .#{$state}-tooltip {
112 | display: block;
113 | }
114 | }
115 | }
116 |
117 |
118 | .form-control-file {
119 | .was-validated &:#{$state},
120 | &.is-#{$state} {
121 | ~ .#{$state}-feedback,
122 | ~ .#{$state}-tooltip {
123 | display: block;
124 | }
125 | }
126 | }
127 |
128 | .form-check-input {
129 | .was-validated &:#{$state},
130 | &.is-#{$state} {
131 | ~ .form-check-label {
132 | color: $color;
133 | }
134 |
135 | ~ .#{$state}-feedback,
136 | ~ .#{$state}-tooltip {
137 | display: block;
138 | }
139 | }
140 | }
141 |
142 | .custom-control-input {
143 | .was-validated &:#{$state},
144 | &.is-#{$state} {
145 | ~ .custom-control-label {
146 | color: $color;
147 |
148 | &::before {
149 | border-color: $color;
150 | }
151 | }
152 |
153 | ~ .#{$state}-feedback,
154 | ~ .#{$state}-tooltip {
155 | display: block;
156 | }
157 |
158 | &:checked {
159 | ~ .custom-control-label::before {
160 | border-color: lighten($color, 10%);
161 | @include gradient-bg(lighten($color, 10%));
162 | }
163 | }
164 |
165 | &:focus {
166 | ~ .custom-control-label::before {
167 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
168 | }
169 |
170 | &:not(:checked) ~ .custom-control-label::before {
171 | border-color: $color;
172 | }
173 | }
174 | }
175 | }
176 |
177 | // custom file
178 | .custom-file-input {
179 | .was-validated &:#{$state},
180 | &.is-#{$state} {
181 | ~ .custom-file-label {
182 | border-color: $color;
183 | }
184 |
185 | ~ .#{$state}-feedback,
186 | ~ .#{$state}-tooltip {
187 | display: block;
188 | }
189 |
190 | &:focus {
191 | ~ .custom-file-label {
192 | border-color: $color;
193 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
194 | }
195 | }
196 | }
197 | }
198 | }
199 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_gradients.scss:
--------------------------------------------------------------------------------
1 | // Gradients
2 |
3 | @mixin gradient-bg($color) {
4 | @if $enable-gradients {
5 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
6 | } @else {
7 | background-color: $color;
8 | }
9 | }
10 |
11 | // Horizontal gradient, from left to right
12 | //
13 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
14 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
15 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
16 | background-repeat: repeat-x;
17 | }
18 |
19 | // Vertical gradient, from top to bottom
20 | //
21 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
22 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
23 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
24 | background-repeat: repeat-x;
25 | }
26 |
27 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
28 | background-image: linear-gradient($deg, $start-color, $end-color);
29 | background-repeat: repeat-x;
30 | }
31 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
32 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
33 | background-repeat: no-repeat;
34 | }
35 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
36 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
37 | background-repeat: no-repeat;
38 | }
39 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
40 | background-image: radial-gradient(circle, $inner-color, $outer-color);
41 | background-repeat: no-repeat;
42 | }
43 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
44 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
45 | }
46 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_grid-framework.scss:
--------------------------------------------------------------------------------
1 | // Framework grid generation
2 | //
3 | // Used only by Bootstrap to generate the correct number of grid classes given
4 | // any value of `$grid-columns`.
5 |
6 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7 | // Common properties for all breakpoints
8 | %grid-column {
9 | position: relative;
10 | width: 100%;
11 | padding-right: $gutter / 2;
12 | padding-left: $gutter / 2;
13 | }
14 |
15 | @each $breakpoint in map-keys($breakpoints) {
16 | $infix: breakpoint-infix($breakpoint, $breakpoints);
17 |
18 | // Allow columns to stretch full width below their breakpoints
19 | @for $i from 1 through $columns {
20 | .col#{$infix}-#{$i} {
21 | @extend %grid-column;
22 | }
23 | }
24 | .col#{$infix},
25 | .col#{$infix}-auto {
26 | @extend %grid-column;
27 | }
28 |
29 | @include media-breakpoint-up($breakpoint, $breakpoints) {
30 | // Provide basic `.col-{bp}` classes for equal-width flexbox columns
31 | .col#{$infix} {
32 | flex-basis: 0;
33 | flex-grow: 1;
34 | max-width: 100%;
35 | }
36 | .col#{$infix}-auto {
37 | flex: 0 0 auto;
38 | width: auto;
39 | max-width: 100%; // Reset earlier grid tiers
40 | }
41 |
42 | @for $i from 1 through $columns {
43 | .col#{$infix}-#{$i} {
44 | @include make-col($i, $columns);
45 | }
46 | }
47 |
48 | .order#{$infix}-first { order: -1; }
49 |
50 | .order#{$infix}-last { order: $columns + 1; }
51 |
52 | @for $i from 0 through $columns {
53 | .order#{$infix}-#{$i} { order: $i; }
54 | }
55 |
56 | // `$columns - 1` because offsetting by the width of an entire row isn't possible
57 | @for $i from 0 through ($columns - 1) {
58 | @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
59 | .offset#{$infix}-#{$i} {
60 | @include make-col-offset($i, $columns);
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_grid.scss:
--------------------------------------------------------------------------------
1 | /// Grid system
2 | //
3 | // Generate semantic grid columns with these mixins.
4 |
5 | @mixin make-container($gutter: $grid-gutter-width) {
6 | width: 100%;
7 | padding-right: $gutter / 2;
8 | padding-left: $gutter / 2;
9 | margin-right: auto;
10 | margin-left: auto;
11 | }
12 |
13 |
14 | // For each breakpoint, define the maximum width of the container in a media query
15 | @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
16 | @each $breakpoint, $container-max-width in $max-widths {
17 | @include media-breakpoint-up($breakpoint, $breakpoints) {
18 | max-width: $container-max-width;
19 | }
20 | }
21 | }
22 |
23 | @mixin make-row($gutter: $grid-gutter-width) {
24 | display: flex;
25 | flex-wrap: wrap;
26 | margin-right: -$gutter / 2;
27 | margin-left: -$gutter / 2;
28 | }
29 |
30 | @mixin make-col-ready($gutter: $grid-gutter-width) {
31 | position: relative;
32 | // Prevent columns from becoming too narrow when at smaller grid tiers by
33 | // always setting `width: 100%;`. This works because we use `flex` values
34 | // later on to override this initial width.
35 | width: 100%;
36 | padding-right: $gutter / 2;
37 | padding-left: $gutter / 2;
38 | }
39 |
40 | @mixin make-col($size, $columns: $grid-columns) {
41 | flex: 0 0 percentage($size / $columns);
42 | // Add a `max-width` to ensure content within each column does not blow out
43 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
44 | // do not appear to require this.
45 | max-width: percentage($size / $columns);
46 | }
47 |
48 | @mixin make-col-offset($size, $columns: $grid-columns) {
49 | $num: $size / $columns;
50 | margin-left: if($num == 0, 0, percentage($num));
51 | }
52 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_hover.scss:
--------------------------------------------------------------------------------
1 | // Hover mixin and `$enable-hover-media-query` are deprecated.
2 | //
3 | // Originally added during our alphas and maintained during betas, this mixin was
4 | // designed to prevent `:hover` stickiness on iOS-an issue where hover styles
5 | // would persist after initial touch.
6 | //
7 | // For backward compatibility, we've kept these mixins and updated them to
8 | // always return their regular pseudo-classes instead of a shimmed media query.
9 | //
10 | // Issue: https://github.com/twbs/bootstrap/issues/25195
11 |
12 | @mixin hover {
13 | &:hover { @content; }
14 | }
15 |
16 | @mixin hover-focus {
17 | &:hover,
18 | &:focus {
19 | @content;
20 | }
21 | }
22 |
23 | @mixin plain-hover-focus {
24 | &,
25 | &:hover,
26 | &:focus {
27 | @content;
28 | }
29 | }
30 |
31 | @mixin hover-focus-active {
32 | &:hover,
33 | &:focus,
34 | &:active {
35 | @content;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_image.scss:
--------------------------------------------------------------------------------
1 | // Image Mixins
2 | // - Responsive image
3 | // - Retina image
4 |
5 |
6 | // Responsive image
7 | //
8 | // Keep images from scaling beyond the width of their parents.
9 |
10 | @mixin img-fluid {
11 | // Part 1: Set a maximum relative to the parent
12 | max-width: 100%;
13 | // Part 2: Override the height to auto, otherwise images will be stretched
14 | // when setting a width and height attribute on the img element.
15 | height: auto;
16 | }
17 |
18 |
19 | // Retina image
20 | //
21 | // Short retina mixin for setting background-image and -size.
22 |
23 | // stylelint-disable indentation, media-query-list-comma-newline-after
24 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
25 | background-image: url($file-1x);
26 |
27 | // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
28 | // but doesn't convert dppx=>dpi.
29 | // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
30 | // Compatibility info: https://caniuse.com/#feat=css-media-resolution
31 | @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
32 | only screen and (min-resolution: 2dppx) { // Standardized
33 | background-image: url($file-2x);
34 | background-size: $width-1x $height-1x;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_list-group.scss:
--------------------------------------------------------------------------------
1 | // List Groups
2 |
3 | @mixin list-group-item-variant($state, $background, $color) {
4 | .list-group-item-#{$state} {
5 | color: $color;
6 | background-color: $background;
7 |
8 | &.list-group-item-action {
9 | @include hover-focus {
10 | color: $color;
11 | background-color: darken($background, 5%);
12 | }
13 |
14 | &.active {
15 | color: $white;
16 | background-color: $color;
17 | border-color: $color;
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_lists.scss:
--------------------------------------------------------------------------------
1 | // Lists
2 |
3 | // Unstyled keeps list items block level, just removes default browser padding and list-style
4 | @mixin list-unstyled {
5 | padding-left: 0;
6 | list-style: none;
7 | }
8 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_nav-divider.scss:
--------------------------------------------------------------------------------
1 | // Horizontal dividers
2 | //
3 | // Dividers (basically an hr) within dropdowns and nav lists
4 |
5 | @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
6 | height: 0;
7 | margin: $margin-y 0;
8 | overflow: hidden;
9 | border-top: 1px solid $color;
10 | }
11 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_pagination.scss:
--------------------------------------------------------------------------------
1 | // Pagination
2 |
3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
4 | .page-link {
5 | padding: $padding-y $padding-x;
6 | font-size: $font-size;
7 | line-height: $line-height;
8 | }
9 |
10 | .page-item {
11 | &:first-child {
12 | .page-link {
13 | @include border-left-radius($border-radius);
14 | }
15 | }
16 | &:last-child {
17 | .page-link {
18 | @include border-right-radius($border-radius);
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_reset-text.scss:
--------------------------------------------------------------------------------
1 | @mixin reset-text {
2 | font-family: $font-family-base;
3 | // We deliberately do NOT reset font-size or word-wrap.
4 | font-style: normal;
5 | font-weight: $font-weight-normal;
6 | line-height: $line-height-base;
7 | text-align: left; // Fallback for where `start` is not supported
8 | text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
9 | text-decoration: none;
10 | text-shadow: none;
11 | text-transform: none;
12 | letter-spacing: normal;
13 | word-break: normal;
14 | word-spacing: normal;
15 | white-space: normal;
16 | line-break: auto;
17 | }
18 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_resize.scss:
--------------------------------------------------------------------------------
1 | // Resize anything
2 |
3 | @mixin resizable($direction) {
4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
5 | resize: $direction; // Options: horizontal, vertical, both
6 | }
7 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_screen-reader.scss:
--------------------------------------------------------------------------------
1 | // Only display content to screen readers
2 | //
3 | // See: https://a11yproject.com/posts/how-to-hide-content/
4 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
5 |
6 | @mixin sr-only {
7 | position: absolute;
8 | width: 1px;
9 | height: 1px;
10 | padding: 0;
11 | overflow: hidden;
12 | clip: rect(0, 0, 0, 0);
13 | white-space: nowrap;
14 | border: 0;
15 | }
16 |
17 | // Use in conjunction with .sr-only to only display content when it's focused.
18 | //
19 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
20 | //
21 | // Credit: HTML5 Boilerplate
22 |
23 | @mixin sr-only-focusable {
24 | &:active,
25 | &:focus {
26 | position: static;
27 | width: auto;
28 | height: auto;
29 | overflow: visible;
30 | clip: auto;
31 | white-space: normal;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_size.scss:
--------------------------------------------------------------------------------
1 | // Sizing shortcuts
2 |
3 | @mixin size($width, $height: $width) {
4 | width: $width;
5 | height: $height;
6 | }
7 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_table-row.scss:
--------------------------------------------------------------------------------
1 | // Tables
2 |
3 | @mixin table-row-variant($state, $background, $border: null) {
4 | // Exact selectors below required to override `.table-striped` and prevent
5 | // inheritance to nested tables.
6 | .table-#{$state} {
7 | &,
8 | > th,
9 | > td {
10 | background-color: $background;
11 | }
12 |
13 | @if $border != null {
14 | th,
15 | td,
16 | thead th,
17 | tbody + tbody {
18 | border-color: $border;
19 | }
20 | }
21 | }
22 |
23 | // Hover states for `.table-hover`
24 | // Note: this is not available for cells or rows within `thead` or `tfoot`.
25 | .table-hover {
26 | $hover-background: darken($background, 5%);
27 |
28 | .table-#{$state} {
29 | @include hover {
30 | background-color: $hover-background;
31 |
32 | > td,
33 | > th {
34 | background-color: $hover-background;
35 | }
36 | }
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_text-emphasis.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Typography
4 |
5 | @mixin text-emphasis-variant($parent, $color) {
6 | #{$parent} {
7 | color: $color !important;
8 | }
9 | a#{$parent} {
10 | @include hover-focus {
11 | color: darken($color, $emphasized-link-hover-darken-percentage) !important;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_text-hide.scss:
--------------------------------------------------------------------------------
1 | // CSS image replacement
2 | @mixin text-hide($ignore-warning: false) {
3 | // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
4 | font: 0/0 a;
5 | color: transparent;
6 | text-shadow: none;
7 | background-color: transparent;
8 | border: 0;
9 |
10 | @if ($ignore-warning != true) {
11 | @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_text-truncate.scss:
--------------------------------------------------------------------------------
1 | // Text truncate
2 | // Requires inline-block or block for proper styling
3 |
4 | @mixin text-truncate() {
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_transition.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable property-blacklist
2 | @mixin transition($transition...) {
3 | @if $enable-transitions {
4 | @if length($transition) == 0 {
5 | transition: $transition-base;
6 | } @else {
7 | transition: $transition;
8 | }
9 | }
10 |
11 | @if $enable-prefers-reduced-motion-media-query {
12 | @media screen and (prefers-reduced-motion: reduce) {
13 | transition: none;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/mixins/_visibility.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Visibility
4 |
5 | @mixin invisible($visibility) {
6 | visibility: $visibility !important;
7 | }
8 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_align.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | .align-baseline { vertical-align: baseline !important; } // Browser default
4 | .align-top { vertical-align: top !important; }
5 | .align-middle { vertical-align: middle !important; }
6 | .align-bottom { vertical-align: bottom !important; }
7 | .align-text-bottom { vertical-align: text-bottom !important; }
8 | .align-text-top { vertical-align: text-top !important; }
9 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_background.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @each $color, $value in $theme-colors {
4 | @include bg-variant(".bg-#{$color}", $value);
5 | }
6 |
7 | @if $enable-gradients {
8 | @each $color, $value in $theme-colors {
9 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
10 | }
11 | }
12 |
13 | .bg-white {
14 | background-color: $white !important;
15 | }
16 |
17 | .bg-transparent {
18 | background-color: transparent !important;
19 | }
20 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_borders.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Border
5 | //
6 |
7 | .border { border: $border-width solid $border-color !important; }
8 | .border-top { border-top: $border-width solid $border-color !important; }
9 | .border-right { border-right: $border-width solid $border-color !important; }
10 | .border-bottom { border-bottom: $border-width solid $border-color !important; }
11 | .border-left { border-left: $border-width solid $border-color !important; }
12 |
13 | .border-0 { border: 0 !important; }
14 | .border-top-0 { border-top: 0 !important; }
15 | .border-right-0 { border-right: 0 !important; }
16 | .border-bottom-0 { border-bottom: 0 !important; }
17 | .border-left-0 { border-left: 0 !important; }
18 |
19 | @each $color, $value in $theme-colors {
20 | .border-#{$color} {
21 | border-color: $value !important;
22 | }
23 | }
24 |
25 | .border-white {
26 | border-color: $white !important;
27 | }
28 |
29 | //
30 | // Border-radius
31 | //
32 |
33 | .rounded {
34 | border-radius: $border-radius !important;
35 | }
36 | .rounded-top {
37 | border-top-left-radius: $border-radius !important;
38 | border-top-right-radius: $border-radius !important;
39 | }
40 | .rounded-right {
41 | border-top-right-radius: $border-radius !important;
42 | border-bottom-right-radius: $border-radius !important;
43 | }
44 | .rounded-bottom {
45 | border-bottom-right-radius: $border-radius !important;
46 | border-bottom-left-radius: $border-radius !important;
47 | }
48 | .rounded-left {
49 | border-top-left-radius: $border-radius !important;
50 | border-bottom-left-radius: $border-radius !important;
51 | }
52 |
53 | .rounded-circle {
54 | border-radius: 50% !important;
55 | }
56 |
57 | .rounded-pill {
58 | border-radius: $rounded-pill !important;
59 | }
60 |
61 | .rounded-0 {
62 | border-radius: 0 !important;
63 | }
64 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_clearfix.scss:
--------------------------------------------------------------------------------
1 | .clearfix {
2 | @include clearfix();
3 | }
4 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_display.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Utilities for common `display` values
5 | //
6 |
7 | @each $breakpoint in map-keys($grid-breakpoints) {
8 | @include media-breakpoint-up($breakpoint) {
9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10 |
11 | .d#{$infix}-none { display: none !important; }
12 | .d#{$infix}-inline { display: inline !important; }
13 | .d#{$infix}-inline-block { display: inline-block !important; }
14 | .d#{$infix}-block { display: block !important; }
15 | .d#{$infix}-table { display: table !important; }
16 | .d#{$infix}-table-row { display: table-row !important; }
17 | .d#{$infix}-table-cell { display: table-cell !important; }
18 | .d#{$infix}-flex { display: flex !important; }
19 | .d#{$infix}-inline-flex { display: inline-flex !important; }
20 | }
21 | }
22 |
23 |
24 | //
25 | // Utilities for toggling `display` in print
26 | //
27 |
28 | @media print {
29 | .d-print-none { display: none !important; }
30 | .d-print-inline { display: inline !important; }
31 | .d-print-inline-block { display: inline-block !important; }
32 | .d-print-block { display: block !important; }
33 | .d-print-table { display: table !important; }
34 | .d-print-table-row { display: table-row !important; }
35 | .d-print-table-cell { display: table-cell !important; }
36 | .d-print-flex { display: flex !important; }
37 | .d-print-inline-flex { display: inline-flex !important; }
38 | }
39 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_embed.scss:
--------------------------------------------------------------------------------
1 | // Credit: Nicolas Gallagher and SUIT CSS.
2 |
3 | .embed-responsive {
4 | position: relative;
5 | display: block;
6 | width: 100%;
7 | padding: 0;
8 | overflow: hidden;
9 |
10 | &::before {
11 | display: block;
12 | content: "";
13 | }
14 |
15 | .embed-responsive-item,
16 | iframe,
17 | embed,
18 | object,
19 | video {
20 | position: absolute;
21 | top: 0;
22 | bottom: 0;
23 | left: 0;
24 | width: 100%;
25 | height: 100%;
26 | border: 0;
27 | }
28 | }
29 |
30 | @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
31 | $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
32 | $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
33 |
34 | .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
35 | &::before {
36 | padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_flex.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Flex variation
4 | //
5 | // Custom styles for additional flex alignment options.
6 |
7 | @each $breakpoint in map-keys($grid-breakpoints) {
8 | @include media-breakpoint-up($breakpoint) {
9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10 |
11 | .flex#{$infix}-row { flex-direction: row !important; }
12 | .flex#{$infix}-column { flex-direction: column !important; }
13 | .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
14 | .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
15 |
16 | .flex#{$infix}-wrap { flex-wrap: wrap !important; }
17 | .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
18 | .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
19 | .flex#{$infix}-fill { flex: 1 1 auto !important; }
20 | .flex#{$infix}-grow-0 { flex-grow: 0 !important; }
21 | .flex#{$infix}-grow-1 { flex-grow: 1 !important; }
22 | .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
23 | .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
24 |
25 | .justify-content#{$infix}-start { justify-content: flex-start !important; }
26 | .justify-content#{$infix}-end { justify-content: flex-end !important; }
27 | .justify-content#{$infix}-center { justify-content: center !important; }
28 | .justify-content#{$infix}-between { justify-content: space-between !important; }
29 | .justify-content#{$infix}-around { justify-content: space-around !important; }
30 |
31 | .align-items#{$infix}-start { align-items: flex-start !important; }
32 | .align-items#{$infix}-end { align-items: flex-end !important; }
33 | .align-items#{$infix}-center { align-items: center !important; }
34 | .align-items#{$infix}-baseline { align-items: baseline !important; }
35 | .align-items#{$infix}-stretch { align-items: stretch !important; }
36 |
37 | .align-content#{$infix}-start { align-content: flex-start !important; }
38 | .align-content#{$infix}-end { align-content: flex-end !important; }
39 | .align-content#{$infix}-center { align-content: center !important; }
40 | .align-content#{$infix}-between { align-content: space-between !important; }
41 | .align-content#{$infix}-around { align-content: space-around !important; }
42 | .align-content#{$infix}-stretch { align-content: stretch !important; }
43 |
44 | .align-self#{$infix}-auto { align-self: auto !important; }
45 | .align-self#{$infix}-start { align-self: flex-start !important; }
46 | .align-self#{$infix}-end { align-self: flex-end !important; }
47 | .align-self#{$infix}-center { align-self: center !important; }
48 | .align-self#{$infix}-baseline { align-self: baseline !important; }
49 | .align-self#{$infix}-stretch { align-self: stretch !important; }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_float.scss:
--------------------------------------------------------------------------------
1 | @each $breakpoint in map-keys($grid-breakpoints) {
2 | @include media-breakpoint-up($breakpoint) {
3 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
4 |
5 | .float#{$infix}-left { @include float-left; }
6 | .float#{$infix}-right { @include float-right; }
7 | .float#{$infix}-none { @include float-none; }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_overflow.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @each $value in $overflows {
4 | .overflow-#{$value} { overflow: $value !important; }
5 | }
6 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_position.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Common values
4 | @each $position in $positions {
5 | .position-#{$position} { position: $position !important; }
6 | }
7 |
8 | // Shorthand
9 |
10 | .fixed-top {
11 | position: fixed;
12 | top: 0;
13 | right: 0;
14 | left: 0;
15 | z-index: $zindex-fixed;
16 | }
17 |
18 | .fixed-bottom {
19 | position: fixed;
20 | right: 0;
21 | bottom: 0;
22 | left: 0;
23 | z-index: $zindex-fixed;
24 | }
25 |
26 | .sticky-top {
27 | @supports (position: sticky) {
28 | position: sticky;
29 | top: 0;
30 | z-index: $zindex-sticky;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_screenreaders.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Screenreaders
3 | //
4 |
5 | .sr-only {
6 | @include sr-only();
7 | }
8 |
9 | .sr-only-focusable {
10 | @include sr-only-focusable();
11 | }
12 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_shadows.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | .shadow-sm { box-shadow: $box-shadow-sm !important; }
4 | .shadow { box-shadow: $box-shadow !important; }
5 | .shadow-lg { box-shadow: $box-shadow-lg !important; }
6 | .shadow-none { box-shadow: none !important; }
7 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_sizing.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Width and height
4 |
5 | @each $prop, $abbrev in (width: w, height: h) {
6 | @each $size, $length in $sizes {
7 | .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
8 | }
9 | }
10 |
11 | .mw-100 { max-width: 100% !important; }
12 | .mh-100 { max-height: 100% !important; }
13 |
14 | // Viewport additional helpers
15 |
16 | .min-vw-100 { min-width: 100vw !important; }
17 | .min-vh-100 { min-height: 100vh !important; }
18 |
19 | .vw-100 { width: 100vw !important; }
20 | .vh-100 { height: 100vh !important; }
21 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_spacing.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Margin and Padding
4 |
5 | @each $breakpoint in map-keys($grid-breakpoints) {
6 | @include media-breakpoint-up($breakpoint) {
7 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
8 |
9 | @each $prop, $abbrev in (margin: m, padding: p) {
10 | @each $size, $length in $spacers {
11 | .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
12 | .#{$abbrev}t#{$infix}-#{$size},
13 | .#{$abbrev}y#{$infix}-#{$size} {
14 | #{$prop}-top: $length !important;
15 | }
16 | .#{$abbrev}r#{$infix}-#{$size},
17 | .#{$abbrev}x#{$infix}-#{$size} {
18 | #{$prop}-right: $length !important;
19 | }
20 | .#{$abbrev}b#{$infix}-#{$size},
21 | .#{$abbrev}y#{$infix}-#{$size} {
22 | #{$prop}-bottom: $length !important;
23 | }
24 | .#{$abbrev}l#{$infix}-#{$size},
25 | .#{$abbrev}x#{$infix}-#{$size} {
26 | #{$prop}-left: $length !important;
27 | }
28 | }
29 | }
30 |
31 | // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
32 | @each $size, $length in $spacers {
33 | @if $size != 0 {
34 | .m#{$infix}-n#{$size} { margin: -$length !important; }
35 | .mt#{$infix}-n#{$size},
36 | .my#{$infix}-n#{$size} {
37 | margin-top: -$length !important;
38 | }
39 | .mr#{$infix}-n#{$size},
40 | .mx#{$infix}-n#{$size} {
41 | margin-right: -$length !important;
42 | }
43 | .mb#{$infix}-n#{$size},
44 | .my#{$infix}-n#{$size} {
45 | margin-bottom: -$length !important;
46 | }
47 | .ml#{$infix}-n#{$size},
48 | .mx#{$infix}-n#{$size} {
49 | margin-left: -$length !important;
50 | }
51 | }
52 | }
53 |
54 | // Some special margin utils
55 | .m#{$infix}-auto { margin: auto !important; }
56 | .mt#{$infix}-auto,
57 | .my#{$infix}-auto {
58 | margin-top: auto !important;
59 | }
60 | .mr#{$infix}-auto,
61 | .mx#{$infix}-auto {
62 | margin-right: auto !important;
63 | }
64 | .mb#{$infix}-auto,
65 | .my#{$infix}-auto {
66 | margin-bottom: auto !important;
67 | }
68 | .ml#{$infix}-auto,
69 | .mx#{$infix}-auto {
70 | margin-left: auto !important;
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_text.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Text
5 | //
6 |
7 | .text-monospace { font-family: $font-family-monospace; }
8 |
9 | // Alignment
10 |
11 | .text-justify { text-align: justify !important; }
12 | .text-wrap { white-space: normal !important; }
13 | .text-nowrap { white-space: nowrap !important; }
14 | .text-truncate { @include text-truncate; }
15 |
16 | // Responsive alignment
17 |
18 | @each $breakpoint in map-keys($grid-breakpoints) {
19 | @include media-breakpoint-up($breakpoint) {
20 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
21 |
22 | .text#{$infix}-left { text-align: left !important; }
23 | .text#{$infix}-right { text-align: right !important; }
24 | .text#{$infix}-center { text-align: center !important; }
25 | }
26 | }
27 |
28 | // Transformation
29 |
30 | .text-lowercase { text-transform: lowercase !important; }
31 | .text-uppercase { text-transform: uppercase !important; }
32 | .text-capitalize { text-transform: capitalize !important; }
33 |
34 | // Weight and italics
35 |
36 | .font-weight-light { font-weight: $font-weight-light !important; }
37 | .font-weight-lighter { font-weight: $font-weight-lighter !important; }
38 | .font-weight-normal { font-weight: $font-weight-normal !important; }
39 | .font-weight-bold { font-weight: $font-weight-bold !important; }
40 | .font-weight-bolder { font-weight: $font-weight-bolder !important; }
41 | .font-italic { font-style: italic !important; }
42 |
43 | // Contextual colors
44 |
45 | .text-white { color: $white !important; }
46 |
47 | @each $color, $value in $theme-colors {
48 | @include text-emphasis-variant(".text-#{$color}", $value);
49 | }
50 |
51 | .text-body { color: $body-color !important; }
52 | .text-muted { color: $text-muted !important; }
53 |
54 | .text-black-50 { color: rgba($black, .5) !important; }
55 | .text-white-50 { color: rgba($white, .5) !important; }
56 |
57 | // Misc
58 |
59 | .text-hide {
60 | @include text-hide($ignore-warning: true);
61 | }
62 |
63 | .text-decoration-none { text-decoration: none !important; }
64 |
65 | // Reset
66 |
67 | .text-reset { color: inherit !important; }
68 |
--------------------------------------------------------------------------------
/ui/sass/bootstrap/scss/utilities/_visibility.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Visibility utilities
3 | //
4 |
5 | .visible {
6 | @include invisible(visible);
7 | }
8 |
9 | .invisible {
10 | @include invisible(hidden);
11 | }
12 |
--------------------------------------------------------------------------------
/ui/sass/main.scss:
--------------------------------------------------------------------------------
1 | @import "./bootstrap/scss/bootstrap.scss";
2 | @import "variables.scss";
3 | @import "mixins.scss";
4 | @import "global.scss";
5 | @import "custom.scss";
6 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const CleanWebpackPlugin = require('clean-webpack-plugin');
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 | const webpack = require('webpack');
6 | const TerserPlugin = require('terser-webpack-plugin');
7 | const OptimizeCss = require('optimize-css-assets-webpack-plugin');
8 |
9 | module.exports = {
10 | entry: {
11 | app: './ui/index.js'
12 | },
13 | optimization: {
14 | splitChunks: {
15 | cacheGroups: {
16 | styles: {
17 | name: 'styles',
18 | test: /\.css$/,
19 | chunks: 'all',
20 | enforce: true
21 | }
22 | }
23 | },
24 | minimizer: [
25 | new TerserPlugin({
26 | parallel: true,
27 | terserOptions: {
28 | ecma: 6
29 | }
30 | }),
31 | new OptimizeCss({
32 | cssProcessorOptions: {
33 | discardComments: true
34 | }
35 | })
36 | ]
37 | },
38 | devServer: {
39 | hot: true,
40 | compress: true,
41 | contentBase: path.join(__dirname, 'dist'),
42 | open: 'Chrome'
43 | },
44 | watch: true,
45 | devtool: 'source-map',
46 | output: {
47 | filename: '[name].bundle.js',
48 | path: path.resolve(__dirname, 'dist/js')
49 | },
50 | plugins: [
51 | new CleanWebpackPlugin(['dist']),
52 | new MiniCssExtractPlugin({
53 | filename: '../css/style.css',
54 | chunkFilename: "[name].css"
55 | }),
56 | new webpack.HotModuleReplacementPlugin(),
57 | new HtmlWebpackPlugin({
58 | template: './index.html'
59 | })
60 | ],
61 | module: {
62 | rules: [
63 | {
64 | test: /\.scss$/,
65 | use: [
66 | MiniCssExtractPlugin.loader,
67 | {
68 | loader: "css-loader"
69 | },
70 | "sass-loader"
71 | ]
72 | },
73 | {
74 | test: /\.js$/,
75 | exclude: /node_modules/,
76 | use: ['babel-loader']
77 | }
78 | ]
79 | },
80 | resolve: {
81 | extensions: [
82 | '.js',
83 | '.scss'
84 | ]
85 | }
86 | }
--------------------------------------------------------------------------------
/your_site.com:
--------------------------------------------------------------------------------
1 | server {
2 | listen 80;
3 | server_name www.your_site.com your_site.com;
4 |
5 | root /home/user/apps/your_site/;
6 | if ($http_host != "www.your_site.com") {
7 | rewrite ^ http://www.your_site.com$request_uri permanent;
8 | }
9 | # serve static files
10 | location /static/ {
11 | alias /home/user/apps/your_site/dist/;
12 | expires 365d;
13 | }
14 |
15 | location / {
16 | proxy_pass http://127.0.0.1:9081;
17 | proxy_http_version 1.1;
18 | proxy_set_header Upgrade $http_upgrade;
19 | proxy_set_header Connection 'upgrade';
20 | proxy_set_header Host $host;
21 | proxy_cache_bypass $http_upgrade;
22 |
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
|
9 |