diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-08-29 13:07:53 +0300 |
commit | e78b3c34348f26d40a813612c5a3786f1c56607a (patch) | |
tree | f857491026c5f728fe95fe1564ec30c931a1b30a /docs/src/docs.scss | |
parent | 66c492fd05c2d720c81e2be8d6845560b868e7ff (diff) |
Initial SASS build
Diffstat (limited to 'docs/src/docs.scss')
-rw-r--r-- | docs/src/docs.scss | 512 |
1 files changed, 512 insertions, 0 deletions
diff --git a/docs/src/docs.scss b/docs/src/docs.scss new file mode 100644 index 0000000..6c53773 --- /dev/null +++ b/docs/src/docs.scss @@ -0,0 +1,512 @@ +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ +/* Spectre version */ +.version::after { + content: "0.4.0"; +} +// Core variables and mixins +@import '../../src/variables'; +@import '../../src/mixins'; + +/* Spectre New Docs */ +.s-container { + & > .columns { + flex-flow: nowrap; + min-height: 100vh; + } +} + +.s-sidebar { + background: $bg-color; + flex: 0 0 auto; + padding: 1.5rem 0 1.5rem 1.5rem; + width: 12rem; + + .s-nav { + bottom: 1.5rem; + overflow-y: auto; + position: fixed; + top: 5rem; + width: 10.5rem; + } + + .accordion { + .accordion-item { + margin-bottom: .75rem; + } + + input { + & ~ .accordion-header { + color: darken($gray-color-dark, 10%); + font-size: $font-size-sm; + font-weight: 600; + text-transform: uppercase; + } + &:checked { + & ~ .accordion-header { + color: darken($gray-color-dark, 10%); + } + } + } + + .menu { + .menu-item { + padding-left: 1rem; + + & > a { + background: transparent; + color: $gray-color-dark; + display: inline-block; + } + } + } + } +} + +.s-content { + flex: 1 1 auto; + max-width: 920px; + padding: 0 3rem; + width: calc(100vw - 12rem); + + & > .container { + padding-bottom: 1.5rem; + } + + .anchor { + color: $primary-color-light; + height: 0; + margin-left: -2em; + overflow: hidden; + padding: 0 1em; + position: absolute; + text-align: center; + width: 0; + z-index: $zindex-1; + &:focus, + &:hover { + box-shadow: none; + height: auto; + text-decoration: none; + width: 2em; + } + } + + .s-title, + .s-subtitle { + line-height: 1.6rem; + margin-bottom: 0; + padding-top: 1.5rem; + padding-bottom: 1.5rem; + position: static; + + @supports (position: sticky) { + position: sticky; + top: 0; + z-index: $zindex-2; + + &::before { + background: $light-color; + bottom: 0; + content: ""; + display: block; + left: -10px; + position: absolute; + right: -10px; + top: -5px; + z-index: -$zindex-0; + } + } + + &:hover { + .anchor { + height: auto; + width: 1em; + } + } + + & + .docs-note { + margin-top: .4rem; + } + } + + .docs-note { + margin: 1.5rem 0; + } + + .column { + padding: $layout-spacing; + } + + .docs-block { + border-radius: $border-radius; + padding: $unit-2; + + &.bg-gray { + background: $bg-color-dark; + } + } + + .docs-shape { + height: 4.8rem; + line-height: 1.2rem; + padding: 1.8rem 0; + width: 4.8rem; + } + + .docs-dot { + border-radius: 50%; + display: inline-block; + height: .5rem; + padding: 0; + width: .5rem; + } + + .docs-table { + th, + td { + padding: .75rem .25rem; + } + } + + .docs-color { + border-radius: $border-radius; + margin: .25rem 0; + padding: .5rem; + + .color-subtitle { + font-size: $font-size-sm; + opacity: .75; + } + } + + .panel { + height: 75vh; + + .tile { + margin: .75rem 0; + } + } + + .parallax { + margin: 2rem auto; + } + + .code { + color: lighten($body-font-color, 10%); + + .com { + color: $gray-color; + } + .tag { + color: $primary-color; + } + .atn { + color: lighten($body-font-color, 10%); + } + .atv { + color: #e06870; + } + } + + .empty .icon { + font-size: 2rem; + } + + .form-autocomplete .menu { + position: static; + } + + .example-tile-icon { + align-content: space-around; + align-items: center; + background: $primary-color; + border-radius: $border-radius; + color: $light-color; + display: flex; + font-size: 1.2rem; + height: 2rem; + width: 2rem; + + .icon { + margin: auto; + } + } + + .comparison-slider { + height: auto; + padding-bottom: 56.2222%; + + .filter-grayscale { + filter: grayscale(75%); + } + } +} + +.s-brand { + color: $primary-color; + padding: 0 1.5rem; + position: fixed; + top: 1.3rem; + + .s-logo { + align-items: center; + border-radius: $border-radius; + display: inline-flex; + height: 2rem; + padding: .2rem; + width: auto; + + &:focus, + &:hover { + text-decoration: none; + } + + img { + display: inline; + height: auto; + width: 1.6rem; + } + + h2 { + display: inline; + font-size: .8rem; + margin-bottom: 0; + margin-left: .5rem; + margin-right: .5rem; + } + } + + .float-btn { + position: fixed; + right: 4.5rem; + top: 1.5rem; + } +} + +.s-footer { + color: $gray-color; + padding: .5rem .5rem 1.5rem .5rem; + + a { + color: $gray-color-dark; + } +} + +/* Spectre Homepage style */ +.section-hero { + padding: 1rem .5rem; + position: relative; + + .s-brand { + position: absolute; + + h2 { + color: $primary-color; + } + } + + .column { + padding: $layout-spacing; + } +} + +.section-updates { + padding: 4.5rem .5rem 3.5rem .5rem; + + .card { + border: 0; + color: lighten($body-font-color, 15%); + margin-bottom: 1rem; + } +} + +.section-features { + padding: 4.5rem .5rem; + + .column { + padding: $layout-spacing; + } +} + +.section-footer { + color: $gray-color; + padding: 1.8rem .75rem 1rem .75rem; + position: relative; + z-index: 200; + + a { + color: $gray-color-dark; + } +} + +.grid-hero { + margin-top: 6rem; + margin-bottom: 2rem; + + h1 { + color: $body-font-color; + font-size: 1.6rem; + margin-bottom: 1.5rem; + } + + h2 { + color: lighten($body-font-color, 5%); + font-size: .9rem; + font-weight: 400; + line-height: 1.5rem; + margin-bottom: 1.5rem; + + u { + border-bottom: $border-width-lg solid currentColor; + padding-bottom: $unit-o; + text-decoration: none; + } + } + + .card { + background: none; + border: 0; + color: lighten($body-font-color, 15%); + padding: .5rem; + + .card-title { + color: $primary-color; + font-size: .9rem; + margin-bottom: 0; + } + } +} + +.menu-btn, +.docs-nav-clear { + display: none; +} + +@media (max-width: 880px) { + .s-sidebar { + background: $bg-color; + bottom: 0; + overflow-y: auto; + padding: 3rem 1.5rem; + position: fixed; + left: 0; + top: 0; + transform: translateX(-100%); + transition: transform .2s ease; + z-index: 400; + + &:target { + transform: translateX(0); + transition: transform .2s ease; + + & + .docs-nav-clear { + display: block; + } + } + + .s-nav { + top: 1.5rem; + } + } + + .s-brand { + backdrop-filter: blur(10px); // Safari only feature + background: fade($bg-color, 80%); + height: 3.5rem; + left: 0; + padding: .75rem .5rem; + text-align: center; + top: 0; + right: 0; + z-index: $zindex-3; + + .s-logo { + h2 { + display: none; + } + } + + .menu-btn { + display: block; + left: .65rem; + position: fixed; + top: .95rem; + + .btn { + font-size: 1rem; + } + } + + .float-btn { + right: 1rem; + top: .95rem; + } + } + + .docs-nav-clear { + background: rgba(0, 0, 0, .15); + display: none; + height: 100%; + left: 0; + right: 0; + top: 0; + position: fixed; + width: 100%; + z-index: $zindex-3; + } + + .s-content { + min-width: auto; + padding: 3.5rem 2.5rem 0 2.5rem; + width: 100%; + + .s-title, + .s-subtitle { + padding-top: 5rem; + position: static; + + &::before { + display: none; + } + } + } + + .section-hero { + .s-brand { + height: 5rem; + padding: 1.5rem .5rem; + + .s-logo { + height: auto; + } + + img { + height: 3.2rem; + width: 3.2rem; + } + } + } +} + +@media (max-width: 600px) { + .grid-hero { + h2 { + font-size: .9rem; + } + .card { + padding: 0; + } + } + + .s-content { + padding: 3.5rem .5rem 0 .5rem; + + .docs-block { + padding: $unit-2 $unit-h; + } + + .anchor { + display: none; + } + } +}
\ No newline at end of file |