ssg-guideline 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +45 -0
- data/_layouts/default.html +1 -0
- data/_layouts/page.html +5 -0
- data/_layouts/post.html +5 -0
- data/_sass/bootstrap/_alert.scss +55 -0
- data/_sass/bootstrap/_badge.scss +77 -0
- data/_sass/bootstrap/_breadcrumb.scss +38 -0
- data/_sass/bootstrap/_button-group.scss +202 -0
- data/_sass/bootstrap/_buttons.scss +170 -0
- data/_sass/bootstrap/_card.scss +276 -0
- data/_sass/bootstrap/_carousel.scss +178 -0
- data/_sass/bootstrap/_close.scss +31 -0
- data/_sass/bootstrap/_code.scss +64 -0
- data/_sass/bootstrap/_custom-forms.scss +263 -0
- data/_sass/bootstrap/_custom.scss +4 -0
- data/_sass/bootstrap/_dropdown.scss +161 -0
- data/_sass/bootstrap/_forms.scss +388 -0
- data/_sass/bootstrap/_grid.scss +52 -0
- data/_sass/bootstrap/_images.scss +43 -0
- data/_sass/bootstrap/_input-group.scss +178 -0
- data/_sass/bootstrap/_jumbotron.scss +20 -0
- data/_sass/bootstrap/_list-group.scss +141 -0
- data/_sass/bootstrap/_media.scss +8 -0
- data/_sass/bootstrap/_mixins.scss +57 -0
- data/_sass/bootstrap/_modal.scss +142 -0
- data/_sass/bootstrap/_nav.scss +119 -0
- data/_sass/bootstrap/_navbar.scss +268 -0
- data/_sass/bootstrap/_normalize.scss +461 -0
- data/_sass/bootstrap/_pagination.scss +67 -0
- data/_sass/bootstrap/_popover.scss +171 -0
- data/_sass/bootstrap/_print.scss +119 -0
- data/_sass/bootstrap/_progress.scss +32 -0
- data/_sass/bootstrap/_reboot.scss +389 -0
- data/_sass/bootstrap/_responsive-embed.scss +52 -0
- data/_sass/bootstrap/_tables.scss +153 -0
- data/_sass/bootstrap/_tooltip.scss +90 -0
- data/_sass/bootstrap/_transitions.scss +34 -0
- data/_sass/bootstrap/_type.scss +143 -0
- data/_sass/bootstrap/_utilities.scss +13 -0
- data/_sass/bootstrap/_variables.scss +961 -0
- data/_sass/bootstrap/bootstrap-grid.scss +43 -0
- data/_sass/bootstrap/bootstrap-reboot.scss +10 -0
- data/_sass/bootstrap/bootstrap.scss +54 -0
- data/_sass/extra/_syntax-highlighting.scss +71 -0
- data/_sass/main.scss +48 -0
- metadata +132 -0
|
@@ -0,0 +1,389 @@
|
|
|
1
|
+
// scss-lint:disable QualifyingElement, DuplicateProperty
|
|
2
|
+
|
|
3
|
+
// Reboot
|
|
4
|
+
//
|
|
5
|
+
// Global resets to common HTML elements and more for easier usage by Bootstrap.
|
|
6
|
+
// Adds additional rules on top of Normalize.css, including several overrides.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
// Reset the box-sizing
|
|
10
|
+
//
|
|
11
|
+
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
|
12
|
+
// `padding` or `border`s to an element, the overall declared `width` does not
|
|
13
|
+
// change. For example, `width: 100px;` will always be `100px` despite the
|
|
14
|
+
// `border: 10px solid red;` and `padding: 20px;`.
|
|
15
|
+
//
|
|
16
|
+
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
|
17
|
+
// recommendations on resolving such conflicts, see
|
|
18
|
+
// https://getbootstrap.com/getting-started/#third-box-sizing.
|
|
19
|
+
//
|
|
20
|
+
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
|
21
|
+
|
|
22
|
+
html {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
*,
|
|
27
|
+
*::before,
|
|
28
|
+
*::after {
|
|
29
|
+
box-sizing: inherit;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
// Make viewport responsive
|
|
34
|
+
//
|
|
35
|
+
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
|
|
36
|
+
// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
|
|
37
|
+
// Eventually @viewport will replace <meta name="viewport">.
|
|
38
|
+
//
|
|
39
|
+
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
|
|
40
|
+
// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
|
|
41
|
+
// and the fix for that involves a snippet of JavaScript to sniff the user agent
|
|
42
|
+
// and apply some conditional CSS.
|
|
43
|
+
//
|
|
44
|
+
// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
|
|
45
|
+
//
|
|
46
|
+
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
|
|
47
|
+
// `.class-name { @import "bootstrap"; }`).
|
|
48
|
+
@at-root {
|
|
49
|
+
@-ms-viewport { width: device-width; }
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
//
|
|
54
|
+
// Reset HTML, body, and more
|
|
55
|
+
//
|
|
56
|
+
|
|
57
|
+
html {
|
|
58
|
+
// We assume no initial pixel `font-size` for accessibility reasons. This
|
|
59
|
+
// allows web visitors to customize their browser default font-size, making
|
|
60
|
+
// your project more inclusive and accessible to everyone.
|
|
61
|
+
|
|
62
|
+
// As a side-effect of setting the @viewport above,
|
|
63
|
+
// IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
|
|
64
|
+
// Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
|
|
65
|
+
// thus making it hard to click on stuff near the right edge of the page.
|
|
66
|
+
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
|
|
67
|
+
// See https://github.com/twbs/bootstrap/issues/18543
|
|
68
|
+
// and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
|
|
69
|
+
-ms-overflow-style: scrollbar;
|
|
70
|
+
|
|
71
|
+
// Changes the default tap highlight to be completely transparent in iOS.
|
|
72
|
+
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
body {
|
|
76
|
+
font-family: $font-family-base;
|
|
77
|
+
font-size: $font-size-base;
|
|
78
|
+
font-weight: $font-weight-base;
|
|
79
|
+
line-height: $line-height-base;
|
|
80
|
+
// Go easy on the eyes and use something other than `#000` for text
|
|
81
|
+
color: $body-color;
|
|
82
|
+
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
|
83
|
+
background-color: $body-bg;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
|
87
|
+
// This prevents an unwanted focus outline from appearing around elements that
|
|
88
|
+
// might still respond to pointer events.
|
|
89
|
+
//
|
|
90
|
+
// Credit: https://github.com/suitcss/base
|
|
91
|
+
[tabindex="-1"]:focus {
|
|
92
|
+
outline: none !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
//
|
|
97
|
+
// Typography
|
|
98
|
+
//
|
|
99
|
+
|
|
100
|
+
// Remove top margins from headings
|
|
101
|
+
//
|
|
102
|
+
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
|
103
|
+
// margin for easier control within type scales as it avoids margin collapsing.
|
|
104
|
+
h1, h2, h3, h4, h5, h6 {
|
|
105
|
+
margin-top: 0;
|
|
106
|
+
margin-bottom: .5rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// Reset margins on paragraphs
|
|
110
|
+
//
|
|
111
|
+
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
|
112
|
+
// bottom margin to use `rem` units instead of `em`.
|
|
113
|
+
p {
|
|
114
|
+
margin-top: 0;
|
|
115
|
+
margin-bottom: 1rem;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// Abbreviations
|
|
119
|
+
abbr[title],
|
|
120
|
+
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
|
121
|
+
abbr[data-original-title] {
|
|
122
|
+
cursor: help;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
address {
|
|
126
|
+
margin-bottom: 1rem;
|
|
127
|
+
font-style: normal;
|
|
128
|
+
line-height: inherit;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
ol,
|
|
132
|
+
ul,
|
|
133
|
+
dl {
|
|
134
|
+
margin-top: 0;
|
|
135
|
+
margin-bottom: 1rem;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
ol ol,
|
|
139
|
+
ul ul,
|
|
140
|
+
ol ul,
|
|
141
|
+
ul ol {
|
|
142
|
+
margin-bottom: 0;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
dt {
|
|
146
|
+
font-weight: $dt-font-weight;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
dd {
|
|
150
|
+
margin-bottom: .5rem;
|
|
151
|
+
margin-left: 0; // Undo browser default
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
blockquote {
|
|
155
|
+
margin: 0 0 1rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
//
|
|
160
|
+
// Links
|
|
161
|
+
//
|
|
162
|
+
|
|
163
|
+
a {
|
|
164
|
+
color: $link-color;
|
|
165
|
+
text-decoration: $link-decoration;
|
|
166
|
+
|
|
167
|
+
@include hover-focus {
|
|
168
|
+
color: $link-hover-color;
|
|
169
|
+
text-decoration: $link-hover-decoration;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// And undo these styles for placeholder links/named anchors (without href)
|
|
174
|
+
// which have not been made explicitly keyboard-focusable (without tabindex).
|
|
175
|
+
// It would be more straightforward to just use a[href] in previous block, but that
|
|
176
|
+
// causes specificity issues in many other styles that are too complex to fix.
|
|
177
|
+
// See https://github.com/twbs/bootstrap/issues/19402
|
|
178
|
+
|
|
179
|
+
a:not([href]):not([tabindex]) {
|
|
180
|
+
color: inherit;
|
|
181
|
+
text-decoration: none;
|
|
182
|
+
|
|
183
|
+
@include hover-focus {
|
|
184
|
+
color: inherit;
|
|
185
|
+
text-decoration: none;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
&:focus {
|
|
189
|
+
outline: 0;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
//
|
|
195
|
+
// Code
|
|
196
|
+
//
|
|
197
|
+
|
|
198
|
+
pre {
|
|
199
|
+
// Remove browser default top margin
|
|
200
|
+
margin-top: 0;
|
|
201
|
+
// Reset browser default of `1em` to use `rem`s
|
|
202
|
+
margin-bottom: 1rem;
|
|
203
|
+
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
|
|
204
|
+
overflow: auto;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
//
|
|
209
|
+
// Figures
|
|
210
|
+
//
|
|
211
|
+
|
|
212
|
+
figure {
|
|
213
|
+
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
|
214
|
+
// We reset that to create a better flow in-page.
|
|
215
|
+
margin: 0 0 1rem;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
//
|
|
220
|
+
// Images
|
|
221
|
+
//
|
|
222
|
+
|
|
223
|
+
img {
|
|
224
|
+
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
|
225
|
+
// centers them. This won't apply should you reset them to `block` level.
|
|
226
|
+
vertical-align: middle;
|
|
227
|
+
// Note: `<img>`s are deliberately not made responsive by default.
|
|
228
|
+
// For the rationale behind this, see the comments on the `.img-fluid` class.
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
// iOS "clickable elements" fix for role="button"
|
|
233
|
+
//
|
|
234
|
+
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
|
235
|
+
// for traditionally non-focusable elements with role="button"
|
|
236
|
+
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
|
237
|
+
|
|
238
|
+
[role="button"] {
|
|
239
|
+
cursor: pointer;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
|
244
|
+
//
|
|
245
|
+
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
|
246
|
+
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
|
247
|
+
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
|
248
|
+
// See:
|
|
249
|
+
// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
|
250
|
+
// * http://caniuse.com/#feat=css-touch-action
|
|
251
|
+
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
|
252
|
+
|
|
253
|
+
a,
|
|
254
|
+
area,
|
|
255
|
+
button,
|
|
256
|
+
[role="button"],
|
|
257
|
+
input,
|
|
258
|
+
label,
|
|
259
|
+
select,
|
|
260
|
+
summary,
|
|
261
|
+
textarea {
|
|
262
|
+
touch-action: manipulation;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
//
|
|
267
|
+
// Tables
|
|
268
|
+
//
|
|
269
|
+
|
|
270
|
+
table {
|
|
271
|
+
// No longer part of Normalize since v4
|
|
272
|
+
border-collapse: collapse;
|
|
273
|
+
// Reset for nesting within parents with `background-color`.
|
|
274
|
+
background-color: $table-bg;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
caption {
|
|
278
|
+
padding-top: $table-cell-padding;
|
|
279
|
+
padding-bottom: $table-cell-padding;
|
|
280
|
+
color: $text-muted;
|
|
281
|
+
text-align: left;
|
|
282
|
+
caption-side: bottom;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
th {
|
|
286
|
+
// Centered by default, but left-align-ed to match the `td`s below.
|
|
287
|
+
text-align: left;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
//
|
|
292
|
+
// Forms
|
|
293
|
+
//
|
|
294
|
+
|
|
295
|
+
label {
|
|
296
|
+
// Allow labels to use `margin` for spacing.
|
|
297
|
+
display: inline-block;
|
|
298
|
+
margin-bottom: .5rem;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
// Work around a Firefox/IE bug where the transparent `button` background
|
|
302
|
+
// results in a loss of the default `button` focus styles.
|
|
303
|
+
//
|
|
304
|
+
// Credit: https://github.com/suitcss/base/
|
|
305
|
+
button:focus {
|
|
306
|
+
outline: 1px dotted;
|
|
307
|
+
outline: 5px auto -webkit-focus-ring-color;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
input,
|
|
311
|
+
button,
|
|
312
|
+
select,
|
|
313
|
+
textarea {
|
|
314
|
+
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
|
|
315
|
+
// properly inherited. However, `line-height` isn't inherited there.
|
|
316
|
+
line-height: inherit;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
input[type="radio"],
|
|
320
|
+
input[type="checkbox"] {
|
|
321
|
+
// Apply a disabled cursor for radios and checkboxes.
|
|
322
|
+
//
|
|
323
|
+
// Note: Neither radios nor checkboxes can be readonly.
|
|
324
|
+
&:disabled {
|
|
325
|
+
cursor: $cursor-disabled;
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
input[type="date"],
|
|
331
|
+
input[type="time"],
|
|
332
|
+
input[type="datetime-local"],
|
|
333
|
+
input[type="month"] {
|
|
334
|
+
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
|
335
|
+
// bug where setting a custom line-height prevents text from being vertically
|
|
336
|
+
// centered within the input.
|
|
337
|
+
// See https://bugs.webkit.org/show_bug.cgi?id=139848
|
|
338
|
+
// and https://github.com/twbs/bootstrap/issues/11266
|
|
339
|
+
-webkit-appearance: listbox;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
textarea {
|
|
343
|
+
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
|
344
|
+
resize: vertical;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
fieldset {
|
|
348
|
+
// Browsers set a default `min-width: min-content;` on fieldsets,
|
|
349
|
+
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
|
350
|
+
// So we reset that to ensure fieldsets behave more like a standard block element.
|
|
351
|
+
// See https://github.com/twbs/bootstrap/issues/12359
|
|
352
|
+
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
|
353
|
+
min-width: 0;
|
|
354
|
+
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
|
355
|
+
padding: 0;
|
|
356
|
+
margin: 0;
|
|
357
|
+
border: 0;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
legend {
|
|
361
|
+
// Reset the entire legend element to match the `fieldset`
|
|
362
|
+
display: block;
|
|
363
|
+
width: 100%;
|
|
364
|
+
padding: 0;
|
|
365
|
+
margin-bottom: .5rem;
|
|
366
|
+
font-size: 1.5rem;
|
|
367
|
+
line-height: inherit;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
input[type="search"] {
|
|
371
|
+
// This overrides the extra rounded corners on search inputs in iOS so that our
|
|
372
|
+
// `.form-control` class can properly style them. Note that this cannot simply
|
|
373
|
+
// be added to `.form-control` as it's not specific enough. For details, see
|
|
374
|
+
// https://github.com/twbs/bootstrap/issues/11586.
|
|
375
|
+
-webkit-appearance: none;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
// todo: needed?
|
|
379
|
+
output {
|
|
380
|
+
display: inline-block;
|
|
381
|
+
// font-size: $font-size-base;
|
|
382
|
+
// line-height: $line-height;
|
|
383
|
+
// color: $input-color;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
|
387
|
+
[hidden] {
|
|
388
|
+
display: none !important;
|
|
389
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
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
|
+
.embed-responsive-21by9 {
|
|
31
|
+
&::before {
|
|
32
|
+
padding-top: percentage(9 / 21);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.embed-responsive-16by9 {
|
|
37
|
+
&::before {
|
|
38
|
+
padding-top: percentage(9 / 16);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.embed-responsive-4by3 {
|
|
43
|
+
&::before {
|
|
44
|
+
padding-top: percentage(3 / 4);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.embed-responsive-1by1 {
|
|
49
|
+
&::before {
|
|
50
|
+
padding-top: percentage(1 / 1);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Basic Bootstrap table
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
.table {
|
|
6
|
+
width: 100%;
|
|
7
|
+
max-width: 100%;
|
|
8
|
+
margin-bottom: $spacer;
|
|
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-sm-cell-padding;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
// Bordered version
|
|
45
|
+
//
|
|
46
|
+
// Add 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
|
+
|
|
65
|
+
// Zebra-striping
|
|
66
|
+
//
|
|
67
|
+
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
|
68
|
+
|
|
69
|
+
.table-striped {
|
|
70
|
+
tbody tr:nth-of-type(odd) {
|
|
71
|
+
background-color: $table-bg-accent;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
// Hover effect
|
|
77
|
+
//
|
|
78
|
+
// Placed here since it has to come after the potential zebra striping
|
|
79
|
+
|
|
80
|
+
.table-hover {
|
|
81
|
+
tbody tr {
|
|
82
|
+
@include hover {
|
|
83
|
+
background-color: $table-bg-hover;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
// Table backgrounds
|
|
90
|
+
//
|
|
91
|
+
// Exact selectors below required to override `.table-striped` and prevent
|
|
92
|
+
// inheritance to nested tables.
|
|
93
|
+
|
|
94
|
+
// Generate the contextual variants
|
|
95
|
+
@include table-row-variant(active, $table-bg-active);
|
|
96
|
+
@include table-row-variant(success, $state-success-bg);
|
|
97
|
+
@include table-row-variant(info, $state-info-bg);
|
|
98
|
+
@include table-row-variant(warning, $state-warning-bg);
|
|
99
|
+
@include table-row-variant(danger, $state-danger-bg);
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
// Inverse styles
|
|
103
|
+
//
|
|
104
|
+
// Same table markup, but inverted color scheme: dark background and light text.
|
|
105
|
+
|
|
106
|
+
.thead-inverse {
|
|
107
|
+
th {
|
|
108
|
+
color: $table-inverse-color;
|
|
109
|
+
background-color: $table-inverse-bg;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.thead-default {
|
|
114
|
+
th {
|
|
115
|
+
color: $table-head-color;
|
|
116
|
+
background-color: $table-head-bg;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.table-inverse {
|
|
121
|
+
color: $table-inverse-color;
|
|
122
|
+
background-color: $table-inverse-bg;
|
|
123
|
+
|
|
124
|
+
th,
|
|
125
|
+
td,
|
|
126
|
+
thead th {
|
|
127
|
+
border-color: $body-bg;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&.table-bordered {
|
|
131
|
+
border: 0;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
// Responsive tables
|
|
138
|
+
//
|
|
139
|
+
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
|
|
140
|
+
// enabling horizontal scrolling. Only applies <768px. Everything above that
|
|
141
|
+
// will display normally.
|
|
142
|
+
|
|
143
|
+
.table-responsive {
|
|
144
|
+
display: block;
|
|
145
|
+
width: 100%;
|
|
146
|
+
overflow-x: auto;
|
|
147
|
+
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
|
148
|
+
|
|
149
|
+
// Prevent double border on horizontal scroll due to use of `display: block;`
|
|
150
|
+
&.table-bordered {
|
|
151
|
+
border: 0;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
// Base class
|
|
2
|
+
.tooltip {
|
|
3
|
+
position: absolute;
|
|
4
|
+
z-index: $zindex-tooltip;
|
|
5
|
+
display: block;
|
|
6
|
+
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
|
7
|
+
// So reset our font and text properties to avoid inheriting weird values.
|
|
8
|
+
@include reset-text();
|
|
9
|
+
font-size: $font-size-sm;
|
|
10
|
+
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
|
11
|
+
word-wrap: break-word;
|
|
12
|
+
opacity: 0;
|
|
13
|
+
|
|
14
|
+
&.show { opacity: $tooltip-opacity; }
|
|
15
|
+
|
|
16
|
+
&.tooltip-top,
|
|
17
|
+
&.bs-tether-element-attached-bottom {
|
|
18
|
+
padding: $tooltip-arrow-width 0;
|
|
19
|
+
margin-top: -$tooltip-margin;
|
|
20
|
+
|
|
21
|
+
.tooltip-inner::before {
|
|
22
|
+
bottom: 0;
|
|
23
|
+
left: 50%;
|
|
24
|
+
margin-left: -$tooltip-arrow-width;
|
|
25
|
+
content: "";
|
|
26
|
+
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
|
27
|
+
border-top-color: $tooltip-arrow-color;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
&.tooltip-right,
|
|
31
|
+
&.bs-tether-element-attached-left {
|
|
32
|
+
padding: 0 $tooltip-arrow-width;
|
|
33
|
+
margin-left: $tooltip-margin;
|
|
34
|
+
|
|
35
|
+
.tooltip-inner::before {
|
|
36
|
+
top: 50%;
|
|
37
|
+
left: 0;
|
|
38
|
+
margin-top: -$tooltip-arrow-width;
|
|
39
|
+
content: "";
|
|
40
|
+
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
|
41
|
+
border-right-color: $tooltip-arrow-color;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
&.tooltip-bottom,
|
|
45
|
+
&.bs-tether-element-attached-top {
|
|
46
|
+
padding: $tooltip-arrow-width 0;
|
|
47
|
+
margin-top: $tooltip-margin;
|
|
48
|
+
|
|
49
|
+
.tooltip-inner::before {
|
|
50
|
+
top: 0;
|
|
51
|
+
left: 50%;
|
|
52
|
+
margin-left: -$tooltip-arrow-width;
|
|
53
|
+
content: "";
|
|
54
|
+
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
|
55
|
+
border-bottom-color: $tooltip-arrow-color;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
&.tooltip-left,
|
|
59
|
+
&.bs-tether-element-attached-right {
|
|
60
|
+
padding: 0 $tooltip-arrow-width;
|
|
61
|
+
margin-left: -$tooltip-margin;
|
|
62
|
+
|
|
63
|
+
.tooltip-inner::before {
|
|
64
|
+
top: 50%;
|
|
65
|
+
right: 0;
|
|
66
|
+
margin-top: -$tooltip-arrow-width;
|
|
67
|
+
content: "";
|
|
68
|
+
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
|
69
|
+
border-left-color: $tooltip-arrow-color;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// Wrapper for the tooltip content
|
|
75
|
+
.tooltip-inner {
|
|
76
|
+
max-width: $tooltip-max-width;
|
|
77
|
+
padding: $tooltip-padding-y $tooltip-padding-x;
|
|
78
|
+
color: $tooltip-color;
|
|
79
|
+
text-align: center;
|
|
80
|
+
background-color: $tooltip-bg;
|
|
81
|
+
@include border-radius($border-radius);
|
|
82
|
+
|
|
83
|
+
&::before {
|
|
84
|
+
position: absolute;
|
|
85
|
+
width: 0;
|
|
86
|
+
height: 0;
|
|
87
|
+
border-color: transparent;
|
|
88
|
+
border-style: solid;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.fade {
|
|
2
|
+
opacity: 0;
|
|
3
|
+
@include transition($transition-fade);
|
|
4
|
+
|
|
5
|
+
&.show {
|
|
6
|
+
opacity: 1;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.collapse {
|
|
11
|
+
display: none;
|
|
12
|
+
&.show {
|
|
13
|
+
display: block;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
tr {
|
|
18
|
+
&.collapse.show {
|
|
19
|
+
display: table-row;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
tbody {
|
|
24
|
+
&.collapse.show {
|
|
25
|
+
display: table-row-group;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.collapsing {
|
|
30
|
+
position: relative;
|
|
31
|
+
height: 0;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
@include transition($transition-collapse);
|
|
34
|
+
}
|