Summary Files Commits Branches @commit @diff @stats
diff options
context:
space:
mode:
Commit7cb9a15ba2c586be9aaf69b18dd472e4592cd5be (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-02-24 18:50:58 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2017-02-24 18:50:58 +0800
Files84e9f353c9a66ea9cb8e43363ece37fa315816e8
Spectre-Dark-Gruvbox-7cb9a15ba2c586be9aaf69b18dd472e4592cd5be.tar
Spectre-Dark-Gruvbox-7cb9a15ba2c586be9aaf69b18dd472e4592cd5be.tar.gz
Spectre-Dark-Gruvbox-7cb9a15ba2c586be9aaf69b18dd472e4592cd5be.zip
Parent1f9f807534108fe3412e1c2e7bf9d21e19e78f0d (diff)
CHG: Fix GItHub site CSS
10 files changed, 2893 insertions, 3063 deletions
-rw-r--r--docs/components.html4
-rw-r--r--docs/css/docs.css218
-rw-r--r--docs/css/docs.min.css1
-rw-r--r--docs/css/spectre.css2663
-rw-r--r--docs/elements.html4
-rw-r--r--docs/index.html4
-rw-r--r--docs/layout.html4
-rw-r--r--docs/utilities.html4
-rw-r--r--gulpfile.js10
-rw-r--r--index.html3044
diff --git a/docs/components.html b/docs/components.html
index 50f4f5e..36d52b7 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -7,8 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="https://github.com/picturepan2/" />
<title>Components - Spectre.css</title>
- <link rel="stylesheet" href="../dist/spectre.css" />
- <link rel="stylesheet" href="css/docs.min.css" />
+ <link rel="stylesheet" href="css/spectre.css" />
+ <link rel="stylesheet" href="css/docs.css" />
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
diff --git a/docs/css/docs.css b/docs/css/docs.css
new file mode 100644
index 0000000..123ec31
--- /dev/null
+++ b/docs/css/docs.css
@@ -0,0 +1,218 @@
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
+/* Spectre version */
+.version::after {
+ content: "0.2.1";
+}
+/* Spectre docs style */
+.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: 5rem;
+}
+.grid-hero h2 u {
+ border-bottom: .2rem solid #666;
+ padding-bottom: .1rem;
+ text-decoration: none;
+}
+.grid-hero .card {
+ background: none;
+ 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:hover,
+.grid-header .btn:focus,
+.grid-header .btn:active {
+ 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 h3,
+.docs-content h4,
+.docs-content h5 {
+ 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: 6rem 0;
+ }
+ .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 .216s ease, -webkit-transform .216s ease;
+ transition: transform .216s ease;
+ transition: -webkit-transform .216s ease;
+ width: 24rem;
+ z-index: 999;
+ }
+ .docs-sidebar:target {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+ .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/docs.min.css b/docs/css/docs.min.css
deleted file mode 100644
index c7370e7..0000000
--- a/docs/css/docs.min.css
+++ /dev/null
@@ -1 +0,0 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.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:5rem}.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}.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 h3,.docs-content h4,.docs-content h5{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:6rem 0}.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 .216s ease,-webkit-transform .216s ease;transition:transform .216s ease;transition:-webkit-transform .216s ease;width:24rem;z-index:999}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.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.css b/docs/css/spectre.css
new file mode 100644
index 0000000..2f2adf8
--- /dev/null
+++ b/docs/css/spectre.css
@@ -0,0 +1,2663 @@
+/*! Spectre.css | MIT License | github.com/picturepan2/spectre */
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ * IE on Windows Phone and in iOS.
+ */
+/* Document
+ ========================================================================== */
+html {
+ font-family: sans-serif;
+ /* 1 */
+ line-height: 1.15;
+ /* 3 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */
+ -ms-text-size-adjust: 100%;
+ /* 3 */
+}
+/* Sections
+ ========================================================================== */
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+body {
+ margin: 0;
+}
+/**
+ * Add the correct display in IE 9-.
+ */
+article,
+aside,
+footer,
+header,
+nav,
+section {
+ display: block;
+}
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+ font-size: 2em;
+ margin: .67em 0;
+}
+/* Grouping content
+ ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+figcaption,
+figure,
+main {
+ /* 1 */
+ display: block;
+}
+/**
+ * Add the correct margin in IE 8 (removed).
+ */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+ box-sizing: content-box;
+ /* 1 */
+ height: 0;
+ /* 1 */
+ overflow: visible;
+ /* 2 */
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+/* Text-level semantics
+ ========================================================================== */
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+a {
+ background-color: transparent;
+ /* 1 */
+ -webkit-text-decoration-skip: objects;
+ /* 2 */
+}
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+a:active,
+a:hover {
+ outline-width: 0;
+}
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
+ */
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+b,
+strong {
+ font-weight: inherit;
+}
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+ font-weight: bolder;
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */
+}
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+dfn {
+ font-style: italic;
+}
+/**
+ * Add the correct background and color in IE 9-. (Removed)
+ */
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+ font-size: 80%;
+}
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -.25em;
+}
+sup {
+ top: -.5em;
+}
+/* Embedded content
+ ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+audio,
+video {
+ display: inline-block;
+}
+/**
+ * Add the correct display in iOS 4-7.
+ */
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+img {
+ border-style: none;
+}
+/**
+ * Hide the overflow in IE.
+ */
+svg:not(:root) {
+ overflow: hidden;
+}
+/* Forms
+ ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ /* 1 (changed) */
+ font-size: inherit;
+ /* 1 (changed) */
+ line-height: inherit;
+ /* 1 (changed) */
+ margin: 0;
+ /* 2 */
+}
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+ /* 2 */
+}
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+/**
+ * Restore the focus styles unset by the previous rule (removed).
+ */
+/**
+ * Change the border, margin, and padding in all browsers (opinionated) (changed).
+ */
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+legend {
+ box-sizing: border-box;
+ /* 1 */
+ color: inherit;
+ /* 2 */
+ display: table;
+ /* 1 */
+ max-width: 100%;
+ /* 1 */
+ padding: 0;
+ /* 3 */
+ white-space: normal;
+ /* 1 */
+}
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+ display: inline-block;
+ /* 1 */
+ vertical-align: baseline;
+ /* 2 */
+}
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+textarea {
+ overflow: auto;
+}
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box;
+ /* 1 */
+ padding: 0;
+ /* 2 */
+}
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+/* Interactive
+ ========================================================================== */
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+details,
+menu {
+ display: block;
+}
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+ display: list-item;
+}
+/* Scripting
+ ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+canvas {
+ display: inline-block;
+}
+/**
+ * Add the correct display in IE.
+ */
+template {
+ display: none;
+}
+/* Hidden
+ ========================================================================== */
+/**
+ * Add the correct display in IE 10-.
+ */
+[hidden] {
+ display: none;
+}
+*,
+*::before,
+*::after {
+ 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,
+.toast .icon,
+.menu .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 .2rem;
+ 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;
+}
+ul,
+ol {
+ margin: 2rem 0 2rem 2rem;
+ padding: 0;
+}
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+ margin: 1.5rem 0 1.5rem 2rem;
+}
+ul li,
+ol 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: bold;
+}
+dl dd {
+ margin: .5rem 0 1.5rem 0;
+}
+mark {
+ background: #ffe9b3;
+ border-radius: .2rem;
+ padding: .1em .3em;
+ vertical-align: baseline;
+}
+kbd {
+ background: #333;
+ border-radius: .2rem;
+ color: #fff;
+ padding: .1em .3em;
+ vertical-align: baseline;
+}
+abbr[title] {
+ border-bottom: .1rem dotted;
+ cursor: help;
+ text-decoration: none;
+}
+code {
+ background: #efefef;
+ border-radius: .2rem;
+ color: #666;
+ padding: .1em .3em;
+ vertical-align: baseline;
+}
+pre {
+ background: #f9f9f9;
+ line-height: 1.8rem;
+ margin-bottom: 1em;
+ margin-top: 1em;
+ overflow: auto;
+ padding: 2rem 2.5rem;
+ position: relative;
+}
+pre > code {
+ background: transparent;
+ border-left: 0;
+ line-height: 1.8rem;
+ 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),
+.cjk {
+ 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;
+}
+:lang(zh) ins,
+:lang(ja) ins,
+.cjk ins,
+:lang(zh) u,
+:lang(ja) u,
+.cjk u {
+ border-bottom: .1rem solid;
+ text-decoration: none;
+}
+:lang(zh) del + del,
+:lang(ja) del + del,
+.cjk del + del,
+:lang(zh) del + s,
+:lang(ja) del + s,
+.cjk del + s,
+:lang(zh) ins + ins,
+:lang(ja) ins + ins,
+.cjk ins + ins,
+:lang(zh) ins + u,
+:lang(ja) ins + u,
+.cjk ins + u,
+:lang(zh) s + del,
+:lang(ja) s + del,
+.cjk s + del,
+:lang(zh) s + s,
+:lang(ja) s + s,
+.cjk s + s,
+:lang(zh) u + ins,
+:lang(ja) u + ins,
+.cjk u + ins,
+:lang(zh) u + u,
+:lang(ja) u + u,
+.cjk u + u {
+ margin-left: .125em;
+}
+.table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ text-align: left;
+ width: 100%;
+}
+.table.table-striped tbody tr:nth-of-type(odd) {
+ background: #f8f8f8;
+}
+.table.table-hover tbody tr:hover {
+ background: #f0f0f0;
+}
+.table tbody tr.active,
+.table.table-striped tbody tr.active {
+ background: #f0f0f0;
+}
+.table th,
+.table td {
+ 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: 1.6rem;
+ padding: .7rem 1.2rem;
+ text-align: center;
+ text-decoration: none;
+ transition: all .15s 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: transparent;
+ 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;
+ line-height: 1.4rem;
+ padding: .4rem .8rem;
+}
+.btn.btn-lg {
+ font-size: 1.8rem;
+ height: 4.2rem;
+ line-height: 2rem;
+ padding: 1rem 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: transparent;
+ border: 0;
+ color: currentColor;
+ font-family: sans-serif;
+ height: 2rem;
+ line-height: 1.8rem;
+ 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";
+ 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:hover,
+.btn-group .btn:focus,
+.btn-group .btn:active,
+.btn-group .btn.active {
+ 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 .15s 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;
+}
+.has-success .form-input,
+.form-input.is-success {
+ border-color: #32b643;
+}
+.has-danger .form-input,
+.form-input.is-danger {
+ 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;
+}
+.has-success .form-select,
+.form-select.is-success {
+ border-color: #32b643;
+}
+.has-danger .form-select,
+.form-select.is-danger {
+ 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: none;
+ padding: 0;
+ position: absolute;
+ top: .5rem;
+ transition: all .15s 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: .3rem 2rem .3rem 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: none;
+ padding: 0;
+ position: absolute;
+ top: .4rem;
+ 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 .15s 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;
+}
+.label {
+ background: #efefef;
+ border-radius: .2rem;
+ color: #888;
+ padding: .1em .3em;
+ vertical-align: baseline;
+}
+.label.label-primary {
+ background: #5764c6;
+ color: #fff;
+}
+.label.label-success {
+ background: #32b643;
+ color: #fff;
+}
+.label.label-danger {
+ background: #e85600;
+ color: #fff;
+}
+.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;
+}
+.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%;
+ /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+}
+.video-responsive iframe,
+.video-responsive object,
+.video-responsive embed {
+ 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%;
+ /* 4:3 */
+}
+.video-responsive-1-1::before {
+ padding-bottom: 100%;
+ /* 1:1 */
+}
+.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-12,
+.column.col-11,
+.column.col-10,
+.column.col-9,
+.column.col-8,
+.column.col-7,
+.column.col-6,
+.column.col-5,
+.column.col-4,
+.column.col-3,
+.column.col-2,
+.column.col-1 {
+ -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-12,
+ .col-xl-11,
+ .col-xl-10,
+ .col-xl-9,
+ .col-xl-8,
+ .col-xl-7,
+ .col-xl-6,
+ .col-xl-5,
+ .col-xl-4,
+ .col-xl-3,
+ .col-xl-2,
+ .col-xl-1 {
+ -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-12,
+ .col-lg-11,
+ .col-lg-10,
+ .col-lg-9,
+ .col-lg-8,
+ .col-lg-7,
+ .col-lg-6,
+ .col-lg-5,
+ .col-lg-4,
+ .col-lg-3,
+ .col-lg-2,
+ .col-lg-1 {
+ -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-12,
+ .col-md-11,
+ .col-md-10,
+ .col-md-9,
+ .col-md-8,
+ .col-md-7,
+ .col-md-6,
+ .col-md-5,
+ .col-md-4,
+ .col-md-3,
+ .col-md-2,
+ .col-md-1 {
+ -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-12,
+ .col-sm-11,
+ .col-sm-10,
+ .col-sm-9,
+ .col-sm-8,
+ .col-sm-7,
+ .col-sm-6,
+ .col-sm-5,
+ .col-sm-4,
+ .col-sm-3,
+ .col-sm-2,
+ .col-sm-1 {
+ -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-12,
+ .col-xs-11,
+ .col-xs-10,
+ .col-xs-9,
+ .col-xs-8,
+ .col-xs-7,
+ .col-xs-6,
+ .col-xs-5,
+ .col-xs-4,
+ .col-xs-3,
+ .col-xs-2,
+ .col-xs-1 {
+ -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%;
+ }
+}
+.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 {
+ margin: .4rem 0;
+}
+@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;
+ padding-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: .8rem;
+ height: 1.6rem;
+ width: 1.6rem;
+}
+.avatar.avatar-sm {
+ font-size: 1rem;
+ height: 2.4rem;
+ width: 2.4rem;
+}
+.avatar.avatar-lg {
+ font-size: 2rem;
+ height: 4.8rem;
+ width: 4.8rem;
+}
+.avatar.avatar-xl {
+ font-size: 2.6rem;
+ 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]::after {
+ 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: 0;
+}
+.badge {
+ position: relative;
+}
+.badge[data-badge]::after,
+.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(-.2rem, -.8rem);
+ -ms-transform: translate(-.2rem, -.8rem);
+ transform: translate(-.2rem, -.8rem);
+}
+.badge[data-badge]::after {
+ font-size: 1.1rem;
+ height: 1.8rem;
+ line-height: 1.2rem;
+ min-width: 1.8rem;
+ padding: .2rem .4rem;
+ text-align: center;
+ white-space: nowrap;
+}
+.badge:not([data-badge])::after,
+.badge[data-badge=""]::after {
+ height: .8rem;
+ min-width: .8rem;
+ padding: 0;
+ width: .8rem;
+}
+.card {
+ background: #fff;
+ border: .1rem solid #efefef;
+ border-radius: .2rem;
+ display: block;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+}
+.card .card-header,
+.card .card-body,
+.card .card-footer {
+ padding: 1.5rem 1.5rem 0 1.5rem;
+}
+.card .card-header:last-child,
+.card .card-body:last-child,
+.card .card-footer: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: .5rem .8rem;
+ text-decoration: none;
+ vertical-align: middle;
+}
+.chip.active {
+ background: #5764c6;
+ color: #fff;
+}
+.chip .avatar {
+ font-size: 1rem;
+ height: 2rem;
+ margin-right: .4rem;
+ width: 2rem;
+}
+.chip .chip-meta {
+ background: rgba(0, 0, 0, .1);
+ font-size: 80%;
+ height: 3rem;
+ line-height: 2rem;
+ margin-left: .8rem;
+ margin-right: -.8rem;
+ opacity: .75;
+ padding: .5rem .8rem;
+}
+.chip .btn-clear::before {
+ font-size: 1.6rem;
+}
+.dropdown {
+ position: relative;
+}
+.dropdown .menu {
+ -webkit-animation: slide-down .216s;
+ animation: slide-down .216s;
+ display: none;
+ left: 0;
+ position: absolute;
+ top: 100%;
+}
+.dropdown.active .menu,
+.dropdown .dropdown-toggle:focus + .menu,
+.dropdown .menu:hover {
+ 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;
+ -ms-grid-row-align: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ left: 0;
+ opacity: 0;
+ overflow: hidden;
+ padding: 1rem;
+ position: fixed;
+ right: 0;
+ top: 0;
+}
+.modal:target,
+.modal.active {
+ display: flex;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ opacity: 1;
+ z-index: 1988;
+}
+.modal:target .modal-overlay,
+.modal.active .modal-overlay {
+ background: rgba(51, 51, 51, .5);
+ bottom: 0;
+ display: block;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.modal:target .modal-container,
+.modal.active .modal-container {
+ -webkit-animation: slide-down .216s;
+ animation: slide-down .216s;
+ 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,
+.tab,
+.pagination,
+.nav {
+ 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 .8rem;
+ text-decoration: none;
+}
+.tab .tab-item a:focus,
+.tab .tab-item a:hover {
+ color: #5764c6;
+}
+.tab .tab-item a.badge {
+ padding-right: 0;
+}
+.tab .tab-item.active a,
+.tab .tab-item a.active {
+ 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: -1.4rem;
+ top: 1rem;
+ -webkit-transform: translate(-50%, -1rem);
+ -ms-transform: translate(-50%, -1rem);
+ transform: translate(-50%, -1rem);
+}
+.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-prev,
+.pagination .page-item.page-next {
+ -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: bold;
+}
+.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: #808080;
+}
+.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;
+ -ms-grid-row-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:hover,
+.toast a:focus,
+.toast a:active {
+ 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: all .216s ease;
+ white-space: nowrap;
+ z-index: 99;
+}
+.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(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes loading {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 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 500ms infinite linear;
+ animation: loading 500ms 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: transparent;
+ 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: normal;
+}
+.text-bold {
+ font-weight: bold;
+}
+.text-italic {
+ font-style: italic;
+}
+.text-large {
+ font-size: 1.2em;
+}
+.text-ellipsis {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.text-clip {
+ overflow: hidden;
+ text-overflow: clip;
+ white-space: nowrap;
+}
+.text-break {
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ 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 f476084..8082ab7 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -7,8 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="https://github.com/picturepan2/" />
<title>Elements - Spectre.css</title>
- <link rel="stylesheet" href="../dist/spectre.css" />
- <link rel="stylesheet" href="css/docs.min.css" />
+ <link rel="stylesheet" href="css/spectre.css" />
+ <link rel="stylesheet" href="css/docs.css" />
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
diff --git a/docs/index.html b/docs/index.html
index 562bd90..c3a7140 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,8 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="https://github.com/picturepan2/" />
<title>Spectre.css - The lightweight, responsive and modern CSS framework</title>
- <link rel="stylesheet" href="../dist/spectre.css" />
- <link rel="stylesheet" href="css/docs.min.css" />
+ <link rel="stylesheet" href="css/spectre.css" />
+ <link rel="stylesheet" href="css/docs.css" />
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
diff --git a/docs/layout.html b/docs/layout.html
index 722a1f4..5c3b472 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -7,8 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="https://github.com/picturepan2/" />
<title>Layout - Spectre.css</title>
- <link rel="stylesheet" href="../dist/spectre.css" />
- <link rel="stylesheet" href="css/docs.min.css" />
+ <link rel="stylesheet" href="css/spectre.css" />
+ <link rel="stylesheet" href="css/docs.css" />
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
diff --git a/docs/utilities.html b/docs/utilities.html
index da476ee..dbeb98d 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -7,8 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="https://github.com/picturepan2/" />
<title>Utilities - Spectre.css </title>
- <link rel="stylesheet" href="../dist/spectre.css" />
- <link rel="stylesheet" href="css/docs.min.css" />
+ <link rel="stylesheet" href="css/spectre.css" />
+ <link rel="stylesheet" href="css/docs.css" />
<link rel="stylesheet" href="font/style.css" />
</head>
<body>
diff --git a/gulpfile.js b/gulpfile.js
index a084646..798ced7 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -27,18 +27,12 @@ gulp.task('build', function() {
});
gulp.task('docs', function() {
- gulp.src('docs/**/*.less')
+ gulp.src(['./docs/css/*.less', './*.less'])
.pipe(less({
plugins: [autoprefix]
}))
.pipe(csscomb())
- .pipe(cleancss())
- .pipe(rename({
- suffix: '.min'
- }))
- .pipe(gulp.dest(function(file) {
- return file.base;
- }))
+ .pipe(gulp.dest('./docs/css'))
});
gulp.task('default', ['build']);
diff --git a/index.html b/index.html
deleted file mode 100644
index 0ef74b7..0000000
--- a/index.html
+++ /dev/null
@@ -1,3044 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <meta name="robots" content="index, follow" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="author" content="https://github.com/picturepan2/" />
- <title>Spectre.css - a lightweight, responsive and modern CSS framework</title>
- <link rel="stylesheet" href="dist/spectre.css" />
- <link rel="stylesheet" href="demo/font/style.css" />
- <style>
- header > h4,
- header > h5 {
- margin-top: 4rem;
- margin-bottom: 2rem;
- }
- .bg-grey {
- background-color: #efefef;
- padding: 1rem .5rem;
- border-radius: .2rem;
- }
- .navbar-brand {
- font-size: 2rem;
- font-weight: bold;
- padding-right: 2rem;
- text-decoration: none;
- vertical-align: middle;
- }
- .navbar-brand .icon {
- font-size: 1.3333em;
- line-height: .8em;
- margin-right: .2rem;
- vertical-align: -20%;
- }
- .grid-hero {
- margin-top: 10rem;
- margin-bottom: 10rem;
- }
- .grid-hero h3 {
- margin-bottom: 5rem;
- }
- .grid-hero .notes {
- margin: 4rem 0;
- }
- .grid-footer {
- color: #888;
- margin-top: 4rem;
- margin-bottom: 4rem;
- }
- .grid-footer a {
- color: #666;
- }
- .container header {
- padding-top: 3rem;
- }
- .notes {
- margin: 4rem 0;
- 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;
- }
- </style>
-</head>
-<body>
- <section class="section bg-grey">
- <section id="overview" class="grid-hero container grid-960">
- <header class="text-center"><h3>Spectre.css</h3></header>
- <section>
- <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
- <ul>
- <li>lightweight and clean starting point for your project and prototype</li>
- <li>flexbox, responsive and mobile-friendly layout</li>
- <li>carefully designed elements</li>
- <li>built in useful components and utilities</li>
- <li>responsive email templates <span class="label label-primary">soon</span></li>
- </ul>
- </section>
- <section class="notes text-center">
- <div class="btn-group">
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub Repo</a>
- <a href="#getting-started" class="btn btn-primary">Documentation</a>
- </div>
- </section>
- </section>
- </section>
- <section class="section">
- <section id="getting-started" class="container grid-960">
- <header class="text-center"><h4>getting started</h4></header>
- <section class="notes">
- <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p>
- <h5>Install manually</h5>
- <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 30KB):</p>
- <p><a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
- <h5>Install with NPM</h5>
- <!-- install with npm example -->
-<pre class="code lang-html">
-<span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save
-</pre>
- <h5>Install with Bower</h5>
- <!-- install with bower example -->
-<pre class="code lang-html">
-<span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
-</pre>
- <p>And include it in your website or Web app <code>&lt;head&gt;</code></p>
- <!-- install manually example -->
-<pre class="code lang-html">
-&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;dist/spectre.min.css&quot;</span> /&gt;
-</pre>
-
- </section>
- </section>
-
- <section id="compiling" class="container grid-960">
- <header class="text-center"><h4>compiling custom version</h4></header>
- <section class="notes">
- <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>.</p>
- <p>Then, you can build the CSS file from the command line:</p>
- <ol>
- <li>Navigate to the root directory of Spectre where you can find <code>package.json</code> file.</li>
- <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
- <li>When completed, run <code>gulp build</code> to compile LESS to CSS and minify files.</li>
- <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
- </ol>
- <p>You can watch file changes and rebuild CSS files by using <code>gulp watch</code>.</p>
- </section>
- </section>
-
- <section id="elements" class="container grid-960">
- <section class="notes text-center">
- <ul class="tab inline-flex">
- <li class="tab-item active">
- <a href="#elements">
- elements
- </a>
- </li>
- <li class="tab-item">
- <a href="#layout">
- layout
- </a>
- </li>
- <li class="tab-item">
- <a href="#components">
- components
- </a>
- </li>
- <li class="tab-item">
- <a href="#utilities">
- utilities
- </a>
- </li>
- </ul>
- </section>
- <section class="notes text-center">
- <div class="btn-group">
- <a href="#typography" class="btn btn-primary">typography</a>
- <a href="#tables" class="btn btn-primary">tables</a>
- <a href="#buttons" class="btn btn-primary">buttons</a>
- <a href="#forms" class="btn btn-primary">forms</a>
- <a href="#labels" class="btn btn-primary">labels</a>
- <a href="#media" class="btn btn-primary">media</a>
- </div>
- </section>
- </section>
-
- <section id="typography" class="container grid-960">
- <header class="text-center"><h4>typography</h4></header>
- <section class="notes">
- <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements. </p>
- </section>
-
- <header class="text-center"><h5>headings</h5></header>
- <h1>H1 Title <small class="label">5rem</small></h1>
- <h2>H2 Title <small class="label">4rem</small></h2>
- <h3>H3 Title <span class="label">3rem</span></h3>
- <h4>H4 Title <span class="label">2.4rem</span></h4>
- <h5>H5 Title <span class="label">2rem</span></h5>
- <h6>H6 Title <span class="label">1.6rem</span></h6>
-
- <!-- headings example -->
-<pre class="code lang-html">
-&lt;<span class="tag">h1</span>&gt;H1 Title&lt;<span class="tag">/h1</span>&gt;
-&lt;<span class="tag">h2</span>&gt;H2 Title &lt;<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;4rem&lt;<span class="tag">/small</span>&gt;&lt;<span class="tag">/h2</span>&gt;
-</pre>
-
- <header class="text-center"><h5>paragraphs</h5></header>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#typography">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
- <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
-
- <!-- headings example -->
-<pre class="code lang-html">
-&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;dictum in vehicula sit amet&lt;<span class="tag">/a</span>&gt;, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.&lt;<span class="tag">/p</span>&gt;
-</pre>
-
- <header class="text-center"><h5>semantic text elements</h5></header>
- <div class="columns">
- <div class="column col-3 col-xs-12">
- <abbr title="Internationalization">I18N</abbr>
- <code class="ml-10">&lt;abbr&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <strong>Bold</strong>
- <code class="ml-10">&lt;strong&gt;</code> <code>&lt;b&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <cite>Citation</cite>
- <code class="ml-10">&lt;cite&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <code>Hello World!</code>
- <code class="ml-10">&lt;code&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <del>Deleted</del>
- <code class="ml-10">&lt;del&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <em>Emphasis</em>
- <code class="ml-10">&lt;em&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <i>Italic</i>
- <code class="ml-10">&lt;i&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <ins>Inserted</ins>
- <code class="ml-10">&lt;ins&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <kbd>Ctrl + S</kbd>
- <code class="ml-10">&lt;kbd&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <mark>Highlighted</mark>
- <code class="ml-10">&lt;mark&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <ruby>
- 漢 <rt>kan</rt>
- 字 <rt>ji</rt>
- </ruby>
- <code class="ml-10">&lt;ruby&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <s>Strikethrough</s>
- <code class="ml-10">&lt;s&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <samp>Sample</samp>
- <code class="ml-10">&lt;samp&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- Text <sub>Subscripted</sub>
- <code class="ml-10">&lt;sub&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- Text <sup>Superscripted</sup>
- <code class="ml-10">&lt;sup&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <time>20:00</time>
- <code class="ml-10">&lt;time&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <u>Underline</u>
- <code class="ml-10">&lt;u&gt;</code>
- </div>
- <div class="column col-3 col-xs-12">
- <var>x</var> = <var>y</var> + 2
- <code class="ml-10">&lt;var&gt;</code>
- </div>
- </div>
-
- <header class="text-center"><h5>optimized for east asian fonts</h5></header>
- <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p>
- <h6>Chinese (Simplified)</h6>
- <p lang="zh-Hans">革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。</p>
- <h6>Chinese (Tranditional)</h6>
- <p lang="zh-Hant">山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」</p>
- <h6>Japanese</h6>
- <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
- <h6>Korean</h6>
- <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
-
- <section class="notes">
- <p>Use the attribute <code>lang</code> or add the class <code>cjk</code> to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p>
- </section>
-
- <!-- asian example -->
-<pre class="code lang-html">
-&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
-&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
-</pre>
-
- <header class="text-center"><h5>blockquote</h5></header>
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <cite>- Source</cite>
- </blockquote>
-
- <!-- blockquote example -->
-<pre class="code lang-html">
-&lt;<span class="tag">blockquote</span>&gt;
- &lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">cite</span>&gt;- Source&lt;<span class="tag">/cite</span>&gt;
-&lt;<span class="tag">/blockquote</span>&gt;
-</pre>
-
- <header class="text-center"><h5>lists</h5></header>
- <div class="columns">
- <div class="column col-4 col-xs-12">
- <ul class="list">
- <li>list item 1</li>
- <li>list item 2
- <ul>
- <li>list item 2.1</li>
- <li>list item 2.2</li>
- <li>list item 2.3</li>
- </ul>
- </li>
- <li>list item 3</li>
- </ul>
- </div>
- <div class="column col-4 col-xs-12">
- <ol class="list">
- <li>list item 1</li>
- <li>list item 2
- <ol>
- <li>list item 2.1</li>
- <li>list item 2.2</li>
- <li>list item 2.3</li>
- </ol>
- </li>
- <li>list item 3</li>
- </ol>
- </div>
- <div class="column col-4 col-xs-12">
- <dl class="list">
- <dt>description list term 1</dt>
- <dd>description list description 1</dd>
- <dt>description list term 2</dt>
- <dd>description list description 2</dd>
- <dt>description list term 3</dt>
- <dd>description list description 3</dd>
- </dl>
- </div>
- </div>
-
- <!-- lists example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- unordered list --&gt;</span>
-&lt;<span class="tag">ul</span>&gt;
- &lt;<span class="tag">li</span>&gt;list item 1&lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span>&gt;list item 2
- &lt;<span class="tag">ul</span>&gt;
- &lt;<span class="tag">li</span>&gt;list item 2.1&lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span>&gt;list item 2.2&lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span>&gt;list item 2.3&lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">/ul</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span>&gt;list item 3&lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-
-<span class="com">&lt;!-- description list --&gt;</span>
-&lt;<span class="tag">dl</span>&gt;
- &lt;<span class="tag">dt</span>&gt;description list term&lt;<span class="tag">/dt</span>&gt;
- &lt;<span class="tag">dd</span>&gt;description list description&lt;<span class="tag">/dd</span>&gt;
-&lt;<span class="tag">/dl</span>&gt;
-</pre>
-
- </section>
-
- <section id="tables" class="container grid-960">
- <header class="text-center"><h4>tables</h4></header>
- <section class="notes">
- <p><strong>Tables</strong> include default styles for tables and data sets.</p>
- </section>
-
- <table class="table table-striped">
- <thead>
- <tr>
- <th>name</th>
- <th>duration</th>
- <th>genre</th>
- <th>release date</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>The Shawshank Redemption</td>
- <td>2h 22min</td>
- <td>Crime, Drama</td>
- <td>14 October 1994 <span class="label">USA</span></td>
- </tr>
- <tr>
- <td>The Godfather</td>
- <td>2h 55min</td>
- <td>Crime, Drama</td>
- <td>24 March 1972 <span class="label">USA</span></td>
- </tr>
- <tr>
- <td>Schindler's List</td>
- <td>3h 15min</td>
- <td>Biography, Drama, History</td>
- <td>4 February 1994 <span class="label">USA</span></td>
- </tr>
- <tr>
- <td>Se7en</td>
- <td>2h 7min</td>
- <td>Crime, Drama, Mystery</td>
- <td>22 September 1995 <span class="label">USA</span></td>
- </tr>
- </tbody>
- </table>
- <section class="notes">
- <p>Add the class <code>table</code> to any &lt;table&gt; element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to &lt;table&gt; to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p>
- <p>Use the class <code>selected</code> to make &lt;tr&gt; element highlighted. </p>
- </section>
-
- <!-- tables example -->
-<pre class="code lang-html">
-&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-striped table-hover&quot;</span>&gt;
- &lt;<span class="tag">thead</span>&gt;
- &lt;<span class="tag">tr</span>&gt;
- &lt;<span class="tag">th</span>&gt;name&lt;<span class="tag">/th</span>&gt;
- &lt;<span class="tag">th</span>&gt;duration&lt;<span class="tag">/th</span>&gt;
- &lt;<span class="tag">th</span>&gt;genre&lt;<span class="tag">/th</span>&gt;
- &lt;<span class="tag">th</span>&gt;release date&lt;<span class="tag">/th</span>&gt;
- &lt;<span class="tag">/tr</span>&gt;
- &lt;<span class="tag">/thead</span>&gt;
- &lt;<span class="tag">tbody</span>&gt;
- &lt;<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">&quot;selected&quot;</span>&gt;
- &lt;<span class="tag">td</span>&gt;The Shawshank Redemption&lt;<span class="tag">/td</span>&gt;
- &lt;<span class="tag">td</span>&gt;2h 22min&lt;<span class="tag">/td</span>&gt;
- &lt;<span class="tag">td</span>&gt;Crime, Drama&lt;<span class="tag">/td</span>&gt;
- &lt;<span class="tag">td</span>&gt;14 October 1994&lt;<span class="tag">/td</span>&gt;
- &lt;<span class="tag">/tr</span>&gt;
- &lt;<span class="tag">/tbody</span>&gt;
-&lt;<span class="tag">/table</span>&gt;
-</pre>
-
- </section>
-
- <section id="buttons" class="container grid-960">
- <header class="text-center"><h4>buttons</h4></header>
- <section class="notes">
- <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p>
- </section>
-
- <div class="columns">
- <div class="column col-xs-12">
- <button class="btn">default button</button>
- <button class="btn loading">default button</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary">primary button</button>
- <button class="btn btn-primary loading">primary button</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-link">link button</button>
- <button class="btn btn-link loading">link button</button>
- </div>
- </div>
- <section class="notes">
- <p>Add the class <code>btn</code> to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the class <code>loading</code> can show loading indicator. </p>
- </section>
-
- <!-- buttons example -->
-<pre class="code lang-html">
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;default button&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;primary button&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;link button&lt;<span class="tag">/button</span>&gt;
-
-<span class="com">&lt;!-- a button with loading state --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
-</pre>
-
- <section class="notes">
- <p>Add the class <code>disabled</code> or the attribute <code>disabled</code> for a disabled button.</p>
- </section>
-
- <div class="columns">
- <div class="column col-xs-12">
- <button class="btn disabled">default button</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary" disabled>primary button</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-link" disabled>link button</button>
- </div>
- </div>
-
- <header class="text-center"><h5>button sizes</h5></header>
-
- <div class="columns">
- <div class="column col-xs-12">
- <button class="btn btn-lg">large button</button>
- <button class="btn">normal button</button>
- <button class="btn btn-sm">small button</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-block">block button</button>
- </div>
- </div>
- <section class="notes">
- <p>Add the class <code>btn-sm</code> or <code>btn-lg</code> for small or large button size. Also, you can add the class <code>btn-block</code> for a full-width button. </p>
- </section>
-
- <!-- buttons example -->
-<pre class="code lang-html">
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-lg&quot;</span>&gt;large button&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-sm&quot;</span>&gt;small button&lt;<span class="tag">/button</span>&gt;
-
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-block&quot;</span>&gt;block button&lt;<span class="tag">/button</span>&gt;
-</pre>
-
- <div class="columns">
- <div class="column">
- <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>
- </div>
- </div>
- <section class="notes">
- <p>Icons with the class <code>icon</code> can be correctly rendered in each button size. </p>
- </section>
-
- <!-- buttons example -->
-<pre class="code lang-html">
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-lg&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; large&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; normal&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; small&lt;<span class="tag">/button</span>&gt;
-</pre>
-
- <header class="text-center"><h5>button groups</h5></header>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="btn-group">
- <button class="btn tooltip" data-tooltip="Lorem ipsum">first button</button>
- <button class="btn tooltip" data-tooltip="Lorem ipsum">second button</button>
- <button class="btn tooltip" data-tooltip="Lorem ipsum">third button</button>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="btn-group btn-group-block">
- <button class="btn btn-primary">first button</button>
- <button class="btn btn-primary">second button</button>
- <button class="btn btn-primary">third button</button>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="btn-group">
- <button class="btn btn-sm active">first button</button>
- <button class="btn btn-sm">second button</button>
- <button class="btn btn-sm">third button</button>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="btn-group btn-group-block">
- <button class="btn btn-primary btn-sm active">first button</button>
- <button class="btn btn-primary btn-sm">second button</button>
- <button class="btn btn-primary btn-sm">third button</button>
- </div>
- </div>
- </div>
- <section class="notes">
- <p>If you want to use buttons as a group, add the class <code>btn-group</code> to the container. You can add the class <code>btn-group-block</code> for a full-width button group.</p>
- </section>
-
- <!-- button groups example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group btn-group-block&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;first button&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;second button&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;third button&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="forms" class="container grid-960">
- <header class="text-center"><h4>forms</h4></header>
- <section class="notes">
- <p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p>
- </section>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <form action="#forms">
- <div class="form-group">
- <label class="form-label" for="input-example-1">Name</label>
- <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
- </div>
- <div class="form-group">
- <label class="form-label" for="input-example-2">Email</label>
- <input class="form-input" type="email" id="input-example-2" placeholder="Email" />
- </div>
- <div class="form-group">
- <label class="form-label">Gender</label>
- <label class="form-radio">
- <input type="radio" name="gender" />
- <i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" />
- <i class="form-icon"></i> Female
- </label>
- </div>
- <div class="form-group">
- <select class="form-select">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- <div class="form-group">
- <label class="form-switch">
- <input type="checkbox" />
- <i class="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
- <div class="form-group">
- <label class="form-label" for="input-example-3">Message</label>
- <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
- </div>
- <div class="form-group">
- <label class="form-checkbox">
- <input type="checkbox" />
- <i class="form-icon"></i> Remember me
- </label>
- </div>
- <div class="form-group">
- <button class="btn btn-primary" type="submit">Submit</button>
- <button class="btn btn-link" type="reset">Cancel</button>
- </div>
- </form>
- </div>
- </div>
-
- <!-- forms example -->
-<pre class="code lang-html">
-&lt;<span class="tag">form</span>&gt;
- <span class="com">&lt;!-- form input control --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- form radio control --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span>&gt;Gender&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> /&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Male
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> <span class="atn">checked</span> /&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Female
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- form select control --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">&quot;form-select&quot;</span>&gt;
- &lt;<span class="tag">option</span>&gt;Choose an option&lt;<span class="tag">/option</span>&gt;
- &lt;<span class="tag">option</span>&gt;Slack&lt;<span class="tag">/option</span>&gt;
- &lt;<span class="tag">option</span>&gt;Skype&lt;<span class="tag">/option</span>&gt;
- &lt;<span class="tag">option</span>&gt;Hipchat&lt;<span class="tag">/option</span>&gt;
- &lt;<span class="tag">/select</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- form switch control --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-switch&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Send me emails with news and tips
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- form textarea control --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-3&quot;</span>&gt;Message&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-3&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Textarea&quot;</span> <span class="atn">rows</span>=<span class="atv">&quot;3&quot;</span>&gt;&lt;<span class="tag">/textarea</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- form checkbox control --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Remember me
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/form</span>&gt;
-</pre>
-
- <section class="notes">
- <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p>
- <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the &lt;form&gt; container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. </p>
- </section>
-
- <div class="columns">
- <div class="column col-6 col-sm-12">
- <form class="form-horizontal" action="#forms">
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-4">Name</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="text" id="input-example-4" placeholder="Name" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-5">Email</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="email" id="input-example-5" placeholder="Email" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label">Gender</label>
- </div>
- <div class="col-9">
- <label class="form-radio">
- <input type="radio" name="gender" />
- <i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" checked />
- <i class="form-icon"></i> Female
- </label>
- </div>
- </div>
- <div class="form-group">
- <div class="col-3"></div>
- <div class="col-9">
- <select class="form-select" multiple>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <div class="col-3"></div>
- <div class="col-9">
- <label class="form-switch">
- <input type="checkbox" />
- <i class="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-6">Message</label>
- </div>
- <div class="col-9">
- <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
- </div>
- </div>
- <div class="form-group">
- <div class="col-3"></div>
- <div class="col-9">
- <label class="form-checkbox">
- <input type="checkbox" />
- <i class="form-icon"></i> Remember me
- </label>
- </div>
- </div>
- <div class="form-group">
- <div class="col-3"></div>
- <div class="col-9">
- <button class="btn btn-primary" type="submit">Submit</button>
- <button class="btn btn-link" type="reset">Cancel</button>
- </div>
- </div>
- </form>
- </div>
- </div>
-
- <!-- forms example -->
-<pre class="code lang-html">
-&lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- form structure --&gt;</span>
-&lt;<span class="tag">/form</span>&gt;
-</pre>
-
- <div class="columns">
- <div class="column col-6 col-sm-12">
- <form class="form-horizontal" action="#forms">
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-8">Email</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-9">URL</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="url" id="input-example-9" placeholder="URL" value="https://github.com/picturepan2/spectre">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-10">Search</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="search" id="input-example-10" placeholder="Search" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-11">Tel</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-12">Password</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-13">Number</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-14">Date</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="date" id="input-example-14" value="2016-12-31" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-15">Color</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="color" id="input-example-15" value="#5764c6" />
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-16">File</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="file" id="input-example-16" value="" />
- </div>
- </div>
- <div class="form-group hide">
- <div class="col-3">
- <label class="form-label" for="input-example-17">Slider</label>
- </div>
- <div class="col-9">
- <input class="form-input" type="range" min="0" max="50" value="25" />
- </div>
- </div>
- <div class="form-group hide">
- <div class="col-3">
- <label class="form-label" for="input-example-18">Progress</label>
- </div>
- <div class="col-9">
- <progress class="progress" value="50" max="100"></progress>
- </div>
- </div>
- </form>
- </div>
- </div>
-
- <section class="notes">
- <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements. You can use the class <code>form-input-hint</code> to provide form validation success and error messages.</p>
- </section>
-
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <label class="form-label" for="input-example-1">Name</label>
- <input class="form-input is-danger" type="text" id="input-example-1" placeholder="Name" />
- <p class="form-input-hint">The name is invaild.</p>
- </div>
- <div class="form-group has-success">
- <label class="form-label" for="input-example-2">Email</label>
- <input class="form-input" type="email" id="input-example-2" placeholder="Email" />
- <p class="form-input-hint">The email is available.</p>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <select class="form-select is-danger">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- <p class="form-input-hint">The option is invaild.</p>
- </div>
- <div class="form-group has-success">
- <select class="form-select">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- <p class="form-input-hint">The option is available.</p>
- </div>
- </div>
- </div>
-
- <!-- forms example -->
-<pre class="code lang-html">
-&lt;<span class="tag">form</span>&gt;
- <span class="com">&lt;!-- form validation class: has-success --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group has-success&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invaild.&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-
- <span class="com">&lt;!-- form validation class: is-success --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input is-success&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span> /&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invaild.&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/form</span>&gt;
-</pre>
-
- <section class="notes">
- <p>For smaller or larger input and select controls, you could add <code>input-sm</code>/<code>input-lg</code> and <code>select-sm</code>/<code>select-lg</code> to the elements.</p>
- </section>
-
- <div class="columns">
- <div class="column col-4">
- <input class="form-input input-sm" type="text" placeholder="Name" />
- </div>
- <div class="column col-4">
- <select class="form-select select-sm">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- </div>
- <div class="columns">
- <div class="column col-4">
- <input class="form-input input-lg" type="text" placeholder="Name" />
- </div>
- <div class="column col-4">
- <select class="form-select select-lg">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- </div>
-
- <header class="text-center"><h5>input groups</h5></header>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="input-group">
- <span class="input-group-addon addon-sm">slack.com/</span>
- <input type="text" class="form-input input-sm" placeholder="site name" />
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group">
- <input type="text" class="form-input input-sm" placeholder="username" />
- <span class="input-group-addon addon-sm">@slack.com</span>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group">
- <span class="input-group-addon addon-sm">slack.com/</span>
- <input type="text" class="form-input input-sm" placeholder="site name" />
- <button class="btn btn-primary input-group-btn btn-sm">Submit</button>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="input-group">
- <span class="input-group-addon">slack.com/</span>
- <input type="text" class="form-input" placeholder="site name" />
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group">
- <input type="text" class="form-input" placeholder="username" />
- <span class="input-group-addon">@slack.com</span>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group">
- <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>
- </div>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="input-group">
- <span class="input-group-addon addon-lg">slack.com/</span>
- <input type="text" class="form-input input-lg" placeholder="site name" />
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group">
- <input type="text" class="form-input input-lg" placeholder="username" />
- <span class="input-group-addon addon-lg">@slack.com</span>
- </div>
- </div>
- <div class="column">
- <div class="input-group">
- <span class="input-group-addon addon-lg">slack.com/</span>
- <input type="text" class="form-input input-lg" placeholder="site name" />
- <button class="btn btn-primary input-group-btn btn-lg">Submit</button>
- </div>
- </div>
- </div>
- <section class="notes">
- <p>If you want to attach text and button along with an input, add the class <code>input-group</code> to the input container. And add the class <code>input-group-addon</code> to the text element and <code>input-group-btn</code> to the button element.</p>
- </section>
-
- <!-- input groups example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- normal input group --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
- &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon&quot;</span>&gt;slack.com/&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;site name&quot;</span> /&gt;
-&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- large input group --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
- &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon addon-lg&quot;</span>&gt;slack.com/&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-lg&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;site name&quot;</span> /&gt;
-&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- normal input group with button --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
- &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon&quot;</span>&gt;slack.com/&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;site name&quot;</span> /&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary input-group-btn&quot;</span>&gt;Submit&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="labels" class="container grid-960">
- <header class="text-center"><h4>labels</h4></header>
- <section class="notes">
- <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p>
- </section>
- <div class="columns">
- <div class="column">
- <span class="label">default label</span>
- <span class="label label-primary">primary label</span>
- <span class="label label-success">success label</span>
- <span class="label label-danger">danger label</span>
- </div>
- </div>
- <section class="notes">
- <p>Add the class <code>label</code> to &lt;span&gt; or &lt;small&gt; elements. You can add another class <code>label-primary</code>, <code>label-success</code> and <code>label-danger</code> for a primary colored label.</p>
- </section>
-
- <!-- labels example -->
-<pre class="code lang-html">
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;default label&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;primary label&lt;<span class="tag">/span</span>&gt;
-</pre>
-
- </section>
-
- <section id="media" class="container grid-960">
- <header class="text-center"><h4>media</h4></header>
- <section class="notes">
- <p><strong>Media</strong> include responsive images, figures and video classes. </p>
- <p>Add the class <code>img-responsive</code> to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
- </section>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" />
- </div>
- </div>
-
- <section class="notes">
- <p>You can use the element <code>&lt;figure&gt;</code> for an image with a caption. Add the class <code>figure</code> to &lt;figure&gt; element. The images with the class <code>img-responsive</code> will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p>
- </section>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <figure class="figure">
- <img src="demo/img/osx-yosemite-2.jpg" class="img-responsive rounded" />
- <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
- </figure>
-
- </div>
- </div>
-
- <section class="notes">
- <p>For responsive video, add a container with the class <code>video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p>
- </section>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="video-responsive">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" frameborder="0" allowfullscreen></iframe>
- </div>
- </div>
- </div>
-
- <!-- media example -->
-<pre class="code lang-html">
-&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> /&gt;
-
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;figure&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-yosemite-2.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> /&gt;
- &lt;<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">&quot;figure-caption text-center&quot;</span>&gt;macOS Yosemite wallpaper&lt;<span class="tag">/figcaption</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;video-responsive&quot;</span>&gt;
- &lt;<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">&quot;https://www.youtube.com/embed/BzMLA8YIgG0;</span> <span class="atn">width</span>=<span class="atv">&quot;560&quot;</span> <span class="atn">height</span>=<span class="atv">&quot;315&quot;</span> <span class="atn">frameborder</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">allowfullscreen</span>&gt;&lt;<span class="tag">/iframe</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="layout" class="container grid-960">
- <section class="notes text-center">
- <ul class="tab inline-flex">
- <li class="tab-item">
- <a href="#elements">
- elements
- </a>
- </li>
- <li class="tab-item active">
- <a href="#layout">
- layout
- </a>
- </li>
- <li class="tab-item">
- <a href="#components">
- components
- </a>
- </li>
- <li class="tab-item">
- <a href="#utilities">
- utilities
- </a>
- </li>
- </ul>
- </section>
- <section class="notes text-center">
- <div class="btn-group">
- <a href="#grid" class="btn btn-primary">flexbox grid</a>
- <a href="#responsive" class="btn btn-primary">responsive</a>
- <a href="#navbar" class="btn btn-primary">navbar</a>
- <a href="#empty" class="btn btn-primary">empty states</a>
- </div>
- </section>
- </section>
-
- <section id="grid" class="container grid-960">
- <header class="text-center"><h4>flexbox grid</h4></header>
- <section class="notes">
- <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p>
- </section>
- <div class="columns">
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- <div class="column">
- <div class="bg-grey"></div>
- </div>
- </div>
-
- <div class="columns">
- <div class="column col-12">
- <div class="bg-grey">col-12 (100%)</div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-9">
- <div class="bg-grey">col-9 (75%)</div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-6">
- <div class="bg-grey">col-6 (50%)</div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-3">
- <div class="bg-grey">col-3 (25%)</div>
- </div>
- </div>
-
- <section class="notes">
- <p>Add the class <code>columns</code> to a container with the class <code>container</code>. And add any element you want with classname <code>column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p>
- <p>And you can add the class <code>col-gapless</code> to have gapless columns.</p>
- </section>
-
- <div class="columns col-gapless">
- <div class="column col-6">
- <div class="bg-grey">col-6 (gapless)</div>
- </div>
- <div class="column col-6">
- <div class="bg-grey">col-6 (gapless)</div>
- </div>
- </div>
-
- <section class="notes">
- <p>By default, Spectre grid has multi-line flexbox enabled. You can add the class <code>col-oneline</code> to <code>columns</code> to make all its child columns positioned in the same single row.</p>
- </section>
-
- <div class="columns col-oneline">
- <div class="column col-8">
- <div class="bg-grey">col-8</div>
- </div>
- <div class="column col-8">
- <div class="bg-grey">col-8</div>
- </div>
- </div>
-
- <!-- layout example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-3&quot;</span>&gt;col-3&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-2&quot;</span>&gt;col-2&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-1&quot;</span>&gt;col-1&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns col-gapless&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="responsive" class="container grid-960">
- <header class="text-center"><h4>responsive grid</h4></header>
- <div class="columns col-multiline">
- <div class="column col-md-6 col-xs-12">
- <div class="bg-grey">col-md-6</div>
- </div>
- <div class="column col-md-3 col-xs-12">
- <div class="bg-grey">col-md-3</div>
- </div>
- <div class="column col-md-3 col-xs-12">
- <div class="bg-grey">col-md-3</div>
- </div>
- </div>
-
- <div class="columns">
- <div class="column col-sm-6">
- <div class="bg-grey">col-sm-6</div>
- </div>
- <div class="column col-sm-3">
- <div class="bg-grey">col-sm-3</div>
- </div>
- <div class="column col-sm-3">
- <div class="bg-grey">col-sm-3</div>
- </div>
- </div>
-
- <div class="columns">
- <div class="column col-xs-6">
- <div class="bg-grey">col-xs-6</div>
- </div>
- <div class="column col-xs-3">
- <div class="bg-grey">col-xs-3</div>
- </div>
- <div class="column col-xs-3">
- <div class="bg-grey">col-xs-3</div>
- </div>
- </div>
-
- <section class="notes">
- <p>Spectre provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code>, <code>.col-md-[1-12]</code>, <code>.col-lg-[1-12]</code> and <code>.col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
- <ul>
- <li>For window width less than <strong>480px</strong>, all columns will show as a single row.</li>
- <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li>
- <li><code>col-sm-[1-12]</code> apply to window width smaller than or equal to <strong>600px</strong>. </li>
- <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li>
- <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li>
- <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li>
- </ul>
- </section>
-
- <!-- layout example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-6&quot;</span>&gt;col-xs-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-3&quot;</span>&gt;col-xs-3&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-3&quot;</span>&gt;col-xs-3&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- <section class="notes">
- <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p>
- <ul>
- <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li>
- <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li>
- <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>. </li>
- <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li>
- <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li>
- </ul>
- <p>Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory <code>/tools/resizer</code> or online.</p>
- <p><a href="http://picturepan2.github.io/spectre/tools/resizer/" target="_blank" class="btn btn-primary">Responsive Resizer</a></p>
- </section>
- </section>
-
- <section id="navbar" class="container grid-960">
- <header class="text-center"><h4>navbar</h4></header>
- <section class="notes">
- <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p>
- </section>
- <div class="columns">
- <div class="column">
- <section class="navbar">
- <section class="navbar-section">
- <a href="#navbar" class="navbar-brand">
- <i class="icon icon-pages"></i> Spectre.css
- </a>
- <a href="#navbar" class="btn btn-link">features</a>
- <a href="#navbar" class="btn btn-link">documents</a>
- </section>
- <section class="navbar-section">
- <div class="input-group input-inline">
- <input class="form-input" type="text" placeholder="search" />
- <button class="btn btn-primary input-group-btn">Search</button>
- </div>
- </section>
- </section>
- </div>
- </div>
-
- <section class="notes">
- <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the class <code>navbar-section</code> will be evenly distributed in the container.</p>
- </section>
-
- <!-- navbar example -->
-<pre class="code lang-html">
-&lt;<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">&quot;navbar&quot;</span>&gt;
- &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-brand&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-pages&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Spectre.css
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;features&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;documents&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/section</span>&gt;
- &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group input-inline&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;search&quot;</span> /&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary input-group-btn&quot;</span>&gt;Search&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/section</span>&gt;
-&lt;<span class="tag">/header</span>&gt;
-</pre>
-
- </section>
-
- <section id="empty" class="container grid-960">
- <header class="text-center"><h4>empty states / blank slates</h4></header>
- <section class="notes">
- <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p>
- </section>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <section class="empty">
- <i class="icon icon-markunread"></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>
- </section>
- </div>
- <div class="column col-6 col-xs-12">
- <section class="empty">
- <i class="icon icon-people"></i>
- <p class="empty-title">You are not following anyone</p>
- <div class="empty-action input-group">
- <input type="text" class="form-input" placeholder="" />
- <button class="btn btn-primary input-group-btn">Search</button>
- </div>
- </section>
- </div>
- </div>
-
- <section class="notes">
- <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p>
- </section>
-
- <!-- empty states example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title&quot;</span>&gt;You have no new messages&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-meta&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="components" class="container grid-960">
- <section class="notes text-center">
- <ul class="tab inline-flex">
- <li class="tab-item">
- <a href="#elements">
- elements
- </a>
- </li>
- <li class="tab-item">
- <a href="#layout">
- layout
- </a>
- </li>
- <li class="tab-item active">
- <a href="#components">
- components
- </a>
- </li>
- <li class="tab-item">
- <a href="#utilities">
- utilities
- </a>
- </li>
- </ul>
- </section>
- <section class="notes text-center">
- <div class="btn-group">
- <a href="#avatars" class="btn btn-primary">avatars</a>
- <a href="#chips" class="btn btn-primary">chips</a>
- <a href="#autocomplete" class="btn btn-primary">autocomplete</a>
- <a href="#tooltips" class="btn btn-primary">tooltips</a>
- <a href="#badges" class="btn btn-primary">badges</a>
- <a href="#toasts" class="btn btn-primary">toasts</a>
- <a href="#menus" class="btn btn-primary">menus</a>
- <a href="#dropdowns" class="btn btn-primary">dropdowns</a>
- <a href="#navigation" class="btn btn-primary">navigation</a>
- <a href="#modals" class="btn btn-primary">modals</a>
- <a href="#cards" class="btn btn-primary">cards</a>
- </div>
- </section>
- </section>
-
- <section id="avatars" class="container grid-960">
- <header class="text-center"><h4>avatars</h4></header>
- <section class="notes">
- <p><strong>Avatars</strong> are user profile pictures. </p>
- </section>
- <div class="columns">
- <div class="column col-4 col-xs-12">
- <figure class="avatar avatar-xl">
- <img src="demo/img/avatar-1.png" />
- </figure>
- <figure class="avatar avatar-lg">
- <img src="demo/img/avatar-2.png" />
- </figure>
- <figure class="avatar">
- <img src="demo/img/avatar-3.png" />
- </figure>
- <figure class="avatar avatar-sm">
- <img src="demo/img/avatar-4.png" />
- </figure>
- <figure class="avatar avatar-xs">
- <img src="demo/img/avatar-5.png" />
- </figure>
- </div>
- <div class="column col-4 col-xs-12">
- <figure class="avatar avatar-xl">
- <img src="demo/img/avatar-1.png" />
- <img src="demo/img/avatar-2.png" class="avatar-icon" />
- </figure>
- <figure class="avatar avatar-lg">
- <img src="demo/img/avatar-2.png" />
- <img src="demo/img/avatar-3.png" class="avatar-icon" />
- </figure>
- <figure class="avatar">
- <img src="demo/img/avatar-3.png" />
- <img src="demo/img/avatar-4.png" class="avatar-icon" />
- </figure>
- <figure class="avatar avatar-sm">
- <img src="demo/img/avatar-4.png" />
- <img src="demo/img/avatar-5.png" class="avatar-icon" />
- </figure>
- <figure class="avatar avatar-xs">
- <img src="demo/img/avatar-5.png" />
- <img src="demo/img/avatar-1.png" class="avatar-icon" />
- </figure>
- </div>
-
- <div class="column col-4 col-xs-12">
- <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure>
- <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"></figure>
- <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure>
- <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure>
- <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure>
- </div>
- </div>
-
- <section class="notes">
- <p>Add the class <code>avatar</code> to &lt;img&gt; element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
- <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to &lt;div&gt; element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p>
- </section>
-
- <div class="columns">
- <div class="column">
- <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
- <img src="demo/img/avatar-1.png" />
- </figure>
- <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;">
- <img src="demo/img/avatar-2.png" />
- </figure>
- <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;">
- <img src="demo/img/avatar-3.png" />
- </figure>
- <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;">
- <img src="demo/img/avatar-4.png" />
- </figure>
- <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;">
- <img src="demo/img/avatar-5.png" />
- </figure>
- </div>
- </div>
-
- <!-- avatars example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- Basic avatar examples --&gt;</span>
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> /&gt;
-&lt;<span class="tag">/figure</span>&gt;
-
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> /&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-5.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-icon&quot;</span> /&gt;
-&lt;<span class="tag">/figure</span>&gt;
-
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;&lt;<span class="tag">/figure</span>&gt;
-
-<span class="com">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> /&gt;
-&lt;<span class="tag">/figure</span>&gt;
-</pre>
-
- </section>
-
- <section id="chips" class="container grid-960">
- <header class="text-center"><h4>chips</h4></header>
- <section class="notes">
- <p><strong>Chips</strong> are complex entities in small blocks. </p>
- </section>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="chip-sm">
- Crime
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- Drama
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- Biography
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- Mystery
- <button class="btn btn-clear"></button>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="chip-sm">
- <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure>
- Tony Stark
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- <img src="demo/img/avatar-1.png" class="avatar" />
- Thor Odinson
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- <img src="demo/img/avatar-4.png" class="avatar" />
- Steve Rogers
- </div>
- </div>
- </div>
-
- <section class="notes">
- <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p>
- </section>
-
- <div class="columns hide">
- <div class="column col-4 col-xs-12">
- <div class="chip">
- <div class="chip-icon">
- <img src="demo/img/avatar-1.png" class="avatar" />
- </div>
- <div class="chip-content">
- <div class="chip-title">Tony Stark</div>
- <div class="chip-meta">Iron man</div>
- </div>
- <div class="chip-action">
- <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button>
- </div>
- </div>
- </div>
- </div>
-
- <!-- chips example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
- Crime
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
- Yan Zhu
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="autocomplete" class="container grid-960">
- <header class="text-center"><h4>autocomplete</h4></header>
- <section class="notes">
- <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p>
- </section>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <div class="form-autocomplete">
- <div class="form-autocomplete-input">
- <div class="chip-sm">
- <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure>
- Tony Stark
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- <img src="demo/img/avatar-1.png" class="avatar" />
- Thor Odinson
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- <img src="demo/img/avatar-4.png" class="avatar" />
- Steve Rogers
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- Bruce Banner
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm selected">
- Natasha Romanoff
- <button class="btn btn-clear"></button>
- </div>
- <input class="form-input" type="text" placeholder="" />
- </div>
- </div>
- </div>
- <div class="form-group col-xs-12">
- <div class="form-autocomplete">
- <div class="form-autocomplete-input">
- <div class="chip-sm">
- Tony Stark
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- Thor Odinson
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- Steve Rogers
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- Bruce Banner
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm selected">
- Natasha Romanoff
- <button class="btn btn-clear"></button>
- </div>
- <input class="form-input" type="text" placeholder="" />
- </div>
- </div>
- </div>
- </div>
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <div class="form-autocomplete">
- <div class="form-autocomplete-input">
- <div class="chip-sm">
- Bruce Banner
- <button class="btn btn-clear"></button>
- </div>
- <div class="chip-sm">
- <img src="demo/img/avatar-1.png" class="avatar" />
- Thor Odinson
- <button class="btn btn-clear"></button>
- </div>
- <input class="form-input" type="text" placeholder="typing here" value="S" />
- </div>
- <ul class="menu">
- <li class="menu-item">
- <a href="#autocomplete">
- <div class="chip">
- <div class="chip-icon">
- <img src="demo/img/avatar-4.png" class="avatar" />
- </div>
- <div class="chip-content">
- Steve Rogers
- </div>
- </div>
- </a>
- <a href="#autocomplete">
- <div class="chip">
- <div class="chip-icon">
- <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure>
- </div>
- <div class="chip-content">
- Tony Stark
- </div>
- </div>
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. </p>
- <p>The autocomplete HTML structure is exampled below.</p>
- </section>
-
- <!-- autocomplete example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete&quot;</span>&gt;
- <span class="com">&lt;!-- autocomplete input container --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input&quot;</span>&gt;
- <span class="com">&lt;!-- autocomplete chips --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
- Yan Zhu
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm selected&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-2.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
- Yan Zhu
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- autocomplete real input box --&gt;</span>
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;typing here&quot;</span> /&gt;
- &lt;<span class="tag">/div</span>&gt;
- <span class="com">&lt;!-- autocomplete suggestion list --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
- <span class="com">&lt;!-- menu list chips --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
- Steve Rogers
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
- Yan Zhu
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">/ul</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="tooltips" class="container grid-960">
- <header class="text-center"><h4>tooltips</h4></header>
- <section class="notes">
- <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p>
- </section>
- <div class="columns text-center">
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum" data-tooltip-pos="top">top tooltip</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum">right tooltip</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum">bottom tooltip</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum">left tooltip</button>
- </div>
- </div>
- <section class="notes">
- <p>Tooltip component is built entirely in CSS.</p>
- <p>Add the class <code>tooltip</code> and the attribute <code>data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p>
- </section>
-
- <!-- tooltips example -->
-<pre class="code lang-html">
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;top tooltip&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip tooltip-right&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;right tooltip&lt;<span class="tag">/button</span>&gt;
-</pre>
-
- </section>
-
- <section id="badges" class="container grid-960">
- <header class="text-center"><h4>badges</h4></header>
- <section class="notes">
- <p><strong>Badges</strong> are often used as unread number indicators.</p>
- </section>
- <div class="columns">
- <div class="column col-xs-6">
- <span class="badge" data-badge="1">
- Notifications
- </span>
- </div>
- <div class="column col-xs-6">
- <span class="badge" data-badge="99">
- Notifications
- </span>
- </div>
- <div class="column col-xs-6">
- <span class="badge" data-badge="999">
- Notifications
- </span>
- </div>
- <div class="column col-xs-6">
- <span class="badge" data-badge="…">
- Notifications
- </span>
- </div>
- </div>
- <section class="notes">
- <p>Add the class <code>badge</code> to non self closing elements. And add the attribute <code>data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element.</p>
- </section>
-
- <!-- badges example -->
-<pre class="code lang-html">
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;99&quot;</span>&gt;
- Notifications
-&lt;<span class="tag">/span</span>&gt;
-</pre>
-
- </section>
-
- <section id="toasts" class="container grid-960">
- <header class="text-center"><h4>toasts</h4></header>
- <section class="notes">
- <p><strong>Toasts</strong> are used to show alert or information to users.</p>
- </section>
- <div class="columns">
- <div class="column col-sm-12 col-6">
- <div class="toast">
- <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code>btn-clear</code> if you need. </p>
- </section>
- <div class="columns">
- <div class="column col-sm-12">
- <div class="toast toast-primary">
- <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>
- <div class="column col-sm-12">
- <div class="toast toast-success">
- <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>
- <div class="column col-sm-12">
- <div class="toast toast-danger">
- <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>
- </div>
- <section class="notes">
- <p>And you can add the class <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> for additional toast colors.</p>
- </section>
-
- <!-- toasts example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-&lt;<span class="tag">/div</span>&gt;
-
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast toast-primary&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-error_outline&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="menus" class="container grid-960">
- <header class="text-center"><h4>menus</h4></header>
- <section class="notes">
- <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p>
- </section>
- <div class="columns">
- <div class="column col-xs-6">
- <ul class="menu">
- <li class="menu-item">
- <div class="chip">
- <div class="chip-icon">
- <img src="demo/img/avatar-4.png" class="avatar" />
- </div>
- <div class="chip-content">
- Steve Rogers
- </div>
- </div>
- </li>
- <li class="divider"></li>
- <li class="menu-item">
- <a href="#menus" class="active">
- My profile
- </a>
- </li>
- <li class="menu-item">
- <a href="#menus">
- Settings
- </a>
- </li>
- <li class="menu-item">
- <a href="#menus">
- Logout
- </a>
- </li>
- </ul>
- </div>
- <div class="column col-xs-6">
- <ul class="menu">
- <li class="menu-header">
- <span class="menu-header-text">
- Go to
- </span>
- </li>
- <li class="menu-item">
- <a href="#menus">
- Slack
- </a>
- </li>
- <li class="menu-item">
- <a href="#menus">
- Hipchat
- </a>
- </li>
- <li class="menu-item">
- Skype
- </li>
- </ul>
- </div>
- <div class="column col-xs-6">
- <ul class="menu">
- <li class="menu-header">
- <span class="menu-header-text">
- Go to
- </span>
- </li>
- <li class="menu-item">
- <a href="#menus">
- <i class="icon icon-link"></i> Slack
- </a>
- </li>
- <li class="menu-item">
- <a href="#menus">
- <i class="icon icon-link"></i> Hipchat
- </a>
- </li>
- <li class="menu-item">
- <i class="icon icon-link"></i> Skype
- </li>
- </ul>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p>
- </section>
-
- <!-- menus example -->
-<pre class="code lang-html">
-&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
- <span class="com">&lt;!-- menu header --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header&quot;</span>&gt;
- &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header-text&quot;</span>&gt;
- Go to
- &lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu item --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Slack
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Hipchat
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Skype
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu divider --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Settings
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</pre>
-
- </section>
-
- <section id="dropdowns" class="container grid-960">
- <header class="text-center"><h4>dropdowns</h4></header>
- <section class="notes">
- <p>A <strong>dropdown</strong> is a combination of buttons and menus.</p>
- </section>
- <div class="columns">
- <div class="column col-xs-6">
- <div class="dropdown">
- <div class="btn-group">
- <a class="btn">dropdown button</a>
- <a class="btn dropdown-toggle" tabindex="0"><i class="icon-caret"></i></a>
- <ul class="menu">
- <li class="menu-item">
- <a href="#dropdowns">
- Slack
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Hipchat
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Skype
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="column col-xs-6">
- <div class="dropdown">
- <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a>
- <ul class="menu">
- <li class="menu-item">
- <a href="#dropdowns">
- Slack
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Hipchat
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Skype
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div class="column col-xs-6">
- <div class="dropdown">
- <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a>
- <ul class="menu">
- <li class="menu-item">
- <a href="#dropdowns">
- Slack
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Hipchat
- </a>
- </li>
- <li class="menu-item">
- <a href="#dropdowns">
- Skype
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <section class="notes">
- <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
- <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. </p>
- </section>
- <section class="notes">
- <p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p>
- </section>
-
- <!-- dropdowns example -->
-<pre class="code lang-html">
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
- <span class="com">&lt;!-- basic dropdown button --&gt;</span>
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
- dropdown menu &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- <span class="com">&lt;!-- menu component --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Slack&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Hipchat&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Skype&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">/ul</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
- <span class="com">&lt;!-- dropdown button group --&gt;</span>
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
- dropdown button
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
-
- <span class="com">&lt;!-- menu component --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
- ...
- &lt;<span class="tag">/ul</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="navigation" class="container grid-960">
- <header class="text-center"><h4>navigation</h4></header>
- <section class="notes">
- <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and nav.</p>
- </section>
- <header id="breadcrumbs" class="text-center"><h5>breadcrumbs</h5></header>
- <div class="columns">
- <div class="column">
- <ul class="breadcrumb">
- <li class="breadcrumb-item">
- <a href="#breadcrumbs">
- Home
- </a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs">
- Profile
- </a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs">
- Change avatar
- </a>
- </li>
- </ul>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>breadcrumb</code>. And add child elements with the classname <code>breadcrumb-item</code>.</p>
- </section>
-
- <!-- breadcrumbs example -->
-<pre class="code lang-html">
-&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Home
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Profile
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Change avatar
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</pre>
-
- <header id="tabs" class="text-center"><h5>tabs</h5></header>
- <div class="columns">
- <div class="column col-xs-12">
- <ul class="tab">
- <li class="tab-item active">
- <a href="#tabs">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Connect
- </a>
- </li>
- </ul>
- </div>
- <div class="column col-xs-12">
- <ul class="tab tab-block">
- <li class="tab-item active">
- <a href="#tabs">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Connect
- </a>
- </li>
- </ul>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>tab</code>. And add child elements with the classname <code>tab-item</code>. You can add the class <code>tab-block</code> for a full-width tab. The <code>tab-item</code> or its child <code>&lt;a&gt;</code> with the class <code>active</code> will be highlighted.</p>
- </section>
-
- <!-- tabs example -->
-<pre class="code lang-html">
-&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Music&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;active&quot;</span>&gt;Playlists&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Radio&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Connect&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</pre>
- <div class="columns">
- <div class="column col-xs-12">
- <ul class="tab">
- <li class="tab-item active">
- <a href="#tabs" class="badge" data-badge="9">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs" class="badge" data-badge="99">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Connect
- </a>
- </li>
- </ul>
- </div>
- <div class="column col-xs-12">
- <ul class="tab tab-block">
- <li class="tab-item active">
- <a href="#tabs" class="badge" data-badge="9">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs" class="badge" data-badge="99">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Connect
- </a>
- </li>
- </ul>
- </div>
- </div>
-
- <section class="notes">
- <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
- </section>
-
- <!-- tabs with badges example -->
-<pre class="code lang-html">
-&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;9&quot;</span>&gt;
- Music
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</pre>
-
- <header id="pagination" class="text-center"><h5>pagination</h5></header>
- <div class="columns">
- <div class="column col-xs-12">
- <ul class="pagination">
- <li class="page-item">
- <a href="#pagination">Previous</a>
- </li>
- <li class="page-item">
- <a href="#pagination">1</a>
- </li>
- <li class="page-item">
- <span>...</span>
- </li>
- <li class="page-item">
- <a href="#pagination">6</a>
- </li>
- <li class="page-item active">
- <a href="#pagination">7</a>
- </li>
- <li class="page-item">
- <a href="#pagination">8</a>
- </li>
- <li class="page-item">
- <span>...</span>
- </li>
- <li class="page-item">
- <a href="#pagination">12</a>
- </li>
- <li class="page-item">
- <a href="#pagination">Next</a>
- </li>
- </ul>
- </div>
- <div class="column col-xs-12">
- <ul class="pagination">
- <li class="page-item">
- <a href="#pagination" disabled>Previous</a>
- </li>
- <li class="page-item active">
- <a href="#pagination">1</a>
- </li>
- <li class="page-item">
- <a href="#pagination">2</a>
- </li>
- <li class="page-item">
- <a href="#pagination">3</a>
- </li>
- <li class="page-item">
- <span>...</span>
- </li>
- <li class="page-item">
- <a href="#pagination">12</a>
- </li>
- <li class="page-item">
- <a href="#pagination">Next</a>
- </li>
- </ul>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>. The <code>page-item</code> with the class <code>active</code> will be highlighted.</p>
- </section>
-
- <!-- pagination example -->
-<pre class="code lang-html">
-&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">disabled</span>&gt;Previous&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;1&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;2&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;3&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">span</span>&gt;...&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;12&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Next&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</pre>
-
- <header id="nav" class="text-center"><h5>nav</h5></header>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <ul class="nav">
- <li class="nav-item">
- <a href="#nav">Elements</a>
- </li>
- <li class="nav-item">
- <a href="#nav"><strong>Layout</strong></a>
- <ul class="nav">
- <li class="nav-item">
- <a href="#nav">flexbox grid</a>
- </li>
- <li class="nav-item">
- <a href="#nav">responsive</a>
- </li>
- <li class="nav-item">
- <a href="#nav">navbar</a>
- </li>
- <li class="nav-item">
- <a href="#nav">empty states</a>
- </li>
- </ul>
- </li>
- <li class="nav-item">
- <a href="#nav">Components</a>
- </li>
- <li class="nav-item">
- <a href="#nav">Utilities</a>
- </li>
- </ul>
- </div>
-
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p>
- </section>
-
- </section>
-
- <section id="modals" class="container grid-960">
- <header class="text-center"><h4>modals</h4></header>
- <section class="notes">
- <p><strong>Modals</strong> are flexible dialog prompts.</p>
- </section>
- <div class="columns">
- <div class="column">
- <div class="modal-temp">
- <div class="modal-overlay"></div>
- <div class="modal-container" role="document">
- <div class="modal-header">
- <button type="button" class="btn btn-clear float-right" aria-label="Close"></button>
- <div class="modal-title">Modal title</div>
- </div>
- <div class="modal-body">
- <div class="content">
- <p>
- This is the content inside the modal.
- </p>
- <h4>Lorem ipsum</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
- <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
- <h4>Cupcake ipsum</h4>
- <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
- <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
- <h4>Candy ipsum</h4>
- <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
- <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
- </div>
- </div>
- <div class="modal-footer">
- <button class="btn btn-link">Close</button>
- <button class="btn btn-primary">Share</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>modal</code>. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the class name <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p>
- <p>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 <code>active</code> to the <code>modal</code> container</p>
- </section>
-
- <!-- modals example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-header&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-title&quot;</span>&gt;Modal title&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-body&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;content&quot;</span>&gt;
- <span class="com">&lt;!-- content here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-footer&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;Close&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Share&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- <header class="text-center"><h5>modal sizes</h5></header>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="modal-temp modal-sm">
- <div class="modal-overlay"></div>
- <div class="modal-container" role="document">
- <div class="modal-header">
- <button type="button" class="btn btn-clear float-right" aria-label="Close"></button>
- <div class="modal-title">Modal title</div>
- </div>
- <div class="modal-body">
- <div class="content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </div>
- </div>
- <div class="modal-footer">
- <button class="btn btn-link">Close</button>
- <button class="btn btn-primary">Share</button>
- </div>
- </div>
- </div>
- </div>
- <div class="column col-6 col-xs-12">
- <div class="modal-temp modal-sm">
- <div class="modal-overlay"></div>
- <div class="modal-container" role="document">
- <div class="modal-header">
- <button type="button" class="btn btn-clear float-right" aria-label="Close"></button>
- <div class="modal-title">Modal title</div>
- </div>
- <div class="modal-body">
- <div class="content">
- <form>
- <div class="form-group">
- <label class="form-label" for="input-example-7">Name</label>
- <input class="form-input" type="text" id="input-example-7" placeholder="Name" />
- </div>
- <div class="form-group">
- <label class="form-label">Gender</label>
- <label class="form-radio">
- <input type="radio" name="gender" />
- <i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" checked />
- <i class="form-icon"></i> Female
- </label>
- </div>
- </form>
- </div>
- </div>
- <div class="modal-footer">
- <button class="btn btn-link">Close</button>
- <button class="btn btn-primary">Submit</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <section class="notes">
- <p>Add the class <code>modal-sm</code> for a smaller modal dialog. </p>
- </section>
-
- <!-- modals example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal modal-sm&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
- <span class="com">&lt;!-- modal structure here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="cards" class="container grid-960">
- <header class="text-center"><h4>cards</h4></header>
- <section class="notes">
- <p><strong>Cards</strong> are flexible content containers.</p>
- </section>
- <div class="columns">
- <div class="column col-4 col-xs-12">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" />
- </div>
- <div class="card-header">
- <h4 class="card-title">Microsoft</h4>
- <h6 class="card-meta">Software and hardware</h6>
- </div>
- <div class="card-body">
- Empower every person and every organization on the planet to achieve more.
- </div>
- <div class="card-footer">
- <a href="#" class="btn btn-primary">Do</a>
- </div>
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">Apple</h4>
- <h6 class="card-meta">Hardware and software</h6>
- </div>
- <div class="card-image">
- <img class="img-responsive" src="demo/img/osx-yosemite.jpg" />
- </div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
- </div>
- <div class="card-footer">
- <div class="btn-group btn-group-block">
- <button class="btn btn-primary">Buy</button>
- <button class="btn">Buy</button>
- <button class="btn">Buy</button>
- </div>
- </div>
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">Google</h4>
- <h6 class="card-meta">Software and hardware</h6>
- </div>
- <div class="card-body">
- Organize the world’s information and make it universally accessible and useful.
- </div>
- <div class="card-image">
- <img class="img-responsive" src="demo/img/osx-yosemite-2.jpg" />
- </div>
- <div class="card-footer">
- <a href="#" class="btn btn-primary">Search</a>
- <a href="#" class="btn btn-link">Share</a>
- </div>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-4 col-xs-12">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" />
- </div>
- <div class="card-footer">
- <a href="#" class="btn btn-primary">Buy</a>
- <a href="#" class="btn btn-link">Share</a>
- </div>
- <div class="card-body">
- <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.
- </div>
-
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">Apple</h4>
- <h6 class="card-meta">Hardware and software</h6>
- </div>
- <div class="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
- </div>
- <div class="card-image">
- <img class="img-responsive" src="demo/img/osx-yosemite.jpg" />
- </div>
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="card">
- <div class="card-header">
- <h4 class="card-title">Google I/O</h4>
- </div>
- <div class="card-body">
- An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
- </div>
- <div class="card-footer">
- <div class="chip">
- <div class="chip-content">
- <div class="chip-title">Google</div>
- <div class="chip-meta">Software and hardware</div>
- </div>
- <div class="chip-action">
- <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <section class="notes">
- <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-content</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p>
- </section>
-
- <!-- cards example -->
-<pre class="code lang-html">
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-image&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive&quot;</span> /&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&quot;</span>&gt;
- &lt;<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">&quot;card-title&quot;</span>&gt;Microsoft&lt;<span class="tag">/h4</span>&gt;
- &lt;<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">&quot;card-meta&quot;</span>&gt;Software and hardware&lt;<span class="tag">/h6</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
- To make a contribution to the world by making tools for the mind that advance humankind.
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Do&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="utilities" class="container grid-960">
- <section class="notes text-center">
- <ul class="tab inline-flex">
- <li class="tab-item">
- <a href="#elements">
- elements
- </a>
- </li>
- <li class="tab-item">
- <a href="#layout">
- layout
- </a>
- </li>
- <li class="tab-item">
- <a href="#components">
- components
- </a>
- </li>
- <li class="tab-item active">
- <a href="#utilities">
- utilities
- </a>
- </li>
- </ul>
- </section>
- <section class="notes text-center">
- <div class="btn-group">
- <a href="#position" class="btn btn-primary">position</a>
- <a href="#display" class="btn btn-primary">display</a>
- <a href="#text" class="btn btn-primary">text</a>
- <a href="#shapes" class="btn btn-primary">shapes</a>
- <a href="#loading" class="btn btn-primary">loading</a>
- </div>
- </section>
- </section>
-
- <section id="position" class="container grid-960">
- <section class="notes">
- <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
- </section>
-
- <!-- position utilities example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- clear float --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;clearfix&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- float: left and right --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- position: relative, absolute and fixed --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rel&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;abs&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;fixed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- centered block --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;centered&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-10&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-5&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-10&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-5&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="display" class="container grid-960">
- <section class="notes">
- <p><strong>Display utilities</strong> are used for display and hidden things.</p>
- </section>
-
- <!-- display utilities example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- display: block; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: inline; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;inline&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: inline-block; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;inline-block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: flex; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: inline-flex; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;inline-flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- display: none; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- visibility: visible; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;visible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- visibility: hidden; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;invisible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- hide text contents --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="text" class="container grid-960">
- <section class="notes">
- <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p>
- </section>
-
- <!-- text utilities example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- left-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- center-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-center&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- right-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- justified text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-justify&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Lowercased text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-lowercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Uppercased text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-uppercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Capitalized text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-capitalize&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Normal weight text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-normal&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Bold text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-bold&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Italicized text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-italic&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Larger text (120%) --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-large&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-ellipsis&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-clip&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-break&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="shapes" class="container grid-960">
- <section class="notes">
- <p><strong>Shape utilities</strong> are used for change element shapes.</p>
- </section>
-
- <!-- shape utilities example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- rounded element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rounded&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- circle element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;circle&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="divider" class="container grid-960">
- <section class="notes">
- <p>A <strong>Divider</strong> is used for separating elements.</p>
- </section>
- <div class="columns">
- <div class="column">
- <div class="divider mt-10"></div>
- </div>
- </div>
-
- <!-- shape utilities example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- divider element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
-
- <section id="loading" class="container grid-960">
- <section class="notes">
- <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the class <code>loading</code> to buttons for loading status.</p>
- </section>
- <div class="columns">
- <div class="column">
- <div class="loading"></div>
- </div>
- </div>
- <!-- loading example -->
-<pre class="code lang-html">
-<span class="com">&lt;!-- loading element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</pre>
-
- </section>
- </section>
- <footer class="bg-grey">
- <section id="copyright" class="grid-footer container grid-960">
- <p>
- <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.32
- </p>
- <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
- </section>
- </footer>
- <script>
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
- ga('create', 'UA-2702768-8', 'auto');
- ga('send', 'pageview');
- </script>
-</body>
-</html>