From 2f434ea102649da48d2c3dcdf0b7b6a7508daeac Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 15 Jan 2018 13:10:34 +0800 Subject: Initial commit of RTL support --- docs/dist/docs.css | 526 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 526 insertions(+) create mode 100644 docs/dist/docs.css (limited to 'docs/dist/docs.css') diff --git a/docs/dist/docs.css b/docs/dist/docs.css new file mode 100644 index 0000000..8cd5f24 --- /dev/null +++ b/docs/dist/docs.css @@ -0,0 +1,526 @@ +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ +.version::after { + content: "0.5.1"; +} + +.off-canvas .off-canvas-toggle { + font-size: 1rem; + left: 1.5rem; + position: fixed; + top: 1rem; +} + +.off-canvas .off-canvas-sidebar { + width: 12rem; +} + +.docs-navbar { + height: 3.8rem; + position: fixed; + right: 0; + top: 0; + z-index: 100; +} + +.docs-navbar .btn { + position: absolute; + right: 1.5rem; + top: 1rem; +} + +.docs-sidebar .docs-nav { + bottom: 1.5rem; + -webkit-overflow-scrolling: touch; + overflow-y: auto; + padding: .5rem 1.5rem; + position: fixed; + top: 3.5rem; + width: 12rem; +} + +.docs-sidebar .accordion { + margin-bottom: .75rem; +} + +.docs-sidebar .accordion input ~ .accordion-header { + color: #5b657a; + font-size: .65rem; + font-weight: 600; + text-transform: uppercase; +} + +.docs-sidebar .accordion input:checked ~ .accordion-header { + color: #667189; +} + +.docs-sidebar .accordion .menu .menu-item { + font-size: .7rem; + padding-left: 1rem; +} + +.docs-sidebar .accordion .menu .menu-item > a { + background: transparent; + color: #667189; + display: inline-block; +} + +.docs-content { + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: calc(100vw - 12rem); +} + +.docs-content.off-canvas-content { + padding: 0 4rem; +} + +.docs-content > .container { + margin-left: 0; + max-width: 800px; + padding-bottom: 1.5rem; +} + +.docs-content .anchor { + color: #6362dc; + height: 0; + margin-left: -2em; + overflow: hidden; + padding: 0 1em; + position: absolute; + text-align: center; + width: 0; + z-index: 100; +} + +.docs-content .anchor:focus, +.docs-content .anchor:hover { + box-shadow: none; + height: auto; + text-decoration: none; + width: 2em; +} + +.docs-content .s-title, +.docs-content .s-subtitle { + color: #414857; + line-height: 1.8rem; + margin-bottom: 0; + padding-bottom: 1rem; + padding-top: 1rem; + position: static; +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { + .docs-content .s-title, + .docs-content .s-subtitle { + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 100; + } + .docs-content .s-title::before, + .docs-content .s-subtitle::before { + background: #fff; + bottom: 0; + content: ""; + display: block; + left: -10px; + position: absolute; + right: -10px; + top: -5px; + z-index: -1; + } +} + +.docs-content .s-title:hover .anchor, +.docs-content .s-subtitle:hover .anchor { + height: auto; + width: 1em; +} + +.docs-content .s-title + .docs-note, +.docs-content .s-subtitle + .docs-note { + margin-top: .4rem; +} + +.docs-content .docs-note { + margin: 1.5rem 0; +} + +.docs-content .docs-ad { + background: #f8f9fa; + border-radius: .1rem; + display: inline-block; + padding: .4rem; + position: relative; +} + +.docs-content .docs-ad::before { + color: #acb3c2; + content: "AD"; + font-size: .7rem; + position: absolute; + right: .4rem; + top: .1rem; +} + +.docs-content .column { + padding: .4rem; +} + +.docs-content .docs-block { + border-radius: .1rem; + padding: .4rem; +} + +.docs-content .docs-block.bg-gray { + background: #f0f1f4; +} + +.docs-content .docs-shape { + height: 4.8rem; + line-height: 1.2rem; + padding: 1.8rem 0; + width: 4.8rem; +} + +.docs-content .docs-dot { + border-radius: 50%; + display: inline-block; + height: .5rem; + padding: 0; + width: .5rem; +} + +.docs-content .docs-table th, +.docs-content .docs-table td { + padding: .75rem .25rem; +} + +.docs-content .docs-color { + border-radius: .1rem; + margin: .25rem 0; + padding: .5rem; +} + +.docs-content .docs-color .color-subtitle { + font-size: .7rem; + opacity: .75; +} + +.docs-content .code { + color: #667189; +} + +.docs-content .code .com { + color: #acb3c2; +} + +.docs-content .code .tag { + color: #5755d9; +} + +.docs-content .code .atn { + color: #667189; +} + +.docs-content .code .atv { + color: #e06870; +} + +.docs-content .code[data-lang="Bash"] .tag { + margin-right: 1em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.docs-content .panel { + height: 75vh; +} + +.docs-content .panel .tile { + margin: .75rem 0; +} + +.docs-content .parallax { + margin: 2rem auto; +} + +.docs-content .form-autocomplete .menu { + position: static; +} + +.docs-content .example-tile-icon { + align-content: space-around; + align-items: center; + background: #5755d9; + border-radius: .1rem; + color: #fff; + display: flex; + display: -ms-flexbox; + -ms-flex-align: center; + -ms-flex-line-pack: distribute; + font-size: 1.2rem; + height: 2rem; + width: 2rem; +} + +.docs-content .example-tile-icon .icon { + margin: auto; +} + +.docs-content .comparison-slider { + height: auto; + padding-bottom: 56.2222%; +} + +.docs-content .comparison-slider .filter-grayscale { + -webkit-filter: grayscale(75%); + filter: grayscale(75%); +} + +.docs-content .off-canvas { + position: relative; +} + +.docs-content .off-canvas .off-canvas-toggle { + left: .4rem; + position: absolute; + top: .4rem; + z-index: 1; +} + +.docs-brand { + color: #5755d9; + left: 1.5rem; + position: fixed; + top: .85rem; +} + +.docs-brand .docs-logo { + align-items: center; + border-radius: .1rem; + display: inline-flex; + display: -ms-inline-flexbox; + -ms-flex-align: center; + height: 2rem; + padding: .2rem; + width: auto; +} + +.docs-brand .docs-logo:focus, +.docs-brand .docs-logo:hover { + text-decoration: none; +} + +.docs-brand .docs-logo img { + display: inline; + height: auto; + width: 1.6rem; +} + +.docs-brand .docs-logo h2 { + display: inline; + font-size: .8rem; + font-weight: 700; + line-height: 1.5rem; + margin-bottom: 0; + margin-left: .5rem; + margin-right: .5rem; +} + +.docs-footer { + color: #acb3c2; + padding: .5rem .5rem 1.5rem .5rem; +} + +.docs-footer a { + color: #667189; +} + +.btn .feather { + height: 1rem; + vertical-align: middle; +} + +/* Spectre Homepage style */ +.section-hero { + padding: 1rem .5rem; +} + +.section-hero .docs-brand { + position: absolute; + top: .85rem; +} + +.section-hero .docs-brand h2 { + color: #5755d9; +} + +.section-hero .column { + padding: .4rem; +} + +.section-updates { + padding: 4.5rem .5rem 3.5rem .5rem; +} + +.section-updates .card { + border: 0; + color: #727e96; + margin-bottom: 1rem; +} + +.section-features { + padding: 4.5rem .5rem; +} + +.section-features .column { + padding: .4rem; +} + +.section-footer { + color: #acb3c2; + padding: 1.8rem .75rem 1rem .75rem; + position: relative; + z-index: 200; +} + +.section-footer a { + color: #667189; +} + +.grid-hero { + padding-bottom: 2rem; + padding-top: 6rem; +} + +.grid-hero h1 { + color: #50596c; + font-size: 1.6rem; + margin-bottom: 1.5rem; +} + +.grid-hero h2 { + color: #5b657a; + font-size: .9rem; + font-weight: 400; + line-height: 1.5rem; + margin-bottom: 1.5rem; +} + +.grid-hero h2 u { + border-bottom: .1rem solid currentColor; + padding-bottom: .05rem; + text-decoration: none; +} + +.grid-hero .card { + background: none; + border: 0; + color: #727e96; + padding: .5rem; +} + +.grid-hero .card .card-title { + color: #5755d9; + font-size: .9rem; + margin-bottom: 0; +} + +@media (max-width: 960px) { + .off-canvas .off-canvas-toggle { + z-index: 300; + } + .docs-sidebar .docs-brand { + margin: .85rem 1.5rem; + padding: 0; + position: static; + } + .docs-sidebar .docs-nav { + margin-top: 1rem; + position: static; + } + .docs-sidebar .menu .menu-item > a { + padding: .3rem .4rem; + } + .docs-navbar { + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + background: rgba(248, 249, 250, .65); + left: 0; + } + .docs-content.off-canvas-content { + min-width: auto; + padding: 0 1.5rem; + width: 100%; + } + .docs-content .s-title, + .docs-content .s-subtitle { + padding-top: 5rem; + position: static; + } + .docs-content .s-title::before, + .docs-content .s-subtitle::before { + content: none; + } + .section-hero .s-brand { + height: 5rem; + padding: 1.5rem .5rem; + text-align: center; + width: 100%; + } + .section-hero .s-brand .s-logo { + height: auto; + } + .section-hero .s-brand img { + height: 3.2rem; + width: 3.2rem; + } + .section-hero .s-brand h2 { + display: none; + } +} + +@media (max-width: 600px) { + .grid-hero h2 { + font-size: .9rem; + } + .grid-hero .card { + padding: 0; + } + .off-canvas .off-canvas-toggle { + left: .5rem; + } + .docs-navbar .btn { + right: 1rem; + } + .grid-hero .docs-brand { + left: 1rem; + } + .docs-sidebar .docs-brand { + margin: .85rem 1rem; + } + .docs-sidebar .docs-nav { + padding: .5rem 1rem; + } + .docs-content.off-canvas-content { + padding: 0 .5rem; + } + .docs-content .docs-block { + padding: .4rem .1rem; + } + .docs-content .anchor { + display: none; + } +} + +@media (min-width: 1366px) { + .docs-ad.docs-ad-sidebar { + bottom: 1rem; + position: fixed; + right: 1rem; + } +} \ No newline at end of file -- cgit v1.3.1-23-gd82d