From fb064a959d20e9b40c05d112014ea02cce5caef4 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 1 Mar 2017 09:50:27 +0800 Subject: CHG: Split Codes and improve docs codes --- docs/components.html | 191 +++++++++++++++++++++++-------------------- docs/css/docs.css | 21 +---- docs/css/docs.less | 23 +----- docs/css/docs.min.css | 2 +- docs/css/spectre-exp.css | 14 ++-- docs/css/spectre-exp.min.css | 2 +- docs/css/spectre.css | 74 ++++++++++------- docs/css/spectre.min.css | 2 +- docs/elements.html | 170 ++++++++++++++++++++++---------------- docs/experimentals.html | 14 ++-- docs/index.html | 27 +++--- docs/layout.html | 29 +++---- docs/utilities.html | 54 ++++++------ 13 files changed, 329 insertions(+), 294 deletions(-) (limited to 'docs') diff --git a/docs/components.html b/docs/components.html index cf2a2ec..46fc50a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -179,9 +179,9 @@

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

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

+ -
-<div class="form-autocomplete">
+
<div class="form-autocomplete">
   <!-- autocomplete input container -->
   <div class="form-autocomplete-input">
     <!-- autocomplete chips -->
@@ -221,8 +221,9 @@
       </a>
     </li>
   </ul>
-</div>
-

+</div>
+
+
@@ -284,9 +285,9 @@ + -
-<!-- Basic avatar examples -->
+
<!-- Basic avatar examples -->
 <figure class="avatar avatar-xl">
   <img src="img/avatar-1.png" />
 </figure>
@@ -301,8 +302,9 @@
 <!-- Show initals when avatar image is unavailable or not fully loaded -->
 <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
   <img src="img/avatar-1.png" />
-</figure>
-

+</figure>
+
+
@@ -353,9 +355,9 @@

Badges support button elements as well.

+ -
-<span class="badge" data-badge="">
+
<span class="badge" data-badge="">
   Notifications
 </span>
 
@@ -365,8 +367,9 @@
 
 <button class="btn badge" data-badge="88">
   Button
-</button>
-

+</button>
+
+
@@ -398,19 +401,20 @@

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

-

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

+

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

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

+</div>
+
+
@@ -522,9 +526,9 @@

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

+ -
-<div class="card">
+
<div class="card">
   <div class="card-image">
     <img src="img/osx-el-capitan.jpg" class="img-responsive" />
   </div>
@@ -538,8 +542,9 @@
   <div class="card-footer">
     <button class="btn btn-primary">Do</button>
   </div>
-</div>
-

+</div>
+
+
@@ -584,9 +589,9 @@

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

+ -
-<div class="chip">
+
<div class="chip">
   Crime
   <button class="btn btn-clear"></button>
 </div>
@@ -597,6 +602,7 @@
   <button class="btn btn-clear"></button>
 </div>
 

+
@@ -860,9 +868,9 @@

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

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

+ -
-<div class="modal active">
+
<div class="modal active">
   <div class="modal-overlay"></div>
   <div class="modal-container">
     <div class="modal-header">
@@ -879,8 +887,8 @@
       <button class="btn btn-primary">Share</button>
     </div>
   </div>
-</div>
-

+</div>
+

Modal sizes

@@ -944,15 +952,16 @@

Add the class modal-sm for a smaller modal dialog.

+ -
-<div class="modal modal-sm">
+
<div class="modal modal-sm">
   <div class="modal-overlay"></div>
   <div class="modal-container">
     <!-- modal structure here -->
   </div>
-</div>
-

+</div>
+
+
@@ -1426,9 +1438,9 @@

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

+ -
-<ul class="step">
+
<ul class="step">
   <li class="step-item">
     <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
   </li>
@@ -1441,8 +1453,9 @@
   <li class="step-item">
     <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
   </li>
-</ul>
-

+</ul>
+
+
@@ -1489,9 +1502,9 @@

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

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

+ -
-<div class="tile">
+
<div class="tile">
   <div class="tile-icon">
     <div class="example-tile-icon">
       <i class="icon icon-explore centered"></i>
@@ -1504,8 +1517,9 @@
   <div class="tile-action">
     <button class="btn btn-primary">Join</button>
   </div>
-</div>
-

+</div>
+
+

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

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

@@ -1528,9 +1542,9 @@
+ -
-<div class="tile tile-centered">
+
<div class="tile tile-centered">
   <div class="tile-icon">
     <div class="example-tile-icon">
       <i class="icon icon-explore centered"></i>
@@ -1545,8 +1559,9 @@
       <i class="icon icon-more_vert"></i>
     </button>
   </div>
-</div>
-

+</div>
+
+
@@ -1588,9 +1603,9 @@

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

+ -
-<div class="toast">
+
<div class="toast">
   <button class="btn btn-clear float-right"></button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </div>
@@ -1599,8 +1614,9 @@
   <button class="btn btn-clear float-right"></button>
   <i class="icon icon-error_outline"></i>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-

+</div>
+
+
@@ -1626,11 +1642,12 @@

Tooltips component is built entirely in CSS.

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

+ -
-<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
-<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
-
+
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+
+
diff --git a/docs/css/docs.css b/docs/css/docs.css index 6516a92..4ec50e4 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -39,17 +39,17 @@ .bg-grey { background-color: #f6f6f6; border-radius: .2rem; - padding: 1rem; + padding: 1rem .5rem; } .bg-dark { background: #2d3354; color: #fff; - padding: 1rem; + padding: 1rem .5rem; } .bg-primary { background: #5764c6; color: #fff; - padding: 1rem; + padding: 1rem .5rem; } .navbar-brand .icon { font-size: 1.3333em; @@ -79,21 +79,6 @@ .empty .icon { font-size: 4rem; } -.code { - color: #666; -} -.code .com { - color: #adadad; -} -.code .tag { - color: #4452c0; -} -.code .atn { - color: #666; -} -.code .atv { - color: #e06870; -} .docs-content .container { padding: 2rem 1rem; } diff --git a/docs/css/docs.less b/docs/css/docs.less index 9a9c703..6d01292 100644 --- a/docs/css/docs.less +++ b/docs/css/docs.less @@ -44,20 +44,20 @@ .bg-grey { background-color: #f6f6f6; - padding: 1rem; + padding: 1rem .5rem; border-radius: .2rem; } .bg-dark { background: #2d3354; color: #fff; - padding: 1rem; + padding: 1rem .5rem; } .bg-primary { background: #5764c6; color: #fff; - padding: 1rem; + padding: 1rem .5rem; } .navbar-brand { @@ -97,23 +97,6 @@ font-size: 4rem; } -.code { - color: #666; - - .com { - color: #adadad; - } - .tag { - color: #4452c0; - } - .atn { - color: #666; - } - .atv { - color: #e06870; - } -} - .docs-content { .container { padding: 2rem 1rem; diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css index 7dd1c2d..18051ff 100644 --- a/docs/css/docs.min.css +++ b/docs/css/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.3"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}.docs-content .container{padding:2rem 1rem}.docs-content header{padding-top:2rem}.docs-content pre{margin-bottom:2rem;margin-top:2rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:481px){.docs-sidebar{padding-bottom:6rem;padding-top:6rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}.show-xs{display:none!important}@media screen and (max-width:480px){.show-xs{display:block!important}.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.section-header{padding:0 .5rem;position:fixed;top:0;width:100%;z-index:299}.section-header .btn-link{padding-left:.6rem;padding-right:.6rem}.docs-sidebar{background:#fff;height:100%;overflow-y:auto;padding-left:3rem;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-content header{padding-top:6rem}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}} \ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.3"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.empty .icon{font-size:4rem}.docs-content .container{padding:2rem 1rem}.docs-content header{padding-top:2rem}.docs-content pre{margin-bottom:2rem;margin-top:2rem}.docs-content .notes{color:#666;margin:4rem 0}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:481px){.docs-sidebar{padding-bottom:6rem;padding-top:6rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:6rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}.show-xs{display:none!important}@media screen and (max-width:480px){.show-xs{display:block!important}.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.section-header{padding:0 .5rem;position:fixed;top:0;width:100%;z-index:299}.section-header .btn-link{padding-left:.6rem;padding-right:.6rem}.docs-sidebar{background:#fff;height:100%;overflow-y:auto;padding-left:3rem;position:fixed;right:0;top:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-content header{padding-top:6rem}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:499}} \ No newline at end of file diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css index 342c224..8a3ab8e 100644 --- a/docs/css/spectre-exp.css +++ b/docs/css/spectre-exp.css @@ -33,32 +33,32 @@ -webkit-appearance: none; background: #5764c6; border-radius: 50%; - height: 1.4rem; - margin-top: -.5rem; + height: 1.2rem; + margin-top: -.4rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; - width: 1.4rem; + width: 1.2rem; } .slider::-moz-range-thumb { background: #5764c6; border: 0; border-radius: 50%; - height: 1.4rem; + height: 1.2rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; - width: 1.4rem; + width: 1.2rem; } .slider::-ms-thumb { background: #5764c6; border: 0; border-radius: 50%; - height: 1.4rem; + height: 1.2rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; - width: 1.4rem; + width: 1.2rem; } .slider:active::-webkit-slider-thumb { -webkit-transform: scale(1.25); diff --git a/docs/css/spectre-exp.min.css b/docs/css/spectre-exp.min.css index 26fc3c6..b1aa660 100644 --- a/docs/css/spectre-exp.min.css +++ b/docs/css/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;color:#5764c6;height:.4rem;width:100%}.progress::-webkit-progress-bar{background:#efefef;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.4rem;margin-top:-.5rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.4rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.4rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.4rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;color:#5764c6;height:.4rem;width:100%}.progress::-webkit-progress-bar{background:#efefef;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file diff --git a/docs/css/spectre.css b/docs/css/spectre.css index 40d5351..0fad1b2 100644 --- a/docs/css/spectre.css +++ b/docs/css/spectre.css @@ -533,37 +533,6 @@ abbr[title] { cursor: help; text-decoration: none; } -code { - background: #f8f8f8; - border-radius: .2rem; - color: #666; - display: inline-block; - line-height: 1; - padding: .3rem; - vertical-align: baseline; -} -pre { - background: #f9f9f9; - line-height: 2rem; - margin-bottom: 1em; - margin-top: 1em; - overflow: auto; - padding: 2rem 2.5rem; - position: relative; -} -pre > code { - background: transparent; - line-height: 2rem; - padding: 0; -} -pre > code::before { - color: #c5c5c5; - content: attr(data-lang); - font-size: 1.2rem; - position: absolute; - right: 1rem; - top: .2rem; -} :lang(zh), :lang(ja), :lang(ko), @@ -1154,6 +1123,49 @@ textarea.form-input { background: #e85600; color: #fff; } +code { + background: #f8f8f8; + border-radius: .2rem; + color: #e06870; + display: inline-block; + line-height: 1; + padding: .3rem; + vertical-align: baseline; +} +.code { + border-radius: .2rem; + color: #666; + line-height: 2rem; + position: relative; +} +.code::before { + color: #c5c5c5; + content: attr(data-lang); + font-size: 1.2rem; + position: absolute; + right: 1rem; + top: .2rem; +} +.code code { + color: inherit; + display: block; + line-height: inherit; + overflow-x: auto; + padding: 2rem; + width: 100%; +} +.code .com { + color: #c5c5c5; +} +.code .tag { + color: #5764c6; +} +.code .atn { + color: #666; +} +.code .atv { + color: #e06870; +} .img-responsive { display: block; height: auto; diff --git a/docs/css/spectre.min.css b/docs/css/spectre.min.css index 90a44a3..787f0d0 100644 --- a/docs/css/spectre.min.css +++ b/docs/css/spectre.min.css @@ -1 +1 @@ -/*! Spectre.css | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:10px;line-height:1.42857143;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#333;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:1.4rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5764c6;text-decoration:none}a:focus,a:hover{color:#3b49af;text-decoration:underline}:focus{box-shadow:0 0 0 .2rem rgba(87,100,198,.15);outline:0}.disabled,[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn .icon,.menu .icon,.toast .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.icon-caret{border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-top:.4rem solid currentColor;display:inline-block;height:0;margin:0;vertical-align:middle;width:0}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:300;line-height:1.2;margin-bottom:1.5rem;margin-top:0}h1{font-size:5rem}h2{font-size:4rem}h3{font-size:3rem}h4{font-size:2.4rem}h5{font-size:2rem}h6{font-size:1.6rem}p{line-height:2.4rem;margin:0 0 1em}blockquote{border-left:.2rem solid #ddd;margin-left:0;padding:1rem 2rem}blockquote p:last-child{margin-bottom:0}blockquote cite{color:#b3b3b3}ol,ul{margin:2rem 0 2rem 2rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 2rem}ol li,ul li{margin-top:1rem}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:.5rem 0 1.5rem 0}mark{background:#ffe9b3;border-radius:.2rem;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}kbd{background:#333;border-radius:.2rem;color:#fff;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}abbr[title]{border-bottom:.1rem dotted;cursor:help;text-decoration:none}code{background:#f8f8f8;border-radius:.2rem;color:#666;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}pre{background:#f9f9f9;line-height:2rem;margin-bottom:1em;margin-top:1em;overflow:auto;padding:2rem 2.5rem;position:relative}pre>code{background:0 0;line-height:2rem;padding:0}pre>code::before{color:#c5c5c5;content:attr(data-lang);font-size:1.2rem;position:absolute;right:1rem;top:.2rem}.cjk,:lang(ja),:lang(ko),:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Hiragino Kaku Gothic Pro",Meiryo,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.1rem 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:#f8f8f8}.table.table-hover tbody tr:hover{background:#f0f0f0}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f0f0}.table td,.table th{border-bottom:.1rem solid #efefef;padding:1.5rem 1rem}.table th{border-color:#e2e2e2}.btn{-webkit-appearance:none;background:#fff;border:.1rem solid #5764c6;border-radius:.2rem;color:#5764c6;cursor:pointer;display:inline-block;font-size:1.4rem;height:3.2rem;line-height:2rem;padding:.5rem 1.2rem;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{background:#f7f8fc;text-decoration:none}.btn:hover{background:#5764c6;border-color:#4452c0;color:#fff;text-decoration:none}.btn.active,.btn:active{background:#4452c0;border-color:#3b49af;color:#fff}.btn.btn-primary{background:#5764c6;border-color:#4452c0;color:#fff}.btn.btn-primary:focus{background:#4856c1;border-color:#3b49af;color:#fff}.btn.btn-primary:hover{background:#404fbe;border-color:#35419c;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3e4cb6;border-color:#35419c;color:#fff}.btn.btn-primary.loading::after{border-color:#fff;border-right-color:transparent;border-top-color:transparent}.btn.btn-link{background:0 0;border-color:transparent;color:#5764c6}.btn.btn-link:focus,.btn.btn-link:hover{color:#35419c}.btn.btn-link.active,.btn.btn-link:active{color:#283176}.btn.btn-sm{font-size:1.2rem;height:2.4rem;padding:.1rem .8rem}.btn.btn-lg{font-size:1.8rem;height:4rem;padding:.9rem 1.5rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:.2rem;padding-right:.2rem;width:3.2rem}.btn.btn-action.btn-sm{width:2.4rem}.btn.btn-action.btn-lg{width:4.2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:2rem;margin-left:.2rem;margin-right:-.4rem;opacity:.45;padding:0 .4rem;text-decoration:none;width:2rem}.btn.btn-clear:hover{opacity:.85}.btn.btn-clear::before{content:"\00d7";display:inline-block;font-family:sans-serif;font-size:2rem}.btn-group{display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-of-type:not(:last-of-type){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-of-type):not(:last-of-type){border-radius:0;margin-left:-.1rem}.btn-group .btn:last-of-type:not(:first-of-type){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.1rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:9}.btn-group.btn-group-block{display:flex;display:-ms-flexbox;display:-webkit-flex}.form-group:not(:last-child){margin-bottom:1rem}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.1rem solid #c5c5c5;border-radius:.2rem;color:#333;display:block;font-size:1.4rem;height:3.2rem;line-height:1.8rem;max-width:100%;outline:0;padding:.6rem .8rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5764c6}.form-input[disabled]{background:#eeeff2}.form-input.input-sm{font-size:1.2rem;height:2.4rem;padding:.3rem .6rem}.form-input.input-lg{font-size:1.6rem;height:4.2rem;line-height:2rem;padding:1rem .8rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}textarea.form-input{height:auto;line-height:2rem}.form-input.is-success,.has-success .form-input{border-color:#32b643}.form-input.is-danger,.has-danger .form-input{border-color:#e85600}.form-input[type=file]{height:auto}.form-input-hint{color:#888;margin-top:.4rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-danger .form-input-hint,.is-danger+.form-input-hint{color:#e85600}.form-label{display:block;line-height:1.6rem;margin-bottom:.5rem}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.1rem solid #c5c5c5;border-radius:.2rem;font-size:1.4rem;line-height:1.6rem;min-width:18rem;outline:0;padding:.5rem .8rem;vertical-align:middle}.form-select[multiple] option{padding:.2rem .4rem}.form-select:not([multiple]){background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center/.8rem 1rem;height:3.2rem;padding-right:2.4rem}.form-select:focus{border-color:#5764c6}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:1.2rem;height:2.4rem;padding:.4rem 2rem .4rem .6rem}.form-select.select-lg{font-size:1.6rem;height:4.2rem;line-height:2rem;padding:1rem 2.4rem 1rem .8rem}.form-select.is-success,.has-success .form-select{border-color:#32b643}.form-select.is-danger,.has-danger .form-select{border-color:#e85600}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:.1rem;margin:-.1rem;overflow:hidden;position:absolute;width:.1rem}.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 .2rem rgba(87,100,198,.15)}.form-checkbox,.form-radio{cursor:pointer;display:inline-block;line-height:1.8rem;padding:.3rem 2rem;position:relative}.form-checkbox .form-icon,.form-radio .form-icon{border:.1rem solid #c5c5c5;display:inline-block;font-size:1.4rem;height:1.4rem;left:0;line-height:2.4rem;outline:0;padding:0;position:absolute;top:.5rem;transition:all .2s ease;vertical-align:top;width:1.4rem}.form-checkbox:hover .form-icon,.form-radio:hover .form-icon{border-color:#929292}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#efefef}.form-checkbox .form-icon{border-radius:.2rem}.form-checkbox input:checked+.form-icon::after{background-clip:padding-box;border:.2rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:1rem;left:50%;margin-left:-.3rem;margin-top:-.6rem;position:absolute;top:50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:.6rem}.form-checkbox input:indeterminate+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:indeterminate+.form-icon::after{background:#fff;content:"";height:.2rem;left:50%;margin-left:-.4rem;margin-top:-.1rem;position:absolute;top:50%;width:.8rem}.form-radio .form-icon{border-radius:.7rem}.form-radio input:checked+.form-icon::after{background:#fff;border-radius:.2rem;content:"";height:.4rem;left:50%;margin-left:-.2rem;margin-top:-.2rem;position:absolute;top:50%;width:.4rem}.form-switch{cursor:pointer;display:inline-block;line-height:2rem;padding:.2rem 2rem .2rem 3.6rem;position:relative}.form-switch .form-icon{background:#c5c5c5;background-clip:padding-box;border:.1rem solid #c5c5c5;border-radius:.9rem;display:inline-block;height:1.8rem;left:0;line-height:2.6rem;outline:0;padding:0;position:absolute;top:.3rem;vertical-align:top;width:3rem}.form-switch .form-icon::after{background:#fff;border-radius:.8rem;content:"";display:block;height:1.6rem;left:0;position:absolute;top:0;transition:left .2s ease;width:1.6rem}.form-switch input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-switch input:checked+.form-icon::after{left:1.2rem}.form-switch input:active+.form-icon::after{background:#efefef}.input-group{display:flex;display:-ms-flexbox;display:-webkit-flex}.input-group .input-group-addon{background:#f9f9f9;border:.1rem solid #c5c5c5;border-radius:.2rem;line-height:1.6rem;padding:.7rem .8rem}.input-group .input-group-addon.addon-sm{font-size:1.2rem;padding:.3rem .6rem}.input-group .input-group-addon.addon-lg{font-size:1.6rem;line-height:2rem;padding:1rem .8rem}.input-group .input-group-addon,.input-group .input-group-btn{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.input-group .form-input: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 .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:-.1rem}.input-group .form-input: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:-.1rem}.input-group .form-input:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:99}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex}.form-horizontal{padding:1rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox;display:-webkit-flex}.form-horizontal .form-label{margin-bottom:0;padding:.8rem .4rem}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.4rem 0}.label{background:#f8f8f8;border-radius:.2rem;color:#888;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}.label.label-primary{background:#5764c6;color:#fff}.label.label-success{background:#32b643;color:#fff}.label.label-danger{background:#e85600;color:#fff}.img-responsive{display:block;height:auto;max-width:100%}.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{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.video-responsive video{height:auto;max-width:100%;width:100%}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 1rem 0}.figure .figure-caption{color:#888;margin-top:1rem}.container{margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;width:100%}@media screen and (min-width:980px){.grid-960{width:98rem}}@media screen and (min-width:500px){.grid-480{width:50rem}}.columns{display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-1rem;margin-right:-1rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless .column{padding-left:0;padding-right:0}.columns.col-oneline{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-webkit-flex:1;-ms-flex:1;flex:1;padding:1rem}.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{-webkit-flex:none;-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%}@media screen and (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-webkit-flex:none;-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%}}@media screen and (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-webkit-flex:none;-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%}}@media screen and (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-webkit-flex:none;-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%}}@media screen and (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-webkit-flex:none;-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%}}@media screen and (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-webkit-flex:none;-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%}}@media screen and (max-width:480px){.hide-xs{display:none!important}}@media screen and (max-width:600px){.hide-sm{display:none!important}}@media screen and (max-width:840px){.hide-md{display:none!important}}@media screen and (max-width:960px){.hide-lg{display:none!important}}@media screen and (max-width:1280px){.hide-xl{display:none!important}}.navbar{-webkit-align-items:center;align-items:center;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-pack:justify;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;justify-content:space-between}.navbar .navbar-section{-webkit-align-items:center;align-items:center;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;padding:1rem 0}.navbar .navbar-brand{font-size:1.6rem;font-weight:500;margin-right:2rem;text-decoration:none;vertical-align:middle}.empty{background:#f8f8f8;border-radius:.2rem;padding:4rem;text-align:center}.empty .empty-title{font-size:1.8rem;margin:1.5rem 0 .5rem 0}.empty .empty-meta{color:#888}.empty .empty-action{margin-top:1.5rem}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{-webkit-align-content:flex-start;align-content:flex-start;background:#fff;border:.1rem solid #c5c5c5;border-radius:.2rem;color:#333;display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-line-pack:start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:3.6rem;outline:0;padding:.1rem 0 .1rem .2rem;width:100%}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5764c6;box-shadow:0 0 0 .2rem rgba(87,100,198,.15)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;padding:.3rem;width:auto}.form-autocomplete mark{font-size:1;padding:.1em 0}.avatar{border-radius:50%;color:#fff;display:inline-block;font-size:1.4rem;font-weight:300;height:3.2rem;line-height:1;margin:0;position:relative;vertical-align:middle;width:3.2rem}.avatar.avatar-xs{font-size:1.2rem;height:1.6rem;width:1.6rem}.avatar.avatar-sm{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-lg{font-size:2rem;height:4.8rem;width:4.8rem}.avatar.avatar-xl{font-size:2.8rem;height:6.4rem;width:6.4rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:99}.avatar .avatar-icon{background:#fff;bottom:-.2em;height:50%;padding:5%;position:absolute;right:-.2em;width:50%}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.avatar.avatar-xs[data-initial]::before{-webkit-transform:translate(-50%,-50%) scale(.65);-ms-transform:translate(-50%,-50%) scale(.65);transform:translate(-50%,-50%) scale(.65)}.badge{display:inline-block;position:relative}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5764c6;background-clip:padding-box;border:.1rem solid #fff;border-radius:1rem;color:#fff;content:attr(data-badge);display:inline-block;-webkit-transform:translate(-.4rem,-1rem);-ms-transform:translate(-.4rem,-1rem);transform:translate(-.4rem,-1rem)}.badge[data-badge]::after{font-size:1.2rem;height:2rem;line-height:1.4rem;min-width:2rem;padding:.2rem .5rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:.8rem;min-width:.8rem;padding:0;width:.8rem}.badge.btn::after{position:absolute;right:0;top:0;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.bar{background:#efefef;border-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:1.6rem;width:100%}.bar.bar-sm{height:.4rem}.bar .bar-item{background:#5764c6;color:#fff;display:block;-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;font-size:1.2rem;height:100%;line-height:1;padding:.2rem 0;text-align:center;width:0}.bar .bar-item:first-of-type{border-bottom-left-radius:.2rem;border-top-left-radius:.2rem}.bar .bar-item:last-of-type{border-bottom-right-radius:.2rem;border-top-right-radius:.2rem;-ms-flex-negative:1;-webkit-flex-shrink:1;flex-shrink:1}.card{background:#fff;border:.1rem solid #efefef;border-radius:.2rem;display:block;margin:0;padding:0;text-align:left}.card .card-body,.card .card-footer,.card .card-header{padding:1.5rem 1.5rem 0 1.5rem}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:1.5rem}.card .card-image{padding-top:1.5rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.2rem;border-top-right-radius:.2rem}.card .card-image:last-child img{border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem}.card .card-title{font-size:2rem;line-height:1}.card .card-meta{color:#888;font-size:1.3rem}.chip{-webkit-align-items:center;align-items:center;background:#efefef;border-radius:.2rem;color:#666;display:-ms-inline-flexbox;display:inline-flex;display:-webkit-inline-flex;-ms-flex-align:center;height:3rem;margin:.1rem .2rem .1rem 0;max-width:100%;padding:.3rem .8rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5764c6;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.4rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{-webkit-animation:slide-down .2s;animation:slide-down .2s;display:none;left:0;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}.menu{background:#fff;border-radius:.2rem;box-shadow:0 .1rem .4rem rgba(0,0,0,.3);display:block;margin:0;min-width:18rem;padding:.8rem;text-align:left;-webkit-transform:translateY(.5rem);-ms-transform:translateY(.5rem);transform:translateY(.5rem);z-index:999}.menu .menu-item{border-radius:.2rem;display:block;line-height:2.4rem;margin-top:0;padding:.3rem .8rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item a{border-radius:.2rem;color:inherit;display:block;margin:-.3rem -.8rem;padding:.3rem .8rem;text-decoration:none}.menu .menu-item a:focus,.menu .menu-item a:hover{color:#5764c6}.menu .menu-item a.active,.menu .menu-item a:active{background:#eff1fa;color:#4452c0}.menu .menu-header{color:#ccc;display:block;font-size:1.2rem;line-height:1.8rem;margin-top:0;padding:.2rem .8rem}.menu .menu-header::after{border-bottom:.1rem solid #efefef;content:"";display:block;height:.1rem;-webkit-transform:translateY(-1rem);-ms-transform:translateY(-1rem);transform:translateY(-1rem);width:100%}.menu .menu-header .menu-header-text{background:#fff;display:inline-block;margin-left:-.6rem;padding:0 .6rem;position:relative;z-index:99}.modal{-webkit-align-items:center;align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:1rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;display:-webkit-flex;opacity:1;z-index:1988}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(51,51,51,.5);bottom:0;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{-webkit-animation:slide-down .2s;animation:slide-down .2s;max-width:64rem}.modal.modal-sm .modal-container{max-width:32rem}.modal-container{background:#fff;border-radius:.2rem;box-shadow:0 .1rem .4rem rgba(0,0,0,.3);display:block;margin:0 auto;padding:0;text-align:left;z-index:1988}.modal-container .modal-header{padding:1.5rem}.modal-container .modal-header .modal-title{font-size:1.6rem;margin:0}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:1.5rem;position:relative}.modal-container .modal-footer{padding:1.5rem;text-align:right}.breadcrumb,.nav,.pagination,.tab{list-style:none;margin:.5rem 0}.breadcrumb{padding:1.2rem}.breadcrumb .breadcrumb-item{display:inline-block;margin:0}.breadcrumb .breadcrumb-item:last-child{color:#888}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#c5c5c5;content:"/";padding:0 .4rem}.tab{-webkit-align-items:center;align-items:center;border-bottom:.1rem solid #efefef;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.tab .tab-item{margin-top:0}.tab .tab-item.tab-action{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item a{border-bottom:.2rem solid transparent;color:#333;display:block;margin-bottom:-.1rem;margin-top:0;padding:.6rem 1.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{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;text-align:center}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:-.4rem;top:-.4rem;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.pagination{display:flex;display:-ms-flexbox;display:-webkit-flex}.pagination .page-item{margin:1rem .1rem}.pagination .page-item span{display:inline-block;padding:.6rem .4rem}.pagination .page-item a{border-radius:.2rem;color:#666;display:inline-block;padding:.6rem .8rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5764c6}.pagination .page-item.active a{background:#5764c6;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-webkit-flex:1 0 50%;-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-meta{margin:0;opacity:.5}.nav{display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.nav .nav-item a{color:#666;padding:.6rem .8rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5764c6}.nav .nav-item.active>a{color:#333;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5764c6}.nav .nav{margin-bottom:1rem;margin-left:2rem}.nav .nav a{color:grey}.step{display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.5rem 0;width:100%}.step .step-item{-webkit-flex:1 1 0;-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:2rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5764c6;content:"";height:.2rem;left:-50%;position:absolute;top:.9rem;width:100%}.step .step-item a{color:#888;display:inline-block;padding:2rem 1rem 0;text-decoration:none}.step .step-item a::before{background:#5764c6;border:.2rem solid #fff;border-radius:50%;content:"";display:block;height:1.2rem;left:50%;position:absolute;top:.4rem;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:1.2rem;z-index:99}.step .step-item.active a::before{background:#fff;border:.2rem solid #5764c6}.step .step-item.active~.step-item::before{background:#efefef}.step .step-item.active~.step-item a::before{background:#c5c5c5}.tile{-webkit-align-content:space-between;align-content:space-between;-webkit-align-items:flex-start;align-items:flex-start;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:start;-ms-flex-line-pack:justify;margin:0;padding:.5rem 0}.tile .tile-icon{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:1rem}.tile .tile-content:not(:last-child){padding-right:1rem}.tile .tile-action{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-title{font-size:1.6rem;font-weight:500}.tile .tile-meta{color:#888;font-size:1.3rem}.tile.tile-centered{-webkit-align-items:center;align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.toast{background:rgba(51,51,51,.9);border:.1rem solid #333;border-color:#333;border-radius:.2rem;color:#fff;display:block;padding:1.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-danger{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.tooltip{position:relative}.tooltip::after{background:rgba(51,51,51,.9);border-radius:.2rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:1.2rem;left:50%;line-height:1.6rem;max-width:32rem;opacity:0;overflow:hidden;padding:.6rem 1rem;pointer-events:none;position:absolute;text-overflow:ellipsis;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;white-space:nowrap;z-index:999}.tooltip:focus::after,.tooltip:hover::after{opacity:1;-webkit-transform:translate(-50%,-.5rem);-ms-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;-webkit-transform:translate(0,50%);-ms-transform:translate(0,50%);transform:translate(0,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{-webkit-transform:translate(.5rem,50%);-ms-transform:translate(.5rem,50%);transform:translate(.5rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{-webkit-transform:translate(-50%,.5rem);-ms-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;-webkit-transform:translate(0,50%);-ms-transform:translate(0,50%);transform:translate(0,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{-webkit-transform:translate(-.5rem,50%);-ms-transform:translate(-.5rem,50%);transform:translate(-.5rem,50%)}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.divider{border-bottom:.1rem solid #efefef;display:block;margin:.5rem 0}.loading{color:transparent!important;min-height:1.6rem;pointer-events:none;position:relative}.loading::after{-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;border:.2rem solid #5764c6;border-radius:.8rem;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:1.6rem;left:50%;margin-left:-.8rem;margin-top:-.8rem;position:absolute;top:50%;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.rel{position:relative}.abs{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.mt-10{margin-top:1rem}.mr-10{margin-right:1rem}.mb-10{margin-bottom:1rem}.ml-10{margin-left:1rem}.mt-5{margin-top:.5rem}.mr-5{margin-right:.5rem}.mb-5{margin-bottom:.5rem}.ml-5{margin-left:.5rem}.pt-10{padding-top:1rem}.pr-10{padding-right:1rem}.pb-10{padding-bottom:1rem}.pl-10{padding-left:1rem}.pt-5{padding-top:.5rem}.pr-5{padding-right:.5rem}.pb-5{padding-bottom:.5rem}.pl-5{padding-left:.5rem}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.flex{display:flex;display:-ms-flexbox;display:-webkit-flex}.inline-flex{display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex}.hide{display:none!important}.visible{visibility:visible}.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:.1rem;margin:-.1rem;overflow:hidden;padding:0;position:absolute;width:.1rem}.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}.hand{cursor:pointer}.shadow{box-shadow:0 .1rem .4rem rgba(0,0,0,.3)}.light-shadow{box-shadow:0 .1rem .2rem rgba(0,0,0,.15)}.rounded{border-radius:.2rem}.circle{border-radius:50%} \ No newline at end of file +/*! Spectre.css | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:10px;line-height:1.42857143;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#333;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:1.4rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5764c6;text-decoration:none}a:focus,a:hover{color:#3b49af;text-decoration:underline}:focus{box-shadow:0 0 0 .2rem rgba(87,100,198,.15);outline:0}.disabled,[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn .icon,.menu .icon,.toast .icon{font-size:1.3333em;line-height:.8em;vertical-align:-20%}.icon-caret{border-left:.4rem solid transparent;border-right:.4rem solid transparent;border-top:.4rem solid currentColor;display:inline-block;height:0;margin:0;vertical-align:middle;width:0}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:300;line-height:1.2;margin-bottom:1.5rem;margin-top:0}h1{font-size:5rem}h2{font-size:4rem}h3{font-size:3rem}h4{font-size:2.4rem}h5{font-size:2rem}h6{font-size:1.6rem}p{line-height:2.4rem;margin:0 0 1em}blockquote{border-left:.2rem solid #ddd;margin-left:0;padding:1rem 2rem}blockquote p:last-child{margin-bottom:0}blockquote cite{color:#b3b3b3}ol,ul{margin:2rem 0 2rem 2rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 2rem}ol li,ul li{margin-top:1rem}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:.5rem 0 1.5rem 0}mark{background:#ffe9b3;border-radius:.2rem;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}kbd{background:#333;border-radius:.2rem;color:#fff;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}abbr[title]{border-bottom:.1rem dotted;cursor:help;text-decoration:none}.cjk,:lang(ja),:lang(ko),:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Hiragino Kaku Gothic Pro",Meiryo,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.1rem 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:#f8f8f8}.table.table-hover tbody tr:hover{background:#f0f0f0}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f0f0}.table td,.table th{border-bottom:.1rem solid #efefef;padding:1.5rem 1rem}.table th{border-color:#e2e2e2}.btn{-webkit-appearance:none;background:#fff;border:.1rem solid #5764c6;border-radius:.2rem;color:#5764c6;cursor:pointer;display:inline-block;font-size:1.4rem;height:3.2rem;line-height:2rem;padding:.5rem 1.2rem;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{background:#f7f8fc;text-decoration:none}.btn:hover{background:#5764c6;border-color:#4452c0;color:#fff;text-decoration:none}.btn.active,.btn:active{background:#4452c0;border-color:#3b49af;color:#fff}.btn.btn-primary{background:#5764c6;border-color:#4452c0;color:#fff}.btn.btn-primary:focus{background:#4856c1;border-color:#3b49af;color:#fff}.btn.btn-primary:hover{background:#404fbe;border-color:#35419c;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3e4cb6;border-color:#35419c;color:#fff}.btn.btn-primary.loading::after{border-color:#fff;border-right-color:transparent;border-top-color:transparent}.btn.btn-link{background:0 0;border-color:transparent;color:#5764c6}.btn.btn-link:focus,.btn.btn-link:hover{color:#35419c}.btn.btn-link.active,.btn.btn-link:active{color:#283176}.btn.btn-sm{font-size:1.2rem;height:2.4rem;padding:.1rem .8rem}.btn.btn-lg{font-size:1.8rem;height:4rem;padding:.9rem 1.5rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:.2rem;padding-right:.2rem;width:3.2rem}.btn.btn-action.btn-sm{width:2.4rem}.btn.btn-action.btn-lg{width:4.2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:2rem;margin-left:.2rem;margin-right:-.4rem;opacity:.45;padding:0 .4rem;text-decoration:none;width:2rem}.btn.btn-clear:hover{opacity:.85}.btn.btn-clear::before{content:"\00d7";display:inline-block;font-family:sans-serif;font-size:2rem}.btn-group{display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-of-type:not(:last-of-type){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-of-type):not(:last-of-type){border-radius:0;margin-left:-.1rem}.btn-group .btn:last-of-type:not(:first-of-type){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.1rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:9}.btn-group.btn-group-block{display:flex;display:-ms-flexbox;display:-webkit-flex}.form-group:not(:last-child){margin-bottom:1rem}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.1rem solid #c5c5c5;border-radius:.2rem;color:#333;display:block;font-size:1.4rem;height:3.2rem;line-height:1.8rem;max-width:100%;outline:0;padding:.6rem .8rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5764c6}.form-input[disabled]{background:#eeeff2}.form-input.input-sm{font-size:1.2rem;height:2.4rem;padding:.3rem .6rem}.form-input.input-lg{font-size:1.6rem;height:4.2rem;line-height:2rem;padding:1rem .8rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}textarea.form-input{height:auto;line-height:2rem}.form-input.is-success,.has-success .form-input{border-color:#32b643}.form-input.is-danger,.has-danger .form-input{border-color:#e85600}.form-input[type=file]{height:auto}.form-input-hint{color:#888;margin-top:.4rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-danger .form-input-hint,.is-danger+.form-input-hint{color:#e85600}.form-label{display:block;line-height:1.6rem;margin-bottom:.5rem}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.1rem solid #c5c5c5;border-radius:.2rem;font-size:1.4rem;line-height:1.6rem;min-width:18rem;outline:0;padding:.5rem .8rem;vertical-align:middle}.form-select[multiple] option{padding:.2rem .4rem}.form-select:not([multiple]){background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center/.8rem 1rem;height:3.2rem;padding-right:2.4rem}.form-select:focus{border-color:#5764c6}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:1.2rem;height:2.4rem;padding:.4rem 2rem .4rem .6rem}.form-select.select-lg{font-size:1.6rem;height:4.2rem;line-height:2rem;padding:1rem 2.4rem 1rem .8rem}.form-select.is-success,.has-success .form-select{border-color:#32b643}.form-select.is-danger,.has-danger .form-select{border-color:#e85600}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:.1rem;margin:-.1rem;overflow:hidden;position:absolute;width:.1rem}.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 .2rem rgba(87,100,198,.15)}.form-checkbox,.form-radio{cursor:pointer;display:inline-block;line-height:1.8rem;padding:.3rem 2rem;position:relative}.form-checkbox .form-icon,.form-radio .form-icon{border:.1rem solid #c5c5c5;display:inline-block;font-size:1.4rem;height:1.4rem;left:0;line-height:2.4rem;outline:0;padding:0;position:absolute;top:.5rem;transition:all .2s ease;vertical-align:top;width:1.4rem}.form-checkbox:hover .form-icon,.form-radio:hover .form-icon{border-color:#929292}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#efefef}.form-checkbox .form-icon{border-radius:.2rem}.form-checkbox input:checked+.form-icon::after{background-clip:padding-box;border:.2rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:1rem;left:50%;margin-left:-.3rem;margin-top:-.6rem;position:absolute;top:50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:.6rem}.form-checkbox input:indeterminate+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:indeterminate+.form-icon::after{background:#fff;content:"";height:.2rem;left:50%;margin-left:-.4rem;margin-top:-.1rem;position:absolute;top:50%;width:.8rem}.form-radio .form-icon{border-radius:.7rem}.form-radio input:checked+.form-icon::after{background:#fff;border-radius:.2rem;content:"";height:.4rem;left:50%;margin-left:-.2rem;margin-top:-.2rem;position:absolute;top:50%;width:.4rem}.form-switch{cursor:pointer;display:inline-block;line-height:2rem;padding:.2rem 2rem .2rem 3.6rem;position:relative}.form-switch .form-icon{background:#c5c5c5;background-clip:padding-box;border:.1rem solid #c5c5c5;border-radius:.9rem;display:inline-block;height:1.8rem;left:0;line-height:2.6rem;outline:0;padding:0;position:absolute;top:.3rem;vertical-align:top;width:3rem}.form-switch .form-icon::after{background:#fff;border-radius:.8rem;content:"";display:block;height:1.6rem;left:0;position:absolute;top:0;transition:left .2s ease;width:1.6rem}.form-switch input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-switch input:checked+.form-icon::after{left:1.2rem}.form-switch input:active+.form-icon::after{background:#efefef}.input-group{display:flex;display:-ms-flexbox;display:-webkit-flex}.input-group .input-group-addon{background:#f9f9f9;border:.1rem solid #c5c5c5;border-radius:.2rem;line-height:1.6rem;padding:.7rem .8rem}.input-group .input-group-addon.addon-sm{font-size:1.2rem;padding:.3rem .6rem}.input-group .input-group-addon.addon-lg{font-size:1.6rem;line-height:2rem;padding:1rem .8rem}.input-group .input-group-addon,.input-group .input-group-btn{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.input-group .form-input: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 .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:-.1rem}.input-group .form-input: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:-.1rem}.input-group .form-input:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:99}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex}.form-horizontal{padding:1rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox;display:-webkit-flex}.form-horizontal .form-label{margin-bottom:0;padding:.8rem .4rem}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.4rem 0}.label{background:#f8f8f8;border-radius:.2rem;color:#888;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}.label.label-primary{background:#5764c6;color:#fff}.label.label-success{background:#32b643;color:#fff}.label.label-danger{background:#e85600;color:#fff}code{background:#f8f8f8;border-radius:.2rem;color:#e06870;display:inline-block;line-height:1;padding:.3rem;vertical-align:baseline}.code{border-radius:.2rem;color:#666;line-height:2rem;position:relative}.code::before{color:#c5c5c5;content:attr(data-lang);font-size:1.2rem;position:absolute;right:1rem;top:.2rem}.code code{color:inherit;display:block;line-height:inherit;overflow-x:auto;padding:2rem;width:100%}.code .com{color:#c5c5c5}.code .tag{color:#5764c6}.code .atn{color:#666}.code .atv{color:#e06870}.img-responsive{display:block;height:auto;max-width:100%}.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{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.video-responsive video{height:auto;max-width:100%;width:100%}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 1rem 0}.figure .figure-caption{color:#888;margin-top:1rem}.container{margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;width:100%}@media screen and (min-width:980px){.grid-960{width:98rem}}@media screen and (min-width:500px){.grid-480{width:50rem}}.columns{display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-1rem;margin-right:-1rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless .column{padding-left:0;padding-right:0}.columns.col-oneline{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-webkit-flex:1;-ms-flex:1;flex:1;padding:1rem}.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{-webkit-flex:none;-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%}@media screen and (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-webkit-flex:none;-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%}}@media screen and (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-webkit-flex:none;-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%}}@media screen and (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-webkit-flex:none;-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%}}@media screen and (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-webkit-flex:none;-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%}}@media screen and (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-webkit-flex:none;-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%}}@media screen and (max-width:480px){.hide-xs{display:none!important}}@media screen and (max-width:600px){.hide-sm{display:none!important}}@media screen and (max-width:840px){.hide-md{display:none!important}}@media screen and (max-width:960px){.hide-lg{display:none!important}}@media screen and (max-width:1280px){.hide-xl{display:none!important}}.navbar{-webkit-align-items:center;align-items:center;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-pack:justify;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;justify-content:space-between}.navbar .navbar-section{-webkit-align-items:center;align-items:center;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;padding:1rem 0}.navbar .navbar-brand{font-size:1.6rem;font-weight:500;margin-right:2rem;text-decoration:none;vertical-align:middle}.empty{background:#f8f8f8;border-radius:.2rem;padding:4rem;text-align:center}.empty .empty-title{font-size:1.8rem;margin:1.5rem 0 .5rem 0}.empty .empty-meta{color:#888}.empty .empty-action{margin-top:1.5rem}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{-webkit-align-content:flex-start;align-content:flex-start;background:#fff;border:.1rem solid #c5c5c5;border-radius:.2rem;color:#333;display:-ms-flexbox;display:flex;display:-webkit-flex;-ms-flex-line-pack:start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:3.6rem;outline:0;padding:.1rem 0 .1rem .2rem;width:100%}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5764c6;box-shadow:0 0 0 .2rem rgba(87,100,198,.15)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;padding:.3rem;width:auto}.form-autocomplete mark{font-size:1;padding:.1em 0}.avatar{border-radius:50%;color:#fff;display:inline-block;font-size:1.4rem;font-weight:300;height:3.2rem;line-height:1;margin:0;position:relative;vertical-align:middle;width:3.2rem}.avatar.avatar-xs{font-size:1.2rem;height:1.6rem;width:1.6rem}.avatar.avatar-sm{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-lg{font-size:2rem;height:4.8rem;width:4.8rem}.avatar.avatar-xl{font-size:2.8rem;height:6.4rem;width:6.4rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:99}.avatar .avatar-icon{background:#fff;bottom:-.2em;height:50%;padding:5%;position:absolute;right:-.2em;width:50%}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.avatar.avatar-xs[data-initial]::before{-webkit-transform:translate(-50%,-50%) scale(.65);-ms-transform:translate(-50%,-50%) scale(.65);transform:translate(-50%,-50%) scale(.65)}.badge{display:inline-block;position:relative}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5764c6;background-clip:padding-box;border:.1rem solid #fff;border-radius:1rem;color:#fff;content:attr(data-badge);display:inline-block;-webkit-transform:translate(-.4rem,-1rem);-ms-transform:translate(-.4rem,-1rem);transform:translate(-.4rem,-1rem)}.badge[data-badge]::after{font-size:1.2rem;height:2rem;line-height:1.4rem;min-width:2rem;padding:.2rem .5rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:.8rem;min-width:.8rem;padding:0;width:.8rem}.badge.btn::after{position:absolute;right:0;top:0;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.bar{background:#efefef;border-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:1.6rem;width:100%}.bar.bar-sm{height:.4rem}.bar .bar-item{background:#5764c6;color:#fff;display:block;-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;font-size:1.2rem;height:100%;line-height:1;padding:.2rem 0;text-align:center;width:0}.bar .bar-item:first-of-type{border-bottom-left-radius:.2rem;border-top-left-radius:.2rem}.bar .bar-item:last-of-type{border-bottom-right-radius:.2rem;border-top-right-radius:.2rem;-ms-flex-negative:1;-webkit-flex-shrink:1;flex-shrink:1}.card{background:#fff;border:.1rem solid #efefef;border-radius:.2rem;display:block;margin:0;padding:0;text-align:left}.card .card-body,.card .card-footer,.card .card-header{padding:1.5rem 1.5rem 0 1.5rem}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:1.5rem}.card .card-image{padding-top:1.5rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.2rem;border-top-right-radius:.2rem}.card .card-image:last-child img{border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem}.card .card-title{font-size:2rem;line-height:1}.card .card-meta{color:#888;font-size:1.3rem}.chip{-webkit-align-items:center;align-items:center;background:#efefef;border-radius:.2rem;color:#666;display:-ms-inline-flexbox;display:inline-flex;display:-webkit-inline-flex;-ms-flex-align:center;height:3rem;margin:.1rem .2rem .1rem 0;max-width:100%;padding:.3rem .8rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5764c6;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.4rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{-webkit-animation:slide-down .2s;animation:slide-down .2s;display:none;left:0;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}.menu{background:#fff;border-radius:.2rem;box-shadow:0 .1rem .4rem rgba(0,0,0,.3);display:block;margin:0;min-width:18rem;padding:.8rem;text-align:left;-webkit-transform:translateY(.5rem);-ms-transform:translateY(.5rem);transform:translateY(.5rem);z-index:999}.menu .menu-item{border-radius:.2rem;display:block;line-height:2.4rem;margin-top:0;padding:.3rem .8rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item a{border-radius:.2rem;color:inherit;display:block;margin:-.3rem -.8rem;padding:.3rem .8rem;text-decoration:none}.menu .menu-item a:focus,.menu .menu-item a:hover{color:#5764c6}.menu .menu-item a.active,.menu .menu-item a:active{background:#eff1fa;color:#4452c0}.menu .menu-header{color:#ccc;display:block;font-size:1.2rem;line-height:1.8rem;margin-top:0;padding:.2rem .8rem}.menu .menu-header::after{border-bottom:.1rem solid #efefef;content:"";display:block;height:.1rem;-webkit-transform:translateY(-1rem);-ms-transform:translateY(-1rem);transform:translateY(-1rem);width:100%}.menu .menu-header .menu-header-text{background:#fff;display:inline-block;margin-left:-.6rem;padding:0 .6rem;position:relative;z-index:99}.modal{-webkit-align-items:center;align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:1rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;display:-webkit-flex;opacity:1;z-index:1988}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(51,51,51,.5);bottom:0;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{-webkit-animation:slide-down .2s;animation:slide-down .2s;max-width:64rem}.modal.modal-sm .modal-container{max-width:32rem}.modal-container{background:#fff;border-radius:.2rem;box-shadow:0 .1rem .4rem rgba(0,0,0,.3);display:block;margin:0 auto;padding:0;text-align:left;z-index:1988}.modal-container .modal-header{padding:1.5rem}.modal-container .modal-header .modal-title{font-size:1.6rem;margin:0}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:1.5rem;position:relative}.modal-container .modal-footer{padding:1.5rem;text-align:right}.breadcrumb,.nav,.pagination,.tab{list-style:none;margin:.5rem 0}.breadcrumb{padding:1.2rem}.breadcrumb .breadcrumb-item{display:inline-block;margin:0}.breadcrumb .breadcrumb-item:last-child{color:#888}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#c5c5c5;content:"/";padding:0 .4rem}.tab{-webkit-align-items:center;align-items:center;border-bottom:.1rem solid #efefef;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.tab .tab-item{margin-top:0}.tab .tab-item.tab-action{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item a{border-bottom:.2rem solid transparent;color:#333;display:block;margin-bottom:-.1rem;margin-top:0;padding:.6rem 1.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{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;text-align:center}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:-.4rem;top:-.4rem;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.pagination{display:flex;display:-ms-flexbox;display:-webkit-flex}.pagination .page-item{margin:1rem .1rem}.pagination .page-item span{display:inline-block;padding:.6rem .4rem}.pagination .page-item a{border-radius:.2rem;color:#666;display:inline-block;padding:.6rem .8rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5764c6}.pagination .page-item.active a{background:#5764c6;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-webkit-flex:1 0 50%;-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-meta{margin:0;opacity:.5}.nav{display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.nav .nav-item a{color:#666;padding:.6rem .8rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5764c6}.nav .nav-item.active>a{color:#333;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5764c6}.nav .nav{margin-bottom:1rem;margin-left:2rem}.nav .nav a{color:grey}.step{display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.5rem 0;width:100%}.step .step-item{-webkit-flex:1 1 0;-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:2rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5764c6;content:"";height:.2rem;left:-50%;position:absolute;top:.9rem;width:100%}.step .step-item a{color:#888;display:inline-block;padding:2rem 1rem 0;text-decoration:none}.step .step-item a::before{background:#5764c6;border:.2rem solid #fff;border-radius:50%;content:"";display:block;height:1.2rem;left:50%;position:absolute;top:.4rem;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:1.2rem;z-index:99}.step .step-item.active a::before{background:#fff;border:.2rem solid #5764c6}.step .step-item.active~.step-item::before{background:#efefef}.step .step-item.active~.step-item a::before{background:#c5c5c5}.tile{-webkit-align-content:space-between;align-content:space-between;-webkit-align-items:flex-start;align-items:flex-start;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:start;-ms-flex-line-pack:justify;margin:0;padding:.5rem 0}.tile .tile-icon{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:1rem}.tile .tile-content:not(:last-child){padding-right:1rem}.tile .tile-action{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-title{font-size:1.6rem;font-weight:500}.tile .tile-meta{color:#888;font-size:1.3rem}.tile.tile-centered{-webkit-align-items:center;align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.toast{background:rgba(51,51,51,.9);border:.1rem solid #333;border-color:#333;border-radius:.2rem;color:#fff;display:block;padding:1.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-danger{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.tooltip{position:relative}.tooltip::after{background:rgba(51,51,51,.9);border-radius:.2rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:1.2rem;left:50%;line-height:1.6rem;max-width:32rem;opacity:0;overflow:hidden;padding:.6rem 1rem;pointer-events:none;position:absolute;text-overflow:ellipsis;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;white-space:nowrap;z-index:999}.tooltip:focus::after,.tooltip:hover::after{opacity:1;-webkit-transform:translate(-50%,-.5rem);-ms-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;-webkit-transform:translate(0,50%);-ms-transform:translate(0,50%);transform:translate(0,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{-webkit-transform:translate(.5rem,50%);-ms-transform:translate(.5rem,50%);transform:translate(.5rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{-webkit-transform:translate(-50%,.5rem);-ms-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;-webkit-transform:translate(0,50%);-ms-transform:translate(0,50%);transform:translate(0,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{-webkit-transform:translate(-.5rem,50%);-ms-transform:translate(-.5rem,50%);transform:translate(-.5rem,50%)}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.divider{border-bottom:.1rem solid #efefef;display:block;margin:.5rem 0}.loading{color:transparent!important;min-height:1.6rem;pointer-events:none;position:relative}.loading::after{-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear;border:.2rem solid #5764c6;border-radius:.8rem;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:1.6rem;left:50%;margin-left:-.8rem;margin-top:-.8rem;position:absolute;top:50%;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.rel{position:relative}.abs{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.mt-10{margin-top:1rem}.mr-10{margin-right:1rem}.mb-10{margin-bottom:1rem}.ml-10{margin-left:1rem}.mt-5{margin-top:.5rem}.mr-5{margin-right:.5rem}.mb-5{margin-bottom:.5rem}.ml-5{margin-left:.5rem}.pt-10{padding-top:1rem}.pr-10{padding-right:1rem}.pb-10{padding-bottom:1rem}.pl-10{padding-left:1rem}.pt-5{padding-top:.5rem}.pr-5{padding-right:.5rem}.pb-5{padding-bottom:.5rem}.pl-5{padding-left:.5rem}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.flex{display:flex;display:-ms-flexbox;display:-webkit-flex}.inline-flex{display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex}.hide{display:none!important}.visible{visibility:visible}.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:.1rem;margin:-.1rem;overflow:hidden;padding:0;position:absolute;width:.1rem}.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}.hand{cursor:pointer}.shadow{box-shadow:0 .1rem .4rem rgba(0,0,0,.3)}.light-shadow{box-shadow:0 .1rem .2rem rgba(0,0,0,.15)}.rounded{border-radius:.2rem}.circle{border-radius:50%} \ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index 973ecd2..c102e90 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -52,6 +52,9 @@
  • Labels
    • +
  • + Codes +
  • Media
    • @@ -88,21 +91,21 @@
    H5 Title 2rem
    H6 Title 1.6rem
    + -
    -<h1>H1 Title</h1>
-<h2>H2 Title <small class="label">4rem</small></h2>
-
    +
    <h1>H1 Title</h1>
+<h2>H2 Title <small class="label">4rem</small></h2>
+

    Paragraphs

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

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

    + -
    -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
-
    +
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+

    Semantic text elements

    @@ -182,6 +185,7 @@ <var>
    +

    Optimized for east asian fonts

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

    @@ -197,24 +201,25 @@

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

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

    Blockquote

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    - Source
    + -
    -<blockquote>
+
    <blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <cite>- Source</cite>
-</blockquote>
-
    
+</blockquote>
+
    +

    Lists

    @@ -254,9 +259,9 @@
    + -
    -<!-- unordered list -->
+
    <!-- unordered list -->
 <ul>
   <li>list item 1</li>
   <li>list item 2
@@ -273,8 +278,9 @@
 <dl>
   <dt>description list term</dt>
   <dd>description list description</dd>
-</dl>
-
    
+</dl>
+
    +
    @@ -317,9 +323,9 @@

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

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

    + -
    -<table class="table table-striped table-hover">
+
    <table class="table table-striped table-hover">
   <thead>
     <tr>
       <th>name</th>
@@ -334,8 +340,9 @@
       <td>14 October 1994</td>
     </tr>
   </tbody>
-</table>
-
    
+</table>
+
    +
    @@ -368,15 +375,16 @@

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

    + -
    -<button class="btn">default button</button>
+
    <button class="btn">default button</button>
 <button class="btn btn-primary">primary button</button>
 <button class="btn btn-link">link button</button>
 
 <!-- a button with loading state -->
-<button class="btn loading">button</button>
-
    
+<button class="btn loading">button</button>
+
    +

    Add the class disabled or the attribute disabled for a disabled button.

    @@ -414,16 +422,17 @@

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

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

    + -
    -<button class="btn btn-lg">large button</button>
+
    <button class="btn btn-lg">large button</button>
 <button class="btn btn-sm">small button</button>
 
 <button class="btn btn-block">block button</button>
 
 <button class="btn btn-action"><i class="icon icon-markunread"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-markunread"></i></button>
-
    
+<button class="btn btn-action circle"><i class="icon icon-markunread"></i></button>
+
    +
    @@ -434,12 +443,13 @@

    Icons with the class icon can be correctly rendered in each button size.

    + -
    -<button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button>
+
    <button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button>
 <button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button>
-<button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>
-
    
+<button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>
+
    +

    Button groups

    @@ -476,14 +486,15 @@

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

    + -
    -<div class="btn-group btn-group-block">
+
    <div class="btn-group btn-group-block">
   <button class="btn">first button</button>
   <button class="btn">second button</button>
   <button class="btn">third button</button>
-</div>
-
    
+</div>
+
    +
    @@ -544,9 +555,9 @@
    + -
    -<form>
+
    <form>
   <!-- form input control -->
   <div class="form-group">
     <label class="form-label" for="input-example-1">Name</label>
@@ -592,8 +603,9 @@
       <i class="form-icon"></i> Remember me
     </label>
   </div>
-</form>
-
    
+</form>
+
    +

    You can use :indeterminate pseudo class for indeterminate state of checkboxes.

    If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout.

    @@ -678,9 +690,9 @@
    + -
    -<form class="form-horizontal">
+
    <form class="form-horizontal">
   <div class="form-group">
     <div class="col-3">
       <label class="form-label" for="input-example-1">Name</label>
@@ -690,8 +702,9 @@
     </div>
   </div>
   <!-- form structure -->
-</form>
-
    
+</form>
+
    +
    @@ -809,9 +822,9 @@
    + -
    -<form>
+
    <form>
   <!-- form validation class: has-success -->
   <div class="form-group has-success">
     <label class="form-label" for="input-example-1">Name</label>
@@ -825,8 +838,9 @@
     <input class="form-input is-success" type="text" id="input-example-1" placeholder="Name" />
     <p class="form-input-hint">The name is invaild.</p>
   </div>
-</form>
-
    
+</form>
+
    +

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

    @@ -905,9 +919,9 @@

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

    + -
    -<!-- normal input group -->
+
    <!-- normal input group -->
 <div class="input-group">
   <span class="input-group-addon">slack.com/</span>
   <input type="text" class="form-input" placeholder="site name" />
@@ -924,8 +938,9 @@
   <span class="input-group-addon">slack.com/</span>
   <input type="text" class="form-input" placeholder="site name" />
   <button class="btn btn-primary input-group-btn">Submit</button>
-</div>
-
    
+</div>
+
    +
    @@ -944,11 +959,25 @@

    Add the class label to <span> or <small> elements. You can add another class label-primary, label-success and label-danger for a primary colored label.

    + -
    -<span class="label">default label</span>
-<span class="label label-primary">primary label</span>
-
    +
    <span class="label">default label</span>
+<span class="label label-primary">primary label</span>
+
    + +
    + +
    +

    Codes

    +
    +

    Codes are inline and multiline code snippets blocks.

    +
    + + +
    <pre class="code" data-lang="HTML"><code><!-- code snippets -->
+</code></pre>
+
    +
    @@ -962,9 +991,10 @@ macOS El Capitan Wallpaper -
    -<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
-
    + +
    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
+
    +

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

    @@ -976,12 +1006,12 @@ -
    -<figure class="figure">
+
+
    <figure class="figure">
   <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
   <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
-</figure>
-
    
+</figure>
+

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

    @@ -995,11 +1025,11 @@ -
    -<div class="video-responsive">
+
    <div class="video-responsive">
   <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
-</div>
-
    
+</div>
+
    +
    diff --git a/docs/experimentals.html b/docs/experimentals.html index 38b99d0..336cb1d 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -112,10 +112,11 @@

    + -
    -<progress class="progress" value="25" max="100"></progress>
-
    +
    <progress class="progress" value="25" max="100"></progress>
+
    +
    @@ -131,10 +132,11 @@

    + -
    -<input class="slider" type="range" min="0" max="100" value="50" />
-
    +
    <input class="slider" type="range" min="0" max="100" value="50" />
+
    +
    diff --git a/docs/index.html b/docs/index.html index 51c5e2b..f1463ac 100644 --- a/docs/index.html +++ b/docs/index.html @@ -132,26 +132,29 @@

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

    Download Spectre.css

    Install with NPM
    + -
    -$ npm install spectre.css --save
-
    +
    $ npm install spectre.css --save
+
    +
    Install with Yarn
    + -
    -$ yarn add spectre.css
-
    +
    $ yarn add spectre.css
+
    +
    Install with Bower
    + -
    -$ bower install spectre.css --save
-
    +
    $ bower install spectre.css --save
+
    +

    And include it in your website or Web app <head>

    -
    -<link rel="stylesheet" href="dist/spectre.min.css" />
-
    +
    <link rel="stylesheet" href="dist/spectre.min.css" />
+
    +
    diff --git a/docs/layout.html b/docs/layout.html index a0e96ed..ced292a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -158,8 +158,7 @@ -
    -<div class="container">
+
    <div class="container">
   <div class="columns">
     <div class="column col-6">col-6</div>
     <div class="column col-3">col-3</div>
@@ -171,8 +170,8 @@
     <div class="column col-6">col-6</div>
     <div class="column col-6">col-6</div>
   </div>
-</div>
-
    
+</div>
+
    @@ -227,15 +226,14 @@ -
    -<div class="container">
+
    <div class="container">
   <div class="columns">
     <div class="column col-xs-6">col-xs-6</div>
     <div class="column col-xs-3">col-xs-3</div>
     <div class="column col-xs-3">col-xs-3</div>
   </div>
-</div>
-
    
+</div>
+

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

    @@ -280,8 +278,7 @@
    -
    -<header class="navbar">
+
    <header class="navbar">
   <section class="navbar-section">
     <a href="#" class="navbar-brand">
       <i class="icon icon-pages"></i> Spectre.css
@@ -295,8 +292,8 @@
       <button class="btn btn-primary input-group-btn">Search</button>
     </div>
   </section>
-</header>
-
    
+</header>
+
    @@ -331,14 +328,14 @@ -
    -<div class="empty">
+
    <div class="empty">
   <i class="icon icon-people"></i>
   <p class="empty-title">You have no new messages</p>
   <p class="empty-meta">Click the button to start a conversation.</p>
   <button class="empty-action btn btn-primary">Send a message</button>
-</div>
-
    
+</div>
+
    +
    diff --git a/docs/utilities.html b/docs/utilities.html index c520c87..751b790 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -73,9 +73,9 @@

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

    + -
    -<!-- clear float -->
+
    <!-- clear float -->
 <div class="clearfix"></div>
 <!-- float: left and right -->
 <div class="float-left"></div>
@@ -91,8 +91,9 @@
 <div class="mt-5"></div>
 <!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
 <div class="pt-10"></div>
-<div class="pt-5"></div>
-
    
+<div class="pt-5"></div>
+
    +
    @@ -100,9 +101,9 @@

    Display utilities are used for display and hidden things.

    + -
    -<!-- display: block; -->
+
    <!-- display: block; -->
 <div class="block"></div>
 <!-- display: inline; -->
 <div class="inline"></div>
@@ -119,8 +120,9 @@
 <!-- visibility: hidden; -->
 <div class="invisible"></div>
 <!-- hide text contents -->
-<div class="text-hide"></div>
-
    
+<div class="text-hide"></div>
+
    +
    @@ -128,9 +130,9 @@

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

    + -
    -<!-- left-aligned text -->
+
    <!-- left-aligned text -->
 <div class="text-left"></div>
 <!-- center-aligned text -->
 <div class="text-center"></div>
@@ -160,21 +162,23 @@
 <!-- Overflow behavior: truncate the text -->
 <div class="text-clip"></div>
 <!-- Text may be broken at arbitrary points -->
-<div class="text-break"></div>
-
    
+<div class="text-break"></div>
+
    +

    Shape utilities are used for change element shapes.

    + -
    -<!-- rounded element -->
+
    <!-- rounded element -->
 <div class="rounded"></div>
 <!-- circle element -->
-<div class="circle"></div>
-
    
+<div class="circle"></div>
+
    +
    @@ -187,11 +191,12 @@
    + -
    -<!-- divider element -->
-<div class="divider"></div>
-
    +
    <!-- divider element -->
+<div class="divider"></div>
+
    +
    @@ -204,11 +209,12 @@
    + -
    -<!-- loading element -->
-<div class="loading"></div>
-
    +
    <!-- loading element -->
+<div class="loading"></div>
+
    +
    -- cgit v1.3.1-23-gd82d