├── .csscomb.json ├── .gitattributes ├── .gitignore ├── .hound.yml ├── .scss-lint.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bower.json ├── dist ├── spectre-exp.css ├── spectre-exp.min.css ├── spectre-icons.css ├── spectre-icons.min.css ├── spectre.css └── spectre.min.css ├── docs ├── components.html ├── components │ ├── accordions.html │ ├── avatars.html │ ├── badges.html │ ├── bars.html │ ├── breadcrumbs.html │ ├── cards.html │ ├── chips.html │ ├── empty.html │ ├── menu.html │ ├── modals.html │ ├── nav.html │ ├── pagination.html │ ├── panels.html │ ├── popovers.html │ ├── steps.html │ ├── tabs.html │ ├── tiles.html │ ├── toasts.html │ └── tooltips.html ├── dist │ ├── docs.css │ ├── docs.min.css │ ├── spectre-exp.css │ ├── spectre-exp.min.css │ ├── spectre-icons.css │ ├── spectre-icons.min.css │ ├── spectre-rtl.css │ ├── spectre-rtl.min.css │ ├── spectre.css │ └── spectre.min.css ├── elements.html ├── elements │ ├── buttons.html │ ├── code.html │ ├── forms.html │ ├── icons.html │ ├── labels.html │ ├── media.html │ ├── tables.html │ └── typography.html ├── examples │ └── starter.html ├── experimentals.html ├── experimentals │ ├── autocomplete.html │ ├── calendars.html │ ├── carousels.html │ ├── comparison.html │ ├── filters.html │ ├── meters.html │ ├── off-canvas.html │ ├── parallax.html │ ├── progress.html │ ├── sliders.html │ ├── timelines.html │ └── viewer-360.html ├── getting-started.html ├── getting-started │ ├── browsers.html │ ├── custom.html │ ├── installation.html │ └── whatsnew.html ├── img │ ├── avatar-1.png │ ├── avatar-2.png │ ├── avatar-3.png │ ├── avatar-4.png │ ├── avatar-5.png │ ├── favicons │ │ ├── favicon.ico │ │ └── favicon.png │ ├── macos-sierra-2.jpg │ ├── macos-sierra.jpg │ ├── osx-el-capitan-2.jpg │ ├── osx-el-capitan.jpg │ ├── osx-yosemite-2.jpg │ ├── osx-yosemite.jpg │ └── spectre-logo.svg ├── index.html ├── layout.html ├── layout │ ├── grid.html │ ├── hero.html │ ├── navbar.html │ └── responsive.html ├── rtl.html ├── src │ ├── _layout │ │ ├── _ad-c.pug │ │ ├── _ad-g.pug │ │ ├── _docs-layout.pug │ │ ├── _example-layout.pug │ │ ├── _footer.pug │ │ ├── _layout.pug │ │ └── _mixins.pug │ ├── components.pug │ ├── components │ │ ├── accordions.pug │ │ ├── avatars.pug │ │ ├── badges.pug │ │ ├── bars.pug │ │ ├── breadcrumbs.pug │ │ ├── cards.pug │ │ ├── chips.pug │ │ ├── empty.pug │ │ ├── menu.pug │ │ ├── modals.pug │ │ ├── nav.pug │ │ ├── pagination.pug │ │ ├── panels.pug │ │ ├── popovers.pug │ │ ├── steps.pug │ │ ├── tabs.pug │ │ ├── tiles.pug │ │ ├── toasts.pug │ │ └── tooltips.pug │ ├── elements.pug │ ├── elements │ │ ├── buttons.pug │ │ ├── code.pug │ │ ├── forms.pug │ │ ├── icons.pug │ │ ├── labels.pug │ │ ├── media.pug │ │ ├── tables.pug │ │ └── typography.pug │ ├── examples │ │ └── starter.pug │ ├── experimentals.pug │ ├── experimentals │ │ ├── autocomplete.pug │ │ ├── calendars.pug │ │ ├── carousels.pug │ │ ├── comparison.pug │ │ ├── filters.pug │ │ ├── meters.pug │ │ ├── off-canvas.pug │ │ ├── parallax.pug │ │ ├── progress.pug │ │ ├── sliders.pug │ │ ├── timelines.pug │ │ └── viewer-360.pug │ ├── getting-started.pug │ ├── getting-started │ │ ├── browsers.pug │ │ ├── custom.pug │ │ ├── installation.pug │ │ └── whatsnew.pug │ ├── index.pug │ ├── layout.pug │ ├── layout │ │ ├── grid.pug │ │ ├── hero.pug │ │ ├── navbar.pug │ │ └── responsive.pug │ ├── scss │ │ ├── docs.scss │ │ └── spectre-rtl.scss │ ├── utilities.pug │ └── utilities │ │ ├── colors.pug │ │ ├── cursors.pug │ │ ├── display.pug │ │ ├── divider.pug │ │ ├── loading.pug │ │ ├── position.pug │ │ ├── shapes.pug │ │ └── text.pug ├── utilities.html └── utilities │ ├── colors.html │ ├── cursors.html │ ├── display.html │ ├── divider.html │ ├── loading.html │ ├── position.html │ ├── shapes.html │ └── text.html ├── gulpfile.js ├── package.json └── src ├── _accordions.scss ├── _animations.scss ├── _asian.scss ├── _autocomplete.scss ├── _avatars.scss ├── _badges.scss ├── _bars.scss ├── _base.scss ├── _breadcrumbs.scss ├── _buttons.scss ├── _calendars.scss ├── _cards.scss ├── _carousels.scss ├── _chips.scss ├── _codes.scss ├── _comparison-sliders.scss ├── _dropdowns.scss ├── _empty.scss ├── _filters.scss ├── _forms.scss ├── _hero.scss ├── _icons.scss ├── _labels.scss ├── _layout.scss ├── _media.scss ├── _menus.scss ├── _meters.scss ├── _mixins.scss ├── _modals.scss ├── _navbar.scss ├── _navs.scss ├── _normalize.scss ├── _off-canvas.scss ├── _pagination.scss ├── _panels.scss ├── _parallax.scss ├── _popovers.scss ├── _progress.scss ├── _sliders.scss ├── _steps.scss ├── _tables.scss ├── _tabs.scss ├── _tiles.scss ├── _timelines.scss ├── _toasts.scss ├── _tooltips.scss ├── _typography.scss ├── _utilities.scss ├── _variables.scss ├── _viewer-360.scss ├── icons ├── _icons-action.scss ├── _icons-core.scss ├── _icons-navigation.scss └── _icons-object.scss ├── mixins ├── _avatar.scss ├── _button.scss ├── _clearfix.scss ├── _color.scss ├── _label.scss ├── _position.scss ├── _shadow.scss ├── _text.scss └── _toast.scss ├── spectre-exp.scss ├── spectre-icons.scss ├── spectre.scss └── utilities ├── _colors.scss ├── _cursors.scss ├── _display.scss ├── _divider.scss ├── _loading.scss ├── _position.scss ├── _shapes.scss └── _text.scss /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "remove-empty-rulesets": true, 3 | "always-semicolon": true, 4 | "color-case": "lower", 5 | "block-indent": " ", 6 | "color-shorthand": true, 7 | "element-case": "lower", 8 | "eof-newline": false, 9 | "leading-zero": false, 10 | "quotes": "double", 11 | "sort-order-fallback": "abc", 12 | "space-before-colon": "", 13 | "space-after-colon": " ", 14 | "space-before-combinator": " ", 15 | "space-after-combinator": " ", 16 | "space-between-declarations": "\n", 17 | "space-before-opening-brace": " ", 18 | "space-after-opening-brace": "\n", 19 | "space-after-selector-delimiter": "\n", 20 | "space-before-selector-delimiter": "", 21 | "space-before-closing-brace": "\n", 22 | "strip-spaces": true, 23 | "tab-size": true, 24 | "unitless-zero": true, 25 | "sort-order": [[ 26 | "$variable", 27 | "$include", 28 | "$import" 29 | ]] 30 | } 31 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | **/*.html linguist-documentation 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules/ 3 | yarn.lock 4 | package-lock.json 5 | .* 6 | !.csscomb.json 7 | !.gitignore 8 | !.gitattributes 9 | !.hound.yml 10 | !.scss-lint.yml 11 | -------------------------------------------------------------------------------- /.hound.yml: -------------------------------------------------------------------------------- 1 | scss: 2 | config_file: .scss-lint.yml -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 - 2020 Yan Zhu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spectre.css", 3 | "version": "0.5.9", 4 | "description": "Spectre.css: A lightweight, responsive and modern CSS framework", 5 | "homepage": "http://picturepan2.github.io/spectre", 6 | "repository": "picturepan2/spectre", 7 | "license": "MIT", 8 | "author": "Yan Zhu ", 9 | "main": "dist/spectre.css", 10 | "keywords": [ 11 | "css", 12 | "framework", 13 | "flexbox", 14 | "responsive", 15 | "mobile-friendly", 16 | "front-end", 17 | "sass", 18 | "modern" 19 | ], 20 | "ignore": [ 21 | ".idea", 22 | ".gitignore", 23 | "bower.json", 24 | "package.json", 25 | "node_modules" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /docs/examples/starter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Starter Page Example - Spectre.css CSS Framework 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Starter Page Example

20 |
21 |
22 | 27 | 36 | 37 | -------------------------------------------------------------------------------- /docs/img/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/avatar-1.png -------------------------------------------------------------------------------- /docs/img/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/avatar-2.png -------------------------------------------------------------------------------- /docs/img/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/avatar-3.png -------------------------------------------------------------------------------- /docs/img/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/avatar-4.png -------------------------------------------------------------------------------- /docs/img/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/avatar-5.png -------------------------------------------------------------------------------- /docs/img/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/favicons/favicon.ico -------------------------------------------------------------------------------- /docs/img/favicons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/favicons/favicon.png -------------------------------------------------------------------------------- /docs/img/macos-sierra-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/macos-sierra-2.jpg -------------------------------------------------------------------------------- /docs/img/macos-sierra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/macos-sierra.jpg -------------------------------------------------------------------------------- /docs/img/osx-el-capitan-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/osx-el-capitan-2.jpg -------------------------------------------------------------------------------- /docs/img/osx-el-capitan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/osx-el-capitan.jpg -------------------------------------------------------------------------------- /docs/img/osx-yosemite-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/osx-yosemite-2.jpg -------------------------------------------------------------------------------- /docs/img/osx-yosemite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/img/osx-yosemite.jpg -------------------------------------------------------------------------------- /docs/img/spectre-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Spectre.css Logo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/src/_layout/_ad-c.pug: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/picturepan2/spectre/8847251d71b4dac27e8407cbdb71ae89ce156a43/docs/src/_layout/_ad-c.pug -------------------------------------------------------------------------------- /docs/src/_layout/_ad-g.pug: -------------------------------------------------------------------------------- 1 | block ad-adsense 2 | .docs-ad 3 | .hide-md.text-center 4 | script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js') 5 | // GitHub-lg 6 | ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784') 7 | script. 8 | (adsbygoogle = window.adsbygoogle || []).push({}); 9 | .show-md.text-center 10 | // GitHub-sm 11 | ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734') 12 | script. 13 | (adsbygoogle = window.adsbygoogle || []).push({}); -------------------------------------------------------------------------------- /docs/src/_layout/_example-layout.pug: -------------------------------------------------------------------------------- 1 | block variables 2 | - var slug = '' 3 | - var parent = '' 4 | - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework' 5 | - var description = 'Spectre.css CSS Framework 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.' 6 | 7 | doctype html 8 | html(lang='en') 9 | head 10 | title= title 11 | meta(charset='utf-8') 12 | meta(name='robots' content='index, follow') 13 | meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no') 14 | meta(http-equiv='x-ua-compatible' content='ie=edge') 15 | meta(name='description' content= description) 16 | link(rel='shortcut icon' href='../img/favicons/favicon.ico') 17 | link(rel='icon' href='../img/favicons/favicon.png') 18 | link(rel='stylesheet' href='../dist/spectre.min.css') 19 | link(rel='stylesheet' href='../dist/spectre-icons.min.css') 20 | link(rel='stylesheet' href='../dist/spectre-exp.min.css') 21 | link(rel='stylesheet' href='../dist/docs.min.css') 22 | 23 | body 24 | block content 25 | 26 | script. 27 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 28 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 29 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 30 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 31 | 32 | ga('create', 'UA-2702768-8', 'auto'); 33 | ga('send', 'pageview'); 34 | 35 | -------------------------------------------------------------------------------- /docs/src/_layout/_footer.pug: -------------------------------------------------------------------------------- 1 | #copyright.docs-footer.container.grid-lg 2 | p 3 | a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub 4 | | · 5 | a(href='https://twitter.com/spectrecss' target='_blank') Twitter 6 | | · 7 | a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate 8 | | · 9 | a(href='https://www.patreon.com/spectrecss' target='_blank') Patreon Sponsor 10 | | · Version 11 | span.version 12 | p 13 | | Designed and built with 14 | span.text-error ♥ 15 | | by 16 | a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu 17 | | . Licensed under the 18 | a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License 19 | | . -------------------------------------------------------------------------------- /docs/src/_layout/_layout.pug: -------------------------------------------------------------------------------- 1 | block global 2 | - var domain = 'https://picturepan2.github.io/spectre/' 3 | - var url = domain 4 | 5 | block variables 6 | - var slug = '' 7 | - var parent = '' 8 | - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework' 9 | - var description = 'Spectre.css CSS Framework 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.' 10 | 11 | if slug == parent 12 | if slug == 'index' 13 | - var url = domain 14 | else 15 | - var url = domain + slug + '.html' 16 | else 17 | - var url = domain + parent + '/' + slug + '.html' 18 | 19 | doctype html 20 | html(lang='en') 21 | head 22 | title= title 23 | meta(charset='utf-8') 24 | meta(name='robots' content='index, follow') 25 | meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no') 26 | meta(http-equiv='x-ua-compatible' content='ie=edge') 27 | meta(name='description' content= description) 28 | meta(name='author' content='Yan Zhu') 29 | meta(property='og:url' content= url) 30 | meta(property='og:title' content= title) 31 | meta(property='og:description' content= description) 32 | meta(name='twitter:card' content='summary') 33 | meta(name='twitter:site' content='@spectrecss') 34 | meta(name='twitter:creator' content='@picturepan2') 35 | if slug != parent 36 | link(rel='shortcut icon' href='../img/favicons/favicon.ico') 37 | link(rel='icon' href='../img/favicons/favicon.png') 38 | link(rel='stylesheet' href='../dist/spectre.min.css') 39 | link(rel='stylesheet' href='../dist/spectre-icons.min.css') 40 | link(rel='stylesheet' href='../dist/spectre-exp.min.css') 41 | link(rel='stylesheet' href='../dist/docs.min.css') 42 | else 43 | link(rel='shortcut icon' href='img/favicons/favicon.ico') 44 | link(rel='icon' href='img/favicons/favicon.png') 45 | link(rel='stylesheet' href='dist/spectre.min.css') 46 | link(rel='stylesheet' href='dist/spectre-icons.min.css') 47 | link(rel='stylesheet' href='dist/spectre-exp.min.css') 48 | link(rel='stylesheet' href='dist/docs.min.css') 49 | link(rel='canonical' href= url) 50 | 51 | body 52 | block content 53 | 54 | script. 55 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 56 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 57 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 58 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 59 | 60 | ga('create', 'UA-2702768-8', 'auto'); 61 | ga('send', 'pageview'); 62 | -------------------------------------------------------------------------------- /docs/src/_layout/_mixins.pug: -------------------------------------------------------------------------------- 1 | mixin docs-accordion(id, name, ...pages) 2 | .accordion 3 | input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(parent === id ? true : false)) 4 | label.accordion-header.c-hand(for='accordion-' + id)= name 5 | .accordion-body 6 | ul.menu.menu-nav 7 | each page in pages 8 | li.menu-item 9 | if slug != parent 10 | a(href='../' + id + '/' + page.url + '.html')= page.name 11 | else 12 | a(href=id + '/' + page.url + '.html')= page.name 13 | 14 | mixin docs-heading(id, name) 15 | .container(id=id) 16 | h3.s-title 17 | | #{name} 18 | a.anchor(href='#'+id aria-hidden='true') # 19 | if block 20 | block 21 | 22 | mixin docs-subheading(id, name) 23 | h4.s-subtitle(id=id) 24 | | #{name} 25 | a.anchor(href='#'+id aria-hidden='true') # -------------------------------------------------------------------------------- /docs/src/components/badges.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'badges' 5 | - var parent = 'components' 6 | - var title = 'Badges - Components - Spectre.css CSS Framework' 7 | - var description = 'Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('badges', 'Badges') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Badges are often used as unread number indicators. 14 | 15 | .docs-demo.columns 16 | .column.col-3.col-xs-6 17 | span.badge(data-badge="") 18 | | Notifications 19 | .column.col-3.col-xs-6 20 | span.badge(data-badge="8") 21 | | Notifications 22 | .column.col-3.col-xs-6 23 | span.badge(data-badge="88") 24 | | Notifications 25 | .column.col-3.col-xs-6 26 | span.badge(data-badge="888") 27 | | Notifications 28 | 29 | p 30 | | Add the #[code badge] class to non self closing elements. 31 | | And add the #[code data-badge] attribute to define the content of a badge. 32 | | The badge will appear in the top-right direction of the element. 33 | p 34 | | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot. 35 | 36 | .docs-demo.columns 37 | .column.col-sm-12 38 | button.btn.badge(data-badge="") Button 39 | button.btn.badge(data-badge="8") Button 40 | .column.col-sm-12 41 | button.btn.btn-primary.badge(data-badge="") Button 42 | button.btn.btn-primary.badge(data-badge="8") Button 43 | .column.col-sm-12 44 | figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ") 45 | img(src="../img/avatar-1.png" alt="YZ") 46 | figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ") 47 | img(src="../img/avatar-2.png" alt="YZ") 48 | figure.avatar.badge(data-badge="8" data-initial="YZ") 49 | img(src="../img/avatar-3.png" alt="YZ") 50 | 51 | p 52 | | Badges support #[code button] and #[code avatars] elements as well. 53 | 54 | pre.code(data-lang='HTML') 55 | code 56 | :highlight(lang="html") 57 | 58 | Notifications 59 | 60 | 61 | 62 | Notifications 63 | 64 | 65 | 68 | 69 |
70 | YZ 71 |
72 | 73 | include ../_layout/_ad-c.pug 74 | 75 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/bars.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'bars' 5 | - var parent = 'components' 6 | - var title = 'Bars - Components - Spectre.css CSS Framework' 7 | - var description = 'Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('bars', 'Bars') 11 | include ../_layout/_ad-g.pug 12 | 13 | p 14 | | Bars represent the progress of a task or the value within the known range. 15 | | Bars are custom components for displaying HTML5 #{''}, #{''} and input range elements. 16 | 17 | .docs-demo.columns 18 | .column.col-8.col-xs-12 19 | .bar.bar-sm 20 | .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100") 21 | .column.col-8.col-xs-12 22 | .bar 23 | .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;") 24 | .column.col-8.col-xs-12 25 | .bar 26 | .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25% 27 | .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15% 28 | .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10% 29 | .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15% 30 | 31 | p 32 | | Add a container element with the #[code bar] class. 33 | | And add child elements with the #[code bar-item] class. 34 | | The width percentage value is needed for every #[code bar-item]. 35 | 36 | p 37 | | There is the #[code bar-sm] class for thinner Bars. 38 | | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item]. 39 | 40 | pre.code(data-lang='HTML') 41 | code 42 | :highlight(lang="html") 43 | 44 |
45 |
46 |
47 | 48 | 49 |
50 |
25%
51 |
15%
52 |
53 | 54 | +docs-subheading('bars-slider', 'Slider bars') 55 | 56 | .docs-demo.columns 57 | .column.col-8.col-xs-12 58 | .bar.bar-slider 59 | .bar-item(role="progressbar" style="width:50%;") 60 | button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider") 61 | .column.col-8.col-xs-12 62 | .bar.bar-slider 63 | .bar-item(role="progressbar" style="width:15%;") 64 | button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider") 65 | .bar-item(role="progressbar" style="width:65%;") 66 | button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider") 67 | 68 | p 69 | | You can add the #[code bar-slider] class to the Bars container. 70 | | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item. 71 | | You need to set the #[code bar-item] width manually to have the slider point. 72 | 73 | p 74 | | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider. 75 | 76 | pre.code(data-lang='HTML') 77 | code 78 | :highlight(lang="html") 79 | 80 |
81 |
82 | 83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 |
91 |
92 | 93 |
94 |
95 | 96 | include ../_layout/_ad-c.pug 97 | 98 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/breadcrumbs.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'breadcrumbs' 5 | - var parent = 'components' 6 | - var title = 'Breadcrumbs - Components - Spectre.css CSS Framework' 7 | - var description = 'Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('breadcrumbs', 'Breadcrumbs') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Breadcrumbs are used as navigational hierarchies to indicate current location. 14 | 15 | .docs-demo.columns 16 | .column.col-12 17 | ul.breadcrumb 18 | li.breadcrumb-item 19 | a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home 20 | li.breadcrumb-item 21 | a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings 22 | .column.col-12 23 | ul.breadcrumb 24 | li.breadcrumb-item 25 | a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home 26 | li.breadcrumb-item 27 | a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings 28 | li.breadcrumb-item 29 | a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar 30 | .column.col-12 31 | ul.breadcrumb 32 | li.breadcrumb-item 33 | a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home 34 | li.breadcrumb-item 35 | a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings 36 | li.breadcrumb-item 37 | | Search result: 38 | a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre 39 | 40 | p 41 | | Add a container element with the #[code breadcrumb] class. 42 | | And add child elements with the #[code breadcrumb-item] class. 43 | 44 | pre.code(data-lang='HTML') 45 | code 46 | :highlight(lang="html") 47 | 58 | 59 | include ../_layout/_ad-c.pug 60 | 61 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/chips.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'chips' 5 | - var parent = 'components' 6 | - var title = 'Chips - Components - Spectre.css CSS Framework' 7 | - var description = 'Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('chips', 'Chips') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Chips are complex entities in small blocks. 14 | 15 | .docs-demo.columns 16 | .column.col-12 17 | span.chip 18 | | Crime 19 | span.chip 20 | | Drama 21 | span.chip 22 | | Biography 23 | a.btn.btn-clear(href="#" aria-label="Close" role="button") 24 | span.chip 25 | | Mystery 26 | a.btn.btn-clear(href="#" aria-label="Close" role="button") 27 | .column.col-12 28 | .chip 29 | figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") 30 | | Tony Stark 31 | .chip 32 | img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson") 33 | | Thor Odinson 34 | .chip 35 | img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers") 36 | | Steve Rogers 37 | 38 | p 39 | | Add a container element with the #[code chip] class. 40 | | And add child text element, buttons or avatars with the #[code avatar] class. 41 | 42 | pre.code(data-lang='HTML') 43 | code 44 | :highlight(lang="html") 45 | Crime 46 | 47 | 48 | Biography 49 | 50 | 51 | 52 |
53 | 54 | Yan Zhu 55 | 56 |
57 | 58 | include ../_layout/_ad-c.pug 59 | 60 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/empty.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'empty' 5 | - var parent = 'components' 6 | - var title = 'Empty states - Components - Spectre.css CSS Framework' 7 | - var description = 'Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('empty', 'Empty states') 11 | include ../_layout/_ad-g.pug 12 | 13 | p 14 | | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. 15 | 16 | .docs-demo.columns 17 | .column.col-12 18 | .empty 19 | .empty-icon 20 | i.icon.icon-3x.icon-mail 21 | p.empty-title.h5 You have no new messages 22 | p.empty-subtitle Click the button to start a conversation 23 | .empty-action 24 | button.btn.btn-primary Send a message 25 | .column.col-12 26 | .empty 27 | .empty-icon 28 | i.icon.icon-3x.icon-mail 29 | p.empty-title.h5 You've successfully signed up 30 | p.empty-subtitle Click the button to invite your friends 31 | .empty-action 32 | button.btn.btn-primary Invite your friends 33 | .empty-action 34 | button.btn.btn-link Skip 35 | .column.col-12 36 | .empty 37 | .empty-icon 38 | i.icon.icon-3x.icon-people 39 | p.empty-title.h5 You are not following anyone 40 | p.empty-subtitle Start to meet new friends 41 | .empty-action.input-group.input-inline 42 | input.form-input(type="text" placeholder="") 43 | button.btn.btn-primary.input-group-btn Search 44 | 45 | p 46 | | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. 47 | | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements. 48 | | HTML structure is exampled below. 49 | 50 | pre.code(data-lang='HTML') 51 | code 52 | :highlight(lang="html") 53 |
54 |
55 | 56 |
57 |

You have no new messages

58 |

Click the button to start a conversation.

59 |
60 | 61 |
62 |
63 | 64 | include ../_layout/_ad-c.pug 65 | 66 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/nav.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'nav' 5 | - var parent = 'components' 6 | - var title = 'Nav - Components - Spectre.css CSS Framework' 7 | - var description = 'Spectre.css CSS Framework 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.' 8 | 9 | block docs-content 10 | +docs-heading('nav', 'Nav') 11 | include ../_layout/_ad-g.pug 12 | 13 | .docs-demo.columns 14 | .column.col-6.col-xs-12 15 | ul.nav 16 | li.nav-item 17 | a(href="#nav") Elements 18 | li.nav-item.active 19 | a(href="#nav") Layout 20 | ul.nav 21 | li.nav-item 22 | a(href="#nav") Flexbox grid 23 | li.nav-item 24 | a(href="#nav") Responsive 25 | li.nav-item 26 | a(href="#nav") Navbar 27 | li.nav-item 28 | a(href="#nav") Empty states 29 | li.nav-item 30 | a(href="#nav") Components 31 | li.nav-item 32 | a(href="#nav") Utilities 33 | 34 | p 35 | | Add a container element with the #[code nav] class. 36 | | And add child elements with the #[code nav-item] class. 37 | | The #[code nav-item] with the #[code active] class will be highlighted. 38 | 39 | pre.code(data-lang='HTML') 40 | code 41 | :highlight(lang="html") 42 | 70 | 71 | include ../_layout/_ad-c.pug 72 | 73 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/pagination.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'pagination' 5 | - var parent = 'components' 6 | - var title = 'Pagination - Components - Spectre.css CSS Framework' 7 | - var description = 'Spectre.css CSS Framework 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.' 8 | 9 | block docs-content 10 | +docs-heading('pagination', 'Pagination') 11 | include ../_layout/_ad-g.pug 12 | 13 | .docs-demo.columns 14 | .column.col-xs-12 15 | ul.pagination 16 | li.page-item 17 | a(href="#pagination") Prev 18 | li.page-item 19 | a(href="#pagination") 1 20 | li.page-item 21 | span ... 22 | li.page-item 23 | a(href="#pagination") 4 24 | li.page-item.active 25 | a(href="#pagination") 5 26 | li.page-item 27 | a(href="#pagination") 6 28 | li.page-item 29 | span ... 30 | li.page-item 31 | a(href="#pagination") 9 32 | li.page-item 33 | a(href="#pagination") Next 34 | .column.col-xs-12 35 | ul.pagination 36 | li.page-item.disabled 37 | a(href="#pagination" tabindex="-1") Prev 38 | li.page-item.active 39 | a(href="#pagination") 1 40 | li.page-item 41 | a(href="#pagination") 2 42 | li.page-item 43 | a(href="#pagination") 3 44 | li.page-item 45 | span ... 46 | li.page-item 47 | a(href="#pagination") 9 48 | li.page-item 49 | a(href="#pagination") Next 50 | 51 | p 52 | | Add a container element with the #[code pagination] class. 53 | | And add child elements with the #[code page-item] class. 54 | | The #[code page-item] with the #[code active] class will be highlighted. 55 | | You can add the #[code disabled] class to the #[code page-item] to have unclickable page links. 56 | 57 | pre.code(data-lang='HTML') 58 | code 59 | :highlight(lang="html") 60 |
    61 |
  • 62 | Previous 63 |
    • 64 |
  • 65 | 1 66 |
    • 67 |
  • 68 | 2 69 |
    • 70 |
  • 71 | 3 72 |
    • 73 |
  • 74 | ... 75 |
    • 76 |
  • 77 | 12 78 |
    • 79 |
  • 80 | Next 81 |
    • 82 |
83 | 84 | .docs-demo.columns 85 | .column.col-12 86 | ul.pagination 87 | li.page-item.page-prev 88 | a(href="#pagination") 89 | .page-item-subtitle Previous 90 | .page-item-title.h5 Getting started 91 | li.page-item.page-next 92 | a(href="#pagination") 93 | .page-item-subtitle Next 94 | .page-item-title.h5 Layout 95 | 96 | p You could use previous and next pagination to navigate. 97 | 98 | pre.code(data-lang='HTML') 99 | code 100 | :highlight(lang="html") 101 | 115 | 116 | include ../_layout/_ad-c.pug 117 | 118 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/popovers.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'popovers' 5 | - var parent = 'components' 6 | - var title = 'Popovers - Components - Spectre.css CSS Framework' 7 | - var description = 'Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('popovers', 'Popovers') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Popovers are small overlay content containers. Popovers component is built entirely in CSS. 14 | 15 | .docs-demo.columns 16 | .column.col-3.col-sm-6 17 | .popover 18 | a.btn.btn-primary(href="#popovers") 19 | | top popover 20 | .popover-container 21 | .card 22 | .card-header 23 | .card-title.h5 Apple 24 | .card-subtitle.text-gray Software and hardware 25 | .card-body 26 | | To make a contribution to the world by making tools for the mind that advance humankind. 27 | .card-footer 28 | button.btn.btn-primary Buy 29 | .column.col-3.col-sm-6 30 | .popover.popover-right 31 | a.btn.btn-primary(href="#popovers") 32 | | right popover 33 | .popover-container 34 | .card 35 | .card-header 36 | .card-title.h5 Apple 37 | .card-subtitle.text-gray Software and hardware 38 | .card-body 39 | | To make a contribution to the world by making tools for the mind that advance humankind. 40 | .card-footer 41 | button.btn.btn-primary Buy 42 | .column.col-3.col-sm-6 43 | .popover.popover-bottom 44 | a.btn.btn-primary(href="#popovers") 45 | | bottom popover 46 | .popover-container 47 | .card 48 | .card-header 49 | .card-title.h5 Apple 50 | .card-subtitle.text-gray Software and hardware 51 | .card-body 52 | | To make a contribution to the world by making tools for the mind that advance humankind. 53 | .card-footer 54 | button.btn.btn-primary Buy 55 | .column.col-3.col-sm-6 56 | .popover.popover-left 57 | a.btn.btn-primary(href="#popovers") 58 | | left popover 59 | .popover-container 60 | .card 61 | .card-header 62 | .card-title.h5 Apple 63 | .card-subtitle.text-gray Software and hardware 64 | .card-body 65 | | To make a contribution to the world by making tools for the mind that advance humankind. 66 | .card-footer 67 | button.btn.btn-primary Buy 68 | 69 | p 70 | | Wrap an element by a container with the #[code popover] class. 71 | | And add a container with the #[code popover-container] next to the element. 72 | | You can use #[a(href="#cards") Cards] component inside the #[code popover-container]. 73 | p 74 | | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position. 75 | | By default, the popovers appear above the element. 76 | 77 | pre.code(data-lang='HTML') 78 | code 79 | :highlight(lang="html") 80 |
81 | 82 |
83 |
84 |
85 | ... 86 |
87 |
88 | ... 89 |
90 |
91 | ... 92 |
93 |
94 |
95 |
96 | 97 | include ../_layout/_ad-c.pug 98 | 99 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/steps.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'steps' 5 | - var parent = 'components' 6 | - var title = 'Steps - Components - Spectre.css CSS Framework' 7 | - var description = 'Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('steps', 'Steps') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Steps are progress indicators of a sequence of task steps. 14 | 15 | .docs-demo.columns 16 | .column.col-12 17 | ul.step 18 | li.step-item 19 | a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") 20 | li.step-item.active 21 | a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") 22 | li.step-item 23 | a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") 24 | li.step-item 25 | a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") 26 | .column.col-12 27 | ul.step 28 | li.step-item 29 | a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1 30 | li.step-item 31 | a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2 32 | li.step-item.active 33 | a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3 34 | li.step-item 35 | a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4 36 | 37 | p 38 | | Add a container element with the #[code step] class. 39 | | And add child elements with the #[code step-item] class. 40 | | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress. 41 | 42 | pre.code(data-lang='HTML') 43 | code 44 | :highlight(lang="html") 45 | 59 | 60 | include ../_layout/_ad-c.pug 61 | 62 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/tiles.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'tiles' 5 | - var parent = 'components' 6 | - var title = 'Tiles - Components - Spectre.css CSS Framework' 7 | - var description = 'Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('tiles', 'Tiles') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Tiles are repeatable or embeddable information blocks. 14 | 15 | .docs-demo.columns 16 | .column.col-9.col-sm-12 17 | .tile 18 | .tile-icon 19 | figure.avatar.avatar-lg 20 | img(src="../img/avatar-3.png" alt="Avatar") 21 | .tile-content 22 | p.tile-title The Avengers 23 | p.tile-subtitle 24 | | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... 25 | .tile-action 26 | button.btn.btn-primary Join 27 | button.btn Contact 28 | .column.col-9.col-sm-12 29 | .tile 30 | .tile-icon 31 | figure.avatar.avatar-lg 32 | img(src="../img/avatar-2.png" alt="Avatar") 33 | .tile-content 34 | p.tile-title The S.H.I.E.L.D. 35 | p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division... 36 | p 37 | button.btn.btn-primary.btn-sm Join 38 | button.btn.btn-sm Contact 39 | 40 | p 41 | | Add a container with the #[code tile] class. 42 | | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes. 43 | | The #[code tile-icon] and #[code tile-action] are optional. 44 | p 45 | | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles. 46 | 47 | pre.code(data-lang='HTML') 48 | code 49 | :highlight(lang="html") 50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 |

The Avengers

58 |

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

59 |
60 |
61 | 62 |
63 |
64 | 65 | +docs-subheading('tiles-compact', 'Compact tiles') 66 | 67 | p 68 | | There is compact version of Tiles component, which is often used as contact and file info blocks. 69 | p 70 | | Add the #[code tile-centered] class to the container #[code tile]. 71 | | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered. 72 | 73 | .docs-demo.columns 74 | .column.col-6.col-md-9.col-xs-12 75 | .tile.tile-centered 76 | .tile-icon 77 | .example-tile-icon 78 | i.icon.icon-mail.centered 79 | .tile-content 80 | .tile-title spectre-docs.pdf 81 | small.tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017 82 | .tile-action 83 | button.btn.btn-link.btn-action 84 | i.icon.icon-more-vert 85 | 86 | pre.code(data-lang='HTML') 87 | code 88 | :highlight(lang="html") 89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 |
spectre-docs.pdf
97 | 14MB · Public · 1 Jan, 2017 98 |
99 |
100 | 103 |
104 |
105 | 106 | include ../_layout/_ad-c.pug 107 | 108 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/toasts.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'toasts' 5 | - var parent = 'components' 6 | - var title = 'Toasts - Components - Spectre.css CSS Framework' 7 | - var description = 'Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('toasts', 'Toasts') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Toasts are used to show alert or information to users. 14 | 15 | .docs-demo.columns 16 | .column.col-9.col-sm-12 17 | .toast 18 | button.btn.btn-clear.float-right 19 | h6 Toast Title 20 | p 21 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 22 | .column.col-9.col-sm-12 23 | .toast.toast-primary 24 | button.btn.btn-clear.float-right 25 | p 26 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 27 | 28 | p 29 | | Add a container element with the #[code toast] class. 30 | | You can add any text within the container, and even icons. 31 | | You may also add a close button with the #[code btn-clear] class if you need. 32 | 33 | pre.code(data-lang='HTML') 34 | code 35 | :highlight(lang="html") 36 |
37 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 38 |
39 | 40 | .docs-demo.columns 41 | .column.col-sm-12 42 | .toast.toast-success 43 | button.btn.btn-clear.float-right 44 | p 45 | | Toast success 46 | .column.col-sm-12 47 | .toast.toast-warning 48 | button.btn.btn-clear.float-right 49 | p 50 | | Toast warning 51 | .column.col-sm-12 52 | .toast.toast-error 53 | button.btn.btn-clear.float-right 54 | p 55 | | Toast error 56 | 57 | p 58 | | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors. 59 | 60 | pre.code(data-lang='HTML') 61 | code 62 | :highlight(lang="html") 63 |
64 | 65 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 66 |
67 | 68 | include ../_layout/_ad-c.pug 69 | 70 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/components/tooltips.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'tooltips' 5 | - var parent = 'components' 6 | - var title = 'Tooltips - Components - Spectre.css CSS Framework' 7 | - var description = 'Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('tooltips', 'Tooltips') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. 14 | 15 | .docs-demo.columns.text-center 16 | .column.col-xs-12 17 | button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip 18 | .column.col-xs-12 19 | button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip 20 | .column.col-xs-12 21 | button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip 22 | .column.col-xs-12 23 | button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text\nMultiline") left tooltip 24 | 25 | p 26 | | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements. 27 | p 28 | | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip. 29 | | By default, the tooltip appears above the element. 30 | 31 | pre.code(data-lang='HTML') 32 | code 33 | :highlight(lang="html") 34 | 35 | 36 | 37 | +docs-subheading('tooltips-multiline', 'Multiline tooltips') 38 | 39 | .docs-demo.columns 40 | .column.col-12 41 | button.btn.btn-primary.tooltip(data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text \n Third Line Tooltip Text") multiline tooltip 42 | 43 | p 44 | | Add the #[code \n] string between any text for multiline tooltips. 45 | 46 | pre.code(data-lang='HTML') 47 | code 48 | :highlight(lang="html") 49 | 50 | 51 | include ../_layout/_ad-c.pug 52 | 53 | include ../_layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/elements.pug: -------------------------------------------------------------------------------- 1 | extends _layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'elements' 5 | - var parent = 'elements' 6 | - var title = 'Elements - Spectre.css CSS Framework' 7 | - var description = 'Spectre.css CSS Framework 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.' 8 | 9 | block docs-content 10 | +docs-heading('elements', 'Elements') 11 | include _layout/_ad-g.pug 12 | 13 | p 14 | strong Spectre.css 15 | | is a lightweight, responsive and modern CSS framework for faster and extensible development. 16 | p 17 | | 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. 18 | 19 | .docs-demo.columns 20 | .column.col-6.col-xs-12 21 | .card 22 | .card-header 23 | .card-title.h5 Typography 24 | .card-body 25 | | Headings, paragraphs, semantic text, blockquote and lists elements 26 | .card-footer 27 | a.btn.btn-primary(href="elements/typography.html") View 28 | 29 | .column.col-6.col-xs-12 30 | .card 31 | .card-header 32 | .card-title.h5 Tables 33 | .card-body 34 | | Tables and data sets 35 | .card-footer 36 | a.btn.btn-primary(href="elements/tables.html") View 37 | 38 | .column.col-6.col-xs-12 39 | .card 40 | .card-header 41 | .card-title.h5 Buttons 42 | .card-body 43 | | Simple button styles for actions in different types and sizes 44 | .card-footer 45 | a.btn.btn-primary(href="elements/buttons.html") View 46 | 47 | .column.col-6.col-xs-12 48 | .card 49 | .card-header 50 | .card-title.h5 Forms 51 | .card-body 52 | | Input, textarea, select, checkbox, radio and switch 53 | .card-footer 54 | a.btn.btn-primary(href="elements/forms.html") View 55 | 56 | .column.col-6.col-xs-12 57 | .card 58 | .card-header 59 | .card-title.h5 Icons 60 | .card-body 61 | | Single-element, responsive and pure CSS icons 62 | .card-footer 63 | a.btn.btn-primary(href="elements/icons.html") View 64 | 65 | .column.col-6.col-xs-12 66 | .card 67 | .card-header 68 | .card-title.h5 Labels 69 | .card-body 70 | | Formatted text tags for highlighted, informative information 71 | .card-footer 72 | a.btn.btn-primary(href="elements/labels.html") View 73 | 74 | .column.col-6.col-xs-12 75 | .card 76 | .card-header 77 | .card-title.h5 Code 78 | .card-body 79 | | Inline and multiline code snippets 80 | .card-footer 81 | a.btn.btn-primary(href="elements/code.html") View 82 | 83 | .column.col-6.col-xs-12 84 | .card 85 | .card-header 86 | .card-title.h5 Media 87 | .card-body 88 | | Responsive images, figures and video 89 | .card-footer 90 | a.btn.btn-primary(href="elements/media.html") View 91 | 92 | include _layout/_ad-c.pug 93 | 94 | include _layout/_footer.pug -------------------------------------------------------------------------------- /docs/src/elements/code.pug: -------------------------------------------------------------------------------- 1 | extends ../_layout/_docs-layout.pug 2 | 3 | block variables 4 | - var slug = 'code' 5 | - var parent = 'elements' 6 | - var title = 'Code - Elements - Spectre.css CSS Framework' 7 | - var description = 'Code is used for styling inline and multiline code snippets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.' 8 | 9 | block docs-content 10 | +docs-heading('code', 'Code') 11 | include ../_layout/_ad-g.pug 12 | 13 | p Code is used for styling inline and multiline code snippets. 14 | 15 | +docs-subheading('code-inline', 'Inline code') 16 | 17 | pre.code(data-lang='HTML') 18 | code 19 | :highlight(lang="html") 20 | 21 | code 22 | 23 | p 24 | | For inline code, you can use the #{''} element. 25 | 26 | +docs-subheading('code-snippet', 'Code snippet') 27 | 28 | p 29 | | For multiline code snippet blocks, you can use #{'
'} with the #[code code] class as a container, and add #{''} inside it.
30 |       | The #[code data-lang] attribute is rendered as the language name in the top right.
31 | 
32 |     pre.code(data-lang='HTML')
33 |       code
34 |         :highlight(lang="html")
35 |           
36 |           
39 | 
40 |     pre.code(data-lang='HTML')
41 |       code
42 |         :highlight(lang="html")
43 |           
<!-- code snippets -->
44 |           <button class="btn">
45 |             Submit
46 |           </button>
47 |           

48 | 
49 |     include ../_layout/_ad-c.pug
50 | 
51 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/elements/labels.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'labels'
 5 |   - var parent = 'elements'
 6 |   - var title = 'Labels - Elements - Spectre.css CSS Framework'
 7 |   - var description = 'Labels are formatted text tags for highlighted, informative information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('labels', 'Labels')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p Labels are formatted text tags for highlighted, informative information.
14 | 
15 |     .docs-demo.columns
16 |       .column
17 |         span.label.mr-1 default label
18 |         span.label.label-primary.mr-1 primary label
19 |         span.label.label-secondary.mr-1 secondary label
20 |         span.label.label-success.mr-1 success label
21 |         span.label.label-warning.mr-1 warning label
22 |         span.label.label-error error label
23 |       
24 |     p
25 |       | Add the #[code label] class to #{''} or #{''} elements.
26 |       | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
27 | 
28 |     pre.code(data-lang='HTML')
29 |       code
30 |         :highlight(lang="html")
31 |           
32 |           default label
33 |           primary label
34 | 
35 |     +docs-subheading('labels-rounded', 'Rounded labels')
36 |     
37 |     .docs-demo.columns
38 |       .column
39 |         span.label.label-rounded.mr-1 default label
40 |         span.label.label-rounded.label-primary primary label
41 | 
42 |     p
43 |       | Add the #[code label-rounded] class to have rounded labels.
44 | 
45 |     pre.code(data-lang='HTML')
46 |       code
47 |         :highlight(lang="html")
48 |           
49 |           primary label
50 | 
51 |     include ../_layout/_ad-c.pug
52 | 
53 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/examples/starter.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_example-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'starter'
 5 |   - var parent = 'examples'
 6 |   - var title = 'Starter Page Example -  Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block content
10 |   .section.bg-gray
11 |     H1 Starter Page Example
12 |   .section.section-ads.bg-gray
13 |     include ../_layout/_ad-c.pug
14 | 
15 |   footer.section.section-footer
16 |     #copyright.docs-footer.container.grid-lg
17 |       p
18 |         a(href='getting-started.html' target='_blank') Documents
19 |         |  · 
20 |         a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
21 |         |  · 
22 |         a(href='https://twitter.com/spectrecss' target='_blank') Twitter
23 |         |  · 
24 |         a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
25 |         |  · Version 
26 |         span.version


--------------------------------------------------------------------------------
/docs/src/experimentals/comparison.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'comparison'
 5 |   - var parent = 'experimentals'
 6 |   - var title = 'Comparison sliders - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('comparison', 'Comparison sliders')
11 |     p
12 |       small.label.label-secondary CSS ONLY
13 | 
14 |     include ../_layout/_ad-g.pug
15 | 
16 |     p
17 |       | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
18 | 
19 |     .docs-demo.columns
20 |       .column.col-12
21 |         .comparison-slider
22 |           figure.comparison-before
23 |             img.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
24 |             .comparison-label Before
25 |           figure.comparison-after
26 |             img.filter-grayscale.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
27 |             .comparison-label After
28 |             textarea.comparison-resizer(readonly="")
29 | 
30 |     pre.code(data-lang='HTML')
31 |       code
32 |         :highlight(lang="html")
33 |           

34 |             

35 |               
36 |               
Before

37 |             

38 | 
39 |             

40 |               
41 |               
After

42 |               
43 |             

44 |           

45 | 
46 |     include ../_layout/_ad-c.pug
47 | 
48 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/experimentals/meters.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'meters'
 5 |   - var parent = 'experimentals'
 6 |   - var title = 'Meters - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = 'Meters represent the value within the known range. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('meters', 'Meters')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p Meters represent the value within the known range.
14 | 
15 |     .docs-demo.columns
16 |       .column.col-3.col-xs-12
17 |         meter.meter(value="20" min="0" max="100")
18 |       .column.col-3.col-xs-12
19 |         meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100")
20 |       .column.col-3.col-xs-12
21 |         meter.meter(value="85" min="0" low="30" high="80" max="100")
22 |       .column.col-3.col-xs-12
23 |         meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100")
24 | 
25 |     pre.code(data-lang='HTML')
26 |       code
27 |         :highlight(lang="html")
28 |           
29 |           
30 |           
31 |           
32 |           
33 |           
34 |           
35 | 
36 |     include ../_layout/_ad-c.pug
37 | 
38 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/experimentals/off-canvas.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'off-canvas'
 5 |   - var parent = 'experimentals'
 6 |   - var title = 'Off-canvas - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = 'The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('off-canvas', 'Off-canvas')
11 |     p
12 |       small.label.label-secondary CSS ONLY
13 | 
14 |     include ../_layout/_ad-g.pug
15 | 
16 |     p
17 |       | The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
18 |     p
19 |       | By default, the off-canvas menu is collapsed whenever the window width is.
20 |       | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px].
21 | 
22 |     .docs-demo.columns
23 |       .column
24 |         .off-canvas.off-canvas-sidebar-show
25 |           a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
26 |             i.icon.icon-menu
27 |           #sidebar-demo.off-canvas-sidebar.flex-centered
28 |             span Sidebar
29 |           a.off-canvas-overlay(href="#close")
30 |           .off-canvas-content
31 |             .content
32 |               h4 Lorem ipsum
33 |               p
34 |                 | 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.
35 |               p
36 |                 | 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.
37 | 
38 |     p
39 |       | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar].
40 |       | And remove the #[code active] to close it.
41 | 
42 |     pre.code(data-lang='HTML')
43 |       code
44 |         :highlight(lang="html")
45 |           

46 |             
47 |             
48 |               
49 |             
50 | 
51 |             
54 | 
55 |             
56 | 
57 |             

58 |               
59 |             

60 |           

61 | 
62 |     include ../_layout/_ad-c.pug
63 | 
64 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/experimentals/parallax.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'parallax'
 5 |   - var parent = 'experimentals'
 6 |   - var title = 'Parallax - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = 'The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('parallax', 'Parallax')
11 |     p
12 |       small.label.label-secondary CSS ONLY
13 | 
14 |     include ../_layout/_ad-g.pug
15 | 
16 |     p
17 |       | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
18 | 
19 |     .docs-demo.columns
20 |       .column.col-sm-12.col-8.col-mx-auto
21 |         .parallax
22 |           .parallax-top-left(tabindex="1")
23 |           .parallax-top-right(tabindex="2")
24 |           .parallax-bottom-left(tabindex="3")
25 |           .parallax-bottom-right(tabindex="4")
26 |           .parallax-content
27 |             .parallax-front
28 |               h2 tvOS parallax demo
29 |             .parallax-back
30 |               img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
31 | 
32 |     pre.code(data-lang='HTML')
33 |       code
34 |         :highlight(lang="html")
35 |           

36 |             

37 |             

38 |             

39 |             

40 |             

41 |               

42 |                 
tvOS parallax demo

43 |               

44 |               

45 |                 
46 |               

47 |             

48 |           

49 | 
50 |     include ../_layout/_ad-c.pug
51 | 
52 |   include ../_layout/_footer.pug
53 |           


--------------------------------------------------------------------------------
/docs/src/experimentals/progress.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'progress'
 5 |   - var parent = 'experimentals'
 6 |   - var title = 'Progress - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = 'The Progress indicates the progress completion of a task. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('progress', 'Progress')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p The Progress indicates the progress completion of a task.
14 | 
15 |     .docs-demo.columns
16 |       .column.col-3.col-xs-12
17 |         progress.progress(value="75" max="100")
18 |       .column.col-3.col-xs-12
19 |         progress.progress(value="50" max="100")
20 |       .column.col-3.col-xs-12
21 |         progress.progress(value="25" max="100")
22 |       .column.col-3.col-xs-12
23 |         progress.progress(max="100")
24 | 
25 |     pre.code(data-lang='HTML')
26 |       code
27 |         :highlight(lang="html")
28 |           
29 |           
30 | 
31 |     include ../_layout/_ad-c.pug
32 | 
33 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/experimentals/sliders.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'sliders'
 5 |   - var parent = 'experimentals'
 6 |   - var title = 'Sliders - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = 'The Sliders are for selecting values from ranges. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('sliders', 'Sliders')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p The Sliders are for selecting values from ranges.
14 |     p
15 |       | You can add the class #[code tooltip] to have tooltip labels.
16 |       | If no #[code data-tooltip] is set, the #[code value] will be used instead.
17 | 
18 |     .docs-demo.columns
19 |       .column.col-6.col-xs-12
20 |         input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);")
21 |       .column.col-6.col-xs-12
22 |         input.slider(type="range" min="0" max="100" value="50" disabled="")
23 | 
24 |     pre.code(data-lang='HTML')
25 |       code
26 |         :highlight(lang="html")
27 |           
28 |           
29 |           
30 |           
31 | 
32 |     include ../_layout/_ad-c.pug
33 | 
34 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/experimentals/timelines.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'timelines'
 5 |   - var parent = 'experimentals'
 6 |   - var title = 'Timelines - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = 'The Timelines are ordered sequences of activities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('timelines', 'Timelines')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p The Timelines are ordered sequences of activities.
14 | 
15 |     .docs-demo.columns
16 |       .column.col-9.col-sm-12
17 |         .timeline
18 |           #timeline-example-1.timeline-item
19 |             .timeline-left
20 |               a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016")
21 |             .timeline-content
22 |               .tile
23 |                 .tile-content
24 |                   p.tile-subtitle March 2016
25 |                   p.tile-title Initial commit
26 |           #timeline-example-2.timeline-item
27 |             .timeline-left
28 |               a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017")
29 |                 i.icon.icon-check
30 |             .timeline-content
31 |               .tile
32 |                 .tile-content
33 |                   p.tile-subtitle February 2017
34 |                   p.tile-title New Documents experience
35 |                   p.tile-title
36 |                     a(href="components.html#bars") Bars
37 |                     | : represent the progress of a task
38 |                   p.tile-title
39 |                     a(href="components.html#steps") Steps
40 |                     | : progress indicators of a sequence of task steps
41 |                   p.tile-title
42 |                     a(href="components.html#tiles") Tiles
43 |                     | : repeatable or embeddable information blocks
44 |                 .tile-action
45 |                   button.btn View
46 |           #timeline-example-3.timeline-item
47 |             .timeline-left
48 |               a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017")
49 |                 i.icon.icon-check
50 |             .timeline-content
51 |               .tile
52 |                 .tile-content
53 |                   p.tile-subtitle March 2017
54 |                   p.tile-title
55 |                     a(href="elements.html#icons") Icons
56 |                     | : single-element, responsive and pure CSS icons
57 |                   p.tile-title
58 |                     a(href="components.html#popovers") Popovers
59 |                     | : small overlay content containers
60 |                   p.tile-title
61 |                     a(href="experimentals.html#calendars") Calendars
62 |                     | : date or date range picker and events display
63 |                   p.tile-title
64 |                     a(href="experimentals.html#carousels") Carousels
65 |                     | : slideshows for cycling images
66 |                 .tile-action
67 |                   button.btn View
68 | 
69 |     pre.code(data-lang='HTML')
70 |       code
71 |         :highlight(lang="html")
72 |           

73 |             

74 |               

75 |                 
76 |               

77 |               

78 |                 
79 |               

80 |             

81 | 
82 |             

83 |               

84 |                 
85 |                   
86 |                 
87 |               

88 |               

89 |                 
90 |               

91 |             

92 |             ...
93 |           

94 | 
95 |     include ../_layout/_ad-c.pug
96 | 
97 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/experimentals/viewer-360.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'viewer-360'
 5 |   - var parent = 'experimentals'
 6 |   - var title = '360-Degree Viewer - Experimentals - Spectre.css CSS Framework'
 7 |   - var description = '360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('viewer-360', '360-Degree Viewer')
11 |     p
12 |       small.label.label-secondary CSS ONLY
13 | 
14 |     include ../_layout/_ad-g.pug
15 | 
16 |     p
17 |       | 360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. 
18 | 
19 |     .docs-demo.columns
20 |       .column.col-12
21 |         .viewer-360
22 |           input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
23 |           figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;")
24 | 
25 |     p.text-center
26 |       | Photo credits: 
27 |       a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank") Microsoft Surface Pro 6
28 | 
29 |     .docs-demo.columns
30 |       .column.col-12
31 |         .viewer-360
32 |           input.viewer-slider.slider(type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);")
33 |           figure.viewer-image(style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;")
34 | 
35 |     p.text-center
36 |       | Photo credits: 
37 |       a(href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank") Microsoft Xbox One X
38 | 
39 |     p
40 |       | You will need to use your own product image sprite (all angle of photos in one image) and set the attribute #[code max] to the image numbers to use this component.
41 |     
42 |     pre.code(data-lang='HTML')
43 |       code
44 |         :highlight(lang="html")
45 |           

46 |             
47 |             

48 |           

49 | 
50 |     p
51 |       | The default image numbers in CSS are #[code 36]. You can copy the mixin and add more numbers in #[code _viewer-360.scss] and re-compiling the CSS.
52 | 
53 |     pre.code(data-lang='SCSS')
54 |       code
55 |         :highlight(lang="scss")
56 |           @include viewer-slider-size(36);
57 |           @include viewer-slider-size(30);
58 | 
59 |     include ../_layout/_ad-c.pug
60 | 
61 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/getting-started.pug:
--------------------------------------------------------------------------------
 1 | extends _layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'getting-started'
 5 |   - var parent = 'getting-started'
 6 |   - var title = 'Getting started - Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('getting-started', 'Getting started')
11 |     include _layout/_ad-g.pug
12 | 
13 |     p 
14 |       strong Spectre.css 
15 |       | is a lightweight, responsive and modern CSS framework for faster and extensible development.
16 |     p 
17 |       | 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.
18 | 
19 |     .docs-demo.columns
20 |       .column.col-6.col-xs-12
21 |         .card
22 |           .card-header
23 |             .card-title.h5 Installation
24 |           .card-body
25 |             | How to install and use Spectre.css
26 |           .card-footer
27 |             a.btn.btn-primary(href="getting-started/installation.html") View
28 |               
29 |       .column.col-6.col-xs-12
30 |         .card
31 |           .card-header
32 |             .card-title.h5 Custom version
33 |           .card-body
34 |             | Customize your version of Spectre.css
35 |           .card-footer
36 |             a.btn.btn-primary(href="getting-started/custom.html") View
37 |         
38 |       .column.col-6.col-xs-12
39 |         .card
40 |           .card-header
41 |             .card-title.h5 Browser support
42 |           .card-body
43 |             | Browser compatibility and support
44 |           .card-footer
45 |             a.btn.btn-primary(href="getting-started/browsers.html") View
46 |               
47 |       .column.col-6.col-xs-12
48 |         .card
49 |           .card-header
50 |             .card-title.h5 What's new
51 |           .card-body
52 |             | Changelog and release notes
53 |           .card-footer
54 |             a.btn.btn-primary(href="getting-started/whatsnew.html") View
55 | 
56 |       .column.col-6.col-xs-12
57 |         .card
58 |           .card-header
59 |             .card-title.h5 Accessibility
60 |           .card-body.text-gray
61 |             | Coming soon
62 | 
63 |     include _layout/_ad-c.pug
64 | 
65 |   include _layout/_footer.pug
66 | 


--------------------------------------------------------------------------------
/docs/src/getting-started/browsers.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'browsers'
 5 |   - var parent = 'getting-started'
 6 |   - var title = 'Browsers - Getting started - Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('browsers', 'Browser support')
11 |     include ../_layout/_ad-g.pug
12 |     
13 |     p
14 |       | Spectre uses 
15 |       a(href='https://github.com/postcss/autoprefixer', target='_blank') Autoprefixer
16 |       |  to make most styles compatible with earlier browsers and 
17 |       a(href='https://necolas.github.io/normalize.css/', target='_blank') Normalize.css
18 |       |  for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
19 |     ul
20 |       li
21 |         | Chrome 
22 |         small.label.label-success LAST 4
23 |       li
24 |         | Microsoft Edge 
25 |         small.label.label-success LAST 4
26 |       li
27 |         | Firefox 
28 |         small.label.label-success.text-uppercase Extended Support Release
29 |       li
30 |         | Safari 
31 |         small.label.label-success LAST 4
32 |       li
33 |         | Opera 
34 |         small.label.label-success LAST 4
35 |       li Internet Explorer 10+
36 |     p
37 |       | Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
38 |     
39 |     include ../_layout/_ad-c.pug
40 | 
41 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/getting-started/installation.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'installation'
 5 |   - var parent = 'getting-started'
 6 |   - var title = 'Installation - Getting started - Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('installation', 'Installation')
11 |     include ../_layout/_ad-g.pug
12 |     
13 |     p
14 |       | 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.
15 | 
16 |     +docs-subheading('install-manually', 'Install manually')
17 |     p
18 |       | Download the compiled and minified 
19 |       a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file
20 |       |  (core ~10KB min+gzip):
21 |     p
22 |       a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css
23 |     p
24 |       | Include 
25 |       code spectre.css
26 |       |  located in 
27 |       strong /dist
28 |       |  in your website or Web app . Also, you can add 
29 |       code spectre-icons.css
30 |       |  and 
31 |       code spectre-exp.css
32 |       |  accordingly.
33 | 
34 |     //- install manually
35 |     pre.code(data-lang='HTML')
36 |       code
37 |         :highlight(lang="html")
38 |           
39 |           
40 |           
41 |       
42 |     +docs-subheading('install-cdn', 'Install from CDN')
43 |     p
44 |       | Alternatively, you can use the 
45 |       a(href='https://unpkg.com/', target='_blank') unpkg
46 |       |  or 
47 |       a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs
48 |       |  CDN to load compiled Spectre.css.
49 | 
50 |     //- install from CDN
51 |     pre.code(data-lang='HTML')
52 |       code
53 |         :highlight(lang="html")
54 |           
55 |           
56 |           
57 | 
58 |     +docs-subheading('install-npm', 'Install with NPM')
59 | 
60 |     //- install with npm
61 |     pre.code.c-select-all(data-lang='Bash')
62 |       code
63 |         :highlight(lang="Bash")
64 |           npm install spectre.css --save
65 | 
66 |     +docs-subheading('install-yarn', 'Install with Yarn')
67 | 
68 |     //- install with yarn
69 |     pre.code.c-select-all(data-lang='Bash')
70 |       code
71 |         :highlight(lang="bash")
72 |           yarn add spectre.css
73 | 
74 |     +docs-subheading('install-bower', 'Install from Bower')
75 | 
76 |     //- install with bower
77 |     pre.code.c-select-all(data-lang='Bash')
78 |       code
79 |         :highlight(lang="bash")
80 |           bower install spectre.css --save
81 | 
82 |     include ../_layout/_ad-c.pug
83 | 
84 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/getting-started/whatsnew.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'whatsnew'
 5 |   - var parent = 'getting-started'
 6 |   - var title = 'What\'s New - Getting started - Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('whatsnew', 'What\'s new')
11 |     include ../_layout/_ad-g.pug
12 |     
13 |     include:markdown-it ../../../CHANGELOG.md
14 | 
15 |     p
16 |       a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Releases
17 |     
18 |     include ../_layout/_ad-c.pug
19 | 
20 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/index.pug:
--------------------------------------------------------------------------------
 1 | extends _layout/_layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'index'
 5 |   - var parent = 'index'
 6 |   - var title = 'Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block content
10 |   .section.section-hero.bg-gray
11 |     #overview.grid-hero.container.grid-lg.text-center
12 |       .docs-brand
13 |         a.docs-logo(href='index.html')
14 |           img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
15 |           h2 SPECTRE
16 |       h1 SPECTRE.CSS
17 |       h2
18 |         | A #[u Lightweight], #[u Responsive] and #[u Modern] CSS Framework
19 |       p
20 |         a.btn.btn-primary.btn-lg.mr-2(href='getting-started.html') Docs
21 |         a.btn.btn-primary.btn-lg(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
22 |       p.text-gray
23 |         | Latest version: 
24 |         span.version
25 |       .columns
26 |         .column.col-4.col-xs-12
27 |           .card.text-center
28 |             .card-header
29 |               span.card-title Lightweight
30 |             .card-body
31 |               | Lightweight  (~10KB gzipped) starting point for your projects
32 |         .column.col-4.col-xs-12
33 |           .card.text-center
34 |             .card-header
35 |               span.card-title Responsive
36 |             .card-body
37 |               | Flexbox-based, responsive and mobile-friendly layout
38 |         .column.col-4.col-xs-12
39 |           .card.text-center
40 |             .card-header
41 |               span.card-title Modern
42 |             .card-body
43 |               | Elegantly designed and developed elements and components
44 |   
45 |   .section.section-ads.bg-gray
46 |     include _layout/_ad-g.pug
47 | 
48 |   .section.section-features.bg-primary.text-light.text-center
49 |     .container.grid-lg
50 |       h2 Introduction
51 |       .columns
52 |         .column.col-10.col-sm-12.col-mx-auto.text-left
53 |           p.text-secondary
54 |             strong Spectre.css 
55 |             | is a lightweight, responsive and modern CSS framework for faster and extensible development.
56 |           p.text-secondary
57 |             | 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.
58 |         .column.col-10.col-sm-12.col-mx-auto
59 |           a.btn.btn-lg(href='getting-started/installation.html') Install Spectre.css
60 | 
61 |   .section.section-updates.bg-gray
62 |     .container.grid-lg
63 |       .columns
64 |         .column.col-4.col-xs-12
65 |           .card
66 |             .card-header
67 |               .card-title.h6 Spectre Twitter
68 |             .card-body
69 |               | For the latest announcements and updates, follow on Twitter: 
70 |               a(href='https://twitter.com/spectrecss' target='_blank') @spectrecss
71 |               | .
72 |             .card-footer
73 |               a.btn.btn-primary(href='https://twitter.com/spectrecss' target='_blank') Follow
74 |         .column.col-4.col-xs-12
75 |           .card
76 |             .card-header
77 |               .card-title.h6 PayPal Donate
78 |             .card-body
79 |               | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development.
80 |             .card-footer
81 |               a.btn.btn-primary(href='https://www.paypal.me/picturepan2' target='_blank') Donate
82 |         .column.col-4.col-xs-12
83 |           .card
84 |             .card-header
85 |               .card-title.h6 Sponsor via Patreon
86 |             .card-body
87 |               | Your name or company logo will be put on Spectre Docs homepage.
88 |             .card-footer
89 |               a.btn.btn-primary(href='https://www.patreon.com/spectrecss' target='_blank') Sponsor
90 |   .section.section-ads.bg-gray
91 |     include _layout/_ad-c.pug
92 | 
93 |   footer.section.section-footer
94 |     include _layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/layout.pug:
--------------------------------------------------------------------------------
 1 | extends _layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'layout'
 5 |   - var parent = 'layout'
 6 |   - var title = 'Layout - Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('layout', 'Layout')
11 |     include _layout/_ad-g.pug
12 | 
13 |     p 
14 |       strong Spectre.css 
15 |       | is a lightweight, responsive and modern CSS framework for faster and extensible development.
16 |     p 
17 |       | 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.
18 | 
19 |     .docs-demo.columns
20 |       .column.col-6.col-xs-12
21 |         .card
22 |           .card-header
23 |             .card-title.h5 Flexbox grid
24 |           .card-body
25 |             | Flexbox based responsive grid system with 12 columns
26 |           .card-footer
27 |             a.btn.btn-primary(href="layout/grid.html") View
28 |               
29 |       .column.col-6.col-xs-12
30 |         .card
31 |           .card-header
32 |             .card-title.h5 Responsive
33 |           .card-body
34 |             | Responsive layout grid system and responsive visibility utilities
35 |           .card-footer
36 |             a.btn.btn-primary(href="layout/responsive.html") View
37 | 
38 |       .column.col-6.col-xs-12
39 |         .card
40 |           .card-header
41 |             .card-title.h5 Hero
42 |           .card-body
43 |             | Container for key featured content or information
44 |           .card-footer
45 |             a.btn.btn-primary(href="layout/hero.html") View
46 |         
47 |       .column.col-6.col-xs-12
48 |         .card
49 |           .card-header
50 |             .card-title.h5 Navbar
51 |           .card-body
52 |             | Layout container that appears in the header of apps and websites
53 |           .card-footer
54 |             a.btn.btn-primary(href="layout/navbar.html") View
55 |               
56 |     include _layout/_ad-c.pug
57 | 
58 |   include _layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/layout/hero.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'hero'
 5 |   - var parent = 'layout'
 6 |   - var title = 'Hero - Layout - Spectre.css CSS Framework'
 7 |   - var description = 'The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('hero', 'Hero')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p
14 |       | The Hero container shows key featured content or information.
15 | 
16 |     .docs-demo.columns
17 |       .column
18 |         .hero.bg-gray
19 |           .hero-body
20 |             h1 Hero title
21 |             p This is a hero example
22 | 
23 | 
24 |     pre.code(data-lang='HTML')
25 |       code
26 |         :highlight(lang="html")
27 |           

28 |             

29 |               
Hero title

30 |               
This is a hero example

31 |             

32 |           

33 | 
34 |     p
35 |       | Use 
36 |       code hero-sm
37 |       |  and 
38 |       code hero-lg 
39 |       | to the hero container for smaller and larger padding. 
40 | 
41 |     .docs-demo.columns
42 |       .column
43 |         .hero.hero-sm.bg-dark
44 |           .hero-body
45 |             h1 Hero title
46 |             p This is a hero example
47 |             
48 |     .docs-demo.columns
49 |       .column
50 |         .hero.hero-lg.bg-primary
51 |           .hero-body
52 |             h1 Hero title
53 |             p This is a hero example
54 | 
55 |     include ../_layout/_ad-c.pug
56 | 
57 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/layout/navbar.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'navbar'
 5 |   - var parent = 'layout'
 6 |   - var title = 'Navbar - Layout - Spectre.css CSS Framework'
 7 |   - var description = 'Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('navbar', 'Navbar')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p Navbar is a layout container that appears in the header of apps and websites.
14 | 
15 |     .docs-demo.columns
16 |       .column
17 |         .navbar
18 |           .navbar-section
19 |             a.navbar-brand.text-bold.mr-2(href="#navbar") SPECTRE.CSS
20 |             a.btn.btn-link(href="#navbar") Docs
21 |             a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
22 |           .navbar-section
23 |             .input-group.input-inline
24 |               input.form-input(type="text" placeholder="search")
25 |               button.btn.btn-primary.input-group-btn Search
26 | 
27 |     p
28 |       | The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
29 |       | Each section with the #[code navbar-section] class will be evenly distributed in the container.
30 | 
31 |     pre.code(data-lang='HTML')
32 |       code
33 |         :highlight(lang="html")
34 |           

35 |             

36 |               Spectre.css
37 |               Docs
38 |               GitHub
39 |             

40 |             

41 |               

42 |                 
43 |                 
44 |               

45 |             

46 |           

47 | 
48 |     p
49 |       | You can use #[code navbar-center] class to have a centered section.
50 | 
51 |     .docs-demo.columns
52 |       .column.col-12
53 |         .navbar
54 |           .navbar-section
55 |             a.btn.btn-link(href="#navbar") Docs
56 |             a.btn.btn-link(href="#navbar") Examples
57 |           .navbar-center
58 |             img(src="../img/spectre-logo.svg" alt="Spectre.css")
59 |           .navbar-section
60 |             a.btn.btn-link(href="https://twitter.com/spectrecss") Twitter
61 |             a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
62 | 
63 |     pre.code(data-lang='HTML')
64 |       code
65 |         :highlight(lang="html")
66 |           

67 |             

68 |               Docs
69 |               Examples
70 |             

71 |             

72 |               
73 |             

74 |             

75 |               Twitter
76 |               GitHub
77 |             

78 |           

79 |         
80 |     include ../_layout/_ad-c.pug
81 | 
82 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/scss/spectre-rtl.scss:
--------------------------------------------------------------------------------
1 | /*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
2 | $rtl: true;
3 | 
4 | // Import Spectre
5 | @import "../../../src/spectre";
6 | @import "../../../src/spectre-exp";
7 | 


--------------------------------------------------------------------------------
/docs/src/utilities.pug:
--------------------------------------------------------------------------------
 1 | extends _layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'utilities'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'Spectre.css CSS Framework 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.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('utilities', 'Utilities')
11 |     include _layout/_ad-g.pug
12 | 
13 |     p 
14 |       strong Spectre.css 
15 |       | is a lightweight, responsive and modern CSS framework for faster and extensible development.
16 |     p 
17 |       | 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.
18 | 
19 |     .docs-demo.columns
20 |       .column.col-6.col-xs-12
21 |         .card
22 |           .card-header
23 |             .card-title.h5 Color utilities
24 |           .card-body
25 |             | Colors for text, link and background
26 |           .card-footer
27 |             a.btn.btn-primary(href="utilities/colors.html") View
28 |               
29 |       .column.col-6.col-xs-12
30 |         .card
31 |           .card-header
32 |             .card-title.h5 Cursor utilities
33 |           .card-body
34 |             | Mouse cursor to display when mouseover
35 |           .card-footer
36 |             a.btn.btn-primary(href="utilities/cursors.html") View
37 |         
38 |       .column.col-6.col-xs-12
39 |         .card
40 |           .card-header
41 |             .card-title.h5 Display utilities
42 |           .card-body
43 |             | Display and hidden things
44 |           .card-footer
45 |             a.btn.btn-primary(href="utilities/display.html") View
46 | 
47 |       .column.col-6.col-xs-12
48 |         .card
49 |           .card-header
50 |             .card-title.h5 Divider
51 |           .card-body
52 |             | Separating elements
53 |           .card-footer
54 |             a.btn.btn-primary(href="utilities/divider.html") View
55 |               
56 |       .column.col-6.col-xs-12
57 |         .card
58 |           .card-header
59 |             .card-title.h5 Loading
60 |           .card-body
61 |             | Indicating loading or updating state
62 |           .card-footer
63 |             a.btn.btn-primary(href="utilities/loading.html") View
64 | 
65 |       .column.col-6.col-xs-12
66 |         .card
67 |           .card-header
68 |             .card-title.h5 Position utilities
69 |           .card-body
70 |             | Useful layout and position things
71 |           .card-footer
72 |             a.btn.btn-primary(href="utilities/position.html") View
73 |               
74 |       .column.col-6.col-xs-12
75 |         .card
76 |           .card-header
77 |             .card-title.h5 Shape utilities
78 |           .card-body
79 |             | Changing element shapes
80 |           .card-footer
81 |             a.btn.btn-primary(href="utilities/shapes.html") View
82 | 
83 |       .column.col-6.col-xs-12
84 |         .card
85 |           .card-header
86 |             .card-title.h5 Text utilities
87 |           .card-body
88 |             | Text alignment, styles and overflow things
89 |           .card-footer
90 |             a.btn.btn-primary(href="utilities/text.html") View
91 |               
92 |     include _layout/_ad-c.pug
93 | 
94 |   include _layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/colors.pug:
--------------------------------------------------------------------------------
  1 | extends ../_layout/_docs-layout.pug
  2 | 
  3 | block variables
  4 |   - var slug = 'colors'
  5 |   - var parent = 'utilities'
  6 |   - var title = 'Color utilities - Utilities - Spectre.css CSS Framework'
  7 |   - var description = 'Color utilities are used for changing colors for text, link and background. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
  8 | 
  9 | block docs-content
 10 |   +docs-heading('colors', 'Color utilities')
 11 |     include ../_layout/_ad-g.pug
 12 | 
 13 |     p Color utilities are used for changing colors for text, link and background.
 14 | 
 15 |     +docs-subheading('colors-text', 'Text colors')
 16 | 
 17 |     .docs-demo.columns
 18 |       .column.col-12
 19 |         p
 20 |           span.text-primary primary color
 21 |         p
 22 |           span.text-secondary secondary color
 23 |         p
 24 |           span.text-dark dark color
 25 |         p
 26 |           span.text-gray gray color
 27 |         p
 28 |           span.text-light.bg-dark.p-1.rounded light color
 29 |         p
 30 |           span.text-success success color
 31 |         p
 32 |           span.text-warning warning color
 33 |         p
 34 |           span.text-error error color
 35 | 
 36 |     pre.code(data-lang='HTML')
 37 |       code
 38 |         :highlight(lang="html")
 39 |           primary color
 40 |           secondary color
 41 |           dark color
 42 |           gray color
 43 |           light color
 44 |           success color
 45 |           warning color
 46 |           error color
 47 | 
 48 |     .docs-demo.columns
 49 |       .column.col-12
 50 |         p
 51 |           a.text-primary.p-1(href="#colors") primary link
 52 |         p
 53 |           a.text-secondary.p-1(href="#colors") secondary link
 54 |         p
 55 |           a.text-dark.p-1(href="#colors") dark link
 56 |         p
 57 |           a.text-gray.p-1(href="#colors") gray link
 58 |         p
 59 |           a.text-light.bg-dark.p-1.rounded(href="#colors") light link
 60 |         p
 61 |           a.text-success.p-1(href="#colors") success link
 62 |         p
 63 |           a.text-warning.p-1(href="#colors") warning link
 64 |         p
 65 |           a.text-error.p-1(href="#colors") error link
 66 | 
 67 |     pre.code(data-lang='HTML')
 68 |       code
 69 |         :highlight(lang="html")
 70 |           primary color
 71 |           secondary color
 72 |           dark color
 73 |           gray color
 74 |           light color
 75 |           success color
 76 |           warning color
 77 |           error color
 78 | 
 79 |     +docs-subheading('colors-background', 'Background colors')
 80 | 
 81 |     .docs-demo.columns
 82 |       .column.col-12
 83 |         p
 84 |           span.bg-primary.p-1.rounded primary bg
 85 |         p
 86 |           span.bg-secondary.text-primary.p-1.rounded secondary bg
 87 |         p
 88 |           span.bg-dark.p-1.rounded dark bg
 89 |         p
 90 |           span.bg-gray.p-1.rounded gray bg
 91 |         p
 92 |           span.bg-success.p-1.rounded success bg
 93 |         p
 94 |           span.bg-warning.p-1.rounded warning bg
 95 |         p
 96 |           span.bg-error.p-1.rounded error bg
 97 | 
 98 |     pre.code(data-lang='HTML')
 99 |       code
100 |         :highlight(lang="html")
101 |           
primary bg

102 |           
secondary bg

103 |           
dark bg

104 |           
gray bg

105 |           
success bg

106 |           
warning bg

107 |           
error bg

108 | 
109 |     include ../_layout/_ad-c.pug
110 | 
111 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/cursors.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'cursors'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Cursor utilities - Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'Cursor utilities specify which mouse cursor to display when mouseover. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('cursors', 'Cursor utilities')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p Cursor utilities specify which mouse cursor to display when mouseover.
14 | 
15 |     .docs-demo.columns
16 |       .column.col-4
17 |         .bg-gray.docs-block.c-hand c-hand
18 |       .column.col-4
19 |         .bg-gray.docs-block.c-move c-move
20 |       .column.col-4
21 |         .bg-gray.docs-block.c-zoom-in c-zoom-in
22 |       .column.col-4
23 |         .bg-gray.docs-block.c-zoom-out c-zoom-out
24 |       .column.col-4
25 |         .bg-gray.docs-block.c-not-allowed c-not-allowed
26 |       .column.col-4
27 |         .bg-gray.docs-block.c-auto c-auto
28 | 
29 |     pre.code(data-lang='HTML')
30 |       code
31 |         :highlight(lang="html")
32 |           
33 |           

34 |           
35 |           

36 |           
37 |           

38 |           
39 |           

40 |           
41 |           

42 |           
43 |           

44 | 
45 |     include ../_layout/_ad-c.pug
46 | 
47 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/display.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'display'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Display utilities - Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'Display utilities are used for display and hidden things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('display', 'Display utilities')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p Display utilities are used for display and hidden things.
14 | 
15 |     pre.code(data-lang='HTML')
16 |       code
17 |         :highlight(lang="html")
18 |           
19 |           

20 |           
21 |           

22 |           
23 |           

24 |           
25 |           

26 |           
27 |           

28 |           
29 |           

30 |           

31 |           
32 |           

33 |           
34 |           

35 |           
36 |           

37 |           
38 |           

39 | 
40 |     include ../_layout/_ad-c.pug
41 | 
42 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/divider.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'divider'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Divider - Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'The Divider is used for separating elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('divider', 'Divider')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p The Divider is used for separating elements.
14 | 
15 |     .docs-demo.columns
16 |       .column
17 |         .divider
18 | 
19 |     .docs-demo.columns
20 |       .column
21 |         | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
22 |         .divider.text-center(data-content="OR")
23 |         | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
24 | 
25 |     .docs-demo.columns
26 |       .column
27 |         form
28 |           .form-group
29 |             label.form-label(for="input-example-1") Email
30 |             input#input-example-1.form-input(type="text" placeholder="Email")
31 |           .form-group
32 |             label.form-label(for="input-example-2") Password
33 |             input#input-example-2.form-input(type="password" placeholder="Password")
34 |           .form-group
35 |             label.form-checkbox
36 |               input(type="checkbox")
37 |               i.form-icon
38 |               |  Remember me
39 |           .form-group
40 |             button.btn.btn-primary Sign in
41 |       .divider-vert(data-content="OR")
42 |       .column
43 |         form
44 |           .form-group
45 |             label.form-label(for="input-example-3") Email
46 |             input#input-example-3.form-input(type="text" placeholder="Email")
47 |           .form-group
48 |             button.btn.btn-primary.btn-block Sign up
49 |             button.btn.btn-link.btn-block Learn more
50 | 
51 |     pre.code(data-lang='HTML')
52 |       code
53 |         :highlight(lang="html")
54 |           
55 |           

56 |           
57 |           

58 | 
59 |           
60 |           

61 |             

62 |               
63 |             

64 |             

65 |             

66 |               
67 |             

68 |           

69 | 
70 |     include ../_layout/_ad-c.pug
71 | 
72 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/loading.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'loading'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Loading - Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'Loading indicator is used for loading or updating. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('loading', 'Loading')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p
14 |       | Loading indicator is used for loading or updating.
15 |       | You can add the #[code loading] class to a container for loading status.
16 | 
17 |     .docs-demo.columns
18 |       .column.col-12.text-center
19 |         .loading
20 | 
21 |     p
22 |       | Add the #[code loading-lg] class for large size.
23 | 
24 |     .docs-demo.columns
25 |       .column.col-12.text-center
26 |         .loading.loading-lg
27 | 
28 |     pre.code(data-lang='HTML')
29 |       code
30 |         :highlight(lang="html")
31 |           
32 |           

33 |           

34 | 
35 |     include ../_layout/_ad-c.pug
36 | 
37 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/position.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'position'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Position utilities - Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('position', 'Position utilities')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p
14 |       | Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
15 | 
16 |     pre.code(data-lang='HTML')
17 |       code
18 |         :highlight(lang="html")
19 |           
20 |           

21 |           
22 |           

23 |           

24 |           
25 |           

26 |           

27 |           

28 |           

29 |           
30 |           

31 | 
32 |           
33 |           

34 |           

35 |           
36 |           

37 |           

38 |           
39 |           

40 |           

41 |           

42 |           

43 |           
44 |           

45 |           

46 |           
47 |           

48 |           

49 |           
50 |           

51 |           

52 |           

53 |           

54 | 
55 |     include ../_layout/_ad-c.pug
56 | 
57 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/shapes.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'shapes'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Shape utilities - Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'Shape utilities are used for changing element shapes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('shapes', 'Shape utilities')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p Shape utilities are used for changing element shapes.
14 | 
15 |     .docs-demo.columns
16 |       .column.col-6.text-center
17 |         .bg-primary.text-light.docs-shape.s-rounded.centered
18 |           | s-rounded
19 |       .column.col-6.text-center
20 |         .bg-primary.text-light.docs-shape.s-circle.centered
21 |           | s-circle
22 | 
23 |     pre.code(data-lang='HTML')
24 |       code
25 |         :highlight(lang="html")
26 |           
27 |           

28 |           
29 |           

30 | 
31 |     include ../_layout/_ad-c.pug
32 | 
33 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/docs/src/utilities/text.pug:
--------------------------------------------------------------------------------
 1 | extends ../_layout/_docs-layout.pug
 2 | 
 3 | block variables
 4 |   - var slug = 'text'
 5 |   - var parent = 'utilities'
 6 |   - var title = 'Text utilities - Utilities - Spectre.css CSS Framework'
 7 |   - var description = 'Text utilities are used for text alignment, styles and overflow things. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 8 | 
 9 | block docs-content
10 |   +docs-heading('text', 'Text utilities')
11 |     include ../_layout/_ad-g.pug
12 | 
13 |     p Text utilities are used for text alignment, styles and overflow things.
14 | 
15 |     pre.code(data-lang='HTML')
16 |       code
17 |         :highlight(lang="html")
18 |           
19 |           

20 |           
21 |           

22 |           
23 |           

24 |           
25 |           

26 | 
27 |           
28 |           

29 |           
30 |           

31 |           
32 |           

33 | 
34 |           
35 |           

36 |           
37 |           

38 |           
39 |           

40 |           
41 |           

42 | 
43 |           
44 |           

45 |           
46 |           

47 |           
48 |           

49 | 
50 |     include ../_layout/_ad-c.pug
51 | 
52 |   include ../_layout/_footer.pug


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | const gulp = require("gulp");
 2 | const { parallel } = require("gulp");
 3 | const sass = require('gulp-sass');
 4 | const cleancss = require('gulp-clean-css');
 5 | const csscomb = require('gulp-csscomb');
 6 | const rename = require('gulp-rename');
 7 | const pug = require('gulp-pug');
 8 | const autoprefixer = require('gulp-autoprefixer');
 9 | 
10 | function build() {
11 |   return gulp
12 |     .src('./src/*.scss')
13 |     .pipe(sass({outputStyle: 'compact', precision: 10})
14 |       .on('error', sass.logError)
15 |     )
16 |     .pipe(autoprefixer())
17 |     .pipe(csscomb())
18 |     .pipe(gulp.dest('./dist'))
19 |     .pipe(cleancss())
20 |     .pipe(rename({
21 |       suffix: '.min'
22 |     }))
23 |     .pipe(gulp.dest('./dist'));
24 | }
25 | 
26 | function docs_css() {
27 |   return gulp
28 |     .src(['./src/*.scss', './docs/src/scss/*.scss'])
29 |     .pipe(sass({outputStyle: 'compact', precision: 10})
30 |       .on('error', sass.logError)
31 |     )
32 |     .pipe(autoprefixer())
33 |     .pipe(csscomb())
34 |     .pipe(gulp.dest('./docs/dist'))
35 |     .pipe(cleancss())
36 |     .pipe(rename({
37 |       suffix: '.min'
38 |     }))
39 |     .pipe(gulp.dest('./docs/dist'));
40 | }
41 | 
42 | function docs_pug() {
43 |   return gulp
44 |     .src('docs/src/**/!(_)*.pug')
45 |     .pipe(pug({
46 |       pretty: true
47 |     }))
48 |     .pipe(gulp.dest('./docs/'));
49 | }
50 | 
51 | function watch() {
52 |   gulp.watch('./**/*.scss', parallel(build, docs_css));
53 |   gulp.watch('./**/*.pug', docs_pug);
54 | }
55 | 
56 | exports.watch = watch;
57 | exports.build = build;
58 | exports.docs = parallel(docs_pug, docs_css);
59 | exports.default = build;
60 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "spectre.css",
 3 |   "version": "0.5.9",
 4 |   "homepage": "http://picturepan2.github.io/spectre",
 5 |   "author": "Yan Zhu ",
 6 |   "description": "Spectre.css: A lightweight, responsive and modern CSS framework",
 7 |   "main": "dist/spectre.css",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/picturepan2/spectre.git"
11 |   },
12 |   "license": "MIT",
13 |   "keywords": [
14 |     "css",
15 |     "framework",
16 |     "flexbox",
17 |     "responsive",
18 |     "mobile-friendly",
19 |     "front-end",
20 |     "sass",
21 |     "modern"
22 |   ],
23 |   "bugs": {
24 |     "url": "https://github.com/picturepan2/spectre/issues"
25 |   },
26 |   "devDependencies": {
27 |     "gulp": "^4.0.2",
28 |     "gulp-autoprefixer": "^7.0.1",
29 |     "gulp-clean-css": "^4.3.0",
30 |     "gulp-csscomb": "^3.1.0",
31 |     "gulp-pug": "^4.0.1",
32 |     "gulp-rename": "^2.0.0",
33 |     "gulp-sass": "^4.1.0",
34 |     "jstransformer-highlight": "^2.0.0",
35 |     "jstransformer-markdown-it": "^2.1.0"
36 |   },
37 |   "browserslist": [
38 |     "last 4 Chrome versions",
39 |     "Edge >= 12",
40 |     "Firefox ESR",
41 |     "last 4 Safari versions",
42 |     "last 4 Opera versions",
43 |     "Explorer >= 10"
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/src/_accordions.scss:
--------------------------------------------------------------------------------
 1 | // Accordions
 2 | .accordion {
 3 |   input:checked ~,
 4 |   &[open] {
 5 |     & .accordion-header > {
 6 |       .icon:first-child {
 7 |         transform: rotate(90deg);
 8 |       }
 9 |     }
10 | 
11 |     & .accordion-body {
12 |       max-height: 50rem;
13 |     }
14 |   }
15 | 
16 |   .accordion-header {
17 |     display: block;
18 |     padding: $unit-1 $unit-2;
19 | 
20 |     .icon {
21 |       transition: transform .25s;
22 |     }
23 |   }
24 | 
25 |   .accordion-body {
26 |     margin-bottom: $layout-spacing;
27 |     max-height: 0;
28 |     overflow: hidden;
29 |     transition: max-height .25s;
30 |   }
31 | }
32 | 
33 | // Remove default details marker in Webkit
34 | summary.accordion-header {
35 |   &::-webkit-details-marker {
36 |     display: none;
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/_animations.scss:
--------------------------------------------------------------------------------
 1 | // Animations
 2 | @keyframes loading {
 3 |   0% {
 4 |     transform: rotate(0deg);
 5 |   }
 6 |   100% {
 7 |     transform: rotate(360deg);
 8 |   }
 9 | }
10 | 
11 | @keyframes slide-down {
12 |   0% {
13 |     opacity: 0;
14 |     transform: translateY(-$unit-8);
15 |   }
16 |   100% {
17 |     opacity: 1;
18 |     transform: translateY(0);
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/_asian.scss:
--------------------------------------------------------------------------------
 1 | // Optimized for East Asian CJK
 2 | html:lang(zh),
 3 | html:lang(zh-Hans),
 4 | .lang-zh,
 5 | .lang-zh-hans {
 6 |   font-family: $cjk-zh-hans-font-family;
 7 | }
 8 | 
 9 | html:lang(zh-Hant),
10 | .lang-zh-hant {
11 |   font-family: $cjk-zh-hant-font-family;
12 | }
13 | 
14 | html:lang(ja),
15 | .lang-ja {
16 |   font-family: $cjk-jp-font-family;
17 | }
18 | 
19 | html:lang(ko),
20 | .lang-ko {
21 |   font-family: $cjk-ko-font-family;
22 | }
23 | 
24 | :lang(zh),
25 | :lang(ja),
26 | .lang-cjk {
27 |   ins,
28 |   u {
29 |     border-bottom: $border-width solid;
30 |     text-decoration: none;
31 |   }
32 | 
33 |   del + del,
34 |   del + s,
35 |   ins + ins,
36 |   ins + u,
37 |   s + del,
38 |   s + s,
39 |   u + ins,
40 |   u + u {
41 |     margin-left: .125em;
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/_autocomplete.scss:
--------------------------------------------------------------------------------
 1 | // Autocomplete
 2 | .form-autocomplete {
 3 |   position: relative;
 4 | 
 5 |   .form-autocomplete-input {
 6 |     align-content: flex-start;
 7 |     display: flex;
 8 |     flex-wrap: wrap;
 9 |     height: auto;
10 |     min-height: $unit-8;
11 |     padding: $unit-h;
12 | 
13 |     &.is-focused {
14 |       @include control-shadow();
15 |       border-color: $primary-color;
16 |     }
17 | 
18 |     .form-input {
19 |       border-color: transparent;
20 |       box-shadow: none;
21 |       display: inline-block;
22 |       flex: 1 0 auto;
23 |       height: $unit-6;
24 |       line-height: $unit-4;
25 |       margin: $unit-h;
26 |       width: auto;
27 |     }
28 |   }
29 | 
30 |   .menu {
31 |     left: 0;
32 |     position: absolute;
33 |     top: 100%;
34 |     width: 100%;
35 |   }
36 | 
37 |   &.autocomplete-oneline {
38 |     .form-autocomplete-input {
39 |       flex-wrap: nowrap;
40 |       overflow-x: auto;
41 |     }
42 | 
43 |     .chip {
44 |       flex: 1 0 auto;
45 |     }
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/_avatars.scss:
--------------------------------------------------------------------------------
 1 | // Avatars
 2 | .avatar {
 3 |   @include avatar-base();
 4 |   background: $primary-color;
 5 |   border-radius: 50%;
 6 |   color: rgba($light-color, .85);
 7 |   display: inline-block;
 8 |   font-weight: 300;
 9 |   line-height: 1.25;
10 |   margin: 0;
11 |   position: relative;
12 |   vertical-align: middle;
13 | 
14 |   &.avatar-xs {
15 |     @include avatar-base($unit-4);
16 |   }
17 |   &.avatar-sm {
18 |     @include avatar-base($unit-6);
19 |   }
20 |   &.avatar-lg {
21 |     @include avatar-base($unit-12);
22 |   }
23 |   &.avatar-xl {
24 |     @include avatar-base($unit-16);
25 |   }
26 | 
27 |   img {
28 |     border-radius: 50%;
29 |     height: 100%;
30 |     position: relative;
31 |     width: 100%;
32 |     z-index: $zindex-0;
33 |   }
34 | 
35 |   .avatar-icon,
36 |   .avatar-presence {
37 |     background: $bg-color-light;
38 |     bottom: 14.64%;
39 |     height: 50%;
40 |     padding: $border-width-lg;
41 |     position: absolute;
42 |     right: 14.64%;
43 |     transform: translate(50%, 50%);
44 |     width: 50%;
45 |     z-index: $zindex-0 + 1;
46 |   }
47 | 
48 |   .avatar-presence {
49 |     background: $gray-color;
50 |     box-shadow: 0 0 0 $border-width-lg $light-color;
51 |     border-radius: 50%;
52 |     height: .5em;
53 |     width: .5em;
54 | 
55 |     &.online {
56 |       background: $success-color;
57 |     }
58 | 
59 |     &.busy {
60 |       background: $error-color;
61 |     }
62 | 
63 |     &.away {
64 |       background: $warning-color;
65 |     }
66 |   }
67 | 
68 |   &[data-initial]::before {
69 |     color: currentColor;
70 |     content: attr(data-initial);
71 |     left: 50%;
72 |     position: absolute;
73 |     top: 50%;
74 |     transform: translate(-50%, -50%);
75 |     z-index: $zindex-0;
76 |   }
77 | }


--------------------------------------------------------------------------------
/src/_badges.scss:
--------------------------------------------------------------------------------
 1 | // Badges
 2 | .badge {
 3 |   position: relative;
 4 |   white-space: nowrap;
 5 | 
 6 |   &[data-badge],
 7 |   &:not([data-badge]) {
 8 |     &::after {
 9 |       background: $primary-color;
10 |       background-clip: padding-box;
11 |       border-radius: .5rem;
12 |       box-shadow: 0 0 0 .1rem $bg-color-light;
13 |       color: $light-color;
14 |       content: attr(data-badge);
15 |       display: inline-block;
16 |       transform: translate(-.05rem, -.5rem);
17 |     }
18 |   }
19 |   &[data-badge] {
20 |     &::after {
21 |       font-size: $font-size-sm;
22 |       height: .9rem;
23 |       line-height: 1;
24 |       min-width: .9rem;
25 |       padding: .1rem .2rem;
26 |       text-align: center;
27 |       white-space: nowrap;
28 |     }
29 |   }
30 |   &:not([data-badge]),
31 |   &[data-badge=""] {
32 |     &::after {
33 |       height: 6px;
34 |       min-width: 6px;
35 |       padding: 0;
36 |       width: 6px;
37 |     }
38 |   }
39 | 
40 |   // Badges for Buttons
41 |   &.btn {
42 |     &::after {
43 |       position: absolute;
44 |       top: 0;
45 |       right: 0;
46 |       transform: translate(50%, -50%);
47 |     }
48 |   }
49 | 
50 |   // Badges for Avatars
51 |   &.avatar {
52 |     &::after {
53 |       position: absolute;
54 |       top: 14.64%;
55 |       right: 14.64%;
56 |       transform: translate(50%, -50%);
57 |       z-index: $zindex-1;
58 |     }
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/_bars.scss:
--------------------------------------------------------------------------------
 1 | // Bars
 2 | .bar {
 3 |   background: $bg-color-dark;
 4 |   border-radius: $border-radius;
 5 |   display: flex;
 6 |   flex-wrap: nowrap;
 7 |   height: $unit-4;
 8 |   width: 100%;
 9 | 
10 |   &.bar-sm {
11 |     height: $unit-1;
12 |   }
13 | 
14 |   // TODO: attr() support
15 |   .bar-item {
16 |     background: $primary-color;
17 |     color: $light-color;
18 |     display: block;
19 |     font-size: $font-size-sm;
20 |     flex-shrink: 0;
21 |     line-height: $unit-4;
22 |     height: 100%;
23 |     position: relative;
24 |     text-align: center;
25 |     width: 0;
26 | 
27 |     &:first-child {
28 |       border-bottom-left-radius: $border-radius;
29 |       border-top-left-radius: $border-radius;
30 |     }
31 |     &:last-child {
32 |       border-bottom-right-radius: $border-radius;
33 |       border-top-right-radius: $border-radius;
34 |       flex-shrink: 1;
35 |     }
36 |   }
37 | }
38 | 
39 | // Slider bar
40 | .bar-slider {
41 |   height: $border-width-lg;
42 |   margin: $layout-spacing 0;
43 |   position: relative;
44 | 
45 |   .bar-item {
46 |     left: 0;
47 |     padding: 0;
48 |     position: absolute;
49 |     &:not(:last-child):first-child {
50 |       background: $bg-color-dark;
51 |       z-index: $zindex-0;
52 |     }
53 |   }
54 | 
55 |   .bar-slider-btn {
56 |     background: $primary-color;
57 |     border: 0;
58 |     border-radius: 50%;
59 |     height: $unit-3;
60 |     padding: 0;
61 |     position: absolute;
62 |     right: 0;
63 |     top: 50%;
64 |     transform: translate(50%, -50%);
65 |     width: $unit-3;
66 | 
67 |     &:active {
68 |       box-shadow: 0 0 0 .1rem $primary-color;
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/_base.scss:
--------------------------------------------------------------------------------
 1 | // Base
 2 | *,
 3 | *::before,
 4 | *::after {
 5 |   box-sizing: inherit;
 6 | }
 7 | 
 8 | html {
 9 |   box-sizing: border-box;
10 |   font-size: $html-font-size;
11 |   line-height: $html-line-height;
12 |   -webkit-tap-highlight-color: transparent;
13 | }
14 | 
15 | body {
16 |   background: $body-bg;
17 |   color: $body-font-color;
18 |   font-family: $body-font-family;
19 |   font-size: $font-size;
20 |   overflow-x: hidden;
21 |   text-rendering: optimizeLegibility;
22 | }
23 | 
24 | a {
25 |   color: $link-color;
26 |   outline: none;
27 |   text-decoration: none;
28 | 
29 |   &:focus {
30 |     @include control-shadow();
31 |   }
32 | 
33 |   &:focus,
34 |   &:hover,
35 |   &:active,
36 |   &.active {
37 |     color: $link-color-dark;
38 |     text-decoration: underline;
39 |   }
40 | 
41 |   &:visited {
42 |     color: $link-color-light;
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/_breadcrumbs.scss:
--------------------------------------------------------------------------------
 1 | // Breadcrumbs
 2 | .breadcrumb {
 3 |   list-style: none;
 4 |   margin: $unit-1 0;
 5 |   padding: $unit-1 0;
 6 | 
 7 |   .breadcrumb-item {
 8 |     color: $gray-color-dark;
 9 |     display: inline-block;
10 |     margin: 0;
11 |     padding: $unit-1 0;
12 | 
13 |     &:not(:last-child) {
14 |       margin-right: $unit-1;
15 | 
16 |       a {
17 |         color: $gray-color-dark;
18 |       }
19 |     }
20 | 
21 |     &:not(:first-child) {
22 |       &::before {
23 |         color: $gray-color-dark;
24 |         content: "/";
25 |         padding-right: $unit-2;
26 |       }
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/_buttons.scss:
--------------------------------------------------------------------------------
  1 | // Buttons
  2 | .btn {
  3 |   appearance: none;
  4 |   background: $bg-color-light;
  5 |   border: $border-width solid $primary-color;
  6 |   border-radius: $border-radius;
  7 |   color: $primary-color;
  8 |   cursor: pointer;
  9 |   display: inline-block;
 10 |   font-size: $font-size;
 11 |   height: $control-size;
 12 |   line-height: $line-height;
 13 |   outline: none;
 14 |   padding: $control-padding-y $control-padding-x;
 15 |   text-align: center;
 16 |   text-decoration: none;
 17 |   transition: background .2s, border .2s, box-shadow .2s, color .2s;
 18 |   user-select: none;
 19 |   vertical-align: middle;
 20 |   white-space: nowrap;
 21 |   &:focus {
 22 |     @include control-shadow();
 23 |   }
 24 |   &:focus,
 25 |   &:hover {
 26 |     background: $secondary-color;
 27 |     border-color: $primary-color-dark;
 28 |     text-decoration: none;
 29 |   }
 30 |   &:active,
 31 |   &.active {
 32 |     background: $primary-color-dark;
 33 |     border-color: darken($primary-color-dark, 5%);
 34 |     color: $light-color;
 35 |     text-decoration: none;
 36 |     &.loading {
 37 |       &::after {
 38 |         border-bottom-color: $light-color;
 39 |         border-left-color: $light-color;
 40 |       }
 41 |     }
 42 |   }
 43 |   &[disabled],
 44 |   &:disabled,
 45 |   &.disabled {
 46 |     cursor: default;
 47 |     opacity: .5;
 48 |     pointer-events: none;
 49 |   }
 50 | 
 51 |   // Button Primary
 52 |   &.btn-primary {
 53 |     background: $primary-color;
 54 |     border-color: $primary-color-dark;
 55 |     color: $light-color;
 56 |     &:focus,
 57 |     &:hover {
 58 |       background: darken($primary-color-dark, 2%);
 59 |       border-color: darken($primary-color-dark, 5%);
 60 |       color: $light-color;
 61 |     }
 62 |     &:active,
 63 |     &.active {
 64 |       background: darken($primary-color-dark, 4%);
 65 |       border-color: darken($primary-color-dark, 7%);
 66 |       color: $light-color;
 67 |     }
 68 |     &.loading {
 69 |       &::after {
 70 |         border-bottom-color: $light-color;
 71 |         border-left-color: $light-color;
 72 |       }
 73 |     }
 74 |   }
 75 | 
 76 |   // Button Colors
 77 |   &.btn-success {
 78 |     @include button-variant($success-color);
 79 |   }
 80 | 
 81 |   &.btn-error {
 82 |     @include button-variant($error-color);
 83 |   }
 84 | 
 85 |   // Button Link
 86 |   &.btn-link {
 87 |     background: transparent;
 88 |     border-color: transparent;
 89 |     color: $link-color;
 90 |     &:focus,
 91 |     &:hover,
 92 |     &:active,
 93 |     &.active {
 94 |       color: $link-color-dark;
 95 |     }
 96 |   }
 97 | 
 98 |   // Button Sizes
 99 |   &.btn-sm {
100 |     font-size: $font-size-sm;
101 |     height: $control-size-sm;
102 |     padding: $control-padding-y-sm $control-padding-x-sm;
103 |   }
104 | 
105 |   &.btn-lg {
106 |     font-size: $font-size-lg;
107 |     height: $control-size-lg;
108 |     padding: $control-padding-y-lg $control-padding-x-lg;
109 |   }
110 | 
111 |   // Button Block
112 |   &.btn-block {
113 |     display: block;
114 |     width: 100%;
115 |   }
116 | 
117 |   // Button Action
118 |   &.btn-action {
119 |     width: $control-size;
120 |     padding-left: 0;
121 |     padding-right: 0;
122 | 
123 |     &.btn-sm {
124 |       width: $control-size-sm;
125 |     }
126 | 
127 |     &.btn-lg {
128 |       width: $control-size-lg;
129 |     }
130 |   }
131 | 
132 |   // Button Clear
133 |   &.btn-clear {
134 |     background: transparent;
135 |     border: 0;
136 |     color: currentColor;
137 |     height: $unit-5;
138 |     line-height: $unit-4;
139 |     margin-left: $unit-1;
140 |     margin-right: -2px;
141 |     opacity: 1;
142 |     padding: $unit-h;
143 |     text-decoration: none;
144 |     width: $unit-5;
145 | 
146 |     &:focus,
147 |     &:hover {
148 |       background: rgba($bg-color, .5);
149 |       opacity: .95;
150 |     }
151 | 
152 |     &::before {
153 |       content: "\2715";
154 |     }
155 |   }
156 | }
157 | 
158 | // Button groups
159 | .btn-group {
160 |   display: inline-flex;
161 |   flex-wrap: wrap;
162 | 
163 |   .btn {
164 |     flex: 1 0 auto;
165 |     &:first-child:not(:last-child) {
166 |       border-bottom-right-radius: 0;
167 |       border-top-right-radius: 0;
168 |     }
169 |     &:not(:first-child):not(:last-child) {
170 |       border-radius: 0;
171 |       margin-left: -$border-width;
172 |     }
173 |     &:last-child:not(:first-child) {
174 |       border-bottom-left-radius: 0;
175 |       border-top-left-radius: 0;
176 |       margin-left: -$border-width;
177 |     }
178 |     &:focus,
179 |     &:hover,
180 |     &:active,
181 |     &.active {
182 |       z-index: $zindex-0;
183 |     }
184 |   }
185 | 
186 |   &.btn-group-block {
187 |     display: flex;
188 | 
189 |     .btn {
190 |       flex: 1 0 0;
191 |     }
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/src/_cards.scss:
--------------------------------------------------------------------------------
 1 | // Cards
 2 | .card {
 3 |   background: $bg-color-light;
 4 |   border: $border-width solid $border-color;
 5 |   border-radius: $border-radius;
 6 |   display: flex;
 7 |   flex-direction: column;
 8 | 
 9 |   .card-header,
10 |   .card-body,
11 |   .card-footer {
12 |     padding: $layout-spacing-lg;
13 |     padding-bottom: 0;
14 | 
15 |     &:last-child {
16 |       padding-bottom: $layout-spacing-lg;
17 |     }
18 |   }
19 | 
20 |   .card-body {
21 |     flex: 1 1 auto;
22 |   }
23 | 
24 |   .card-image {
25 |     padding-top: $layout-spacing-lg;
26 | 
27 |     &:first-child {
28 |       padding-top: 0;
29 | 
30 |       img {
31 |         border-top-left-radius: $border-radius;
32 |         border-top-right-radius: $border-radius;
33 |       }
34 |     }
35 | 
36 |     &:last-child {
37 |       img {
38 |         border-bottom-left-radius: $border-radius;
39 |         border-bottom-right-radius: $border-radius;
40 |       }
41 |     }
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/_carousels.scss:
--------------------------------------------------------------------------------
  1 | // Carousels
  2 | // The number of carousel images
  3 | $carousel-number: 8;
  4 | 
  5 | %carousel-image-checked { 
  6 |   animation: carousel-slidein .75s ease-in-out 1;
  7 |   opacity: 1;
  8 |   z-index: $zindex-1;
  9 | }
 10 | 
 11 | %carousel-nav-checked { 
 12 |   color: $gray-color-light;
 13 | }
 14 | 
 15 | .carousel {
 16 |   background: $bg-color;
 17 |   display: block;
 18 |   overflow: hidden;
 19 |   position: relative;
 20 |   width: 100%;
 21 |   -webkit-overflow-scrolling: touch;
 22 |   z-index: $zindex-0;
 23 | 
 24 |   .carousel-container {
 25 |     height: 100%;
 26 |     left: 0;
 27 |     position: relative;
 28 |     &::before {
 29 |       content: "";
 30 |       display: block;
 31 |       padding-bottom: 56.25%;
 32 |     }
 33 | 
 34 |     .carousel-item {
 35 |       animation: carousel-slideout 1s ease-in-out 1;
 36 |       height: 100%;
 37 |       left: 0;
 38 |       margin: 0;
 39 |       opacity: 0;
 40 |       position: absolute;
 41 |       top: 0;
 42 |       width: 100%;
 43 | 
 44 |       &:hover {
 45 |         .item-prev,
 46 |         .item-next {
 47 |           opacity: 1;
 48 |         }
 49 |       }
 50 |     }
 51 | 
 52 |     .item-prev,
 53 |     .item-next {
 54 |       background: rgba($gray-color-light, .25);
 55 |       border-color: rgba($gray-color-light, .5);
 56 |       color: $gray-color-light;
 57 |       opacity: 0;
 58 |       position: absolute;
 59 |       top: 50%;
 60 |       transition: all .4s;
 61 |       transform: translateY(-50%);
 62 |       z-index: $zindex-1;
 63 |     }
 64 |     .item-prev {
 65 |       left: 1rem;
 66 |     }
 67 |     .item-next {
 68 |       right: 1rem;
 69 |     }
 70 |   }
 71 | 
 72 |   .carousel-locator {
 73 |     @for $i from 1 through ($carousel-number) {
 74 |       &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
 75 |         @extend %carousel-image-checked;
 76 |       }
 77 |     }
 78 | 
 79 |     @for $i from 1 through ($carousel-number) {
 80 |       &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
 81 |         @extend %carousel-nav-checked;
 82 |       }
 83 |     }
 84 |   }
 85 | 
 86 |   .carousel-nav {
 87 |     bottom: $layout-spacing;
 88 |     display: flex;
 89 |     justify-content: center;
 90 |     left: 50%;
 91 |     position: absolute;
 92 |     transform: translateX(-50%);
 93 |     width: 10rem;
 94 |     z-index: $zindex-1;
 95 | 
 96 |     .nav-item {
 97 |       color: rgba($gray-color-light, .5);
 98 |       display: block;
 99 |       flex: 1 0 auto;
100 |       height: $unit-8;
101 |       margin: $unit-1;
102 |       max-width: 2.5rem;
103 |       position: relative;
104 | 
105 |       &::before {
106 |         background: currentColor;
107 |         content: "";
108 |         display: block;
109 |         height: $unit-h;
110 |         position: absolute;
111 |         top: .5rem;
112 |         width: 100%;
113 |       }
114 |     }
115 |   }
116 | }
117 | 
118 | @keyframes carousel-slidein {
119 |   0% {
120 |     transform: translateX(100%);
121 |   }
122 |   100% {
123 |     transform: translateX(0);
124 |   }
125 | }
126 | 
127 | @keyframes carousel-slideout {
128 |   0% {
129 |     opacity: 1;
130 |     transform: translateX(0);
131 |   }
132 |   100% {
133 |     opacity: 1;
134 |     transform: translateX(-50%);
135 |   }
136 | }
137 | 


--------------------------------------------------------------------------------
/src/_chips.scss:
--------------------------------------------------------------------------------
 1 | // Chips
 2 | .chip {
 3 |   align-items: center;
 4 |   background: $bg-color-dark;
 5 |   border-radius: 5rem;
 6 |   display: inline-flex;
 7 |   font-size: 90%;
 8 |   height: $unit-6;
 9 |   line-height: $unit-4;
10 |   margin: $unit-h;
11 |   max-width: $control-width-sm;
12 |   overflow: hidden;
13 |   padding: $unit-1 $unit-2;
14 |   text-decoration: none;
15 |   text-overflow: ellipsis;
16 |   vertical-align: middle;
17 |   white-space: nowrap;
18 | 
19 |   &.active {
20 |     background: $primary-color;
21 |     color: $light-color;
22 |   }
23 | 
24 |   .avatar {
25 |     margin-left: -$unit-2;
26 |     margin-right: $unit-1;
27 |   }
28 | 
29 |   .btn-clear {
30 |     border-radius: 50%;
31 |     transform: scale(.75);
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/_codes.scss:
--------------------------------------------------------------------------------
 1 | // Codes
 2 | code {
 3 |   @include label-base();
 4 |   @include label-variant($code-color, lighten($code-color, 42.5%));
 5 |   font-size: 85%;
 6 | }
 7 | 
 8 | .code {
 9 |   border-radius: $border-radius;
10 |   color: $body-font-color;
11 |   position: relative;
12 | 
13 |   &::before {
14 |     color: $gray-color;
15 |     content: attr(data-lang);
16 |     font-size: $font-size-sm;
17 |     position: absolute;
18 |     right: $layout-spacing;
19 |     top: $unit-h;
20 |   }
21 | 
22 |   code {
23 |     background: $bg-color;
24 |     color: inherit;
25 |     display: block;
26 |     line-height: 1.5;
27 |     overflow-x: auto;
28 |     padding: 1rem;
29 |     width: 100%;
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/_comparison-sliders.scss:
--------------------------------------------------------------------------------
  1 | // Image comparison slider
  2 | // Credit: http://codepen.io/solipsistacp/pen/Gpmaq
  3 | .comparison-slider {
  4 |   height: 50vh;
  5 |   overflow: hidden;
  6 |   position: relative;
  7 |   width: 100%;
  8 |   -webkit-overflow-scrolling: touch;
  9 | 
 10 |   .comparison-before,
 11 |   .comparison-after {
 12 |     height: 100%;
 13 |     left: 0;
 14 |     margin: 0;
 15 |     overflow: hidden;
 16 |     position: absolute;
 17 |     top: 0;
 18 | 
 19 |     img {
 20 |       height: 100%;
 21 |       object-fit: cover;
 22 |       object-position: left center;
 23 |       position: absolute;
 24 |       width: 100%;
 25 |     }
 26 |   }
 27 | 
 28 |   .comparison-before {
 29 |     width: 100%;
 30 |     z-index: 1;
 31 | 
 32 |     .comparison-label {
 33 |       right: $unit-4;
 34 |     }
 35 |   }
 36 | 
 37 |   .comparison-after {
 38 |     max-width: 100%;
 39 |     min-width: 0;
 40 |     z-index: 2;
 41 | 
 42 |     &::before {
 43 |       background: transparent;
 44 |       content: "";
 45 |       cursor: default;
 46 |       height: 100%;
 47 |       left: 0;
 48 |       position: absolute;
 49 |       right: $unit-4;
 50 |       top: 0;
 51 |       z-index: $zindex-0;
 52 |     }
 53 | 
 54 |     &::after {
 55 |       background: currentColor;
 56 |       border-radius: 50%;
 57 |       box-shadow: 0 -5px, 0 5px;
 58 |       color: $light-color;
 59 |       content: "";
 60 |       height: 3px;
 61 |       pointer-events: none;
 62 |       position: absolute;
 63 |       right: $unit-2;
 64 |       top: 50%;
 65 |       transform: translate(50%, -50%);
 66 |       width: 3px;
 67 |     }
 68 | 
 69 |     .comparison-label {
 70 |       left: $unit-4;
 71 |     }
 72 |   }
 73 | 
 74 |   .comparison-resizer {
 75 |     animation: first-run 1.5s 1 ease-in-out;
 76 |     cursor: ew-resize;
 77 |     height: $unit-4;
 78 |     left: 0;
 79 |     max-width: 100%;
 80 |     min-width: $unit-4;
 81 |     opacity: 0;
 82 |     outline: none;
 83 |     position: relative;
 84 |     resize: horizontal;
 85 |     top: 50%;
 86 |     transform: translateY(-50%) scaleY(30);
 87 |     width: 0;
 88 |   }
 89 | 
 90 |   .comparison-label {
 91 |     background: rgba($dark-color, .5);
 92 |     bottom: $unit-4;
 93 |     color: $light-color;
 94 |     padding: $unit-1 $unit-2;
 95 |     position: absolute;
 96 |     user-select: none;
 97 |   }
 98 | }
 99 | 
100 | @keyframes first-run {
101 |   0% {
102 |     width: 0;
103 |   }
104 |   25% {
105 |     width: $unit-12;
106 |   }
107 |   50% {
108 |     width: $unit-4;
109 |   }
110 |   75% {
111 |     width: $unit-6;
112 |   }
113 |   100% {
114 |     width: 0;
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/src/_dropdowns.scss:
--------------------------------------------------------------------------------
 1 | // Dropdown
 2 | .dropdown {
 3 |   display: inline-block;
 4 |   position: relative;
 5 | 
 6 |   .menu {
 7 |     animation: slide-down .15s ease 1;
 8 |     display: none;
 9 |     left: 0;
10 |     max-height: 50vh;
11 |     overflow-y: auto;
12 |     position: absolute;
13 |     top: 100%;
14 |   }
15 | 
16 |   &.dropdown-right {
17 |     .menu {
18 |       left: auto;
19 |       right: 0;
20 |     }
21 |   }
22 | 
23 |   &.active .menu,
24 |   .dropdown-toggle:focus + .menu,
25 |   .menu:hover {
26 |     display: block;
27 |   }
28 | 
29 |   // Fix dropdown-toggle border radius in button groups
30 |   .btn-group {
31 |     .dropdown-toggle:nth-last-child(2) {
32 |       border-bottom-right-radius: $border-radius;
33 |       border-top-right-radius: $border-radius;
34 |     }
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/_empty.scss:
--------------------------------------------------------------------------------
 1 | // Empty states (or Blank slates)
 2 | .empty {
 3 |   background: $bg-color;
 4 |   border-radius: $border-radius;
 5 |   color: $gray-color-dark;
 6 |   text-align: center;
 7 |   padding: $unit-16 $unit-8;
 8 | 
 9 |   .empty-icon {
10 |     margin-bottom: $layout-spacing-lg;
11 |   }
12 | 
13 |   .empty-title,
14 |   .empty-subtitle {
15 |     margin: $layout-spacing auto;
16 |   }
17 | 
18 |   .empty-action {
19 |     margin-top: $layout-spacing-lg;
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/_filters.scss:
--------------------------------------------------------------------------------
 1 | // Filters 
 2 | // The number of filter options 
 3 | $filter-number: 8 !default;
 4 | 
 5 | %filter-checked-nav { 
 6 |   background: $primary-color;
 7 |   color: $light-color;
 8 | }
 9 | 
10 | %filter-checked-body { 
11 |   display: none;
12 | }
13 | 
14 | .filter {
15 |   .filter-nav {
16 |     margin: $layout-spacing 0;
17 |   }
18 | 
19 |   .filter-body {
20 |     display: flex;
21 |     flex-wrap: wrap;
22 |   }
23 | 
24 |   .filter-tag {
25 |     @for $i from 0 through ($filter-number) {
26 |       &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
27 |         @extend %filter-checked-nav;
28 |       }
29 |     }
30 | 
31 |     @for $i from 1 through ($filter-number) {
32 |       &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
33 |         @extend %filter-checked-body;
34 |       }
35 |     }
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/_hero.scss:
--------------------------------------------------------------------------------
 1 | // Hero
 2 | .hero {
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   justify-content: space-between;
 6 |   padding-bottom: 4rem;
 7 |   padding-top: 4rem;
 8 | 
 9 |   &.hero-sm {
10 |     padding-bottom: 2rem;
11 |     padding-top: 2rem;
12 |   }
13 | 
14 |   &.hero-lg {
15 |     padding-bottom: 8rem;
16 |     padding-top: 8rem;
17 |   }
18 | 
19 |   .hero-body {
20 |     padding: $layout-spacing;
21 |   }
22 | }


--------------------------------------------------------------------------------
/src/_icons.scss:
--------------------------------------------------------------------------------
1 | // CSS Icons
2 | @import "icons/icons-core";
3 | @import "icons/icons-navigation";
4 | @import "icons/icons-action";
5 | @import "icons/icons-object";


--------------------------------------------------------------------------------
/src/_labels.scss:
--------------------------------------------------------------------------------
 1 | // Labels
 2 | .label {
 3 |   @include label-base();
 4 |   @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
 5 |   display: inline-block;
 6 | 
 7 |   // Label rounded
 8 |   &.label-rounded {
 9 |     border-radius: 5rem;
10 |     padding-left: .4rem;
11 |     padding-right: .4rem; 
12 |   }
13 | 
14 |   // Label colors
15 |   &.label-primary {
16 |     @include label-variant($light-color, $primary-color);
17 |   }
18 | 
19 |   &.label-secondary {
20 |     @include label-variant($primary-color, $secondary-color);
21 |   }
22 | 
23 |   &.label-success {
24 |     @include label-variant($light-color, $success-color);
25 |   }
26 | 
27 |   &.label-warning {
28 |     @include label-variant($light-color, $warning-color);
29 |   }
30 | 
31 |   &.label-error {
32 |     @include label-variant($light-color, $error-color);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/_media.scss:
--------------------------------------------------------------------------------
 1 | // Media
 2 | // Image responsive
 3 | .img-responsive {
 4 |   display: block;
 5 |   height: auto;
 6 |   max-width: 100%;
 7 | }
 8 | 
 9 | // object-fit support is coming to Microsoft Edge
10 | // https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
11 | .img-fit-cover {
12 |   object-fit: cover;
13 | }
14 | 
15 | .img-fit-contain {
16 |   object-fit: contain;
17 | }
18 | 
19 | // Video responsive
20 | .video-responsive {
21 |   display: block;
22 |   overflow: hidden;
23 |   padding: 0;
24 |   position: relative;
25 |   width: 100%;
26 |   &::before {
27 |     content: "";
28 |     display: block;
29 |     padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
30 |   }
31 | 
32 |   iframe,
33 |   object,
34 |   embed {
35 |     border: 0;
36 |     bottom: 0;
37 |     height: 100%;
38 |     left: 0;
39 |     position: absolute;
40 |     right: 0;
41 |     top: 0;
42 |     width: 100%;
43 |   }
44 | }
45 | 
46 | video.video-responsive {
47 |   height: auto;
48 |   max-width: 100%;
49 | 
50 |   &::before {
51 |     content: none;
52 |   }
53 | }
54 | 
55 | .video-responsive-4-3 {
56 |   &::before {
57 |     padding-bottom: 75%; // Ratio 4:3
58 |   }
59 | }
60 | 
61 | .video-responsive-1-1 {
62 |   &::before {
63 |     padding-bottom: 100%; // Ratio 1:1
64 |   }
65 | }
66 | 
67 | // Figure
68 | .figure {
69 |   margin: 0 0 $layout-spacing 0;
70 | 
71 |   .figure-caption {
72 |     color: $gray-color-dark;
73 |     margin-top: $layout-spacing;
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/_menus.scss:
--------------------------------------------------------------------------------
 1 | // Menus
 2 | .menu {
 3 |   @include shadow-variant(.05rem);
 4 |   background: $bg-color-light;
 5 |   border-radius: $border-radius;
 6 |   list-style: none;
 7 |   margin: 0;
 8 |   min-width: $control-width-xs;
 9 |   padding: $unit-2;
10 |   transform: translateY($layout-spacing-sm);
11 |   z-index: $zindex-3;
12 | 
13 |   &.menu-nav {
14 |     background: transparent;
15 |     box-shadow: none;
16 |   }
17 | 
18 |   .menu-item {
19 |     margin-top: 0;
20 |     padding: 0 $unit-2;
21 |     position: relative;
22 |     text-decoration: none;
23 | 
24 |     & > a {
25 |       border-radius: $border-radius;
26 |       color: inherit;
27 |       display: block;
28 |       margin: 0 (-$unit-2);
29 |       padding: $unit-1 $unit-2;
30 |       text-decoration: none;
31 |       &:focus,
32 |       &:hover {
33 |         background: $secondary-color;
34 |         color: $primary-color;
35 |       }
36 |       &:active,
37 |       &.active {
38 |         background: $secondary-color;
39 |         color: $primary-color;
40 |       }
41 |     }
42 | 
43 |     .form-checkbox,
44 |     .form-radio,
45 |     .form-switch {
46 |       margin: $unit-h 0;
47 |     }
48 | 
49 |     & + .menu-item {
50 |       margin-top: $unit-1;
51 |     }
52 |   }
53 | 
54 |   .menu-badge {
55 |     align-items: center;
56 |     display: flex;
57 |     height: 100%;
58 |     position: absolute;
59 |     right: 0;
60 |     top: 0;
61 | 
62 |     .label {
63 |       margin-right: $unit-2;
64 |     }
65 |   }
66 | }


--------------------------------------------------------------------------------
/src/_meters.scss:
--------------------------------------------------------------------------------
 1 | // Meters
 2 | // Credit: https://css-tricks.com/html5-meter-element/
 3 | .meter {
 4 |   appearance: none;
 5 |   background: $bg-color;
 6 |   border: 0;
 7 |   border-radius: $border-radius;
 8 |   display: block;
 9 |   width: 100%;
10 |   height: $unit-4;
11 | 
12 |   &::-webkit-meter-inner-element {
13 |     display: block;
14 |   }
15 | 
16 |   &::-webkit-meter-bar,
17 |   &::-webkit-meter-optimum-value,
18 |   &::-webkit-meter-suboptimum-value,
19 |   &::-webkit-meter-even-less-good-value {
20 |     border-radius: $border-radius;
21 |   }
22 | 
23 |   &::-webkit-meter-bar {
24 |     background: $bg-color;
25 |   }
26 | 
27 |   &::-webkit-meter-optimum-value {
28 |     background: $success-color;
29 |   }
30 | 
31 |   &::-webkit-meter-suboptimum-value {
32 |     background: $warning-color;
33 |   }
34 | 
35 |   &::-webkit-meter-even-less-good-value {
36 |     background: $error-color;
37 |   }
38 | 
39 |   &::-moz-meter-bar,
40 |   &:-moz-meter-optimum,
41 |   &:-moz-meter-sub-optimum,
42 |   &:-moz-meter-sub-sub-optimum {
43 |     border-radius: $border-radius;
44 |   }
45 | 
46 |   &:-moz-meter-optimum::-moz-meter-bar {
47 |     background: $success-color;
48 |   }
49 | 
50 |   &:-moz-meter-sub-optimum::-moz-meter-bar {
51 |     background: $warning-color;
52 |   }
53 | 
54 |   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
55 |     background: $error-color;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // Mixins
 2 | @import "mixins/avatar";
 3 | @import "mixins/button";
 4 | @import "mixins/clearfix";
 5 | @import "mixins/color";
 6 | @import "mixins/label";
 7 | @import "mixins/position";
 8 | @import "mixins/shadow";
 9 | @import "mixins/text";
10 | @import "mixins/toast";


--------------------------------------------------------------------------------
/src/_modals.scss:
--------------------------------------------------------------------------------
 1 | // Modals
 2 | .modal {
 3 |   align-items: center;
 4 |   bottom: 0;
 5 |   display: none;
 6 |   justify-content: center;
 7 |   left: 0;
 8 |   opacity: 0;
 9 |   overflow: hidden;
10 |   padding: $layout-spacing;
11 |   position: fixed;
12 |   right: 0;
13 |   top: 0;
14 | 
15 |   &:target,
16 |   &.active {
17 |     display: flex;
18 |     opacity: 1;
19 |     z-index: $zindex-4;
20 | 
21 |     .modal-overlay {
22 |       background: rgba($bg-color, .75);
23 |       bottom: 0;
24 |       cursor: default;
25 |       display: block;
26 |       left: 0;
27 |       position: absolute;
28 |       right: 0;
29 |       top: 0;
30 |     }
31 | 
32 |     .modal-container {
33 |       animation: slide-down .2s ease 1;
34 |       z-index: $zindex-0;
35 |     }
36 |   }
37 | 
38 |   &.modal-sm {
39 |     .modal-container {
40 |       max-width: $control-width-sm;
41 |       padding: 0 $unit-2;
42 |     }
43 |   }
44 | 
45 |   &.modal-lg {
46 |     .modal-overlay {
47 |       background: $bg-color-light;
48 |     }
49 | 
50 |     .modal-container {
51 |       box-shadow: none;
52 |       max-width: $control-width-lg;
53 |     }
54 |   }
55 | }
56 | 
57 | .modal-container {
58 |   @include shadow-variant(.2rem);
59 |   background: $bg-color-light;
60 |   border-radius: $border-radius;
61 |   display: flex;
62 |   flex-direction: column;
63 |   max-height: 75vh;
64 |   max-width: $control-width-md;
65 |   padding: 0 $unit-4;
66 |   width: 100%;
67 | 
68 |   &.modal-fullheight {
69 |     max-height: 100vh;
70 |   }
71 | 
72 |   .modal-header {
73 |     color: $dark-color;
74 |     padding: $unit-4;
75 |   }
76 | 
77 |   .modal-body {
78 |     overflow-y: auto;
79 |     padding: $unit-4;
80 |     position: relative;
81 |   }
82 | 
83 |   .modal-footer {
84 |     padding: $unit-4;
85 |     text-align: right;
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/src/_navbar.scss:
--------------------------------------------------------------------------------
 1 | // Navbar
 2 | .navbar {
 3 |   align-items: stretch;
 4 |   display: flex;
 5 |   flex-wrap: wrap;
 6 |   justify-content: space-between;
 7 | 
 8 |   .navbar-section {
 9 |     align-items: center;
10 |     display: flex;
11 |     flex: 1 0 0;
12 | 
13 |     &:not(:first-child):last-child {
14 |       justify-content: flex-end;
15 |     }
16 |   }
17 | 
18 |   .navbar-center {
19 |     align-items: center;
20 |     display: flex;
21 |     flex: 0 0 auto;
22 |   }
23 | 
24 |   .navbar-brand {
25 |     font-size: $font-size-lg;
26 |     text-decoration: none;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/_navs.scss:
--------------------------------------------------------------------------------
 1 | // Navs
 2 | .nav {
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   list-style: none;
 6 |   margin: $unit-1 0;
 7 | 
 8 |   .nav-item {
 9 |     a {
10 |       color: $gray-color-dark;
11 |       padding: $unit-1 $unit-2;
12 |       text-decoration: none;
13 |       &:focus,
14 |       &:hover {
15 |         color: $primary-color;
16 |       }
17 |     }
18 |     &.active {
19 |       & > a {
20 |         color: darken($gray-color-dark, 10%);
21 |         font-weight: bold;
22 |         &:focus,
23 |         &:hover {
24 |           color: $primary-color;
25 |         }
26 |       }
27 |     }
28 |   }
29 | 
30 |   & .nav {
31 |     margin-bottom: $unit-2;
32 |     margin-left: $unit-4;
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/_off-canvas.scss:
--------------------------------------------------------------------------------
 1 | // Off canvas menus
 2 | $off-canvas-breakpoint: $size-lg !default;
 3 | 
 4 | .off-canvas {
 5 |   display: flex;
 6 |   flex-flow: nowrap;
 7 |   height: 100%;
 8 |   position: relative;
 9 |   width: 100%;
10 | 
11 |   .off-canvas-toggle {
12 |     display: block;
13 |     position: absolute;
14 |     top: $layout-spacing;
15 |     transition: none;
16 |     z-index: $zindex-0;
17 |     @if $rtl == true {
18 |       right: $layout-spacing;
19 |     } @else {
20 |       left: $layout-spacing;
21 |     }
22 |   }
23 | 
24 |   .off-canvas-sidebar {
25 |     background: $bg-color;
26 |     bottom: 0;
27 |     min-width: 10rem;
28 |     overflow-y: auto;
29 |     position: fixed;
30 |     top: 0;
31 |     transition: transform .25s;
32 |     z-index: $zindex-2;
33 |     @if $rtl == true {
34 |       right: 0;
35 |       transform: translateX(100%);
36 |     } @else {
37 |       left: 0;
38 |       transform: translateX(-100%);
39 |     }
40 |   }
41 | 
42 |   .off-canvas-content {
43 |     flex: 1 1 auto;
44 |     height: 100%;
45 |     padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
46 |   }
47 | 
48 |   .off-canvas-overlay {
49 |     background: rgba($dark-color, .1);
50 |     border-color: transparent;
51 |     border-radius: 0;
52 |     bottom: 0;
53 |     display: none;
54 |     height: 100%;
55 |     left: 0;
56 |     position: fixed;
57 |     right: 0;
58 |     top: 0;
59 |     width: 100%;
60 |   }
61 | 
62 |   .off-canvas-sidebar {
63 |     &:target,
64 |     &.active {
65 |       transform: translateX(0);
66 |     }
67 | 
68 |     &:target ~ .off-canvas-overlay,
69 |     &.active ~ .off-canvas-overlay {
70 |       display: block;
71 |       z-index: $zindex-1;
72 |     }
73 |   }
74 | }
75 | 
76 | // Responsive layout
77 | @media (min-width: $off-canvas-breakpoint) {
78 |   .off-canvas {
79 |     &.off-canvas-sidebar-show {
80 |       .off-canvas-toggle {
81 |         display: none;
82 |       }
83 |   
84 |       .off-canvas-sidebar {
85 |         flex: 0 0 auto;
86 |         position: relative;
87 |         transform: none;
88 |       }
89 | 
90 |       .off-canvas-overlay {
91 |         display: none !important;
92 |       }
93 |     }
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/src/_pagination.scss:
--------------------------------------------------------------------------------
 1 | // Pagination
 2 | .pagination {
 3 |   display: flex;
 4 |   list-style: none;
 5 |   margin: $unit-1 0;
 6 |   padding: $unit-1 0;
 7 | 
 8 |   .page-item {
 9 |     margin: $unit-1 $unit-o;
10 | 
11 |     span {
12 |       display: inline-block;
13 |       padding: $unit-1 $unit-1;
14 |     }
15 | 
16 |     a {
17 |       border-radius: $border-radius;
18 |       display: inline-block;
19 |       padding: $unit-1 $unit-2;
20 |       text-decoration: none;
21 |       &:focus,
22 |       &:hover {
23 |         color: $primary-color;
24 |       }
25 |     }
26 | 
27 |     &.disabled {
28 |       a {
29 |         cursor: default;
30 |         opacity: .5;
31 |         pointer-events: none;
32 |       }
33 |     }
34 | 
35 |     &.active {
36 |       a {
37 |         background: $primary-color;
38 |         color: $light-color;
39 |       }
40 |     }
41 | 
42 |     &.page-prev,
43 |     &.page-next {
44 |       flex: 1 0 50%;
45 |     }
46 | 
47 |     &.page-next {
48 |       text-align: right;
49 |     }
50 | 
51 |     .page-item-title {
52 |       margin: 0;
53 |     }
54 | 
55 |     .page-item-subtitle {
56 |       margin: 0;
57 |       opacity: .5;
58 |     }
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/_panels.scss:
--------------------------------------------------------------------------------
 1 | // Panels
 2 | .panel {
 3 |   border: $border-width solid $border-color;
 4 |   border-radius: $border-radius;
 5 |   display: flex;
 6 |   flex-direction: column;
 7 | 
 8 |   .panel-header,
 9 |   .panel-footer {
10 |     flex: 0 0 auto;
11 |     padding: $layout-spacing-lg;
12 |   }
13 | 
14 |   .panel-nav {
15 |     flex: 0 0 auto;
16 |   }
17 | 
18 |   .panel-body {
19 |     flex: 1 1 auto;
20 |     overflow-y: auto;
21 |     padding: 0 $layout-spacing-lg;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/_parallax.scss:
--------------------------------------------------------------------------------
  1 | // Parallax
  2 | $parallax-deg: 3deg !default;
  3 | $parallax-offset: 4.5px !default;
  4 | $parallax-offset-z: 50px !default;
  5 | $parallax-perspective: 1000px !default;
  6 | $parallax-scale: .95 !default;
  7 | $parallax-fade-color: rgba(255, 255, 255, .35) !default;
  8 | 
  9 | // Mixin: Parallax direction
 10 | @mixin parallax-dir() {
 11 |   height: 50%;
 12 |   outline: none;
 13 |   position: absolute;
 14 |   width: 50%;
 15 |   z-index: $zindex-1;
 16 | }
 17 | 
 18 | .parallax {
 19 |   display: block;
 20 |   height: auto;
 21 |   position: relative;
 22 |   width: auto;
 23 | 
 24 |   .parallax-content {
 25 |     @include shadow-variant(1rem);
 26 |     height: auto;
 27 |     transform: perspective($parallax-perspective);
 28 |     transform-style: preserve-3d;
 29 |     transition: all .4s ease;
 30 |     width: 100%;
 31 | 
 32 |     &::before {
 33 |       content: "";
 34 |       display: block;
 35 |       height: 100%;
 36 |       left: 0;
 37 |       position: absolute;
 38 |       top: 0;
 39 |       width: 100%;
 40 |     }
 41 |   }
 42 | 
 43 |   .parallax-front {
 44 |     align-items: center;
 45 |     color: $light-color;
 46 |     display: flex;
 47 |     height: 100%;
 48 |     justify-content: center;
 49 |     left: 0;
 50 |     position: absolute;
 51 |     text-align: center;
 52 |     text-shadow: 0 0 20px rgba($dark-color, .75);
 53 |     top: 0;
 54 |     transform: translateZ($parallax-offset-z) scale($parallax-scale);
 55 |     transition: transform .4s;
 56 |     width: 100%;
 57 |     z-index: $zindex-0;
 58 |   }
 59 | 
 60 |   .parallax-top-left {
 61 |     @include parallax-dir();
 62 |     left: 0;
 63 |     top: 0;
 64 | 
 65 |     &:focus ~ .parallax-content,
 66 |     &:hover ~ .parallax-content {
 67 |       transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
 68 | 
 69 |       &::before {
 70 |         background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
 71 |       }
 72 | 
 73 |       .parallax-front {
 74 |         transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
 75 |       }
 76 |     }
 77 |   }
 78 | 
 79 |   .parallax-top-right {
 80 |     @include parallax-dir();
 81 |     right: 0;
 82 |     top: 0;
 83 | 
 84 |     &:focus ~ .parallax-content,
 85 |     &:hover ~ .parallax-content {
 86 |       transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
 87 | 
 88 |       &::before {
 89 |         background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
 90 |       }
 91 | 
 92 |       .parallax-front {
 93 |         transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
 94 |       }
 95 |     }
 96 |   }
 97 | 
 98 |   .parallax-bottom-left {
 99 |     @include parallax-dir();
100 |     bottom: 0;
101 |     left: 0;
102 | 
103 |     &:focus ~ .parallax-content,
104 |     &:hover ~ .parallax-content {
105 |       transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
106 | 
107 |       &::before {
108 |         background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
109 |       }
110 | 
111 |       .parallax-front {
112 |         transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
113 |       }
114 |     }
115 |   }
116 | 
117 |   .parallax-bottom-right {
118 |     @include parallax-dir();
119 |     bottom: 0;
120 |     right: 0;
121 | 
122 |     &:focus ~ .parallax-content,
123 |     &:hover ~ .parallax-content {
124 |       transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
125 | 
126 |       &::before {
127 |         background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
128 |       }
129 | 
130 |       .parallax-front {
131 |         transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
132 |       }
133 |     }
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/_popovers.scss:
--------------------------------------------------------------------------------
 1 | // Popovers
 2 | .popover {
 3 |   display: inline-block;
 4 |   position: relative;
 5 | 
 6 |   .popover-container {
 7 |     left: 50%;
 8 |     opacity: 0;
 9 |     padding: $layout-spacing;
10 |     position: absolute;
11 |     top: 0;
12 |     transform: translate(-50%, -50%) scale(0);
13 |     transition: transform .2s;
14 |     width: $control-width-sm;
15 |     z-index: $zindex-3;
16 |   }
17 | 
18 |   *:focus + .popover-container,
19 |   &:hover .popover-container {
20 |     display: block;
21 |     opacity: 1;
22 |     transform: translate(-50%, -100%) scale(1);
23 |   }
24 | 
25 |   &.popover-right {
26 |     .popover-container {
27 |       left: 100%;
28 |       top: 50%;
29 |     }
30 | 
31 |     *:focus + .popover-container,
32 |     &:hover .popover-container {
33 |       transform: translate(0, -50%) scale(1);
34 |     }
35 |   }
36 | 
37 |   &.popover-bottom {
38 |     .popover-container {
39 |       left: 50%;
40 |       top: 100%;
41 |     }
42 | 
43 |     *:focus + .popover-container,
44 |     &:hover .popover-container {
45 |       transform: translate(-50%, 0) scale(1);
46 |     }
47 |   }
48 | 
49 |   &.popover-left {
50 |     .popover-container {
51 |       left: 0;
52 |       top: 50%;
53 |     }
54 | 
55 |     *:focus + .popover-container,
56 |     &:hover .popover-container {
57 |       transform: translate(-100%, -50%) scale(1);
58 |     }
59 |   }
60 | 
61 |   .card {
62 |     @include shadow-variant(.2rem);
63 |     border: 0;
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/_progress.scss:
--------------------------------------------------------------------------------
 1 | // Progress
 2 | // Credit: https://css-tricks.com/html5-progress-element/
 3 | .progress {
 4 |   appearance: none;
 5 |   background: $bg-color-dark;
 6 |   border: 0;
 7 |   border-radius: $border-radius;
 8 |   color: $primary-color;
 9 |   height: $unit-1;
10 |   position: relative;
11 |   width: 100%;
12 | 
13 |   &::-webkit-progress-bar {
14 |     background: transparent;
15 |     border-radius: $border-radius;
16 |   }
17 | 
18 |   &::-webkit-progress-value {
19 |     background: $primary-color;
20 |     border-radius: $border-radius;
21 |   }
22 | 
23 |   &::-moz-progress-bar {
24 |     background: $primary-color;
25 |     border-radius: $border-radius;
26 |   }
27 | 
28 |   &:indeterminate {
29 |     animation: progress-indeterminate 1.5s linear infinite;
30 |     background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
31 | 
32 |     &::-moz-progress-bar {
33 |       background: transparent;
34 |     }
35 |   }
36 | }
37 | 
38 | @keyframes progress-indeterminate {
39 |   0% {
40 |     background-position: 200% 0;
41 |   }
42 |   100% {
43 |     background-position: -200% 0;
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/_sliders.scss:
--------------------------------------------------------------------------------
  1 | // Sliders
  2 | // Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
  3 | .slider {
  4 |   appearance: none;
  5 |   background: transparent;
  6 |   display: block;
  7 |   width: 100%;
  8 |   height: $unit-6;
  9 | 
 10 |   &:focus {
 11 |     @include control-shadow();
 12 |     outline: none;
 13 |   }
 14 | 
 15 |   &.tooltip:not([data-tooltip]) {
 16 |     &::after {
 17 |       content: attr(value);
 18 |     }
 19 |   }
 20 | 
 21 |   // Slider Thumb
 22 |   &::-webkit-slider-thumb {
 23 |     -webkit-appearance: none;
 24 |     background: $primary-color;
 25 |     border: 0;
 26 |     border-radius: 50%;
 27 |     height: $unit-3;
 28 |     margin-top: -($unit-3 - $unit-h) / 2;
 29 |     transition: transform .2s;
 30 |     width: $unit-3;
 31 |   }
 32 |   &::-moz-range-thumb {
 33 |     background: $primary-color;
 34 |     border: 0;
 35 |     border-radius: 50%;
 36 |     height: $unit-3;
 37 |     transition: transform .2s;
 38 |     width: $unit-3;
 39 |   }
 40 |   &::-ms-thumb {
 41 |     background: $primary-color;
 42 |     border: 0;
 43 |     border-radius: 50%;
 44 |     height: $unit-3;
 45 |     transition: transform .2s;
 46 |     width: $unit-3;
 47 |   }
 48 | 
 49 |   &:active {
 50 |     &::-webkit-slider-thumb {
 51 |       transform: scale(1.25);
 52 |     }
 53 |     &::-moz-range-thumb {
 54 |       transform: scale(1.25);
 55 |     }
 56 |     &::-ms-thumb {
 57 |       transform: scale(1.25);
 58 |     }
 59 |   }
 60 | 
 61 |   &:disabled,
 62 |   &.disabled {
 63 |     &::-webkit-slider-thumb {
 64 |       background: $gray-color-light;
 65 |       transform: scale(1);
 66 |     }
 67 |     &::-moz-range-thumb {
 68 |       background: $gray-color-light;
 69 |       transform: scale(1);
 70 |     }
 71 |     &::-ms-thumb {
 72 |       background: $gray-color-light;
 73 |       transform: scale(1);
 74 |     }
 75 |   }
 76 | 
 77 |   // Slider Track
 78 |   &::-webkit-slider-runnable-track {
 79 |     background: $bg-color-dark;
 80 |     border-radius: $border-radius;
 81 |     height: $unit-h;
 82 |     width: 100%;
 83 |   }
 84 |   &::-moz-range-track {
 85 |     background: $bg-color-dark;
 86 |     border-radius: $border-radius;
 87 |     height: $unit-h;
 88 |     width: 100%;
 89 |   }
 90 |   &::-ms-track {
 91 |     background: $bg-color-dark;
 92 |     border-radius: $border-radius;
 93 |     height: $unit-h;
 94 |     width: 100%;
 95 |   }
 96 |   &::-ms-fill-lower {
 97 |     background: $primary-color;
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/_steps.scss:
--------------------------------------------------------------------------------
 1 | // Steps
 2 | .step {
 3 |   display: flex;
 4 |   flex-wrap: nowrap;
 5 |   list-style: none;
 6 |   margin: $unit-1 0;
 7 |   width: 100%;
 8 | 
 9 |   .step-item {
10 |     flex: 1 1 0;
11 |     margin-top: 0;
12 |     min-height: 1rem;
13 |     text-align: center;
14 |     position: relative;
15 | 
16 |     &:not(:first-child)::before {
17 |       background: $primary-color;
18 |       content: "";
19 |       height: 2px;
20 |       left: -50%;
21 |       position: absolute;
22 |       top: 9px;
23 |       width: 100%;
24 |     }
25 | 
26 |     a {
27 |       color: $primary-color;
28 |       display: inline-block;
29 |       padding: 20px 10px 0;
30 |       text-decoration: none;
31 | 
32 |       &::before {
33 |         background: $primary-color;
34 |         border: $border-width-lg solid $light-color;
35 |         border-radius: 50%;
36 |         content: "";
37 |         display: block;
38 |         height: $unit-3;
39 |         left: 50%;
40 |         position: absolute;
41 |         top: $unit-1;
42 |         transform: translateX(-50%);
43 |         width: $unit-3;
44 |         z-index: $zindex-0;
45 |       }
46 |     }
47 | 
48 |     &.active {
49 |       a {
50 |         &::before {
51 |           background: $light-color;
52 |           border: $border-width-lg solid $primary-color;
53 |         }
54 |       }
55 | 
56 |       & ~ .step-item {
57 |         &::before {
58 |           background: $border-color;
59 |         }
60 | 
61 |         a {
62 |           color: $gray-color;
63 | 
64 |           &::before {
65 |             background: $border-color;
66 |           }
67 |         }
68 |       }
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/_tables.scss:
--------------------------------------------------------------------------------
 1 | // Tables
 2 | .table {
 3 |   border-collapse: collapse;
 4 |   border-spacing: 0;
 5 |   width: 100%;
 6 |   @if $rtl == true {
 7 |     text-align: right;
 8 |   } @else {
 9 |     text-align: left;
10 |   }
11 | 
12 |   &.table-striped {
13 |     tbody {
14 |       tr:nth-of-type(odd) {
15 |         background: $bg-color;
16 |       }
17 |     }
18 |   }
19 | 
20 |   &,
21 |   &.table-striped {
22 |     tbody {
23 |       tr {
24 |         &.active {
25 |           background: $bg-color-dark;
26 |         }
27 |       }
28 |     }
29 |   }
30 | 
31 |   &.table-hover {
32 |     tbody {
33 |       tr {
34 |         &:hover {
35 |           background: $bg-color-dark;
36 |         }
37 |       }
38 |     }
39 |   }
40 | 
41 |   // Scollable tables
42 |   &.table-scroll {
43 |     display: block;
44 |     overflow-x: auto;
45 |     padding-bottom: .75rem;
46 |     white-space: nowrap;
47 |   }
48 | 
49 |   td,
50 |   th {
51 |     border-bottom: $border-width solid $border-color;
52 |     padding: $unit-3 $unit-2;
53 |   }
54 |   th {
55 |     border-bottom-width: $border-width-lg;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/_tabs.scss:
--------------------------------------------------------------------------------
 1 | // Tabs
 2 | .tab {
 3 |   align-items: center;
 4 |   border-bottom: $border-width solid $border-color;
 5 |   display: flex;
 6 |   flex-wrap: wrap;
 7 |   list-style: none;
 8 |   margin: $unit-1 0 ($unit-1 - $border-width) 0;
 9 | 
10 |   .tab-item {
11 |     margin-top: 0;
12 | 
13 |     a {
14 |       border-bottom: $border-width-lg solid transparent;
15 |       color: inherit;
16 |       display: block;
17 |       margin: 0 $unit-2 0 0;
18 |       padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
19 |       text-decoration: none;
20 |       &:focus,
21 |       &:hover {
22 |         color: $link-color;
23 |       }
24 |     }
25 |     &.active a,
26 |     a.active {
27 |       border-bottom-color: $primary-color;
28 |       color: $link-color;
29 |     }
30 | 
31 |     &.tab-action {
32 |       flex: 1 0 auto;
33 |       text-align: right;
34 |     }
35 | 
36 |     .btn-clear {
37 |       margin-top: -$unit-1;
38 |     }
39 |   }
40 | 
41 |   &.tab-block {
42 |     .tab-item {
43 |       flex: 1 0 0;
44 |       text-align: center;
45 | 
46 |       a {
47 |         margin: 0;
48 |       }
49 | 
50 |       .badge {
51 |         &[data-badge]::after {
52 |           position: absolute;
53 |           right: $unit-h;
54 |           top: $unit-h;
55 |           transform: translate(0, 0);
56 |         }
57 |       }
58 |     }
59 |   }
60 | 
61 |   &:not(.tab-block) {
62 |     .badge {
63 |       padding-right: 0;
64 |     }
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/_tiles.scss:
--------------------------------------------------------------------------------
 1 | // Tiles
 2 | .tile {
 3 |   align-content: space-between;
 4 |   align-items: flex-start;
 5 |   display: flex;
 6 | 
 7 |   .tile-icon,
 8 |   .tile-action {
 9 |     flex: 0 0 auto;
10 |   }
11 |   .tile-content {
12 |     flex: 1 1 auto;
13 |     &:not(:first-child) {
14 |       padding-left: $unit-2;
15 |     }
16 |     &:not(:last-child) {
17 |       padding-right: $unit-2;
18 |     }
19 |   }
20 |   .tile-title,
21 |   .tile-subtitle {
22 |     line-height: $line-height;
23 |   }
24 | 
25 |   &.tile-centered {
26 |     align-items: center;
27 | 
28 |     .tile-content {
29 |       overflow: hidden;
30 |     }
31 | 
32 |     .tile-title,
33 |     .tile-subtitle {
34 |       @include text-ellipsis();
35 |       margin-bottom: 0;
36 |     }
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/_timelines.scss:
--------------------------------------------------------------------------------
 1 | // Timelines
 2 | .timeline {
 3 |   .timeline-item {
 4 |     display: flex;
 5 |     margin-bottom: $unit-6;
 6 |     position: relative;
 7 |     &::before {
 8 |       background: $border-color;
 9 |       content: "";
10 |       height: 100%;
11 |       left: 11px;
12 |       position: absolute;
13 |       top: $unit-6;
14 |       width: 2px;
15 |     }
16 | 
17 |     .timeline-left {
18 |       flex: 0 0 auto;
19 |     }
20 | 
21 |     .timeline-content {
22 |       flex: 1 1 auto;
23 |       padding: 2px 0 2px $layout-spacing-lg;
24 |     }
25 | 
26 |     .timeline-icon {
27 |       align-items: center;
28 |       border-radius: 50%;
29 |       color: $light-color;
30 |       display: flex;
31 |       height: $unit-6;
32 |       justify-content: center;
33 |       text-align: center;
34 |       width: $unit-6;
35 |       &::before {
36 |         border: $border-width-lg solid $primary-color;
37 |         border-radius: 50%;
38 |         content: "";
39 |         display: block;
40 |         height: $unit-2;
41 |         left: $unit-2;
42 |         position: absolute;
43 |         top: $unit-2;
44 |         width: $unit-2;
45 |       }
46 | 
47 |       &.icon-lg {
48 |         background: $primary-color;
49 |         line-height: $line-height;
50 |         &::before {
51 |           content: none;
52 |         }
53 |       }
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/_toasts.scss:
--------------------------------------------------------------------------------
 1 | // Toasts
 2 | .toast {
 3 |   @include toast-variant($dark-color);
 4 |   border: $border-width solid $dark-color;
 5 |   border-radius: $border-radius;
 6 |   color: $light-color;
 7 |   display: block;
 8 |   padding: $layout-spacing;
 9 |   width: 100%;
10 | 
11 |   &.toast-primary {
12 |     @include toast-variant($primary-color);
13 |   }
14 | 
15 |   &.toast-success {
16 |     @include toast-variant($success-color);
17 |   }
18 | 
19 |   &.toast-warning {
20 |     @include toast-variant($warning-color);
21 |   }
22 | 
23 |   &.toast-error {
24 |     @include toast-variant($error-color);
25 |   }
26 | 
27 |   a {
28 |     color: $light-color;
29 |     text-decoration: underline;
30 |     
31 |     &:focus,
32 |     &:hover,
33 |     &:active,
34 |     &.active {
35 |       opacity: .75;
36 |     }
37 |   }
38 | 
39 |   .btn-clear {
40 |     margin: $unit-h;
41 |   }
42 | 
43 |   p {
44 |     &:last-child {
45 |       margin-bottom: 0;
46 |     }
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/_tooltips.scss:
--------------------------------------------------------------------------------
 1 | // Tooltips
 2 | .tooltip {
 3 |   position: relative;
 4 |   &::after {
 5 |     background: rgba($dark-color, .95);
 6 |     border-radius: $border-radius;
 7 |     bottom: 100%;
 8 |     color: $light-color;
 9 |     content: attr(data-tooltip);
10 |     display: block;
11 |     font-size: $font-size-sm;
12 |     left: 50%;
13 |     max-width: $control-width-sm;
14 |     opacity: 0;
15 |     overflow: hidden;
16 |     padding: $unit-1 $unit-2;
17 |     pointer-events: none;
18 |     position: absolute;
19 |     text-overflow: ellipsis;
20 |     transform: translate(-50%, $unit-2);
21 |     transition: opacity .2s, transform .2s;
22 |     white-space: pre;
23 |     z-index: $zindex-3;
24 |   }
25 |   &:focus,
26 |   &:hover {
27 |     &::after {
28 |       opacity: 1;
29 |       transform: translate(-50%, -$unit-1);
30 |     }
31 |   }
32 |   &[disabled],
33 |   &.disabled {
34 |     pointer-events: auto;
35 |   }
36 | 
37 |   &.tooltip-right {
38 |     &::after {
39 |       bottom: 50%;
40 |       left: 100%;
41 |       transform: translate(-$unit-1, 50%);
42 |     }
43 |     &:focus,
44 |     &:hover {
45 |       &::after {
46 |         transform: translate($unit-1, 50%);
47 |       }
48 |     }
49 |   }
50 | 
51 |   &.tooltip-bottom {
52 |     &::after {
53 |       bottom: auto;
54 |       top: 100%;
55 |       transform: translate(-50%, -$unit-2);
56 |     }
57 |     &:focus,
58 |     &:hover {
59 |       &::after {
60 |         transform: translate(-50%, $unit-1);
61 |       }
62 |     }
63 |   }
64 |   
65 |   &.tooltip-left {
66 |     &::after {
67 |       bottom: 50%;
68 |       left: auto;
69 |       right: 100%;
70 |       transform: translate($unit-2, 50%);
71 |     }
72 |     &:focus,
73 |     &:hover {
74 |       &::after {
75 |         transform: translate(-$unit-1, 50%);
76 |       }
77 |     }
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/_typography.scss:
--------------------------------------------------------------------------------
  1 | // Typography
  2 | // Headings
  3 | h1,
  4 | h2,
  5 | h3,
  6 | h4,
  7 | h5,
  8 | h6 {
  9 |   color: inherit;
 10 |   font-weight: 500;
 11 |   line-height: 1.2;
 12 |   margin-bottom: .5em;
 13 |   margin-top: 0;
 14 | }
 15 | .h1,
 16 | .h2,
 17 | .h3,
 18 | .h4,
 19 | .h5,
 20 | .h6 {
 21 |   font-weight: 500;
 22 | }
 23 | h1,
 24 | .h1 {
 25 |   font-size: 2rem;
 26 | }
 27 | h2,
 28 | .h2 {
 29 |   font-size: 1.6rem;
 30 | }
 31 | h3,
 32 | .h3 {
 33 |   font-size: 1.4rem;
 34 | }
 35 | h4,
 36 | .h4 {
 37 |   font-size: 1.2rem;
 38 | }
 39 | h5,
 40 | .h5 {
 41 |   font-size: 1rem;
 42 | }
 43 | h6,
 44 | .h6 {
 45 |   font-size: .8rem;
 46 | }
 47 | 
 48 | // Paragraphs
 49 | p {
 50 |   margin: 0 0 $line-height;
 51 | }
 52 | 
 53 | // Semantic text elements
 54 | a,
 55 | ins,
 56 | u {
 57 |   text-decoration-skip: ink edges;
 58 | }
 59 | 
 60 | abbr[title] {
 61 |   border-bottom: $border-width dotted;
 62 |   cursor: help;
 63 |   text-decoration: none;
 64 | }
 65 | 
 66 | kbd {
 67 |   @include label-base();
 68 |   @include label-variant($light-color, $dark-color);
 69 |   font-size: $font-size-sm;
 70 | }
 71 | 
 72 | mark {
 73 |   @include label-variant($body-font-color, $highlight-color);
 74 |   border-bottom: $unit-o solid darken($highlight-color, 15%);
 75 |   border-radius: $border-radius;
 76 |   padding: $unit-o $unit-h 0;
 77 | }
 78 | 
 79 | // Blockquote
 80 | blockquote {
 81 |   border-left: $border-width-lg solid $border-color;
 82 |   margin-left: 0;
 83 |   padding: $unit-2 $unit-4;
 84 | 
 85 |   p:last-child {
 86 |     margin-bottom: 0;
 87 |   }
 88 | }
 89 | 
 90 | // Lists
 91 | ul,
 92 | ol {
 93 |   margin: $unit-4 0 $unit-4 $unit-4;
 94 |   padding: 0;
 95 | 
 96 |   ul,
 97 |   ol {
 98 |     margin: $unit-4 0 $unit-4 $unit-4;
 99 |   }
100 | 
101 |   li {
102 |     margin-top: $unit-2;
103 |   }
104 | }
105 | 
106 | ul {
107 |   list-style: disc inside;
108 | 
109 |   ul {
110 |     list-style-type: circle;
111 |   }
112 | }
113 | 
114 | ol {
115 |   list-style: decimal inside;
116 | 
117 |   ol {
118 |     list-style-type: lower-alpha;
119 |   }
120 | }
121 | 
122 | dl {
123 |   dt {
124 |     font-weight: bold;
125 |   }
126 |   dd {
127 |     margin: $unit-2 0 $unit-4 0;
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/src/_utilities.scss:
--------------------------------------------------------------------------------
1 | @import "utilities/colors";
2 | @import "utilities/cursors";
3 | @import "utilities/display";
4 | @import "utilities/divider";
5 | @import "utilities/loading";
6 | @import "utilities/position";
7 | @import "utilities/shapes";
8 | @import "utilities/text";
9 | 


--------------------------------------------------------------------------------
/src/_variables.scss:
--------------------------------------------------------------------------------
  1 | // Core variables
  2 | $version: "0.5.9";
  3 | 
  4 | // Core features
  5 | $rtl: false !default;
  6 | 
  7 | // Core colors
  8 | $primary-color: #5755d9 !default;
  9 | $primary-color-dark: darken($primary-color, 3%) !default;
 10 | $primary-color-light: lighten($primary-color, 3%) !default;
 11 | $secondary-color: lighten($primary-color, 37.5%) !default;
 12 | $secondary-color-dark: darken($secondary-color, 3%) !default;
 13 | $secondary-color-light: lighten($secondary-color, 3%) !default;
 14 | 
 15 | // Gray colors
 16 | $dark-color: #303742 !default;
 17 | $light-color: #fff !default;
 18 | $gray-color: lighten($dark-color, 55%) !default;
 19 | $gray-color-dark: darken($gray-color, 30%) !default;
 20 | $gray-color-light: lighten($gray-color, 20%) !default;
 21 | 
 22 | $border-color: lighten($dark-color, 65%) !default;
 23 | $border-color-dark: darken($border-color, 10%) !default;
 24 | $border-color-light: lighten($border-color, 8%) !default;
 25 | $bg-color: lighten($dark-color, 75%) !default;
 26 | $bg-color-dark: darken($bg-color, 3%) !default;
 27 | $bg-color-light: $light-color !default;
 28 | 
 29 | // Control colors
 30 | $success-color: #32b643 !default;
 31 | $warning-color: #ffb700 !default;
 32 | $error-color: #e85600 !default;
 33 | 
 34 | // Other colors
 35 | $code-color: #d73e48 !default;
 36 | $highlight-color: #ffe9b3 !default;
 37 | $body-bg: $bg-color-light !default;
 38 | $body-font-color: lighten($dark-color, 5%) !default;
 39 | $link-color: $primary-color !default;
 40 | $link-color-dark: darken($link-color, 10%) !default;
 41 | $link-color-light: lighten($link-color, 10%) !default;
 42 | 
 43 | // Fonts
 44 | // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
 45 | $base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
 46 | $mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
 47 | $fallback-font-family: "Helvetica Neue", sans-serif !default;
 48 | $cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
 49 | $cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
 50 | $cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
 51 | $cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
 52 | $body-font-family: $base-font-family, $fallback-font-family !default;
 53 | 
 54 | // Unit sizes
 55 | $unit-o: .05rem !default;
 56 | $unit-h: .1rem !default;
 57 | $unit-1: .2rem !default;
 58 | $unit-2: .4rem !default;
 59 | $unit-3: .6rem !default;
 60 | $unit-4: .8rem !default;
 61 | $unit-5: 1rem !default;
 62 | $unit-6: 1.2rem !default;
 63 | $unit-7: 1.4rem !default;
 64 | $unit-8: 1.6rem !default;
 65 | $unit-9: 1.8rem !default;
 66 | $unit-10: 2rem !default;
 67 | $unit-12: 2.4rem !default;
 68 | $unit-16: 3.2rem !default;
 69 | 
 70 | // Font sizes
 71 | $html-font-size: 20px !default;
 72 | $html-line-height: 1.5 !default;
 73 | $font-size: .8rem !default;
 74 | $font-size-sm: .7rem !default;
 75 | $font-size-lg: .9rem !default;
 76 | $line-height: 1.2rem !default;
 77 | 
 78 | // Sizes
 79 | $layout-spacing: $unit-2 !default;
 80 | $layout-spacing-sm: $unit-1 !default;
 81 | $layout-spacing-lg: $unit-4 !default;
 82 | $border-radius: $unit-h !default;
 83 | $border-width: $unit-o !default;
 84 | $border-width-lg: $unit-h !default;
 85 | $control-size: $unit-9 !default;
 86 | $control-size-sm: $unit-7 !default;
 87 | $control-size-lg: $unit-10 !default;
 88 | $control-padding-x: $unit-2 !default;
 89 | $control-padding-x-sm: $unit-2 * .75 !default;
 90 | $control-padding-x-lg: $unit-2 * 1.5 !default;
 91 | $control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
 92 | $control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
 93 | $control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
 94 | $control-icon-size: .8rem !default;
 95 | 
 96 | $control-width-xs: 180px !default;
 97 | $control-width-sm: 320px !default;
 98 | $control-width-md: 640px !default;
 99 | $control-width-lg: 960px !default;
100 | $control-width-xl: 1280px !default;
101 | 
102 | // Responsive breakpoints
103 | $size-xs: 480px !default;
104 | $size-sm: 600px !default;
105 | $size-md: 840px !default;
106 | $size-lg: 960px !default;
107 | $size-xl: 1280px !default;
108 | $size-2x: 1440px !default;
109 | 
110 | $responsive-breakpoint: $size-xs !default;
111 | 
112 | // Z-index
113 | $zindex-0: 1 !default;
114 | $zindex-1: 100 !default;
115 | $zindex-2: 200 !default;
116 | $zindex-3: 300 !default;
117 | $zindex-4: 400 !default;
118 | 


--------------------------------------------------------------------------------
/src/_viewer-360.scss:
--------------------------------------------------------------------------------
 1 | // 360 Degree Viewer
 2 | 
 3 | // Mixin: Viewer slider sizes
 4 | @mixin viewer-slider-size($image-number: 36) {
 5 |   @for $s from 1 through ($image-number) {
 6 |     .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
 7 |       background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
 8 |     }
 9 |   }
10 | }
11 | 
12 | .viewer-360 {
13 |   align-items: center;
14 |   display: flex;
15 |   flex-direction: column;
16 | 
17 |   // Copy and add more numbers if you need
18 |   @include viewer-slider-size(36);
19 | 
20 |   .viewer-slider {
21 |     cursor: ew-resize;
22 |     margin: 1rem;
23 |     order: 2;
24 |     width: 60%;
25 |   }
26 | 
27 |   .viewer-image {
28 |     background-position-y: 0;
29 |     background-repeat: no-repeat;
30 |     background-size: 100%;
31 |     max-width: 100%;
32 |     order: 1;
33 |   }
34 | }


--------------------------------------------------------------------------------
/src/icons/_icons-core.scss:
--------------------------------------------------------------------------------
 1 | // Icon variables
 2 | $icon-border-width: $border-width-lg;
 3 | $icon-prefix: "icon";
 4 | 
 5 | // Icon base style
 6 | .#{$icon-prefix} {
 7 |   box-sizing: border-box;
 8 |   display: inline-block;
 9 |   font-size: inherit;
10 |   font-style: normal;
11 |   height: 1em;
12 |   position: relative;
13 |   text-indent: -9999px;
14 |   vertical-align: middle;
15 |   width: 1em;
16 |   &::before,
17 |   &::after {
18 |     content: "";
19 |     display: block;
20 |     left: 50%;
21 |     position: absolute;
22 |     top: 50%;
23 |     transform: translate(-50%, -50%);
24 |   }
25 | 
26 |   // Icon sizes
27 |   &.icon-2x {
28 |     font-size: 1.6rem;
29 |   }
30 | 
31 |   &.icon-3x {
32 |     font-size: 2.4rem;
33 |   }
34 | 
35 |   &.icon-4x {
36 |     font-size: 3.2rem;
37 |   }
38 | }
39 | 
40 | // Component icon support
41 | .accordion,
42 | .btn,
43 | .toast,
44 | .menu {
45 |   .#{$icon-prefix} {
46 |     vertical-align: -10%;
47 |   }
48 | }
49 | 
50 | .btn-lg {
51 |   .#{$icon-prefix} {
52 |     vertical-align: -15%;
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/icons/_icons-navigation.scss:
--------------------------------------------------------------------------------
  1 | // Icon arrows
  2 | .icon-arrow-down,
  3 | .icon-arrow-left,
  4 | .icon-arrow-right,
  5 | .icon-arrow-up,
  6 | .icon-downward,
  7 | .icon-back,
  8 | .icon-forward,
  9 | .icon-upward {
 10 |   &::before {
 11 |     border: $icon-border-width solid currentColor;
 12 |     border-bottom: 0;
 13 |     border-right: 0;
 14 |     height: .65em;
 15 |     width: .65em;
 16 |   }
 17 | }
 18 | 
 19 | .icon-arrow-down {
 20 |   &::before {
 21 |     transform: translate(-50%, -75%) rotate(225deg);
 22 |   }
 23 | }
 24 | 
 25 | .icon-arrow-left {
 26 |   &::before {
 27 |     transform: translate(-25%, -50%) rotate(-45deg);
 28 |   }
 29 | }
 30 | 
 31 | .icon-arrow-right {
 32 |   &::before {
 33 |     transform: translate(-75%, -50%) rotate(135deg);
 34 |   }
 35 | }
 36 | 
 37 | .icon-arrow-up {
 38 |   &::before {
 39 |     transform: translate(-50%, -25%) rotate(45deg);
 40 |   }
 41 | }
 42 | 
 43 | .icon-back,
 44 | .icon-forward {
 45 |   &::after {
 46 |     background: currentColor;
 47 |     height: $icon-border-width;
 48 |     width: .8em;
 49 |   }
 50 | }
 51 | 
 52 | .icon-downward,
 53 | .icon-upward {
 54 |   &::after {
 55 |     background: currentColor;
 56 |     height: .8em;
 57 |     width: $icon-border-width;
 58 |   }
 59 | }
 60 | 
 61 | .icon-back {
 62 |   &::after {
 63 |     left: 55%;
 64 |   }
 65 |   &::before {
 66 |     transform: translate(-50%, -50%) rotate(-45deg);
 67 |   }
 68 | }
 69 | 
 70 | .icon-downward {
 71 |   &::after {
 72 |     top: 45%;
 73 |   }
 74 |   &::before {
 75 |     transform: translate(-50%, -50%) rotate(-135deg);
 76 |   }
 77 | }
 78 | 
 79 | .icon-forward {
 80 |   &::after {
 81 |     left: 45%;
 82 |   }
 83 |   &::before {
 84 |     transform: translate(-50%, -50%) rotate(135deg);
 85 |   }
 86 | }
 87 | 
 88 | .icon-upward {
 89 |   &::after {
 90 |     top: 55%;
 91 |   }
 92 |   &::before {
 93 |     transform: translate(-50%, -50%) rotate(45deg);
 94 |   }
 95 | }
 96 | 
 97 | // Icon caret
 98 | .icon-caret {
 99 |   &::before {
100 |     border-top: .3em solid currentColor;
101 |     border-right: .3em solid transparent;
102 |     border-left: .3em solid transparent;
103 |     height: 0;
104 |     transform: translate(-50%, -25%);
105 |     width: 0;
106 |   }
107 | }
108 | 
109 | // Icon menu
110 | .icon-menu {
111 |   &::before {
112 |     background: currentColor;
113 |     box-shadow: 0 -.35em, 0 .35em;
114 |     height: $icon-border-width;
115 |     width: 100%;
116 |   }
117 | }
118 | 
119 | // Icon apps
120 | .icon-apps {
121 |   &::before {
122 |     background: currentColor;
123 |     box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
124 |     height: 3px;
125 |     width: 3px;
126 |   }
127 | }
128 | 


--------------------------------------------------------------------------------
/src/icons/_icons-object.scss:
--------------------------------------------------------------------------------
  1 | // Icon time
  2 | .icon-time {
  3 |   border: $icon-border-width solid currentColor;
  4 |   border-radius: 50%;
  5 |   &::before {
  6 |     background: currentColor;
  7 |     height: .4em;
  8 |     transform: translate(-50%, -75%);
  9 |     width: $icon-border-width;
 10 |   }
 11 |   &::after {
 12 |     background: currentColor;
 13 |     height: .3em;
 14 |     transform: translate(-50%, -75%) rotate(90deg);
 15 |     transform-origin: 50% 90%;
 16 |     width: $icon-border-width;
 17 |   }
 18 | }
 19 | 
 20 | // Icon mail
 21 | .icon-mail {
 22 |   &::before {
 23 |     border: $icon-border-width solid currentColor;
 24 |     border-radius: $border-radius;
 25 |     height: .8em;
 26 |     width: 1em;
 27 |   }
 28 |   &::after {
 29 |     border: $icon-border-width solid currentColor;
 30 |     border-right: 0;
 31 |     border-top: 0;
 32 |     height: .5em;
 33 |     transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
 34 |     width: .5em;
 35 |   }
 36 | }
 37 | 
 38 | // Icon people
 39 | .icon-people {
 40 |   &::before {
 41 |     border: $icon-border-width solid currentColor;
 42 |     border-radius: 50%;
 43 |     height: .45em;
 44 |     top: 25%;
 45 |     width: .45em;
 46 |   }
 47 |   &::after {
 48 |     border: $icon-border-width solid currentColor;
 49 |     border-radius: 50% 50% 0 0;
 50 |     height: .4em;
 51 |     top: 75%;
 52 |     width: .9em;
 53 |   }
 54 | }
 55 | 
 56 | // Icon message
 57 | .icon-message {
 58 |   border: $icon-border-width solid currentColor;
 59 |   border-bottom: 0;
 60 |   border-radius: $border-radius;
 61 |   border-right: 0;
 62 |   &::before {
 63 |     border: $icon-border-width solid currentColor;
 64 |     border-bottom-right-radius: $border-radius;
 65 |     border-left: 0;
 66 |     border-top: 0;
 67 |     height: .8em;
 68 |     left: 65%;
 69 |     top: 40%;
 70 |     width: .7em;
 71 |   }
 72 |   &::after {
 73 |     background: currentColor;
 74 |     border-radius: $border-radius;
 75 |     height: .3em;
 76 |     left: 10%;
 77 |     top: 100%;
 78 |     transform: translate(0, -90%) rotate(45deg);
 79 |     width: $icon-border-width;
 80 |   }
 81 | }
 82 | 
 83 | // Icon photo
 84 | .icon-photo {
 85 |   border: $icon-border-width solid currentColor;
 86 |   border-radius: $border-radius;
 87 |   &::before {
 88 |     border: $icon-border-width solid currentColor;
 89 |     border-radius: 50%;
 90 |     height: .25em;
 91 |     left: 35%;
 92 |     top: 35%;
 93 |     width: .25em;
 94 |   }
 95 |   &::after {
 96 |     border: $icon-border-width solid currentColor;
 97 |     border-bottom: 0;
 98 |     border-left: 0;
 99 |     height: .5em;
100 |     left: 60%;
101 |     transform: translate(-50%, 25%) rotate(-45deg);
102 |     width: .5em;
103 |   }
104 | }
105 | 
106 | // Icon link
107 | .icon-link {
108 |   &::before,
109 |   &::after {
110 |     border: $icon-border-width solid currentColor;
111 |     border-radius: 5em 0 0 5em;
112 |     border-right: 0;
113 |     height: .5em;
114 |     width: .75em;
115 |   }
116 |   &::before {
117 |     transform: translate(-70%, -45%) rotate(-45deg);
118 |   }
119 |   &::after {
120 |     transform: translate(-30%, -55%) rotate(135deg);
121 |   }
122 | }
123 | 
124 | // Icon location
125 | .icon-location {
126 |   &::before {
127 |     border: $icon-border-width solid currentColor;
128 |     border-radius: 50% 50% 50% 0;
129 |     height: .8em;
130 |     transform: translate(-50%, -60%) rotate(-45deg);
131 |     width: .8em;
132 |   }
133 |   &::after {
134 |     border: $icon-border-width solid currentColor;
135 |     border-radius: 50%;
136 |     height: .2em;
137 |     transform: translate(-50%, -80%);
138 |     width: .2em;
139 |   }
140 | }
141 | 
142 | // Icon emoji
143 | .icon-emoji {
144 |   border: $icon-border-width solid currentColor;
145 |   border-radius: 50%;
146 |   &::before {
147 |     border-radius: 50%;
148 |     box-shadow: -.17em -.1em, .17em -.1em;
149 |     height: .15em;
150 |     width: .15em;
151 |   }
152 |   &::after {
153 |     border: $icon-border-width solid currentColor;
154 |     border-bottom-color: transparent;
155 |     border-radius: 50%;
156 |     border-right-color: transparent;
157 |     height: .5em;
158 |     transform: translate(-50%, -40%) rotate(-135deg);
159 |     width: .5em;
160 |   }
161 | }
162 | 


--------------------------------------------------------------------------------
/src/mixins/_avatar.scss:
--------------------------------------------------------------------------------
1 | // Avatar mixin
2 | @mixin avatar-base($size: $unit-8) {
3 |   font-size: $size / 2;
4 |   height: $size;
5 |   width: $size;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/mixins/_button.scss:
--------------------------------------------------------------------------------
 1 | // Button variant mixin
 2 | @mixin button-variant($color: $primary-color) {
 3 |   background: $color;
 4 |   border-color: darken($color, 3%);
 5 |   color: $light-color;
 6 |   &:focus {
 7 |     @include control-shadow($color);
 8 |   }
 9 |   &:focus,
10 |   &:hover {
11 |     background: darken($color, 2%);
12 |     border-color: darken($color, 5%);
13 |     color: $light-color;
14 |   }
15 |   &:active,
16 |   &.active {
17 |     background: darken($color, 7%);
18 |     border-color: darken($color, 10%);
19 |     color: $light-color;
20 |   }
21 |   &.loading {
22 |     &::after {
23 |       border-bottom-color: $light-color;
24 |       border-left-color: $light-color;
25 |     }
26 |   }
27 | }
28 | 
29 | @mixin button-outline-variant($color: $primary-color) {
30 |   background: $light-color;
31 |   border-color: $color;
32 |   color: $color;
33 |   &:focus {
34 |     @include control-shadow($color);
35 |   }
36 |   &:focus,
37 |   &:hover {
38 |     background: lighten($color, 50%);
39 |     border-color: darken($color, 2%);
40 |     color: $color;
41 |   }
42 |   &:active,
43 |   &.active {
44 |     background: $color;
45 |     border-color: darken($color, 5%);
46 |     color: $light-color;
47 |   }
48 |   &.loading {
49 |     &::after {
50 |       border-bottom-color: $color;
51 |       border-left-color: $color;
52 |     }
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/mixins/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // Clearfix mixin
2 | @mixin clearfix() {
3 |   &::after {
4 |     clear: both;
5 |     content: "";
6 |     display: table;
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/mixins/_color.scss:
--------------------------------------------------------------------------------
 1 | // Background color utility mixin
 2 | @mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
 3 |   #{$name} {
 4 |     background: $color !important;
 5 | 
 6 |     @if (lightness($color) < 60) {
 7 |       color: $light-color;
 8 |     }
 9 |   }
10 | }
11 | 
12 | // Text color utility mixin
13 | @mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
14 |   #{$name} {
15 |     color: $color !important;
16 |   }
17 | 
18 |   a#{$name} {
19 |     &:focus,
20 |     &:hover {
21 |       color: darken($color, 5%);
22 |     }
23 |     &:visited {
24 |       color: lighten($color, 5%);
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/mixins/_label.scss:
--------------------------------------------------------------------------------
 1 | // Label base style
 2 | @mixin label-base() {
 3 |   border-radius: $border-radius;
 4 |   line-height: 1.25;
 5 |   padding: .1rem .2rem;
 6 | }
 7 | 
 8 | @mixin label-variant($color: $light-color, $bg-color: $primary-color) {
 9 |   background: $bg-color;
10 |   color: $color;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/mixins/_position.scss:
--------------------------------------------------------------------------------
 1 | // Margin utility mixin
 2 | @mixin margin-variant($id: 1, $size: $unit-1) {
 3 |   .m-#{$id} {
 4 |     margin: $size !important;
 5 |   }
 6 | 
 7 |   .mb-#{$id} {
 8 |     margin-bottom: $size !important;
 9 |   }
10 | 
11 |   .ml-#{$id} {
12 |     margin-left: $size !important;
13 |   }
14 | 
15 |   .mr-#{$id} {
16 |     margin-right: $size !important;
17 |   }
18 | 
19 |   .mt-#{$id} {
20 |     margin-top: $size !important;
21 |   }
22 | 
23 |   .mx-#{$id} {
24 |     margin-left: $size !important;
25 |     margin-right: $size !important;
26 |   }
27 | 
28 |   .my-#{$id} {
29 |     margin-bottom: $size !important;
30 |     margin-top: $size !important;
31 |   }
32 | }
33 | 
34 | // Padding utility mixin
35 | @mixin padding-variant($id: 1, $size: $unit-1) {
36 |   .p-#{$id} {
37 |     padding: $size !important;
38 |   }
39 | 
40 |   .pb-#{$id} {
41 |     padding-bottom: $size !important;
42 |   }
43 | 
44 |   .pl-#{$id} {
45 |     padding-left: $size !important;
46 |   }
47 | 
48 |   .pr-#{$id} {
49 |     padding-right: $size !important;
50 |   }
51 | 
52 |   .pt-#{$id} {
53 |     padding-top: $size !important;
54 |   }
55 | 
56 |   .px-#{$id} {
57 |     padding-left: $size !important;
58 |     padding-right: $size !important;
59 |   }
60 |   
61 |   .py-#{$id} {
62 |     padding-bottom: $size !important;
63 |     padding-top: $size !important;
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/mixins/_shadow.scss:
--------------------------------------------------------------------------------
 1 | // Component focus shadow
 2 | @mixin control-shadow($color: $primary-color) {
 3 |   box-shadow: 0 0 0 .1rem rgba($color, .2);
 4 | }
 5 | 
 6 | // Shadow mixin
 7 | @mixin shadow-variant($offset) {
 8 |   box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/mixins/_text.scss:
--------------------------------------------------------------------------------
1 | // Text Ellipsis
2 | @mixin text-ellipsis() {
3 |   overflow: hidden;
4 |   text-overflow: ellipsis;
5 |   white-space: nowrap;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/mixins/_toast.scss:
--------------------------------------------------------------------------------
1 | // Toast variant mixin
2 | @mixin toast-variant($color: $dark-color) {
3 |   background: rgba($color, .95);
4 |   border-color: $color;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/spectre-exp.scss:
--------------------------------------------------------------------------------
 1 | // Variables and mixins
 2 | @import "variables";
 3 | @import "mixins";
 4 | 
 5 | /*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
 6 | // Experimentals
 7 | @import "autocomplete";
 8 | @import "calendars";
 9 | @import "carousels";
10 | @import "comparison-sliders";
11 | @import "filters";
12 | @import "meters";
13 | @import "off-canvas";
14 | @import "parallax";
15 | @import "progress";
16 | @import "sliders";
17 | @import "timelines";
18 | @import "viewer-360";
19 | 


--------------------------------------------------------------------------------
/src/spectre-icons.scss:
--------------------------------------------------------------------------------
 1 | // Variables and mixins
 2 | @import "variables";
 3 | @import "mixins";
 4 | 
 5 | /*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
 6 | // Icons
 7 | @import "icons/icons-core";
 8 | @import "icons/icons-navigation";
 9 | @import "icons/icons-action";
10 | @import "icons/icons-object";
11 | 


--------------------------------------------------------------------------------
/src/spectre.scss:
--------------------------------------------------------------------------------
 1 | // Variables and mixins
 2 | @import "variables";
 3 | @import "mixins";
 4 | 
 5 | /*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
 6 | // Reset and dependencies
 7 | @import "normalize";
 8 | @import "base";
 9 | 
10 | // Elements
11 | @import "typography";
12 | @import "asian";
13 | @import "tables";
14 | @import "buttons";
15 | @import "forms";
16 | @import "labels";
17 | @import "codes";
18 | @import "media";
19 | 
20 | // Layout
21 | @import "layout";
22 | @import "hero";
23 | @import "navbar";
24 | 
25 | // Components
26 | @import "accordions";
27 | @import "avatars";
28 | @import "badges";
29 | @import "breadcrumbs";
30 | @import "bars";
31 | @import "cards";
32 | @import "chips";
33 | @import "dropdowns";
34 | @import "empty";
35 | @import "menus";
36 | @import "modals";
37 | @import "navs";
38 | @import "pagination";
39 | @import "panels";
40 | @import "popovers";
41 | @import "steps";
42 | @import "tabs";
43 | @import "tiles";
44 | @import "toasts";
45 | @import "tooltips";
46 | 
47 | // Utility classes
48 | @import "animations";
49 | @import "utilities";
50 | 


--------------------------------------------------------------------------------
/src/utilities/_colors.scss:
--------------------------------------------------------------------------------
 1 | // Text colors
 2 | @include text-color-variant(".text-primary", $primary-color);
 3 | 
 4 | @include text-color-variant(".text-secondary", $secondary-color-dark);
 5 | 
 6 | @include text-color-variant(".text-gray", $gray-color);
 7 | 
 8 | @include text-color-variant(".text-light", $light-color);
 9 | 
10 | @include text-color-variant(".text-dark", $body-font-color);
11 | 
12 | @include text-color-variant(".text-success", $success-color);
13 | 
14 | @include text-color-variant(".text-warning", $warning-color);
15 | 
16 | @include text-color-variant(".text-error", $error-color);
17 | 
18 | // Background colors
19 | @include bg-color-variant(".bg-primary", $primary-color);
20 | 
21 | @include bg-color-variant(".bg-secondary", $secondary-color);
22 | 
23 | @include bg-color-variant(".bg-dark", $dark-color);
24 | 
25 | @include bg-color-variant(".bg-gray", $bg-color);
26 | 
27 | @include bg-color-variant(".bg-success", $success-color);
28 | 
29 | @include bg-color-variant(".bg-warning", $warning-color);
30 | 
31 | @include bg-color-variant(".bg-error", $error-color);
32 | 


--------------------------------------------------------------------------------
/src/utilities/_cursors.scss:
--------------------------------------------------------------------------------
 1 | // Cursors
 2 | .c-hand {
 3 |   cursor: pointer;
 4 | }
 5 | 
 6 | .c-move {
 7 |   cursor: move;
 8 | }
 9 | 
10 | .c-zoom-in {
11 |   cursor: zoom-in;
12 | }
13 | 
14 | .c-zoom-out {
15 |   cursor: zoom-out;
16 | }
17 | 
18 | .c-not-allowed {
19 |   cursor: not-allowed;
20 | }
21 | 
22 | .c-auto {
23 |   cursor: auto;
24 | }


--------------------------------------------------------------------------------
/src/utilities/_display.scss:
--------------------------------------------------------------------------------
 1 | // Display
 2 | .d-block {
 3 |   display: block;
 4 | }
 5 | .d-inline {
 6 |   display: inline;
 7 | }
 8 | .d-inline-block {
 9 |   display: inline-block;
10 | }
11 | .d-flex {
12 |   display: flex;
13 | }
14 | .d-inline-flex {
15 |   display: inline-flex;
16 | }
17 | .d-none,
18 | .d-hide {
19 |   display: none !important;
20 | }
21 | .d-visible {
22 |   visibility: visible;
23 | }
24 | .d-invisible {
25 |   visibility: hidden;
26 | }
27 | .text-hide {
28 |   background: transparent;
29 |   border: 0;
30 |   color: transparent;
31 |   font-size: 0;
32 |   line-height: 0;
33 |   text-shadow: none;
34 | }
35 | .text-assistive {
36 |   border: 0;
37 |   clip: rect(0,0,0,0);
38 |   height: 1px;
39 |   margin: -1px;
40 |   overflow: hidden;
41 |   padding: 0;
42 |   position: absolute;
43 |   width: 1px;
44 | }
45 | 


--------------------------------------------------------------------------------
/src/utilities/_divider.scss:
--------------------------------------------------------------------------------
 1 | // Divider
 2 | .divider,
 3 | .divider-vert {
 4 |   display: block;
 5 |   position: relative;
 6 | 
 7 |   &[data-content]::after {
 8 |     background: $bg-color-light;
 9 |     color: $gray-color;
10 |     content: attr(data-content);
11 |     display: inline-block;
12 |     font-size: $font-size-sm;
13 |     padding: 0 $unit-2;
14 |     transform: translateY(-$font-size-sm + $border-width);
15 |   }
16 | }
17 | 
18 | .divider {
19 |   border-top: $border-width solid $border-color-light;
20 |   height: $border-width;
21 |   margin: $unit-2 0;
22 | 
23 |   &[data-content] {
24 |     margin: $unit-4 0;
25 |   }
26 | }
27 | 
28 | .divider-vert {
29 |   display: block;
30 |   padding: $unit-4;
31 | 
32 |   &::before {
33 |     border-left: $border-width solid $border-color;
34 |     bottom: $unit-2;
35 |     content: "";
36 |     display: block;
37 |     left: 50%;
38 |     position: absolute;
39 |     top: $unit-2;
40 |     transform: translateX(-50%);
41 |   }
42 | 
43 |   &[data-content]::after {
44 |     left: 50%;
45 |     padding: $unit-1 0;
46 |     position: absolute;
47 |     top: 50%;
48 |     transform: translate(-50%, -50%);
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/utilities/_loading.scss:
--------------------------------------------------------------------------------
 1 | // Loading
 2 | .loading {
 3 |   color: transparent !important;
 4 |   min-height: $unit-4;
 5 |   pointer-events: none;
 6 |   position: relative;
 7 |   &::after {
 8 |     animation: loading 500ms infinite linear;
 9 |     background: transparent;
10 |     border: $border-width-lg solid $primary-color;
11 |     border-radius: 50%;
12 |     border-right-color: transparent;
13 |     border-top-color: transparent;
14 |     content: "";
15 |     display: block;
16 |     height: $unit-4;
17 |     left: 50%;
18 |     margin-left: -$unit-2;
19 |     margin-top: -$unit-2;
20 |     opacity: 1;
21 |     padding: 0;
22 |     position: absolute;
23 |     top: 50%;
24 |     width: $unit-4;
25 |     z-index: $zindex-0;
26 |   }
27 | 
28 |   &.loading-lg {
29 |     min-height: $unit-10;
30 |     &::after {
31 |       height: $unit-8;
32 |       margin-left: -$unit-4;
33 |       margin-top: -$unit-4;
34 |       width: $unit-8;
35 |     }
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/utilities/_position.scss:
--------------------------------------------------------------------------------
 1 | // Position
 2 | .clearfix {
 3 |   @include clearfix();
 4 | }
 5 | 
 6 | .float-left {
 7 |   float: left !important;
 8 | }
 9 | 
10 | .float-right {
11 |   float: right !important;
12 | }
13 | 
14 | .p-relative {
15 |   position: relative !important;
16 | }
17 | 
18 | .p-absolute {
19 |   position: absolute !important;
20 | }
21 | 
22 | .p-fixed {
23 |   position: fixed !important;
24 | }
25 | 
26 | .p-sticky {
27 |   position: sticky !important;
28 | }
29 | 
30 | .p-centered {
31 |   display: block;
32 |   float: none;
33 |   margin-left: auto;
34 |   margin-right: auto;
35 | }
36 | 
37 | .flex-centered {
38 |   align-items: center;
39 |   display: flex;
40 |   justify-content: center;
41 | }
42 | 
43 | // Spacing
44 | @include margin-variant(0, 0);
45 | 
46 | @include margin-variant(1, $unit-1);
47 | 
48 | @include margin-variant(2, $unit-2);
49 | 
50 | @include padding-variant(0, 0);
51 | 
52 | @include padding-variant(1, $unit-1);
53 | 
54 | @include padding-variant(2, $unit-2);
55 | 


--------------------------------------------------------------------------------
/src/utilities/_shapes.scss:
--------------------------------------------------------------------------------
1 | // Shapes
2 | .s-rounded {
3 |   border-radius: $border-radius;
4 | }
5 | 
6 | .s-circle {
7 |   border-radius: 50%;
8 | }


--------------------------------------------------------------------------------
/src/utilities/_text.scss:
--------------------------------------------------------------------------------
 1 | // Text
 2 | // Text alignment utilities
 3 | .text-left {
 4 |   text-align: left;
 5 | }
 6 | 
 7 | .text-right {
 8 |   text-align: right;
 9 | }
10 | 
11 | .text-center {
12 |   text-align: center;
13 | }
14 | 
15 | .text-justify {
16 |   text-align: justify;
17 | }
18 | 
19 | // Text transform utilities
20 | .text-lowercase {
21 |   text-transform: lowercase;
22 | }
23 | 
24 | .text-uppercase {
25 |   text-transform: uppercase;
26 | }
27 | 
28 | .text-capitalize {
29 |   text-transform: capitalize;
30 | }
31 | 
32 | // Text style utilities
33 | .text-normal {
34 |   font-weight: normal;
35 | }
36 | 
37 | .text-bold {
38 |   font-weight: bold;
39 | }
40 | 
41 | .text-italic {
42 |   font-style: italic;
43 | }
44 | 
45 | .text-large {
46 |   font-size: 1.2em;
47 | }
48 | 
49 | .text-small {
50 |   font-size: .9em;
51 | }
52 | 
53 | .text-tiny {
54 |   font-size: .8em;
55 | }
56 | 
57 | .text-muted {
58 |   opacity: .8;
59 | }
60 | 
61 | // Text overflow utilities
62 | .text-ellipsis {
63 |   @include text-ellipsis();
64 | }
65 | 
66 | .text-clip {
67 |   overflow: hidden;
68 |   text-overflow: clip;
69 |   white-space: nowrap;
70 | }
71 | 
72 | .text-break {
73 |   hyphens: auto;
74 |   word-break: break-word;
75 |   word-wrap: break-word;
76 | }
77 | 


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