diff options
| -rw-r--r-- | .csscomb.json | 6 | ||||
| -rw-r--r-- | bower.json | 4 | ||||
| -rw-r--r-- | docs/components.html | 24 | ||||
| -rw-r--r-- | docs/css/docs.css | 78 | ||||
| -rw-r--r-- | docs/dist/spectre-exp.css | 165 | ||||
| -rw-r--r-- | docs/dist/spectre-exp.min.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre-icons.css | 122 | ||||
| -rw-r--r-- | docs/dist/spectre-icons.min.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre.css | 1080 | ||||
| -rw-r--r-- | docs/dist/spectre.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 12 | ||||
| -rw-r--r-- | docs/experimentals.html | 20 | ||||
| -rw-r--r-- | docs/getting-started.html | 57 | ||||
| -rw-r--r-- | docs/layout.html | 12 | ||||
| -rw-r--r-- | docs/src/docs.scss (renamed from docs/src/docs.less) | 100 | ||||
| -rw-r--r-- | docs/utilities.html | 12 | ||||
| -rw-r--r-- | gulpfile.js | 67 | ||||
| -rw-r--r-- | package-lock.json | 3349 | ||||
| -rw-r--r-- | package.json | 22 | ||||
| -rw-r--r-- | spectre-exp.less | 16 | ||||
| -rw-r--r-- | spectre.less | 50 | ||||
| -rw-r--r-- | src/_accordions.scss (renamed from src/accordions.less) | 4 | ||||
| -rw-r--r-- | src/_animations.scss (renamed from src/animations.less) | 2 | ||||
| -rw-r--r-- | src/_asian.scss (renamed from src/asian.less) | 8 | ||||
| -rw-r--r-- | src/_autocomplete.scss (renamed from src/autocomplete.less) | 14 | ||||
| -rw-r--r-- | src/_avatars.scss (renamed from src/avatars.less) | 34 | ||||
| -rw-r--r-- | src/_badges.scss (renamed from src/badges.less) | 16 | ||||
| -rw-r--r-- | src/_bars.scss (renamed from src/bars.less) | 40 | ||||
| -rw-r--r-- | src/_base.scss (renamed from src/base.less) | 18 | ||||
| -rw-r--r-- | src/_breadcrumbs.scss (renamed from src/breadcrumbs.less) | 16 | ||||
| -rw-r--r-- | src/_buttons.scss (renamed from src/buttons.less) | 92 | ||||
| -rw-r--r-- | src/_calendars.scss (renamed from src/calendars.less) | 89 | ||||
| -rw-r--r-- | src/_cards.scss | 39 | ||||
| -rw-r--r-- | src/_carousels.scss (renamed from src/carousels.less) | 26 | ||||
| -rw-r--r-- | src/_chips.scss | 24 | ||||
| -rw-r--r-- | src/_codes.scss | 32 | ||||
| -rw-r--r-- | src/_comparison-sliders.scss (renamed from src/comparison-sliders.less) | 30 | ||||
| -rw-r--r-- | src/_dropdowns.scss (renamed from src/dropdowns.less) | 4 | ||||
| -rw-r--r-- | src/_empty.scss | 21 | ||||
| -rw-r--r-- | src/_filters.scss (renamed from src/filters.less) | 6 | ||||
| -rw-r--r-- | src/_forms.scss (renamed from src/forms.less) | 246 | ||||
| -rw-r--r-- | src/_icons.scss (renamed from src/icons.less) | 122 | ||||
| -rw-r--r-- | src/_labels.scss | 33 | ||||
| -rw-r--r-- | src/_layout.scss (renamed from src/layout.less) | 36 | ||||
| -rw-r--r-- | src/_media.scss (renamed from src/media.less) | 10 | ||||
| -rw-r--r-- | src/_menus.scss | 56 | ||||
| -rw-r--r-- | src/_meters.scss (renamed from src/meters.less) | 24 | ||||
| -rw-r--r-- | src/_mixins.scss | 186 | ||||
| -rw-r--r-- | src/_modals.scss (renamed from src/modals.less) | 22 | ||||
| -rwxr-xr-x | src/_navbar.scss (renamed from src/navbar.less) | 2 | ||||
| -rw-r--r-- | src/_navs.scss (renamed from src/navs.less) | 16 | ||||
| -rw-r--r-- | src/_normalize.scss (renamed from src/normalize.less) | 2 | ||||
| -rw-r--r-- | src/_pagination.scss (renamed from src/pagination.less) | 20 | ||||
| -rw-r--r-- | src/_panels.scss (renamed from src/panels.less) | 8 | ||||
| -rw-r--r-- | src/_parallax.scss (renamed from src/parallax.less) | 62 | ||||
| -rw-r--r-- | src/_popovers.scss (renamed from src/popovers.less) | 8 | ||||
| -rw-r--r-- | src/_progress.scss (renamed from src/progress.less) | 20 | ||||
| -rw-r--r-- | src/_sliders.scss (renamed from src/sliders.less) | 50 | ||||
| -rw-r--r-- | src/_steps.scss (renamed from src/steps.less) | 28 | ||||
| -rw-r--r-- | src/_tables.scss (renamed from src/tables.less) | 12 | ||||
| -rw-r--r-- | src/_tabs.scss (renamed from src/tabs.less) | 16 | ||||
| -rw-r--r-- | src/_tiles.scss (renamed from src/tiles.less) | 8 | ||||
| -rw-r--r-- | src/_timelines.scss (renamed from src/timelines.less) | 30 | ||||
| -rw-r--r-- | src/_toasts.scss | 41 | ||||
| -rw-r--r-- | src/_tooltips.scss (renamed from src/tooltips.less) | 30 | ||||
| -rw-r--r-- | src/_typography.scss (renamed from src/typography.less) | 26 | ||||
| -rw-r--r-- | src/_utilities.scss | 7 | ||||
| -rw-r--r-- | src/_variables.scss | 103 | ||||
| -rw-r--r-- | src/cards.less | 39 | ||||
| -rw-r--r-- | src/chips.less | 24 | ||||
| -rw-r--r-- | src/codes.less | 32 | ||||
| -rw-r--r-- | src/empty.less | 21 | ||||
| -rw-r--r-- | src/labels.less | 33 | ||||
| -rw-r--r-- | src/menus.less | 56 | ||||
| -rw-r--r-- | src/mixins.less | 175 | ||||
| -rw-r--r-- | src/spectre-exp.scss | 16 | ||||
| -rw-r--r-- | src/spectre-icons.scss (renamed from spectre-icons.less) | 6 | ||||
| -rw-r--r-- | src/spectre.scss | 50 | ||||
| -rw-r--r-- | src/toasts.less | 41 | ||||
| -rw-r--r-- | src/utilities.less | 7 | ||||
| -rw-r--r-- | src/utilities/_colors.scss | 29 | ||||
| -rw-r--r-- | src/utilities/_display.scss (renamed from src/utilities/display.less) | 4 | ||||
| -rw-r--r-- | src/utilities/_divider.scss (renamed from src/utilities/divider.less) | 28 | ||||
| -rw-r--r-- | src/utilities/_loading.scss (renamed from src/utilities/loading.less) | 24 | ||||
| -rw-r--r-- | src/utilities/_position.scss (renamed from src/utilities/position.less) | 14 | ||||
| -rw-r--r-- | src/utilities/_shapes.scss (renamed from src/utilities/shapes.less) | 2 | ||||
| -rw-r--r-- | src/utilities/_text.scss (renamed from src/utilities/text.less) | 4 | ||||
| -rw-r--r-- | src/utilities/colors.less | 45 | ||||
| -rw-r--r-- | src/variables.less | 104 |
89 files changed, 5803 insertions, 1892 deletions
diff --git a/.csscomb.json b/.csscomb.json index 47b0826..270371d 100644 --- a/.csscomb.json +++ b/.csscomb.json @@ -23,8 +23,8 @@ "tab-size": true, "unitless-zero": true, "sort-order": [[ - "$variable", - "$include", - "$import" + "$variable", + "$include", + "$import" ]] } @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.3.2", + "version": "0.4.0", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", "homepage": "http://picturepan2.github.io/spectre", "repository": "picturepan2/spectre", @@ -14,7 +14,7 @@ "responsive", "mobile-friendly", "front-end", - "less", + "sass", "modern" ], "ignore": [ diff --git a/docs/components.html b/docs/components.html index ec965a1..ed34761 100644 --- a/docs/components.html +++ b/docs/components.html @@ -31,7 +31,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-1"> + <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> <div class="accordion-body"> @@ -56,7 +56,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-2"> + <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> <div class="accordion-body"> @@ -90,7 +90,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-3"> + <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> <div class="accordion-body"> @@ -109,7 +109,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked /> - <label class="accordion-header hand" for="docs-accordion-4"> + <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> <div class="accordion-body"> @@ -179,7 +179,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-5"> + <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> <div class="accordion-body"> @@ -210,7 +210,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-6"> + <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> <div class="accordion-body"> @@ -261,7 +261,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="radio" id="accordion-1" name="accordion-radio" hidden checked /> - <label class="accordion-header hand" for="accordion-1"> + <label class="accordion-header c-hand" for="accordion-1"> <i class="icon icon-arrow-right mr-5"></i> Elements </label> @@ -278,7 +278,7 @@ </div> <div class="accordion-item"> <input type="radio" id="accordion-2" name="accordion-radio" hidden /> - <label class="accordion-header hand" for="accordion-2"> + <label class="accordion-header c-hand" for="accordion-2"> <i class="icon icon-arrow-right mr-5"></i> Layout </label> @@ -295,7 +295,7 @@ </div> <div class="accordion-item"> <input type="radio" id="accordion-3" name="accordion-radio" hidden /> - <label class="accordion-header hand" for="accordion-3"> + <label class="accordion-header c-hand" for="accordion-3"> <i class="icon icon-arrow-right mr-5"></i> Components </label> @@ -316,7 +316,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked /> - <label class="accordion-header hand" for="accordion-4"> + <label class="accordion-header c-hand" for="accordion-4"> <i class="icon icon-arrow-right mr-5"></i> Elements </label> @@ -333,7 +333,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden /> - <label class="accordion-header hand" for="accordion-5"> + <label class="accordion-header c-hand" for="accordion-5"> <i class="icon icon-arrow-right mr-5"></i> Layout </label> @@ -350,7 +350,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden /> - <label class="accordion-header hand" for="accordion-6"> + <label class="accordion-header c-hand" for="accordion-6"> <i class="icon icon-arrow-right mr-5"></i> Components </label> diff --git a/docs/css/docs.css b/docs/css/docs.css index f5668bc..8baf686 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -1,14 +1,16 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.3.2"; + content: "0.4.0"; } + /* Spectre New Docs */ .s-container > .columns { -ms-flex-flow: nowrap; flex-flow: nowrap; min-height: 100vh; } + .s-sidebar { background: #f8f9fa; -ms-flex: 0 0 auto; @@ -16,6 +18,7 @@ padding: 1.5rem 0 1.5rem 1.5rem; width: 12rem; } + .s-sidebar .s-nav { bottom: 1.5rem; overflow-y: auto; @@ -23,26 +26,32 @@ top: 5rem; width: 10.5rem; } + .s-sidebar .accordion .accordion-item { margin-bottom: .75rem; } + .s-sidebar .accordion input ~ .accordion-header { color: #5b657a; font-size: .6rem; font-weight: 600; text-transform: uppercase; } + .s-sidebar .accordion input:checked ~ .accordion-header { color: #5b657a; } + .s-sidebar .accordion .menu .menu-item { padding-left: 1rem; } + .s-sidebar .accordion .menu .menu-item > a { background: transparent; color: #727e96; display: inline-block; } + .s-content { -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -50,9 +59,11 @@ padding: 0 3rem; width: calc(100vw - 12rem); } + .s-content > .container { padding-bottom: 1.5rem; } + .s-content .anchor { color: #626fca; height: 0; @@ -64,6 +75,7 @@ width: 0; z-index: 100; } + .s-content .anchor:focus, .s-content .anchor:hover { box-shadow: none; @@ -71,6 +83,7 @@ text-decoration: none; width: 2em; } + .s-content .s-title, .s-content .s-subtitle { line-height: 1.6rem; @@ -79,6 +92,7 @@ padding-top: 1.5rem; position: static; } + @supports ((position: -webkit-sticky) or (position: sticky)) { .s-content .s-title, .s-content .s-subtitle { @@ -100,34 +114,42 @@ z-index: -1; } } + .s-content .s-title:hover .anchor, .s-content .s-subtitle:hover .anchor { height: auto; width: 1em; } + .s-content .s-title + .docs-note, .s-content .s-subtitle + .docs-note { margin-top: .4rem; } + .s-content .docs-note { margin: 1.5rem 0; } + .s-content .column { padding: .4rem; } + .s-content .docs-block { border-radius: .1rem; padding: .4rem; } + .s-content .docs-block.bg-gray { background: #f0f1f4; } + .s-content .docs-shape { height: 4.8rem; line-height: 1.2rem; padding: 1.8rem 0; width: 4.8rem; } + .s-content .docs-dot { border-radius: 50%; display: inline-block; @@ -135,49 +157,63 @@ padding: 0; width: .5rem; } + .s-content .docs-table th, .s-content .docs-table td { padding: .75rem .25rem; } + .s-content .docs-color { border-radius: .1rem; margin: .25rem 0; padding: .5rem; } + .s-content .docs-color .color-subtitle { font-size: .6rem; opacity: .75; } + .s-content .panel { height: 75vh; } + .s-content .panel .tile { margin: .75rem 0; } + .s-content .parallax { margin: 2rem auto; } + .s-content .code { color: #667189; } + .s-content .code .com { color: #acb3c2; } + .s-content .code .tag { color: #5764c6; } + .s-content .code .atn { color: #667189; } + .s-content .code .atv { color: #e06870; } + .s-content .empty .icon { font-size: 2rem; } + .s-content .form-autocomplete .menu { position: static; } + .s-content .example-tile-icon { align-content: space-around; align-items: center; @@ -192,23 +228,28 @@ height: 2rem; width: 2rem; } + .s-content .example-tile-icon .icon { margin: auto; } + .s-content .comparison-slider { height: auto; padding-bottom: 56.2222%; } + .s-content .comparison-slider .filter-grayscale { -webkit-filter: grayscale(75%); filter: grayscale(75%); } + .s-brand { color: #5764c6; padding: 0 1.5rem; position: fixed; top: 1.3rem; } + .s-brand .s-logo { align-items: center; border-radius: .1rem; @@ -219,15 +260,18 @@ padding: .2rem; width: auto; } + .s-brand .s-logo:focus, .s-brand .s-logo:hover { text-decoration: none; } + .s-brand .s-logo img { display: inline; height: auto; width: 1.6rem; } + .s-brand .s-logo h2 { display: inline; font-size: .8rem; @@ -235,64 +279,80 @@ margin-left: .5rem; margin-right: .5rem; } + .s-brand .float-btn { position: fixed; right: 4.5rem; top: 1.5rem; } + .s-footer { color: #acb3c2; padding: .5rem .5rem 1.5rem .5rem; } + .s-footer a { color: #727e96; } + /* Spectre Homepage style */ .section-hero { padding: 1rem .5rem; position: relative; } + .section-hero .s-brand { position: absolute; } + .section-hero .s-brand h2 { color: #5764c6; } + .section-hero .column { padding: .4rem; } + .section-updates { padding: 4.5rem .5rem 3.5rem .5rem; } + .section-updates .card { border: 0; color: #727e96; margin-bottom: 1rem; } + .section-features { padding: 4.5rem .5rem; } + .section-features .column { padding: .4rem; } + .section-footer { color: #acb3c2; padding: 1.8rem .75rem 1rem .75rem; position: relative; z-index: 200; } + .section-footer a { color: #727e96; } + .grid-hero { - margin-bottom: 2rem; + margin-bottom: 2rem; margin-top: 6rem; } + .grid-hero h1 { color: #50596c; font-size: 1.6rem; margin-bottom: 1.5rem; } + .grid-hero h2 { color: #5b657a; font-size: .9rem; @@ -300,27 +360,32 @@ line-height: 1.5rem; margin-bottom: 1.5rem; } + .grid-hero h2 u { border-bottom: .1rem solid currentColor; padding-bottom: .05rem; text-decoration: none; } + .grid-hero .card { background: none; border: 0; color: #727e96; padding: .5rem; } + .grid-hero .card .card-title { color: #5764c6; font-size: .9rem; margin-bottom: 0; } + .menu-btn, .docs-nav-clear { display: none; } -@media screen and (max-width: 880px) { + +@media (max-width: 880px) { .s-sidebar { background: #f8f9fa; bottom: 0; @@ -329,13 +394,11 @@ padding: 3rem 1.5rem; position: fixed; top: 0; - -ms-transform: translateX(-100%); transform: translateX(-100%); transition: transform .2s ease; z-index: 400; } .s-sidebar:target { - -ms-transform: translateX(0); transform: translateX(0); transition: transform .2s ease; } @@ -348,7 +411,7 @@ .s-brand { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); - background: rgba(248, 249, 250, .8); + background: fade(#f8f9fa, 80%); height: 3.5rem; left: 0; padding: .75rem .5rem; @@ -410,7 +473,8 @@ width: 3.2rem; } } -@media screen and (max-width: 600px) { + +@media (max-width: 600px) { .grid-hero h2 { font-size: .9rem; } diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css index 1b9b6cc..820170c 100644 --- a/docs/dist/spectre-exp.css +++ b/docs/dist/spectre-exp.css @@ -6,6 +6,7 @@ min-width: 280px; text-align: center; } + .calendar .calendar-nav { align-items: center; background: #f8f9fa; @@ -17,6 +18,7 @@ font-size: .8rem; padding: .4rem; } + .calendar .calendar-header, .calendar .calendar-body { display: flex; @@ -27,25 +29,30 @@ justify-content: center; padding: .4rem 0; } + .calendar .calendar-header .calendar-date, .calendar .calendar-body .calendar-date { -ms-flex: 0 0 14.28%; flex: 0 0 14.28%; max-width: 14.28%; } + .calendar .calendar-header { background: #f8f9fa; border-bottom: .05rem solid #e7e9ed; color: #acb3c2; font-size: .6rem; } + .calendar .calendar-body { color: #727e96; } + .calendar .calendar-date { border: 0; padding: .2rem; } + .calendar .calendar-date .date-item { -webkit-appearance: none; -moz-appearance: none; @@ -67,13 +74,16 @@ white-space: nowrap; width: 1.4rem; } + .calendar .calendar-date .date-item.date-today { border-color: #e4e6f6; color: #5764c6; } + .calendar .calendar-date .date-item:focus { box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + .calendar .calendar-date .date-item:focus, .calendar .calendar-date .date-item:hover { background: #fbfbfe; @@ -81,19 +91,21 @@ color: #5764c6; text-decoration: none; } + .calendar .calendar-date .date-item:active, .calendar .calendar-date .date-item.active { background: #4c59c2; border-color: #3e4cb6; color: #fff; } + .calendar .calendar-date .date-item.badge::after { position: absolute; right: 3px; top: 3px; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } + .calendar .calendar-date.disabled .date-item, .calendar .calendar-date.disabled .calendar-event, .calendar .calendar-date .date-item:disabled, @@ -102,9 +114,11 @@ opacity: .25; pointer-events: none; } + .calendar .calendar-range { position: relative; } + .calendar .calendar-range::before { background: #eff1fa; content: ""; @@ -113,21 +127,25 @@ position: absolute; right: 0; top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } + .calendar .calendar-range.range-start::before { left: 50%; } + .calendar .calendar-range.range-end::before { right: 50%; } + .calendar .calendar-range .date-item { color: #5764c6; } + .calendar.calendar-lg .calendar-body { padding: 0; } + .calendar.calendar-lg .calendar-body .calendar-date { border-bottom: .05rem solid #e7e9ed; border-right: .05rem solid #e7e9ed; @@ -138,12 +156,15 @@ height: 5.5rem; padding: 0; } + .calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) { border-right: 0; } + .calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) { border-bottom: 0; } + .calendar.calendar-lg .date-item { align-self: flex-end; -ms-flex-item-align: end; @@ -151,16 +172,20 @@ margin-right: .2rem; margin-top: .2rem; } + .calendar.calendar-lg .calendar-range::before { top: 19px; } + .calendar.calendar-lg .calendar-range.range-start::before { left: auto; width: 19px; } + .calendar.calendar-lg .calendar-range.range-end::before { right: 19px; } + .calendar.calendar-lg .calendar-events { flex-grow: 1; -ms-flex-positive: 1; @@ -168,6 +193,7 @@ overflow-y: auto; padding: .2rem; } + .calendar.calendar-lg .calendar-event { background: #eff1fa; border-radius: .1rem; @@ -179,9 +205,9 @@ padding: 3px 4px; text-align: left; text-overflow: ellipsis; - vertical-align: baseline; white-space: nowrap; } + .carousel { background: #f8f9fa; display: block; @@ -189,16 +215,19 @@ position: relative; width: 100%; } + .carousel .carousel-container { height: 100%; left: 0; position: relative; } + .carousel .carousel-container::before { content: ""; display: block; padding-bottom: 56.25%; } + .carousel .carousel-container .carousel-item { animation: carousel-slideout 1s ease-in-out 1; height: 100%; @@ -209,29 +238,33 @@ top: 0; width: 100%; } + .carousel .carousel-container .carousel-item:hover .item-prev, .carousel .carousel-container .carousel-item:hover .item-next { opacity: 1; } + .carousel .carousel-container .item-prev, .carousel .carousel-container .item-next { - background: rgba(231, 233, 237, .25); - border-color: rgba(231, 233, 237, .5); + background: fade(#e7e9ed, 25%); + border-color: fade(#e7e9ed, 50%); color: #e7e9ed; opacity: 0; position: absolute; top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all .4s ease; z-index: 200; } + .carousel .carousel-container .item-prev { left: 1rem; } + .carousel .carousel-container .item-next { right: 1rem; } + .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1), .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2), .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3), @@ -240,27 +273,29 @@ opacity: 1; z-index: 100; } + .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1), .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2), .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3), .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) { color: #e7e9ed; } + .carousel .carousel-nav { bottom: .4rem; - display: -ms-flexbox; display: flex; + display: -ms-flexbox; -ms-flex-pack: center; justify-content: center; left: 50%; position: absolute; - -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10rem; z-index: 200; } + .carousel .carousel-nav .nav-item { - color: rgba(231, 233, 237, .5); + color: fade(#e7e9ed, 50%); display: block; -ms-flex: 1 0 auto; flex: 1 0 auto; @@ -269,6 +304,7 @@ max-width: 2.5rem; position: relative; } + .carousel .carousel-nav .nav-item::before { background: currentColor; content: ""; @@ -278,6 +314,7 @@ top: .5rem; width: 100%; } + @keyframes carousel-slidein { 0% { transform: translateX(100%); @@ -286,6 +323,7 @@ transform: translateX(0); } } + @keyframes carousel-slideout { 0% { opacity: 1; @@ -296,12 +334,14 @@ transform: translateX(-50%); } } + .comparison-slider { height: 50vh; overflow: hidden; position: relative; width: 100%; } + .comparison-slider .comparison-before, .comparison-slider .comparison-after { height: 100%; @@ -311,6 +351,7 @@ position: absolute; top: 0; } + .comparison-slider .comparison-before img, .comparison-slider .comparison-after img { height: 100%; @@ -319,18 +360,22 @@ position: absolute; width: 100%; } + .comparison-slider .comparison-before { width: 100%; z-index: 1; } + .comparison-slider .comparison-before .comparison-label { right: .8rem; } + .comparison-slider .comparison-after { max-width: 100%; min-width: 0; z-index: 2; } + .comparison-slider .comparison-after::before { background: transparent; content: ""; @@ -342,6 +387,7 @@ top: 0; z-index: 1; } + .comparison-slider .comparison-after::after { background: currentColor; border-radius: 50%; @@ -352,13 +398,14 @@ position: absolute; right: .4rem; top: 50%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); width: 3px; } + .comparison-slider .comparison-after .comparison-label { left: .8rem; } + .comparison-slider .comparison-resizer { animation: first-run 1.5s 1 ease-in-out; cursor: ew-resize; @@ -371,12 +418,12 @@ position: relative; resize: horizontal; top: 50%; - -ms-transform: translateY(-50%) scaleY(30); transform: translateY(-50%) scaleY(30); width: 0; } + .comparison-slider .comparison-label { - background: rgba(69, 77, 93, .5); + background: fade(#454d5d, 50%); bottom: .8rem; color: #fff; padding: .2rem .4rem; @@ -386,6 +433,7 @@ -ms-user-select: none; user-select: none; } + @keyframes first-run { 0% { width: 0; @@ -403,15 +451,18 @@ width: 0; } } + .filter .filter-nav { margin: .4rem 0; } + .filter .filter-body { display: flex; display: -ms-flexbox; -ms-flex-wrap: wrap; flex-wrap: wrap; } + .filter .filter-tag#tag-all:checked ~ .filter-nav .chip[for="tag-all"], .filter .filter-tag#tag-action:checked ~ .filter-nav .chip[for="tag-action"], .filter .filter-tag#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"], @@ -420,12 +471,14 @@ background: #5764c6; color: #fff; } + .filter .filter-tag#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]), .filter .filter-tag#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]), .filter .filter-tag#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]), .filter .filter-tag#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) { display: none; } + .meter { -webkit-appearance: none; -moz-appearance: none; @@ -434,51 +487,63 @@ border: 0; border-radius: .1rem; display: block; - height: .8rem; + height: .8rem; width: 100%; } + .meter::-webkit-meter-inner-element { display: block; } + .meter::-webkit-meter-bar, .meter::-webkit-meter-optimum-value, .meter::-webkit-meter-suboptimum-value, .meter::-webkit-meter-even-less-good-value { border-radius: .1rem; } + .meter::-webkit-meter-bar { background: #f8f9fa; } + .meter::-webkit-meter-optimum-value { background: #32b643; } + .meter::-webkit-meter-suboptimum-value { background: #ffb700; } + .meter::-webkit-meter-even-less-good-value { background: #e85600; } + .meter::-moz-meter-bar, .meter:-moz-meter-optimum, .meter:-moz-meter-sub-optimum, .meter:-moz-meter-sub-sub-optimum { border-radius: .1rem; } + .meter:-moz-meter-optimum::-moz-meter-bar { background: #32b643; } + .meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #ffb700; } + .meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #e85600; } + .parallax { display: block; height: auto; position: relative; width: auto; } + .parallax .parallax-content { box-shadow: 0 1rem 2.1rem rgba(69, 77, 93, .3); height: auto; @@ -487,6 +552,7 @@ transition: all .4s ease; width: 100%; } + .parallax .parallax-content::before { content: ""; display: block; @@ -496,6 +562,7 @@ top: 0; width: 100%; } + .parallax .parallax-front { align-items: center; color: #fff; @@ -508,81 +575,98 @@ left: 0; position: absolute; text-align: center; - text-shadow: 0 0 20px rgba(69, 77, 93, .5); + text-shadow: 0 0 20px fade(#454d5d, 50%); top: 0; - transform: translateZ(100px) scale(.9); + transform: translateZ(100px) scale(1-""); transition: all .4s ease; width: 100%; z-index: 1; } + .parallax .parallax-top-left { height: 50%; left: 0; position: absolute; - top: 0; + top: 0; width: 50%; z-index: 300; } + .parallax .parallax-top-left:hover ~ .parallax-content { transform: perspective(1000px) rotateX(-3deg) rotateY(3deg); } + .parallax .parallax-top-left:hover ~ .parallax-content::before { background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } + .parallax .parallax-top-left:hover ~ .parallax-content .parallax-front { - transform: translate3d(-6.5px, -6.5px, 100px) scale(.9); + transform: translate3d(-6.5px, -6.5px, 100px) scale(1-""); } + .parallax .parallax-top-right { height: 50%; position: absolute; right: 0; - top: 0; + top: 0; width: 50%; z-index: 300; } + .parallax .parallax-top-right:hover ~ .parallax-content { transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg); } + .parallax .parallax-top-right:hover ~ .parallax-content::before { background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } + .parallax .parallax-top-right:hover ~ .parallax-content .parallax-front { - transform: translate3d(6.5px, -6.5px, 100px) scale(.9); + transform: translate3d(6.5px, -6.5px, 100px) scale(1-""); } + .parallax .parallax-bottom-left { bottom: 0; height: 50%; - left: 0; + left: 0; position: absolute; width: 50%; z-index: 300; } + .parallax .parallax-bottom-left:hover ~ .parallax-content { transform: perspective(1000px) rotateX(3deg) rotateY(3deg); } + .parallax .parallax-bottom-left:hover ~ .parallax-content::before { background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } + .parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front { - transform: translate3d(-6.5px, 6.5px, 100px) scale(.9); + transform: translate3d(-6.5px, 6.5px, 100px) scale(1-""); } + .parallax .parallax-bottom-right { bottom: 0; height: 50%; position: absolute; - right: 0; + right: 0; width: 50%; z-index: 300; } + .parallax .parallax-bottom-right:hover ~ .parallax-content { transform: perspective(1000px) rotateX(3deg) rotateY(-3deg); } + .parallax .parallax-bottom-right:hover ~ .parallax-content::before { background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%); } + .parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front { - transform: translate3d(6.5px, 6.5px, 100px) scale(.9); + transform: translate3d(6.5px, 6.5px, 100px) scale(1-""); } + .progress { -webkit-appearance: none; -moz-appearance: none; @@ -595,25 +679,31 @@ position: relative; width: 100%; } + .progress::-webkit-progress-bar { background: transparent; border-radius: .1rem; } + .progress::-webkit-progress-value { background: #5764c6; border-radius: .1rem; } + .progress::-moz-progress-bar { background: #5764c6; border-radius: .1rem; } + .progress:indeterminate { animation: progress-indeterminate 1.5s linear infinite; - background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left / 150% 150% no-repeat; + background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left/150% 150% no-repeat; } + .progress:indeterminate::-moz-progress-bar { background: transparent; } + @keyframes progress-indeterminate { 0% { background-position: 200% 0; @@ -622,19 +712,22 @@ background-position: -200% 0; } } + .slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; display: block; - height: 1.2rem; + height: 1.2rem; width: 100%; } + .slider:focus { box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); outline: none; } + .slider::-webkit-slider-thumb { -webkit-appearance: none; background: #5764c6; @@ -645,6 +738,7 @@ transition: transform .2s ease; width: .6rem; } + .slider::-moz-range-thumb { background: #5764c6; border: 0; @@ -653,6 +747,7 @@ transition: transform .2s ease; width: .6rem; } + .slider::-ms-thumb { background: #5764c6; border: 0; @@ -661,59 +756,69 @@ transition: transform .2s ease; width: .6rem; } + .slider:active::-webkit-slider-thumb { transform: scale(1.25); } + .slider:active::-moz-range-thumb { transform: scale(1.25); } + .slider:active::-ms-thumb { - -ms-transform: scale(1.25); transform: scale(1.25); } + .slider:disabled::-webkit-slider-thumb, .slider.disabled::-webkit-slider-thumb { background: #e7e9ed; transform: scale(1); } + .slider:disabled::-moz-range-thumb, .slider.disabled::-moz-range-thumb { background: #e7e9ed; transform: scale(1); } + .slider:disabled::-ms-thumb, .slider.disabled::-ms-thumb { background: #e7e9ed; - -ms-transform: scale(1); transform: scale(1); } + .slider::-webkit-slider-runnable-track { background: #f0f1f4; border-radius: .1rem; height: .1rem; width: 100%; } + .slider::-moz-range-track { background: #f0f1f4; border-radius: .1rem; height: .1rem; width: 100%; } + .slider::-ms-track { background: #f0f1f4; border-radius: .1rem; height: .1rem; width: 100%; } + .slider::-ms-fill-lower { background: #5764c6; } + .timeline .timeline-item { display: flex; display: -ms-flexbox; margin-bottom: 1.2rem; position: relative; } + .timeline .timeline-item::before { background: #e7e9ed; content: ""; @@ -723,15 +828,18 @@ top: 1.2rem; width: 2px; } + .timeline .timeline-item .timeline-left { -ms-flex: 0 0 auto; flex: 0 0 auto; } + .timeline .timeline-item .timeline-content { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 2px 0 2px .8rem; } + .timeline .timeline-item .timeline-icon { border-radius: 50%; color: #fff; @@ -740,6 +848,7 @@ text-align: center; width: 1.2rem; } + .timeline .timeline-item .timeline-icon::before { border: .1rem solid #5764c6; border-radius: 50%; @@ -751,11 +860,13 @@ top: .4rem; width: .4rem; } + .timeline .timeline-item .timeline-icon.icon-lg { background: #5764c6; font-size: .8rem; line-height: 1rem; } + .timeline .timeline-item .timeline-icon.icon-lg::before { content: none; }
\ No newline at end of file diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css index 9470732..de9ca26 100644 --- a/docs/dist/spectre-exp.min.css +++ b/docs/dist/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.8rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.6rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.1rem;color:#5764c6;display:block;font-size:.6rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;-ms-transform:translateX(-50%);transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;-ms-transform:translateY(-50%) scaleY(30);transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.filter .filter-tag#tag-action:checked~.filter-nav .chip[for=tag-action],.filter .filter-tag#tag-all:checked~.filter-nav .chip[for=tag-all],.filter .filter-tag#tag-roleplaying:checked~.filter-nav .chip[for=tag-roleplaying],.filter .filter-tag#tag-shooter:checked~.filter-nav .chip[for=tag-shooter],.filter .filter-tag#tag-sports:checked~.filter-nav .chip[for=tag-sports]{background:#5764c6;color:#fff}.filter .filter-tag#tag-action:checked~.filter-body .column:not([data-tag~=tag-action]),.filter .filter-tag#tag-roleplaying:checked~.filter-body .column:not([data-tag~=tag-roleplaying]),.filter .filter-tag#tag-shooter:checked~.filter-body .column:not([data-tag~=tag-shooter]),.filter .filter-tag#tag-sports:checked~.filter-body .column:not([data-tag~=tag-sports]){display:none}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.5);top:0;transform:translateZ(100px) scale(.9);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:300}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(-6.5px,-6.5px,100px) scale(.9)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:300}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(6.5px,-6.5px,100px) scale(.9)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:300}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(-6.5px,6.5px,100px) scale(.9)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:300}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(6.5px,6.5px,100px) scale(.9)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5764c6;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.1rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5764c6;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5764c6;font-size:.8rem;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.8rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.6rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.1rem;color:#5764c6;display:block;font-size:.6rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:fade(#e7e9ed,25%);border-color:fade(#e7e9ed,50%);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:fade(#e7e9ed,50%);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:fade(#454d5d,50%);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.filter .filter-tag#tag-action:checked~.filter-nav .chip[for=tag-action],.filter .filter-tag#tag-all:checked~.filter-nav .chip[for=tag-all],.filter .filter-tag#tag-roleplaying:checked~.filter-nav .chip[for=tag-roleplaying],.filter .filter-tag#tag-shooter:checked~.filter-nav .chip[for=tag-shooter],.filter .filter-tag#tag-sports:checked~.filter-nav .chip[for=tag-sports]{background:#5764c6;color:#fff}.filter .filter-tag#tag-action:checked~.filter-body .column:not([data-tag~=tag-action]),.filter .filter-tag#tag-roleplaying:checked~.filter-body .column:not([data-tag~=tag-roleplaying]),.filter .filter-tag#tag-shooter:checked~.filter-body .column:not([data-tag~=tag-shooter]),.filter .filter-tag#tag-sports:checked~.filter-body .column:not([data-tag~=tag-sports]){display:none}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px fade(#454d5d,50%);top:0;transform:translateZ(100px) scale(1-"");transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:300}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(-6.5px,-6.5px,100px) scale(1-"")}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:300}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(6.5px,-6.5px,100px) scale(1-"")}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:300}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(-6.5px,6.5px,100px) scale(1-"")}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:300}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(6.5px,6.5px,100px) scale(1-"")}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5764c6;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.1rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5764c6;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5764c6;font-size:.8rem;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css index f2be32f..252fff2 100644 --- a/docs/dist/spectre-icons.css +++ b/docs/dist/spectre-icons.css @@ -10,15 +10,16 @@ vertical-align: middle; width: 1em; } + .icon::before, .icon::after { display: block; left: 50%; position: absolute; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } + .icon-arrow-down::before, .icon-arrow-left::before, .icon-arrow-right::before, @@ -34,22 +35,23 @@ height: .65em; width: .65em; } + .icon-arrow-down::before { - -ms-transform: translate(-50%, -75%) rotate(225deg); transform: translate(-50%, -75%) rotate(225deg); } + .icon-arrow-left::before { - -ms-transform: translate(-25%, -50%) rotate(-45deg); transform: translate(-25%, -50%) rotate(-45deg); } + .icon-arrow-right::before { - -ms-transform: translate(-75%, -50%) rotate(135deg); transform: translate(-75%, -50%) rotate(135deg); } + .icon-arrow-up::before { - -ms-transform: translate(-50%, -25%) rotate(45deg); transform: translate(-50%, -25%) rotate(45deg); } + .icon-back::after, .icon-forward::after { background: currentColor; @@ -57,6 +59,7 @@ height: .1rem; width: .8em; } + .icon-downward::after, .icon-upward::after { background: currentColor; @@ -64,44 +67,49 @@ height: .8em; width: .1rem; } + .icon-back::after { left: 55%; } + .icon-back::before { - -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } + .icon-downward::after { top: 45%; } + .icon-downward::before { - -ms-transform: translate(-50%, -50%) rotate(-135deg); transform: translate(-50%, -50%) rotate(-135deg); } + .icon-forward::after { left: 45%; } + .icon-forward::before { - -ms-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } + .icon-upward::after { top: 55%; } + .icon-upward::before { - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } + .icon-caret::before { border-left: .3em solid transparent; border-right: .3em solid transparent; border-top: .3em solid currentColor; content: ""; height: 0; - -ms-transform: translate(-50%, -25%); - transform: translate(-50%, -25%); + transform: translate(-50%, -25%); width: 0; } + .icon-menu::before { background: currentColor; box-shadow: 0 -.35em, 0 .35em; @@ -109,6 +117,7 @@ height: .1rem; width: 100%; } + .icon-apps::before { background: currentColor; box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; @@ -116,9 +125,10 @@ height: 3px; width: 3px; } + .icon-resize-horiz::before, -.icon-resize-vert::before, .icon-resize-horiz::after, +.icon-resize-vert::before, .icon-resize-vert::after { border: .1rem solid currentColor; border-bottom: 0; @@ -127,24 +137,25 @@ height: .45em; width: .45em; } + .icon-resize-horiz::before, .icon-resize-vert::before { - -ms-transform: translate(-50%, -90%) rotate(45deg); transform: translate(-50%, -90%) rotate(45deg); } + .icon-resize-horiz::after, .icon-resize-vert::after { - -ms-transform: translate(-50%, -10%) rotate(225deg); transform: translate(-50%, -10%) rotate(225deg); } + .icon-resize-horiz::before { - -ms-transform: translate(-90%, -50%) rotate(-45deg); transform: translate(-90%, -50%) rotate(-45deg); } + .icon-resize-horiz::after { - -ms-transform: translate(-10%, -50%) rotate(135deg); transform: translate(-10%, -50%) rotate(135deg); } + .icon-more-horiz::before, .icon-more-vert::before { background: currentColor; @@ -154,9 +165,11 @@ height: 3px; width: 3px; } + .icon-more-vert::before { box-shadow: 0 -.4em, 0 .4em; } + .icon-plus::before, .icon-minus::before, .icon-cross::before { @@ -165,6 +178,7 @@ height: .1rem; width: 100%; } + .icon-plus::after, .icon-cross::after { background: currentColor; @@ -172,44 +186,49 @@ height: 100%; width: .1rem; } + .icon-cross::before { width: 100%; } + .icon-cross::after { height: 100%; } + .icon-cross::before, .icon-cross::after { - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } + .icon-check::before { border: .1rem solid currentColor; border-right: 0; border-top: 0; content: ""; height: .5em; - -ms-transform: translate(-50%, -75%) rotate(-45deg); - transform: translate(-50%, -75%) rotate(-45deg); + transform: translate(-50%, -75%) rotate(-45deg); width: .9em; } + .icon-stop { border: .1rem solid currentColor; border-radius: 50%; } + .icon-stop::before { background: currentColor; content: ""; height: .1rem; - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: 1em; } + .icon-shutdown { border: .1rem solid currentColor; border-radius: 50%; border-top-color: transparent; } + .icon-shutdown::before { background: currentColor; content: ""; @@ -217,6 +236,7 @@ top: .1em; width: .1rem; } + .icon-refresh::before { border: .1rem solid currentColor; border-radius: 50%; @@ -225,6 +245,7 @@ height: 1em; width: 1em; } + .icon-refresh::after { border: .2em solid currentColor; border-left-color: transparent; @@ -235,6 +256,7 @@ top: 20%; width: 0; } + .icon-search::before { border: .1rem solid currentColor; border-radius: 50%; @@ -242,28 +264,28 @@ height: .75em; left: 5%; top: 5%; - -ms-transform: translate(0, 0) rotate(45deg); transform: translate(0, 0) rotate(45deg); width: .75em; } + .icon-search::after { background: currentColor; content: ""; height: .1rem; left: 80%; top: 80%; - -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: .4em; } + .icon-edit::before { border: .1rem solid currentColor; content: ""; height: .4em; - -ms-transform: translate(-40%, -60%) rotate(-45deg); transform: translate(-40%, -60%) rotate(-45deg); width: .85em; } + .icon-edit::after { border: .15em solid currentColor; border-right-color: transparent; @@ -272,10 +294,10 @@ height: 0; left: 5%; top: 95%; - -ms-transform: translate(0, -100%); transform: translate(0, -100%); width: 0; } + .icon-delete::before { border: .1rem solid currentColor; border-bottom-left-radius: .1rem; @@ -286,6 +308,7 @@ top: 60%; width: .75em; } + .icon-delete::after { background: currentColor; box-shadow: -.25em .2em, .25em .2em; @@ -294,12 +317,14 @@ top: .05rem; width: .5em; } + .icon-share { border: .1rem solid currentColor; border-radius: .1rem; border-right: 0; border-top: 0; } + .icon-share::before { border: .1rem solid currentColor; border-left: 0; @@ -308,10 +333,10 @@ height: .4em; left: 100%; top: .25em; - -ms-transform: translate(-125%, -50%) rotate(-45deg); transform: translate(-125%, -50%) rotate(-45deg); width: .4em; } + .icon-share::after { border: .1rem solid currentColor; border-bottom: 0; @@ -321,6 +346,7 @@ height: .5em; width: .6em; } + .icon-flag::before { background: currentColor; content: ""; @@ -328,6 +354,7 @@ left: 15%; width: .1rem; } + .icon-flag::after { border: .1rem solid currentColor; border-bottom-right-radius: .1rem; @@ -339,6 +366,7 @@ top: 35%; width: .8em; } + .icon-bookmark::before { border: .1rem solid currentColor; border-bottom: 0; @@ -348,6 +376,7 @@ height: .9em; width: .8em; } + .icon-bookmark::after { border: .1rem solid currentColor; border-bottom: 0; @@ -355,14 +384,15 @@ border-radius: .1rem; content: ""; height: .5em; - -ms-transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); width: .5em; } + .icon-download, .icon-upload { border-bottom: .1rem solid currentColor; } + .icon-download::before, .icon-upload::before { border: .1rem solid currentColor; @@ -370,10 +400,10 @@ border-right: 0; content: ""; height: .5em; - -ms-transform: translate(-50%, -60%) rotate(-135deg); - transform: translate(-50%, -60%) rotate(-135deg); + transform: translate(-50%, -60%) rotate(-135deg); width: .5em; } + .icon-download::after, .icon-upload::after { background: currentColor; @@ -382,35 +412,37 @@ top: 40%; width: .1rem; } + .icon-upload::before { - -ms-transform: translate(-50%, -60%) rotate(45deg); transform: translate(-50%, -60%) rotate(45deg); } + .icon-upload::after { top: 50%; } + .icon-time { border: .1rem solid currentColor; border-radius: 50%; } + .icon-time::before { background: currentColor; content: ""; height: .4em; - -ms-transform: translate(-50%, -75%); transform: translate(-50%, -75%); width: .1rem; } + .icon-time::after { background: currentColor; content: ""; height: .3em; - -ms-transform: translate(-50%, -75%) rotate(90deg); transform: translate(-50%, -75%) rotate(90deg); - -ms-transform-origin: 50% 90%; transform-origin: 50% 90%; width: .1rem; } + .icon-mail::before { border: .1rem solid currentColor; border-radius: .1rem; @@ -418,16 +450,17 @@ height: .8em; width: 1em; } + .icon-mail::after { border: .1rem solid currentColor; border-right: 0; border-top: 0; content: ""; height: .5em; - -ms-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); width: .5em; } + .icon-people::before { border: .1rem solid currentColor; border-radius: 50%; @@ -436,6 +469,7 @@ top: 25%; width: .45em; } + .icon-people::after { border: .1rem solid currentColor; border-radius: 50% 50% 0 0; @@ -444,12 +478,14 @@ top: 75%; width: .9em; } + .icon-message { border: .1rem solid currentColor; border-bottom: 0; border-radius: .1rem; border-right: 0; } + .icon-message::before { border: .1rem solid currentColor; border-bottom-right-radius: .1rem; @@ -461,6 +497,7 @@ top: 40%; width: .7em; } + .icon-message::after { background: currentColor; border-radius: .1rem; @@ -468,14 +505,15 @@ height: .3em; left: 10%; top: 100%; - -ms-transform: translate(0, -90%) rotate(45deg); transform: translate(0, -90%) rotate(45deg); width: .1rem; } + .icon-photo { border: .1rem solid currentColor; border-radius: .1rem; } + .icon-photo::before { border: .1rem solid currentColor; border-radius: 50%; @@ -485,6 +523,7 @@ top: 35%; width: .25em; } + .icon-photo::after { border: .1rem solid currentColor; border-bottom: 0; @@ -492,10 +531,10 @@ content: ""; height: .5em; left: 60%; - -ms-transform: translate(-50%, 25%) rotate(-45deg); transform: translate(-50%, 25%) rotate(-45deg); width: .5em; } + .icon-link::before, .icon-link::after { border: .1rem solid currentColor; @@ -505,36 +544,38 @@ height: .5em; width: .75em; } + .icon-link::before { - -ms-transform: translate(-70%, -45%) rotate(-45deg); transform: translate(-70%, -45%) rotate(-45deg); } + .icon-link::after { - -ms-transform: translate(-30%, -55%) rotate(135deg); transform: translate(-30%, -55%) rotate(135deg); } + .icon-location::before { border: .1rem solid currentColor; border-radius: 50% 50% 50% 0; content: ""; height: .8em; - -ms-transform: translate(-50%, -60%) rotate(-45deg); transform: translate(-50%, -60%) rotate(-45deg); width: .8em; } + .icon-location::after { border: .1rem solid currentColor; border-radius: 50%; content: ""; height: .2em; - -ms-transform: translate(-50%, -80%); transform: translate(-50%, -80%); width: .2em; } + .icon-emoji { border: .1rem solid currentColor; border-radius: 50%; } + .icon-emoji::before { border-radius: 50%; box-shadow: -.17em -.15em, .17em -.15em; @@ -542,6 +583,7 @@ height: .1em; width: .1em; } + .icon-emoji::after { border: .1rem solid currentColor; border-bottom-color: transparent; @@ -549,10 +591,10 @@ border-right-color: transparent; content: ""; height: .5em; - -ms-transform: translate(-50%, -40%) rotate(-135deg); transform: translate(-50%, -40%) rotate(-135deg); width: .5em; } + .accordion .icon, .btn .icon, .toast .icon, diff --git a/docs/dist/spectre-icons.min.css b/docs/dist/spectre-icons.min.css index 3bf210b..aeffa58 100644 --- a/docs/dist/spectre-icons.min.css +++ b/docs/dist/spectre-icons.min.css @@ -1 +1 @@ -/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{-ms-transform:translate(-50%,-75%) rotate(225deg);transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{-ms-transform:translate(-75%,-50%) rotate(135deg);transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{-ms-transform:translate(-50%,-25%) rotate(45deg);transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{-ms-transform:translate(-50%,-50%) rotate(135deg);transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{-ms-transform:translate(-50%,-90%) rotate(45deg);transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{-ms-transform:translate(-50%,-10%) rotate(225deg);transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{-ms-transform:translate(-90%,-50%) rotate(-45deg);transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{-ms-transform:translate(-10%,-50%) rotate(135deg);transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;-ms-transform:translate(-125%,-50%) rotate(-45deg);transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;-ms-transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-ms-transform:translate(-50%,-60%) rotate(-135deg);transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{-ms-transform:translate(-50%,-60%) rotate(45deg);transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;-ms-transform:translate(-50%,-75%);transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;-ms-transform:translate(-50%,-75%) rotate(90deg);transform:translate(-50%,-75%) rotate(90deg);-ms-transform-origin:50% 90%;transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;-ms-transform:translate(0,-90%) rotate(45deg);transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;-ms-transform:translate(-50%,25%) rotate(-45deg);transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;-ms-transform:translate(-50%,-60%) rotate(-45deg);transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;-ms-transform:translate(-50%,-80%);transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;-ms-transform:translate(-50%,-40%) rotate(-135deg);transform:translate(-50%,-40%) rotate(-135deg);width:.5em}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file +/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css index 8fe2f97..3e63fed 100644 --- a/docs/dist/spectre.css +++ b/docs/dist/spectre.css @@ -1,33 +1,21 @@ /*! Spectre.css | MIT License | github.com/picturepan2/spectre */ /* Manually forked from Normalize.css */ /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Correct the line height in all browsers. - * 3. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - */ -/* Document - ========================================================================== */ +/** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */ +/* Document ========================================================================== */ html { - font-family: sans-serif; - /* 3 */ - -webkit-text-size-adjust: 100%; - /* 1 */ - -ms-text-size-adjust: 100%; - /* 3 */ -} -/* Sections - ========================================================================== */ -/** - * Remove the margin in all browsers (opinionated). - */ + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 3 */ + -ms-text-size-adjust: 100%; /* 3 */ +} + +/* Sections ========================================================================== */ +/** Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/** - * Add the correct display in IE 9-. - */ + +/** Add the correct display in IE 9-. */ article, aside, footer, @@ -36,117 +24,78 @@ nav, section { display: block; } -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ + +/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: .67em 0; } -/* Grouping content - ========================================================================== */ -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ + +/* Grouping content ========================================================================== */ +/** Add the correct display in IE 9-. 1. Add the correct display in IE. */ figcaption, figure, main { - /* 1 */ - display: block; + /* 1 */ display: block; } -/** - * Add the correct margin in IE 8 (removed). - */ -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ + +/** Add the correct margin in IE 8 (removed). */ +/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ -} -/** - * 1. Correct the inheritance and scaling of font size in all browsers. (removed) - * 2. Correct the odd `em` font sizing in all browsers. - */ -/* Text-level semantics - ========================================================================== */ -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** 1. Correct the inheritance and scaling of font size in all browsers. (removed) 2. Correct the odd `em` font sizing in all browsers. */ +/* Text-level semantics ========================================================================== */ +/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { - background-color: transparent; - /* 1 */ - -webkit-text-decoration-skip: objects; - /* 2 */ -} -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) - */ -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ + +/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) */ +/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ + +/** Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ + +/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { - font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; - /* 1 (changed) */ - font-size: 1em; - /* 2 */ -} -/** - * Add the correct font style in Android 4.3-. - */ + font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; /* 1 (changed) */ + font-size: 1em; /* 2 */ +} + +/** Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } -/** - * Add the correct background and color in IE 9-. (Removed) - */ -/** - * Add the correct font size in all browsers. - */ + +/** Add the correct background and color in IE 9-. (Removed) */ +/** Add the correct font size in all browsers. */ small { font-size: 80%; - font-weight: 400; - /* (added) */ + font-weight: 400; /* (added) */ } -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ + +/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; @@ -154,93 +103,72 @@ sup { position: relative; vertical-align: baseline; } + sub { bottom: -.25em; } + sup { top: -.5em; } -/* Embedded content - ========================================================================== */ -/** - * Add the correct display in IE 9-. - */ + +/* Embedded content ========================================================================== */ +/** Add the correct display in IE 9-. */ audio, video { display: inline-block; } -/** - * Add the correct display in iOS 4-7. - */ + +/** Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } -/** - * Remove the border on images inside links in IE 10-. - */ + +/** Remove the border on images inside links in IE 10-. */ img { border-style: none; } -/** - * Hide the overflow in IE. - */ + +/** Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } -/* Forms - ========================================================================== */ -/** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ + +/* Forms ========================================================================== */ +/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { - font-family: inherit; - /* 1 (changed) */ - font-size: inherit; - /* 1 (changed) */ - line-height: inherit; - /* 1 (changed) */ - margin: 0; - /* 2 */ + font-family: inherit; /* 1 (changed) */ + font-size: inherit; /* 1 (changed) */ + line-height: inherit; /* 1 (changed) */ + margin: 0; /* 2 */ } -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ + +/** Show the overflow in IE. 1. Show the overflow in Edge. */ button, input { - /* 1 */ - overflow: visible; + /* 1 */ overflow: visible; } -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ + +/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */ button, select { - /* 1 */ - text-transform: none; -} -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ + /* 1 */ text-transform: none; +} + +/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; - /* 2 */ + -webkit-appearance: button; /* 2 */ } -/** - * Remove the inner border and padding in Firefox. - */ + +/** Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, @@ -248,147 +176,109 @@ button::-moz-focus-inner, border-style: none; padding: 0; } -/** - * Restore the focus styles unset by the previous rule (removed). - */ -/** - * Change the border, margin, and padding in all browsers (opinionated) (changed). - */ + +/** Restore the focus styles unset by the previous rule (removed). */ +/** Change the border, margin, and padding in all browsers (opinionated) (changed). */ fieldset { border: 0; margin: 0; padding: 0; } -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ + +/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { - box-sizing: border-box; - /* 1 */ - color: inherit; - /* 2 */ - display: table; - /* 1 */ - max-width: 100%; - /* 1 */ - padding: 0; - /* 3 */ - white-space: normal; - /* 1 */ -} -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } -/** - * Remove the default vertical scrollbar in IE. - */ + +/** Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ + +/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ + +/** Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ + +/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type="search"] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. - */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ + +/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} -/* Interactive - ========================================================================== */ -/* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive ========================================================================== */ +/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } -/* - * Add the correct display in all browsers. - */ + +/* Add the correct display in all browsers. */ summary { display: list-item; } -/* Scripting - ========================================================================== */ -/** - * Add the correct display in IE 9-. - */ + +/* Scripting ========================================================================== */ +/** Add the correct display in IE 9-. */ canvas { display: inline-block; } -/** - * Add the correct display in IE. - */ + +/** Add the correct display in IE. */ template { display: none; } -/* Hidden - ========================================================================== */ -/** - * Add the correct display in IE 10-. - */ + +/* Hidden ========================================================================== */ +/** Add the correct display in IE 10-. */ [hidden] { display: none; } + *, *::before, *::after { box-sizing: inherit; } + html { box-sizing: border-box; font-size: 20px; - line-height: 1.42857143; + line-height: 1.42857; -webkit-tap-highlight-color: transparent; } + body { background: #fff; color: #50596c; @@ -397,14 +287,17 @@ body { overflow-x: hidden; text-rendering: optimizeLegibility; } + a { color: #5764c6; outline: none; text-decoration: none; } + a:focus { box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + a:focus, a:hover, a:active, @@ -412,6 +305,7 @@ a.active { color: #4452c0; text-decoration: underline; } + h1, h2, h3, @@ -424,6 +318,7 @@ h6 { margin-bottom: .25em; margin-top: 0; } + .h1, .h2, .h3, @@ -432,168 +327,202 @@ h6 { .h6 { font-weight: 500; } + h1, .h1 { font-size: 2rem; } + h2, .h2 { font-size: 1.6rem; } + h3, .h3 { font-size: 1.4rem; } + h4, .h4 { font-size: 1.2rem; } + h5, .h5 { font-size: 1rem; } + h6, .h6 { font-size: .8rem; } + p { line-height: 1.2rem; margin: 0 0 .8rem; } + a, ins, u { -webkit-text-decoration-skip: ink edges; text-decoration-skip: ink edges; } + abbr[title] { border-bottom: .05rem dotted; cursor: help; text-decoration: none; } + kbd { background: #454d5d; border-radius: .1rem; - color: #fff; + color: #fff; line-height: 1; padding: .15rem .2rem; } + mark { background: #ffe9b3; border-radius: .1rem; - color: #50596c; + color: #50596c; line-height: 1; padding: .15rem .2rem; } + blockquote { border-left: .1rem solid #e7e9ed; margin-left: 0; padding: .4rem .8rem; } + blockquote p:last-child { margin-bottom: 0; } + ul, ol { margin: .8rem 0 .8rem .8rem; padding: 0; } + ul ul, -ol ul, ul ol, +ol ul, ol ol { margin: .8rem 0 .8rem .8rem; } + ul li, ol li { margin-top: .4rem; } + ul { list-style: disc inside; } + ul ul { list-style-type: circle; } + ol { list-style: decimal inside; } + ol ol { list-style-type: lower-alpha; } + dl dt { font-weight: bold; } + dl dd { margin: .4rem 0 .8rem 0; } + :lang(zh) { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif; } + :lang(ja) { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif; } + :lang(ko) { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif; } + :lang(zh) ins, -:lang(ja) ins, -.cjk ins, :lang(zh) u, +:lang(ja) ins, :lang(ja) u, +.cjk ins, .cjk u { border-bottom: .05rem solid; text-decoration: none; } + :lang(zh) del + del, -:lang(ja) del + del, -.cjk del + del, :lang(zh) del + s, -:lang(ja) del + s, -.cjk del + s, :lang(zh) ins + ins, -:lang(ja) ins + ins, -.cjk ins + ins, :lang(zh) ins + u, -:lang(ja) ins + u, -.cjk ins + u, :lang(zh) s + del, -:lang(ja) s + del, -.cjk s + del, :lang(zh) s + s, -:lang(ja) s + s, -.cjk s + s, :lang(zh) u + ins, -:lang(ja) u + ins, -.cjk u + ins, :lang(zh) u + u, +:lang(ja) del + del, +:lang(ja) del + s, +:lang(ja) ins + ins, +:lang(ja) ins + u, +:lang(ja) s + del, +:lang(ja) s + s, +:lang(ja) u + ins, :lang(ja) u + u, +.cjk del + del, +.cjk del + s, +.cjk ins + ins, +.cjk ins + u, +.cjk s + del, +.cjk s + s, +.cjk u + ins, .cjk u + u { margin-left: .125em; } + .table { border-collapse: collapse; border-spacing: 0; text-align: left; width: 100%; } + .table.table-striped tbody tr:nth-of-type(odd) { background: #f8f9fa; } + .table.table-hover tbody tr:hover { background: #f0f1f4; } + .table tbody tr.active, .table.table-striped tbody tr.active { background: #f0f1f4; } + .table td, .table th { border-bottom: .05rem solid #e7e9ed; padding: .6rem .4rem; } + .table th { border-bottom-width: .1rem; } + .btn { -webkit-appearance: none; -moz-appearance: none; @@ -619,15 +548,18 @@ dl dd { vertical-align: middle; white-space: nowrap; } + .btn:focus { box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + .btn:focus, .btn:hover { background: #eff1fa; border-color: #4c59c2; text-decoration: none; } + .btn:active, .btn.active { background: #4c59c2; @@ -635,11 +567,13 @@ dl dd { color: #fff; text-decoration: none; } + .btn:active.loading::after, .btn.active.loading::after { border-bottom-color: #fff; border-left-color: #fff; } + .btn[disabled], .btn:disabled, .btn.disabled { @@ -647,63 +581,76 @@ dl dd { opacity: .5; pointer-events: none; } + .btn.btn-primary { background: #5764c6; border-color: #4c59c2; color: #fff; } + .btn.btn-primary:focus, .btn.btn-primary:hover { background: #4452c0; border-color: #3e4cb6; color: #fff; } + .btn.btn-primary:active, .btn.btn-primary.active { background: #3f4eba; border-color: #3b49af; color: #fff; } + .btn.btn-primary.loading::after { border-bottom-color: #fff; border-left-color: #fff; } + .btn.btn-link { background: transparent; border-color: transparent; color: #5764c6; } + .btn.btn-link:focus, .btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link.active { color: #4452c0; } + .btn.btn-sm { font-size: .6rem; height: 1.2rem; padding: .05rem .3rem; } + .btn.btn-lg { font-size: .8rem; height: 2rem; padding: .45rem .6rem; } + .btn.btn-block { display: block; width: 100%; } + .btn.btn-action { padding-left: 0; - padding-right: 0; + padding-right: 0; width: 1.6rem; } + .btn.btn-action.btn-sm { width: 1.2rem; } + .btn.btn-action.btn-lg { width: 2rem; } + .btn.btn-clear { background: transparent; border: 0; @@ -717,70 +664,87 @@ dl dd { text-decoration: none; width: .8rem; } + .btn.btn-clear:hover { opacity: .85; } + .btn.btn-clear::before { content: "\2715"; } + .btn-group { display: inline-flex; display: -ms-inline-flexbox; -ms-flex-wrap: wrap; flex-wrap: wrap; } + .btn-group .btn { -ms-flex: 1 0 auto; flex: 1 0 auto; } + .btn-group .btn:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } + .btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; margin-left: -.05rem; } + .btn-group .btn:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.05rem; } + .btn-group .btn:focus, .btn-group .btn:hover, .btn-group .btn:active, .btn-group .btn.active { z-index: 1; } + .btn-group.btn-group-block { - display: flex; + display: flex; display: -ms-flexbox; } + .btn-group.btn-group-block .btn { -ms-flex: 1 0 0; flex: 1 0 0; } + .form-group:not(:last-child) { margin-bottom: .4rem; } + fieldset { margin-bottom: .8rem; } + legend { font-size: .8rem; font-weight: 500; margin-bottom: .8rem; } + .form-label { display: block; padding: .3rem 0; } + .form-label.label-sm { padding: .1rem 0; } + .form-label.label-lg { padding: .5rem 0; } + .form-input { -webkit-appearance: none; -moz-appearance: none; @@ -801,53 +765,66 @@ legend { transition: all .2s ease; width: 100%; } + .form-input:focus { border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + .form-input::-webkit-input-placeholder { color: #acb3c2; } + .form-input:-ms-input-placeholder { color: #acb3c2; } + .form-input::placeholder { color: #acb3c2; } + .form-input.input-sm { font-size: .6rem; height: 1.2rem; padding: .05rem .4rem; } + .form-input.input-lg { font-size: .8rem; height: 2rem; padding: .45rem .4rem; } + .form-input.input-inline { display: inline-block; vertical-align: middle; width: auto; } -textarea.form-input { + +.form-input[type="file"] { height: auto; } -.form-input[type="file"] { + +textarea.form-input { height: auto; } + .form-input-hint { color: #acb3c2; font-size: .6rem; margin-top: .2rem; } + .has-success .form-input-hint, .is-success + .form-input-hint { color: #32b643; } + .has-error .form-input-hint, .is-error + .form-input-hint { color: #e85600; } + .form-select { -webkit-appearance: none; -moz-appearance: none; @@ -863,61 +840,74 @@ textarea.form-input { vertical-align: middle; width: 100%; } + .form-select[size], .form-select[multiple] { height: auto; } + .form-select[size] option, .form-select[multiple] option { padding: .1rem .2rem; } + .form-select:not([multiple]):not([size]) { - background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem; + background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem; padding-right: 1.1rem; } + .form-select:focus { border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + .form-select::-ms-expand { display: none; } + .form-select.select-sm { font-size: .6rem; height: 1.2rem; padding: .05rem 1.1rem .05rem .4rem; } + .form-select.select-lg { font-size: .8rem; height: 2rem; padding: .45rem 1.1rem .45rem .4rem; } + .has-icon-left, .has-icon-right { position: relative; } + .has-icon-left .form-icon, .has-icon-right .form-icon { height: .7rem; margin: 0 .25rem; position: absolute; top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); width: .7rem; } + .has-icon-left .form-icon { left: .05rem; } + .has-icon-left .form-input { padding-left: 1.2rem; } + .has-icon-right .form-icon { right: .05rem; } + .has-icon-right .form-input { padding-right: 1.2rem; } + .form-checkbox, .form-radio, .form-switch { @@ -926,6 +916,7 @@ textarea.form-input { padding: .1rem 1.1rem; position: relative; } + .form-checkbox input, .form-radio input, .form-switch input { @@ -936,27 +927,31 @@ textarea.form-input { position: absolute; width: 1px; } + .form-checkbox input:focus + .form-icon, .form-radio input:focus + .form-icon, .form-switch input:focus + .form-icon { border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + .form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon { background: #5764c6; border-color: #5764c6; } + .form-checkbox .form-icon, .form-radio .form-icon, .form-switch .form-icon { border: .05rem solid #caced7; cursor: pointer; display: inline-block; - position: absolute; + position: absolute; transition: all .2s ease; } + .form-checkbox .form-icon, .form-radio .form-icon { background: #fff; @@ -965,13 +960,16 @@ textarea.form-input { top: .25rem; width: .7rem; } + .form-checkbox input:active + .form-icon, .form-radio input:active + .form-icon { background: #f0f1f4; } + .form-checkbox .form-icon { border-radius: .1rem; } + .form-checkbox input:checked + .form-icon::before { background-clip: padding-box; border: .1rem solid #fff; @@ -984,14 +982,15 @@ textarea.form-input { margin-top: -6px; position: absolute; top: 50%; - -ms-transform: rotate(45deg); transform: rotate(45deg); width: 6px; } + .form-checkbox input:indeterminate + .form-icon { background: #5764c6; border-color: #5764c6; } + .form-checkbox input:indeterminate + .form-icon::before { background: #fff; content: ""; @@ -1003,9 +1002,11 @@ textarea.form-input { top: 50%; width: 10px; } + .form-radio .form-icon { border-radius: .35rem; } + .form-radio input:checked + .form-icon::before { background: #fff; border-radius: .1rem; @@ -1018,9 +1019,11 @@ textarea.form-input { top: 50%; width: 4px; } + .form-switch { padding-left: 2rem; } + .form-switch .form-icon { background: #e7e9ed; background-clip: padding-box; @@ -1030,6 +1033,7 @@ textarea.form-input { top: .15rem; width: 1.6rem; } + .form-switch .form-icon::before { background: #fff; border-radius: .4rem; @@ -1042,16 +1046,20 @@ textarea.form-input { transition: all .2s ease; width: .8rem; } + .form-switch input:checked + .form-icon::before { left: 14px; } + .form-switch input:active + .form-icon::before { background: #f8f9fa; } + .input-group { - display: flex; + display: flex; display: -ms-flexbox; } + .input-group .input-group-addon { background: #f8f9fa; border: .05rem solid #caced7; @@ -1059,22 +1067,27 @@ textarea.form-input { line-height: 1rem; padding: .25rem .4rem; } + .input-group .input-group-addon.addon-sm { font-size: .6rem; padding: .05rem .4rem; } + .input-group .input-group-addon.addon-lg { font-size: .8rem; padding: .45rem .4rem; } + .input-group .form-input, .input-group .form-select { -ms-flex: 1 1 auto; flex: 1 1 auto; } + .input-group .input-group-btn { z-index: 1; } + .input-group .form-input:first-child:not(:last-child), .input-group .form-select:first-child:not(:last-child), .input-group .input-group-addon:first-child:not(:last-child), @@ -1082,6 +1095,7 @@ textarea.form-input { border-bottom-right-radius: 0; border-top-right-radius: 0; } + .input-group .form-input:not(:first-child):not(:last-child), .input-group .form-select:not(:first-child):not(:last-child), .input-group .input-group-addon:not(:first-child):not(:last-child), @@ -1089,6 +1103,7 @@ textarea.form-input { border-radius: 0; margin-left: -.05rem; } + .input-group .form-input:last-child:not(:first-child), .input-group .form-select:last-child:not(:first-child), .input-group .input-group-addon:last-child:not(:first-child), @@ -1097,158 +1112,189 @@ textarea.form-input { border-top-left-radius: 0; margin-left: -.05rem; } + .input-group .form-input:focus, .input-group .form-select:focus, .input-group .input-group-addon:focus, .input-group .input-group-btn:focus { z-index: 2; } + .input-group .form-select { width: auto; } + .input-group.input-inline { - display: inline-flex; + display: inline-flex; display: -ms-inline-flexbox; } + .has-success .form-input, -.has-success .form-select, .form-input.is-success, +.has-success .form-select, .form-select.is-success { border-color: #32b643; } + .has-success .form-input:focus, -.has-success .form-select:focus, .form-input.is-success:focus, +.has-success .form-select:focus, .form-select.is-success:focus { box-shadow: 0 0 0 .1rem rgba(50, 182, 67, .2); } + .has-error .form-input, -.has-error .form-select, .form-input.is-error, +.has-error .form-select, .form-select.is-error { border-color: #e85600; } + .has-error .form-input:focus, -.has-error .form-select:focus, .form-input.is-error:focus, +.has-error .form-select:focus, .form-select.is-error:focus { box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); } + .has-error .form-checkbox .form-icon, -.has-error .form-radio .form-icon, -.has-error .form-switch .form-icon, .form-checkbox.is-error .form-icon, +.has-error .form-radio .form-icon, .form-radio.is-error .form-icon, +.has-error .form-switch .form-icon, .form-switch.is-error .form-icon { border-color: #e85600; } + .has-error .form-checkbox input:checked + .form-icon, -.has-error .form-radio input:checked + .form-icon, -.has-error .form-switch input:checked + .form-icon, .form-checkbox.is-error input:checked + .form-icon, +.has-error .form-radio input:checked + .form-icon, .form-radio.is-error input:checked + .form-icon, +.has-error .form-switch input:checked + .form-icon, .form-switch.is-error input:checked + .form-icon { background: #e85600; border-color: #e85600; } + .has-error .form-checkbox input:focus + .form-icon, -.has-error .form-radio input:focus + .form-icon, -.has-error .form-switch input:focus + .form-icon, .form-checkbox.is-error input:focus + .form-icon, +.has-error .form-radio input:focus + .form-icon, .form-radio.is-error input:focus + .form-icon, +.has-error .form-switch input:focus + .form-icon, .form-switch.is-error input:focus + .form-icon { border-color: #e85600; box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); } + .form-input:not(:placeholder-shown):invalid { border-color: #e85600; } + .form-input:not(:placeholder-shown):invalid:focus { box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2); } + .form-input:not(:placeholder-shown):invalid + .form-input-hint { color: #e85600; } + .form-input:disabled, -.form-select:disabled, .form-input.disabled, +.form-select:disabled, .form-select.disabled { background-color: #f0f1f4; cursor: not-allowed; opacity: .5; } + .form-input[readonly] { background-color: #f8f9fa; } + input:disabled + .form-icon, input.disabled + .form-icon { background: #f0f1f4; cursor: not-allowed; opacity: .5; } + .form-switch input:disabled + .form-icon::before, .form-switch input.disabled + .form-icon::before { background: #fff; } + .form-horizontal { padding: .4rem; } + .form-horizontal .form-group { - display: flex; + display: flex; display: -ms-flexbox; } + .form-horizontal .form-checkbox, .form-horizontal .form-radio, .form-horizontal .form-switch { margin: .2rem 0; } + .label { background: #f8f9fa; border-radius: .1rem; color: #5b657a; display: inline-block; + line-height: 1; line-height: 1; padding: .15rem .2rem; } + .label.label-rounded { border-radius: 5rem; padding-left: .4rem; padding-right: .4rem; } + .label.label-primary { background: #5764c6; color: #fff; } + .label.label-secondary { background: #eff1fa; color: #5764c6; } + .label.label-success { background: #32b643; color: #fff; } + .label.label-warning { background: #ffb700; color: #fff; } + .label.label-error { background: #e85600; color: #fff; } + code { background: #fdf4f4; border-radius: .1rem; - color: #e06870; + color: #e06870; font-size: .65rem; line-height: 1; padding: .15rem .2rem; } + .code { border-radius: .1rem; color: #50596c; line-height: 1rem; position: relative; } + .code::before { color: #acb3c2; content: attr(data-lang); @@ -1257,6 +1303,7 @@ code { right: .4rem; top: .1rem; } + .code code { background: #f8f9fa; color: inherit; @@ -1266,17 +1313,21 @@ code { padding: 1rem; width: 100%; } + .img-responsive { display: block; height: auto; max-width: 100%; } + .img-fit-cover { object-fit: cover; } + .img-fit-contain { object-fit: contain; } + .video-responsive { display: block; overflow: hidden; @@ -1284,11 +1335,13 @@ code { position: relative; width: 100%; } + .video-responsive::before { content: ""; display: block; padding-bottom: 56.25%; } + .video-responsive iframe, .video-responsive object, .video-responsive embed { @@ -1301,24 +1354,30 @@ code { top: 0; width: 100%; } + .video-responsive video { height: auto; max-width: 100%; width: 100%; } + .video-responsive-4-3::before { padding-bottom: 75%; } + .video-responsive-1-1::before { padding-bottom: 100%; } + .figure { margin: 0 0 .4rem 0; } + .figure .figure-caption { color: #727e96; margin-top: .4rem; } + .container { margin-left: auto; margin-right: auto; @@ -1326,21 +1385,27 @@ code { padding-right: .4rem; width: 100%; } + .container.grid-xl { max-width: 1296px; } + .container.grid-lg { max-width: 976px; } + .container.grid-md { max-width: 856px; } + .container.grid-sm { max-width: 616px; } + .container.grid-xs { max-width: 496px; } + .show-xs, .show-sm, .show-md, @@ -1348,6 +1413,7 @@ code { .show-xl { display: none !important; } + .columns { display: flex; display: -ms-flexbox; @@ -1356,19 +1422,23 @@ code { margin-left: -.4rem; margin-right: -.4rem; } + .columns.col-gapless { margin-left: 0; margin-right: 0; } + .columns.col-gapless > .column { padding-left: 0; padding-right: 0; } + .columns.col-oneline { -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; } + .column { -ms-flex: 1; flex: 1; @@ -1376,6 +1446,7 @@ code { padding-left: .4rem; padding-right: .4rem; } + .column.col-12, .column.col-11, .column.col-10, @@ -1391,59 +1462,76 @@ code { -ms-flex: none; flex: none; } + .col-12 { width: 100%; } + .col-11 { width: 91.66666667%; } + .col-10 { width: 83.33333333%; } + .col-9 { width: 75%; } + .col-8 { width: 66.66666667%; } + .col-7 { width: 58.33333333%; } + .col-6 { width: 50%; } + .col-5 { width: 41.66666667%; } + .col-4 { width: 33.33333333%; } + .col-3 { width: 25%; } + .col-2 { width: 16.66666667%; } + .col-1 { width: 8.33333333%; } + .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: none; width: auto; } + .col-mx-auto { margin-left: auto; margin-right: auto; } + .col-ml-auto { margin-left: auto; } + .col-mr-auto { margin-right: auto; } -@media screen and (max-width: 1280px) { + +@media (max-width: 1280px) { .col-xl-12, .col-xl-11, .col-xl-10, @@ -1502,7 +1590,8 @@ code { display: block !important; } } -@media screen and (max-width: 960px) { + +@media (max-width: 960px) { .col-lg-12, .col-lg-11, .col-lg-10, @@ -1561,7 +1650,8 @@ code { display: block !important; } } -@media screen and (max-width: 840px) { + +@media (max-width: 840px) { .col-md-12, .col-md-11, .col-md-10, @@ -1620,7 +1710,8 @@ code { display: block !important; } } -@media screen and (max-width: 600px) { + +@media (max-width: 600px) { .col-sm-12, .col-sm-11, .col-sm-10, @@ -1679,7 +1770,8 @@ code { display: block !important; } } -@media screen and (max-width: 480px) { + +@media (max-width: 480px) { .col-xs-12, .col-xs-11, .col-xs-10, @@ -1738,6 +1830,7 @@ code { display: block !important; } } + .navbar { align-items: stretch; display: flex; @@ -1748,95 +1841,64 @@ code { flex-wrap: wrap; justify-content: space-between; } + .navbar .navbar-section { align-items: center; display: flex; display: -ms-flexbox; -ms-flex: 1 0 0; - flex: 1 0 0; + flex: 1 0 0; -ms-flex-align: center; } + .navbar .navbar-section:last-child { -ms-flex-pack: end; justify-content: flex-end; } + .navbar .navbar-center { align-items: center; display: flex; display: -ms-flexbox; -ms-flex: 0 0 auto; - flex: 0 0 auto; + flex: 0 0 auto; -ms-flex-align: center; } + .navbar .navbar-brand { font-size: .8rem; font-weight: 500; text-decoration: none; } -.panel { - border: .05rem solid #e7e9ed; - border-radius: .1rem; - display: flex; - display: -ms-flexbox; - -ms-flex-direction: column; - flex-direction: column; -} -.panel .panel-header, -.panel .panel-footer { - -ms-flex: 0 0 auto; - flex: 0 0 auto; - padding: .8rem; -} -.panel .panel-nav { - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} -.panel .panel-body { - -ms-flex: 1 1 auto; - flex: 1 1 auto; - overflow-y: auto; - padding: 0 .8rem; -} -.empty { - background: #f8f9fa; - border-radius: .1rem; - color: #727e96; - padding: 1.6rem; - text-align: center; -} -.empty .empty-icon { - margin-bottom: .8rem; -} -.empty .empty-title, -.empty .empty-subtitle { - margin: .4rem auto; -} -.empty .empty-action { - margin-top: .8rem; -} + .accordion .accordion-item input:checked ~ .accordion-header .icon { - -ms-transform: rotate(90deg); transform: rotate(90deg); } + .accordion .accordion-item input:checked ~ .accordion-body { max-height: 1000px; } + .accordion .accordion-item .accordion-header { display: block; padding: .2rem .4rem; } + .accordion .accordion-item .accordion-header .icon { transition: all .2s ease; } + .accordion .accordion-item .accordion-body { margin-bottom: .4rem; max-height: 0; overflow: hidden; transition: max-height .2s ease; } + .form-autocomplete { position: relative; } + .form-autocomplete .form-autocomplete-input { align-content: flex-start; display: flex; @@ -1848,10 +1910,12 @@ code { min-height: 1.6rem; padding: .1rem; } + .form-autocomplete .form-autocomplete-input.is-focused { border-color: #5764c6; box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); } + .form-autocomplete .form-autocomplete-input .form-input { border-color: transparent; box-shadow: none; @@ -1863,16 +1927,19 @@ code { margin: .1rem; width: auto; } + .form-autocomplete mark { font-size: 1; padding: .1em 0; } + .form-autocomplete .menu { left: 0; position: absolute; top: 100%; width: 100%; } + .avatar { background: #5764c6; border-radius: 50%; @@ -1884,29 +1951,34 @@ code { line-height: 1; margin: 0; position: relative; - vertical-align: middle; + vertical-align: middle; width: 1.6rem; } + .avatar.avatar-xs { font-size: .4rem; height: .8rem; width: .8rem; } + .avatar.avatar-sm { font-size: .6rem; height: 1.2rem; width: 1.2rem; } + .avatar.avatar-lg { font-size: 1.2rem; height: 2.4rem; width: 2.4rem; } + .avatar.avatar-xl { font-size: 1.6rem; height: 3.2rem; width: 3.2rem; } + .avatar img { border-radius: 50%; height: 100%; @@ -1914,6 +1986,7 @@ code { width: 100%; z-index: 1; } + .avatar .avatar-icon, .avatar .avatar-presence { background: #fff; @@ -1922,11 +1995,11 @@ code { padding: .1rem; position: absolute; right: 14.64%; - -ms-transform: translate(50%, 50%); transform: translate(50%, 50%); width: 50%; z-index: 2; } + .avatar .avatar-presence { background: #acb3c2; border-radius: 50%; @@ -1934,29 +2007,34 @@ code { height: .5em; width: .5em; } + .avatar .avatar-presence.online { background: #32b643; } + .avatar .avatar-presence.busy { background: #e85600; } + .avatar .avatar-presence.away { background: #ffb700; } + .avatar[data-initial]::before { color: currentColor; content: attr(data-initial); left: 50%; position: absolute; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; } + .badge { position: relative; white-space: nowrap; } + .badge[data-badge]::after, .badge:not([data-badge])::after { background: #5764c6; @@ -1966,9 +2044,9 @@ code { color: #fff; content: attr(data-badge); display: inline-block; - -ms-transform: translate(-.1rem, -.5rem); transform: translate(-.1rem, -.5rem); } + .badge[data-badge]::after { font-size: .6rem; height: 18px; @@ -1978,6 +2056,7 @@ code { text-align: center; white-space: nowrap; } + .badge:not([data-badge])::after, .badge[data-badge=""]::after { height: 6px; @@ -1985,21 +2064,22 @@ code { padding: 0; width: 6px; } + .badge.btn::after { position: absolute; right: 0; top: 0; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } + .badge.avatar::after { position: absolute; right: 14.64%; top: 14.64%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); z-index: 100; } + .badge.avatar-xs::after { content: ""; height: .4rem; @@ -2007,28 +2087,34 @@ code { padding: 0; width: .4rem; } + .breadcrumb { list-style: none; margin: .2rem 0; padding: .2rem 0; } + .breadcrumb .breadcrumb-item { color: #727e96; display: inline-block; margin: 0; padding: .2rem 0; } + .breadcrumb .breadcrumb-item:not(:last-child) { margin-right: .2rem; } + .breadcrumb .breadcrumb-item:not(:last-child) a { color: #727e96; } + .breadcrumb .breadcrumb-item:not(:first-child)::before { color: #e7e9ed; content: "/"; padding-right: .2rem; } + .bar { background: #f0f1f4; border-radius: .1rem; @@ -2039,9 +2125,11 @@ code { height: .8rem; width: 100%; } + .bar.bar-sm { height: .2rem; } + .bar .bar-item { background: #5764c6; color: #fff; @@ -2055,30 +2143,36 @@ code { text-align: center; width: 0; } + .bar .bar-item:first-child { border-bottom-left-radius: .1rem; border-top-left-radius: .1rem; } + .bar .bar-item:last-child { border-bottom-right-radius: .1rem; border-top-right-radius: .1rem; -ms-flex-negative: 1; flex-shrink: 1; } + .bar-slider { height: .1rem; margin: .4rem 0; position: relative; } + .bar-slider .bar-item { left: 0; padding: 0; position: absolute; } + .bar-slider .bar-item:not(:last-child):first-child { background: #f0f1f4; z-index: 1; } + .bar-slider .bar-slider-btn { background: #5764c6; border: 0; @@ -2088,13 +2182,14 @@ code { position: absolute; right: 0; top: 50%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); width: .6rem; } + .bar-slider .bar-slider-btn:active { box-shadow: 0 0 0 .1rem #5764c6; } + .card { background: #fff; border: .05rem solid #e7e9ed; @@ -2104,31 +2199,38 @@ code { -ms-flex-direction: column; flex-direction: column; } + .card .card-header, .card .card-body, .card .card-footer { padding: .8rem; padding-bottom: 0; } + .card .card-header:last-child, .card .card-body:last-child, .card .card-footer:last-child { padding-bottom: .8rem; } + .card .card-image { padding-top: .8rem; } + .card .card-image:first-child { padding-top: 0; } + .card .card-image:first-child img { border-top-left-radius: .1rem; border-top-right-radius: .1rem; } + .card .card-image:last-child img { border-bottom-left-radius: .1rem; border-bottom-right-radius: .1rem; } + .chip { align-items: center; background: #f0f1f4; @@ -2144,18 +2246,22 @@ code { text-decoration: none; vertical-align: middle; } + .chip.active { background: #5764c6; color: #fff; } + .chip .avatar { margin-left: -.5rem; margin-right: .2rem; } + .dropdown { display: inline-block; position: relative; } + .dropdown .menu { animation: slide-down .15s ease 1; display: none; @@ -2165,19 +2271,44 @@ code { position: absolute; top: 100%; } + .dropdown.dropdown-right .menu { left: auto; right: 0; } + .dropdown.active .menu, .dropdown .dropdown-toggle:focus + .menu, .dropdown .menu:hover { display: block; } + .dropdown .btn-group .dropdown-toggle:nth-last-child(2) { border-bottom-right-radius: .1rem; border-top-right-radius: .1rem; } + +.empty { + background: #f8f9fa; + border-radius: .1rem; + color: #727e96; + padding: 1.6rem; + text-align: center; +} + +.empty .empty-icon { + margin-bottom: .8rem; +} + +.empty .empty-title, +.empty .empty-subtitle { + margin: .4rem auto; +} + +.empty .empty-action { + margin-top: .8rem; +} + .menu { background: #fff; border-radius: .1rem; @@ -2186,14 +2317,15 @@ code { margin: 0; min-width: 180px; padding: .4rem; - -ms-transform: translateY(.2rem); transform: translateY(.2rem); z-index: 100; } + .menu.menu-nav { background: transparent; box-shadow: none; } + .menu .menu-item { margin-top: 0; padding: 0 .4rem; @@ -2203,6 +2335,7 @@ code { -ms-user-select: none; user-select: none; } + .menu .menu-item > a { border-radius: .1rem; color: inherit; @@ -2211,26 +2344,32 @@ code { padding: .2rem .4rem; text-decoration: none; } + .menu .menu-item > a:focus, .menu .menu-item > a:hover { background: #eff1fa; color: #5764c6; } + .menu .menu-item > a:active, .menu .menu-item > a.active { background: #eff1fa; color: #5764c6; } + .menu .menu-item + .menu-item { margin-top: .2rem; } + .menu .menu-badge { float: right; padding: .2rem 0; } + .menu .menu-badge .btn { margin-top: -.1rem; } + .modal { align-items: center; bottom: 0; @@ -2246,6 +2385,7 @@ code { right: 0; top: 0; } + .modal:target, .modal.active { display: flex; @@ -2253,6 +2393,7 @@ code { opacity: 1; z-index: 400; } + .modal:target .modal-overlay, .modal.active .modal-overlay { background: rgba(248, 249, 250, .75); @@ -2264,15 +2405,18 @@ code { right: 0; top: 0; } + .modal:target .modal-container, .modal.active .modal-container { animation: slide-down .2s ease 1; max-width: 640px; z-index: 1; } + .modal.modal-sm .modal-container { max-width: 320px; } + .modal-container { background: #fff; border-radius: .1rem; @@ -2281,22 +2425,27 @@ code { padding: 0; text-align: left; } + .modal-container .modal-header { padding: .8rem; } + .modal-container .modal-header .modal-title { margin: 0; } + .modal-container .modal-body { max-height: 50vh; overflow-y: auto; padding: .8rem; position: relative; } + .modal-container .modal-footer { padding: .8rem; text-align: right; } + .nav { display: flex; display: -ms-flexbox; @@ -2305,27 +2454,33 @@ code { list-style: none; margin: .2rem 0; } + .nav .nav-item a { color: #727e96; padding: .2rem .4rem; text-decoration: none; } + .nav .nav-item a:focus, .nav .nav-item a:hover { color: #5764c6; } + .nav .nav-item.active > a { color: #5b657a; font-weight: bold; } + .nav .nav-item.active > a:focus, .nav .nav-item.active > a:hover { color: #5764c6; } + .nav .nav { margin-bottom: .4rem; margin-left: .8rem; } + .pagination { display: flex; display: -ms-flexbox; @@ -2333,13 +2488,16 @@ code { margin: .2rem 0; padding: .2rem 0; } + .pagination .page-item { margin: .2rem .05rem; } + .pagination .page-item span { display: inline-block; padding: .2rem .2rem; } + .pagination .page-item a { border-radius: .1rem; color: #727e96; @@ -2347,38 +2505,75 @@ code { padding: .2rem .4rem; text-decoration: none; } + .pagination .page-item a:focus, .pagination .page-item a:hover { color: #5764c6; } + .pagination .page-item.disabled a { cursor: default; opacity: .5; pointer-events: none; } + .pagination .page-item.active a { background: #5764c6; color: #fff; } + .pagination .page-item.page-prev, .pagination .page-item.page-next { -ms-flex: 1 0 50%; flex: 1 0 50%; } + .pagination .page-item.page-next { text-align: right; } + .pagination .page-item .page-item-title { margin: 0; } + .pagination .page-item .page-item-subtitle { margin: 0; opacity: .5; } + +.panel { + border: .05rem solid #e7e9ed; + border-radius: .1rem; + display: flex; + display: -ms-flexbox; + -ms-flex-direction: column; + flex-direction: column; +} + +.panel .panel-header, +.panel .panel-footer { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: .8rem; +} + +.panel .panel-nav { + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} + +.panel .panel-body { + -ms-flex: 1 1 auto; + flex: 1 1 auto; + overflow-y: auto; + padding: 0 .8rem; +} + .popover { display: inline-block; position: relative; } + .popover .popover-container { content: attr(data-tooltip); left: 50%; @@ -2386,54 +2581,58 @@ code { padding: .4rem; position: absolute; top: 0; - -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); transition: transform .2s ease; width: 320px; z-index: 400; } + .popover :focus + .popover-container, .popover:hover .popover-container, .popover .popover-container:hover { display: block; opacity: 1; - -ms-transform: translate(-50%, -100%) scale(1); transform: translate(-50%, -100%) scale(1); } + .popover.popover-right .popover-container { left: 100%; top: 50%; } + .popover.popover-right :focus + .popover-container, .popover.popover-right:hover .popover-container, .popover.popover-right .popover-container:hover { - -ms-transform: translate(0, -50%) scale(1); transform: translate(0, -50%) scale(1); } + .popover.popover-bottom .popover-container { left: 50%; top: 100%; } + .popover.popover-bottom :focus + .popover-container, .popover.popover-bottom:hover .popover-container, .popover.popover-bottom .popover-container:hover { - -ms-transform: translate(-50%, 0) scale(1); transform: translate(-50%, 0) scale(1); } + .popover.popover-left .popover-container { left: 0; top: 50%; } + .popover.popover-left :focus + .popover-container, .popover.popover-left:hover .popover-container, .popover.popover-left .popover-container:hover { - -ms-transform: translate(-100%, -50%) scale(1); transform: translate(-100%, -50%) scale(1); } + .popover .card { border: 0; box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3); } + .step { display: flex; display: -ms-flexbox; @@ -2443,14 +2642,16 @@ code { margin: .2rem 0; width: 100%; } + .step .step-item { -ms-flex: 1 1 0; flex: 1 1 0; margin-top: 0; - min-height: 20px; - position: relative; + min-height: 1rem; + position: relative; text-align: center; } + .step .step-item:not(:first-child)::before { background: #5764c6; content: ""; @@ -2460,12 +2661,14 @@ code { top: 9px; width: 100%; } + .step .step-item a { color: #acb3c2; display: inline-block; padding: 20px 10px 0; text-decoration: none; } + .step .step-item a::before { background: #5764c6; border: .1rem solid #fff; @@ -2476,21 +2679,24 @@ code { left: 50%; position: absolute; top: .2rem; - -ms-transform: translateX(-50%); transform: translateX(-50%); width: .6rem; z-index: 1; } + .step .step-item.active a::before { background: #fff; border: .1rem solid #5764c6; } + .step .step-item.active ~ .step-item::before { background: #e7e9ed; } + .step .step-item.active ~ .step-item a::before { background: #e7e9ed; } + .tab { align-items: center; border-bottom: .05rem solid #e7e9ed; @@ -2502,14 +2708,17 @@ code { list-style: none; margin: .2rem 0 .15rem 0; } + .tab .tab-item { margin-top: 0; } + .tab .tab-item.tab-action { -ms-flex: 1 0 auto; flex: 1 0 auto; text-align: right; } + .tab .tab-item a { border-bottom: .1rem solid transparent; color: inherit; @@ -2518,67 +2727,81 @@ code { padding: .4rem .2rem .3rem .2rem; text-decoration: none; } + .tab .tab-item a:focus, .tab .tab-item a:hover { color: #5764c6; } + .tab .tab-item.active a, .tab .tab-item a.active { border-bottom-color: #5764c6; color: #5764c6; } + .tab.tab-block .tab-item { -ms-flex: 1 0 0; flex: 1 0 0; text-align: center; } + .tab.tab-block .tab-item a { margin: 0; } + .tab.tab-block .tab-item .badge[data-badge]::after { position: absolute; right: -4px; top: -4px; - -ms-transform: translate(0, 0); transform: translate(0, 0); } + .tab:not(.tab-block) .badge { padding-right: 2px; } + .tile { align-content: space-between; align-items: flex-start; - display: flex; + display: flex; display: -ms-flexbox; -ms-flex-align: start; -ms-flex-line-pack: justify; } + .tile .tile-icon, .tile .tile-action { -ms-flex: 0 0 auto; flex: 0 0 auto; } + .tile .tile-content { -ms-flex: 1 1 auto; flex: 1 1 auto; } + .tile .tile-content:not(:first-child) { padding-left: .4rem; } + .tile .tile-content:not(:last-child) { padding-right: .4rem; } + .tile .tile-title, .tile .tile-subtitle { line-height: 1rem; } + .tile.tile-centered { - align-items: center; + align-items: center; -ms-flex-align: center; } + .tile.tile-centered .tile-content { overflow: hidden; } + .tile.tile-centered .tile-title, .tile.tile-centered .tile-subtitle { margin-bottom: 0; @@ -2586,6 +2809,7 @@ code { text-overflow: ellipsis; white-space: nowrap; } + .toast { background: rgba(69, 77, 93, .9); border: .05rem solid #454d5d; @@ -2596,38 +2820,47 @@ code { padding: .4rem; width: 100%; } + .toast.toast-primary { background: rgba(87, 100, 198, .9); border-color: #5764c6; } + .toast.toast-success { background: rgba(50, 182, 67, .9); border-color: #32b643; } + .toast.toast-warning { background: rgba(255, 183, 0, .9); border-color: #ffb700; } + .toast.toast-error { background: rgba(232, 86, 0, .9); border-color: #e85600; } + .toast a { color: #fff; text-decoration: underline; } + .toast a:focus, .toast a:hover, .toast a:active, .toast a.active { opacity: .75; } + .toast .btn-clear { margin: 2px -2px 2px 4px; } + .tooltip { position: relative; } + .tooltip::after { background: rgba(69, 77, 93, .9); border-radius: .1rem; @@ -2644,56 +2877,57 @@ code { pointer-events: none; position: absolute; text-overflow: ellipsis; - -ms-transform: translate(-50%, .4rem); transform: translate(-50%, .4rem); transition: all .2s ease; white-space: nowrap; z-index: 300; } + .tooltip:focus::after, .tooltip:hover::after { opacity: 1; - -ms-transform: translate(-50%, -.2rem); transform: translate(-50%, -.2rem); } + .tooltip[disabled], .tooltip.disabled { pointer-events: auto; } + .tooltip.tooltip-right::after { bottom: 50%; left: 100%; - -ms-transform: translate(-.2rem, 50%); transform: translate(-.2rem, 50%); } + .tooltip.tooltip-right:focus::after, .tooltip.tooltip-right:hover::after { - -ms-transform: translate(.2rem, 50%); transform: translate(.2rem, 50%); } + .tooltip.tooltip-bottom::after { bottom: auto; top: 100%; - -ms-transform: translate(-50%, -.4rem); transform: translate(-50%, -.4rem); } + .tooltip.tooltip-bottom:focus::after, .tooltip.tooltip-bottom:hover::after { - -ms-transform: translate(-50%, .2rem); transform: translate(-50%, .2rem); } + .tooltip.tooltip-left::after { bottom: 50%; left: auto; right: 100%; - -ms-transform: translate(.4rem, 50%); transform: translate(.4rem, 50%); } + .tooltip.tooltip-left:focus::after, .tooltip.tooltip-left:hover::after { - -ms-transform: translate(-.2rem, 50%); transform: translate(-.2rem, 50%); } + @keyframes loading { 0% { transform: rotate(0deg); @@ -2702,6 +2936,7 @@ code { transform: rotate(360deg); } } + @keyframes slide-down { 0% { opacity: 0; @@ -2712,103 +2947,133 @@ code { transform: translateY(0); } } + .text-primary { color: #5764c6; } + a.text-primary:focus, a.text-primary:hover { color: #4452c0; } + .text-secondary { color: #e4e6f6; } + a.text-secondary:focus, a.text-secondary:hover { color: #d1d4ef; } + .text-gray { color: #acb3c2; } + a.text-gray:focus, a.text-gray:hover { color: #9ea6b7; } + .text-light { color: #fff; } + a.text-light:focus, a.text-light:hover { color: #f2f2f2; } + .text-success { color: #32b643; } + a.text-success:focus, a.text-success:hover { color: #2da23c; } + .text-warning { color: #ffb700; } + a.text-warning:focus, a.text-warning:hover { color: #e6a500; } + .text-error { color: #e85600; } + a.text-error:focus, a.text-error:hover { color: #cf4d00; } + .bg-primary { background: #5764c6; } + .bg-secondary { background: #eff1fa; } + .bg-dark { background: #454d5d; } + .bg-gray { background: #f8f9fa; } + .bg-success { background: #32b643; } + .bg-warning { background: #ffb700; } + .bg-error { background: #e85600; } + .d-block { display: block; } + .d-inline { display: inline; } + .d-inline-block { display: inline-block; } + .d-flex { - display: flex; + display: flex; display: -ms-flexbox; } + .d-inline-flex { - display: inline-flex; + display: inline-flex; display: -ms-inline-flexbox; } + .d-none, -.hide { +.d-hide { display: none !important; } + .d-visible { visibility: visible; } + .d-invisible { visibility: hidden; } + .text-hide { background: transparent; border: 0; @@ -2817,6 +3082,7 @@ a.text-error:hover { line-height: 0; text-shadow: none; } + .text-assistive { border: 0; clip: rect(0, 0, 0, 0); @@ -2827,14 +3093,17 @@ a.text-error:hover { position: absolute; width: 1px; } -.hand { + +.c-hand { cursor: pointer; } + .divider, .divider-vert { display: block; position: relative; } + .divider[data-content]::after, .divider-vert[data-content]::after { background: #fff; @@ -2843,21 +3112,24 @@ a.text-error:hover { display: inline-block; font-size: .6rem; padding: 0 .4rem; - -ms-transform: translateY(-.55rem); transform: translateY(-.55rem); } + .divider { border-top: .05rem solid #e7e9ed; height: .05rem; margin: .4rem 0; } + .divider[data-content] { margin: .8rem 0; } + .divider-vert { display: block; padding: .8rem; } + .divider-vert::before { border-left: .05rem solid #e7e9ed; bottom: .4rem; @@ -2866,23 +3138,24 @@ a.text-error:hover { left: 50%; position: absolute; top: .4rem; - -ms-transform: translateX(-50%); transform: translateX(-50%); } + .divider-vert[data-content]::after { left: 50%; padding: .2rem 0; position: absolute; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } + .loading { color: transparent !important; min-height: .8rem; pointer-events: none; position: relative; } + .loading::after { animation: loading 500ms infinite linear; border: .1rem solid #5764c6; @@ -2900,229 +3173,296 @@ a.text-error:hover { width: .8rem; z-index: 1; } + .loading.loading-lg { min-height: 2rem; } + .loading.loading-lg::after { height: 1.6rem; margin-left: -.8rem; - margin-top: -.8rem; + margin-top: -.8rem; width: 1.6rem; } + .clearfix::after, .container::after { clear: both; content: ""; display: table; } + .float-left { float: left !important; } + .float-right { float: right !important; } + .relative { position: relative; } + .absolute { position: absolute; } + .fixed { position: fixed; } + .centered { display: block; float: none; margin-left: auto; margin-right: auto; } + .m-0 { margin: 0; } + .mb-0 { margin-bottom: 0; } + .ml-0 { margin-left: 0; } + .mr-0 { margin-right: 0; } + .mt-0 { margin-top: 0; } + .mx-0 { margin-left: 0; margin-right: 0; } + .my-0 { margin-bottom: 0; margin-top: 0; } + .m-1 { margin: .2rem; } + .mb-1 { margin-bottom: .2rem; } + .ml-1 { margin-left: .2rem; } + .mr-1 { margin-right: .2rem; } + .mt-1 { margin-top: .2rem; } + .mx-1 { margin-left: .2rem; margin-right: .2rem; } + .my-1 { margin-bottom: .2rem; margin-top: .2rem; } + .m-2 { margin: .4rem; } + .mb-2 { margin-bottom: .4rem; } + .ml-2 { margin-left: .4rem; } + .mr-2 { margin-right: .4rem; } + .mt-2 { margin-top: .4rem; } + .mx-2 { margin-left: .4rem; margin-right: .4rem; } + .my-2 { margin-bottom: .4rem; margin-top: .4rem; } + .p-0 { padding: 0; } + .pb-0 { padding-bottom: 0; } + .pl-0 { padding-left: 0; } + .pr-0 { padding-right: 0; } + .pt-0 { padding-top: 0; } + .px-0 { padding-left: 0; padding-right: 0; } + .py-0 { padding-bottom: 0; padding-top: 0; } + .p-1 { padding: .2rem; } + .pb-1 { padding-bottom: .2rem; } + .pl-1 { padding-left: .2rem; } + .pr-1 { padding-right: .2rem; } + .pt-1 { padding-top: .2rem; } + .px-1 { padding-left: .2rem; padding-right: .2rem; } + .py-1 { padding-bottom: .2rem; padding-top: .2rem; } + .p-2 { padding: .4rem; } + .pb-2 { padding-bottom: .4rem; } + .pl-2 { padding-left: .4rem; } + .pr-2 { padding-right: .4rem; } + .pt-2 { padding-top: .4rem; } + .px-2 { padding-left: .4rem; padding-right: .4rem; } + .py-2 { padding-bottom: .4rem; padding-top: .4rem; } + .rounded { border-radius: .1rem; } + .circle { border-radius: 50%; } + .text-left { text-align: left; } + .text-right { text-align: right; } + .text-center { text-align: center; } + .text-justify { text-align: justify; } + .text-lowercase { text-transform: lowercase; } + .text-uppercase { text-transform: uppercase; } + .text-capitalize { text-transform: capitalize; } + .text-normal { font-weight: normal; } + .text-bold { font-weight: bold; } + .text-italic { font-style: italic; } + .text-large { font-size: 1.2em; } + .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .text-clip { overflow: hidden; text-overflow: clip; white-space: nowrap; } + .text-break { -webkit-hyphens: auto; -ms-hyphens: auto; diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css index 5a8f4c3..45189ba 100644 --- a/docs/dist/spectre.min.css +++ b/docs/dist/spectre.min.css @@ -1 +1 @@ -/*! Spectre.css | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.42857143;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.7rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5764c6;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}a.active,a:active,a:focus,a:hover{color:#4452c0;text-decoration:underline}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.25em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{line-height:1.2rem;margin:0 0 .8rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;line-height:1;padding:.15rem .2rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;line-height:1;padding:.15rem .2rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table.table-hover tbody tr:hover{background:#f0f1f4}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5764c6;border-radius:.1rem;color:#5764c6;cursor:pointer;display:inline-block;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.btn:focus,.btn:hover{background:#eff1fa;border-color:#4c59c2;text-decoration:none}.btn.active,.btn:active{background:#4c59c2;border-color:#3e4cb6;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5764c6;border-color:#4c59c2;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4452c0;border-color:#3e4cb6;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3f4eba;border-color:#3b49af;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5764c6}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#4452c0}.btn.btn-sm{font-size:.6rem;height:1.2rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.8rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.6rem}.btn.btn-action.btn-sm{width:1.2rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:.45;padding:0 2px;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.85}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.8rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;padding:.3rem 0}.form-label.label-sm{padding:.1rem 0}.form-label.label-lg{padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.7rem;height:1.6rem;line-height:1rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.6rem;height:1.2rem;padding:.05rem .4rem}.form-input.input-lg{font-size:.8rem;height:2rem;padding:.45rem .4rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}textarea.form-input{height:auto}.form-input[type=file]{height:auto}.form-input-hint{color:#acb3c2;font-size:.6rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.1rem}.form-select:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.6rem;height:1.2rem;padding:.05rem 1.1rem .05rem .4rem}.form-select.select-lg{font-size:.8rem;height:2rem;padding:.45rem 1.1rem .45rem .4rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.7rem;margin:0 .25rem;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);width:.7rem}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.2rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.2rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;padding:.1rem 1.1rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.7rem;left:0;top:.25rem;width:.7rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:10px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;-ms-transform:rotate(45deg);transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:.35rem}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:.1rem;content:"";height:4px;left:50%;margin-left:-2px;margin-top:-2px;position:absolute;top:50%;width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.15rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:.4rem;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.25rem .4rem}.input-group .input-group-addon.addon-sm{font-size:.6rem;padding:.05rem .4rem}.input-group .input-group-addon.addon-lg{font-size:.8rem;padding:.45rem .4rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.2rem 0}.label{background:#f8f9fa;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1;padding:.15rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5764c6;color:#fff}.label.label-secondary{background:#eff1fa;color:#5764c6}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fdf4f4;border-radius:.1rem;color:#e06870;font-size:.65rem;line-height:1;padding:.15rem .2rem}.code{border-radius:.1rem;color:#50596c;line-height:1rem;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.6rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:inherit;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.video-responsive video{height:auto;max-width:100%;width:100%}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#727e96;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media screen and (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media screen and (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media screen and (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media screen and (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media screen and (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.8rem;font-weight:500;text-decoration:none}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#727e96;padding:1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.accordion .accordion-item input:checked~.accordion-header .icon{-ms-transform:rotate(90deg);transform:rotate(90deg)}.accordion .accordion-item input:checked~.accordion-body{max-height:1000px}.accordion .accordion-item .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-item .accordion-header .icon{transition:all .2s ease}.accordion .accordion-item .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete mark{font-size:1;padding:.1em 0}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.avatar{background:#5764c6;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;-ms-transform:translate(50%,50%);transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5764c6;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;-ms-transform:translate(-.1rem,-.5rem);transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.6rem;height:18px;line-height:1;min-width:18px;padding:3px 5px;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#727e96;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#727e96}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.2rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5764c6;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.6rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5764c6;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5764c6}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#727e96;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;height:1.2rem;margin:.1rem;max-width:100%;padding:.1rem .5rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5764c6;color:#fff}.chip .avatar{margin-left:-.5rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;-ms-transform:translateY(.2rem);transform:translateY(.2rem);z-index:100}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#eff1fa;color:#5764c6}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#eff1fa;color:#5764c6}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;max-width:640px;z-index:1}.modal.modal-sm .modal-container{max-width:320px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:block;padding:0;text-align:left}.modal-container .modal-header{padding:.8rem}.modal-container .modal-header .modal-title{margin:0}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#727e96;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5764c6}.nav .nav-item.active>a{color:#5b657a;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5764c6}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#727e96;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5764c6}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5764c6;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.popover{display:inline-block;position:relative}.popover .popover-container{content:attr(data-tooltip);left:50%;opacity:0;padding:.4rem;position:absolute;top:0;-ms-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:400}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;-ms-transform:translate(-50%,-100%) scale(1);transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{-ms-transform:translate(0,-50%) scale(1);transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{-ms-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{-ms-transform:translate(-100%,-50%) scale(1);transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:20px;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5764c6;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5764c6;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;-ms-transform:translateX(-50%);transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5764c6}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5764c6}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5764c6;color:#5764c6}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:-4px;top:-4px;-ms-transform:translate(0,0);transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:2px}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,100,198,.9);border-color:#5764c6}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:2px -2px 2px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.6rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;-ms-transform:translate(-50%,.4rem);transform:translate(-50%,.4rem);transition:all .2s ease;white-space:nowrap;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;-ms-transform:translate(-50%,-.2rem);transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;-ms-transform:translate(-.2rem,50%);transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{-ms-transform:translate(.2rem,50%);transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;-ms-transform:translate(-50%,-.4rem);transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{-ms-transform:translate(-50%,.2rem);transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;-ms-transform:translate(.4rem,50%);transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{-ms-transform:translate(-.2rem,50%);transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5764c6}a.text-primary:focus,a.text-primary:hover{color:#4452c0}.text-secondary{color:#e4e6f6}a.text-secondary:focus,a.text-secondary:hover{color:#d1d4ef}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}.bg-primary{background:#5764c6}.bg-secondary{background:#eff1fa}.bg-dark{background:#454d5d}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643}.bg-warning{background:#ffb700}.bg-error{background:#e85600}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-none,.hide{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hand{cursor:pointer}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.6rem;padding:0 .4rem;-ms-transform:translateY(-.55rem);transform:translateY(-.55rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;-ms-transform:translateX(-50%);transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5764c6;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.m-0{margin:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.mt-0{margin-top:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-bottom:0;margin-top:0}.m-1{margin:.2rem}.mb-1{margin-bottom:.2rem}.ml-1{margin-left:.2rem}.mr-1{margin-right:.2rem}.mt-1{margin-top:.2rem}.mx-1{margin-left:.2rem;margin-right:.2rem}.my-1{margin-bottom:.2rem;margin-top:.2rem}.m-2{margin:.4rem}.mb-2{margin-bottom:.4rem}.ml-2{margin-left:.4rem}.mr-2{margin-right:.4rem}.mt-2{margin-top:.4rem}.mx-2{margin-left:.4rem;margin-right:.4rem}.my-2{margin-bottom:.4rem;margin-top:.4rem}.p-0{padding:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-bottom:0;padding-top:0}.p-1{padding:.2rem}.pb-1{padding-bottom:.2rem}.pl-1{padding-left:.2rem}.pr-1{padding-right:.2rem}.pt-1{padding-top:.2rem}.px-1{padding-left:.2rem;padding-right:.2rem}.py-1{padding-bottom:.2rem;padding-top:.2rem}.p-2{padding:.4rem}.pb-2{padding-bottom:.4rem}.pl-2{padding-left:.4rem}.pr-2{padding-right:.4rem}.pt-2{padding-top:.4rem}.px-2{padding-left:.4rem;padding-right:.4rem}.py-2{padding-bottom:.4rem;padding-top:.4rem}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file +/*! Spectre.css | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.42857;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.7rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5764c6;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}a.active,a:active,a:focus,a:hover{color:#4452c0;text-decoration:underline}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.25em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{line-height:1.2rem;margin:0 0 .8rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;line-height:1;padding:.15rem .2rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;line-height:1;padding:.15rem .2rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table.table-hover tbody tr:hover{background:#f0f1f4}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5764c6;border-radius:.1rem;color:#5764c6;cursor:pointer;display:inline-block;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.btn:focus,.btn:hover{background:#eff1fa;border-color:#4c59c2;text-decoration:none}.btn.active,.btn:active{background:#4c59c2;border-color:#3e4cb6;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5764c6;border-color:#4c59c2;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4452c0;border-color:#3e4cb6;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3f4eba;border-color:#3b49af;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5764c6}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#4452c0}.btn.btn-sm{font-size:.6rem;height:1.2rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.8rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.6rem}.btn.btn-action.btn-sm{width:1.2rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:.45;padding:0 2px;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.85}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.8rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;padding:.3rem 0}.form-label.label-sm{padding:.1rem 0}.form-label.label-lg{padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.7rem;height:1.6rem;line-height:1rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.6rem;height:1.2rem;padding:.05rem .4rem}.form-input.input-lg{font-size:.8rem;height:2rem;padding:.45rem .4rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.6rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.1rem}.form-select:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.6rem;height:1.2rem;padding:.05rem 1.1rem .05rem .4rem}.form-select.select-lg{font-size:.8rem;height:2rem;padding:.45rem 1.1rem .45rem .4rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.7rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.7rem}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.2rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.2rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;padding:.1rem 1.1rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.7rem;left:0;top:.25rem;width:.7rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:10px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:.35rem}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:.1rem;content:"";height:4px;left:50%;margin-left:-2px;margin-top:-2px;position:absolute;top:50%;width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.15rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:.4rem;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.25rem .4rem}.input-group .input-group-addon.addon-sm{font-size:.6rem;padding:.05rem .4rem}.input-group .input-group-addon.addon-lg{font-size:.8rem;padding:.45rem .4rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.2rem 0}.label{background:#f8f9fa;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1;line-height:1;padding:.15rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5764c6;color:#fff}.label.label-secondary{background:#eff1fa;color:#5764c6}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fdf4f4;border-radius:.1rem;color:#e06870;font-size:.65rem;line-height:1;padding:.15rem .2rem}.code{border-radius:.1rem;color:#50596c;line-height:1rem;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.6rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:inherit;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.video-responsive video{height:auto;max-width:100%;width:100%}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#727e96;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.8rem;font-weight:500;text-decoration:none}.accordion .accordion-item input:checked~.accordion-header .icon{transform:rotate(90deg)}.accordion .accordion-item input:checked~.accordion-body{max-height:1000px}.accordion .accordion-item .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-item .accordion-header .icon{transition:all .2s ease}.accordion .accordion-item .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete mark{font-size:1;padding:.1em 0}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.avatar{background:#5764c6;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5764c6;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.6rem;height:18px;line-height:1;min-width:18px;padding:3px 5px;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#727e96;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#727e96}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.2rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5764c6;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.6rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5764c6;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5764c6}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#727e96;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;height:1.2rem;margin:.1rem;max-width:100%;padding:.1rem .5rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5764c6;color:#fff}.chip .avatar{margin-left:-.5rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#727e96;padding:1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:100}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#eff1fa;color:#5764c6}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#eff1fa;color:#5764c6}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;max-width:640px;z-index:1}.modal.modal-sm .modal-container{max-width:320px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:block;padding:0;text-align:left}.modal-container .modal-header{padding:.8rem}.modal-container .modal-header .modal-title{margin:0}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#727e96;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5764c6}.nav .nav-item.active>a{color:#5b657a;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5764c6}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#727e96;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5764c6}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5764c6;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{content:attr(data-tooltip);left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:400}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5764c6;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5764c6;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5764c6}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5764c6}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5764c6;color:#5764c6}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:-4px;top:-4px;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:2px}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,100,198,.9);border-color:#5764c6}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:2px -2px 2px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.6rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:nowrap;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5764c6}a.text-primary:focus,a.text-primary:hover{color:#4452c0}.text-secondary{color:#e4e6f6}a.text-secondary:focus,a.text-secondary:hover{color:#d1d4ef}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}.bg-primary{background:#5764c6}.bg-secondary{background:#eff1fa}.bg-dark{background:#454d5d}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643}.bg-warning{background:#ffb700}.bg-error{background:#e85600}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.c-hand{cursor:pointer}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.6rem;padding:0 .4rem;transform:translateY(-.55rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5764c6;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.m-0{margin:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.mt-0{margin-top:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-bottom:0;margin-top:0}.m-1{margin:.2rem}.mb-1{margin-bottom:.2rem}.ml-1{margin-left:.2rem}.mr-1{margin-right:.2rem}.mt-1{margin-top:.2rem}.mx-1{margin-left:.2rem;margin-right:.2rem}.my-1{margin-bottom:.2rem;margin-top:.2rem}.m-2{margin:.4rem}.mb-2{margin-bottom:.4rem}.ml-2{margin-left:.4rem}.mr-2{margin-right:.4rem}.mt-2{margin-top:.4rem}.mx-2{margin-left:.4rem;margin-right:.4rem}.my-2{margin-bottom:.4rem;margin-top:.4rem}.p-0{padding:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-bottom:0;padding-top:0}.p-1{padding:.2rem}.pb-1{padding-bottom:.2rem}.pl-1{padding-left:.2rem}.pr-1{padding-right:.2rem}.pt-1{padding-top:.2rem}.px-1{padding-left:.2rem;padding-right:.2rem}.py-1{padding-bottom:.2rem;padding-top:.2rem}.p-2{padding:.4rem}.pb-2{padding-bottom:.4rem}.pl-2{padding-left:.4rem}.pr-2{padding-right:.4rem}.pt-2{padding-top:.4rem}.px-2{padding-left:.4rem;padding-right:.4rem}.py-2{padding-bottom:.4rem;padding-top:.4rem}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index cfcdcd6..1509c17 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -31,7 +31,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-1"> + <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> <div class="accordion-body"> @@ -56,7 +56,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked /> - <label class="accordion-header hand" for="docs-accordion-2"> + <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> <div class="accordion-body"> @@ -90,7 +90,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-3"> + <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> <div class="accordion-body"> @@ -109,7 +109,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-4"> + <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> <div class="accordion-body"> @@ -179,7 +179,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-5"> + <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> <div class="accordion-body"> @@ -210,7 +210,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-6"> + <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> <div class="accordion-body"> diff --git a/docs/experimentals.html b/docs/experimentals.html index 5223619..cb53b84 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -32,7 +32,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-1"> + <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> <div class="accordion-body"> @@ -57,7 +57,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-2"> + <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> <div class="accordion-body"> @@ -91,7 +91,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-3"> + <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> <div class="accordion-body"> @@ -110,7 +110,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-4"> + <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> <div class="accordion-body"> @@ -180,7 +180,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-5"> + <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> <div class="accordion-body"> @@ -211,7 +211,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked /> - <label class="accordion-header hand" for="docs-accordion-6"> + <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> <div class="accordion-body"> @@ -476,10 +476,10 @@ </figure> </div> <div class="carousel-nav"> - <label class="nav-item text-hide hand" for="slide-1">1</label> - <label class="nav-item text-hide hand" for="slide-2">2</label> - <label class="nav-item text-hide hand" for="slide-3">3</label> - <label class="nav-item text-hide hand" for="slide-4">4</label> + <label class="nav-item text-hide c-hand" for="slide-1">1</label> + <label class="nav-item text-hide c-hand" for="slide-2">2</label> + <label class="nav-item text-hide c-hand" for="slide-3">3</label> + <label class="nav-item text-hide c-hand" for="slide-4">4</label> </div> </div> </div> diff --git a/docs/getting-started.html b/docs/getting-started.html index e57c652..8aec2db 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -31,7 +31,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked /> - <label class="accordion-header hand" for="docs-accordion-1"> + <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> <div class="accordion-body"> @@ -56,7 +56,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-2"> + <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> <div class="accordion-body"> @@ -90,7 +90,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-3"> + <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> <div class="accordion-body"> @@ -109,7 +109,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-4"> + <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> <div class="accordion-body"> @@ -179,7 +179,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-5"> + <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> <div class="accordion-body"> @@ -210,7 +210,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-6"> + <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> <div class="accordion-body"> @@ -315,7 +315,7 @@ <div id="compiling" class="container"> <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3> <div class="docs-note"> - <p>You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>.less</code> source files.</p> + <p>You can customize your version of Spectre.css by editing SASS files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p> <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">Spectre.css Source Code</a></p> </div> <h4 id="compiling-steps" class="s-subtitle">Compiling CSS</h4> @@ -325,12 +325,12 @@ <ol> <li>Navigate to the root directory of Spectre.</li> <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li> - <li>When completed, run <code>gulp build</code> task to compile LESS to CSS and minify files.</li> + <li>When completed, run <code>gulp build</code> task to compile SASS to CSS and minify files.</li> <li>You can find compiled CSS files in <code>/dist</code> directory.</li> </ol> <p>All available Gulp tasks:</p> <ul> - <li><code>gulp build</code> - compile LESS to CSS and minify files (default)</li> + <li><code>gulp build</code> - compile SASS to CSS and minify files (default)</li> <li><code>gulp docs</code> - compile Docs related files</li> <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li> </ul> @@ -340,7 +340,7 @@ <!-- folder structure --> <pre class="code"><code>spectre/ -├── dist/ <span class="com">// Build folder (Git ignored)</span> +├── dist/ <span class="com">// Build folder (Git ignored)</span> │ ├── spectre-exp.css │ ├── spectre-exp.min.css │ ├── spectre-icons.css @@ -349,34 +349,37 @@ │ └── spectre.min.css │ ├── docs/ -│ ├── dist/ <span class="com">// Pre-built CSS folder</span> +│ ├── dist/ <span class="com">// Pre-built CSS folder</span> │ │ ├── spectre-exp.css │ │ ├── spectre-exp.min.css │ │ ├── spectre-icons.css │ │ ├── spectre-icons.min.css │ │ ├── spectre.css │ │ └── spectre.min.css -| ├── css/ <span class="com">// Docs CSS file</span> +| ├── css/ <span class="com">// Docs CSS file</span> │ │ └── docs.css | ├── src/ -│ │ └── docs.less +│ │ └── docs.scss │ ├── ../ │ ├── index.html │ └── ... │ -├── src/ <span class="com">// Source LESS files</span> -│ ├── mixins.less -│ ├── variables.less +├── src/ <span class="com">// Source SASS files</span> +│ ├── spectre.scss +│ ├── spectre-icons.scss +│ ├── spectre-exp.scss +│ ├── _mixins.scss +│ ├── _variables.scss │ └── ... │ -├── spectre-exp.less -├── spectre-icons.less -└── spectre.less +├── gulpfile.js +├── package.json +└── ... </code></pre> <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4> <div class="docs-note"> - <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.</p> + <p>Spectre.css is designed with consistent design language. You can modify <code>_variables.scss</code> to create your new or match existing design.</p> </div> <h5 id="variables-colors" class="s-subtitle">Colors</h5> <div class="columns"> @@ -460,21 +463,21 @@ <h5 id="variables-buttons" class="s-subtitle">Buttons</h5> <div class="docs-note"> - <p>There are 2 button variant mixins in <code>mixins.less</code> to generate different color variants. </p> + <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants. </p> <ul> - <li>.button-variant(<code>@color</code>: @primary-color);</li> - <li>.button-outline-variant(<code>@color</code>: @primary-color);</li> + <li>@mixin button-variant(<code>$color</code>: $primary-color);</li> + <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li> </ul> <!-- button variables example --> -<pre class="code" data-lang="LESS"><code><span class="com"><!-- filled button with the success color --></span> +<pre class="code" data-lang="SASS"><code><span class="com"><!-- filled button with the success color --></span> <span class="tag">.btn-success</span> { - .button-variant(<span class="atv">@success-color</span>); + <span class="tag">@include</span> button-variant(<span class="atv">$success-color</span>); } <span class="com"><!-- outlined button with the success color --></span> <span class="tag">.btn-outline-success</span> { - .button-outline-variant(<span class="atv">@success-color</span>); + <span class="tag">@include</span> button-outline-variant(<span class="atv">$success-color</span>); } </code></pre> </div> @@ -525,7 +528,7 @@ gulp.task('prefix', function() { <ul> <li>Chrome <small class="label label-success">LAST 4</small></li> <li>Microsoft Edge <small class="label label-success">LAST 4</small></li> - <li>Firefox <small class="label label-success">LAST 4</small></li> + <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li> <li>Safari <small class="label label-success">LAST 4</small></li> <li>Opera <small class="label label-success">LAST 4</small></li> <li>Internet Explorer 10+</li> diff --git a/docs/layout.html b/docs/layout.html index 15a9dec..1421345 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -31,7 +31,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-1"> + <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> <div class="accordion-body"> @@ -56,7 +56,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-2"> + <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> <div class="accordion-body"> @@ -90,7 +90,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden checked /> - <label class="accordion-header hand" for="docs-accordion-3"> + <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> <div class="accordion-body"> @@ -109,7 +109,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-4"> + <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> <div class="accordion-body"> @@ -179,7 +179,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-5"> + <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> <div class="accordion-body"> @@ -210,7 +210,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-6"> + <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> <div class="accordion-body"> diff --git a/docs/src/docs.less b/docs/src/docs.scss index 432096c..6c53773 100644 --- a/docs/src/docs.less +++ b/docs/src/docs.scss @@ -1,11 +1,11 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.3.2"; + content: "0.4.0"; } // Core variables and mixins -@import '../../src/variables.less'; -@import '../../src/mixins.less'; +@import '../../src/variables'; +@import '../../src/mixins'; /* Spectre New Docs */ .s-container { @@ -16,7 +16,7 @@ } .s-sidebar { - background: @bg-color; + background: $bg-color; flex: 0 0 auto; padding: 1.5rem 0 1.5rem 1.5rem; width: 12rem; @@ -36,14 +36,14 @@ input { & ~ .accordion-header { - color: darken(@gray-color-dark, 10%); - font-size: @font-size-sm; + color: darken($gray-color-dark, 10%); + font-size: $font-size-sm; font-weight: 600; text-transform: uppercase; } &:checked { & ~ .accordion-header { - color: darken(@gray-color-dark, 10%); + color: darken($gray-color-dark, 10%); } } } @@ -54,7 +54,7 @@ & > a { background: transparent; - color: @gray-color-dark; + color: $gray-color-dark; display: inline-block; } } @@ -66,14 +66,14 @@ flex: 1 1 auto; max-width: 920px; padding: 0 3rem; - width: ~"calc(100vw - 12rem)"; + width: calc(100vw - 12rem); & > .container { padding-bottom: 1.5rem; } .anchor { - color: @primary-color-light; + color: $primary-color-light; height: 0; margin-left: -2em; overflow: hidden; @@ -81,7 +81,7 @@ position: absolute; text-align: center; width: 0; - z-index: @zindex-1; + z-index: $zindex-1; &:focus, &:hover { box-shadow: none; @@ -102,10 +102,10 @@ @supports (position: sticky) { position: sticky; top: 0; - z-index: @zindex-2; + z-index: $zindex-2; &::before { - background: @light-color; + background: $light-color; bottom: 0; content: ""; display: block; @@ -113,7 +113,7 @@ position: absolute; right: -10px; top: -5px; - z-index: -@zindex-0; + z-index: -$zindex-0; } } @@ -134,15 +134,15 @@ } .column { - padding: @layout-spacing; + padding: $layout-spacing; } .docs-block { - border-radius: @border-radius; - padding: @unit-2; + border-radius: $border-radius; + padding: $unit-2; &.bg-gray { - background: @bg-color-dark; + background: $bg-color-dark; } } @@ -169,12 +169,12 @@ } .docs-color { - border-radius: @border-radius; + border-radius: $border-radius; margin: .25rem 0; padding: .5rem; .color-subtitle { - font-size: @font-size-sm; + font-size: $font-size-sm; opacity: .75; } } @@ -192,16 +192,16 @@ } .code { - color: lighten(@body-font-color, 10%); + color: lighten($body-font-color, 10%); .com { - color: @gray-color; + color: $gray-color; } .tag { - color: @primary-color; + color: $primary-color; } .atn { - color: lighten(@body-font-color, 10%); + color: lighten($body-font-color, 10%); } .atv { color: #e06870; @@ -219,9 +219,9 @@ .example-tile-icon { align-content: space-around; align-items: center; - background: @primary-color; - border-radius: @border-radius; - color: @light-color; + background: $primary-color; + border-radius: $border-radius; + color: $light-color; display: flex; font-size: 1.2rem; height: 2rem; @@ -243,14 +243,14 @@ } .s-brand { - color: @primary-color; + color: $primary-color; padding: 0 1.5rem; position: fixed; top: 1.3rem; .s-logo { align-items: center; - border-radius: @border-radius; + border-radius: $border-radius; display: inline-flex; height: 2rem; padding: .2rem; @@ -284,11 +284,11 @@ } .s-footer { - color: @gray-color; + color: $gray-color; padding: .5rem .5rem 1.5rem .5rem; a { - color: @gray-color-dark; + color: $gray-color-dark; } } @@ -301,12 +301,12 @@ position: absolute; h2 { - color: @primary-color; + color: $primary-color; } } .column { - padding: @layout-spacing; + padding: $layout-spacing; } } @@ -315,7 +315,7 @@ .card { border: 0; - color: lighten(@body-font-color, 15%); + color: lighten($body-font-color, 15%); margin-bottom: 1rem; } } @@ -324,18 +324,18 @@ padding: 4.5rem .5rem; .column { - padding: @layout-spacing; + padding: $layout-spacing; } } .section-footer { - color: @gray-color; + color: $gray-color; padding: 1.8rem .75rem 1rem .75rem; position: relative; z-index: 200; a { - color: @gray-color-dark; + color: $gray-color-dark; } } @@ -344,21 +344,21 @@ margin-bottom: 2rem; h1 { - color: @body-font-color; + color: $body-font-color; font-size: 1.6rem; margin-bottom: 1.5rem; } h2 { - color: lighten(@body-font-color, 5%); + color: lighten($body-font-color, 5%); font-size: .9rem; font-weight: 400; line-height: 1.5rem; margin-bottom: 1.5rem; u { - border-bottom: @border-width-lg solid currentColor; - padding-bottom: @unit-o; + border-bottom: $border-width-lg solid currentColor; + padding-bottom: $unit-o; text-decoration: none; } } @@ -366,11 +366,11 @@ .card { background: none; border: 0; - color: lighten(@body-font-color, 15%); + color: lighten($body-font-color, 15%); padding: .5rem; .card-title { - color: @primary-color; + color: $primary-color; font-size: .9rem; margin-bottom: 0; } @@ -382,9 +382,9 @@ display: none; } -@media screen and (max-width: 880px) { +@media (max-width: 880px) { .s-sidebar { - background: @bg-color; + background: $bg-color; bottom: 0; overflow-y: auto; padding: 3rem 1.5rem; @@ -411,14 +411,14 @@ .s-brand { backdrop-filter: blur(10px); // Safari only feature - background: fade(@bg-color, 80%); + background: fade($bg-color, 80%); height: 3.5rem; left: 0; padding: .75rem .5rem; text-align: center; top: 0; right: 0; - z-index: @zindex-3; + z-index: $zindex-3; .s-logo { h2 { @@ -452,7 +452,7 @@ top: 0; position: fixed; width: 100%; - z-index: @zindex-3; + z-index: $zindex-3; } .s-content { @@ -488,7 +488,7 @@ } } -@media screen and (max-width: 600px) { +@media (max-width: 600px) { .grid-hero { h2 { font-size: .9rem; @@ -502,7 +502,7 @@ padding: 3.5rem .5rem 0 .5rem; .docs-block { - padding: @unit-2 @unit-h; + padding: $unit-2 $unit-h; } .anchor { diff --git a/docs/utilities.html b/docs/utilities.html index d502712..ae943ca 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -31,7 +31,7 @@ <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-1"> + <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started </label> <div class="accordion-body"> @@ -56,7 +56,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-2"> + <label class="accordion-header c-hand" for="docs-accordion-2"> Elements </label> <div class="accordion-body"> @@ -90,7 +90,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-3"> + <label class="accordion-header c-hand" for="docs-accordion-3"> Layout </label> <div class="accordion-body"> @@ -109,7 +109,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-4"> + <label class="accordion-header c-hand" for="docs-accordion-4"> Components </label> <div class="accordion-body"> @@ -179,7 +179,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked /> - <label class="accordion-header hand" for="docs-accordion-5"> + <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities </label> <div class="accordion-body"> @@ -210,7 +210,7 @@ </div> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> - <label class="accordion-header hand" for="docs-accordion-6"> + <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals </label> <div class="accordion-body"> diff --git a/gulpfile.js b/gulpfile.js index e17b93a..6202385 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,49 +1,50 @@ var gulp = require('gulp'); -var less = require('gulp-less'); +var sass = require('gulp-sass'); var cleancss = require('gulp-clean-css'); var csscomb = require('gulp-csscomb'); var rename = require('gulp-rename'); -var LessPluginAutoPrefix = require('less-plugin-autoprefix'); +var autoprefixer = require('gulp-autoprefixer'); -var autoprefix= new LessPluginAutoPrefix({ browsers: ["last 4 versions", "Explorer >= 10", "Firefox ESR"] }); +var paths = { + source: './src/*.scss', + doc: './docs/src/*.scss' +}; +var autoprefixer_rules = ["last 4 versions", "Explorer >= 10", "Firefox ESR"]; gulp.task('watch', function() { - gulp.watch('./**/*.less', ['build']); - gulp.watch('./**/*.less', ['docs']); + gulp.watch('./**/*.scss', ['build']); + gulp.watch('./**/*.scss', ['docs']); }); gulp.task('build', function() { - gulp.src('./*.less') - .pipe(less({ - plugins: [autoprefix] - })) - .pipe(csscomb()) - .pipe(gulp.dest('./dist')) - .pipe(cleancss()) - .pipe(rename({ - suffix: '.min' - })) - .pipe(gulp.dest('./dist')); + gulp.src(paths.source) + .pipe(sass({outputStyle: 'compact'})) + .pipe(autoprefixer()) + .pipe(csscomb()) + .pipe(gulp.dest('./dist')) + .pipe(cleancss()) + .pipe(rename({ + suffix: '.min' + })) + .pipe(gulp.dest('./dist')); }); gulp.task('docs', function() { - gulp.src('./docs/src/*.less') - .pipe(less({ - plugins: [autoprefix] - })) - .pipe(csscomb()) - .pipe(gulp.dest('./docs/css')); - gulp.src('./*.less') - .pipe(less({ - plugins: [autoprefix] - })) - .pipe(csscomb()) - .pipe(gulp.dest('./docs/dist')) - .pipe(cleancss()) - .pipe(rename({ - suffix: '.min' - })) - .pipe(gulp.dest('./docs/dist')); + gulp.src(paths.doc) + .pipe(sass({outputStyle: 'compact'})) + .pipe(autoprefixer()) + .pipe(csscomb()) + .pipe(gulp.dest('./docs/css')); + gulp.src(paths.source) + .pipe(sass({outputStyle: 'compact'})) + .pipe(autoprefixer()) + .pipe(csscomb()) + .pipe(gulp.dest('./docs/dist')) + .pipe(cleancss()) + .pipe(rename({ + suffix: '.min' + })) + .pipe(gulp.dest('./docs/dist')); }); gulp.task('default', ['build']); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..eb01640 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3349 @@ +{ + "name": "spectre.css", + "version": "0.4.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "abbrev": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz", + "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=", + "dev": true + }, + "ajv": { + "version": "4.11.8", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz", + "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=", + "dev": true, + "requires": { + "co": "4.6.0", + "json-stable-stringify": "1.0.1" + } + }, + "amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", + "dev": true + }, + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "aproba": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.2.tgz", + "integrity": "sha512-ZpYajIfO0j2cOFTO955KUMIKNmj6zhX8kVztMAxFsDaMwz+9Z9SV0uou2pC9HJqcfpffOsjnbrDMvkNy+9RXPw==", + "dev": true + }, + "archy": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", + "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=", + "dev": true + }, + "are-we-there-yet": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz", + "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", + "dev": true, + "requires": { + "delegates": "1.0.0", + "readable-stream": "2.3.3" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", + "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "1.0.7", + "safe-buffer": "5.1.1", + "string_decoder": "1.0.3", + "util-deprecate": "1.0.2" + } + }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + } + } + }, + "arr-diff": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz", + "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", + "dev": true, + "requires": { + "arr-flatten": "1.1.0" + } + }, + "arr-flatten": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", + "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==", + "dev": true + }, + "array-differ": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz", + "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=", + "dev": true + }, + "array-each": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz", + "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=", + "dev": true + }, + "array-find-index": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", + "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=", + "dev": true + }, + "array-slice": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.0.0.tgz", + "integrity": "sha1-5zA08A3MH0CHYAj9IP6ud71LfC8=", + "dev": true + }, + "array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "dev": true + }, + "array-unique": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz", + "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=", + "dev": true + }, + "asn1": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz", + "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=", + "dev": true + }, + "assert-plus": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz", + "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=", + "dev": true + }, + "async-foreach": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", + "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=", + "dev": true + }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", + "dev": true + }, + "autoprefixer": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.3.tgz", + "integrity": "sha512-zGy6aRrZjWhR+25n89jYkpLXutg6xdDGKKnVNzkfamnnhK3mYchkKj5GJR14aJiU0x4UqZ1+N728tkFNUL5N2g==", + "dev": true, + "requires": { + "browserslist": "2.4.0", + "caniuse-lite": "1.0.30000718", + "normalize-range": "0.1.2", + "num2fraction": "1.2.2", + "postcss": "6.0.10", + "postcss-value-parser": "3.3.0" + } + }, + "aws-sign2": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", + "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=", + "dev": true + }, + "aws4": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz", + "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=", + "dev": true + }, + "balanced-match": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "dev": true + }, + "bcrypt-pbkdf": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz", + "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=", + "dev": true, + "optional": true, + "requires": { + "tweetnacl": "0.14.5" + } + }, + "beeper": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz", + "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=", + "dev": true + }, + "block-stream": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", + "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", + "dev": true, + "requires": { + "inherits": "2.0.3" + } + }, + "boom": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", + "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", + "dev": true, + "requires": { + "hoek": "2.16.3" + } + }, + "brace-expansion": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", + "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", + "dev": true, + "requires": { + "balanced-match": "1.0.0", + "concat-map": "0.0.1" + } + }, + "braces": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz", + "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=", + "dev": true, + "requires": { + "expand-range": "1.8.2", + "preserve": "0.2.0", + "repeat-element": "1.1.2" + } + }, + "browserslist": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz", + "integrity": "sha512-aM2Gt4x9bVlCUteADBS6JP0F+2tMWKM1jQzUulVROtdFWFIcIVvY76AJbr7GDqy0eDhn+PcnpzzivGxY4qiaKQ==", + "dev": true, + "requires": { + "caniuse-lite": "1.0.30000718", + "electron-to-chromium": "1.3.18" + } + }, + "builtin-modules": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", + "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", + "dev": true + }, + "camelcase": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", + "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=", + "dev": true + }, + "camelcase-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", + "dev": true, + "requires": { + "camelcase": "2.1.1", + "map-obj": "1.0.1" + } + }, + "caniuse-lite": { + "version": "1.0.30000718", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz", + "integrity": "sha1-DdJCkL6xExCy2A9rcKgjwqZab60=", + "dev": true + }, + "caseless": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", + "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "2.2.1", + "escape-string-regexp": "1.0.5", + "has-ansi": "2.0.0", + "strip-ansi": "3.0.1", + "supports-color": "2.0.0" + } + }, + "clean-css": { + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz", + "integrity": "sha1-ua6k+FZ5iJzz6ui0A0nsTr390DI=", + "dev": true, + "requires": { + "source-map": "0.5.6" + } + }, + "cliui": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", + "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", + "dev": true, + "requires": { + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wrap-ansi": "2.1.0" + } + }, + "clone": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz", + "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=", + "dev": true + }, + "clone-stats": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz", + "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=", + "dev": true + }, + "co": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", + "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", + "dev": true + }, + "code-point-at": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "dev": true + }, + "color-convert": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz", + "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "combined-stream": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", + "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", + "dev": true, + "requires": { + "delayed-stream": "1.0.0" + } + }, + "commander": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.0.0.tgz", + "integrity": "sha1-0bhvkB+LZL2UG96tr5JFMDk76Sg=", + "dev": true + }, + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true + }, + "console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "dev": true + }, + "core-util-is": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", + "dev": true + }, + "cross-spawn": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", + "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", + "dev": true, + "requires": { + "lru-cache": "4.1.1", + "which": "1.3.0" + }, + "dependencies": { + "lru-cache": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", + "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==", + "dev": true, + "requires": { + "pseudomap": "1.0.2", + "yallist": "2.1.2" + } + } + } + }, + "cryptiles": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz", + "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=", + "dev": true, + "requires": { + "boom": "2.10.1" + } + }, + "csscomb": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/csscomb/-/csscomb-3.1.8.tgz", + "integrity": "sha1-qKc4iE9Am6817JRhr8UuHHW9I6I=", + "dev": true, + "requires": { + "commander": "2.0.0", + "csscomb-core": "3.0.0-3.1", + "gonzales-pe": "3.0.0-28", + "vow": "0.4.4" + } + }, + "csscomb-core": { + "version": "3.0.0-3.1", + "resolved": "https://registry.npmjs.org/csscomb-core/-/csscomb-core-3.0.0-3.1.tgz", + "integrity": "sha1-tBHI18/g3z8v4d+E0b1kpvAEbGg=", + "dev": true, + "requires": { + "gonzales-pe": "3.0.0-28", + "minimatch": "0.2.12", + "vow": "0.4.4", + "vow-fs": "0.3.2" + }, + "dependencies": { + "minimatch": { + "version": "0.2.12", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.12.tgz", + "integrity": "sha1-6oKgEqxmLH3fqhRPHBR+aUb12vs=", + "dev": true, + "requires": { + "lru-cache": "2.7.3", + "sigmund": "1.0.1" + } + } + } + }, + "currently-unhandled": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", + "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=", + "dev": true, + "requires": { + "array-find-index": "1.0.2" + } + }, + "dashdash": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", + "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", + "dev": true, + "requires": { + "assert-plus": "1.0.0" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "dev": true + } + } + }, + "dateformat": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.0.0.tgz", + "integrity": "sha1-J0Pjq7XD/CRi5SfcpEXgTp9N7hc=", + "dev": true + }, + "decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", + "dev": true + }, + "defaults": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz", + "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=", + "dev": true, + "requires": { + "clone": "1.0.2" + } + }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", + "dev": true + }, + "delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", + "dev": true + }, + "deprecated": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz", + "integrity": "sha1-+cmvVGSvoeepcUWKi97yqpTVuxk=", + "dev": true + }, + "detect-file": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-0.1.0.tgz", + "integrity": "sha1-STXe39lIhkjgBrASlWbpOGcR6mM=", + "dev": true, + "requires": { + "fs-exists-sync": "0.1.0" + } + }, + "duplexer2": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz", + "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=", + "dev": true, + "requires": { + "readable-stream": "1.1.14" + } + }, + "ecc-jsbn": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz", + "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=", + "dev": true, + "optional": true, + "requires": { + "jsbn": "0.1.1" + } + }, + "electron-to-chromium": { + "version": "1.3.18", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz", + "integrity": "sha1-PcyZ2j5rZl9qu8ccKK1Ros1zGpw=", + "dev": true + }, + "end-of-stream": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz", + "integrity": "sha1-jhdyBsPICDfYVjLouTWd/osvbq8=", + "dev": true, + "requires": { + "once": "1.3.3" + } + }, + "error-ex": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz", + "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=", + "dev": true, + "requires": { + "is-arrayish": "0.2.1" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "expand-brackets": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz", + "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=", + "dev": true, + "requires": { + "is-posix-bracket": "0.1.1" + } + }, + "expand-range": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz", + "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=", + "dev": true, + "requires": { + "fill-range": "2.2.3" + } + }, + "expand-tilde": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz", + "integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=", + "dev": true, + "requires": { + "os-homedir": "1.0.2" + } + }, + "extend": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz", + "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=", + "dev": true + }, + "extglob": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz", + "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", + "dev": true, + "requires": { + "is-extglob": "1.0.0" + } + }, + "extsprintf": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", + "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", + "dev": true + }, + "fancy-log": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.0.tgz", + "integrity": "sha1-Rb4X0Cu5kX1gzP/UmVyZnmyMmUg=", + "dev": true, + "requires": { + "chalk": "1.1.3", + "time-stamp": "1.1.0" + } + }, + "filename-regex": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", + "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=", + "dev": true + }, + "fill-range": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz", + "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=", + "dev": true, + "requires": { + "is-number": "2.1.0", + "isobject": "2.1.0", + "randomatic": "1.1.7", + "repeat-element": "1.1.2", + "repeat-string": "1.6.1" + } + }, + "find-index": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz", + "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=", + "dev": true + }, + "find-up": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", + "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", + "dev": true, + "requires": { + "path-exists": "2.1.0", + "pinkie-promise": "2.0.1" + } + }, + "findup-sync": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.4.3.tgz", + "integrity": "sha1-QAQ5Kee8YK3wt/SCfExudaDeyhI=", + "dev": true, + "requires": { + "detect-file": "0.1.0", + "is-glob": "2.0.1", + "micromatch": "2.3.11", + "resolve-dir": "0.1.1" + } + }, + "fined": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fined/-/fined-1.1.0.tgz", + "integrity": "sha1-s33IRLdqL15wgeiE98CuNE8VNHY=", + "dev": true, + "requires": { + "expand-tilde": "2.0.2", + "is-plain-object": "2.0.4", + "object.defaults": "1.1.0", + "object.pick": "1.3.0", + "parse-filepath": "1.0.1" + }, + "dependencies": { + "expand-tilde": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz", + "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=", + "dev": true, + "requires": { + "homedir-polyfill": "1.0.1" + } + } + } + }, + "first-chunk-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz", + "integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=", + "dev": true + }, + "flagged-respawn": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz", + "integrity": "sha1-/xke3c1wiKZ1smEP/8l2vpuAdLU=", + "dev": true + }, + "for-in": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", + "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", + "dev": true + }, + "for-own": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz", + "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=", + "dev": true, + "requires": { + "for-in": "1.0.2" + } + }, + "forever-agent": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", + "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", + "dev": true + }, + "form-data": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz", + "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=", + "dev": true, + "requires": { + "asynckit": "0.4.0", + "combined-stream": "1.0.5", + "mime-types": "2.1.16" + } + }, + "fs-exists-sync": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz", + "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=", + "dev": true + }, + "fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "dev": true + }, + "fstream": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", + "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "inherits": "2.0.3", + "mkdirp": "0.5.1", + "rimraf": "2.6.1" + }, + "dependencies": { + "graceful-fs": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "dev": true + } + } + }, + "gauge": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "dev": true, + "requires": { + "aproba": "1.1.2", + "console-control-strings": "1.1.0", + "has-unicode": "2.0.1", + "object-assign": "4.1.1", + "signal-exit": "3.0.2", + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wide-align": "1.1.2" + }, + "dependencies": { + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + } + } + }, + "gaze": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz", + "integrity": "sha1-QLcJU30k0dRXZ9takIaJ3+aaxE8=", + "dev": true, + "requires": { + "globule": "0.1.0" + } + }, + "get-caller-file": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz", + "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=", + "dev": true + }, + "get-stdin": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", + "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", + "dev": true + }, + "getpass": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", + "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", + "dev": true, + "requires": { + "assert-plus": "1.0.0" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "dev": true + } + } + }, + "glob": { + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz", + "integrity": "sha1-xstz0yJsHv7wTePFbQEvAzd+4V8=", + "dev": true, + "requires": { + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "2.0.10", + "once": "1.3.3" + } + }, + "glob-base": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz", + "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=", + "dev": true, + "requires": { + "glob-parent": "2.0.0", + "is-glob": "2.0.1" + } + }, + "glob-parent": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz", + "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=", + "dev": true, + "requires": { + "is-glob": "2.0.1" + } + }, + "glob-stream": { + "version": "3.1.18", + "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz", + "integrity": "sha1-kXCl8St5Awb9/lmPMT+PeVT9FDs=", + "dev": true, + "requires": { + "glob": "4.5.3", + "glob2base": "0.0.12", + "minimatch": "2.0.10", + "ordered-read-streams": "0.1.0", + "through2": "0.6.5", + "unique-stream": "1.0.0" + }, + "dependencies": { + "readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "0.0.1", + "string_decoder": "0.10.31" + } + }, + "through2": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz", + "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=", + "dev": true, + "requires": { + "readable-stream": "1.0.34", + "xtend": "4.0.1" + } + } + } + }, + "glob-watcher": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz", + "integrity": "sha1-uVtKjfdLOcgymLDAXJeLTZo7cQs=", + "dev": true, + "requires": { + "gaze": "0.5.2" + } + }, + "glob2base": { + "version": "0.0.12", + "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz", + "integrity": "sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=", + "dev": true, + "requires": { + "find-index": "0.1.1" + } + }, + "global-modules": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz", + "integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=", + "dev": true, + "requires": { + "global-prefix": "0.1.5", + "is-windows": "0.2.0" + } + }, + "global-prefix": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz", + "integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=", + "dev": true, + "requires": { + "homedir-polyfill": "1.0.1", + "ini": "1.3.4", + "is-windows": "0.2.0", + "which": "1.3.0" + } + }, + "globule": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz", + "integrity": "sha1-2cjt3h2nnRJaFRt5UzuXhnY0auU=", + "dev": true, + "requires": { + "glob": "3.1.21", + "lodash": "1.0.2", + "minimatch": "0.2.14" + }, + "dependencies": { + "glob": { + "version": "3.1.21", + "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz", + "integrity": "sha1-0p4KBV3qUTj00H7UDomC6DwgZs0=", + "dev": true, + "requires": { + "graceful-fs": "1.2.3", + "inherits": "1.0.2", + "minimatch": "0.2.14" + } + }, + "graceful-fs": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz", + "integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=", + "dev": true + }, + "inherits": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz", + "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=", + "dev": true + }, + "minimatch": { + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz", + "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=", + "dev": true, + "requires": { + "lru-cache": "2.7.3", + "sigmund": "1.0.1" + } + } + } + }, + "glogg": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.0.tgz", + "integrity": "sha1-f+DxmfV6yQbPUS/urY+Q7kooT8U=", + "dev": true, + "requires": { + "sparkles": "1.0.0" + } + }, + "gonzales-pe": { + "version": "3.0.0-28", + "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-3.0.0-28.tgz", + "integrity": "sha1-3VC0HdFbaCooxA5fD/IAeQGsYr0=", + "dev": true + }, + "graceful-fs": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz", + "integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=", + "dev": true, + "requires": { + "natives": "1.1.0" + } + }, + "gulp": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz", + "integrity": "sha1-VxzkWSjdQK9lFPxAEYZgFsE4RbQ=", + "dev": true, + "requires": { + "archy": "1.0.0", + "chalk": "1.1.3", + "deprecated": "0.0.1", + "gulp-util": "3.0.8", + "interpret": "1.0.3", + "liftoff": "2.3.0", + "minimist": "1.2.0", + "orchestrator": "0.3.8", + "pretty-hrtime": "1.0.3", + "semver": "4.3.6", + "tildify": "1.2.0", + "v8flags": "2.1.1", + "vinyl-fs": "0.3.14" + } + }, + "gulp-autoprefixer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz", + "integrity": "sha1-4AqMVxuF0GUWrCY0G+kN/Z/B6rA=", + "dev": true, + "requires": { + "autoprefixer": "7.1.3", + "gulp-util": "3.0.8", + "postcss": "6.0.10", + "through2": "2.0.3", + "vinyl-sourcemaps-apply": "0.2.1" + } + }, + "gulp-clean-css": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.7.0.tgz", + "integrity": "sha1-VLM1JtyJmTCUn7N7TKz4UcXV2Ts=", + "dev": true, + "requires": { + "clean-css": "4.1.7", + "gulp-util": "3.0.8", + "through2": "2.0.3", + "vinyl-sourcemaps-apply": "0.2.1" + } + }, + "gulp-csscomb": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/gulp-csscomb/-/gulp-csscomb-3.0.8.tgz", + "integrity": "sha1-3zSCSlgKTH0zUcHo67ateh1aibc=", + "dev": true, + "requires": { + "csscomb": "3.1.8", + "gulp-util": "3.0.8", + "through2": "2.0.3" + } + }, + "gulp-rename": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz", + "integrity": "sha1-OtRCh2PwXidk3sHGfYaNsnVoeBc=", + "dev": true + }, + "gulp-sass": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.1.0.tgz", + "integrity": "sha1-U9xLaKH13f5EJKtMJHZVJpqLdLc=", + "dev": true, + "requires": { + "gulp-util": "3.0.8", + "lodash.clonedeep": "4.5.0", + "node-sass": "4.5.3", + "through2": "2.0.3", + "vinyl-sourcemaps-apply": "0.2.1" + } + }, + "gulp-util": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz", + "integrity": "sha1-AFTh50RQLifATBh8PsxQXdVLu08=", + "dev": true, + "requires": { + "array-differ": "1.0.0", + "array-uniq": "1.0.3", + "beeper": "1.1.1", + "chalk": "1.1.3", + "dateformat": "2.0.0", + "fancy-log": "1.3.0", + "gulplog": "1.0.0", + "has-gulplog": "0.1.0", + "lodash._reescape": "3.0.0", + "lodash._reevaluate": "3.0.0", + "lodash._reinterpolate": "3.0.0", + "lodash.template": "3.6.2", + "minimist": "1.2.0", + "multipipe": "0.1.2", + "object-assign": "3.0.0", + "replace-ext": "0.0.1", + "through2": "2.0.3", + "vinyl": "0.5.3" + } + }, + "gulplog": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz", + "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=", + "dev": true, + "requires": { + "glogg": "1.0.0" + } + }, + "har-schema": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz", + "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=", + "dev": true + }, + "har-validator": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz", + "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=", + "dev": true, + "requires": { + "ajv": "4.11.8", + "har-schema": "1.0.5" + } + }, + "has-ansi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", + "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", + "dev": true, + "requires": { + "ansi-regex": "2.1.1" + } + }, + "has-flag": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", + "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", + "dev": true + }, + "has-gulplog": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz", + "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=", + "dev": true, + "requires": { + "sparkles": "1.0.0" + } + }, + "has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", + "dev": true + }, + "hawk": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz", + "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=", + "dev": true, + "requires": { + "boom": "2.10.1", + "cryptiles": "2.0.5", + "hoek": "2.16.3", + "sntp": "1.0.9" + } + }, + "hoek": { + "version": "2.16.3", + "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", + "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", + "dev": true + }, + "homedir-polyfill": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz", + "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=", + "dev": true, + "requires": { + "parse-passwd": "1.0.0" + } + }, + "hosted-git-info": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz", + "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==", + "dev": true + }, + "http-signature": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz", + "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=", + "dev": true, + "requires": { + "assert-plus": "0.2.0", + "jsprim": "1.4.1", + "sshpk": "1.13.1" + } + }, + "in-publish": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz", + "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=", + "dev": true + }, + "indent-string": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", + "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", + "dev": true, + "requires": { + "repeating": "2.0.1" + } + }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "dev": true, + "requires": { + "once": "1.3.3", + "wrappy": "1.0.2" + } + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "ini": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz", + "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=", + "dev": true + }, + "interpret": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.0.3.tgz", + "integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=", + "dev": true + }, + "invert-kv": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", + "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", + "dev": true + }, + "is-absolute": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz", + "integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=", + "dev": true, + "requires": { + "is-relative": "0.2.1", + "is-windows": "0.2.0" + } + }, + "is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", + "dev": true + }, + "is-buffer": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz", + "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=", + "dev": true + }, + "is-builtin-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", + "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", + "dev": true, + "requires": { + "builtin-modules": "1.1.1" + } + }, + "is-dotfile": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz", + "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=", + "dev": true + }, + "is-equal-shallow": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz", + "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=", + "dev": true, + "requires": { + "is-primitive": "2.0.0" + } + }, + "is-extendable": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", + "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=", + "dev": true + }, + "is-extglob": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", + "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", + "dev": true + }, + "is-finite": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz", + "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=", + "dev": true, + "requires": { + "number-is-nan": "1.0.1" + } + }, + "is-fullwidth-code-point": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "dev": true, + "requires": { + "number-is-nan": "1.0.1" + } + }, + "is-glob": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", + "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", + "dev": true, + "requires": { + "is-extglob": "1.0.0" + } + }, + "is-number": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz", + "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=", + "dev": true, + "requires": { + "kind-of": "3.2.2" + } + }, + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dev": true, + "requires": { + "isobject": "3.0.1" + }, + "dependencies": { + "isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", + "dev": true + } + } + }, + "is-posix-bracket": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz", + "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=", + "dev": true + }, + "is-primitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz", + "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=", + "dev": true + }, + "is-relative": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz", + "integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=", + "dev": true, + "requires": { + "is-unc-path": "0.1.2" + } + }, + "is-typedarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", + "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", + "dev": true + }, + "is-unc-path": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz", + "integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=", + "dev": true, + "requires": { + "unc-path-regex": "0.1.2" + } + }, + "is-utf8": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", + "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", + "dev": true + }, + "is-windows": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz", + "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=", + "dev": true + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "dev": true + }, + "isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", + "dev": true + }, + "isobject": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz", + "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=", + "dev": true, + "requires": { + "isarray": "1.0.0" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + } + } + }, + "isstream": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", + "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", + "dev": true + }, + "js-base64": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz", + "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=", + "dev": true + }, + "jsbn": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", + "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", + "dev": true, + "optional": true + }, + "json-schema": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", + "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=", + "dev": true + }, + "json-stable-stringify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz", + "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", + "dev": true, + "requires": { + "jsonify": "0.0.0" + } + }, + "json-stringify-safe": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", + "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", + "dev": true + }, + "jsonify": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", + "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", + "dev": true + }, + "jsprim": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", + "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=", + "dev": true, + "requires": { + "assert-plus": "1.0.0", + "extsprintf": "1.3.0", + "json-schema": "0.2.3", + "verror": "1.10.0" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "dev": true + } + } + }, + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "1.1.5" + } + }, + "lcid": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", + "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", + "dev": true, + "requires": { + "invert-kv": "1.0.0" + } + }, + "liftoff": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.3.0.tgz", + "integrity": "sha1-qY8v9nGD2Lp8+soQVIvX/wVQs4U=", + "dev": true, + "requires": { + "extend": "3.0.1", + "findup-sync": "0.4.3", + "fined": "1.1.0", + "flagged-respawn": "0.3.2", + "lodash.isplainobject": "4.0.6", + "lodash.isstring": "4.0.1", + "lodash.mapvalues": "4.6.0", + "rechoir": "0.6.2", + "resolve": "1.4.0" + } + }, + "load-json-file": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "parse-json": "2.2.0", + "pify": "2.3.0", + "pinkie-promise": "2.0.1", + "strip-bom": "2.0.0" + }, + "dependencies": { + "graceful-fs": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "dev": true + }, + "strip-bom": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", + "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", + "dev": true, + "requires": { + "is-utf8": "0.2.1" + } + } + } + }, + "lodash": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz", + "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=", + "dev": true + }, + "lodash._basecopy": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz", + "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=", + "dev": true + }, + "lodash._basetostring": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz", + "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U=", + "dev": true + }, + "lodash._basevalues": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz", + "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=", + "dev": true + }, + "lodash._getnative": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", + "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=", + "dev": true + }, + "lodash._isiterateecall": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz", + "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=", + "dev": true + }, + "lodash._reescape": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz", + "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo=", + "dev": true + }, + "lodash._reevaluate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz", + "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0=", + "dev": true + }, + "lodash._reinterpolate": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", + "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", + "dev": true + }, + "lodash._root": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz", + "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=", + "dev": true + }, + "lodash.assign": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", + "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=", + "dev": true + }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", + "dev": true + }, + "lodash.escape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz", + "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=", + "dev": true, + "requires": { + "lodash._root": "3.0.1" + } + }, + "lodash.isarguments": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", + "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=", + "dev": true + }, + "lodash.isarray": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", + "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", + "dev": true + }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", + "dev": true + }, + "lodash.isstring": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz", + "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=", + "dev": true + }, + "lodash.keys": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz", + "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", + "dev": true, + "requires": { + "lodash._getnative": "3.9.1", + "lodash.isarguments": "3.1.0", + "lodash.isarray": "3.0.4" + } + }, + "lodash.mapvalues": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz", + "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=", + "dev": true + }, + "lodash.mergewith": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz", + "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=", + "dev": true + }, + "lodash.restparam": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz", + "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=", + "dev": true + }, + "lodash.template": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz", + "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=", + "dev": true, + "requires": { + "lodash._basecopy": "3.0.1", + "lodash._basetostring": "3.0.1", + "lodash._basevalues": "3.0.0", + "lodash._isiterateecall": "3.0.9", + "lodash._reinterpolate": "3.0.0", + "lodash.escape": "3.2.0", + "lodash.keys": "3.1.2", + "lodash.restparam": "3.6.1", + "lodash.templatesettings": "3.1.1" + } + }, + "lodash.templatesettings": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz", + "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=", + "dev": true, + "requires": { + "lodash._reinterpolate": "3.0.0", + "lodash.escape": "3.2.0" + } + }, + "loud-rejection": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", + "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=", + "dev": true, + "requires": { + "currently-unhandled": "0.4.1", + "signal-exit": "3.0.2" + } + }, + "lru-cache": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz", + "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=", + "dev": true + }, + "map-cache": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", + "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=", + "dev": true + }, + "map-obj": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", + "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", + "dev": true + }, + "meow": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", + "dev": true, + "requires": { + "camelcase-keys": "2.1.0", + "decamelize": "1.2.0", + "loud-rejection": "1.6.0", + "map-obj": "1.0.1", + "minimist": "1.2.0", + "normalize-package-data": "2.4.0", + "object-assign": "4.1.1", + "read-pkg-up": "1.0.1", + "redent": "1.0.0", + "trim-newlines": "1.0.0" + }, + "dependencies": { + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + } + } + }, + "micromatch": { + "version": "2.3.11", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz", + "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", + "dev": true, + "requires": { + "arr-diff": "2.0.0", + "array-unique": "0.2.1", + "braces": "1.8.5", + "expand-brackets": "0.1.5", + "extglob": "0.3.2", + "filename-regex": "2.0.1", + "is-extglob": "1.0.0", + "is-glob": "2.0.1", + "kind-of": "3.2.2", + "normalize-path": "2.1.1", + "object.omit": "2.0.1", + "parse-glob": "3.0.4", + "regex-cache": "0.4.3" + } + }, + "mime-db": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.29.0.tgz", + "integrity": "sha1-SNJtI1WJZRcErFkWygYAGRQmaHg=", + "dev": true + }, + "mime-types": { + "version": "2.1.16", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.16.tgz", + "integrity": "sha1-K4WKUuXs1RbbiXrCvodIeDBpjiM=", + "dev": true, + "requires": { + "mime-db": "1.29.0" + } + }, + "minimatch": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz", + "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "mkdirp": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, + "requires": { + "minimist": "0.0.8" + }, + "dependencies": { + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + } + } + }, + "multipipe": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz", + "integrity": "sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=", + "dev": true, + "requires": { + "duplexer2": "0.0.2" + } + }, + "nan": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz", + "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=", + "dev": true + }, + "natives": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.0.tgz", + "integrity": "sha1-6f+EFBimsux6SV6TmYT3jxY+bjE=", + "dev": true + }, + "node-gyp": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz", + "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=", + "dev": true, + "requires": { + "fstream": "1.0.11", + "glob": "7.1.2", + "graceful-fs": "4.1.11", + "minimatch": "3.0.4", + "mkdirp": "0.5.1", + "nopt": "3.0.6", + "npmlog": "4.1.2", + "osenv": "0.1.4", + "request": "2.81.0", + "rimraf": "2.6.1", + "semver": "5.3.0", + "tar": "2.2.1", + "which": "1.3.0" + }, + "dependencies": { + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + }, + "graceful-fs": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + }, + "semver": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", + "dev": true + } + } + }, + "node-sass": { + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.5.3.tgz", + "integrity": "sha1-0JydEXlkEjnRuX/8YjH9zsU+FWg=", + "dev": true, + "requires": { + "async-foreach": "0.1.3", + "chalk": "1.1.3", + "cross-spawn": "3.0.1", + "gaze": "1.1.2", + "get-stdin": "4.0.1", + "glob": "7.1.2", + "in-publish": "2.0.0", + "lodash.assign": "4.2.0", + "lodash.clonedeep": "4.5.0", + "lodash.mergewith": "4.6.0", + "meow": "3.7.0", + "mkdirp": "0.5.1", + "nan": "2.6.2", + "node-gyp": "3.6.2", + "npmlog": "4.1.2", + "request": "2.81.0", + "sass-graph": "2.2.4", + "stdout-stream": "1.4.0" + }, + "dependencies": { + "gaze": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz", + "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=", + "dev": true, + "requires": { + "globule": "1.2.0" + } + }, + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + }, + "globule": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz", + "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=", + "dev": true, + "requires": { + "glob": "7.1.2", + "lodash": "4.17.4", + "minimatch": "3.0.4" + } + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + } + } + }, + "node-uuid": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz", + "integrity": "sha1-B/myM3Vy/2J1x3Xh1IUT86RdemU=", + "dev": true + }, + "nopt": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", + "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=", + "dev": true, + "requires": { + "abbrev": "1.1.0" + } + }, + "normalize-package-data": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", + "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", + "dev": true, + "requires": { + "hosted-git-info": "2.5.0", + "is-builtin-module": "1.0.0", + "semver": "4.3.6", + "validate-npm-package-license": "3.0.1" + } + }, + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + "dev": true, + "requires": { + "remove-trailing-separator": "1.1.0" + } + }, + "normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "dev": true + }, + "npmlog": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "dev": true, + "requires": { + "are-we-there-yet": "1.1.4", + "console-control-strings": "1.1.0", + "gauge": "2.7.4", + "set-blocking": "2.0.0" + } + }, + "num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "dev": true + }, + "number-is-nan": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "dev": true + }, + "oauth-sign": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz", + "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=", + "dev": true + }, + "object-assign": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz", + "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=", + "dev": true + }, + "object.defaults": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz", + "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=", + "dev": true, + "requires": { + "array-each": "1.0.1", + "array-slice": "1.0.0", + "for-own": "1.0.0", + "isobject": "3.0.1" + }, + "dependencies": { + "for-own": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz", + "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=", + "dev": true, + "requires": { + "for-in": "1.0.2" + } + }, + "isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", + "dev": true + } + } + }, + "object.omit": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz", + "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=", + "dev": true, + "requires": { + "for-own": "0.1.5", + "is-extendable": "0.1.1" + } + }, + "object.pick": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz", + "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=", + "dev": true, + "requires": { + "isobject": "3.0.1" + }, + "dependencies": { + "isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", + "dev": true + } + } + }, + "once": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz", + "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=", + "dev": true, + "requires": { + "wrappy": "1.0.2" + } + }, + "orchestrator": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.8.tgz", + "integrity": "sha1-FOfp4nZPcxX7rBhOUGx6pt+UrX4=", + "dev": true, + "requires": { + "end-of-stream": "0.1.5", + "sequencify": "0.0.7", + "stream-consume": "0.1.0" + } + }, + "ordered-read-streams": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz", + "integrity": "sha1-/VZamvjrRHO6abbtijQ1LLVS8SY=", + "dev": true + }, + "os-homedir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", + "dev": true + }, + "os-locale": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", + "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", + "dev": true, + "requires": { + "lcid": "1.0.0" + } + }, + "os-tmpdir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", + "dev": true + }, + "osenv": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz", + "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=", + "dev": true, + "requires": { + "os-homedir": "1.0.2", + "os-tmpdir": "1.0.2" + } + }, + "parse-filepath": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.1.tgz", + "integrity": "sha1-FZ1hVdQ5BNFsEO9piRHaHpGWm3M=", + "dev": true, + "requires": { + "is-absolute": "0.2.6", + "map-cache": "0.2.2", + "path-root": "0.1.1" + } + }, + "parse-glob": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz", + "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=", + "dev": true, + "requires": { + "glob-base": "0.3.0", + "is-dotfile": "1.0.3", + "is-extglob": "1.0.0", + "is-glob": "2.0.1" + } + }, + "parse-json": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", + "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", + "dev": true, + "requires": { + "error-ex": "1.3.1" + } + }, + "parse-passwd": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", + "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=", + "dev": true + }, + "path-exists": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", + "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", + "dev": true, + "requires": { + "pinkie-promise": "2.0.1" + } + }, + "path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "dev": true + }, + "path-parse": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz", + "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=", + "dev": true + }, + "path-root": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz", + "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=", + "dev": true, + "requires": { + "path-root-regex": "0.1.2" + } + }, + "path-root-regex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz", + "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=", + "dev": true + }, + "path-type": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", + "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "pify": "2.3.0", + "pinkie-promise": "2.0.1" + }, + "dependencies": { + "graceful-fs": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "dev": true + } + } + }, + "performance-now": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", + "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=", + "dev": true + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + }, + "pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", + "dev": true + }, + "pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", + "dev": true, + "requires": { + "pinkie": "2.0.4" + } + }, + "postcss": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz", + "integrity": "sha512-7WOpqea/cQHH1XUXdN1mqoFFmhigW3KAXJ+ssMOk/f6mKmwqFgqqdwsnjLGH+wuY+kwaJvT4whHcfKt5kWga0A==", + "dev": true, + "requires": { + "chalk": "2.1.0", + "source-map": "0.5.7", + "supports-color": "4.2.1" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", + "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", + "dev": true, + "requires": { + "color-convert": "1.9.0" + } + }, + "chalk": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz", + "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==", + "dev": true, + "requires": { + "ansi-styles": "3.2.0", + "escape-string-regexp": "1.0.5", + "supports-color": "4.2.1" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "supports-color": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz", + "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==", + "dev": true, + "requires": { + "has-flag": "2.0.0" + } + } + } + }, + "postcss-value-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", + "dev": true + }, + "preserve": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz", + "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=", + "dev": true + }, + "pretty-hrtime": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", + "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", + "dev": true + }, + "process-nextick-args": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", + "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=", + "dev": true + }, + "pseudomap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", + "dev": true + }, + "punycode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", + "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", + "dev": true + }, + "qs": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", + "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=", + "dev": true + }, + "randomatic": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz", + "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==", + "dev": true, + "requires": { + "is-number": "3.0.0", + "kind-of": "4.0.0" + }, + "dependencies": { + "is-number": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", + "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", + "dev": true, + "requires": { + "kind-of": "3.2.2" + }, + "dependencies": { + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "1.1.5" + } + } + } + }, + "kind-of": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz", + "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", + "dev": true, + "requires": { + "is-buffer": "1.1.5" + } + } + } + }, + "read-pkg": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", + "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", + "dev": true, + "requires": { + "load-json-file": "1.1.0", + "normalize-package-data": "2.4.0", + "path-type": "1.1.0" + } + }, + "read-pkg-up": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", + "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", + "dev": true, + "requires": { + "find-up": "1.1.2", + "read-pkg": "1.1.0" + } + }, + "readable-stream": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "0.0.1", + "string_decoder": "0.10.31" + } + }, + "rechoir": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", + "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=", + "dev": true, + "requires": { + "resolve": "1.4.0" + } + }, + "redent": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", + "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=", + "dev": true, + "requires": { + "indent-string": "2.1.0", + "strip-indent": "1.0.1" + } + }, + "regex-cache": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz", + "integrity": "sha1-mxpsNdTQ3871cRrmUejp09cRQUU=", + "dev": true, + "requires": { + "is-equal-shallow": "0.1.3", + "is-primitive": "2.0.0" + } + }, + "remove-trailing-separator": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", + "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=", + "dev": true + }, + "repeat-element": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz", + "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=", + "dev": true + }, + "repeat-string": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", + "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", + "dev": true + }, + "repeating": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz", + "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=", + "dev": true, + "requires": { + "is-finite": "1.0.2" + } + }, + "replace-ext": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz", + "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=", + "dev": true + }, + "request": { + "version": "2.81.0", + "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz", + "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=", + "dev": true, + "requires": { + "aws-sign2": "0.6.0", + "aws4": "1.6.0", + "caseless": "0.12.0", + "combined-stream": "1.0.5", + "extend": "3.0.1", + "forever-agent": "0.6.1", + "form-data": "2.1.4", + "har-validator": "4.2.1", + "hawk": "3.1.3", + "http-signature": "1.1.1", + "is-typedarray": "1.0.0", + "isstream": "0.1.2", + "json-stringify-safe": "5.0.1", + "mime-types": "2.1.16", + "oauth-sign": "0.8.2", + "performance-now": "0.2.0", + "qs": "6.4.0", + "safe-buffer": "5.1.1", + "stringstream": "0.0.5", + "tough-cookie": "2.3.2", + "tunnel-agent": "0.6.0", + "uuid": "3.1.0" + } + }, + "require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", + "dev": true + }, + "require-main-filename": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", + "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", + "dev": true + }, + "resolve": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz", + "integrity": "sha512-aW7sVKPufyHqOmyyLzg/J+8606v5nevBgaliIlV7nUpVMsDnoBGV/cbSLNjZAg9q0Cfd/+easKVKQ8vOu8fn1Q==", + "dev": true, + "requires": { + "path-parse": "1.0.5" + } + }, + "resolve-dir": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz", + "integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=", + "dev": true, + "requires": { + "expand-tilde": "1.2.2", + "global-modules": "0.2.3" + } + }, + "rimraf": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz", + "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=", + "dev": true, + "requires": { + "glob": "7.1.2" + }, + "dependencies": { + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + } + } + }, + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", + "dev": true + }, + "sass-graph": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz", + "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", + "dev": true, + "requires": { + "glob": "7.1.2", + "lodash": "4.17.4", + "scss-tokenizer": "0.2.3", + "yargs": "7.1.0" + }, + "dependencies": { + "glob": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.3.3", + "path-is-absolute": "1.0.1" + } + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + } + } + }, + "scss-tokenizer": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", + "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=", + "dev": true, + "requires": { + "js-base64": "2.1.9", + "source-map": "0.4.4" + }, + "dependencies": { + "source-map": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", + "dev": true, + "requires": { + "amdefine": "1.0.1" + } + } + } + }, + "semver": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz", + "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=", + "dev": true + }, + "sequencify": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz", + "integrity": "sha1-kM/xnQLgcCf9dn9erT57ldHnOAw=", + "dev": true + }, + "set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", + "dev": true + }, + "sigmund": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz", + "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=", + "dev": true + }, + "signal-exit": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", + "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", + "dev": true + }, + "sntp": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz", + "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=", + "dev": true, + "requires": { + "hoek": "2.16.3" + } + }, + "source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", + "dev": true + }, + "sparkles": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz", + "integrity": "sha1-Gsu/tZJDbRC76PeFt8xvgoFQEsM=", + "dev": true + }, + "spdx-correct": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz", + "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=", + "dev": true, + "requires": { + "spdx-license-ids": "1.2.2" + } + }, + "spdx-expression-parse": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz", + "integrity": "sha1-m98vIOH0DtRH++JzJmGR/O1RYmw=", + "dev": true + }, + "spdx-license-ids": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz", + "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc=", + "dev": true + }, + "sshpk": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz", + "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=", + "dev": true, + "requires": { + "asn1": "0.2.3", + "assert-plus": "1.0.0", + "bcrypt-pbkdf": "1.0.1", + "dashdash": "1.14.1", + "ecc-jsbn": "0.1.1", + "getpass": "0.1.7", + "jsbn": "0.1.1", + "tweetnacl": "0.14.5" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "dev": true + } + } + }, + "stdout-stream": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz", + "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=", + "dev": true, + "requires": { + "readable-stream": "2.3.3" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", + "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "1.0.7", + "safe-buffer": "5.1.1", + "string_decoder": "1.0.3", + "util-deprecate": "1.0.2" + } + }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + } + } + }, + "stream-consume": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz", + "integrity": "sha1-pB6tGm1ggc63n2WwYZAbbY89HQ8=", + "dev": true + }, + "string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", + "dev": true + }, + "string-width": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "dev": true, + "requires": { + "code-point-at": "1.1.0", + "is-fullwidth-code-point": "1.0.0", + "strip-ansi": "3.0.1" + } + }, + "stringstream": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", + "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=", + "dev": true + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "requires": { + "ansi-regex": "2.1.1" + } + }, + "strip-bom": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz", + "integrity": "sha1-hbiGLzhEtabV7IRnqTWYFzo295Q=", + "dev": true, + "requires": { + "first-chunk-stream": "1.0.0", + "is-utf8": "0.2.1" + } + }, + "strip-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz", + "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=", + "dev": true, + "requires": { + "get-stdin": "4.0.1" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + }, + "tar": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", + "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", + "dev": true, + "requires": { + "block-stream": "0.0.9", + "fstream": "1.0.11", + "inherits": "2.0.3" + } + }, + "through2": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz", + "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=", + "dev": true, + "requires": { + "readable-stream": "2.3.3", + "xtend": "4.0.1" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "readable-stream": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", + "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "1.0.7", + "safe-buffer": "5.1.1", + "string_decoder": "1.0.3", + "util-deprecate": "1.0.2" + } + }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + } + } + }, + "tildify": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.2.0.tgz", + "integrity": "sha1-3OwD9V3Km3qj5bBPIYF+tW5jWIo=", + "dev": true, + "requires": { + "os-homedir": "1.0.2" + } + }, + "time-stamp": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz", + "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=", + "dev": true + }, + "tough-cookie": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz", + "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=", + "dev": true, + "requires": { + "punycode": "1.4.1" + } + }, + "trim-newlines": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz", + "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=", + "dev": true + }, + "tunnel-agent": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", + "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, + "tweetnacl": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", + "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", + "dev": true, + "optional": true + }, + "unc-path-regex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz", + "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=", + "dev": true + }, + "unique-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz", + "integrity": "sha1-1ZpKdUJ0R9mqbJHnAmP40mpLEEs=", + "dev": true + }, + "user-home": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz", + "integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA=", + "dev": true + }, + "util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", + "dev": true + }, + "uuid": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz", + "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==", + "dev": true + }, + "v8flags": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz", + "integrity": "sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=", + "dev": true, + "requires": { + "user-home": "1.1.1" + } + }, + "validate-npm-package-license": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz", + "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=", + "dev": true, + "requires": { + "spdx-correct": "1.0.2", + "spdx-expression-parse": "1.0.4" + } + }, + "verror": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", + "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", + "dev": true, + "requires": { + "assert-plus": "1.0.0", + "core-util-is": "1.0.2", + "extsprintf": "1.3.0" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "dev": true + } + } + }, + "vinyl": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz", + "integrity": "sha1-sEVbOPxeDPMNQyUTLkYZcMIJHN4=", + "dev": true, + "requires": { + "clone": "1.0.2", + "clone-stats": "0.0.1", + "replace-ext": "0.0.1" + } + }, + "vinyl-fs": { + "version": "0.3.14", + "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.14.tgz", + "integrity": "sha1-mmhRzhysHBzqX+hsCTHWIMLPqeY=", + "dev": true, + "requires": { + "defaults": "1.0.3", + "glob-stream": "3.1.18", + "glob-watcher": "0.0.6", + "graceful-fs": "3.0.11", + "mkdirp": "0.5.1", + "strip-bom": "1.0.0", + "through2": "0.6.5", + "vinyl": "0.4.6" + }, + "dependencies": { + "clone": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz", + "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=", + "dev": true + }, + "readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", + "dev": true, + "requires": { + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "0.0.1", + "string_decoder": "0.10.31" + } + }, + "through2": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz", + "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=", + "dev": true, + "requires": { + "readable-stream": "1.0.34", + "xtend": "4.0.1" + } + }, + "vinyl": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz", + "integrity": "sha1-LzVsh6VQolVGHza76ypbqL94SEc=", + "dev": true, + "requires": { + "clone": "0.2.0", + "clone-stats": "0.0.1" + } + } + } + }, + "vinyl-sourcemaps-apply": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz", + "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=", + "dev": true, + "requires": { + "source-map": "0.5.6" + } + }, + "vow": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/vow/-/vow-0.4.4.tgz", + "integrity": "sha1-yf5GCRKdf1qmIVCOvmS1HJW8e5g=", + "dev": true + }, + "vow-fs": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/vow-fs/-/vow-fs-0.3.2.tgz", + "integrity": "sha1-6isDTYXh24wnfrLpqG0cFfXTjno=", + "dev": true, + "requires": { + "glob": "3.2.8", + "node-uuid": "1.4.0", + "vow": "0.4.4", + "vow-queue": "0.3.1" + }, + "dependencies": { + "glob": { + "version": "3.2.8", + "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.8.tgz", + "integrity": "sha1-VQb0MRchvMYYx9jboUQYh1AwcHM=", + "dev": true, + "requires": { + "inherits": "2.0.3", + "minimatch": "0.2.14" + } + }, + "minimatch": { + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz", + "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=", + "dev": true, + "requires": { + "lru-cache": "2.7.3", + "sigmund": "1.0.1" + } + } + } + }, + "vow-queue": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.3.1.tgz", + "integrity": "sha1-WYxRoVsKgabV/AX0dhzrRi3h6Gg=", + "dev": true, + "requires": { + "vow": "0.4.4" + } + }, + "which": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz", + "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==", + "dev": true, + "requires": { + "isexe": "2.0.0" + } + }, + "which-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz", + "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=", + "dev": true + }, + "wide-align": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", + "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "dev": true, + "requires": { + "string-width": "1.0.2" + } + }, + "wrap-ansi": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", + "dev": true, + "requires": { + "string-width": "1.0.2", + "strip-ansi": "3.0.1" + } + }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "dev": true + }, + "xtend": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", + "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=", + "dev": true + }, + "y18n": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", + "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", + "dev": true + }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "dev": true + }, + "yargs": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", + "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", + "dev": true, + "requires": { + "camelcase": "3.0.0", + "cliui": "3.2.0", + "decamelize": "1.2.0", + "get-caller-file": "1.0.2", + "os-locale": "1.4.0", + "read-pkg-up": "1.0.1", + "require-directory": "2.1.1", + "require-main-filename": "1.0.1", + "set-blocking": "2.0.0", + "string-width": "1.0.2", + "which-module": "1.0.0", + "y18n": "3.2.1", + "yargs-parser": "5.0.0" + }, + "dependencies": { + "camelcase": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", + "dev": true + } + } + }, + "yargs-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz", + "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", + "dev": true, + "requires": { + "camelcase": "3.0.0" + }, + "dependencies": { + "camelcase": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", + "dev": true + } + } + } + } +} diff --git a/package.json b/package.json index c93fec8..257b81a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.3.2", + "version": "0.4.0", "homepage": "http://picturepan2.github.io/spectre", "author": "Yan Zhu <picturepan2@hotmail.com>", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", @@ -13,7 +13,7 @@ "dist", "docs", "src", - "**/*.less", + "**/*.scss", "gulpfile.js" ], "license": "MIT", @@ -24,18 +24,26 @@ "responsive", "mobile-friendly", "front-end", - "less", + "sass", "modern" ], "bugs": { "url": "https://github.com/picturepan2/spectre/issues" }, "devDependencies": { - "gulp": "^3.9.1", + "gulp": "latest", + "gulp-autoprefixer": "latest", "gulp-clean-css": "^3.7.0", "gulp-csscomb": "^3.0.8", - "gulp-less": "^3.3.2", "gulp-rename": "^1.2.2", - "less-plugin-autoprefix": "^1.5.1" - } + "gulp-sass": "latest" + }, + "browserslist": [ + "last 4 Chrome versions", + "Edge >= 12", + "Firefox ESR", + "last 4 Safari versions", + "last 4 Opera versions", + "Explorer >= 10" + ] } diff --git a/spectre-exp.less b/spectre-exp.less deleted file mode 100644 index 5ff5a88..0000000 --- a/spectre-exp.less +++ /dev/null @@ -1,16 +0,0 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ - -// Core variables and mixins -@import 'src/variables.less'; -@import 'src/mixins.less'; - -// Experimentals -@import 'src/calendars.less'; -@import 'src/carousels.less'; -@import 'src/comparison-sliders.less'; -@import 'src/filters.less'; -@import 'src/meters.less'; -@import 'src/parallax.less'; -@import 'src/progress.less'; -@import 'src/sliders.less'; -@import 'src/timelines.less'; diff --git a/spectre.less b/spectre.less deleted file mode 100644 index 14c150d..0000000 --- a/spectre.less +++ /dev/null @@ -1,50 +0,0 @@ -/*! Spectre.css | MIT License | github.com/picturepan2/spectre */ - -// Core variables and mixins -@import 'src/variables.less'; -@import 'src/mixins.less'; - -// Reset and dependencies -@import 'src/normalize.less'; -@import 'src/base.less'; - -// Core classes -@import 'src/typography.less'; -@import 'src/asian.less'; -@import 'src/tables.less'; -@import 'src/buttons.less'; -@import 'src/forms.less'; -@import 'src/labels.less'; -@import 'src/codes.less'; -@import 'src/media.less'; - -// Layout -@import 'src/layout.less'; -@import 'src/navbar.less'; -@import 'src/panels.less'; -@import 'src/empty.less'; - -// Components -@import 'src/accordions.less'; -@import 'src/autocomplete.less'; -@import 'src/avatars.less'; -@import 'src/badges.less'; -@import 'src/breadcrumbs.less'; -@import 'src/bars.less'; -@import 'src/cards.less'; -@import 'src/chips.less'; -@import 'src/dropdowns.less'; -@import 'src/menus.less'; -@import 'src/modals.less'; -@import 'src/navs.less'; -@import 'src/pagination.less'; -@import 'src/popovers.less'; -@import 'src/steps.less'; -@import 'src/tabs.less'; -@import 'src/tiles.less'; -@import 'src/toasts.less'; -@import 'src/tooltips.less'; - -// Utility classes -@import 'src/animations.less'; -@import 'src/utilities.less'; diff --git a/src/accordions.less b/src/_accordions.scss index 810d264..e2022c6 100644 --- a/src/accordions.less +++ b/src/_accordions.scss @@ -17,7 +17,7 @@ .accordion-header { display: block; - padding: @unit-1 @unit-2; + padding: $unit-1 $unit-2; .icon { transition: all .2s ease; @@ -25,7 +25,7 @@ } .accordion-body { - margin-bottom: @layout-spacing; + margin-bottom: $layout-spacing; max-height: 0; overflow: hidden; transition: max-height .2s ease; diff --git a/src/animations.less b/src/_animations.scss index f6b8724..e7fde1a 100644 --- a/src/animations.less +++ b/src/_animations.scss @@ -11,7 +11,7 @@ @keyframes slide-down { 0% { opacity: 0; - transform: translateY(-@unit-8); + transform: translateY(-$unit-8); } 100% { opacity: 1; diff --git a/src/asian.less b/src/_asian.scss index a68cb39..5f7533e 100644 --- a/src/asian.less +++ b/src/_asian.scss @@ -1,14 +1,14 @@ // Optimized for East Asian CJK :lang(zh) { - font-family: @cjk-zh-font-family; + font-family: $cjk-zh-font-family; } :lang(ja) { - font-family: @cjk-jp-font-family; + font-family: $cjk-jp-font-family; } :lang(ko) { - font-family: @cjk-ko-font-family; + font-family: $cjk-ko-font-family; } :lang(zh), @@ -16,7 +16,7 @@ .cjk { ins, u { - border-bottom: @border-width solid; + border-bottom: $border-width solid; text-decoration: none; } diff --git a/src/autocomplete.less b/src/_autocomplete.scss index 111ecf6..24c3e45 100644 --- a/src/autocomplete.less +++ b/src/_autocomplete.scss @@ -7,12 +7,12 @@ display: flex; flex-wrap: wrap; height: auto; - min-height: @unit-8; - padding: @unit-h; + min-height: $unit-8; + padding: $unit-h; &.is-focused { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } .form-input { @@ -20,9 +20,9 @@ box-shadow: none; display: inline-block; flex: 1 0 auto; - height: @unit-6; - line-height: @unit-4; - margin: @unit-h; + height: $unit-6; + line-height: $unit-4; + margin: $unit-h; width: auto; } } diff --git a/src/avatars.less b/src/_avatars.scss index 1fa075a..53bda1d 100644 --- a/src/avatars.less +++ b/src/_avatars.scss @@ -1,9 +1,9 @@ // Avatars .avatar { - .avatar-base(); - background: @primary-color; + @include avatar-base(); + background: $primary-color; border-radius: 50%; - color: fade(@light-color, 85%); + color: rgba($light-color, .85); display: inline-block; font-weight: 300; line-height: 1; @@ -12,16 +12,16 @@ vertical-align: middle; &.avatar-xs { - .avatar-base(@unit-4); + @include avatar-base($unit-4); } &.avatar-sm { - .avatar-base(@unit-6); + @include avatar-base($unit-6); } &.avatar-lg { - .avatar-base(@unit-12); + @include avatar-base($unit-12); } &.avatar-xl { - .avatar-base(@unit-16); + @include avatar-base($unit-16); } img { @@ -29,39 +29,39 @@ height: 100%; position: relative; width: 100%; - z-index: @zindex-0; + z-index: $zindex-0; } .avatar-icon, .avatar-presence { - background: @bg-color-light; + background: $bg-color-light; bottom: 14.64%; height: 50%; - padding: @border-width-lg; + padding: $border-width-lg; position: absolute; right: 14.64%; transform: translate(50%, 50%); width: 50%; - z-index: @zindex-0 + 1; + z-index: $zindex-0 + 1; } .avatar-presence { - background: @gray-color; - box-shadow: 0 0 0 @border-width-lg @light-color; + background: $gray-color; + box-shadow: 0 0 0 $border-width-lg $light-color; border-radius: 50%; height: .5em; width: .5em; &.online { - background: @success-color; + background: $success-color; } &.busy { - background: @error-color; + background: $error-color; } &.away { - background: @warning-color; + background: $warning-color; } } @@ -72,6 +72,6 @@ position: absolute; top: 50%; transform: translate(-50%, -50%); - z-index: @zindex-0; + z-index: $zindex-0; } } diff --git a/src/badges.less b/src/_badges.scss index c62df9d..9f1d734 100644 --- a/src/badges.less +++ b/src/_badges.scss @@ -6,11 +6,11 @@ &[data-badge], &:not([data-badge]) { &::after { - background: @primary-color; + background: $primary-color; background-clip: padding-box; border-radius: .5rem; - box-shadow: 0 0 0 .1rem @bg-color-light; - color: @light-color; + box-shadow: 0 0 0 .1rem $bg-color-light; + color: $light-color; content: attr(data-badge); display: inline-block; transform: translate(-.1rem, -.5rem); @@ -18,7 +18,7 @@ } &[data-badge] { &::after { - font-size: @font-size-sm; + font-size: $font-size-sm; height: 18px; line-height: 1; min-width: 18px; @@ -54,17 +54,17 @@ top: 14.64%; right: 14.64%; transform: translate(50%, -50%); - z-index: @zindex-1; + z-index: $zindex-1; } } &.avatar-xs { &::after { content: ""; - height: @unit-2; - min-width: @unit-2; + height: $unit-2; + min-width: $unit-2; padding: 0; - width: @unit-2; + width: $unit-2; } } } diff --git a/src/bars.less b/src/_bars.scss index 4c3824a..47e21c9 100644 --- a/src/bars.less +++ b/src/_bars.scss @@ -1,36 +1,36 @@ // Bars .bar { - background: @bg-color-dark; - border-radius: @border-radius; + background: $bg-color-dark; + border-radius: $border-radius; display: flex; flex-wrap: nowrap; - height: @unit-4; + height: $unit-4; width: 100%; &.bar-sm { - height: @unit-1; + height: $unit-1; } // TODO: attr() support .bar-item { - background: @primary-color; - color: @light-color; + background: $primary-color; + color: $light-color; display: block; - font-size: @font-size-sm; + font-size: $font-size-sm; flex-shrink: 0; - line-height: @unit-4; + line-height: $unit-4; height: 100%; position: relative; text-align: center; width: 0; &:first-child { - border-bottom-left-radius: @border-radius; - border-top-left-radius: @border-radius; + border-bottom-left-radius: $border-radius; + border-top-left-radius: $border-radius; } &:last-child { - border-bottom-right-radius: @border-radius; - border-top-right-radius: @border-radius; + border-bottom-right-radius: $border-radius; + border-top-right-radius: $border-radius; flex-shrink: 1; } } @@ -38,8 +38,8 @@ // Slider bar .bar-slider { - height: @border-width-lg; - margin: @layout-spacing 0; + height: $border-width-lg; + margin: $layout-spacing 0; position: relative; .bar-item { @@ -47,25 +47,25 @@ padding: 0; position: absolute; &:not(:last-child):first-child { - background: @bg-color-dark; - z-index: @zindex-0; + background: $bg-color-dark; + z-index: $zindex-0; } } .bar-slider-btn { - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; + height: $unit-3; padding: 0; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); - width: @unit-3; + width: $unit-3; &:active { - box-shadow: 0 0 0 .1rem @primary-color; + box-shadow: 0 0 0 .1rem $primary-color; } } } diff --git a/src/base.less b/src/_base.scss index ba21bee..5f5a8d0 100644 --- a/src/base.less +++ b/src/_base.scss @@ -7,34 +7,34 @@ html { box-sizing: border-box; - font-size: @html-font-size; - line-height: @html-line-height; + font-size: $html-font-size; + line-height: $html-line-height; -webkit-tap-highlight-color: transparent; } body { - background: @body-bg; - color: @body-font-color; - font-family: @body-font-family; - font-size: @font-size; + background: $body-bg; + color: $body-font-color; + font-family: $body-font-family; + font-size: $font-size; overflow-x: hidden; text-rendering: optimizeLegibility; } a { - color: @link-color; + color: $link-color; outline: none; text-decoration: none; &:focus { - .control-shadow(); + @include control-shadow(); } &:focus, &:hover, &:active, &.active { - color: @link-color-dark; + color: $link-color-dark; text-decoration: underline; } } diff --git a/src/breadcrumbs.less b/src/_breadcrumbs.scss index 0b0f757..876eae8 100644 --- a/src/breadcrumbs.less +++ b/src/_breadcrumbs.scss @@ -1,28 +1,28 @@ // Breadcrumbs .breadcrumb { list-style: none; - margin: @unit-1 0; - padding: @unit-1 0; + margin: $unit-1 0; + padding: $unit-1 0; .breadcrumb-item { - color: @gray-color-dark; + color: $gray-color-dark; display: inline-block; margin: 0; - padding: @unit-1 0; + padding: $unit-1 0; &:not(:last-child) { - margin-right: @unit-1; + margin-right: $unit-1; a { - color: @gray-color-dark; + color: $gray-color-dark; } } &:not(:first-child) { &::before { - color: @gray-color-light; + color: $gray-color-light; content: "/"; - padding-right: @unit-1; + padding-right: $unit-1; } } } diff --git a/src/buttons.less b/src/_buttons.scss index 0c15d9e..a8232f5 100644 --- a/src/buttons.less +++ b/src/_buttons.scss @@ -1,42 +1,42 @@ // Buttons .btn { appearance: none; - background: @bg-color-light; - border: @border-width solid @primary-color; - border-radius: @border-radius; - color: @primary-color; - .control-transition(); + background: $bg-color-light; + border: $border-width solid $primary-color; + border-radius: $border-radius; + color: $primary-color; + @include control-transition(); cursor: pointer; display: inline-block; - font-size: @font-size; - height: @control-size; - line-height: @line-height; + font-size: $font-size; + height: $control-size; + line-height: $line-height; outline: none; - padding: @control-padding-v @control-padding-h; + padding: $control-padding-v $control-padding-h; text-align: center; text-decoration: none; user-select: none; vertical-align: middle; white-space: nowrap; &:focus { - .control-shadow(); + @include control-shadow(); } &:focus, &:hover { - background: @secondary-color; - border-color: @primary-color-dark; + background: $secondary-color; + border-color: $primary-color-dark; text-decoration: none; } &:active, &.active { - background: @primary-color-dark; - border-color: darken(@primary-color-dark, 5%); - color: @light-color; + background: $primary-color-dark; + border-color: darken($primary-color-dark, 5%); + color: $light-color; text-decoration: none; &.loading { &::after { - border-bottom-color: @light-color; - border-left-color: @light-color; + border-bottom-color: $light-color; + border-left-color: $light-color; } } } @@ -50,25 +50,25 @@ // Button Primary &.btn-primary { - background: @primary-color; - border-color: @primary-color-dark; - color: @light-color; + background: $primary-color; + border-color: $primary-color-dark; + color: $light-color; &:focus, &:hover { - background: darken(@primary-color-dark, 2%); - border-color: darken(@primary-color-dark, 5%); - color: @light-color; + background: darken($primary-color-dark, 2%); + border-color: darken($primary-color-dark, 5%); + color: $light-color; } &:active, &.active { - background: darken(@primary-color-dark, 4%); - border-color: darken(@primary-color-dark, 7%); - color: @light-color; + background: darken($primary-color-dark, 4%); + border-color: darken($primary-color-dark, 7%); + color: $light-color; } &.loading { &::after { - border-bottom-color: @light-color; - border-left-color: @light-color; + border-bottom-color: $light-color; + border-left-color: $light-color; } } } @@ -77,26 +77,26 @@ &.btn-link { background: transparent; border-color: transparent; - color: @link-color; + color: $link-color; &:focus, &:hover, &:active, &.active { - color: @link-color-dark; + color: $link-color-dark; } } // Button Sizes &.btn-sm { - font-size: @font-size-sm; - height: @control-size-sm; - padding: @control-padding-v-sm @control-padding-h * .75; + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-v-sm $control-padding-h * .75; } &.btn-lg { - font-size: @font-size-lg; - height: @control-size-lg; - padding: @control-padding-v-lg @control-padding-h * 1.5; + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-v-lg $control-padding-h * 1.5; } // Button Block @@ -107,16 +107,16 @@ // Button Action &.btn-action { - width: @control-size; + width: $control-size; padding-left: 0; padding-right: 0; &.btn-sm { - width: @control-size-sm; + width: $control-size-sm; } &.btn-lg { - width: @control-size-lg; + width: $control-size-lg; } } @@ -125,14 +125,14 @@ background: transparent; border: 0; color: currentColor; - height: @unit-4; - line-height: @unit-4; - margin-left: @unit-1; + height: $unit-4; + line-height: $unit-4; + margin-left: $unit-1; margin-right: -2px; opacity: .45; padding: 0 2px; text-decoration: none; - width: @unit-4; + width: $unit-4; &:hover { opacity: .85; @@ -157,18 +157,18 @@ } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:focus, &:hover, &:active, &.active { - z-index: @zindex-0; + z-index: $zindex-0; } } diff --git a/src/calendars.less b/src/_calendars.scss index e5764ea..bfa8739 100644 --- a/src/calendars.less +++ b/src/_calendars.scss @@ -1,19 +1,19 @@ // Calendars .calendar { - border: @border-width solid @border-color; - border-radius: @border-radius; + border: $border-width solid $border-color; + border-radius: $border-radius; display: block; min-width: 280px; text-align: center; .calendar-nav { align-items: center; - background: @bg-color; - border-top-left-radius: @border-radius; - border-top-right-radius: @border-radius; + background: $bg-color; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; display: flex; - font-size: @font-size-lg; - padding: @layout-spacing; + font-size: $font-size-lg; + padding: $layout-spacing; } .calendar-header, @@ -21,7 +21,7 @@ display: flex; flex-wrap: wrap; justify-content: center; - padding: @layout-spacing 0; + padding: $layout-spacing 0; .calendar-date { flex: 0 0 14.28%; // 7 calendar-items each row @@ -30,60 +30,60 @@ } .calendar-header { - background: @bg-color; - border-bottom: @border-width solid @border-color; - color: @gray-color; - font-size: @font-size-sm; + background: $bg-color; + border-bottom: $border-width solid $border-color; + color: $gray-color; + font-size: $font-size-sm; } .calendar-body { - color: @gray-color-dark; + color: $gray-color-dark; } .calendar-date { border: 0; - padding: @unit-1; + padding: $unit-1; .date-item { appearance: none; background: transparent; - border: @border-width solid transparent; + border: $border-width solid transparent; border-radius: 50%; - color: @gray-color-dark; - .control-transition(); + color: $gray-color-dark; + @include control-transition(); cursor: pointer; - height: @unit-7; - line-height: @unit-5; + height: $unit-7; + line-height: $unit-5; outline: none; - padding: @unit-h; + padding: $unit-h; position: relative; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; - width: @unit-7; + width: $unit-7; &.date-today { - border-color: @secondary-color-dark; - color: @primary-color; + border-color: $secondary-color-dark; + color: $primary-color; } &:focus { - .control-shadow(); + @include control-shadow(); } &:focus, &:hover { - background: @secondary-color-light; - border-color: @secondary-color-dark; - color: @primary-color; + background: $secondary-color-light; + border-color: $secondary-color-dark; + color: $primary-color; text-decoration: none; } &:active, &.active { - background: @primary-color-dark; - border-color: darken(@primary-color-dark, 5%); - color: @light-color; + background: $primary-color-dark; + border-color: darken($primary-color-dark, 5%); + color: $light-color; } // Calendar badge support @@ -111,9 +111,9 @@ position: relative; &::before { - background: @secondary-color; + background: $secondary-color; content: ""; - height: @unit-7; + height: $unit-7; left: 0; position: absolute; right: 0; @@ -132,7 +132,7 @@ } .date-item { - color: @primary-color; + color: $primary-color; } } @@ -141,8 +141,8 @@ padding: 0; .calendar-date { - border-bottom: @border-width solid @border-color; - border-right: @border-width solid @border-color; + border-bottom: $border-width solid $border-color; + border-right: $border-width solid $border-color; display: flex; flex-direction: column; height: 5.5rem; @@ -159,9 +159,9 @@ .date-item { align-self: flex-end; - height: @unit-7; - margin-right: @layout-spacing-sm; - margin-top: @layout-spacing-sm; + height: $unit-7; + margin-right: $layout-spacing-sm; + margin-top: $layout-spacing-sm; } .calendar-range { @@ -185,21 +185,20 @@ flex-grow: 1; line-height: 1; overflow-y: auto; - padding: @layout-spacing-sm; + padding: $layout-spacing-sm; } .calendar-event { - background: @secondary-color; - border-radius: @border-radius; - color: @primary-color; - font-size: @font-size-sm; + background: $secondary-color; + border-radius: $border-radius; + color: $primary-color; + font-size: $font-size-sm; display: block; - margin: @unit-h auto; + margin: $unit-h auto; overflow: hidden; padding: 3px 4px; text-align: left; text-overflow: ellipsis; - vertical-align: baseline; white-space: nowrap; } } diff --git a/src/_cards.scss b/src/_cards.scss new file mode 100644 index 0000000..bb82579 --- /dev/null +++ b/src/_cards.scss @@ -0,0 +1,39 @@ +// Cards +.card { + background: $bg-color-light; + border: $border-width solid $border-color; + border-radius: $border-radius; + display: flex; + flex-direction: column; + + .card-header, + .card-body, + .card-footer { + padding: $layout-spacing-lg; + padding-bottom: 0; + + &:last-child { + padding-bottom: $layout-spacing-lg; + } + } + + .card-image { + padding-top: $layout-spacing-lg; + + &:first-child { + padding-top: 0; + + img { + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + } + } + + &:last-child { + img { + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + } + } +}
\ No newline at end of file diff --git a/src/carousels.less b/src/_carousels.scss index 276bc1f..788d351 100644 --- a/src/carousels.less +++ b/src/_carousels.scss @@ -1,6 +1,6 @@ // Carousels .carousel { - background: @bg-color; + background: $bg-color; display: block; overflow: hidden; position: relative; @@ -36,15 +36,15 @@ .item-prev, .item-next { - background: fade(@gray-color-light, 25%); - border-color: fade(@gray-color-light, 50%); - color: @gray-color-light; + background: fade($gray-color-light, 25%); + border-color: fade($gray-color-light, 50%); + color: $gray-color-light; opacity: 0; position: absolute; top: 50%; transition: all .4s ease; transform: translateY(-50%); - z-index: @zindex-2; + z-index: $zindex-2; } .item-prev { left: 1rem; @@ -61,32 +61,32 @@ &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) { animation: carousel-slidein .75s ease-in-out 1; opacity: 1; - z-index: @zindex-1; + z-index: $zindex-1; } &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1), &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2), &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3), &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) { - color: @gray-color-light; + color: $gray-color-light; } } .carousel-nav { - bottom: @layout-spacing; + bottom: $layout-spacing; display: flex; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); width: 10rem; - z-index: @zindex-2; + z-index: $zindex-2; .nav-item { - color: fade(@gray-color-light, 50%); + color: fade($gray-color-light, 50%); display: block; flex: 1 0 auto; - height: @unit-8; - margin: @unit-1; + height: $unit-8; + margin: $unit-1; max-width: 2.5rem; position: relative; @@ -94,7 +94,7 @@ background: currentColor; content: ""; display: block; - height: @border-width-lg; + height: $border-width-lg; position: absolute; top: .5rem; width: 100%; diff --git a/src/_chips.scss b/src/_chips.scss new file mode 100644 index 0000000..0610470 --- /dev/null +++ b/src/_chips.scss @@ -0,0 +1,24 @@ +// Chips +.chip { + align-items: center; + background: $bg-color-dark; + border-radius: 5rem; + color: $gray-color-dark; + display: inline-flex; + height: $unit-6; + margin: $unit-h; + max-width: 100%; + padding: $unit-h ($unit-2 + $unit-h); + text-decoration: none; + vertical-align: middle; + + &.active { + background: $primary-color; + color: $light-color; + } + + .avatar { + margin-left: -($unit-2 + $unit-h); + margin-right: $unit-1; + } +} diff --git a/src/_codes.scss b/src/_codes.scss new file mode 100644 index 0000000..753fdad --- /dev/null +++ b/src/_codes.scss @@ -0,0 +1,32 @@ +// Codes +code { + font-size: .65rem; + @include label-base(); + @include label-variant($code-color, lighten($code-color, 33%)); +} + +.code { + border-radius: $border-radius; + color: $body-font-color; + line-height: $line-height; + position: relative; + + &::before { + content: attr(data-lang); + color: $gray-color; + font-size: $font-size-sm; + position: absolute; + right: $layout-spacing; + top: $unit-h; + } + + code { + background: $bg-color; + color: inherit; + display: block; + line-height: inherit; + overflow-x: auto; + padding: 1rem; + width: 100%; + } +} diff --git a/src/comparison-sliders.less b/src/_comparison-sliders.scss index 169caf4..153bb0a 100644 --- a/src/comparison-sliders.less +++ b/src/_comparison-sliders.scss @@ -29,7 +29,7 @@ z-index: 1; .comparison-label { - right: @unit-4; + right: $unit-4; } } @@ -45,37 +45,37 @@ height: 100%; left: 0; position: absolute; - right: @unit-4; + right: $unit-4; top: 0; - z-index: @zindex-0; + z-index: $zindex-0; } &::after { background: currentColor; border-radius: 50%; box-shadow: 0 -5px, 0 5px; - color: @light-color; + color: $light-color; content: ""; height: 3px; position: absolute; - right: @unit-2; + right: $unit-2; top: 50%; transform: translate(50%, -50%); width: 3px; } .comparison-label { - left: @unit-4; + left: $unit-4; } } .comparison-resizer { animation: first-run 1.5s 1 ease-in-out; cursor: ew-resize; - height: @unit-4; + height: $unit-4; left: 0; max-width: 100%; - min-width: @unit-4; + min-width: $unit-4; opacity: 0; outline: none; position: relative; @@ -86,10 +86,10 @@ } .comparison-label { - background: fade(@dark-color, 50%); - bottom: @unit-4; - color: @light-color; - padding: @unit-1 @unit-2; + background: fade($dark-color, 50%); + bottom: $unit-4; + color: $light-color; + padding: $unit-1 $unit-2; position: absolute; user-select: none; } @@ -100,13 +100,13 @@ width: 0; } 25% { - width: @unit-12; + width: $unit-12; } 50% { - width: @unit-4; + width: $unit-4; } 75% { - width: @unit-6; + width: $unit-6; } 100% { width: 0; diff --git a/src/dropdowns.less b/src/_dropdowns.scss index c1684a0..324440b 100644 --- a/src/dropdowns.less +++ b/src/_dropdowns.scss @@ -29,8 +29,8 @@ // Fix dropdown-toggle border radius in button groups .btn-group { .dropdown-toggle:nth-last-child(2) { - border-bottom-right-radius: @border-radius; - border-top-right-radius: @border-radius; + border-bottom-right-radius: $border-radius; + border-top-right-radius: $border-radius; } } } diff --git a/src/_empty.scss b/src/_empty.scss new file mode 100644 index 0000000..29cddac --- /dev/null +++ b/src/_empty.scss @@ -0,0 +1,21 @@ +// Empty states (or Blank slates) +.empty { + background: $bg-color; + border-radius: $border-radius; + color: $gray-color-dark; + text-align: center; + padding: 4 * $layout-spacing; + + .empty-icon { + margin-bottom: $layout-spacing-lg; + } + + .empty-title, + .empty-subtitle { + margin: $layout-spacing auto; + } + + .empty-action { + margin-top: $layout-spacing-lg; + } +} diff --git a/src/filters.less b/src/_filters.scss index e417081..965dfa3 100644 --- a/src/filters.less +++ b/src/_filters.scss @@ -1,7 +1,7 @@ // Filters .filter { .filter-nav { - margin: @layout-spacing 0; + margin: $layout-spacing 0; } .filter-body { @@ -15,8 +15,8 @@ &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"], &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"], &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] { - background: @primary-color; - color: @light-color; + background: $primary-color; + color: $light-color; } &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]), diff --git a/src/forms.less b/src/_forms.scss index 7ed91e6..b407d3c 100644 --- a/src/forms.less +++ b/src/_forms.scss @@ -1,71 +1,71 @@ // Forms .form-group { &:not(:last-child) { - margin-bottom: @layout-spacing; + margin-bottom: $layout-spacing; } } fieldset { - margin-bottom: @layout-spacing-lg; + margin-bottom: $layout-spacing-lg; } legend { - font-size: @font-size-lg; + font-size: $font-size-lg; font-weight: 500; - margin-bottom: @layout-spacing-lg; + margin-bottom: $layout-spacing-lg; } // Form element: Label .form-label { display: block; - padding: @control-padding-v + @border-width 0; + padding: $control-padding-v + $border-width 0; &.label-sm { - padding: @control-padding-v-sm + @border-width 0; + padding: $control-padding-v-sm + $border-width 0; } &.label-lg { - padding: @control-padding-v-lg + @border-width 0; + padding: $control-padding-v-lg + $border-width 0; } } // Form element: Input .form-input { appearance: none; - background: @bg-color-light; + background: $bg-color-light; background-image: none; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; - color: @body-font-color; - .control-transition(); + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + color: $body-font-color; + @include control-transition(); display: block; - font-size: @font-size; - height: @control-size; - line-height: @line-height; + font-size: $font-size; + height: $control-size; + line-height: $line-height; max-width: 100%; outline: none; - padding: @control-padding-v @control-padding-h; + padding: $control-padding-v $control-padding-h; position: relative; width: 100%; &:focus { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } &::placeholder { - color: @gray-color; + color: $gray-color; } // Input sizes &.input-sm { - font-size: @font-size-sm; - height: @control-size-sm; - padding: @control-padding-v-sm @control-padding-h; + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-v-sm $control-padding-h; } &.input-lg { - font-size: @font-size-lg; - height: @control-size-lg; - padding: @control-padding-v-lg @control-padding-h; + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-v-lg $control-padding-h; } &.input-inline { @@ -74,45 +74,45 @@ legend { width: auto; } - // Textarea - textarea& { - height: auto; - } - // Input types &[type="file"] { height: auto; } } +// Form element: Textarea +textarea.form-input { + height: auto; +} + // Form element: Input hint .form-input-hint { - color: @gray-color; - font-size: @font-size-sm; - margin-top: @unit-1; + color: $gray-color; + font-size: $font-size-sm; + margin-top: $unit-1; .has-success &, .is-success + & { - color: @success-color; + color: $success-color; } .has-error &, .is-error + & { - color: @error-color; + color: $error-color; } } // Form element: Select .form-select { appearance: none; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; color: inherit; - font-size: @font-size; - height: @control-size; - line-height: @line-height; + font-size: $font-size; + height: $control-size; + line-height: $line-height; outline: none; - padding: @control-padding-v @control-padding-h; + padding: $control-padding-v $control-padding-h; vertical-align: middle; width: 100%; @@ -121,16 +121,16 @@ legend { height: auto; option { - padding: @unit-h @unit-1; + padding: $unit-h $unit-1; } } &:not([multiple]):not([size]) { - background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem; - padding-right: @control-icon-size + @control-padding-h; + background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem; + padding-right: $control-icon-size + $control-padding-h; } &:focus { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } &::-ms-expand { display: none; @@ -138,15 +138,15 @@ legend { // Select sizes &.select-sm { - font-size: @font-size-sm; - height: @control-size-sm; - padding: @control-padding-v-sm (@control-icon-size + @control-padding-h) @control-padding-v-sm @control-padding-h; + font-size: $font-size-sm; + height: $control-size-sm; + padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h; } &.select-lg { - font-size: @font-size-lg; - height: @control-size-lg; - padding: @control-padding-v-lg (@control-icon-size + @control-padding-h) @control-padding-v-lg @control-padding-h; + font-size: $font-size-lg; + height: $control-size-lg; + padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h; } } @@ -156,32 +156,32 @@ legend { position: relative; .form-icon { - height: @control-icon-size; - margin: 0 @control-padding-v; + height: $control-icon-size; + margin: 0 $control-padding-v; position: absolute; top: 50%; transform: translateY(-50%); - width: @control-icon-size; + width: $control-icon-size; } } .has-icon-left { .form-icon { - left: @border-width; + left: $border-width; } .form-input { - padding-left: @control-icon-size + @control-padding-v * 2; + padding-left: $control-icon-size + $control-padding-v * 2; } } .has-icon-right { .form-icon { - right: @border-width; + right: $border-width; } .form-input { - padding-right: @control-icon-size + @control-padding-v * 2; + padding-right: $control-icon-size + $control-padding-v * 2; } } @@ -190,8 +190,8 @@ legend { .form-radio, .form-switch { display: inline-block; - line-height: @line-height; - padding: (@control-size-sm - @line-height) / 2 (@control-icon-size + @control-padding-h); + line-height: $line-height; + padding: ($control-size-sm - $line-height) / 2 ($control-icon-size + $control-padding-h); position: relative; input { @@ -202,18 +202,18 @@ legend { position: absolute; width: 1px; &:focus + .form-icon { - border-color: @primary-color; - .control-shadow(); + border-color: $primary-color; + @include control-shadow(); } &:checked + .form-icon { - background: @primary-color; - border-color: @primary-color; + background: $primary-color; + border-color: $primary-color; } } .form-icon { - border: @border-width solid @border-color-dark; - .control-transition(); + border: $border-width solid $border-color-dark; + @include control-transition(); cursor: pointer; display: inline-block; position: absolute; @@ -223,29 +223,29 @@ legend { .form-checkbox, .form-radio { .form-icon { - background: @bg-color-light; - height: @control-icon-size; + background: $bg-color-light; + height: $control-icon-size; left: 0; - top: (@control-size-sm - @control-icon-size) / 2; - width: @control-icon-size; + top: ($control-size-sm - $control-icon-size) / 2; + width: $control-icon-size; } input { &:active + .form-icon { - background: @bg-color-dark; + background: $bg-color-dark; } } } .form-checkbox { .form-icon { - border-radius: @border-radius; + border-radius: $border-radius; } input { &:checked + .form-icon { &::before { background-clip: padding-box; - border: @border-width-lg solid @light-color; + border: $border-width-lg solid $light-color; border-left-width: 0; border-top-width: 0; content: ""; @@ -260,10 +260,10 @@ legend { } } &:indeterminate + .form-icon { - background: @primary-color; - border-color: @primary-color; + background: $primary-color; + border-color: $primary-color; &::before { - background: @bg-color-light; + background: $bg-color-light; content: ""; height: 2px; left: 50%; @@ -278,14 +278,14 @@ legend { } .form-radio { .form-icon { - border-radius: @control-icon-size / 2; + border-radius: $control-icon-size / 2; } input { &:checked + .form-icon { &::before { - background: @bg-color-light; - border-radius: @border-radius; + background: $bg-color-light; + border-radius: $border-radius; content: ""; height: 4px; left: 50%; @@ -301,27 +301,27 @@ legend { // Form element: Switch .form-switch { - padding-left: (@unit-8 + @control-padding-h); + padding-left: ($unit-8 + $control-padding-h); .form-icon { - background: @gray-color-light; + background: $gray-color-light; background-clip: padding-box; - border-radius: @unit-2 + @border-width; - height: @unit-4 + @border-width * 2; + border-radius: $unit-2 + $border-width; + height: $unit-4 + $border-width * 2; left: 0; - top: (@control-size-sm - @unit-4) / 2 - @border-width; - width: @unit-8; + top: ($control-size-sm - $unit-4) / 2 - $border-width; + width: $unit-8; &::before { - background: @bg-color-light; - border-radius: @unit-2; + background: $bg-color-light; + border-radius: $unit-2; content: ""; display: block; - height: @unit-4; + height: $unit-4; left: 0; position: absolute; top: 0; - .control-transition(); - width: @unit-4; + @include control-transition(); + width: $unit-4; } } @@ -333,7 +333,7 @@ legend { } &:active + .form-icon { &::before { - background: @bg-color; + background: $bg-color; } } } @@ -344,19 +344,19 @@ legend { display: flex; .input-group-addon { - background: @bg-color; - border: @border-width solid @border-color-dark; - border-radius: @border-radius; - line-height: @line-height; - padding: @control-padding-v @control-padding-h; + background: $bg-color; + border: $border-width solid $border-color-dark; + border-radius: $border-radius; + line-height: $line-height; + padding: $control-padding-v $control-padding-h; &.addon-sm { - font-size: @font-size-sm; - padding: @control-padding-v-sm @control-padding-h; + font-size: $font-size-sm; + padding: $control-padding-v-sm $control-padding-h; } &.addon-lg { - font-size: @font-size-lg; - padding: @control-padding-v-lg @control-padding-h; + font-size: $font-size-lg; + padding: $control-padding-v-lg $control-padding-h; } } @@ -366,7 +366,7 @@ legend { } .input-group-btn { - z-index: @zindex-0; + z-index: $zindex-0; } .form-input, @@ -379,15 +379,15 @@ legend { } &:not(:first-child):not(:last-child) { border-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: -@border-width; + margin-left: -$border-width; } &:focus { - z-index: @zindex-0 + 1; + z-index: $zindex-0 + 1; } } @@ -405,17 +405,17 @@ legend { .form-select { .has-success &, &.is-success { - border-color: @success-color; + border-color: $success-color; &:focus { - .control-shadow(@success-color); + @include control-shadow($success-color); } } .has-error &, &.is-error { - border-color: @error-color; + border-color: $error-color; &:focus { - .control-shadow(@error-color); + @include control-shadow($error-color); } } } @@ -426,18 +426,18 @@ legend { .has-error &, &.is-error { .form-icon { - border-color: @error-color; + border-color: $error-color; } input { &:checked + .form-icon { - background: @error-color; - border-color: @error-color; + background: $error-color; + border-color: $error-color; } &:focus + .form-icon { - border-color: @error-color; - .control-shadow(@error-color); + border-color: $error-color; + @include control-shadow($error-color); } } } @@ -447,13 +447,13 @@ legend { .form-input { &:not(:placeholder-shown) { &:invalid { - border-color: @error-color; + border-color: $error-color; &:focus { - .control-shadow(@error-color); + @include control-shadow($error-color); } & + .form-input-hint { - color: @error-color; + color: $error-color; } } } @@ -464,7 +464,7 @@ legend { .form-select { &:disabled, &.disabled { - background-color: @bg-color-dark; + background-color: $bg-color-dark; cursor: not-allowed; opacity: .5; } @@ -472,7 +472,7 @@ legend { .form-input { &[readonly] { - background-color: @bg-color; + background-color: $bg-color; } } @@ -480,7 +480,7 @@ input { &:disabled, &.disabled { & + .form-icon { - background: @bg-color-dark; + background: $bg-color-dark; cursor: not-allowed; opacity: .5; } @@ -492,7 +492,7 @@ input { &:disabled, &.disabled { & + .form-icon::before { - background: @bg-color-light; + background: $bg-color-light; } } } @@ -500,7 +500,7 @@ input { // Form Horizontal .form-horizontal { - padding: @layout-spacing; + padding: $layout-spacing; .form-group { display: flex; @@ -509,6 +509,6 @@ input { .form-checkbox, .form-radio, .form-switch { - margin: (@control-size - @control-size-sm) / 2 0; + margin: ($control-size - $control-size-sm) / 2 0; } } diff --git a/src/icons.less b/src/_icons.scss index ca7672d..ad092b8 100644 --- a/src/icons.less +++ b/src/_icons.scss @@ -1,5 +1,5 @@ // CSS Icons -@icon-border-width: @border-width-lg; +$icon-border-width: $border-width-lg; .icon { box-sizing: border-box; @@ -31,7 +31,7 @@ .icon-forward, .icon-upward { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; content: ""; @@ -69,7 +69,7 @@ &::after { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; width: .8em; } } @@ -80,7 +80,7 @@ background: currentColor; content: ""; height: .8em; - width: @icon-border-width; + width: $icon-border-width; } } @@ -139,7 +139,7 @@ background: currentColor; box-shadow: 0 -.35em, 0 .35em; content: ""; - height: @icon-border-width; + height: $icon-border-width; width: 100%; } } @@ -160,7 +160,7 @@ .icon-resize-vert { &::before, &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; content: ""; @@ -209,7 +209,7 @@ &::before { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; width: 100%; } } @@ -219,7 +219,7 @@ background: currentColor; content: ""; height: 100%; - width: @icon-border-width; + width: $icon-border-width; } } .icon-cross { @@ -238,7 +238,7 @@ // Icon check .icon-check { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-right: 0; border-top: 0; content: ""; @@ -250,12 +250,12 @@ // Icon stop .icon-stop { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; &::before { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; transform: translate(-50%, -50%) rotate(45deg); width: 1em; } @@ -263,7 +263,7 @@ // Icon shutdown .icon-shutdown { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; border-top-color: transparent; &::before { @@ -271,14 +271,14 @@ content: ""; height: .5em; top: .1em; - width: @icon-border-width; + width: $icon-border-width; } } // Icon refresh .icon-refresh { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; border-right-color: transparent; content: ""; @@ -300,7 +300,7 @@ // Icon search .icon-search { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .75em; @@ -312,7 +312,7 @@ &::after { background: currentColor; content: ""; - height: @icon-border-width; + height: $icon-border-width; left: 80%; top: 80%; transform: translate(-50%, -50%) rotate(45deg); @@ -323,7 +323,7 @@ // Icon edit .icon-edit { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; content: ""; height: .4em; transform: translate(-40%, -60%) rotate(-45deg); @@ -345,9 +345,9 @@ // Icon delete .icon-delete { &::before { - border: @icon-border-width solid currentColor; - border-bottom-left-radius: @border-radius; - border-bottom-right-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; border-top: 0; content: ""; height: .75em; @@ -358,20 +358,20 @@ background: currentColor; box-shadow: -.25em .2em, .25em .2em; content: ""; - height: @icon-border-width; - top: @icon-border-width/2; + height: $icon-border-width; + top: $icon-border-width/2; width: .5em; } } // Icon share .icon-share { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-radius: $border-radius; border-right: 0; border-top: 0; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-left: 0; border-top: 0; content: ""; @@ -382,7 +382,7 @@ width: .4em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; border-radius: 75% 0; @@ -399,13 +399,13 @@ content: ""; height: 1em; left: 15%; - width: @icon-border-width; + width: $icon-border-width; } &::after { - border: @icon-border-width solid currentColor; - border-bottom-right-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-bottom-right-radius: $border-radius; border-left: 0; - border-top-right-radius: @border-radius; + border-top-right-radius: $border-radius; content: ""; height: .65em; top: 35%; @@ -417,19 +417,19 @@ // Icon bookmark .icon-bookmark { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; - border-top-left-radius: @border-radius; - border-top-right-radius: @border-radius; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; content: ""; height: .9em; width: .8em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-left: 0; - border-radius: @border-radius; + border-radius: $border-radius; content: ""; height: .5em; transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg); @@ -440,9 +440,9 @@ // Icon download & upload .icon-download, .icon-upload { - border-bottom: @icon-border-width solid currentColor; + border-bottom: $icon-border-width solid currentColor; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-right: 0; content: ""; @@ -455,7 +455,7 @@ content: ""; height: .6em; top: 40%; - width: @icon-border-width; + width: $icon-border-width; } } @@ -470,14 +470,14 @@ // Icon time .icon-time { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; &::before { background: currentColor; content: ""; height: .4em; transform: translate(-50%, -75%); - width: @icon-border-width; + width: $icon-border-width; } &::after { background: currentColor; @@ -485,21 +485,21 @@ height: .3em; transform: translate(-50%, -75%) rotate(90deg); transform-origin: 50% 90%; - width: @icon-border-width; + width: $icon-border-width; } } // Icon mail .icon-mail { &::before { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-radius: $border-radius; content: ""; height: .8em; width: 1em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-right: 0; border-top: 0; content: ""; @@ -512,7 +512,7 @@ // Icon people .icon-people { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .45em; @@ -520,7 +520,7 @@ width: .45em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50% 50% 0 0; content: ""; height: .4em; @@ -531,14 +531,14 @@ // Icon message .icon-message { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; - border-radius: @border-radius; + border-radius: $border-radius; border-right: 0; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-left: 0; - border-bottom-right-radius: @border-radius; + border-bottom-right-radius: $border-radius; border-top: 0; content: ""; height: .8em; @@ -548,22 +548,22 @@ } &::after { background: currentColor; - border-radius: @border-radius; + border-radius: $border-radius; content: ""; height: .3em; left: 10%; top: 100%; transform: translate(0, -90%) rotate(45deg); - width: @icon-border-width; + width: $icon-border-width; } } // Icon photo .icon-photo { - border: @icon-border-width solid currentColor; - border-radius: @border-radius; + border: $icon-border-width solid currentColor; + border-radius: $border-radius; &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .25em; @@ -572,7 +572,7 @@ width: .25em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom: 0; border-left: 0; content: ""; @@ -587,7 +587,7 @@ .icon-link { &::before, &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 5em 0 0 5em; border-right: 0; content: ""; @@ -605,7 +605,7 @@ // Icon location .icon-location { &::before { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50% 50% 50% 0; content: ""; height: .8em; @@ -613,7 +613,7 @@ width: .8em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; content: ""; height: .2em; @@ -624,7 +624,7 @@ // Icon emoji .icon-emoji { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-radius: 50%; &::before { border-radius: 50%; @@ -634,7 +634,7 @@ width: .1em; } &::after { - border: @icon-border-width solid currentColor; + border: $icon-border-width solid currentColor; border-bottom-color: transparent; border-radius: 50%; border-right-color: transparent; diff --git a/src/_labels.scss b/src/_labels.scss new file mode 100644 index 0000000..068d3ac --- /dev/null +++ b/src/_labels.scss @@ -0,0 +1,33 @@ +// Labels +.label { + display: inline-block; + @include label-base(); + @include label-variant(lighten($body-font-color, 5%), $bg-color); + line-height: 1; + + &.label-rounded { + border-radius: 5rem; + padding-left: .4rem; + padding-right: .4rem; + } + + &.label-primary { + @include label-variant($light-color, $primary-color); + } + + &.label-secondary { + @include label-variant($primary-color, $secondary-color); + } + + &.label-success { + @include label-variant($light-color, $success-color); + } + + &.label-warning { + @include label-variant($light-color, $warning-color); + } + + &.label-error { + @include label-variant($light-color, $error-color); + } +} diff --git a/src/layout.less b/src/_layout.scss index 7fd2c60..83e2c18 100644 --- a/src/layout.less +++ b/src/_layout.scss @@ -2,29 +2,31 @@ .container { margin-left: auto; margin-right: auto; - padding-left: @layout-spacing; - padding-right: @layout-spacing; + padding-left: $layout-spacing; + padding-right: $layout-spacing; width: 100%; - &:extend(.clearfix all); + @extend .clearfix; + + $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size; &.grid-xl { - max-width: @size-xl + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-xl; } &.grid-lg { - max-width: @size-lg + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-lg; } &.grid-md { - max-width: @size-md + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-md; } &.grid-sm { - max-width: @size-sm + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-sm; } &.grid-xs { - max-width: @size-xs + 2 * @layout-spacing * @html-font-size; + max-width: $grid-spacing * 2 + $size-xs; } } @@ -41,8 +43,8 @@ .columns { display: flex; flex-wrap: wrap; - margin-left: -@layout-spacing; - margin-right: -@layout-spacing; + margin-left: -$layout-spacing; + margin-right: -$layout-spacing; &.col-gapless { margin-left: 0; @@ -61,8 +63,8 @@ .column { flex: 1; max-width: 100%; - padding-left: @layout-spacing; - padding-right: @layout-spacing; + padding-left: $layout-spacing; + padding-right: $layout-spacing; &.col-12, &.col-11, @@ -130,7 +132,7 @@ .col-mr-auto { margin-right: auto; } -@media screen and (max-width: @size-xl ) { +@media (max-width: $size-xl) { .col-xl-12, .col-xl-11, .col-xl-10, @@ -188,7 +190,7 @@ display: block !important; } } -@media screen and (max-width: @size-lg ) { +@media (max-width: $size-lg) { .col-lg-12, .col-lg-11, .col-lg-10, @@ -246,7 +248,7 @@ display: block !important; } } -@media screen and (max-width: @size-md ) { +@media (max-width: $size-md) { .col-md-12, .col-md-11, .col-md-10, @@ -304,7 +306,7 @@ display: block !important; } } -@media screen and (max-width: @size-sm ) { +@media (max-width: $size-sm) { .col-sm-12, .col-sm-11, .col-sm-10, @@ -362,7 +364,7 @@ display: block !important; } } -@media screen and (max-width: @size-xs) { +@media (max-width: $size-xs) { .col-xs-12, .col-xs-11, .col-xs-10, diff --git a/src/media.less b/src/_media.scss index a55b8cb..68c5934 100644 --- a/src/media.less +++ b/src/_media.scss @@ -22,7 +22,6 @@ padding: 0; position: relative; width: 100%; - &::before { content: ""; display: block; @@ -41,6 +40,7 @@ top: 0; width: 100%; } + video { height: auto; max-width: 100%; @@ -61,10 +61,10 @@ } .figure { - margin: 0 0 @layout-spacing 0; + margin: 0 0 $layout-spacing 0; .figure-caption { - color: @gray-color-dark; - margin-top: @layout-spacing; + color: $gray-color-dark; + margin-top: $layout-spacing; } -} +}
\ No newline at end of file diff --git a/src/_menus.scss b/src/_menus.scss new file mode 100644 index 0000000..234e4bb --- /dev/null +++ b/src/_menus.scss @@ -0,0 +1,56 @@ +// Menus +.menu { + background: $bg-color-light; + border-radius: $border-radius; + list-style: none; + margin: 0; + min-width: $control-min-width; + padding: $unit-2; + @include shadow-variant(.05rem); + transform: translateY($layout-spacing-sm); + z-index: $zindex-1; + + &.menu-nav { + background: transparent; + box-shadow: none; + } + + .menu-item { + margin-top: 0; + padding: 0 $unit-2; + text-decoration: none; + user-select: none; + + & > a { + border-radius: $border-radius; + color: inherit; + display: block; + margin: 0 (-$unit-2); + padding: $unit-1 $unit-2; + text-decoration: none; + &:focus, + &:hover { + background: $secondary-color; + color: $primary-color; + } + &:active, + &.active { + background: $secondary-color; + color: $primary-color; + } + } + + & + .menu-item { + margin-top: $unit-1; + } + } + + .menu-badge { + float: right; + padding: $unit-1 0; + + .btn { + margin-top: -$unit-h; + } + } +} diff --git a/src/meters.less b/src/_meters.scss index d0b2b59..9fd98b0 100644 --- a/src/meters.less +++ b/src/_meters.scss @@ -2,12 +2,12 @@ // Credit: https://css-tricks.com/html5-meter-element/ .meter { appearance: none; - background: @bg-color; + background: $bg-color; border: 0; - border-radius: @border-radius; + border-radius: $border-radius; display: block; width: 100%; - height: @unit-4; + height: $unit-4; &::-webkit-meter-inner-element { display: block; @@ -17,41 +17,41 @@ &::-webkit-meter-optimum-value, &::-webkit-meter-suboptimum-value, &::-webkit-meter-even-less-good-value { - border-radius: @border-radius; + border-radius: $border-radius; } &::-webkit-meter-bar { - background: @bg-color; + background: $bg-color; } &::-webkit-meter-optimum-value { - background: @success-color; + background: $success-color; } &::-webkit-meter-suboptimum-value { - background: @warning-color; + background: $warning-color; } &::-webkit-meter-even-less-good-value { - background: @error-color; + background: $error-color; } &::-moz-meter-bar, &:-moz-meter-optimum, &:-moz-meter-sub-optimum, &:-moz-meter-sub-sub-optimum { - border-radius: @border-radius; + border-radius: $border-radius; } &:-moz-meter-optimum::-moz-meter-bar { - background: @success-color; + background: $success-color; } &:-moz-meter-sub-optimum::-moz-meter-bar { - background: @warning-color; + background: $warning-color; } &:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background: @error-color; + background: $error-color; } } diff --git a/src/_mixins.scss b/src/_mixins.scss new file mode 100644 index 0000000..ae64423 --- /dev/null +++ b/src/_mixins.scss @@ -0,0 +1,186 @@ +// Mixins +// Avatar mixin +@mixin avatar-base($size: $unit-8) { + font-size: $size / 2; + height: $size; + width: $size; +} + +// Background color utility mixin +@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) { + #{$name} { + background: $color; + } +} + +// Button variant mixin +@mixin button-variant($color: $primary-color) { + background: $color; + border-color: darken($color, 3%); + color: $light-color; + &:focus { + @include control-shadow($color); + } + &:focus, + &:hover { + background: darken($color, 2%); + border-color: darken($color, 5%); + color: $light-color; + } + &:active, + &.active { + background: darken($color, 7%); + border-color: darken($color, 10%); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $light-color; + border-left-color: $light-color; + } + } +} + +@mixin button-outline-variant($color: $primary-color) { + background: $light-color; + border-color: $color; + color: $color; + &:focus { + @include control-shadow($color); + } + &:focus, + &:hover { + background: lighten($color, 50%); + border-color: darken($color, 2%); + color: $color; + } + &:active, + &.active { + background: $color; + border-color: darken($color, 5%); + color: $light-color; + } + &.loading { + &::after { + border-bottom-color: $color; + border-left-color: $color; + } + } +} + +// Clearfix mixin +@mixin clearfix() { + &::after { + clear: both; + content: ""; + display: table; + } +} + +// Component focus shadow +@mixin control-shadow($color: $primary-color) { + box-shadow: 0 0 0 .1rem rgba($color, .2); +} + +// Component transition +@mixin control-transition() { + transition: all .2s ease; +} + +// Label base style +@mixin label-base() { + border-radius: $border-radius; + line-height: 1; + padding: .15rem .2rem; +} + +@mixin label-variant($color: $light-color, $bg-color: $primary-color) { + background: $bg-color; + color: $color; +} + +// Margin utility mixin +@mixin margin-variant($id: 1, $size: $unit-1) { + .m-#{$id} { + margin: $size; + } + .mb-#{$id} { + margin-bottom: $size; + } + .ml-#{$id} { + margin-left: $size; + } + .mr-#{$id} { + margin-right: $size; + } + .mt-#{$id} { + margin-top: $size; + } + .mx-#{$id} { + margin-left: $size; + margin-right: $size; + } + .my-#{$id} { + margin-bottom: $size; + margin-top: $size; + } +} + +// Padding utility mixin +@mixin padding-variant($id: 1, $size: $unit-1) { + .p-#{$id} { + padding: $size; + } + .pb-#{$id} { + padding-bottom: $size; + } + .pl-#{$id} { + padding-left: $size; + } + .pr-#{$id} { + padding-right: $size; + } + .pt-#{$id} { + padding-top: $size; + } + .px-#{$id} { + padding-left: $size; + padding-right: $size; + } + .py-#{$id} { + padding-bottom: $size; + padding-top: $size; + } +} + +// Shadow mixin +@mixin shadow-variant($offset) { + box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3); +} + +// Text color utility mixin +@mixin text-color-variant($name: ".text-primary", $color: $primary-color) { + #{$name} { + color: $color; + } + + a#{$name} { + &:focus, + &:hover { + color: darken($color, 5%); + } + } +} + +// Text Ellipsis +@mixin text-ellipsis() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Toast variant mixin +@mixin toast-variant($color: $dark-color) { + background: rgba($color, .9); + border-color: $color; +}
\ No newline at end of file diff --git a/src/modals.less b/src/_modals.scss index fb5cdf9..daf7cab 100644 --- a/src/modals.less +++ b/src/_modals.scss @@ -7,7 +7,7 @@ left: 0; opacity: 0; overflow: hidden; - padding: @layout-spacing; + padding: $layout-spacing; position: fixed; right: 0; top: 0; @@ -16,10 +16,10 @@ &.active { display: flex; opacity: 1; - z-index: @zindex-4; + z-index: $zindex-4; .modal-overlay { - background: fade(@bg-color, 75%); + background: rgba($bg-color, .75); bottom: 0; cursor: default; display: block; @@ -32,27 +32,27 @@ .modal-container { animation: slide-down .2s ease 1; max-width: 640px; - z-index: @zindex-0; + z-index: $zindex-0; } } &.modal-sm { .modal-container { - max-width: @control-max-width; + max-width: $control-max-width; } } } .modal-container { - background: @bg-color-light; - border-radius: @border-radius; + background: $bg-color-light; + border-radius: $border-radius; display: block; padding: 0; - .shadow-variant(.2rem); + @include shadow-variant(.2rem); text-align: left; .modal-header { - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; .modal-title { margin: 0; @@ -62,12 +62,12 @@ .modal-body { max-height: 50vh; overflow-y: auto; - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; position: relative; } .modal-footer { - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; text-align: right; } } diff --git a/src/navbar.less b/src/_navbar.scss index 3e212c0..a90b6e6 100755 --- a/src/navbar.less +++ b/src/_navbar.scss @@ -22,7 +22,7 @@ } .navbar-brand { - font-size: @font-size-lg; + font-size: $font-size-lg; font-weight: 500; text-decoration: none; } diff --git a/src/navs.less b/src/_navs.scss index 5f471b0..4bedc27 100644 --- a/src/navs.less +++ b/src/_navs.scss @@ -3,32 +3,32 @@ display: flex; flex-direction: column; list-style: none; - margin: @unit-1 0; + margin: $unit-1 0; .nav-item { a { - color: @gray-color-dark; - padding: @unit-1 @unit-2; + color: $gray-color-dark; + padding: $unit-1 $unit-2; text-decoration: none; &:focus, &:hover { - color: @primary-color; + color: $primary-color; } } &.active { & > a { - color: darken(@gray-color-dark, 10%); + color: darken($gray-color-dark, 10%); font-weight: bold; &:focus, &:hover { - color: @primary-color; + color: $primary-color; } } } } & .nav { - margin-bottom: @unit-2; - margin-left: @unit-4; + margin-bottom: $unit-2; + margin-left: $unit-4; } } diff --git a/src/normalize.less b/src/_normalize.scss index 28ed4d7..f157a8c 100644 --- a/src/normalize.less +++ b/src/_normalize.scss @@ -140,7 +140,7 @@ code, kbd, pre, samp { - font-family: @mono-font-family; /* 1 (changed) */ + font-family: $mono-font-family; /* 1 (changed) */ font-size: 1em; /* 2 */ } diff --git a/src/pagination.less b/src/_pagination.scss index 596651b..6efc7ba 100644 --- a/src/pagination.less +++ b/src/_pagination.scss @@ -2,26 +2,26 @@ .pagination { display: flex; list-style: none; - margin: @unit-1 0; - padding: @unit-1 0; + margin: $unit-1 0; + padding: $unit-1 0; .page-item { - margin: @unit-1 @unit-o; + margin: $unit-1 $unit-o; span { display: inline-block; - padding: @unit-1 @unit-1; + padding: $unit-1 $unit-1; } a { - border-radius: @border-radius; - color: @gray-color-dark; + border-radius: $border-radius; + color: $gray-color-dark; display: inline-block; - padding: @unit-1 @unit-2; + padding: $unit-1 $unit-2; text-decoration: none; &:focus, &:hover { - color: @primary-color; + color: $primary-color; } } @@ -35,8 +35,8 @@ &.active { a { - background: @primary-color; - color: @light-color; + background: $primary-color; + color: $light-color; } } diff --git a/src/panels.less b/src/_panels.scss index 3c6bae8..386f96e 100644 --- a/src/panels.less +++ b/src/_panels.scss @@ -1,14 +1,14 @@ // Panels .panel { - border: @border-width solid @border-color; - border-radius: @border-radius; + border: $border-width solid $border-color; + border-radius: $border-radius; display: flex; flex-direction: column; .panel-header, .panel-footer { flex: 0 0 auto; - padding: @layout-spacing-lg; + padding: $layout-spacing-lg; } .panel-nav { @@ -18,6 +18,6 @@ .panel-body { flex: 1 1 auto; overflow-y: auto; - padding: 0 @layout-spacing-lg; + padding: 0 $layout-spacing-lg; } } diff --git a/src/parallax.less b/src/_parallax.scss index e353fd4..c097e1f 100644 --- a/src/parallax.less +++ b/src/_parallax.scss @@ -1,9 +1,17 @@ // Parallax -@parallax-deg: 3deg; -@parallax-offset: 6.5px; -@parallax-offset-z: 100px; -@parallax-perspective: 1000px; -@parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective); +$parallax-deg: 3deg; +$parallax-offset: 6.5px; +$parallax-offset-z: 100px; +$parallax-perspective: 1000px; +$parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective); + +// Mixin: Parallax direction +@mixin parallax-dir() { + height: 50%; + position: absolute; + width: 50%; + z-index: $zindex-3; +} .parallax { display: block; @@ -13,8 +21,8 @@ .parallax-content { height: auto; - .shadow-variant(1rem); - transform: perspective(@parallax-perspective); + @include shadow-variant(1rem); + transform: perspective($parallax-perspective); transform-style: preserve-3d; transition: all .4s ease; width: 100%; @@ -32,98 +40,90 @@ .parallax-front { align-items: center; - color: @light-color; + color: $light-color; display: flex; height: 100%; justify-content: center; left: 0; position: absolute; text-align: center; - text-shadow: 0 0 20px fade(@dark-color, 50%); + text-shadow: 0 0 20px fade($dark-color, 50%); top: 0; - transform: translateZ(@parallax-offset-z) scale(@parallax-scale); + transform: translateZ($parallax-offset-z) scale($parallax-scale); transition: all .4s ease; width: 100%; - z-index: @zindex-0; + z-index: $zindex-0; } .parallax-top-left { - .parallax-dir(); + @include parallax-dir(); left: 0; top: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(@parallax-deg); + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg); &::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } .parallax-top-right { - .parallax-dir(); + @include parallax-dir(); right: 0; top: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(-@parallax-deg); + transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg); &::before { background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } .parallax-bottom-left { - .parallax-dir(); + @include parallax-dir(); bottom: 0; left: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(@parallax-deg); + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg); &::before { background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } .parallax-bottom-right { - .parallax-dir(); + @include parallax-dir(); bottom: 0; right: 0; &:hover ~ .parallax-content { - transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(-@parallax-deg); + transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg); &::before { background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%); } .parallax-front { - transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale); + transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale); } } } } - -// Mixin: Parallax direction -.parallax-dir() { - height: 50%; - position: absolute; - width: 50%; - z-index: @zindex-3; -} diff --git a/src/popovers.less b/src/_popovers.scss index 0ba28a0..eee2fc9 100644 --- a/src/popovers.less +++ b/src/_popovers.scss @@ -7,13 +7,13 @@ content: attr(data-tooltip); opacity: 0; left: 50%; - padding: @layout-spacing; + padding: $layout-spacing; position: absolute; top: 0; transform: translate(-50%, -50%) scale(0); transition: transform .2s ease; - width: @control-max-width; - z-index: @zindex-4; + width: $control-max-width; + z-index: $zindex-4; } :focus + .popover-container, @@ -65,6 +65,6 @@ .card { border: 0; - .shadow-variant(.2rem); + @include shadow-variant(.2rem); } } diff --git a/src/progress.less b/src/_progress.scss index cf9e34b..f173772 100644 --- a/src/progress.less +++ b/src/_progress.scss @@ -2,32 +2,32 @@ // Credit: https://css-tricks.com/html5-progress-element/ .progress { appearance: none; - background: @bg-color-dark; + background: $bg-color-dark; border: 0; - border-radius: @border-radius; - color: @primary-color; - height: @unit-1; + border-radius: $border-radius; + color: $primary-color; + height: $unit-1; position: relative; width: 100%; &::-webkit-progress-bar { background: transparent; - border-radius: @border-radius; + border-radius: $border-radius; } &::-webkit-progress-value { - background: @primary-color; - border-radius: @border-radius; + background: $primary-color; + border-radius: $border-radius; } &::-moz-progress-bar { - background: @primary-color; - border-radius: @border-radius; + background: $primary-color; + border-radius: $border-radius; } &:indeterminate { animation: progress-indeterminate 1.5s linear infinite; - background: @bg-color-dark linear-gradient(to right, @primary-color 30%, @bg-color-dark 30%) top left / 150% 150% no-repeat; + background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat; &::-moz-progress-bar { background: transparent; diff --git a/src/sliders.less b/src/_sliders.scss index bf5ce96..501d91e 100644 --- a/src/sliders.less +++ b/src/_sliders.scss @@ -5,39 +5,39 @@ background: transparent; display: block; width: 100%; - height: @unit-6; + height: $unit-6; &:focus { - .control-shadow(); + @include control-shadow(); outline: none; } // Slider Thumb &::-webkit-slider-thumb { -webkit-appearance: none; - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; - margin-top: -(@unit-3 - @unit-h) / 2 ; + height: $unit-3; + margin-top: -($unit-3 - $unit-h) / 2 ; transition: transform .2s ease; - width: @unit-3; + width: $unit-3; } &::-moz-range-thumb { - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; + height: $unit-3; transition: transform .2s ease; - width: @unit-3; + width: $unit-3; } &::-ms-thumb { - background: @primary-color; + background: $primary-color; border: 0; border-radius: 50%; - height: @unit-3; + height: $unit-3; transition: transform .2s ease; - width: @unit-3; + width: $unit-3; } &:active { @@ -55,39 +55,39 @@ &:disabled, &.disabled { &::-webkit-slider-thumb { - background: @gray-color-light; + background: $gray-color-light; transform: scale(1); } &::-moz-range-thumb { - background: @gray-color-light; + background: $gray-color-light; transform: scale(1); } &::-ms-thumb { - background: @gray-color-light; + background: $gray-color-light; transform: scale(1); } } // Slider Track &::-webkit-slider-runnable-track { - background: @bg-color-dark; - border-radius: @border-radius; - height: @unit-h; + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; width: 100%; } &::-moz-range-track { - background: @bg-color-dark; - border-radius: @border-radius; - height: @unit-h; + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; width: 100%; } &::-ms-track { - background: @bg-color-dark; - border-radius: @border-radius; - height: @unit-h; + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; width: 100%; } &::-ms-fill-lower { - background: @primary-color; + background: $primary-color; } } diff --git a/src/steps.less b/src/_steps.scss index fa0167f..d5ddc6e 100644 --- a/src/steps.less +++ b/src/_steps.scss @@ -3,18 +3,18 @@ display: flex; flex-wrap: nowrap; list-style: none; - margin: @unit-1 0; + margin: $unit-1 0; width: 100%; .step-item { flex: 1 1 0; margin-top: 0; - min-height: 20px; + min-height: 1rem; text-align: center; position: relative; &:not(:first-child)::before { - background: @primary-color; + background: $primary-color; content: ""; height: 2px; left: -50%; @@ -24,44 +24,44 @@ } a { - color: @gray-color; + color: $gray-color; display: inline-block; padding: 20px 10px 0; text-decoration: none; &::before { - background: @primary-color; - border: @border-width-lg solid @light-color; + background: $primary-color; + border: $border-width-lg solid $light-color; border-radius: 50%; content: ""; display: block; - height: @unit-3; + height: $unit-3; left: 50%; position: absolute; - top: @unit-1; + top: $unit-1; transform: translateX(-50%); - width: @unit-3; - z-index: @zindex-0; + width: $unit-3; + z-index: $zindex-0; } } &.active { a { &::before { - background: @light-color; - border: @border-width-lg solid @primary-color; + background: $light-color; + border: $border-width-lg solid $primary-color; } } & ~ .step-item { &::before { - background: @border-color; + background: $border-color; } a { &::before { - background: @gray-color-light; + background: $gray-color-light; } } } diff --git a/src/tables.less b/src/_tables.scss index e9f747d..63a163a 100644 --- a/src/tables.less +++ b/src/_tables.scss @@ -8,7 +8,7 @@ &.table-striped { tbody { tr:nth-of-type(odd) { - background: @bg-color; + background: $bg-color; } } } @@ -17,7 +17,7 @@ tbody { tr { &:hover { - background: @bg-color-dark; + background: $bg-color-dark; } } } @@ -28,7 +28,7 @@ tbody { tr { &.active { - background: @bg-color-dark; + background: $bg-color-dark; } } } @@ -36,10 +36,10 @@ td, th { - border-bottom: @border-width solid @border-color; - padding: @unit-3 @unit-2; + border-bottom: $border-width solid $border-color; + padding: $unit-3 $unit-2; } th { - border-bottom-width: @border-width-lg; + border-bottom-width: $border-width-lg; } } diff --git a/src/tabs.less b/src/_tabs.scss index c5af2b6..e9f9e2e 100644 --- a/src/tabs.less +++ b/src/_tabs.scss @@ -1,11 +1,11 @@ // Tabs .tab { align-items: center; - border-bottom: @border-width solid @border-color; + border-bottom: $border-width solid $border-color; display: flex; flex-wrap: wrap; list-style: none; - margin: @unit-1 0 @unit-1 - @border-width 0; + margin: $unit-1 0 ($unit-1 - $border-width) 0; .tab-item { margin-top: 0; @@ -16,21 +16,21 @@ } a { - border-bottom: @border-width-lg solid transparent; + border-bottom: $border-width-lg solid transparent; color: inherit; display: block; - margin: 0 @unit-2 0 0; - padding: @unit-2 @unit-1 @unit-2 - @border-width-lg @unit-1; + margin: 0 $unit-2 0 0; + padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1; text-decoration: none; &:focus, &:hover { - color: @link-color; + color: $link-color; } } &.active a, a.active { - border-bottom-color: @primary-color; - color: @link-color; + border-bottom-color: $primary-color; + color: $link-color; } } diff --git a/src/tiles.less b/src/_tiles.scss index a99540e..384d150 100644 --- a/src/tiles.less +++ b/src/_tiles.scss @@ -11,15 +11,15 @@ .tile-content { flex: 1 1 auto; &:not(:first-child) { - padding-left: @unit-2; + padding-left: $unit-2; } &:not(:last-child) { - padding-right: @unit-2; + padding-right: $unit-2; } } .tile-title, .tile-subtitle { - line-height: @line-height; + line-height: $line-height; } &.tile-centered { @@ -32,7 +32,7 @@ .tile-title, .tile-subtitle { margin-bottom: 0; - .text-ellipsis; + @include text-ellipsis(); } } } diff --git a/src/timelines.less b/src/_timelines.scss index 02b421e..88cae04 100644 --- a/src/timelines.less +++ b/src/_timelines.scss @@ -2,15 +2,15 @@ .timeline { .timeline-item { display: flex; - margin-bottom: @unit-6; + margin-bottom: $unit-6; position: relative; &::before { - background: @border-color; + background: $border-color; content: ""; height: 100%; left: 11px; position: absolute; - top: @unit-6; + top: $unit-6; width: 2px; } @@ -20,32 +20,32 @@ .timeline-content { flex: 1 1 auto; - padding: 2px 0 2px @layout-spacing-lg; + padding: 2px 0 2px $layout-spacing-lg; } .timeline-icon { border-radius: 50%; - color: @light-color; + color: $light-color; display: block; - height: @unit-6; + height: $unit-6; text-align: center; - width: @unit-6; + width: $unit-6; &::before { - border: @border-width-lg solid @primary-color; + border: $border-width-lg solid $primary-color; border-radius: 50%; content: ""; display: block; - height: @unit-2; - left: @unit-2; + height: $unit-2; + left: $unit-2; position: absolute; - top: @unit-2; - width: @unit-2; + top: $unit-2; + width: $unit-2; } &.icon-lg { - background: @primary-color; - font-size: @font-size-lg; - line-height: @line-height; + background: $primary-color; + font-size: $font-size-lg; + line-height: $line-height; &::before { content: none; } diff --git a/src/_toasts.scss b/src/_toasts.scss new file mode 100644 index 0000000..f113e1d --- /dev/null +++ b/src/_toasts.scss @@ -0,0 +1,41 @@ +// Toasts +.toast { + border: $border-width solid $dark-color; + border-radius: $border-radius; + color: $light-color; + display: block; + padding: $layout-spacing; + @include toast-variant($dark-color); + width: 100%; + + &.toast-primary { + @include toast-variant($primary-color); + } + + &.toast-success { + @include toast-variant($success-color); + } + + &.toast-warning { + @include toast-variant($warning-color); + } + + &.toast-error { + @include toast-variant($error-color); + } + + a { + color: $light-color; + text-decoration: underline; + &:focus, + &:hover, + &:active, + &.active { + opacity: .75; + } + } + + .btn-clear { + margin: 2px -2px 2px 4px; + } +} diff --git a/src/tooltips.less b/src/_tooltips.scss index 02dc201..90cf1ad 100644 --- a/src/tooltips.less +++ b/src/_tooltips.scss @@ -2,31 +2,31 @@ .tooltip { position: relative; &::after { - background: fade(@dark-color, 90%); - border-radius: @border-radius; + background: rgba($dark-color, .9); + border-radius: $border-radius; bottom: 100%; - color: @light-color; + color: $light-color; content: attr(data-tooltip); display: block; - font-size: @font-size-sm; + font-size: $font-size-sm; left: 50%; - max-width: @control-max-width; + max-width: $control-max-width; opacity: 0; overflow: hidden; - padding: @unit-1 @unit-2; + padding: $unit-1 $unit-2; pointer-events: none; position: absolute; text-overflow: ellipsis; - transform: translate(-50%, @unit-2); + transform: translate(-50%, $unit-2); transition: all .2s ease; white-space: nowrap; - z-index: @zindex-3; + z-index: $zindex-3; } &:focus, &:hover { &::after { opacity: 1; - transform: translate(-50%, -@unit-1); + transform: translate(-50%, -$unit-1); } } &[disabled], @@ -38,12 +38,12 @@ &::after { bottom: 50%; left: 100%; - transform: translate(-@unit-1, 50%); + transform: translate(-$unit-1, 50%); } &:focus, &:hover { &::after { - transform: translate(@unit-1, 50%); + transform: translate($unit-1, 50%); } } } @@ -51,12 +51,12 @@ &::after { bottom: auto; top: 100%; - transform: translate(-50%, -@unit-2); + transform: translate(-50%, -$unit-2); } &:focus, &:hover { &::after { - transform: translate(-50%, @unit-1); + transform: translate(-50%, $unit-1); } } } @@ -65,12 +65,12 @@ bottom: 50%; left: auto; right: 100%; - transform: translate(@unit-2, 50%); + transform: translate($unit-2, 50%); } &:focus, &:hover { &::after { - transform: translate(-@unit-1, 50%); + transform: translate(-$unit-1, 50%); } } } diff --git a/src/typography.less b/src/_typography.scss index 5fd152f..5999568 100644 --- a/src/typography.less +++ b/src/_typography.scss @@ -47,8 +47,8 @@ h6, // Paragraphs p { - line-height: 1.2 * @line-height; - margin: 0 0 @unit-4; + line-height: 1.2 * $line-height; + margin: 0 0 $unit-4; } // Semantic text elements @@ -59,26 +59,26 @@ u { } abbr[title] { - border-bottom: @border-width dotted; + border-bottom: $border-width dotted; cursor: help; text-decoration: none; } kbd { - .label-base(); - .label-variant(@light-color, @dark-color); + @include label-base(); + @include label-variant($light-color, $dark-color); } mark { - .label-base(); - .label-variant(@body-font-color, @highlight-color); + @include label-base(); + @include label-variant($body-font-color, $highlight-color); } // Blockquote blockquote { - border-left: @border-width-lg solid @border-color; + border-left: $border-width-lg solid $border-color; margin-left: 0; - padding: @unit-2 @unit-4; + padding: $unit-2 $unit-4; p:last-child { margin-bottom: 0; @@ -88,16 +88,16 @@ blockquote { // Lists ul, ol { - margin: @unit-4 0 @unit-4 @unit-4; + margin: $unit-4 0 $unit-4 $unit-4; padding: 0; ul, ol { - margin: @unit-4 0 @unit-4 @unit-4; + margin: $unit-4 0 $unit-4 $unit-4; } li { - margin-top: @unit-2; + margin-top: $unit-2; } } @@ -122,6 +122,6 @@ dl { font-weight: bold; } dd { - margin: @unit-2 0 @unit-4 0; + margin: $unit-2 0 $unit-4 0; } } diff --git a/src/_utilities.scss b/src/_utilities.scss new file mode 100644 index 0000000..1d9b32f --- /dev/null +++ b/src/_utilities.scss @@ -0,0 +1,7 @@ +@import 'utilities/colors'; +@import 'utilities/display'; +@import 'utilities/divider'; +@import 'utilities/loading'; +@import 'utilities/position'; +@import 'utilities/shapes'; +@import 'utilities/text';
\ No newline at end of file diff --git a/src/_variables.scss b/src/_variables.scss new file mode 100644 index 0000000..b4349e4 --- /dev/null +++ b/src/_variables.scss @@ -0,0 +1,103 @@ +// Core variables +// Colors +// Core colors +$primary-color: #5764c6; +$primary-color-dark: darken($primary-color, 3%); +$primary-color-light: lighten($primary-color, 3%); +$secondary-color: lighten($primary-color, 40%); +$secondary-color-dark: darken($secondary-color, 3%); +$secondary-color-light: lighten($secondary-color, 3%); + +$link-color: $primary-color; +$link-color-dark: darken($link-color, 5%); + +// Gray colors +$dark-color: #454d5d; +$light-color: #fff; +$gray-color: lighten($dark-color, 40%); +$gray-color-dark: darken($gray-color, 20%); +$gray-color-light: lighten($gray-color, 20%); + +$border-color: lighten($dark-color, 60%); +$border-color-dark: darken($border-color, 10%); +$bg-color: lighten($dark-color, 66%); +$bg-color-dark: darken($bg-color, 3%); +$bg-color-light: $light-color; + +// Control colors +$success-color: #32b643; +$warning-color: #ffb700; +$error-color: #e85600; + +// Other colors +$code-color: #e06870; +$highlight-color: #ffe9b3; +$body-bg: $bg-color-light; +$body-font-color: lighten($dark-color, 5%); + +// Fonts +// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ +$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; +$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; +$fallback-font-family: "Helvetica Neue", sans-serif; +$cjk-zh-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family; +$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family; +$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family; +$body-font-family: $base-font-family, $fallback-font-family; + +// Unit sizes +$unit-o: .05rem; +$unit-h: .1rem; +$unit-1: .2rem; +$unit-2: .4rem; +$unit-3: .6rem; +$unit-4: .8rem; +$unit-5: 1rem; +$unit-6: 1.2rem; +$unit-7: 1.4rem; +$unit-8: 1.6rem; +$unit-9: 1.8rem; +$unit-10: 2rem; +$unit-12: 2.4rem; +$unit-16: 3.2rem; + +// Font sizes +$html-font-size: 20px; +$html-line-height: 1.428571429; +$font-size: .7rem; +$font-size-sm: .6rem; +$font-size-lg: .8rem; +$line-height: 1rem; + +// Sizes +$layout-spacing: $unit-2; +$layout-spacing-sm: $unit-1; +$layout-spacing-lg: $unit-4; +$border-radius: $unit-h; +$border-width: $unit-o; +$border-width-lg: $unit-h; +$control-size: $unit-8; +$control-size-sm: $unit-6; +$control-size-lg: $unit-10; +$control-padding-h: $unit-2; +$control-padding-v: ($control-size - $line-height) / 2 - $border-width; +$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width; +$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width; +$control-icon-size: .7rem; +$control-min-width: 180px; +$control-max-width: 320px; + +// Responsive breakpoints +$size-xs: 480px; +$size-sm: 600px; +$size-md: 840px; +$size-lg: 960px; +$size-xl: 1280px; +$size-2x: 1440px; + +// Z-index +$zindex-0: 1; +$zindex-1: 100; +$zindex-2: 200; +$zindex-3: 300; +$zindex-4: 400;
\ No newline at end of file diff --git a/src/cards.less b/src/cards.less deleted file mode 100644 index dadfa8b..0000000 --- a/src/cards.less +++ /dev/null @@ -1,39 +0,0 @@ -// Cards -.card { - background: @bg-color-light; - border: @border-width solid @border-color; - border-radius: @border-radius; - display: flex; - flex-direction: column; - - .card-header, - .card-body, - .card-footer { - padding: @layout-spacing-lg; - padding-bottom: 0; - - &:last-child { - padding-bottom: @layout-spacing-lg; - } - } - - .card-image { - padding-top: @layout-spacing-lg; - - &:first-child { - padding-top: 0; - - img { - border-top-left-radius: @border-radius; - border-top-right-radius: @border-radius; - } - } - - &:last-child { - img { - border-bottom-left-radius: @border-radius; - border-bottom-right-radius: @border-radius; - } - } - } -}
\ No newline at end of file diff --git a/src/chips.less b/src/chips.less deleted file mode 100644 index 60ab726..0000000 --- a/src/chips.less +++ /dev/null @@ -1,24 +0,0 @@ -// Chips -.chip { - align-items: center; - background: @bg-color-dark; - border-radius: 5rem; - color: @gray-color-dark; - display: inline-flex; - height: @unit-6; - margin: @unit-h; - max-width: 100%; - padding: @unit-h @unit-2 + @unit-h; - text-decoration: none; - vertical-align: middle; - - &.active { - background: @primary-color; - color: @light-color; - } - - .avatar { - margin-left: -(@unit-2 + @unit-h); - margin-right: @unit-1; - } -} diff --git a/src/codes.less b/src/codes.less deleted file mode 100644 index e982e2b..0000000 --- a/src/codes.less +++ /dev/null @@ -1,32 +0,0 @@ -// Codes -code { - font-size: .65rem; - .label-base(); - .label-variant(@code-color, lighten(@code-color, 33%)); -} - -.code { - border-radius: @border-radius; - color: @body-font-color; - line-height: @line-height; - position: relative; - - &::before { - content: attr(data-lang); - color: @gray-color; - font-size: @font-size-sm; - position: absolute; - right: @layout-spacing; - top: @unit-h; - } - - code { - background: @bg-color; - color: inherit; - display: block; - line-height: inherit; - overflow-x: auto; - padding: 1rem; - width: 100%; - } -} diff --git a/src/empty.less b/src/empty.less deleted file mode 100644 index b6cb1ae..0000000 --- a/src/empty.less +++ /dev/null @@ -1,21 +0,0 @@ -// Empty states (or Blank slates) -.empty { - background: @bg-color; - border-radius: @border-radius; - color: @gray-color-dark; - text-align: center; - padding: 4 * @layout-spacing; - - .empty-icon { - margin-bottom: @layout-spacing-lg; - } - - .empty-title, - .empty-subtitle { - margin: @layout-spacing auto; - } - - .empty-action { - margin-top: @layout-spacing-lg; - } -} diff --git a/src/labels.less b/src/labels.less deleted file mode 100644 index efeb89d..0000000 --- a/src/labels.less +++ /dev/null @@ -1,33 +0,0 @@ -// Labels -.label { - display: inline-block; - .label-base(); - .label-variant(lighten(@body-font-color, 5%), @bg-color); - line-height: 1; - - &.label-rounded { - border-radius: 5rem; - padding-left: .4rem; - padding-right: .4rem; - } - - &.label-primary { - .label-variant(@light-color, @primary-color); - } - - &.label-secondary { - .label-variant(@primary-color, @secondary-color); - } - - &.label-success { - .label-variant(@light-color, @success-color); - } - - &.label-warning { - .label-variant(@light-color, @warning-color); - } - - &.label-error { - .label-variant(@light-color, @error-color); - } -} diff --git a/src/menus.less b/src/menus.less deleted file mode 100644 index 109dc92..0000000 --- a/src/menus.less +++ /dev/null @@ -1,56 +0,0 @@ -// Menus -.menu { - background: @bg-color-light; - border-radius: @border-radius; - list-style: none; - margin: 0; - min-width: @control-min-width; - padding: @unit-2; - .shadow-variant(.05rem); - transform: translateY(@layout-spacing-sm); - z-index: @zindex-1; - - &.menu-nav { - background: transparent; - box-shadow: none; - } - - .menu-item { - margin-top: 0; - padding: 0 @unit-2; - text-decoration: none; - user-select: none; - - & > a { - border-radius: @border-radius; - color: inherit; - display: block; - margin: 0 -@unit-2; - padding: @unit-1 @unit-2; - text-decoration: none; - &:focus, - &:hover { - background: @secondary-color; - color: @primary-color; - } - &:active, - &.active { - background: @secondary-color; - color: @primary-color; - } - } - - & + .menu-item { - margin-top: @unit-1; - } - } - - .menu-badge { - float: right; - padding: @unit-1 0; - - .btn { - margin-top: -@unit-h; - } - } -} diff --git a/src/mixins.less b/src/mixins.less deleted file mode 100644 index 8cbb3f5..0000000 --- a/src/mixins.less +++ /dev/null @@ -1,175 +0,0 @@ -// Mixins -// Avatar mixin -.avatar-base(@size: @unit-8) { - font-size: @size / 2; - height: @size; - width: @size; -} - -// Background color utility mixin -.bg-color-variant(@color: @primary-color) { - background: @color; -} - -// Button variant mixin -.button-variant(@color: @primary-color) { - background: @color; - border-color: darken(@color, 3%); - color: @light-color; - &:focus { - .control-shadow(@color); - } - &:focus, - &:hover { - background: darken(@color, 2%); - border-color: darken(@color, 5%); - color: @light-color; - } - &:active, - &.active { - background: darken(@color, 7%); - border-color: darken(@color, 10%); - color: @light-color; - } - &.loading { - &::after { - border-bottom-color: @light-color; - border-left-color: @light-color; - } - } -} - -.button-outline-variant(@color: @primary-color) { - background: @light-color; - border-color: @color; - color: @color; - &:focus { - .control-shadow(@color); - } - &:focus, - &:hover { - background: lighten(@color, 50%); - border-color: darken(@color, 2%); - color: @color; - } - &:active, - &.active { - background: @color; - border-color: darken(@color, 5%); - color: @light-color; - } - &.loading { - &::after { - border-bottom-color: @color; - border-left-color: @color; - } - } -} - -// Clearfix mixin -.clearfix() { - &::after { - clear: both; - content: ""; - display: table; - } -} - -// Component focus shadow -.control-shadow(@color: @primary-color) { - box-shadow: 0 0 0 .1rem fade(@color, 20%); -} - -// Component transition -.control-transition() { - transition: all .2s ease; -} - -// Label base style -.label-base() { - border-radius: @border-radius; - line-height: 1; - padding: .15rem .2rem; -} - -.label-variant(@color: @light-color, @bg-color: @primary-color) { - background: @bg-color; - color: @color; -} - -// Margin utility mixin -.margin-variant(@id: 1, @size: 1) { - .m-@{id} { - margin: @size; - } - .mb-@{id} { - margin-bottom: @size; - } - .ml-@{id} { - margin-left: @size; - } - .mr-@{id} { - margin-right: @size; - } - .mt-@{id} { - margin-top: @size; - } - .mx-@{id} { - margin-left: @size; - margin-right: @size; - } - .my-@{id} { - margin-bottom: @size; - margin-top: @size; - } -} - -// Padding utility mixin -.padding-variant(@id: 1, @size: 1) { - .p-@{id} { - padding: @size; - } - .pb-@{id} { - padding-bottom: @size; - } - .pl-@{id} { - padding-left: @size; - } - .pr-@{id} { - padding-right: @size; - } - .pt-@{id} { - padding-top: @size; - } - .px-@{id} { - padding-left: @size; - padding-right: @size; - } - .py-@{id} { - padding-bottom: @size; - padding-top: @size; - } -} - -// Shadow mixin -.shadow-variant(@offset) { - box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%); -} - -// Text color utility mixin -.text-color-variant(@color: @primary-color) { - color: @color; - - a& { - &:focus, - &:hover { - color: darken(@color, 5%); - } - } -} - -// Toast variant mixin -.toast-variant(@color: @dark-color) { - background: fade(@color, 90%); - border-color: @color; -}
\ No newline at end of file diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss new file mode 100644 index 0000000..db7c312 --- /dev/null +++ b/src/spectre-exp.scss @@ -0,0 +1,16 @@ +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ + +// Core variables and mixins +@import "variables"; +@import "mixins"; + +// Experimentals +@import 'calendars'; +@import 'carousels'; +@import 'comparison-sliders'; +@import 'filters'; +@import 'meters'; +@import 'parallax'; +@import 'progress'; +@import 'sliders'; +@import 'timelines'; diff --git a/spectre-icons.less b/src/spectre-icons.scss index a366e7d..1fdbeeb 100644 --- a/spectre-icons.less +++ b/src/spectre-icons.scss @@ -1,8 +1,8 @@ /*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */ // Core variables and mixins -@import 'src/variables.less'; -@import 'src/mixins.less'; +@import "variables"; +@import "mixins"; // Icons -@import 'src/icons.less'; +@import 'icons'; diff --git a/src/spectre.scss b/src/spectre.scss new file mode 100644 index 0000000..6d33550 --- /dev/null +++ b/src/spectre.scss @@ -0,0 +1,50 @@ +/*! Spectre.css | MIT License | github.com/picturepan2/spectre */ + +// Core variables and mixins +@import "variables"; +@import "mixins"; + +// Reset and dependencies +@import "normalize"; +@import "base"; + +// Core classes +@import "typography"; +@import "asian"; +@import "tables"; +@import "buttons"; +@import "forms"; +@import "labels"; +@import "codes"; +@import "media"; + +// Layout +@import "layout"; +@import "navbar"; + +// Components +@import "accordions"; +@import "autocomplete"; +@import "avatars"; +@import "badges"; +@import "breadcrumbs"; +@import "bars"; +@import "cards"; +@import "chips"; +@import "dropdowns"; +@import "empty"; +@import "menus"; +@import "modals"; +@import "navs"; +@import "pagination"; +@import "panels"; +@import "popovers"; +@import "steps"; +@import "tabs"; +@import "tiles"; +@import "toasts"; +@import "tooltips"; + +// Utility classes +@import "animations"; +@import "utilities"; diff --git a/src/toasts.less b/src/toasts.less deleted file mode 100644 index 0bc61d6..0000000 --- a/src/toasts.less +++ /dev/null @@ -1,41 +0,0 @@ -// Toasts -.toast { - border: @border-width solid @dark-color; - border-radius: @border-radius; - color: @light-color; - display: block; - padding: @layout-spacing; - .toast-variant(@dark-color); - width: 100%; - - &.toast-primary { - .toast-variant(@primary-color); - } - - &.toast-success { - .toast-variant(@success-color); - } - - &.toast-warning { - .toast-variant(@warning-color); - } - - &.toast-error { - .toast-variant(@error-color); - } - - a { - color: @light-color; - text-decoration: underline; - &:focus, - &:hover, - &:active, - &.active { - opacity: .75; - } - } - - .btn-clear { - margin: 2px -2px 2px 4px; - } -} diff --git a/src/utilities.less b/src/utilities.less deleted file mode 100644 index 676beb0..0000000 --- a/src/utilities.less +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utilities/colors.less'; -@import 'utilities/display.less'; -@import 'utilities/divider.less'; -@import 'utilities/loading.less'; -@import 'utilities/position.less'; -@import 'utilities/shapes.less'; -@import 'utilities/text.less';
\ No newline at end of file diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss new file mode 100644 index 0000000..767c353 --- /dev/null +++ b/src/utilities/_colors.scss @@ -0,0 +1,29 @@ +// Text colors +@include text-color-variant(".text-primary", $primary-color); + +@include text-color-variant(".text-secondary", $secondary-color-dark); + +@include text-color-variant(".text-gray", $gray-color); + +@include text-color-variant(".text-light", $light-color); + +@include text-color-variant(".text-success", $success-color); + +@include text-color-variant(".text-warning", $warning-color); + +@include text-color-variant(".text-error", $error-color); + +// Background colors +@include bg-color-variant(".bg-primary", $primary-color); + +@include bg-color-variant(".bg-secondary", $secondary-color); + +@include bg-color-variant(".bg-dark", $dark-color); + +@include bg-color-variant(".bg-gray", $bg-color); + +@include bg-color-variant(".bg-success", $success-color); + +@include bg-color-variant(".bg-warning", $warning-color); + +@include bg-color-variant(".bg-error", $error-color);
\ No newline at end of file diff --git a/src/utilities/display.less b/src/utilities/_display.scss index 26e611e..550124d 100644 --- a/src/utilities/display.less +++ b/src/utilities/_display.scss @@ -15,7 +15,7 @@ display: inline-flex; } .d-none, -.hide { +.d-hide { display: none !important; } .d-visible { @@ -42,6 +42,6 @@ position: absolute; width: 1px; } -.hand { +.c-hand { cursor: pointer; } diff --git a/src/utilities/divider.less b/src/utilities/_divider.scss index a5cb45b..5d0feb2 100644 --- a/src/utilities/divider.less +++ b/src/utilities/_divider.scss @@ -5,44 +5,44 @@ position: relative; &[data-content]::after { - background: @bg-color-light; - color: @gray-color; + background: $bg-color-light; + color: $gray-color; content: attr(data-content); display: inline-block; - font-size: @font-size-sm; - padding: 0 @unit-2; - transform: translateY(-@font-size-sm + @border-width); + font-size: $font-size-sm; + padding: 0 $unit-2; + transform: translateY(-$font-size-sm + $border-width); } } .divider { - border-top: @border-width solid @border-color; - height: @border-width; - margin: @unit-2 0; + border-top: $border-width solid $border-color; + height: $border-width; + margin: $unit-2 0; &[data-content] { - margin: @unit-4 0; + margin: $unit-4 0; } } .divider-vert { display: block; - padding: @unit-4; + padding: $unit-4; &::before { - border-left: @border-width solid @border-color; - bottom: @unit-2; + border-left: $border-width solid $border-color; + bottom: $unit-2; content: ""; display: block; left: 50%; position: absolute; - top: @unit-2; + top: $unit-2; transform: translateX(-50%); } &[data-content]::after { left: 50%; - padding: @unit-1 0; + padding: $unit-1 0; position: absolute; top: 50%; transform: translate(-50%, -50%); diff --git a/src/utilities/loading.less b/src/utilities/_loading.scss index 767ec9e..c0cdb1e 100644 --- a/src/utilities/loading.less +++ b/src/utilities/_loading.scss @@ -1,34 +1,34 @@ // Loading .loading { color: transparent !important; - min-height: @unit-4; + min-height: $unit-4; pointer-events: none; position: relative; &::after { animation: loading 500ms infinite linear; - border: @border-width-lg solid @primary-color; + border: $border-width-lg solid $primary-color; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; - height: @unit-4; + height: $unit-4; left: 50%; - margin-left: -@unit-2; - margin-top: -@unit-2; + margin-left: -$unit-2; + margin-top: -$unit-2; position: absolute; top: 50%; - width: @unit-4; - z-index: @zindex-0; + width: $unit-4; + z-index: $zindex-0; } &.loading-lg { - min-height: @unit-10; + min-height: $unit-10; &::after { - height: @unit-8; - width: @unit-8; - margin-left: -@unit-4; - margin-top: -@unit-4; + height: $unit-8; + width: $unit-8; + margin-left: -$unit-4; + margin-top: -$unit-4; } } }
\ No newline at end of file diff --git a/src/utilities/position.less b/src/utilities/_position.scss index 235d6a6..548368f 100644 --- a/src/utilities/position.less +++ b/src/utilities/_position.scss @@ -1,6 +1,6 @@ // Position .clearfix { - .clearfix(); + @include clearfix(); } .float-left { float: left !important; @@ -26,10 +26,10 @@ } // Spacing -.margin-variant(0, 0); -.margin-variant(1, @unit-1); -.margin-variant(2, @unit-2); +@include margin-variant(0, 0); +@include margin-variant(1, $unit-1); +@include margin-variant(2, $unit-2); -.padding-variant(0, 0); -.padding-variant(1, @unit-1); -.padding-variant(2, @unit-2);
\ No newline at end of file +@include padding-variant(0, 0); +@include padding-variant(1, $unit-1); +@include padding-variant(2, $unit-2);
\ No newline at end of file diff --git a/src/utilities/shapes.less b/src/utilities/_shapes.scss index e9f63bc..ab6585b 100644 --- a/src/utilities/shapes.less +++ b/src/utilities/_shapes.scss @@ -1,6 +1,6 @@ // Shapes .rounded { - border-radius: @border-radius; + border-radius: $border-radius; } .circle { border-radius: 50%; diff --git a/src/utilities/text.less b/src/utilities/_text.scss index f571613..a1e0980 100644 --- a/src/utilities/text.less +++ b/src/utilities/_text.scss @@ -36,9 +36,7 @@ } .text-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + @include text-ellipsis(); } .text-clip { overflow: hidden; diff --git a/src/utilities/colors.less b/src/utilities/colors.less deleted file mode 100644 index 9571241..0000000 --- a/src/utilities/colors.less +++ /dev/null @@ -1,45 +0,0 @@ -// Text colors -.text-primary { - .text-color-variant(@primary-color); -} -.text-secondary { - .text-color-variant(@secondary-color-dark); -} -.text-gray { - .text-color-variant(@gray-color); -} -.text-light { - .text-color-variant(@light-color); -} -.text-success { - .text-color-variant(@success-color); -} -.text-warning { - .text-color-variant(@warning-color); -} -.text-error { - .text-color-variant(@error-color); -} - -// Background colors -.bg-primary { - .bg-color-variant(@primary-color); -} -.bg-secondary { - .bg-color-variant(@secondary-color); -} -.bg-dark { - .bg-color-variant(@dark-color); -} -.bg-gray { - .bg-color-variant(@bg-color); -} -.bg-success { - .bg-color-variant(@success-color); -} -.bg-warning { - .bg-color-variant(@warning-color); -} -.bg-error { - .bg-color-variant(@error-color); -} diff --git a/src/variables.less b/src/variables.less deleted file mode 100644 index d146459..0000000 --- a/src/variables.less +++ /dev/null @@ -1,104 +0,0 @@ -// Core variables - -// Global -@html-font-size: 20px; -@html-line-height: 1.428571429; -@body-bg: @bg-color-light; -@body-font-color: lighten(@dark-color, 5%); -@font-size: .7rem; -@font-size-sm: .6rem; -@font-size-lg: .8rem; -@line-height: 1rem; - -// Fonts -// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ -@base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto; -@mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; -@fallback-font-family: "Helvetica Neue", sans-serif; -@cjk-zh-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", @fallback-font-family; -@cjk-jp-font-family: @base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, @fallback-font-family; -@cjk-ko-font-family: @base-font-family, "Malgun Gothic", @fallback-font-family; -@body-font-family: @base-font-family, @fallback-font-family; - -// Unit sizes -@unit-o: .05rem; -@unit-h: .1rem; -@unit-1: .2rem; -@unit-2: .4rem; -@unit-3: .6rem; -@unit-4: .8rem; -@unit-5: 1rem; -@unit-6: 1.2rem; -@unit-7: 1.4rem; -@unit-8: 1.6rem; -@unit-9: 1.8rem; -@unit-10: 2rem; -@unit-12: 2.4rem; -@unit-16: 3.2rem; - -// Sizes -@layout-spacing: @unit-2; -@layout-spacing-sm: @unit-1; -@layout-spacing-lg: @unit-4; -@control-size: @unit-8; -@control-size-sm: @unit-6; -@control-size-lg: @unit-10; -@control-padding-h: @unit-2; -@control-padding-v: (@control-size - @line-height) / 2 - @border-width; -@control-padding-v-sm: (@control-size-sm - @line-height) / 2 - @border-width; -@control-padding-v-lg: (@control-size-lg - @line-height) / 2 - @border-width; -@control-icon-size: .7rem; -@control-min-width: 180px; -@control-max-width: 320px; -@border-radius: @unit-h; -@border-width: @unit-o; -@border-width-lg: @unit-h; - -// Colors -// Core colors -@primary-color: #5764c6; -@primary-color-dark: darken(@primary-color, 3%); -@primary-color-light: lighten(@primary-color, 3%); -@secondary-color: lighten(@primary-color, 40%); -@secondary-color-dark: darken(@secondary-color, 3%); -@secondary-color-light: lighten(@secondary-color, 3%); - -@link-color: @primary-color; -@link-color-dark: darken(@link-color, 5%); - -// Gray colors -@dark-color: #454d5d; -@light-color: #fff; -@gray-color: lighten(@dark-color, 40%); -@gray-color-dark: darken(@gray-color, 20%); -@gray-color-light: lighten(@gray-color, 20%); - -@border-color: lighten(@dark-color, 60%); -@border-color-dark: darken(@border-color, 10%); -@bg-color: lighten(@dark-color, 66%); -@bg-color-dark: darken(@bg-color, 3%); -@bg-color-light: @light-color; - -// Control colors -@success-color: #32b643; -@warning-color: #ffb700; -@error-color: #e85600; - -// Other colors -@code-color: #e06870; -@highlight-color: #ffe9b3; - -// Responsive breakpoints -@size-xs: 480px; -@size-sm: 600px; -@size-md: 840px; -@size-lg: 960px; -@size-xl: 1280px; -@size-2x: 1440px; - -// Z-index -@zindex-0: 1; -@zindex-1: 100; -@zindex-2: 200; -@zindex-3: 300; -@zindex-4: 400; |