diff options
Merge pull request #299 from picturepan2/0.4.3 v0.4.3
0.4.3
15 files changed, 456 insertions, 367 deletions
| -rw-r--r-- | docs/components.html | 264 | ||||
| -rw-r--r-- | docs/css/docs.css | 45 | ||||
| -rw-r--r-- | docs/dist/spectre-exp.css | 86 | ||||
| -rw-r--r-- | docs/dist/spectre-exp.min.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre-icons.css | 28 | ||||
| -rw-r--r-- | docs/dist/spectre-icons.min.css | 2 | ||||
| -rw-r--r-- | docs/dist/spectre.css | 164 | ||||
| -rw-r--r-- | docs/dist/spectre.min.css | 2 | ||||
| -rw-r--r-- | docs/elements.html | 30 | ||||
| -rw-r--r-- | docs/experimentals.html | 96 | ||||
| -rw-r--r-- | docs/getting-started.html | 52 | ||||
| -rw-r--r-- | docs/img/spectre-logo.svg | 6 | ||||
| -rw-r--r-- | docs/layout.html | 6 | ||||
| -rw-r--r-- | docs/src/docs.scss | 35 | ||||
| -rw-r--r-- | docs/utilities.html | 5 |
diff --git a/docs/components.html b/docs/components.html index 08e98ac..b29e04f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -37,7 +37,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -254,9 +254,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> @@ -461,18 +458,18 @@ <span class="chip"> Bruce Banner </span> - <span class="chip"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar"> Thor Odinson - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar"> Steve Rogers - </span> - <span class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure> + </div> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> Tony Stark - </span> + </div> <span class="chip active"> Natasha Romanoff </span> @@ -516,7 +513,7 @@ <a href="#autocomplete"> <div class="tile tile-centered"> <div class="tile-icon"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> </div> <div class="tile-content"> Tony <mark>S</mark>tark @@ -540,11 +537,11 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input form-input"</span>> <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span>> Thor Odinson <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> - <<span class="tag">/label</span>> + <<span class="tag">/div</span>> <span class="com"><!-- autocomplete real input box --></span> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span>> @@ -642,10 +639,10 @@ <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/figure</span>> +<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5755d9;"</span>><<span class="tag">/figure</span>> <span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>> +<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5755d9;"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> </code></pre> @@ -781,8 +778,8 @@ <div class="column col-8 col-xs-12"> <div class="bar"> <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#818bd5;">15%</div> - <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#abb1e2;">10%</div> + <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div> + <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div> <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div> </div> </div> @@ -1072,11 +1069,9 @@ <div class="column col-12"> <span class="chip"> Crime - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <span class="chip"> Drama - <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a> </span> <span class="chip"> Biography @@ -1088,18 +1083,18 @@ </span> </div> <div class="column col-12"> - <span class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure> + <div class="chip"> + <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure> Tony Stark - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"> Thor Odinson - </span> - <span class="chip"> + </div> + <div class="chip"> <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers"> Steve Rogers - </span> + </div> </div> </div> <div class="docs-note"> @@ -1107,16 +1102,18 @@ </div> <!-- chips --> -<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - Crime +<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>>Crime<<span class="tag">/span</span>> + +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + Biography <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/span</span>> -<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span>> Yan Zhu <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> -<<span class="tag">/span</span>></code> +<<span class="tag">/div</span>></code> </pre> </div> @@ -1130,7 +1127,7 @@ <div class="column col-12"> <div class="empty"> <div class="empty-icon"> - <i class="icon icon-message"></i> + <i class="icon icon-3x icon-mail"></i> </div> <p class="empty-title h5">You have no new messages</p> <p class="empty-subtitle">Click the button to start a conversation</p> @@ -1142,7 +1139,7 @@ <div class="column col-12"> <div class="empty"> <div class="empty-icon"> - <i class="icon icon-mail"></i> + <i class="icon icon-3x icon-mail"></i> </div> <p class="empty-title h5">You've successfully signed up</p> <p class="empty-subtitle">Click the button to invite your friends</p> @@ -1157,7 +1154,7 @@ <div class="column col-12"> <div class="empty"> <div class="empty-icon"> - <i class="icon icon-people"></i> + <i class="icon icon-3x icon-people"></i> </div> <p class="empty-title h5">You are not following anyone</p> <p class="empty-subtitle">Start to meet new friends</p> @@ -1470,26 +1467,6 @@ </div> <div class="modal-body"> <div class="content"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button> - <button class="btn btn-link">Close</button> - </div> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="modal-temp modal-sm"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> <form> <div class="form-group"> <label class="form-label" for="input-example-7">Name</label> @@ -1518,7 +1495,42 @@ </div> </div> <div class="docs-note"> - <p>Add the <code>modal-sm</code> class for a smaller modal dialog. </p> + <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p> + </div> + <div class="columns"> + <div class="column"> + <a href="#example-modal-2" class="btn btn-primary">Open large size Modal</a> + <div class="modal modal-lg" id="example-modal-2"> + <div class="modal-overlay"></div> + <div class="modal-container" role="document"> + <div class="modal-header"> + <a href="#modals" class="btn btn-clear float-right" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button> + <a href="#modals-sizes" class="btn btn-link">Close</a> + </div> + </div> + </div> + </div> + </div> + <div class="docs-note"> + <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p> </div> <!-- modals --> @@ -1532,6 +1544,77 @@ </div> + <div id="navs" class="container"> + <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Elements</a> + </li> + <li class="nav-item active"> + <a href="#nav">Layout</a> + <ul class="nav"> + <li class="nav-item"> + <a href="#nav">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#nav">Responsive</a> + </li> + <li class="nav-item"> + <a href="#nav">Navbar</a> + </li> + <li class="nav-item"> + <a href="#nav">Empty states</a> + </li> + </ul> + </li> + <li class="nav-item"> + <a href="#nav">Components</a> + </li> + <li class="nav-item"> + <a href="#nav">Utilities</a> + </li> + </ul> + </div> + </div> + <div class="docs-note"> + <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> + </div> + +<!-- navs --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Layout<<span class="tag">/a</span>> + <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Flexbox grid<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Responsive<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Navbar<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Empty states<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">/ul</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Components<<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + </div> + <div id="pagination" class="container"> <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3> <div class="columns"> @@ -1824,77 +1907,6 @@ </div> - <div id="navs" class="container"> - <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Elements</a> - </li> - <li class="nav-item active"> - <a href="#nav">Layout</a> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Flexbox grid</a> - </li> - <li class="nav-item"> - <a href="#nav">Responsive</a> - </li> - <li class="nav-item"> - <a href="#nav">Navbar</a> - </li> - <li class="nav-item"> - <a href="#nav">Empty states</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="#nav">Components</a> - </li> - <li class="nav-item"> - <a href="#nav">Utilities</a> - </li> - </ul> - </div> - </div> - <div class="docs-note"> - <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> - </div> - -<!-- navs --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Layout<<span class="tag">/a</span>> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Flexbox grid<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Responsive<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Navbar<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Empty states<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Components<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Utilities<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - </div> - <div id="popovers" class="container"> <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3> <div class="docs-note"> diff --git a/docs/css/docs.css b/docs/css/docs.css index 171b6a9..a78cf47 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.4.2"; + content: "0.4.3"; } /* Spectre New Docs */ @@ -65,7 +65,7 @@ } .s-content .anchor { - color: #626fca; + color: #6362dc; height: 0; margin-left: -2em; overflow: hidden; @@ -191,18 +191,6 @@ 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; } @@ -212,7 +200,7 @@ } .s-content .code .tag { - color: #5764c6; + color: #5755d9; } .s-content .code .atn { @@ -231,8 +219,16 @@ user-select: none; } -.s-content .empty .icon { - font-size: 2rem; +.s-content .panel { + height: 75vh; +} + +.s-content .panel .tile { + margin: .75rem 0; +} + +.s-content .parallax { + margin: 2rem auto; } .s-content .form-autocomplete .menu { @@ -242,7 +238,7 @@ .s-content .example-tile-icon { align-content: space-around; align-items: center; - background: #5764c6; + background: #5755d9; border-radius: .1rem; color: #fff; display: flex; @@ -274,7 +270,7 @@ } .s-brand { - color: #5764c6; + color: #5755d9; left: 0; padding: 0 1.5rem; position: fixed; @@ -321,6 +317,11 @@ color: #727e96; } +.btn .feather { + height: 1rem; + vertical-align: middle; +} + /* Spectre Homepage style */ .section-hero { padding: 1rem .5rem; @@ -332,7 +333,7 @@ } .section-hero .s-brand h2 { - color: #5764c6; + color: #5755d9; } .section-hero .column { @@ -402,7 +403,7 @@ } .grid-hero .card .card-title { - color: #5764c6; + color: #5755d9; font-size: .9rem; margin-bottom: 0; } @@ -466,7 +467,7 @@ .s-navbar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); - background: rgba(248, 249, 250, .65); + background: rgba(255, 255, 255, .65); right: 0; top: 0; z-index: 200; diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css index dca3b47..6bc13e5 100644 --- a/docs/dist/spectre-exp.css +++ b/docs/dist/spectre-exp.css @@ -76,26 +76,26 @@ } .calendar .calendar-date .date-item.date-today { - border-color: #e4e6f6; - color: #5764c6; + border-color: #e5e5f9; + color: #5755d9; } .calendar .calendar-date .date-item:focus { - box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } .calendar .calendar-date .date-item:focus, .calendar .calendar-date .date-item:hover { - background: #fbfbfe; - border-color: #e4e6f6; - color: #5764c6; + background: #fefeff; + border-color: #e5e5f9; + color: #5755d9; text-decoration: none; } .calendar .calendar-date .date-item:active, .calendar .calendar-date .date-item.active { - background: #4c59c2; - border-color: #3e4cb6; + background: #4b48d6; + border-color: #3634d2; color: #fff; } @@ -120,7 +120,7 @@ } .calendar .calendar-range::before { - background: #eff1fa; + background: #f1f1fc; content: ""; height: 1.4rem; left: 0; @@ -139,7 +139,7 @@ } .calendar .calendar-range .date-item { - color: #5764c6; + color: #5755d9; } .calendar.calendar-lg .calendar-body { @@ -195,9 +195,9 @@ } .calendar.calendar-lg .calendar-event { - background: #eff1fa; + background: #f1f1fc; border-radius: .1rem; - color: #5764c6; + color: #5755d9; display: block; font-size: .6rem; margin: .1rem auto; @@ -452,6 +452,30 @@ } } +.filter .filter-tag#tag-0:checked ~ .filter-nav .chip[for="tag-0"], +.filter .filter-tag#tag-1:checked ~ .filter-nav .chip[for="tag-1"], +.filter .filter-tag#tag-2:checked ~ .filter-nav .chip[for="tag-2"], +.filter .filter-tag#tag-3:checked ~ .filter-nav .chip[for="tag-3"], +.filter .filter-tag#tag-4:checked ~ .filter-nav .chip[for="tag-4"], +.filter .filter-tag#tag-5:checked ~ .filter-nav .chip[for="tag-5"], +.filter .filter-tag#tag-6:checked ~ .filter-nav .chip[for="tag-6"], +.filter .filter-tag#tag-7:checked ~ .filter-nav .chip[for="tag-7"], +.filter .filter-tag#tag-8:checked ~ .filter-nav .chip[for="tag-8"] { + background: #5755d9; + color: #fff; +} + +.filter .filter-tag#tag-1:checked ~ .filter-body .filter-item:not([data-tag~="tag-1"]), +.filter .filter-tag#tag-2:checked ~ .filter-body .filter-item:not([data-tag~="tag-2"]), +.filter .filter-tag#tag-3:checked ~ .filter-body .filter-item:not([data-tag~="tag-3"]), +.filter .filter-tag#tag-4:checked ~ .filter-body .filter-item:not([data-tag~="tag-4"]), +.filter .filter-tag#tag-5:checked ~ .filter-body .filter-item:not([data-tag~="tag-5"]), +.filter .filter-tag#tag-6:checked ~ .filter-body .filter-item:not([data-tag~="tag-6"]), +.filter .filter-tag#tag-7:checked ~ .filter-body .filter-item:not([data-tag~="tag-7"]), +.filter .filter-tag#tag-8:checked ~ .filter-body .filter-item:not([data-tag~="tag-8"]) { + display: none; +} + .filter .filter-nav { margin: .4rem 0; } @@ -463,22 +487,6 @@ 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"], -.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; @@ -752,7 +760,7 @@ background: #f0f1f4; border: 0; border-radius: .1rem; - color: #5764c6; + color: #5755d9; height: .2rem; position: relative; width: 100%; @@ -764,18 +772,18 @@ } .progress::-webkit-progress-value { - background: #5764c6; + background: #5755d9; border-radius: .1rem; } .progress::-moz-progress-bar { - background: #5764c6; + background: #5755d9; 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, #5755d9 30%, #f0f1f4 30%) top left/150% 150% no-repeat; } .progress:indeterminate::-moz-progress-bar { @@ -802,13 +810,13 @@ } .slider:focus { - box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; - background: #5764c6; + background: #5755d9; border: 0; border-radius: 50%; height: .6rem; @@ -818,7 +826,7 @@ } .slider::-moz-range-thumb { - background: #5764c6; + background: #5755d9; border: 0; border-radius: 50%; height: .6rem; @@ -827,7 +835,7 @@ } .slider::-ms-thumb { - background: #5764c6; + background: #5755d9; border: 0; border-radius: 50%; height: .6rem; @@ -887,7 +895,7 @@ } .slider::-ms-fill-lower { - background: #5764c6; + background: #5755d9; } .timeline .timeline-item { @@ -928,7 +936,7 @@ } .timeline .timeline-item .timeline-icon::before { - border: .1rem solid #5764c6; + border: .1rem solid #5755d9; border-radius: 50%; content: ""; display: block; @@ -940,7 +948,7 @@ } .timeline .timeline-item .timeline-icon.icon-lg { - background: #5764c6; + background: #5755d9; font-size: .8rem; line-height: 1rem; } diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css index 85091d1..2e15384 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;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:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);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: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%;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: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}.off-canvas{display:flex;display:-ms-flexbox;height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%}.off-canvas .off-canvas-sidebar{background:#f8f9fa;height:100%;left:0;padding:.8rem;position:absolute;top:0;transform:translateX(-100%);transition:transform .25s ease;width:10rem;z-index:300}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:.8rem .8rem .8rem 4rem}.off-canvas .off-canvas-checkbox:checked~.off-canvas-sidebar{transform:translateX(0)}.off-canvas .off-canvas-checkbox:checked~.off-canvas-toggle{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;height:100%;left:0;right:0;top:0;width:100%}.off-canvas .off-canvas-checkbox:checked~.off-canvas-toggle .icon{display:none}.off-canvas .off-canvas-toggle{display:block;left:.8rem;padding-left:0;padding-right:0;position:absolute;top:.8rem;transition:none;width:2rem;z-index:200}@media (min-width:960px){.off-canvas .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:static;transform:translateX(0)}.off-canvas .off-canvas-content{padding-left:.8rem}.off-canvas .off-canvas-toggle{display:none}}.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,.75);top:0;transform:translateZ(50px) scale(.95);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:100}.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,.35) 0,transparent 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:100}.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,.35) 0,transparent 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:100}.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,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:100}.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,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.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 +/*! 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:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;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:#f1f1fc;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:#5755d9}.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:#f1f1fc;border-radius:.1rem;color:#5755d9;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:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);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: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%;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: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-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.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}.off-canvas{display:flex;display:-ms-flexbox;height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%}.off-canvas .off-canvas-sidebar{background:#f8f9fa;height:100%;left:0;padding:.8rem;position:absolute;top:0;transform:translateX(-100%);transition:transform .25s ease;width:10rem;z-index:300}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:.8rem .8rem .8rem 4rem}.off-canvas .off-canvas-checkbox:checked~.off-canvas-sidebar{transform:translateX(0)}.off-canvas .off-canvas-checkbox:checked~.off-canvas-toggle{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;height:100%;left:0;right:0;top:0;width:100%}.off-canvas .off-canvas-checkbox:checked~.off-canvas-toggle .icon{display:none}.off-canvas .off-canvas-toggle{display:block;left:.8rem;padding-left:0;padding-right:0;position:absolute;top:.8rem;transition:none;width:2rem;z-index:200}@media (min-width:960px){.off-canvas .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:static;transform:translateX(0)}.off-canvas .off-canvas-content{padding-left:.8rem}.off-canvas .off-canvas-toggle{display:none}}.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,.75);top:0;transform:translateZ(50px) scale(.95);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:100}.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,.35) 0,transparent 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:100}.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,.35) 0,transparent 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:100}.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,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:100}.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,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 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,85,217,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;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:#5755d9}.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 #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;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 252fff2..eecae06 100644 --- a/docs/dist/spectre-icons.css +++ b/docs/dist/spectre-icons.css @@ -20,6 +20,25 @@ transform: translate(-50%, -50%); } +.icon.icon-2x { + font-size: 1.6rem; +} + +.icon.icon-3x { + font-size: 2.4rem; +} + +.icon.icon-4x { + font-size: 3.2rem; +} + +.accordion .icon, +.btn .icon, +.toast .icon, +.menu .icon { + vertical-align: -10%; +} + .icon-arrow-down::before, .icon-arrow-left::before, .icon-arrow-right::before, @@ -106,7 +125,7 @@ border-top: .3em solid currentColor; content: ""; height: 0; - transform: translate(-50%, -25%); + transform: translate(-50%, -25%); width: 0; } @@ -593,11 +612,4 @@ height: .5em; transform: translate(-50%, -40%) rotate(-135deg); width: .5em; -} - -.accordion .icon, -.btn .icon, -.toast .icon, -.menu .icon { - vertical-align: -10%; }
\ No newline at end of file diff --git a/docs/dist/spectre-icons.min.css b/docs/dist/spectre-icons.min.css index aeffa58..4e45b2d 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%;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 +/*! 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.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.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}
\ No newline at end of file diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css index 0f6ee1b..68df989 100644 --- a/docs/dist/spectre.css +++ b/docs/dist/spectre.css @@ -295,20 +295,20 @@ body { } a { - color: #5764c6; + color: #5755d9; outline: none; text-decoration: none; } a:focus { - box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } a:focus, a:hover, a:active, a.active { - color: #4452c0; + color: #4240d4; text-decoration: underline; } @@ -534,9 +534,9 @@ dl dd { -moz-appearance: none; appearance: none; background: #fff; - border: .05rem solid #5764c6; + border: .05rem solid #5755d9; border-radius: .1rem; - color: #5764c6; + color: #5755d9; cursor: pointer; display: inline-block; font-size: .7rem; @@ -556,20 +556,20 @@ dl dd { } .btn:focus { - box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } .btn:focus, .btn:hover { - background: #eff1fa; - border-color: #4c59c2; + background: #f1f1fc; + border-color: #4b48d6; text-decoration: none; } .btn:active, .btn.active { - background: #4c59c2; - border-color: #3e4cb6; + background: #4b48d6; + border-color: #3634d2; color: #fff; text-decoration: none; } @@ -589,22 +589,22 @@ dl dd { } .btn.btn-primary { - background: #5764c6; - border-color: #4c59c2; + background: #5755d9; + border-color: #4b48d6; color: #fff; } .btn.btn-primary:focus, .btn.btn-primary:hover { - background: #4452c0; - border-color: #3e4cb6; + background: #4240d4; + border-color: #3634d2; color: #fff; } .btn.btn-primary:active, .btn.btn-primary.active { - background: #3f4eba; - border-color: #3b49af; + background: #3a38d2; + border-color: #302ecd; color: #fff; } @@ -616,14 +616,14 @@ dl dd { .btn.btn-link { background: transparent; border-color: transparent; - color: #5764c6; + color: #5755d9; } .btn.btn-link:focus, .btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link.active { - color: #4452c0; + color: #4240d4; } .btn.btn-sm { @@ -635,7 +635,7 @@ dl dd { .btn.btn-lg { font-size: .8rem; height: 2rem; - padding: .45rem .5rem; + padding: .45rem .6rem; } .btn.btn-block { @@ -773,8 +773,8 @@ legend { } .form-input:focus { - border-color: #5764c6; - box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); + border-color: #5755d9; + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } .form-input::-webkit-input-placeholder { @@ -792,13 +792,13 @@ legend { .form-input.input-sm { font-size: .6rem; height: 1.2rem; - padding: .05rem .4rem; + padding: .05rem .3rem; } .form-input.input-lg { font-size: .8rem; height: 2rem; - padding: .45rem .4rem; + padding: .45rem .6rem; } .form-input.input-inline { @@ -858,13 +858,13 @@ textarea.form-input { } .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%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem; padding-right: 1.1rem; } .form-select:focus { - border-color: #5764c6; - box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); + border-color: #5755d9; + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } .form-select::-ms-expand { @@ -874,13 +874,13 @@ textarea.form-input { .form-select.select-sm { font-size: .6rem; height: 1.2rem; - padding: .05rem 1.1rem .05rem .4rem; + padding: .05rem 1rem .05rem .3rem; } .form-select.select-lg { font-size: .8rem; height: 2rem; - padding: .45rem 1.1rem .45rem .4rem; + padding: .45rem 1.3rem .45rem .6rem; } .has-icon-left, @@ -937,15 +937,15 @@ textarea.form-input { .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); + border-color: #5755d9; + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } .form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon { - background: #5764c6; - border-color: #5764c6; + background: #5755d9; + border-color: #5755d9; } .form-checkbox .form-icon, @@ -993,8 +993,8 @@ textarea.form-input { } .form-checkbox input:indeterminate + .form-icon { - background: #5764c6; - border-color: #5764c6; + background: #5755d9; + border-color: #5755d9; } .form-checkbox input:indeterminate + .form-icon::before { @@ -1076,12 +1076,12 @@ textarea.form-input { .input-group .input-group-addon.addon-sm { font-size: .6rem; - padding: .05rem .4rem; + padding: .05rem .3rem; } .input-group .input-group-addon.addon-lg { font-size: .8rem; - padding: .45rem .4rem; + padding: .45rem .6rem; } .input-group .form-input, @@ -1245,7 +1245,7 @@ input.disabled + .form-icon { } .label { - background: #f8f9fa; + background: #f0f1f4; border-radius: .1rem; color: #5b657a; display: inline-block; @@ -1260,13 +1260,13 @@ input.disabled + .form-icon { } .label.label-primary { - background: #5764c6; + background: #5755d9; color: #fff; } .label.label-secondary { - background: #eff1fa; - color: #5764c6; + background: #f1f1fc; + color: #5755d9; } .label.label-success { @@ -1926,8 +1926,8 @@ summary.accordion-header::-webkit-details-marker { } .form-autocomplete .form-autocomplete-input.is-focused { - border-color: #5764c6; - box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2); + border-color: #5755d9; + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } .form-autocomplete .form-autocomplete-input .form-input { @@ -1950,14 +1950,14 @@ summary.accordion-header::-webkit-details-marker { } .avatar { - background: #5764c6; + background: #5755d9; border-radius: 50%; color: rgba(255, 255, 255, .85); display: inline-block; font-size: .8rem; font-weight: 300; height: 1.6rem; - line-height: 1; + line-height: 1.25; margin: 0; position: relative; vertical-align: middle; @@ -2046,7 +2046,7 @@ summary.accordion-header::-webkit-details-marker { .badge[data-badge]::after, .badge:not([data-badge])::after { - background: #5764c6; + background: #5755d9; background-clip: padding-box; border-radius: .5rem; box-shadow: 0 0 0 .1rem #fff; @@ -2140,7 +2140,7 @@ summary.accordion-header::-webkit-details-marker { } .bar .bar-item { - background: #5764c6; + background: #5755d9; color: #fff; display: block; -ms-flex-negative: 0; @@ -2183,7 +2183,7 @@ summary.accordion-header::-webkit-details-marker { } .bar-slider .bar-slider-btn { - background: #5764c6; + background: #5755d9; border: 0; border-radius: 50%; height: .6rem; @@ -2196,7 +2196,7 @@ summary.accordion-header::-webkit-details-marker { } .bar-slider .bar-slider-btn:active { - box-shadow: 0 0 0 .1rem #5764c6; + box-shadow: 0 0 0 .1rem #5755d9; } .card { @@ -2257,7 +2257,7 @@ summary.accordion-header::-webkit-details-marker { } .chip.active { - background: #5764c6; + background: #5755d9; color: #fff; } @@ -2301,7 +2301,7 @@ summary.accordion-header::-webkit-details-marker { background: #f8f9fa; border-radius: .1rem; color: #727e96; - padding: 1.6rem; + padding: 3.2rem 1.6rem; text-align: center; } @@ -2356,14 +2356,14 @@ summary.accordion-header::-webkit-details-marker { .menu .menu-item > a:focus, .menu .menu-item > a:hover { - background: #eff1fa; - color: #5764c6; + background: #f1f1fc; + color: #5755d9; } .menu .menu-item > a:active, .menu .menu-item > a.active { - background: #eff1fa; - color: #5764c6; + background: #f1f1fc; + color: #5755d9; } .menu .menu-item + .menu-item { @@ -2419,6 +2419,7 @@ summary.accordion-header::-webkit-details-marker { .modal.active .modal-container { animation: slide-down .2s ease 1; max-width: 640px; + width: 100%; z-index: 1; } @@ -2426,6 +2427,15 @@ summary.accordion-header::-webkit-details-marker { max-width: 320px; } +.modal.modal-lg .modal-overlay { + background: #fff; +} + +.modal.modal-lg .modal-container { + box-shadow: none; + max-width: 960px; +} + .modal-container { background: #fff; border-radius: .1rem; @@ -2436,7 +2446,7 @@ summary.accordion-header::-webkit-details-marker { } .modal-container .modal-header { - padding: .8rem; + padding: .8rem 1.2rem; } .modal-container .modal-header .modal-title { @@ -2446,12 +2456,12 @@ summary.accordion-header::-webkit-details-marker { .modal-container .modal-body { max-height: 50vh; overflow-y: auto; - padding: .8rem; + padding: .8rem 1.2rem; position: relative; } .modal-container .modal-footer { - padding: .8rem; + padding: .8rem 1.2rem; text-align: right; } @@ -2472,7 +2482,7 @@ summary.accordion-header::-webkit-details-marker { .nav .nav-item a:focus, .nav .nav-item a:hover { - color: #5764c6; + color: #5755d9; } .nav .nav-item.active > a { @@ -2482,7 +2492,7 @@ summary.accordion-header::-webkit-details-marker { .nav .nav-item.active > a:focus, .nav .nav-item.active > a:hover { - color: #5764c6; + color: #5755d9; } .nav .nav { @@ -2517,7 +2527,7 @@ summary.accordion-header::-webkit-details-marker { .pagination .page-item a:focus, .pagination .page-item a:hover { - color: #5764c6; + color: #5755d9; } .pagination .page-item.disabled a { @@ -2527,7 +2537,7 @@ summary.accordion-header::-webkit-details-marker { } .pagination .page-item.active a { - background: #5764c6; + background: #5755d9; color: #fff; } @@ -2662,7 +2672,7 @@ summary.accordion-header::-webkit-details-marker { } .step .step-item:not(:first-child)::before { - background: #5764c6; + background: #5755d9; content: ""; height: 2px; left: -50%; @@ -2679,7 +2689,7 @@ summary.accordion-header::-webkit-details-marker { } .step .step-item a::before { - background: #5764c6; + background: #5755d9; border: .1rem solid #fff; border-radius: 50%; content: ""; @@ -2695,7 +2705,7 @@ summary.accordion-header::-webkit-details-marker { .step .step-item.active a::before { background: #fff; - border: .1rem solid #5764c6; + border: .1rem solid #5755d9; } .step .step-item.active ~ .step-item::before { @@ -2739,13 +2749,13 @@ summary.accordion-header::-webkit-details-marker { .tab .tab-item a:focus, .tab .tab-item a:hover { - color: #5764c6; + color: #5755d9; } .tab .tab-item.active a, .tab .tab-item a.active { - border-bottom-color: #5764c6; - color: #5764c6; + border-bottom-color: #5755d9; + color: #5755d9; } .tab.tab-block .tab-item { @@ -2831,8 +2841,8 @@ summary.accordion-header::-webkit-details-marker { } .toast.toast-primary { - background: rgba(87, 100, 198, .9); - border-color: #5764c6; + background: rgba(87, 85, 217, .9); + border-color: #5755d9; } .toast.toast-success { @@ -2888,7 +2898,7 @@ summary.accordion-header::-webkit-details-marker { text-overflow: ellipsis; transform: translate(-50%, .4rem); transition: all .2s ease; - white-space: nowrap; + white-space: pre; z-index: 300; } @@ -2958,21 +2968,21 @@ summary.accordion-header::-webkit-details-marker { } .text-primary { - color: #5764c6; + color: #5755d9; } a.text-primary:focus, a.text-primary:hover { - color: #4452c0; + color: #4240d4; } .text-secondary { - color: #e4e6f6; + color: #e5e5f9; } a.text-secondary:focus, a.text-secondary:hover { - color: #d1d4ef; + color: #d1d0f4; } .text-gray { @@ -3021,11 +3031,11 @@ a.text-error:hover { } .bg-primary { - background: #5764c6; + background: #5755d9; } .bg-secondary { - background: #eff1fa; + background: #f1f1fc; } .bg-dark { @@ -3187,7 +3197,7 @@ a.text-error:hover { .loading::after { animation: loading 500ms infinite linear; - border: .1rem solid #5764c6; + border: .1rem solid #5755d9; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css index f5d5487..4612271 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}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.428571429;-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;font-size:.65rem;line-height:1;padding:.15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}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 .5rem}.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;padding:.15rem}.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}.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.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#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 input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.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 .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}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#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}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0}.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}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.428571429;-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:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#4240d4;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;font-size:.65rem;line-height:1;padding:.15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}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 #5755d9;border-radius:.1rem;color:#5755d9;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,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#4240d4}.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:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.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 .3rem}.form-input.input-lg{font-size:.8rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#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%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.1rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.6rem;height:1.2rem;padding:.05rem 1rem .05rem .3rem}.form-select.select-lg{font-size:.8rem;height:2rem;padding:.45rem 1.3rem .45rem .6rem}.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:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #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:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:.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 .3rem}.input-group .input-group-addon.addon-lg{font-size:.8rem;padding:.45rem .6rem}.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:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1;padding:.15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fdf4f4;border-radius:.1rem;color:#e06870;font-size:.65rem;line-height:1;padding:.15rem}.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.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#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 input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.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:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.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 .menu{left:0;position:absolute;top:100%;width:100%}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#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:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.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:#5755d9;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:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #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:#5755d9;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:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(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:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.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;width:100%;z-index:1}.modal.modal-sm .modal-container{max-width:320px}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:block;padding:0;text-align:left}.modal-container .modal-header{padding:.8rem 1.2rem}.modal-container .modal-header .modal-title{margin:0}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:.8rem 1.2rem;position:relative}.modal-container .modal-footer{padding:.8rem 1.2rem;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:#5755d9}.nav .nav-item.active>a{color:#5b657a;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#727e96;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #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:#5755d9;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:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#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:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.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,85,217,.9);border-color:#5755d9}.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:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}.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:#5755d9}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643}.bg-warning{background:#ffb700}.bg-error{background:#e85600}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#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 #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0}.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 12d2276..baee6c8 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -37,7 +37,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -253,9 +253,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> @@ -1236,7 +1233,7 @@ <label class="form-label" for="input-example-15">Color</label> </div> <div class="col-9"> - <input class="form-input" type="color" id="input-example-15" value="#5764c6"> + <input class="form-input" type="color" id="input-example-15" value="#5755d9"> </div> </div> <div class="form-group"> @@ -1733,6 +1730,29 @@ <pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-menu"</span>><<span class="tag">/i</span>> </code></pre> + <h4 id="icons-sizes" class="s-subtitle">Icon sizes</h4> + <div class="docs-note"> + <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes. You can set <code>font-size</code> to have different icon sizes.</p> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <p><i class="icon icon-2x icon-mail"></i></p> + <p>icon-2x (32px)</p> + </div> + <div class="column col-3 col-md-6"> + <p><i class="icon icon-3x icon-mail"></i></p> + <p>icon-3x (48px)</p> + </div> + <div class="column col-3 col-md-6"> + <p><i class="icon icon-4x icon-mail"></i></p> + <p>icon-4x (64px)</p> + </div> + </div> + +<!-- icons --> +<pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-2x icon-mail"</span>><<span class="tag">/i</span>> +</code></pre> + </div> <div id="labels" class="container"> diff --git a/docs/experimentals.html b/docs/experimentals.html index aeb8e83..f85877e 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -38,7 +38,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -254,9 +254,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> @@ -407,8 +404,8 @@ <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"> <button class="date-item badge">8</button> <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Product launch event</a> - <a class="calendar-event" href="#calendars" style="background:#5764c6;color:#fff;">Lunch</a> + <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Product launch event</a> + <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Lunch</a> <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a> </div> </div> @@ -570,110 +567,110 @@ <div class="columns"> <div class="column col-12"> <div class="filter"> - <input type="radio" id="tag-all" class="filter-tag" name="filter-radio" hidden checked> - <input type="radio" id="tag-action" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-roleplaying" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-shooter" class="filter-tag" name="filter-radio" hidden> - <input type="radio" id="tag-sports" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked> + <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-3" class="filter-tag" name="filter-radio" hidden> + <input type="radio" id="tag-4" class="filter-tag" name="filter-radio" hidden> <div class="filter-nav"> - <label class="chip" for="tag-all">All</label> - <label class="chip" for="tag-action">Action</label> - <label class="chip" for="tag-roleplaying">Roleplaying</label> - <label class="chip" for="tag-shooter">Shooter</label> - <label class="chip" for="tag-sports">Sports</label> + <label class="chip" for="tag-0">All</label> + <label class="chip" for="tag-1">Action</label> + <label class="chip" for="tag-2">Roleplaying</label> + <label class="chip" for="tag-3">Shooter</label> + <label class="chip" for="tag-4">Sports</label> </div> <div class="filter-body columns"> - <div class="column col-4" data-tag="tag-roleplaying"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> <div class="card-header"> <div class="card-title">Fallout 4</div> <div class="card-subtitle">Roleplaying</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Halo 5</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-action"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> <div class="card-header"> <div class="card-title">Quantum Break</div> <div class="card-subtitle">Action</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">Forza Horizon 3</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-roleplaying"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-2"> + <div class="card"> <div class="card-header"> <div class="card-title">Final Fantasy XV</div> <div class="card-subtitle">Roleplaying</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">NBA 2K17</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Battlefield 1</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-action"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-1"> + <div class="card"> <div class="card-header"> <div class="card-title">GTA V</div> <div class="card-subtitle">Action</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-sports"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-4"> + <div class="card"> <div class="card-header"> <div class="card-title">FIFA 17</div> <div class="card-subtitle">Sports</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Overwatch</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Titanfall 2</div> <div class="card-subtitle">Shooter</div> </div> </div> </div> - <div class="column col-4" data-tag="tag-shooter"> - <div class="filter-item card"> + <div class="column col-4 filter-item" data-tag="tag-3"> + <div class="card"> <div class="card-header"> <div class="card-title">Gears of Wars 4</div> <div class="card-subtitle">Shooter</div> @@ -684,24 +681,27 @@ </div> </div> </div> + <div class="docs-note"> + <p>Filters use <code>tag-1</code> to <code>tag-8</code> to flag different tags. <code>tag-0</code> is reserved for clearing filter (or showing all). You can overwrite <code>$filter-number</code> in <code>_filters.scss</code> to have more filters.</p> + </div> <!-- filters --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-all"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-action"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-roleplaying"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-0"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span> <span class="atn">checked</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-1"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"tag-2"</span> <span class="atn">class</span>=<span class="atv">"filter-tag"</span> <span class="atn">name</span>=<span class="atv">"filter-radio"</span> <span class="atn">hidden</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-nav"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-all"</span>>All<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-action"</span>>Action<<span class="tag">/label</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-roleplaying"</span>>Roleplaying<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-0"</span>>All<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-1"</span>>Action<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span> <span class="atn">for</span>=<span class="atv">"tag-2"</span>>Roleplaying<<span class="tag">/label</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-body"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-action"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-1"</span>> <span class="com"><!-- Filter item content --></span> <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-roleplaying"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"filter-item card"</span> <span class="atn">data-tag</span>=<span class="atv">"tag-2"</span>> <span class="com"><!-- Filter item content --></span> <<span class="tag">/div</span>> <span class="com"><!-- Filter items --></span> diff --git a/docs/getting-started.html b/docs/getting-started.html index 070c5b3..cf124b3 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -37,7 +37,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -253,9 +253,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> @@ -351,15 +348,15 @@ </div> - <div id="compiling" class="container"> - <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3> + <div id="custom" class="container"> + <h3 class="s-title"><a href="#custom" class="anchor" aria-hidden="true">#</a>Custom version</h3> <div class="docs-note"> <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">SASS Source Code</a></p> <p>If you are looking for LESS version of Spectre.css, please switch to <code>LESS</code> branch.</p> <p><a href="https://github.com/picturepan2/spectre/tree/less" target="_blank" class="btn">LESS Branch</a></p> </div> - <h4 id="compiling-steps" class="s-subtitle">Compiling CSS</h4> + <h4 id="compiling" class="s-subtitle">Compiling CSS</h4> <div class="docs-note"> <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p> <p>Then, you can build the CSS file from the command line:</p> @@ -376,8 +373,39 @@ <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li> </ul> </div> + <h4 id="importing" class="s-subtitle">Importing SASS</h4> + <div class="docs-note"> + <p>It is recommended to custom Spectre by importing SASS source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.</p> + <ul> + <li>First, create your own project and install Spectre via <a href="#installation">NPM or other package managers</a>.</li> + <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li> + <li>Compile the SASS file to CSS to get the custom version of Spectre.</li> + </ul> + +<!-- importing --> +<pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span> +<span class="com">// Define variables to override default ones</span> +<span class="tag">$primary-color</span>: <span class="atn"></span>#2e5bec</span>; +<span class="tag">$dark-color</span>: <span class="atn"></span>#3e396b</span>; + +<span class="com">// Import full Spectre source code</span> +<span class="tag">@import</span> "node_modules/spectre.css/src/spectre"; +</code></pre> + + <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>. </p> + +<!-- importing --> +<pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span> +<span class="tag">@import</span> "variables"; + +<span class="com">// Import only the needed components</span> +<span class="tag">@import</span> "node_modules/spectre.css/src/buttons"; +<span class="tag">@import</span> "node_modules/spectre.css/src/forms"; +</code></pre> + + </div> - <h4 id="compiling-gulptasks" class="s-subtitle">Folder Structure</h4> + <h4 id="folders" class="s-subtitle">Folder Structure</h4> <!-- folder structure --> <pre class="code"><code>spectre/ @@ -427,14 +455,14 @@ <h5 id="variables-colors" class="s-subtitle">Colors</h5> <div class="columns"> <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#5764c6;color:#fff;"> - <div class="color-title">#5764c6</div> + <div class="docs-color" style="background:#5755d9;color:#fff;"> + <div class="color-title">#5755d9</div> <div class="color-subtitle">Primary</div> </div> </div> <div class="column col-3 col-md-6"> - <div class="docs-color" style="background:#eff1fa;color:#5764c6;"> - <div class="color-title">#eff1fa</div> + <div class="docs-color" style="background:#f1f1fc;color:#5755d9;"> + <div class="color-title">#f1f1fc</div> <div class="color-subtitle">Secondary</div> </div> </div> diff --git a/docs/img/spectre-logo.svg b/docs/img/spectre-logo.svg index b6b53ef..e57cd80 100644 --- a/docs/img/spectre-logo.svg +++ b/docs/img/spectre-logo.svg @@ -8,12 +8,12 @@ </defs> <g fill="none" fill-rule="evenodd"> <g> - <use fill="#5764C6" xlink:href="#a"/> + <use fill="#5755d9" xlink:href="#a"/> <rect stroke-opacity=".1" stroke="#000" stroke-width=".5" x=".25" y=".25" width="31.5" height="31.5" rx="15.75"/> </g> <g> - <use fill="#F0F4F9" xlink:href="#b"/> - <path stroke="#FFF" stroke-width=".5" d="M21.128 20.66h2.276c-.04-.596-.166-1.135-.373-1.62-.257-.604-.652-1.15-1.186-1.64-.54-.496-1.228-.94-2.066-1.335-.847-.398-1.857-.762-3.03-1.09-.868-.24-1.616-.492-2.243-.753-.636-.265-1.16-.556-1.57-.875-.42-.325-.733-.686-.937-1.08-.18-.352-.282-.736-.303-1.15H9.41c.016.72.165 1.36.446 1.92.3.597.73 1.13 1.292 1.597.57.474 1.262.895 2.078 1.262.825.37 1.748.7 2.77.993.994.287 1.815.568 2.466.844.66.28 1.19.58 1.588.907.41.335.697.71.862 1.12.11.274.18.574.216.9zm-5.308 4.003c-.49-.032-.966-.107-1.424-.224-.646-.165-1.218-.422-1.717-.773-.505-.355-.908-.804-1.208-1.346-.27-.485-.42-1.054-.45-1.703H8.756c.022.57.12 1.094.295 1.576.202.555.48 1.054.835 1.5.358.446.778.838 1.26 1.177.487.34 1.015.626 1.585.857.572.23 1.17.405 1.795.52.432.08.864.133 1.295.158v-1.742zm.5-19.08v1.754c.784.006 1.47.11 2.055.313.606.21 1.114.51 1.523.896.41.388.716.848.916 1.378.17.45.266.934.29 1.45h2.267c-.03-.687-.183-1.355-.46-2.006-.312-.728-.767-1.37-1.368-1.926-.6-.557-1.346-1.007-2.235-1.347-.87-.335-1.866-.505-2.987-.51z"/> + <use fill="#f1f1fc" xlink:href="#b"/> + <path stroke="#fff" stroke-width=".5" d="M21.128 20.66h2.276c-.04-.596-.166-1.135-.373-1.62-.257-.604-.652-1.15-1.186-1.64-.54-.496-1.228-.94-2.066-1.335-.847-.398-1.857-.762-3.03-1.09-.868-.24-1.616-.492-2.243-.753-.636-.265-1.16-.556-1.57-.875-.42-.325-.733-.686-.937-1.08-.18-.352-.282-.736-.303-1.15H9.41c.016.72.165 1.36.446 1.92.3.597.73 1.13 1.292 1.597.57.474 1.262.895 2.078 1.262.825.37 1.748.7 2.77.993.994.287 1.815.568 2.466.844.66.28 1.19.58 1.588.907.41.335.697.71.862 1.12.11.274.18.574.216.9zm-5.308 4.003c-.49-.032-.966-.107-1.424-.224-.646-.165-1.218-.422-1.717-.773-.505-.355-.908-.804-1.208-1.346-.27-.485-.42-1.054-.45-1.703H8.756c.022.57.12 1.094.295 1.576.202.555.48 1.054.835 1.5.358.446.778.838 1.26 1.177.487.34 1.015.626 1.585.857.572.23 1.17.405 1.795.52.432.08.864.133 1.295.158v-1.742zm.5-19.08v1.754c.784.006 1.47.11 2.055.313.606.21 1.114.51 1.523.896.41.388.716.848.916 1.378.17.45.266.934.29 1.45h2.267c-.03-.687-.183-1.355-.46-2.006-.312-.728-.767-1.37-1.368-1.926-.6-.557-1.346-1.007-2.235-1.347-.87-.335-1.866-.505-2.987-.51z"/> </g> </g> </svg> diff --git a/docs/layout.html b/docs/layout.html index 39013f3..7b4a801 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -37,7 +37,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -253,9 +253,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> @@ -488,6 +485,7 @@ <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li> <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li> <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li> + <li><code>col-[1-12]</code> apply to all window width, including the width wider than <strong>1280px</strong>. </li> </ul> </div> diff --git a/docs/src/docs.scss b/docs/src/docs.scss index 383d7c6..c8e7f87 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.4.2"; + content: "0.4.3"; } // Core variables and mixins @import '../../src/variables'; @@ -195,18 +195,6 @@ } } - .panel { - height: 75vh; - - .tile { - margin: .75rem 0; - } - } - - .parallax { - margin: 2rem auto; - } - .code { color: lighten($body-font-color, 10%); @@ -231,8 +219,16 @@ } } - .empty .icon { - font-size: 2rem; + .panel { + height: 75vh; + + .tile { + margin: .75rem 0; + } + } + + .parallax { + margin: 2rem auto; } .form-autocomplete .menu { @@ -316,6 +312,13 @@ } } +.btn { + .feather { + height: 1rem; + vertical-align: middle; + } +} + /* Spectre Homepage style */ .section-hero { padding: 1rem .5rem; @@ -466,7 +469,7 @@ .s-navbar { backdrop-filter: blur(10px); - background: rgba($bg-color, .65); + background: rgba($bg-color-light, .65); right: 0; top: 0; z-index: $zindex-2; diff --git a/docs/utilities.html b/docs/utilities.html index b23adda..904921a 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -37,7 +37,7 @@ <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="getting-started.html#compiling">Custom version</a> + <a href="getting-started.html#custom">Custom version</a> </li> <li class="menu-item"> <a href="getting-started.html#browsers">Browser support</a> @@ -253,9 +253,6 @@ <div class="menu-btn"> <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> </div> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - </a> <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> |
