From bbf135586f990ba8a03dd584919c17ecd4b9138d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 5 Nov 2018 14:22:44 +0800 Subject: Add Changelog to What's New section --- docs/src/_docs-layout.pug | 5 ++- docs/src/components.pug | 2 ++ docs/src/contents/whatsnew.pug | 79 ++---------------------------------------- docs/src/elements.pug | 3 +- docs/src/experimentals.pug | 2 ++ docs/src/getting-started.pug | 4 +++ docs/src/layout.pug | 1 + docs/src/scss/docs.scss | 5 +-- docs/src/utilities.pug | 1 + 9 files changed, 21 insertions(+), 81 deletions(-) (limited to 'docs/src') diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug index 23a3f5b..9aa50e7 100644 --- a/docs/src/_docs-layout.pug +++ b/docs/src/_docs-layout.pug @@ -6,7 +6,10 @@ block content .docs-navbar a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar') i.icon.icon-menu - a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub + .btns + a.btn.btn-primary.float-right(href='https://github.com/picturepan2/spectre' target='_blank') GitHub + a.btn.mr-1.float-right(href='https://www.paypal.me/picturepan2' target='_blank') Sponsor + #sidebar.docs-sidebar.off-canvas-sidebar .docs-brand a.docs-logo(href='index.html') diff --git a/docs/src/components.pug b/docs/src/components.pug index 9f0ee6a..3af49c8 100644 --- a/docs/src/components.pug +++ b/docs/src/components.pug @@ -42,6 +42,7 @@ block docs-content //- Menu +docs-heading('menu', 'Menu') + include contents/_ad-g.pug include contents/menu.pug //- Modals @@ -70,6 +71,7 @@ block docs-content //- Tabs +docs-heading('tabs', 'Tabs') + include contents/_ad-g.pug include contents/tabs.pug //- Tiles diff --git a/docs/src/contents/whatsnew.pug b/docs/src/contents/whatsnew.pug index 0c38102..59ae1c2 100644 --- a/docs/src/contents/whatsnew.pug +++ b/docs/src/contents/whatsnew.pug @@ -1,79 +1,4 @@ -p - strong September 2017 -ul - li - a(href='experimentals.html#off-canvas') Off-canvas - | : navigation layout that the sidebar can slide in and out of the viewport - small.label.label-primary NEW -p - strong August 2017 -ul - li - a(href='getting-started.html') Switch to Sass - small.label.label-primary NEW - li - a(href='getting-started.html') New Docs Experience - small.label.label-primary NEW -p - strong April 2017 -ul - li - a(href='components.html#accordions') Accordions - | : used to toggle sections of content - li - a(href='experimentals.html#filters') Filters - | : CSS only content filters - li - a(href='experimentals.html#comparison') Comparison Sliders - | : sliders for comparing two images - li - a(href='experimentals.html#timelines') Timelines - | : ordered sequences of activities -p - strong March 2017 -ul - li - a(href='elements.html#icons') Icons - | : single-element, responsive and pure CSS icons - li - a(href='components.html#popovers') Popovers - | : small overlay content containers - li - a(href='layout.html#panels') Panels - | : flexible view container layout with auto-expand content section - li - a(href='experimentals.html#carousels') Carousels - | : slideshows for cycling images - li - a(href='experimentals.html#calendars') Calendars - | : date or date range picker and events display -p - strong February 2017 -ul - li New Documents experience - li - a(href='components.html#bars') Bars - | : represent the progress of a task or the value within the known range - li - a(href='components.html#steps') Steps - | : progress indicators of a sequence of task steps - li - a(href='components.html#tiles') Tiles - | : repeatable or embeddable information blocks - li - a(href='experimentals.html') Experimentals - | : experimental elements and features - li - a(href='experimentals.html#meters') Meters - | , - a(href='experimentals.html#parallax') Parallax - | , - a(href='experimentals.html#progress') Progress - | and - a(href='experimentals.html#sliders') Sliders -p - strong March 2016 -ul - li Initial commit +include:markdown-it ../../../changelog.md + p a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Releases \ No newline at end of file diff --git a/docs/src/elements.pug b/docs/src/elements.pug index c80dba2..3f2086f 100644 --- a/docs/src/elements.pug +++ b/docs/src/elements.pug @@ -13,11 +13,12 @@ block docs-content //- Tables +docs-heading('tables', 'Tables') + include contents/_ad-c.pug include contents/tables.pug //- Buttons +docs-heading('buttons', 'Buttons') - include contents/_ad-c.pug + include contents/_ad-g.pug include contents/buttons.pug //- Forms diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug index c21a2a4..41936b6 100644 --- a/docs/src/experimentals.pug +++ b/docs/src/experimentals.pug @@ -26,6 +26,7 @@ block docs-content //- Comparison sliders +docs-heading('comparison', 'Comparison sliders') + include contents/_ad-g.pug include contents/comparison.pug //- Filters @@ -42,6 +43,7 @@ block docs-content //- Parallax +docs-heading('parallax', 'Parallax') + include contents/_ad-g.pug include contents/parallax.pug //- Progress diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug index b766ba6..60e1665 100644 --- a/docs/src/getting-started.pug +++ b/docs/src/getting-started.pug @@ -8,6 +8,7 @@ block variables block docs-content //- Introduction +docs-heading('introduction', 'Introduction') + include contents/_ad-g.pug include contents/introduction.pug //- Installation @@ -22,13 +23,16 @@ block docs-content //- Accessibility +docs-heading('accessibility', 'Accessibility') + include contents/_ad-g.pug //- Browser support +docs-heading('browsers', 'Browser support') + include contents/_ad-g.pug include contents/browsers.pug //- What's new +docs-heading('whatsnew', 'What\'s new') + include contents/_ad-g.pug include contents/whatsnew.pug include _footer.pug diff --git a/docs/src/layout.pug b/docs/src/layout.pug index 5aa8bc5..4b1bd50 100644 --- a/docs/src/layout.pug +++ b/docs/src/layout.pug @@ -18,6 +18,7 @@ block docs-content //- Navbar +docs-heading('navbar', 'Navbar') + include contents/_ad-g.pug include contents/navbar.pug include _footer.pug \ No newline at end of file diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss index 7f7c682..0fed87c 100644 --- a/docs/src/scss/docs.scss +++ b/docs/src/scss/docs.scss @@ -31,10 +31,11 @@ top: 0; z-index: $zindex-1; - .btn { + .btns { position: absolute; right: 1.5rem; top: 1rem; + width: 8rem; } } @@ -532,7 +533,7 @@ } .docs-navbar { - .btn { + .btns { right: .9rem; } } diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug index 8af2055..c9e8ba2 100644 --- a/docs/src/utilities.pug +++ b/docs/src/utilities.pug @@ -26,6 +26,7 @@ block docs-content //- Loading +docs-heading('loading', 'Loading') + include contents/_ad-g.pug include contents/loading.pug //- Position -- cgit v1.3.1-23-gd82d From 68a5da437deb98b552c2ce56a87becb91e17f61c Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 5 Nov 2018 15:07:26 +0800 Subject: Update Docs SEO --- docs/components.html | 2 ++ docs/elements.html | 2 ++ docs/experimentals.html | 2 ++ docs/getting-started.html | 2 ++ docs/index.html | 4 +++- docs/layout.html | 2 ++ docs/src/_layout.pug | 13 ++++++++++++- docs/src/_mixins.pug | 2 +- docs/src/components.pug | 4 ++-- docs/src/elements.pug | 4 ++-- docs/src/experimentals.pug | 4 ++-- docs/src/getting-started.pug | 4 ++-- docs/src/index.pug | 2 +- docs/src/layout.pug | 4 ++-- docs/src/utilities.pug | 4 ++-- docs/utilities.html | 2 ++ 16 files changed, 41 insertions(+), 16 deletions(-) (limited to 'docs/src') diff --git a/docs/components.html b/docs/components.html index fb05df4..a931381 100644 --- a/docs/components.html +++ b/docs/components.html @@ -6,6 +6,7 @@ + @@ -13,6 +14,7 @@ +
diff --git a/docs/elements.html b/docs/elements.html index f7a196a..174bda8 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -6,6 +6,7 @@ + @@ -13,6 +14,7 @@ +
diff --git a/docs/experimentals.html b/docs/experimentals.html index b6a535a..47c51e9 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -6,6 +6,7 @@ + @@ -13,6 +14,7 @@ +
diff --git a/docs/getting-started.html b/docs/getting-started.html index 95c1e6e..3046848 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -6,6 +6,7 @@ + @@ -13,6 +14,7 @@ +
diff --git a/docs/index.html b/docs/index.html index 1445c23..64b8f71 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,6 +6,7 @@ + @@ -13,13 +14,14 @@ +
-

Spectre.css

+

SPECTRE.CSS

A Lightweight, Responsive and diff --git a/docs/layout.html b/docs/layout.html index f3549b5..11f9ab6 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -6,6 +6,7 @@ + @@ -13,6 +14,7 @@ +
diff --git a/docs/src/_layout.pug b/docs/src/_layout.pug index ad32f32..511d798 100644 --- a/docs/src/_layout.pug +++ b/docs/src/_layout.pug @@ -1,6 +1,15 @@ +block global + - var domain = 'https://picturepan2.github.io/spectre/' + block variables + - var slug = '' - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework' - - var description = '' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +if slug + - var url = domain + slug + '.html' +else + - var url = domain doctype html html(lang='en') @@ -10,6 +19,7 @@ html(lang='en') meta(name='robots' content='index, follow') meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no') meta(http-equiv='x-ua-compatible' content='ie=edge') + meta(name='description' content= description) meta(name='author' content='Yan Zhu') link(rel='shortcut icon' href='img/favicons/favicon.ico') link(rel='icon' href='img/favicons/favicon.png') @@ -17,6 +27,7 @@ html(lang='en') link(rel='stylesheet' href='dist/spectre-icons.min.css') link(rel='stylesheet' href='dist/spectre-exp.min.css') link(rel='stylesheet' href='dist/docs.min.css') + link(rel='canonical' href= url) body block content diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug index fa08cf6..e9f125e 100644 --- a/docs/src/_mixins.pug +++ b/docs/src/_mixins.pug @@ -1,6 +1,6 @@ mixin docs-accordion(id, name, ...pages) .accordion - input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(current === id ? true : false)) + input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(slug === id ? true : false)) label.accordion-header.c-hand(for='accordion-' + id)= name .accordion-body ul.menu.menu-nav diff --git a/docs/src/components.pug b/docs/src/components.pug index 3af49c8..a9150d8 100644 --- a/docs/src/components.pug +++ b/docs/src/components.pug @@ -1,9 +1,9 @@ extends _docs-layout.pug block variables + - var slug = 'components' - var title = 'Components - Spectre.css CSS Framework' - - var description = '' - - var current = 'components' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content //- Accordions diff --git a/docs/src/elements.pug b/docs/src/elements.pug index 3f2086f..17ea619 100644 --- a/docs/src/elements.pug +++ b/docs/src/elements.pug @@ -1,9 +1,9 @@ extends _docs-layout.pug block variables + - var slug = 'elements' - var title = 'Elements - Spectre.css CSS Framework' - - var description = '' - - var current = 'elements' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content //- Typography diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug index 41936b6..c888878 100644 --- a/docs/src/experimentals.pug +++ b/docs/src/experimentals.pug @@ -1,9 +1,9 @@ extends _docs-layout.pug block variables + - var slug = 'experimentals' - var title = 'Experimentals - Spectre.css CSS Framework' - - var description = '' - - var current = 'experimentals' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content //- Experimentals diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug index 60e1665..89c668b 100644 --- a/docs/src/getting-started.pug +++ b/docs/src/getting-started.pug @@ -1,9 +1,9 @@ extends _docs-layout.pug block variables + - var slug = 'getting-started' - var title = 'Getting started - Spectre.css CSS Framework' - - var description = '' - - var current = 'getting-started' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content //- Introduction diff --git a/docs/src/index.pug b/docs/src/index.pug index 58de518..791a813 100644 --- a/docs/src/index.pug +++ b/docs/src/index.pug @@ -7,7 +7,7 @@ block content a.docs-logo(href='index.html') img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework') h2 SPECTRE - h1 Spectre.css + h1 SPECTRE.CSS h2 | A #[u Lightweight], #[u Responsive] and #[u Modern] CSS Framework p diff --git a/docs/src/layout.pug b/docs/src/layout.pug index 4b1bd50..9df424a 100644 --- a/docs/src/layout.pug +++ b/docs/src/layout.pug @@ -1,9 +1,9 @@ extends _docs-layout.pug block variables + - var slug = 'layout' - var title = 'Layout - Spectre.css CSS Framework' - - var description = '' - - var current = 'layout' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content //- Flexbox grid diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug index c9e8ba2..e3a2b5f 100644 --- a/docs/src/utilities.pug +++ b/docs/src/utilities.pug @@ -1,9 +1,9 @@ extends _docs-layout.pug block variables + - var slug = 'utilities' - var title = 'Utilities - Spectre.css CSS Framework' - - var description = '' - - var current = 'utilities' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' block docs-content //- Colors diff --git a/docs/utilities.html b/docs/utilities.html index eb89ed7..7fad7e0 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -6,6 +6,7 @@ + @@ -13,6 +14,7 @@ +
-- cgit v1.3.1-23-gd82d From 13b42d4c792f0a579d2d974492e13cd77d6f77f7 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 5 Nov 2018 16:11:06 +0800 Subject: Fix circle -> s-circle #489 --- docs/elements.html | 10 +++++----- docs/src/contents/buttons.pug | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) (limited to 'docs/src') diff --git a/docs/elements.html b/docs/elements.html index 174bda8..91a4174 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -527,7 +527,7 @@ <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button> <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button> -

Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

+

Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).

@@ -535,13 +535,13 @@
- - - + + + 
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>

Button states

Add the active class for active button state style.

diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug index 3fbf5da..4cad7a3 100644 --- a/docs/src/contents/buttons.pug +++ b/docs/src/contents/buttons.pug @@ -73,7 +73,7 @@ pre.code(data-lang='HTML') p - | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB). + | Please note that you could use the #[code btn-action] class for a square button, or add another #[code s-circle] class for a round button, which is often used as a Float Action Button (FAB). .docs-demo.columns .column.col-xs-12 @@ -84,18 +84,18 @@ p button.btn.btn-action.btn-primary.btn-sm i.icon.icon-menu .column.col-xs-12 - button.btn.btn-action.btn-primary.btn-lg.circle + button.btn.btn-action.btn-primary.btn-lg.s-circle i.icon.icon-arrow-up - button.btn.btn-action.btn-primary.circle + button.btn.btn-action.btn-primary.s-circle i.icon.icon-arrow-up - button.btn.btn-action.btn-primary.btn-sm.circle + button.btn.btn-action.btn-primary.btn-sm.s-circle i.icon.icon-arrow-up pre.code(data-lang='HTML') code :highlight(lang="html") - + +docs-subheading('buttons-states', 'Button states') -- cgit v1.3.1-23-gd82d From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- dist/spectre.css | 7 +- dist/spectre.min.css | 2 +- docs/components.html | 1677 ++--------------------------- docs/components/accordions.html | 328 ++++++ docs/components/avatars.html | 295 +++++ docs/components/badges.html | 267 +++++ docs/components/bars.html | 307 ++++++ docs/components/breadcrumbs.html | 261 +++++ docs/components/cards.html | 313 ++++++ docs/components/chips.html | 250 +++++ docs/components/empty.html | 276 +++++ docs/components/menu.html | 377 +++++++ docs/components/modals.html | 353 ++++++ docs/components/nav.html | 273 +++++ docs/components/pagination.html | 306 ++++++ docs/components/panels.html | 353 ++++++ docs/components/popovers.html | 314 ++++++ docs/components/steps.html | 261 +++++ docs/components/tabs.html | 320 ++++++ docs/components/tiles.html | 314 ++++++ docs/components/toasts.html | 268 +++++ docs/components/tooltips.html | 246 +++++ docs/dist/spectre-rtl.css | 7 +- docs/dist/spectre-rtl.min.css | 2 +- docs/dist/spectre.css | 7 +- docs/dist/spectre.min.css | 2 +- docs/elements.html | 1675 ++-------------------------- docs/elements/buttons.html | 367 +++++++ docs/elements/code.html | 239 ++++ docs/elements/forms.html | 962 +++++++++++++++++ docs/elements/icons.html | 410 +++++++ docs/elements/labels.html | 241 +++++ docs/elements/media.html | 282 +++++ docs/elements/tables.html | 338 ++++++ docs/elements/typography.html | 416 +++++++ docs/experimentals.html | 1133 ++----------------- docs/experimentals/autocomplete.html | 327 ++++++ docs/experimentals/calendars.html | 585 ++++++++++ docs/experimentals/carousels.html | 294 +++++ docs/experimentals/comparison.html | 250 +++++ docs/experimentals/filters.html | 366 +++++++ docs/experimentals/meters.html | 246 +++++ docs/experimentals/off-canvas.html | 262 +++++ docs/experimentals/parallax.html | 255 +++++ docs/experimentals/progress.html | 241 +++++ docs/experimentals/sliders.html | 240 +++++ docs/experimentals/timelines.html | 298 +++++ docs/getting-started.html | 733 ++----------- docs/getting-started/browsers.html | 233 ++++ docs/getting-started/custom.html | 423 ++++++++ docs/getting-started/installation.html | 247 +++++ docs/getting-started/whatsnew.html | 482 +++++++++ docs/index.html | 5 +- docs/layout.html | 720 ++----------- docs/layout/grid.html | 415 +++++++ docs/layout/navbar.html | 279 +++++ docs/layout/responsive.html | 500 +++++++++ docs/src/_docs-layout.pug | 102 -- docs/src/_footer.pug | 19 - docs/src/_layout.pug | 44 - docs/src/_layout/_ad-c.pug | 3 + docs/src/_layout/_ad-g.pug | 13 + docs/src/_layout/_docs-layout.pug | 106 ++ docs/src/_layout/_footer.pug | 19 + docs/src/_layout/_layout.pug | 57 + docs/src/_layout/_mixins.pug | 25 + docs/src/_mixins.pug | 22 - docs/src/components.pug | 84 +- docs/src/components/accordions.pug | 129 +++ docs/src/components/avatars.pug | 114 ++ docs/src/components/badges.pug | 75 ++ docs/src/components/bars.pug | 98 ++ docs/src/components/breadcrumbs.pug | 61 ++ docs/src/components/cards.pug | 110 ++ docs/src/components/chips.pug | 60 ++ docs/src/components/empty.pug | 66 ++ docs/src/components/menu.pug | 200 ++++ docs/src/components/modals.pug | 157 +++ docs/src/components/nav.pug | 73 ++ docs/src/components/pagination.pug | 118 ++ docs/src/components/panels.pug | 130 +++ docs/src/components/popovers.pug | 99 ++ docs/src/components/steps.pug | 62 ++ docs/src/components/tabs.pug | 148 +++ docs/src/components/tiles.pug | 108 ++ docs/src/components/toasts.pug | 65 ++ docs/src/components/tooltips.pug | 40 + docs/src/contents/_ad-c.pug | 3 - docs/src/contents/_ad-g.pug | 13 - docs/src/contents/accordions.pug | 113 -- docs/src/contents/autocomplete.pug | 119 -- docs/src/contents/avatars.pug | 98 -- docs/src/contents/badges.pug | 59 - docs/src/contents/bars.pug | 82 -- docs/src/contents/breadcrumbs.pug | 45 - docs/src/contents/browsers.pug | 25 - docs/src/contents/buttons.pug | 178 --- docs/src/contents/calendars.pug | 298 ----- docs/src/contents/cards.pug | 94 -- docs/src/contents/carousels.pug | 78 -- docs/src/contents/chips.pug | 44 - docs/src/contents/code.pug | 22 - docs/src/contents/colors.pug | 95 -- docs/src/contents/comparison.pug | 29 - docs/src/contents/cursors.pug | 31 - docs/src/contents/custom.pug | 287 ----- docs/src/contents/display.pug | 26 - docs/src/contents/divider.pug | 56 - docs/src/contents/empty.pug | 50 - docs/src/contents/experimentals.pug | 4 - docs/src/contents/filters.pug | 107 -- docs/src/contents/forms.pug | 697 ------------ docs/src/contents/grid.pug | 171 --- docs/src/contents/icons.pug | 197 ---- docs/src/contents/installation.pug | 68 -- docs/src/contents/introduction.pug | 5 - docs/src/contents/labels.pug | 35 - docs/src/contents/loading.pug | 21 - docs/src/contents/media.pug | 73 -- docs/src/contents/menu.pug | 184 ---- docs/src/contents/meters.pug | 22 - docs/src/contents/modals.pug | 141 --- docs/src/contents/nav.pug | 57 - docs/src/contents/navbar.pug | 66 -- docs/src/contents/off-canvas.pug | 45 - docs/src/contents/pagination.pug | 102 -- docs/src/contents/panels.pug | 114 -- docs/src/contents/parallax.pug | 34 - docs/src/contents/popovers.pug | 83 -- docs/src/contents/position.pug | 41 - docs/src/contents/progress.pug | 17 - docs/src/contents/responsive.pug | 254 ----- docs/src/contents/shapes.pug | 17 - docs/src/contents/sliders.pug | 18 - docs/src/contents/steps.pug | 47 - docs/src/contents/tables.pug | 107 -- docs/src/contents/tabs.pug | 132 --- docs/src/contents/text.pug | 36 - docs/src/contents/tiles.pug | 92 -- docs/src/contents/timelines.pug | 81 -- docs/src/contents/toasts.pug | 49 - docs/src/contents/tooltips.pug | 24 - docs/src/contents/typography.pug | 257 ----- docs/src/contents/whatsnew.pug | 4 - docs/src/elements.pug | 38 +- docs/src/elements/buttons.pug | 194 ++++ docs/src/elements/code.pug | 38 + docs/src/elements/forms.pug | 713 ++++++++++++ docs/src/elements/icons.pug | 213 ++++ docs/src/elements/labels.pug | 51 + docs/src/elements/media.pug | 89 ++ docs/src/elements/tables.pug | 123 +++ docs/src/elements/typography.pug | 273 +++++ docs/src/experimentals.pug | 58 +- docs/src/experimentals/autocomplete.pug | 135 +++ docs/src/experimentals/calendars.pug | 314 ++++++ docs/src/experimentals/carousels.pug | 94 ++ docs/src/experimentals/comparison.pug | 45 + docs/src/experimentals/filters.pug | 123 +++ docs/src/experimentals/meters.pug | 38 + docs/src/experimentals/off-canvas.pug | 61 ++ docs/src/experimentals/parallax.pug | 50 + docs/src/experimentals/progress.pug | 33 + docs/src/experimentals/sliders.pug | 34 + docs/src/experimentals/timelines.pug | 97 ++ docs/src/getting-started.pug | 38 +- docs/src/getting-started/browsers.pug | 41 + docs/src/getting-started/custom.pug | 303 ++++++ docs/src/getting-started/installation.pug | 84 ++ docs/src/getting-started/whatsnew.pug | 20 + docs/src/index.pug | 19 +- docs/src/layout.pug | 20 +- docs/src/layout/grid.pug | 187 ++++ docs/src/layout/navbar.pug | 82 ++ docs/src/layout/responsive.pug | 269 +++++ docs/src/utilities.pug | 35 +- docs/src/utilities/colors.pug | 111 ++ docs/src/utilities/cursors.pug | 47 + docs/src/utilities/display.pug | 42 + docs/src/utilities/divider.pug | 72 ++ docs/src/utilities/loading.pug | 37 + docs/src/utilities/position.pug | 57 + docs/src/utilities/shapes.pug | 33 + docs/src/utilities/text.pug | 52 + docs/utilities.html | 490 ++------- docs/utilities/colors.html | 287 +++++ docs/utilities/cursors.html | 257 +++++ docs/utilities/display.html | 246 +++++ docs/utilities/divider.html | 285 +++++ docs/utilities/loading.html | 242 +++++ docs/utilities/position.html | 260 +++++ docs/utilities/shapes.html | 237 ++++ docs/utilities/text.html | 256 +++++ gulpfile.js | 2 +- src/_navbar.scss | 1 - src/utilities/_colors.scss | 2 +- 196 files changed, 23964 insertions(+), 11468 deletions(-) create mode 100644 docs/components/accordions.html create mode 100644 docs/components/avatars.html create mode 100644 docs/components/badges.html create mode 100644 docs/components/bars.html create mode 100644 docs/components/breadcrumbs.html create mode 100644 docs/components/cards.html create mode 100644 docs/components/chips.html create mode 100644 docs/components/empty.html create mode 100644 docs/components/menu.html create mode 100644 docs/components/modals.html create mode 100644 docs/components/nav.html create mode 100644 docs/components/pagination.html create mode 100644 docs/components/panels.html create mode 100644 docs/components/popovers.html create mode 100644 docs/components/steps.html create mode 100644 docs/components/tabs.html create mode 100644 docs/components/tiles.html create mode 100644 docs/components/toasts.html create mode 100644 docs/components/tooltips.html create mode 100644 docs/elements/buttons.html create mode 100644 docs/elements/code.html create mode 100644 docs/elements/forms.html create mode 100644 docs/elements/icons.html create mode 100644 docs/elements/labels.html create mode 100644 docs/elements/media.html create mode 100644 docs/elements/tables.html create mode 100644 docs/elements/typography.html create mode 100644 docs/experimentals/autocomplete.html create mode 100644 docs/experimentals/calendars.html create mode 100644 docs/experimentals/carousels.html create mode 100644 docs/experimentals/comparison.html create mode 100644 docs/experimentals/filters.html create mode 100644 docs/experimentals/meters.html create mode 100644 docs/experimentals/off-canvas.html create mode 100644 docs/experimentals/parallax.html create mode 100644 docs/experimentals/progress.html create mode 100644 docs/experimentals/sliders.html create mode 100644 docs/experimentals/timelines.html create mode 100644 docs/getting-started/browsers.html create mode 100644 docs/getting-started/custom.html create mode 100644 docs/getting-started/installation.html create mode 100644 docs/getting-started/whatsnew.html create mode 100644 docs/layout/grid.html create mode 100644 docs/layout/navbar.html create mode 100644 docs/layout/responsive.html delete mode 100644 docs/src/_docs-layout.pug delete mode 100644 docs/src/_footer.pug delete mode 100644 docs/src/_layout.pug create mode 100644 docs/src/_layout/_ad-c.pug create mode 100644 docs/src/_layout/_ad-g.pug create mode 100644 docs/src/_layout/_docs-layout.pug create mode 100644 docs/src/_layout/_footer.pug create mode 100644 docs/src/_layout/_layout.pug create mode 100644 docs/src/_layout/_mixins.pug delete mode 100644 docs/src/_mixins.pug create mode 100644 docs/src/components/accordions.pug create mode 100644 docs/src/components/avatars.pug create mode 100644 docs/src/components/badges.pug create mode 100644 docs/src/components/bars.pug create mode 100644 docs/src/components/breadcrumbs.pug create mode 100644 docs/src/components/cards.pug create mode 100644 docs/src/components/chips.pug create mode 100644 docs/src/components/empty.pug create mode 100644 docs/src/components/menu.pug create mode 100644 docs/src/components/modals.pug create mode 100644 docs/src/components/nav.pug create mode 100644 docs/src/components/pagination.pug create mode 100644 docs/src/components/panels.pug create mode 100644 docs/src/components/popovers.pug create mode 100644 docs/src/components/steps.pug create mode 100644 docs/src/components/tabs.pug create mode 100644 docs/src/components/tiles.pug create mode 100644 docs/src/components/toasts.pug create mode 100644 docs/src/components/tooltips.pug delete mode 100644 docs/src/contents/_ad-c.pug delete mode 100644 docs/src/contents/_ad-g.pug delete mode 100644 docs/src/contents/accordions.pug delete mode 100644 docs/src/contents/autocomplete.pug delete mode 100644 docs/src/contents/avatars.pug delete mode 100644 docs/src/contents/badges.pug delete mode 100644 docs/src/contents/bars.pug delete mode 100644 docs/src/contents/breadcrumbs.pug delete mode 100644 docs/src/contents/browsers.pug delete mode 100644 docs/src/contents/buttons.pug delete mode 100644 docs/src/contents/calendars.pug delete mode 100644 docs/src/contents/cards.pug delete mode 100644 docs/src/contents/carousels.pug delete mode 100644 docs/src/contents/chips.pug delete mode 100644 docs/src/contents/code.pug delete mode 100644 docs/src/contents/colors.pug delete mode 100644 docs/src/contents/comparison.pug delete mode 100644 docs/src/contents/cursors.pug delete mode 100644 docs/src/contents/custom.pug delete mode 100644 docs/src/contents/display.pug delete mode 100644 docs/src/contents/divider.pug delete mode 100644 docs/src/contents/empty.pug delete mode 100644 docs/src/contents/experimentals.pug delete mode 100644 docs/src/contents/filters.pug delete mode 100644 docs/src/contents/forms.pug delete mode 100644 docs/src/contents/grid.pug delete mode 100644 docs/src/contents/icons.pug delete mode 100644 docs/src/contents/installation.pug delete mode 100644 docs/src/contents/introduction.pug delete mode 100644 docs/src/contents/labels.pug delete mode 100644 docs/src/contents/loading.pug delete mode 100644 docs/src/contents/media.pug delete mode 100644 docs/src/contents/menu.pug delete mode 100644 docs/src/contents/meters.pug delete mode 100644 docs/src/contents/modals.pug delete mode 100644 docs/src/contents/nav.pug delete mode 100644 docs/src/contents/navbar.pug delete mode 100644 docs/src/contents/off-canvas.pug delete mode 100644 docs/src/contents/pagination.pug delete mode 100644 docs/src/contents/panels.pug delete mode 100644 docs/src/contents/parallax.pug delete mode 100644 docs/src/contents/popovers.pug delete mode 100644 docs/src/contents/position.pug delete mode 100644 docs/src/contents/progress.pug delete mode 100644 docs/src/contents/responsive.pug delete mode 100644 docs/src/contents/shapes.pug delete mode 100644 docs/src/contents/sliders.pug delete mode 100644 docs/src/contents/steps.pug delete mode 100644 docs/src/contents/tables.pug delete mode 100644 docs/src/contents/tabs.pug delete mode 100644 docs/src/contents/text.pug delete mode 100644 docs/src/contents/tiles.pug delete mode 100644 docs/src/contents/timelines.pug delete mode 100644 docs/src/contents/toasts.pug delete mode 100644 docs/src/contents/tooltips.pug delete mode 100644 docs/src/contents/typography.pug delete mode 100644 docs/src/contents/whatsnew.pug create mode 100644 docs/src/elements/buttons.pug create mode 100644 docs/src/elements/code.pug create mode 100644 docs/src/elements/forms.pug create mode 100644 docs/src/elements/icons.pug create mode 100644 docs/src/elements/labels.pug create mode 100644 docs/src/elements/media.pug create mode 100644 docs/src/elements/tables.pug create mode 100644 docs/src/elements/typography.pug create mode 100644 docs/src/experimentals/autocomplete.pug create mode 100644 docs/src/experimentals/calendars.pug create mode 100644 docs/src/experimentals/carousels.pug create mode 100644 docs/src/experimentals/comparison.pug create mode 100644 docs/src/experimentals/filters.pug create mode 100644 docs/src/experimentals/meters.pug create mode 100644 docs/src/experimentals/off-canvas.pug create mode 100644 docs/src/experimentals/parallax.pug create mode 100644 docs/src/experimentals/progress.pug create mode 100644 docs/src/experimentals/sliders.pug create mode 100644 docs/src/experimentals/timelines.pug create mode 100644 docs/src/getting-started/browsers.pug create mode 100644 docs/src/getting-started/custom.pug create mode 100644 docs/src/getting-started/installation.pug create mode 100644 docs/src/getting-started/whatsnew.pug create mode 100644 docs/src/layout/grid.pug create mode 100644 docs/src/layout/navbar.pug create mode 100644 docs/src/layout/responsive.pug create mode 100644 docs/src/utilities/colors.pug create mode 100644 docs/src/utilities/cursors.pug create mode 100644 docs/src/utilities/display.pug create mode 100644 docs/src/utilities/divider.pug create mode 100644 docs/src/utilities/loading.pug create mode 100644 docs/src/utilities/position.pug create mode 100644 docs/src/utilities/shapes.pug create mode 100644 docs/src/utilities/text.pug create mode 100644 docs/utilities/colors.html create mode 100644 docs/utilities/cursors.html create mode 100644 docs/utilities/display.html create mode 100644 docs/utilities/divider.html create mode 100644 docs/utilities/loading.html create mode 100644 docs/utilities/position.html create mode 100644 docs/utilities/shapes.html create mode 100644 docs/utilities/text.html (limited to 'docs/src') diff --git a/dist/spectre.css b/dist/spectre.css index e4ea07f..9da9512 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -1980,7 +1980,6 @@ video.video-responsive::before { .navbar .navbar-brand { font-size: .9rem; - font-weight: 500; text-decoration: none; } @@ -3072,16 +3071,16 @@ a.text-secondary:visited { } .text-gray { - color: #66758c !important; + color: #bcc3ce !important; } a.text-gray:focus, a.text-gray:hover { - color: #5b687d; + color: #adb6c4; } a.text-gray:visited { - color: #728199; + color: #cbd0d9; } .text-light { diff --git a/dist/spectre.min.css b/dist/spectre.min.css index a493064..cc1ae6b 100644 --- a/dist/spectre.min.css +++ b/dist/spectre.min.css @@ -1 +1 @@ -/*! Spectre.css v0.5.5 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#3b4351;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1.2rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#303742;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .2rem}mark{background:#ffe9b3;border-radius:.1rem;color:#3b4351;padding:.05rem}blockquote{border-left:.1rem solid #dadee4;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh),:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f7f8f9}.table tbody tr.active,.table.table-striped tbody tr.active{background:#eef0f3}.table.table-hover tbody tr:hover{background:#eef0f3}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #dadee4;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1.2rem;padding:.3rem 0}.form-label.label-sm{font-size:.7rem;padding:.1rem 0}.form-label.label-lg{font-size:.9rem;padding:.4rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #bcc3ce;border-radius:.1rem;color:#3b4351;display:block;font-size:.8rem;height:1.8rem;line-height:1.2rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#bcc3ce}.form-input:-ms-input-placeholder{color:#bcc3ce}.form-input::-ms-input-placeholder{color:#bcc3ce}.form-input::placeholder{color:#bcc3ce}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#bcc3ce;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #bcc3ce;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.05rem 1.1rem .05rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.35rem 1.4rem .35rem .6rem}.form-select[multiple],.form-select[size]{height:auto;padding:.25rem .4rem}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.3rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.3rem}.form-checkbox,.form-radio,.form-switch{display:block;line-height:1.2rem;margin:.2rem 0;min-height:1.2rem;padding:.1rem .4rem .1rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #bcc3ce;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#eef0f3}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:9px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#bcc3ce;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f7f8f9}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f7f8f9;border:.05rem solid #bcc3ce;border-radius:.1rem;line-height:1.2rem;padding:.25rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.05rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.35rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error input:indeterminate+.form-icon,.has-error .form-checkbox input:indeterminate+.form-icon{background:#e85600;border-color:#e85600}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#eef0f3;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f7f8f9}input.disabled+.form-icon,input:disabled+.form-icon{background:#eef0f3;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.form-inline{display:inline-block}.label{background:#eef0f3;border-radius:.1rem;color:#455060;display:inline-block;line-height:1.2;padding:.1rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .2rem}.code{border-radius:.1rem;color:#3b4351;position:relative}.code::before{color:#bcc3ce;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f7f8f9;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#66758c;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#bcc3ce;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.05rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#66758c;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#66758c}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#66758c;content:"/";padding-right:.4rem}.bar{background:#eef0f3;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#eef0f3;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-body{-ms-flex:1 1 auto;flex:1 1 auto}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#eef0f3;border-radius:5rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:320px;overflow:hidden;padding:.2rem .4rem;text-decoration:none;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.chip .btn-clear{transform:scale(.75)}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f7f8f9;border-radius:.1rem;color:#66758c;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(48,55,66,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(247,248,249,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(48,55,66,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#303742;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#66758c;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#505c6e;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(48,55,66,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#bcc3ce;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#dadee4}.step .step-item.active~.step-item a::before{background:#f7f8f9}.tab{align-items:center;border-bottom:.05rem solid #dadee4;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1.2rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(48,55,66,.95);border:.05rem solid #303742;border-color:#303742;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.95);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.95);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.95);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.95);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(48,55,66,.95);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9!important}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9!important}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#66758c!important}a.text-gray:focus,a.text-gray:hover{color:#5b687d}a.text-gray:visited{color:#728199}.text-light{color:#fff!important}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-dark{color:#3b4351!important}a.text-dark:focus,a.text-dark:hover{color:#303742}a.text-dark:visited{color:#455060}.text-success{color:#32b643!important}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700!important}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600!important}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9!important;color:#fff}.bg-secondary{background:#f1f1fc!important}.bg-dark{background:#303742!important;color:#fff}.bg-gray{background:#f7f8f9!important}.bg-success{background:#32b643!important;color:#fff}.bg-warning{background:#ffb700!important;color:#fff}.bg-error{background:#e85600!important;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #dadee4;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #dadee4;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.p-sticky{position:sticky!important;position:-webkit-sticky!important}.p-centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.s-rounded{border-radius:.1rem}.s-circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word} \ No newline at end of file +/*! Spectre.css v0.5.5 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#3b4351;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1.2rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#303742;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .2rem}mark{background:#ffe9b3;border-radius:.1rem;color:#3b4351;padding:.05rem}blockquote{border-left:.1rem solid #dadee4;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh),:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f7f8f9}.table tbody tr.active,.table.table-striped tbody tr.active{background:#eef0f3}.table.table-hover tbody tr:hover{background:#eef0f3}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #dadee4;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1.2rem;padding:.3rem 0}.form-label.label-sm{font-size:.7rem;padding:.1rem 0}.form-label.label-lg{font-size:.9rem;padding:.4rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #bcc3ce;border-radius:.1rem;color:#3b4351;display:block;font-size:.8rem;height:1.8rem;line-height:1.2rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#bcc3ce}.form-input:-ms-input-placeholder{color:#bcc3ce}.form-input::-ms-input-placeholder{color:#bcc3ce}.form-input::placeholder{color:#bcc3ce}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#bcc3ce;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #bcc3ce;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.05rem 1.1rem .05rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.35rem 1.4rem .35rem .6rem}.form-select[multiple],.form-select[size]{height:auto;padding:.25rem .4rem}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.3rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.3rem}.form-checkbox,.form-radio,.form-switch{display:block;line-height:1.2rem;margin:.2rem 0;min-height:1.2rem;padding:.1rem .4rem .1rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #bcc3ce;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#eef0f3}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:9px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#bcc3ce;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f7f8f9}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f7f8f9;border:.05rem solid #bcc3ce;border-radius:.1rem;line-height:1.2rem;padding:.25rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.05rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.35rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error input:indeterminate+.form-icon,.has-error .form-checkbox input:indeterminate+.form-icon{background:#e85600;border-color:#e85600}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#eef0f3;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f7f8f9}input.disabled+.form-icon,input:disabled+.form-icon{background:#eef0f3;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.form-inline{display:inline-block}.label{background:#eef0f3;border-radius:.1rem;color:#455060;display:inline-block;line-height:1.2;padding:.1rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .2rem}.code{border-radius:.1rem;color:#3b4351;position:relative}.code::before{color:#bcc3ce;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f7f8f9;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#66758c;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#bcc3ce;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.05rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#66758c;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#66758c}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#66758c;content:"/";padding-right:.4rem}.bar{background:#eef0f3;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#eef0f3;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-body{-ms-flex:1 1 auto;flex:1 1 auto}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#eef0f3;border-radius:5rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:320px;overflow:hidden;padding:.2rem .4rem;text-decoration:none;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.chip .btn-clear{transform:scale(.75)}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f7f8f9;border-radius:.1rem;color:#66758c;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(48,55,66,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(247,248,249,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(48,55,66,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#303742;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#66758c;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#505c6e;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(48,55,66,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#bcc3ce;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#dadee4}.step .step-item.active~.step-item a::before{background:#f7f8f9}.tab{align-items:center;border-bottom:.05rem solid #dadee4;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1.2rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(48,55,66,.95);border:.05rem solid #303742;border-color:#303742;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.95);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.95);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.95);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.95);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(48,55,66,.95);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9!important}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9!important}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#bcc3ce!important}a.text-gray:focus,a.text-gray:hover{color:#adb6c4}a.text-gray:visited{color:#cbd0d9}.text-light{color:#fff!important}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-dark{color:#3b4351!important}a.text-dark:focus,a.text-dark:hover{color:#303742}a.text-dark:visited{color:#455060}.text-success{color:#32b643!important}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700!important}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600!important}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9!important;color:#fff}.bg-secondary{background:#f1f1fc!important}.bg-dark{background:#303742!important;color:#fff}.bg-gray{background:#f7f8f9!important}.bg-success{background:#32b643!important;color:#fff}.bg-warning{background:#ffb700!important;color:#fff}.bg-error{background:#e85600!important;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #dadee4;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #dadee4;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.p-sticky{position:sticky!important;position:-webkit-sticky!important}.p-centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.s-rounded{border-radius:.1rem}.s-circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word} \ No newline at end of file diff --git a/docs/components.html b/docs/components.html index a931381..872cba0 100644 --- a/docs/components.html +++ b/docs/components.html @@ -23,7 +23,8 @@
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@

@@ -114,1545 +156,36 @@
-
-
-
-
-
-
-
-
-

Accordions

-
-
- - - -
-
- - -
-
-

Accordions are used to toggle sections of content.

-
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
-
-
- - -
- -
-
-
- - -
- -
-
-
- - -
- -
-
-
-
- 
<!-- standard Accordions example -->
-<div class="accordion">
-  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
-  <label class="accordion-header" for="accordion-1">
-    <i class="icon icon-arrow-right mr-1"></i>
-    Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
-
-<!-- mutually exclusive Accordions example (with same input names) -->
-<div class="accordion">
-  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
-  <label class="accordion-header" for="accordion-1">
-    Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
-
-

Alternatively, you can use details and summary instead of input radio or checkbox trick. - Add the open attribute to details to expand it. - Microsoft Edge support is under consideration. -

- 
<!-- details and summary Accordions example -->
-<details class="accordion" open>
-  <summary class="accordion-header">
-    <i class="icon icon-arrow-right mr-1"></i>
-    Title
-  </summary>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</details>
-
-
-

Avatars

-

Avatars are user profile pictures.

-
-
-
Avatar XL
-
Avatar LG
-
Avatar
-
Avatar SM
-
Avatar XS
-
-
-
-
-
-
-
-
-
-

Add the avatar class to <img> element. - There are 4 additional sizes available, including avatar-xl(64px), avatar-lg(48px), avatar-sm(24px), and avatar-xs(16px). - By default, the avatar size is 32px. -

-

- For users who don't have profile pictures, you may use their initials for avatars. - Add the avatar class and avatar size class to <div> element. - The data-initial attribute is the name appear inside the avatar. -

- 
<!-- Basic avatar examples -->
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
-
-<!-- Show initals when avatar image is unavailable or not fully loaded -->
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-
-
-
AvatarAvatar
-
AvatarAvatar
-
AvatarAvatar
-
AvatarAvatar
-
AvatarAvatar
-
-
- 
<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
-</figure>
-
-

Avatar presence

-
-
-
-
-
-
-
-
-
-

- Avatars support presence indicators. - You can add an <i> element with the avatar-presence class, and add online, busy or away class for different status colors. - The default is gray which means offline. -

- 
<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <i class="avatar-presence online"></i>
-</figure>
-
-
-

Badges

-

Badges are often used as unread number indicators.

-
-
Notifications
-
Notifications
-
Notifications
-
Notifications
-
-

Add the badge class to non self closing elements. - And add the data-badge attribute to define the content of a badge. - The badge will appear in the top-right direction of the element. -

-

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

-
-
- - -
-
- - -
-
-
YZ
-
YZ
-
YZ
-
-
-

Badges support button and avatars elements as well.

- 
<span class="badge">
-  Notifications
-</span>
-
-<span class="badge" data-badge="8">
-  Notifications
-</span>
-
-<button class="btn badge" data-badge="8">
-  Button
-</button>
-
-<figure class="avatar badge" data-badge="8" data-initial="YZ">
-  <img src="img/avatar-3.png" alt="YZ">
-</figure>
-
-
-

Bars

-

- Bars represent the progress of a task or the value within the known range. - Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements. -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
25%
-
15%
-
10%
-
15%
-
-
-
-

Add a container element with the bar class. - And add child elements with the bar-item class. - The width percentage value is needed for every bar-item. -

-

There is the bar-sm class for thinner Bars. - Also, you could use Tooltips for any bar-item. -

- 
<!-- normal bars -->
-<div class="bar bar-sm">
-  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-<!-- multi-bars -->
-<div class="bar">
-  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
-  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
-</div>
-
-

Slider bars

-
-
-
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-

You can add the bar-slider class to the Bars container. - And add child elements with the bar-item class and bar-slider-btn inside bar-item. - You need to set the bar-item width manually to have the slider point. -

-

If there are two bar-item divs in one bar-slider, you will have a range slider.

- 
<!-- normal slider -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:25%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
-<!-- range slider -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:15%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-  <div class="bar-item" role="progressbar" style="width:65%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
- -
-

Cards

-
- -
-

Cards are flexible content containers.

-
-
-
-
OS X El Capitan
-
-
Microsoft
-
Software and hardware
-
-
Empower every person and every organization on the planet to achieve more.
-
Do
-
-
-
-
-
-
Apple
-
Hardware and software
-
-
OS X Yosemite
-
To make a contribution to the world by making tools for the mind that advance humankind.
-
-
- - - -
-
-
-
-
-
-
macOS Sierra
-
- -
Google I/O
-
Software and hardware
-
-
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
-
-
-
-
-
OS X El Capitan
-
BuyShare
-
Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
-
-
-
-
-
-
Apple
-
Hardware and software
-
-
To make a contribution to the world by making tools for the mind that advance humankind.
-
macOS Sierra
-
-
-
-
-
-
Google
-
Software and hardware
-
-
Organize the world’s information and make it universally accessible and useful.
-
OS X Yosemite
-
SearchShare
-
-
-
-

Add a container element with the card class. - And add child elements with the card-image, card-header, card-body and/or card-footer classes. - The card-image can be placed in any position. -

- 
<div class="card">
-  <div class="card-image">
-    <img src="img/osx-el-capitan.jpg" class="img-responsive">
-  </div>
-  <div class="card-header">
-    <div class="card-title h5">...</div>
-    <div class="card-subtitle text-gray">...</div>
-  </div>
-  <div class="card-body">
-    ...
-  </div>
-  <div class="card-footer">
-    <button class="btn btn-primary">...</button>
-  </div>
-</div>
-
-
-

Chips

-

Chips are complex entities in small blocks.

-
-
CrimeDramaBiographyMystery
-
-
-
Tony Stark -
-
Thor OdinsonThor Odinson
-
Steve RogersSteve Rogers
-
-
-

Add a container element with the chip class. - And add child text element, buttons or avatars with the avatar class. -

- 
<span class="chip">Crime</span>
-
-<span class="chip">
-  Biography
-  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-</span>
-
-<div class="chip">
-  <img src="img/avatar-1.png" class="avatar avatar-sm">
-  Yan Zhu
-  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-</div>
-
-
-

Empty states

-

Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

-
-
-
-
-

You have no new messages

-

Click the button to start a conversation

-
- -
-
-
-
-
-
-

You've successfully signed up

-

Click the button to invite your friends

-
- -
-
- -
-
-
-
-
-
-

You are not following anyone

-

Start to meet new friends

-
- - -
-
-
-
-

- An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. - Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. - HTML structure is exampled below. -

- 
<div class="empty">
-  <div class="empty-icon">
-    <i class="icon icon-people"></i>
-  </div>
-  <p class="empty-title h5">You have no new messages</p>
-  <p class="empty-subtitle">Click the button to start a conversation.</p>
-  <div class="empty-action">
-    <button class="btn btn-primary">Send a message</button>
-  </div>
-</div>
-
- -
-

Modals

-

Modals are flexible dialog prompts.

-
-
Open Modal - -
-
-

Add a container element with the modal class. - And add a real container modal-container and overlay modal-overlay inside it. - You can add child elements with the modal-header, modal-body and modal-footer - any or all of them. -

-

- Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. - To make a modal appear, add the active class to the modal container. -

- 
<div class="modal active" id="modal-id">
-  <a href="#close" class="modal-overlay" aria-label="Close"></a>
-  <div class="modal-container">
-    <div class="modal-header">
-      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
-      <div class="modal-title h5">Modal title</div>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        <!-- content here -->
-      </div>
-    </div>
-    <div class="modal-footer">
-      ...
-    </div>
-  </div>
-</div>
-
-

Modal sizes

-
-
Open small size Modal - -
-
-

Use the modal-sm class for a smaller modal dialog. - The container max width is 320px. -

-
-
Open large size Modal - -
-
-

Use the modal-lg class for a full size modal. - The container max width is 960px. -

- 
<div class="modal modal-sm">
-  <a href="#close" class="modal-overlay" aria-label="Close"></a>
-  <div class="modal-container">
-    <!-- modal structure here -->
-  </div>
-</div>
-
- - -
-

Panels

-

Panels are flexible view container with auto-expand content section.

-
-
-
-
-
Avatar
-
Bruce Banner
-
THE HULK
-
- -
-
-
-
E-mail
-
bruce.banner@hulk.com
-
-
- -
-
-
-
-
Skype
-
bruce.banner
-
-
- -
-
-
-
-
Location
-
Dayton, Ohio
-
-
- -
-
-
-
- -
-
-
-
-
-
-
Comments
-
-
-
-
-
Avatar
-
-
-

Thor Odinson

-

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

-
-
-
-
-
Avatar
-
-
-

Bruce Banner

-

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

-
-
-
-
-
-
-
-

Tony Stark

-

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

-
-
-
-
-
Avatar
-
-
-

Steve Rogers

-

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

-
-
-
-
-
Avatar
-
-
-

Natasha Romanoff

-

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

-
-
-
-
-
- - -
-
-
-
-
-

Add a container element with the panel class. - And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer classes. - The panel-body can be auto expanded and vertically scrollable. -

- 
<div class="panel">
-  <div class="panel-header">
-    <div class="panel-title">Comments</div>
-  </div>
-  <div class="panel-nav">
-    <!-- navigation components: tabs, breadcrumbs or pagination -->
-  </div>
-  <div class="panel-body">
-    <!-- contents -->
-  </div>
-  <div class="panel-footer">
-    <!-- buttons or inputs -->
-  </div>
-</div>
-
-
-

Popovers

-

Popovers are small overlay content containers. Popovers component is built entirely in CSS.

-
-
-
top popover -
-
-
-
Apple
-
Software and hardware
-
-
To make a contribution to the world by making tools for the mind that advance humankind.
-
- -
-
-
-
-
-
-
right popover -
-
-
-
Apple
-
Software and hardware
-
-
To make a contribution to the world by making tools for the mind that advance humankind.
-
- -
-
-
-
-
-
-
bottom popover -
-
-
-
Apple
-
Software and hardware
-
-
To make a contribution to the world by making tools for the mind that advance humankind.
-
- -
-
-
-
-
-
-
left popover -
-
-
-
Apple
-
Software and hardware
-
-
To make a contribution to the world by making tools for the mind that advance humankind.
-
- -
-
-
-
-
-
-

Wrap an element by a container with the popover class. - And add a container with the popover-container next to the element. - You can use Cards component inside the popover-container. -

-

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. - By default, the popovers appear above the element. -

- 
<div class="popover popover-right">
-  <button class="btn btn-primary">right popover</button>
-  <div class="popover-container">
-    <div class="card">
-      <div class="card-header">
-        ...
-      </div>
-      <div class="card-body">
-        ...
-      </div>
-      <div class="card-footer">
-        ...
-      </div>
-    </div>
-  </div>
-</div>
-
-
-

Steps

-

Steps are progress indicators of a sequence of task steps.

-
-
-
    -
    • -
    • -
    • -
    • -
-
-
- -
-
-

Add a container element with the step class. - And add child elements with the step-item class. - The step-item with the active class will be highlighted and indicate the current state of progress. -

- 
<ul class="step">
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
-  </li>
-  <li class="step-item active">
-    <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
-  </li>
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
-  </li>
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
-  </li>
-</ul>
-
-
-
-

Tabs

-
-
- - - -
-
- - -
-
-

Tabs enable quick switch between different views.

-
-
- -
-
- -
-
-

Add a container element with the tab class. - And add child elements with the tab-item class. - You can add the tab-block class for a full-width tab. - The tab-item or its child <a> with the active class will be highlighted. -

- 
<ul class="tab tab-block">
-  <li class="tab-item active">
-    <a href="#">Music</a>
-  </li>
-  <li class="tab-item">
-    <a href="#" class="active">Playlists</a>
-  </li>
-  <li class="tab-item">
-    <a href="#">Radio</a>
-  </li>
-  <li class="tab-item">
-    <a href="#">Connect</a>
-  </li>
-</ul>
-
-
-
- -
-
- -
-
-

If you need badges on tabs, you can add badge class to the element within tab-item.

- 
<ul class="tab tab-block">
-  <li class="tab-item active">
-    <a href="#" class="badge" data-badge="9">
-      Music
-    </a>
-  </li>
-</ul>
-
-
-
-
-

- You could add a search box or buttons inside a tab. - Add the tab-action class to the tab-item. -

- 
<ul class="tab">
-  <li class="tab-item active">
-    <a href="#">
-      Music
-    </a>
-  </li>
-  <li class="tab-item tab-action">
-    <div class="input-group input-inline">
-      <input class="form-input input-sm" type="text" placeholder="search">
-      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
-    </div>
-  </li>
-</ul>
-
-
-

Tiles

-

Tiles are repeatable or embeddable information blocks.

-
-
-
-
-
Avatar
-
-
-

The Avengers

-

Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

-
-
- - -
-
-
-
-
-
-
Avatar
-
-
-

The S.H.I.E.L.D.

-

The Strategic Homeland Intervention, Enforcement, and Logistics Division...

-

- - -

-
-
-
-
-

Add a container with the tile class. - And add child elements with the tile-icon, tile-content or/and tile-action classes. - The tile-icon and tile-action are optional. -

-

There are tile-title and tile-subtitle classes for title and subtitle text styles.

- 
<div class="tile">
-  <div class="tile-icon">
-    <div class="example-tile-icon">
-      <i class="icon icon-file centered"></i>
-    </div>
-  </div>
-  <div class="tile-content">
-    <p class="tile-title">The Avengers</p>
-    <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
-  </div>
-  <div class="tile-action">
-    <button class="btn btn-primary">Join</button>
-  </div>
-</div>
-
-

Compact tiles

-

There is compact version of Tiles component, which is often used as contact and file info blocks.

-

Add the tile-centered class to the container tile. - The tile-icon, tile-content and tile-action will be vertically centered. -

-
-
-
-
-
-
-
-
spectre-docs.pdf
-
14MB · Public · 1 Jan, 2017
-
-
- -
-
-
-
- 
<div class="tile tile-centered">
-  <div class="tile-icon">
-    <div class="example-tile-icon">
-      <i class="icon icon-file centered"></i>
-    </div>
-  </div>
-  <div class="tile-content">
-    <div class="tile-title">spectre-docs.pdf</div>
-    <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
-  </div>
-  <div class="tile-action">
-    <button class="btn btn-link">
-      <i class="icon icon-more-vert"></i>
-    </button>
-  </div>
-</div>
-
-
-

Toasts

-

Toasts are used to show alert or information to users.

-
-
-
- -
Toast Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. -
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. -
-
-
-

Add a container element with the toast class. - You can add any text within the container, and even icons. - You may also add a close button with the btn-clear class if you need. -

- 
<div class="toast">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
-
-
-
- Toast success -
-
-
-
- Toast warning -
-
-
-
- Toast error -
-
-
-

And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.

- 
<div class="toast toast-primary">
-  <button class="btn btn-clear float-right"></button>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
-
-

Tooltips

-

Tooltips provide context information labels that appear on hover and focus.

-
-
- -
-
- -
-
- -
-
- -
-
-

Tooltips component is built entirely in CSS.

-

Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements.

-

And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. - By default, the tooltip appears above the element. -

- 
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
-<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+
+
+
+
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -133,1518 +186,6 @@
-
-

Typography

-
-
- - - -
-
- - -
-
-

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

-

Headings

-
-
-

H1 Heading 40px

-
-
-

H2 Heading 32px

-
-
-

H3 Heading 28px

-
-
-

H4 Heading 24px

-
-
-
H5 Heading 20px
-
-
-
H6 Heading 16px
-
-
- 
<h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
-
-

Paragraphs

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. -

-

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

- 
<p>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
-
-

Semantic text elements

-
-
I18Nabbr
-
Boldstrongb
-
- Citationcite -
-
Hello World!code
-
- Deleteddel -
-
Emphasisem
-
Italici
-
Insertedins
-
Ctrl + Skbd
-
- Highlightedmark -
-
- 漢 - kan字 - ji - ruby -
-
- Strikethroughs -
-
Samplesamp
-
Text Subscriptedsub
-
Text Superscriptedsup
-
- time -
-
- Underlineu -
-
- x = - y + 2var -
-
-

Optimized for East Asian fonts

-
-
-

你好, こんにちは, 안녕하세요

-

Chinese (Simplified)

-

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

-

Chinese (Tranditional)

-

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

-

Japanese

-

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

-

Korean

-

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

-
-
-

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

- 
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
-
-

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

-
-
-

祇園精舎の鐘の声、諸行無常の響きあり。

-

- 祇園精舎の鐘の声、諸行無常の響きあり。 - -

-
-
- 
<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
-
-

Fonts

-

Spectre sets the most common and best font-family for each OS with fallback support in old systems. - There are also fonts targeted East Asian typography. -

- 
/* Western typography targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-/* Monospace typography targeted */
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-
-/* Chinese (lang="zh" and lang="zh-Hans") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
-/* Chinese (lang="zh-Hant") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
-/* Japanese (lang="ja") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
-/* Korean (lang="ko") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
-
-

Blockquote

-
-

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- - Bill Gates -
- 
<blockquote>
-  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
-  <cite>- Bill Gates</cite>
-</blockquote>
-
-

Lists

-
-
-
    -
  • list item 1
    • -
  • list item 2 -
      -
    • list item 2.1
      • -
    • list item 2.2
      • -
    • list item 2.3
      • -
    -
    • -
  • list item 3
    • -
-
-
-
    -
  1. list item 1
    2. -
  2. list item 2 -
      -
    1. list item 2.1
      2. -
    2. list item 2.2
      3. -
    3. list item 2.3
      4. -
    -
    3. -
  3. list item 3
    4. -
-
-
-
-
description list term 1
-
description list description 1
-
description list term 2
-
description list description 2
-
description list term 3
-
description list description 3
-
-
-
- 
<!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
-
-<!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>
-
-
-

Tables

-
- -
-

Tables include default styles for tables and data sets.

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameGenreRelease date
The Shawshank RedemptionCrime, Drama14 October 1994
The GodfatherCrime, Drama24 March 1972
Schindler's ListBiography, Drama, History4 February 1994
Se7enCrime, Drama, Mystery22 September 1995
-
-
-

Add the table class to any <table> element. - The class will add padding, border and emphasized table header. - Use the table-striped class to <table> to add zebra striped style. - For hoverable table rows, you can add the table-hover class to enable hover style. -

-

Use the active class to make <tr> element highlighted.

- 
<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameRatingDurationGenreRelease dateDirector
The Shawshank RedemptionR2h 22minCrime, Drama14 October 1994Frank Darabont
The GodfatherR2h 55minCrime, Drama24 March 1972Francis Ford Coppola
Schindler's ListR3h 15minBiography, Drama, History4 February 1994Steven Spielberg
Se7enR2h 7minCrime, Drama, Mystery22 September 1995David Fincher
-
-
-

Add the table-scroll class to <table> to have a horizontally scrollable table.

- 
<table class="table table-striped table-scroll">
-  ...
-</table>
-
-
-

Buttons

-
-
- - - -
-
- - -
-
-

Buttons include simple button styles for actions in different types and sizes.

-
-
- - - -
-
-

Add the btn class to <a>, <input> or <button> elements for a default button. - There are classes btn-primary and btn-link for predefined primary and link buttons. -

- 
<button class="btn">default button</button>
-<button class="btn btn-primary">primary button</button>
-<button class="btn btn-link">link button</button>
-
-

Button colors

-
-
- - -
-
-

Add the btn-success or btn-error class for success (green) or error (red) button color. - If you need more button colors, please use button mixins to create your own button color variants. -

- 
<button class="btn btn-success">success button</button>
-<button class="btn btn-error">error button</button>
-
-

Button sizes

-
-
- - -
-
- - -
-
- - -
-
-

Add the btn-sm or btn-lg class for small or large button size. - Also, you can add the btn-block class for a full-width button. -

- 
<button class="btn btn-lg">large button</button>
-<button class="btn btn-sm">small button</button>
-
-<button class="btn btn-block">block button</button>
-
-<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
-<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
-<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
-
-

Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).

-
-
- - - -
-
- - - -
-
- 
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>
-
-

Button states

-

Add the active class for active button state style.

-
-
- - - -
-
-

Add the disabled class or the disabled attribute for disabled button state style.

-
-
- - - -
-
- 
<!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-
-

A button with the loading class can show loading indicator.

-
-
- - - -
-
- 
<!-- buttons with loading state -->
-<button class="btn loading">button</button>
-<button class="btn btn-primary loading">primary button</button>
-
-

Button groups

-
-
-
- - - -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- - - -
-
-
-

If you want to use buttons as a group, add the btn-group class to the container. - You can add the btn-group-block class for a full-width button group. -

- 
<div class="btn-group btn-group-block">
-  <button class="btn">first button</button>
-  <button class="btn">second button</button>
-  <button class="btn">third button</button>
-</div>
-
-
-

Forms

-

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

-
-
-
- - -
-
- - -
-
-
- 
<!-- form input control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-1">Name</label>
-  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-</div>
-
-
-
-
- - -
-
-
- 
<!-- form textarea control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-3">Message</label>
-  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-</div>
-
-
-
-
- -
-
- -
-
-
- 
<!-- form select control -->
-<div class="form-group">
-  <select class="form-select">
-    <option>Choose an option</option>
-    <option>Slack</option>
-    <option>Skype</option>
-    <option>Hipchat</option>
-  </select>
-</div>
-
-
-
-
-
- - - -
-
-
-
- 
<!-- form radio control -->
-<div class="form-group">
-  <label class="form-label">Gender</label>
-  <label class="form-radio">
-    <input type="radio" name="gender" checked>
-    <i class="form-icon"></i> Male
-  </label>
-  <label class="form-radio">
-    <input type="radio" name="gender">
-    <i class="form-icon"></i> Female
-  </label>
-</div>
-
-
-
-
- -
-
- -
-
-
- 
<!-- form switch control -->
-<div class="form-group">
-  <label class="form-switch">
-    <input type="checkbox">
-    <i class="form-icon"></i> Send me emails with news and tips
-  </label>
-</div>
-
-
-
-
- -
-
- -
-
-
- 
<!-- form checkbox control -->
-<div class="form-group">
-  <label class="form-checkbox">
-    <input type="checkbox">
-    <i class="form-icon"></i> Remember me
-  </label>
-</div>
-
-
-
-
- -
-
-
- -

You can change checkbox to indeterminate state by setting the indeterminate property of input checkboxes to true.

-

Inline forms

-
-
-
-
- - -
-
- - -
-
-
-
-

You can add the form-inline class to the form components to make them inline in one row.

- 
<div class="form-group">
-  <label class="form-radio form-inline">
-    <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
-  </label>
-  <label class="form-radio form-inline">
-    <input type="radio" name="gender"><i class="form-icon"></i> Female
-  </label>
-</div>
-
-<div class="form-group">
-  <label class="form-checkbox form-inline">
-    <input type="checkbox"><i class="form-icon"></i> Checkbox 1
-  </label>
-  <label class="form-checkbox form-inline">
-    <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
-  </label>
-</div>
-
-

Horizontal forms

-

If you want to have a horizontal form, add the form-horizontal class to the <form> container. - And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout. -

-
-
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- - -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
-
-
- 
<form class="form-horizontal">
-  <div class="form-group">
-    <div class="col-3 col-sm-12">
-      <label class="form-label" for="input-example-1">Name</label>
-    </div>
-    <div class="col-9 col-sm-12">
-      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-    </div>
-  </div>
-  <!-- form structure -->
-</form>
-
-

Form sizes

-

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-

You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

-

Form icons

-

Spectre Form components has Spectre Icons support.

-

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. - And add the icon with form-icon class next to the <input>. -

-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
- 
<!-- form input with Spectre icon -->
-<div class="has-icon-left">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon icon icon-check"></i>
-</div>
-
-

You can use the loading class for loading or posting state.

-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
- 
<!-- form input with loading icon -->
-<div class="has-icon-right">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon loading"></i>
-</div>
-
-

Input types

-
-
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
-
-

Input groups

-
-
-
- - -
-
-
-
slack.com/ - - -
-
-
-
- - -
-
-
-
slack.com/ - - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
slack.com/ - - -
-
-
-

If you want to attach text and button along with an input, add the input-group class to the input container. - And add the input-group-addon class to the text element and input-group-btn to the button element. -

- 
<!-- normal input group -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-</div>
-
-<!-- large input group -->
-<div class="input-group">
-  <span class="input-group-addon addon-lg">...</span>
-  <input type="text" class="form-input input-lg" placeholder="...">
-</div>
-
-<!-- normal input group with button -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-  <button class="btn btn-primary input-group-btn">Submit</button>
-</div>
-
-

Form validation styles

-
-
-
- Input -
- - -

The name is valid.

-
-
- - -

Passwords must have at least 8 characters.

-
-
-
- Select -
- -

The option is invalid.

-
-
- -

The option is available.

-
-
-
- Checkbox, Radio and Switch (Error state only) -
- -
-
- - -
-
- -
-
-
-
-

To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements. - Use the form-input-hint class to provide form validation success and error messages. -

- 
<form>
-  <!-- form validation class: has-success -->
-  <div class="form-group has-success">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation class: is-success -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation example for checkbox, radio and switch -->
-  <div class="form-group">
-    <label class="form-checkbox is-error">
-      <input type="checkbox">
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
-
-
-
-
- - -
-
- - -
-
-
-

You can use input pattern attribute to validate the value as well.

- 
<!-- pattern validation example for Email -->
-<input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">
-
-<!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
-<input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
-
-

Form disabled styles

-

- Add the disabled attribute to the element or <fieldset> for a disabled form components style.

-
-
-
-
-
- - -
-
- - - -
-
- -
-
- -
-
- - -
-
- -
-
-
-
-
- 
<form action="#forms">
-  <fieldset disabled>
-    <div class="form-group">
-      <label class="form-label" for="input-example-19">Name</label>
-      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
-    </div>
-    <div class="form-group">
-      <label class="form-label">Gender</label>
-      <label class="form-radio">
-        <input type="radio" name="gender" disabled>
-        <i class="form-icon"></i> Male
-      </label>
-      <label class="form-radio">
-        <input type="radio" name="gender" disabled>
-        <i class="form-icon"></i> Female
-      </label>
-    </div>
-    <div class="form-group">
-      <select class="form-select" disabled>
-        <option>Choose an option</option>
-        <option>Slack</option>
-        <option>Skype</option>
-        <option>Hipchat</option>
-      </select>
-    </div>
-    <div class="form-group">
-      <label class="form-switch">
-        <input type="checkbox" disabled>
-        <i class="form-icon"></i> Send me emails with news and tips
-      </label>
-    </div>
-    <div class="form-group">
-      <label class="form-label" for="input-example-20">Message</label>
-      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
-    </div>
-    <div class="form-group">
-      <label class="form-checkbox">
-        <input type="checkbox" disabled>
-        <i class="form-icon"></i> Remember me
-      </label>
-    </div>
-  </fieldset>
-
-
-

Icons

-

- Icons are single-element, responsive and pure CSS icons. - You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons. -

-

Navigation icons

-
-
- -

icon-arrow-up

-
-
- -

icon-arrow-right

-
-
- -

icon-arrow-down

-
-
- -

icon-arrow-left

-
-
- -

icon-upward

-
-
- -

icon-forward

-
-
- -

icon-downward

-
-
- -

icon-back

-
-
- -

icon-caret

-
-
- -

icon-menu

-
-
- -

icon-apps

-
-
- -

icon-more-horiz

-
-
- -

icon-more-vert

-
-
-

Action icons

-
-
- -

icon-resize-horiz

-
-
- -

icon-resize-vert

-
-
- -

icon-plus

-
-
- -

icon-minus

-
-
- -

icon-cross

-
-
- -

icon-check

-
-
- -

icon-stop

-
-
- -

icon-shutdown

-
-
- -

icon-refresh

-
-
- -

icon-search

-
-
- -

icon-flag

-
-
- -

icon-bookmark

-
-
- -

icon-edit

-
-
- -

icon-delete

-
-
- -

icon-share

-
-
- -

icon-download

-
-
- -

icon-upload

-
-
-

Object icons

-
-
- -

icon-mail

-
-
- -

icon-people

-
-
- -

icon-message

-
-
- -

icon-photo

-
-
- -

icon-time

-
-
- -

icon-location

-
-
- -

icon-link

-
-
- -

icon-emoji

-
-
- 
<i class="icon icon-menu"></i>
-
-

Icon sizes

-

Use icon-2x, icon-3x and icon-4x classes to increase icon sizes. - You can set font-size to have different icon sizes. -

-
-
-

-

icon-2x (32px)

-
-
-

-

icon-3x (48px)

-
-
-

-

icon-4x (64px)

-
-
- 
<i class="icon icon-2x icon-mail"></i>
-
-
-

Labels

-

Labels are formatted text tags for highlighted, informative information.

-
-
default labelprimary labelsecondary labelsuccess labelwarning labelerror label
-
-

Add the label class to <span> or <small> elements. - You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels. -

- 
<!-- normal labels -->
-<span class="label">default label</span>
-<span class="label label-primary">primary label</span>
-
-
-
default labelprimary label
-
-

Add the label-rounded class to have rounded labels.

- 
<!-- rounded labels -->
-<span class="label label-rounded label-primary">primary label</span>
-
-
-

Code

-

Code is used for styling inline and multiline code snippets.

-

For inline code, you can use the <code> element. - For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. - The data-lang attribute is rendered as the language name in the top right. -

- 
<!-- code snippets -->
-<button class="btn">
-  Submit
-</button>
-
- 
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
-  Submit
-&lt;<span class="tag">/button</span>&gt;
-</code></pre>
-
-
-

Media

-

Media includes responsive images, figures and video classes.

-

Images

-

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

-
-
macOS El Capitan Wallpaper
-
-

Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). - This feature can replace the classic background image trick. Microsoft Edge support is shipped with Build Number 16299+. -

-
-
-
macOS Yosemite Wallpaper -
img-fit-contain
-
-
-
-
macOS Yosemite Wallpaper -
img-fit-cover
-
-
-
- 
<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
-
-

Figure

-

You can use the element <figure> for an image with a caption. - Add the figure class to <figure> element. - The images with the img-responsive class will be responsive. - And the included class figure-caption will provide basic style for caption. - Also, you can use text-left, text-center and text-right for caption alignment. -

-
-
-
macOS Yosemite Wallpaper -
macOS Yosemite wallpaper
-
-
-
-

Video

-

For responsive video, add a container with the video-responsive class. - Insert any YouTube, Youku or other iframe/embed video inside the container. - The ratio is 16:9 by default. - You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio. -

-
-
-
- -
-
-
-

For responsive <video> elements, you can add the video-responsive class directly.

- 
<div class="video-responsive video-responsive-4-3">
-  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
-</div>
-
-<video class="video-responsive" src="...">...</video>
-
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -141,976 +194,6 @@ Sometimes, there are some specific browsers targeted components.

-
-

Autocomplete

-
-
- - - -
-
- - -
-
-

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

-
-
-
-
-
Bruce Banner -
AvatarThor Odinson
-
AvatarSteve Rogers
-
-
Tony Stark -
Natasha Romanoff - -
-
-
-
-
-
-
-
Bruce BannerThor OdinsonThor Odinson -
- -
-
- -
-
-
-
-

Add a container element with the form-autocomplete class. - There are 2 parts of it, one is form-autocomplete-input, another is menu component. - You may add the is-focused class to form-autocomplete-input to make it appear as focus state. -

-

- Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. - The autocomplete HTML structure is exampled below. -

-
-
-
-
-
Bruce Banner -
AvatarThor Odinson
-
AvatarSteve Rogers
-
-
Tony Stark -
Natasha Romanoff - -
-
-
-
-
- 
<div class="form-autocomplete">
-  <!-- autocomplete input container -->
-  <div class="form-autocomplete-input form-input">
-
-    <!-- autocomplete chips -->
-    <div class="chip">
-      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
-      Thor Odinson
-      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-    </div>
-
-    <!-- autocomplete real input box -->
-    <input class="form-input" type="text" placeholder="typing here">
-  </div>
-
-  <!-- autocomplete suggestion list -->
-  <ul class="menu">
-    <!-- menu list items -->
-    <li class="menu-item">
-      <a href="#">
-        <div class="tile tile-centered">
-          <div class="tile-icon">
-            ...
-          </div>
-          <div class="tile-content">
-            ...
-          </div>
-        </div>
-      </a>
-    </li>
-  </ul>
-</div>
-
-
-

Calendars

-
- -
-

Calendars are designed for date or date range picker and events display. It is made with flex layout.

-
-
-
-
- -
March 2017
- -
-
-
-
Sun
-
Mon
-
Tue
-
Wed
-
Thu
-
Fri
-
Sat
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
- 
<div class="calendar">
-  <!-- calendar navbar -->
-  <div class="calendar-nav navbar">
-    <button class="btn btn-action btn-link btn-lg">
-      <i class="icon icon-arrow-left"></i>
-    </button>
-    <div class="navbar-primary">March 2017</div>
-    <button class="btn btn-action btn-link btn-lg">
-      <i class="icon icon-arrow-right"></i>
-    </button>
-  </div>
-
-  <div class="calendar-container">
-    <div class="calendar-header">
-      <div class="calendar-date">Sun</div>
-      <div class="calendar-date">Mon</div>
-      <div class="calendar-date">Tue</div>
-      <div class="calendar-date">Wed</div>
-      <div class="calendar-date">Thu</div>
-      <div class="calendar-date">Fri</div>
-      <div class="calendar-date">Sat</div>
-    </div>
-
-    <div class="calendar-body">
-      <!-- calendar previous month -->
-      <div class="calendar-date prev-month">
-        <button class="date-item">26</button>
-      </div>
-      ...
-      <div class="calendar-date prev-month">
-        <button class="date-item">28</button>
-      </div>
-
-      <!-- calendar current month -->
-      <div class="calendar-date">
-        <button class="date-item">1</button>
-      </div>
-      <div class="calendar-date">
-        <button class="date-item">2</button>
-      </div>
-      <div class="calendar-date">
-        <button class="date-item">3</button>
-      </div>
-      <!-- calendar date: today -->
-      <div class="calendar-date">
-        <button class="date-item date-today">4</button>
-      </div>
-      <!-- calendar date: tooltip -->
-      <div class="calendar-date tooltip" data-tooltip="You have appointments">
-        <button class="date-item">5</button>
-      </div>
-      <!-- calendar date: not available -->
-      <div class="calendar-date tooltip" data-tooltip="Not available">
-        <button class="date-item" disabled="">6</button>
-      </div>
-
-      <!-- calendar range -->
-      <div class="calendar-date calendar-range range-start">
-        <button class="date-item">7</button>
-      </div>
-      <div class="calendar-date calendar-range">
-        <button class="date-item">8</button>
-      </div>
-      <div class="calendar-date calendar-range range-end">
-        <button class="date-item">9</button>
-      </div>
-      ...
-      <div class="calendar-date">
-        <button class="date-item">31</button>
-      </div>
-
-      <!-- calendar next month -->
-      <div class="calendar-date next-month">
-        <button class="date-item">1</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-

Calendars sizes

-
-
-
-
- -
March 2017
- -
-
-
-
Sun
-
Mon
-
Tue
-
Wed
-
Thu
-
Fri
-
Sat
-
-
-
- -
-
- -
Zhonghe Festival
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
Product launch eventInternational Women's Day
-
-
- -
-
- -
-
- -
-
- -
Arbor Day
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
Spring Equinox
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
April Fools' Day
-
-
-
-
-
-
- 
<div class="calendar calendar-lg">
-  <!-- calendar navbar structure -->
-
-  <div class="calendar-container">
-    <!-- calendar header structure -->
-
-    <div class="calendar-body">
-      <!-- calendar date with events -->
-      <div class="calendar-date">
-        <button class="date-item active">20</button>
-        <div class="calendar-events">
-          <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-

Carousels

-

Carousels are slideshows for cycling images. It is built in pure CSS.

-
-
-
- - - - -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
- - macOS Yosemite Wallpaper -
-
-
- - - - -
-
-
-
- 
<div class="carousel">
-  <!-- carousel locator -->
-  <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
-  <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
-  <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
-  <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
-  
-  <!-- carousel container -->
-  <div class="carousel-container">
-    <!-- carousel item -->
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
-      <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
-    </figure>
-  </div>
-  <!-- carousel navigation -->
-  <div class="carousel-nav">
-    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
-    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
-    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
-    <label class="nav-item text-hide c-hand" for="slide-4">4</label>
-  </div>
-</div>
-
-
-

Comparison sliders

-
-
- - - -
-
- - -
-
-

Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

-
-
-
-
macOS Sierra Wallpaper -
Before
-
-
macOS Sierra Wallpaper -
After
- -
-
-
-
- 
<div class="comparison-slider">
-  <figure class="comparison-before">
-    <!-- image (before) -->
-    <div class="comparison-label">Before</div>
-  </figure>
-
-  <figure class="comparison-after">
-    <!-- image (after) -->
-    <div class="comparison-label">After</div>
-    <textarea class="comparison-resizer" readonly></textarea>
-  </figure>
-</div>
-
-
-

Filters

-

Filters are CSS only content filters.

-
-
-
- - - - - -
- - - - - -
-
-
-
-
-
Fallout 4
-
Roleplaying
-
-
-
-
-
-
-
Halo 5
-
Shooter
-
-
-
-
-
-
-
Quantum Break
-
Action
-
-
-
-
-
-
-
Forza Horizon 3
-
Sports
-
-
-
-
-
-
-
Final Fantasy XV
-
Roleplaying
-
-
-
-
-
-
-
NBA 2K17
-
Sports
-
-
-
-
-
-
-
Battlefield 1
-
Shooter
-
-
-
-
-
-
-
GTA V
-
Action
-
-
-
-
-
-
-
FIFA 17
-
Sports
-
-
-
-
-
-
-
Overwatch
-
Shooter
-
-
-
-
-
-
-
Titanfall 2
-
Shooter
-
-
-
-
-
-
-
Gears of Wars 4
-
Shooter
-
-
-
-
-
-
-
-

Filters use tag-1 to tag-8 to flag different tags. - tag-0 is reserved for clearing filter (or showing all). - You can overwrite $filter-number in _filters.scss to have more filters. -

- 
<div class="filter">
-  <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
-  <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
-  <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
-
-  <div class="filter-nav">
-    <label class="chip" for="tag-0">All</label>
-    <label class="chip" for="tag-1">Action</label>
-    <label class="chip" for="tag-2">Roleplaying</label>
-  </div>
-
-  <div class="filter-body">
-    <div class="filter-item card" data-tag="tag-1">
-      <!-- Filter item content -->
-    </div>
-    <div class="filter-item card" data-tag="tag-2">
-      <!-- Filter item content -->
-    </div>
-    <!-- Filter items -->
-  </div>
-</div>
-
-
-

Meters

-

Meters represent the value within the known range.

-
-
- -
-
- -
-
- -
-
- -
-
- 
<!-- Meter is green when low < value < high -->
-<meter class="meter" value="20" min="0" max="100"></meter>
-<meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is yellow when value < low  or high < value -->
-<meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
-<meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
-
-
-

Off-canvas

-

The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.

-

- By default, the off-canvas menu is collapsed whenever the window width is. - But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px. -

-
-
-
- -
-
-

Lorem ipsum

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

-

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

-
-
-
-
-
-

You can open the sidebar by adding the class active to off-canvas-sidebar. - And remove the active to close it. -

- 
<div class="off-canvas">
-  <!-- off-screen toggle button -->
-  <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
-    <i class="icon icon-menu"></i>
-  </a>
-
-  <div id="sidebar-id" class="off-canvas-sidebar">
-    <!-- off-screen sidebar -->
-  </div>
-
-  <a class="off-canvas-overlay" href="#close"></a>
-
-  <div class="off-canvas-content">
-    <!-- off-screen content -->
-  </div>
-</div>
-
-
-

Parallax

-
-
- - - -
-
- - -
-
-

The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.

-
-
-
-
-
-
-
-
-
-

tvOS parallax demo

-
-
macOS Yosemite Wallpaper
-
-
-
-
- 
<div class="parallax">
-  <div class="parallax-top-left" tabindex="1"></div>
-  <div class="parallax-top-right" tabindex="2"></div>
-  <div class="parallax-bottom-left" tabindex="3"></div>
-  <div class="parallax-bottom-right" tabindex="4"></div>
-  <div class="parallax-content">
-    <div class="parallax-front">
-      <h2>tvOS parallax demo</h2>
-    </div>
-    <div class="parallax-back">
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </div>
-  </div>
-</div>
-
-
-
-

Progress

-

The Progress indicates the progress completion of a task.

-
-
- -
-
- -
-
- -
-
- -
-
- 
<progress class="progress" value="25" max="100"></progress>
-<progress class="progress" max="100"></progress>
-
-
-

Sliders

-

Sliders are for selecting values from ranges.

-

You can add the class tooltip to have tooltip labels. - If no data-tooltip is set, the value will be used instead. -

-
-
- -
-
- -
-
- 
<!-- Sliders -->
-<input class="slider" type="range" min="0" max="100" value="50">
-<!-- Sliders with tooltips -->
-<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
-
-
-

Timelines

-

Timelines are ordered sequences of activities.

-
-
-
-
-
-
-
-
-

March 2016

-

Initial commit

-
-
-
-
-
-
-
-
-
-

February 2017

-

New Documents experience

-

Bars: represent the progress of a task

-

Steps: progress indicators of a sequence of task steps

-

Tiles: repeatable or embeddable information blocks

-
-
- -
-
-
-
-
-
-
-
-
-

March 2017

-

Icons: single-element, responsive and pure CSS icons

-

Popovers: small overlay content containers

-

Calendars: date or date range picker and events display

-

Carousels: slideshows for cycling images

-
-
- -
-
-
-
-
-
-
- 
<div class="timeline">
-  <div class="timeline-item" id="timeline-example-1">
-    <div class="timeline-left">
-      <a class="timeline-icon" href="#timeline-example-1"></a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-
-  <div class="timeline-item" id="timeline-example-2">
-    <div class="timeline-left">
-      <a class="timeline-icon icon-lg" href="#timeline-example-2">
-        <i class="icon icon-check"></i>
-      </a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-  ...
-</div>
-
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -135,574 +188,8 @@

Introduction

-
-
- - - -
-
- - -
-
-

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

-

- Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.

-
-
-

Installation

-
-
- - - -
-
- - -
-
-

There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.

-

Install manually

-

Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

-

Download Spectre.css

-

Include spectre.css located in /dist in your website or Web app . Also, you can add spectre-icons.css and spectre-exp.css accordingly.

- 
<link rel="stylesheet" href="spectre.min.css">
-<link rel="stylesheet" href="spectre-exp.min.css">
-<link rel="stylesheet" href="spectre-icons.min.css">
-
-

Install from CDN

-

Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.

- 
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
-<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
-<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
-
-

Install with NPM

- 
npm install spectre.css --save
-
-

Install with Yarn

- 
yarn add spectre.css
-
-

Install from Bower

- 
bower install spectre.css --save
-
-
-

Custom version

-
- -
-

You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.

-

Sass Source Code

-

If you are looking for Less version of Spectre.css, please switch to Less branch.

-

Less Branch

-

Compiling CSS

-

Spectre uses Gulp for compiling CSS. Firstly you need to install NPM, which is used to manage Gulp and other dependencies.

-

Then, you can build the CSS file from the command line:

-
    -
  1. Navigate to the root directory of Spectre.
    2. -
  2. Run npm install. NPM will install all dev dependencies as listed in package.json.
    3. -
  3. When completed, run gulp build task to compile Sass to CSS and minify files.
    4. -
  4. You can find compiled CSS files in /dist directory.
    5. -
-

All available Gulp tasks:

-
    -
  • gulp build - compile Sass to CSS and minify files (default)
    • -
  • gulp docs - compile Docs related files
    • -
  • gulp watch - watch file changes and re-compile CSS files
    • -
-

Importing Sass

-

It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.

-
    -
  • First, create your own project and install Spectre via NPM or other package managers.
    • -
  • Then create your project-name.scss file in the root folder. You can use project-name.scss to define your variables.
    • -
  • Compile the Sass file to CSS to get the custom version of Spectre.
    • -
- 
// Example of project-name.scss
-// Define variables to override default ones
-$primary-color: #2e5bec;
-$dark-color: #3e396b;
-
-// Import full Spectre source code
-@import "node_modules/spectre.css/src/spectre";
-
-

Alternatively, you can create custom _variables.scss and import it to project-name.scss.

- 
// Example of project-name.scss
-@import "variables";
-
-// Import only the needed components
-@import "node_modules/spectre.css/src/buttons";
-@import "node_modules/spectre.css/src/forms";
-
-

Folder structure

- 
spectre/
-├── dist/                           // Build folder
-│   ├── spectre-exp.css
-│   ├── spectre-exp.min.css
-│   ├── spectre-icons.css
-│   ├── spectre-icons.min.css
-│   ├── spectre.css
-│   └── spectre.min.css
-│
-├── docs/
-│   ├── dist/                       // Pre-built CSS folder
-│   │   ├── spectre-exp.css
-│   │   ├── spectre-exp.min.css
-│   │   ├── spectre-icons.css
-│   │   ├── spectre-icons.min.css
-│   │   ├── spectre.css
-│   │   └── spectre.min.css
-|   ├── css/                        // Docs CSS files
-│   │   └── docs.css
-|   ├── src/
-│   │   ├── scss                    // Docs Sass files
-│   │   │   └── docs.scss
-│   │   ├── index.pug               // Docs Pug files
-│   │   └── ...
-│   ├── examples/                   // Example tempalte
-│   │   └── starter.html
-│   ├── ../
-│   ├── index.html
-│   └── ...
-│
-├── src/                            // Source Sass files
-│   ├── spectre.scss
-│   ├── spectre-icons.scss
-│   ├── spectre-exp.scss
-│   ├── _mixins.scss
-│   ├── _variables.scss
-│   └── ...
-│
-├── gulpfile.js
-├── package.json
-└── ...
-
-

Variables

-

Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in _variables.scss include !default flag. You can redefine the variables to override the values.

-

Variables - Colors

-
-
-
-
#5755d9
-
Primary
-
-
-
-
-
#f1f1fc
-
Secondary
-
-
-
-
-
-
-
#32b643
-
Success
-
-
-
-
-
#ffb700
-
Warning
-
-
-
-
-
#e85600
-
Error
-
-
-
-
-
-
-
#303742
-
Dark
-
-
-
-
-
#66758c
-
Gray dark
-
-
-
-
-
#bcc3ce
-
Gray
-
-
-
-
-
#f7f8f9
-
Gray light
-
-
-
-
-
#bcc3ce
-
Border
-
-
-
-
-
#f7f8f9
-
Background
-
-
-
-
-
#fff
-
Light
-
-
-
-

Variables - Button mixins

-

There are 2 button variant mixins in _mixins.scss to generate different color variants.

-
    -
  • @mixin button-variant($color: $primary-color);
    • -
  • @mixin button-outline-variant($color: $primary-color);
    • -
- 
<!-- filled button with the success color -->
-.btn-success {
-  @include button-variant($success-color);
-}
-
-<!-- outlined button with the success color -->
-.btn-outline-success {
-  @include button-outline-variant($success-color);
-}
-
-

Variables - Sizes

-

The default REM (root em) size in Spectre.css is 20px.

-

Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate.

-

Spectre uses 4px as the unit size. Sizes of components are based on the unit size.

-

Variables - Custom prefix

-

There is also a way to add custom prefix to all CSS classes. You can use gulp-css-prefix plugin and add a new Gulp task to enable it.

- 
npm install gulp-css-prefix
-
-

To add spectre- to all classes, you can add the Gulp task to gulpfile.js file.

- 
var cssPrefix = require('gulp-css-prefix');
-
-gulp.task('prefix', function() {
-  gulp.src('./dist/*.css')
-      .pipe(cssPrefix('spectre-'))
-      .pipe(gulp.dest('./dist'))
-});
-
-

After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.

-
-
-

Accessibility

-
-
- - - -
-
- - -
-
-
-
-

Browser support

-
-
- - - -
-
- - -
-
-

Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

-
    -
  • Chrome LAST 4
    • -
  • Microsoft Edge LAST 4
    • -
  • Firefox Extended Support Release
    • -
  • Safari LAST 4
    • -
  • Opera LAST 4
    • -
  • Internet Explorer 10+
    • -
-

Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

-
-
-

What's new

-
-
- - - -
-
- - -
-

Spectre.css Changelog

-
v0.5.4
-
    -
  • IMPORTANT: Change naming of position utilities to avoid conflicts
    • -
  • Update dark color variable
    • -
  • Fix sidebar hash link bug #482
    • -
  • Fix browser support typo #469
    • -
  • Fix code typo #460
    • -
  • Fix GitHub button z-index bug #458
    • -
  • Fix Bar background color issue by adding !important to color utilities
    • -
  • Fix chip bug when content is too long #506
    • -
  • Fix multiple select height bug #508
    • -
-
v0.5.3
-
    -
  • Add dark text color to utilities
    • -
  • Add error state to the indeterminate checkbox
    • -
  • Add inline forms
    • -
  • Add more code examples
    • -
  • Fix errors in the Docs
    • -
-
v0.5.2
-
    -
  • IMPORTANT: Move Docs to Pug templates
    • -
  • Add more Docs examples
    • -
  • Add visited link style
    • -
  • Add 100% modal height class #391
    • -
  • Fix off-canvas-overlay bug #392
    • -
  • Fix margin and padding values #431
    • -
  • Fix Accordion example #438
    • -
  • Fix a bug of input addons width on mobile devices #449
    • -
  • Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)
    • -
-
v0.5.1
-

IMPORTANT: Move Autocomplete to the Experimentals

-
    -
  • Add form checkbox, radio and switch support to Menus
    • -
  • Add responsive horizontal form support #375
    • -
  • Add Favicons in the docs #398
    • -
  • Fix Off-canvas z-index problem #361
    • -
  • Fix icons disappearing on group classes on focus
    • -
  • Fix Deprecation Warning #396 #356
    • -
  • Initial commit of RTL support (not finished)
    • -
-
v0.5.0
-
    -
  • IMPORTANT: Restore /dist folder
    • -
  • Add Grid nesting example #353
    • -
  • Add Form control sizes support
    • -
  • Update Off-canvas default behavior and new option available #347
    • -
  • Split Mixins
    • -
  • Fix Navbar last-child align right bug #346
    • -
  • Fix modal doc typo
    • -
  • Fix docs examples #348
    • -
-
v0.4.7
-
    -
  • Add new button colors (success and error) #227 #241 #342
    • -
  • Add overflow-scrolling: touch; CSS for better scrolling
    • -
  • Add touch support to Parallax image hover effect
    • -
  • Update the Modal example code
    • -
  • Fix form horizontal layout spacing
    • -
-
v0.4.6
-
    -
  • Add new Sliders example #328
    • -
  • Add Table with horizontal scroll support #333
    • -
  • Update Calendar event style which makes use of color utilities #326
    • -
  • Define $parallax-fade-color as default variable #332
    • -
  • Fix the Docs content mistake
    • -
  • Fix breadcrumb-item extra spacing #337
    • -
  • Fix comparison slider image responsive bug #338
    • -
-
v0.4.5
-
    -
  • Rewrite Off-canvas component
    • -
  • Add active support to the Off-canvas #308
    • -
  • Update the Docs pages
    • -
-
v0.4.4
-
    -
  • IMPORTANT: Increase default font sizes to 16px #271
    • -
  • Add version number to CSS #288 #289
    • -
-
v0.4.3
-
    -
  • Add Icon Sizes #284
    • -
  • Add Large Modals #293
    • -
  • Update primary color to #5755d9
    • -
  • Change Tooltips white-space to pre #292
    • -
  • Encode SVG Data URI (thanks to @mariodev) #297 #298
    • -
  • Improve Buttons and Forms small and large variables
    • -
  • Improve Filters code
    • -
  • Improve gulpfile and package
    • -
  • Add Importing Sass Docs
    • -
-
v0.4.2
-
    -
  • Add Off-screen experimental
    • -
  • Fix Docs rendering bug in Safari
    • -
-
v0.4.1
-
    -
  • Add default modifier to all variables
    • -
  • Add address reset which changes font-style to normal
    • -
  • Add Details and Summary Accordions support
    • -
  • Fix responsive video
    • -
  • Update the Docs
    • -
-
v0.4.0
-
    -
  • Switch from Less to Sass
    • -
  • Add Cursor utilities
    • -
-
v0.3.2
-
    -
  • Add label-rounded classes
    • -
  • Add Avatars presence status code
    • -
  • Add Typography Fonts Docs
    • -
  • Add Button variant mixins
    • -
  • Update Autocomplete style
    • -
  • Update Autoprefixer rules
    • -
  • Update label mixin and code mono font family
    • -
-
v0.3.1
-

IMPORTANT: The default root font-size has been changed to 20px, please update your rem numbers if you're using the custom sizes. Learn more.

-
    -
  • Fix margin and padding utilities bug
    • -
  • Add grid offset
    • -
  • Rename Display utilities class names
    • -
  • Move Panels and Empty states to Components from Layout
    • -
  • Fix Docs bugs and cleanup codes
    • -
-
v0.2.15
-
    -
  • BIG Update to the Docs experience, completely rewritten and improved #240
    • -
  • Add Text and Background colors utilities #205 #219
    • -
  • Add Install from CDN option #191
    • -
  • Add unit size (4px) and unit size variables
    • -
  • Add Responsive container (max width container) #222
    • -
  • Add error and success states to checkbox, radio and switch #246
    • -
  • Fix Rem unit issue in East Asian Chrome #110
    • -
  • Fix icon direction bug #218
    • -
  • Fix Dropdown menu max items/height #226
    • -
-
v0.2.14
-
    -
  • Add vertical divider
    • -
  • Add Form icon support
    • -
  • Add Accordions
    • -
  • Add anchor links to Docs
    • -
  • Add new container grid size
    • -
  • Fix link error and typo
    • -
-
v0.2.13
-
    -
  • Add Timelines code
    • -
  • Add input readonly style
    • -
  • Change Gulp building process and ignore /dist
    • -
  • Change naming danger to error
    • -
  • Change label-variant mixin
    • -
  • Fix dropdown-toggle border radius in button groups
    • -
  • Fix Calendars date item width bug under Firefox
    • -
-
v0.2.12
-
    -
  • Add pure CSS Comparison Sliders
    • -
  • Add pure CSS content Filters
    • -
  • Add Avatars badge support
    • -
  • Add more icons
    • -
  • Change :focus support
    • -
  • Change Docs image sizes and add object-fit support
    • -
  • Update Navbar code
    • -
  • Fix typos, Modals bugs
    • -
-
v0.2.11
-
    -
  • Add pure CSS Popovers
    • -
  • Add pure CSS Icons
    • -
  • Add Slider bars
    • -
  • Add tvOS Parallax effect text layer
    • -
  • Update shadow mixin
    • -
-
v0.2.10
-
    -
  • Add Shadows and Z-index variables
    • -
  • Add Divider text
    • -
  • Improve color variables
    • -
  • Cleanup components code
    • -
  • Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)
    • -
-
v0.2.9
-
    -
  • Add Panels layout: flexible view container layout with auto-expand content section
    • -
  • Update Navbar layout
    • -
  • Update docs and examples
    • -
-
v0.2.8
-
    -
  • Add Carousels previous and next buttons
    • -
  • Improve disabled state for forms
    • -
  • Improve calendar events style
    • -
  • Improve Sliders disabled style
    • -
  • Improve Autocomplete menu position
    • -
  • Merge Menus and Dropdowns
    • -
-
v0.2.7
-
    -
  • Add Calendars experimental support
    • -
  • Add tabindex note to the dropdowns docs
    • -
  • Add shrink-to-fit=no to head meta
    • -
  • Add Colors docs and update colors
    • -
  • Fix wrong shadow colors with form-select
    • -
  • Fix grid-480
    • -
-
v0.2.6
-
    -
  • Add Carousels initial experimental version
    • -
  • Add Spectre.css Twitter account (@spectrecss) link
    • -
  • Improve Docs experience and navbar
    • -
  • Fix the bug of form input focus colors
    • -
-
v0.2.5
-
    -
  • Improve color variables completely
    • -
  • Add Menu badges
    • -
  • Add Responsive visibility (show-x)
    • -
  • Add Parallax effect (pure CSS)
    • -
  • Fix elements and components
    • -
  • Update empty state layout code
    • -
-
v0.2.4
-
    -
  • ADD: Meters element experimental support
    • -
  • ADD: Progress indeterminate animation
    • -
  • ADD: Text-decoration-skip support
    • -
  • CHG: Split Codes and improve docs codes
    • -
  • FIX: Steps with tooltips z-index bug
    • -
-
v0.2.3
-
    -
  • Bars component
    • -
  • Badges for buttons
    • -
  • Experimentals CSS and docs
    • -
  • Sliders experimental component
    • -
  • A number of fixes as usual
    • -
-
v0.2.1
-

I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:

-
    -
  • New Docs experience with better navigations and better mobile off-canvas menu
    • -
  • New components: Tiles, Steps and Navs (part of Navigation)
    • -
  • Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support and better focus style
    • -
  • Fixes
    • -
-
v0.0.1 - March 2016
-

Initial commit

-

Thank you. ♥

- -

Releases

+

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. +

Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
diff --git a/docs/layout.html b/docs/layout.html index 11f9ab6..d5f1322 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -23,7 +23,8 @@
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -133,563 +186,6 @@
-
-

Flexbox grid

-
-
- - - -
-
- - -
-
-

Layout includes flexbox based responsive grid system with 12 columns.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
col-12 (100%)
-
-
-
-
-
col-9 (75%)
-
-
-
-
-
col-6 (50%)
-
-
-
-
-
col-3 (25%)
-
-
- 
<!-- flexbox grid example -->
-<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6</div>
-    <div class="column col-3">col-3</div>
-    <div class="column col-2">col-2</div>
-    <div class="column col-1">col-1</div>
-  </div>
-</div>
-
-

Add the columns class to a container with the container class. - And add any element you want with the column class inside the container. These columns will take up the space equally. - You can specific the width of each column by adding class col-<1-12>. -

-

And you can add the col-gapless class to the columns to have gapless columns.

-
-
-
col-6 (gapless)
-
-
-
col-6 (gapless)
-
-
- 
<!-- gapless columns -->
-<div class="columns col-gapless">
-  <div class="column col-6">col-6</div>
-  <div class="column col-6">col-6</div>
-</div>
-
-

By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.

-
-
-
col-8
-
-
-
col-8
-
-
- 
<!-- one line columns -->
-<div class="columns col-oneline">
-  <div class="column col-8">col-8</div>
-  <div class="column col-8">col-8</div>
-</div>
-
-

Grid offset

-

- The Flexbox grid provides margin auto utilities to set offset. - There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns. -

-
-
-
col-2
-
-
-
col-4 col-mx-auto
-
-
-
-
-
col-2
-
-
-
col-4 col-ml-auto
-
-
-
-
-
col-4 col-ml-auto
-
-
-
col-2
-
-
-
-
-
col-4 col-mx-auto
-
-
-
col-2
-
-
-
-
-
col-4 col-mr-auto
-
-
-
col-2
-
-
-
-
-
col-4 col-mx-auto
-
-
- 
<!-- grid offset example -->
-<div class="container">
-  <div class="columns">
-    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
-    <div class="column col-2">col-2</div>
-  </div>
-</div>
-
-

Grid nesting

-

To nest grids, add the new columns and column structure within an existing column.

-
-
-
col-6
-
-
-
col-6
-
-
-
col-6
-
-
-
-
-
col-6
-
-
- 
<!-- grid nesting example -->
-<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6
-      <div class="columns">
-        <div class="column col-6">col-6</div>
-        <div class="column col-6">col-6</div>
-      </div>
-    </div>
-    <div class="column col-6">col-6</div>
-  </div>
-</div>
-
-
-

Responsive

-
- -
-

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

-
-
-
col-10
col-lg-8
col-md-6
col-sm-4
-
-
-
col-2
col-lg-4
col-md-6
col-sm-8
-
-
-

There are col-xs-<1-12>, col-sm-<1-12>, col-md-<1-12>, col-lg-<1-12> and col-xl-<1-12> available for flexible grid across mobile, tablet and desktop viewport usage.

-
    -
  • col-xs-<1-12> apply to window width smaller than or equal to 480px.
    • -
  • col-sm-<1-12> apply to window width smaller than or equal to 600px.
    • -
  • col-md-<1-12> apply to window width smaller than or equal to 840px.
    • -
  • col-lg-<1-12> apply to window width smaller than or equal to 960px.
    • -
  • col-xl-<1-12> apply to window width smaller than or equal to 1280px.
    • -
  • col-<1-12> apply to all window width, including the width wider than 1280px.
    • -
- 
<div class="container">
-  <div class="columns">
-    <div class="column col-xs-6">col-xs-6</div>
-    <div class="column col-xs-3">col-xs-3</div>
-    <div class="column col-xs-3">col-xs-3</div>
-  </div>
-</div>
-
-

Responsive container

-

- The responsive layout also provides fixed-width containers. - Use grid-xs(480px), grid-sm(600px), grid-md(840px), grid-lg(960px) or grid-xl(1280px) to the container for a fixed-width container with the specific max-width. -

- 
<!-- 100% width container with max-width set to grid-lg (960px) -->
-<div class="container grid-lg">
-  <div class="columns">
-    ...
-  </div>
-</div>
-
-

Responsive visibility

-

The responsive visibility utilities help show and hide elements on specific viewport sizes.

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
size-xssize-smsize-mdsize-lgsize-xl
hide-xs -
- 		-
- 		-
- 		-
- 		-
-
hide-sm -
- 		-
- 		-
- 		-
- 		-
-
hide-md -
- 		-
- 		-
- 		-
- 		-
-
hide-lg -
- 		-
- 		-
- 		-
- 		-
-
hide-xl -
- 		-
- 		-
- 		-
- 		-
-
-
-
-

For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.

-
    -
  • hide-xs hides elements when the window width is smaller than or equal to 480px.
    • -
  • hide-sm hides elements when the window width is smaller than or equal to 600px.
    • -
  • hide-md hides elements when the window width is smaller than or equal to 840px.
    • -
  • hide-lg hides elements when the window width is smaller than or equal to 960px.
    • -
  • hide-xl hides elements when the window width is smaller than or equal to 1280px.
    • -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
size-xssize-smsize-mdsize-lgsize-xl
show-xs -
- 		-
- 		-
- 		-
- 		-
-
show-sm -
- 		-
- 		-
- 		-
- 		-
-
show-md -
- 		-
- 		-
- 		-
- 		-
-
show-lg -
- 		-
- 		-
- 		-
- 		-
-
show-xl -
- 		-
- 		-
- 		-
- 		-
-
-
-
-

For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.

-
    -
  • show-xs shows elements when the window width is smaller than or equal to 480px.
    • -
  • show-sm shows elements when the window width is smaller than or equal to 600px.
    • -
  • show-md shows elements when the window width is smaller than or equal to 840px.
    • -
  • show-lg shows elements when the window width is smaller than or equal to 960px.
    • -
  • show-xl shows elements when the window width is smaller than or equal to 1280px.
    • -
-

- Spectre also has a responsive web test tool Responsive Resizer. - You can clone the GitHub Repo to use it locally or use it online. -

-

Responsive Resizer

-
- @@ -114,17 +156,28 @@
@@ -133,333 +186,6 @@
-
-

Color utilities

-
-
- - - -
-
- - -
-
-

Color utilities are used for changing colors for text, link and background.

-

Text colors

-
-
-

primary color

-

secondary color

-

dark color

-

gray color

-

light color

-

success color

-

warning color

-

error color

-
-
- 
<span class="text-primary">primary color</span>
-<span class="text-secondary">secondary color</span>
-<span class="text-dark">dark color</span>
-<span class="text-gray">gray color</span>
-<span class="text-light">light color</span>
-<span class="text-success">success color</span>
-<span class="text-warning">warning color</span>
-<span class="text-error">error color</span>
-
-
-
-

primary link

-

secondary link

-

dark link

-

gray link

-

light link

-

success link

-

warning link

-

error link

-
-
- 
<a class="text-primary" href="#">primary color</a>
-<a class="text-secondary" href="#">secondary color</a>
-<a class="text-dark" href="#">dark color</a>
-<a class="text-gray" href="#">gray color</a>
-<a class="text-light" href="#">light color</a>
-<a class="text-success" href="#">success color</a>
-<a class="text-warning" href="#">warning color</a>
-<a class="text-error" href="#">error color</a>
-
-

Background colors

-
-
-

primary bg

-

secondary bg

-

dark bg

-

gray bg

-

success bg

-

warning bg

-

error bg

-
-
- 
<div class="bg-primary">primary bg</div>
-<div class="bg-secondary">secondary bg</div>
-<div class="bg-dark">dark bg</div>
-<div class="bg-gray">gray bg</div>
-<div class="bg-success">success bg</div>
-<div class="bg-warning">warning bg</div>
-<div class="bg-error">error bg</div>
-
-
-

Cursor utilities

-

Cursor utilities specify which mouse cursor to display when mouseover.

-
-
-
c-hand
-
-
-
c-move
-
-
-
c-zoom-in
-
-
-
c-zoom-out
-
-
-
c-not-allowed
-
-
-
c-auto
-
-
- 
<!-- cursor: hand; -->
-<div class="c-hand"></div>
-<!-- cursor: move; -->
-<div class="c-move"></div>
-<!-- cursor: zoom-in; -->
-<div class="c-zoom-in"></div>
-<!-- cursor: zoom-out; -->
-<div class="c-zoom-out"></div>
-<!-- cursor: not-allowed; -->
-<div class="c-not-allowed"></div>
-<!-- cursor: auto; -->
-<div class="c-auto"></div>
-
-
-

Display utilities

-
- -
-

Display utilities are used for display and hidden things.

- 
<!-- display: block; -->
-<div class="d-block"></div>
-<!-- display: inline; -->
-<div class="d-inline"></div>
-<!-- display: inline-block; -->
-<div class="d-inline-block"></div>
-<!-- display: flex; -->
-<div class="d-flex"></div>
-<!-- display: inline-flex; -->
-<div class="d-inline-flex"></div>
-<!-- display: none; -->
-<div class="d-none"></div>
-<div class="d-hide"></div>
-<!-- visibility: visible; -->
-<div class="d-visible"></div>
-<!-- visibility: hidden; -->
-<div class="d-invisible"></div>
-<!-- hide text contents -->
-<div class="text-hide"></div>
-<!-- assistive text for screen reader -->
-<div class="text-assistive"></div>
-
-
-

Divider

-

A Divider is used for separating elements.

-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. -
-
-
-
- -
- - -
-
- - -
-
- -
-
- -
- -
-
-
-
-
- - -
-
- - -
-
-
-
- 
<!-- divider element -->
-<div class="divider"></div>
-<!-- divider element with text -->
-<div class="divider text-center" data-content="OR"></div>
-
-<!-- vertical divider element with text -->
-<div class="columns">
-  <div class="column">
-    <!-- column content -->
-  </div>
-  <div class="divider-vert" data-content="OR"></div>
-  <div class="column">
-    <!-- column content -->
-  </div>
-</div>
-
-
-

Loading

-
-
- - - -
-
- - -
-
-

- Loading indicator is used for loading or updating. - You can add the loading class to a container for loading status. -

-
-
-
-
-
-

Add the loading-lg class for large size.

-
-
-
-
-
- 
<!-- loading element -->
-<div class="loading"></div>
-<div class="loading loading-lg"></div>
-
-
-

Position utilities

-

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

- 
<!-- clear float -->
-<div class="clearfix"></div>
-<!-- float: left and right -->
-<div class="float-left"></div>
-<div class="float-right"></div>
-<!-- position: relative, absolute, fixed and sticky -->
-<div class="p-relative"></div>
-<div class="p-absolute"></div>
-<div class="p-fixed"></div>
-<div class="p-sticky"></div>
-<!-- centered block -->
-<div class="p-centered"></div>
-
-<!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
-<div class="m-1"></div>
-<div class="m-2"></div>
-<!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
-<div class="mt-1"></div>
-<div class="mt-2"></div>
-<!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
-<div class="mx-1"></div>
-<div class="mx-2"></div>
-<div class="my-1"></div>
-<div class="my-2"></div>
-<!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
-<div class="p-1"></div>
-<div class="p-2"></div>
-<!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
-<div class="pt-1"></div>
-<div class="pt-2"></div>
-<!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
-<div class="px-1"></div>
-<div class="px-2"></div>
-<div class="py-1"></div>
-<div class="py-2"></div>
-
-
-

Shape utilities

-

Shape utilities are used for change element shapes.

-
-
-
s-rounded
-
-
-
s-circle
-
-
- 
<!-- rounded element -->
-<div class="s-rounded"></div>
-<!-- circle element -->
-<div class="s-circle"></div>
-
-
-

Text utilities

-

Text utilities are used for text alignment, styles and overflow things.

- 
<!-- left-aligned text -->
-<div class="text-left"></div>
-<!-- center-aligned text -->
-<div class="text-center"></div>
-<!-- right-aligned text -->
-<div class="text-right"></div>
-<!-- justified text -->
-<div class="text-justify"></div>
-
-<!-- Lowercased text -->
-<div class="text-lowercase"></div>
-<!-- Uppercased text -->
-<div class="text-uppercase"></div>
-<!-- Capitalized text -->
-<div class="text-capitalize"></div>
-
-<!-- Normal weight text -->
-<div class="text-normal"></div>
-<!-- Bold text -->
-<div class="text-bold"></div>
-<!-- Italicized text -->
-<div class="text-italic"></div>
-<!-- Larger text (120%) -->
-<div class="text-large"></div>
-
-<!-- Overflow behavior: display an ellipsis to represent clipped text -->
-<div class="text-ellipsis"></div>
-<!-- Overflow behavior: truncate the text -->
-<div class="text-clip"></div>
-<!-- Text may be broken at arbitrary points -->
-<div class="text-break"></div>
-