From e78b3c34348f26d40a813612c5a3786f1c56607a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 18:07:53 +0800 Subject: Initial SASS build --- docs/src/docs.less | 512 ----------------------------------------------------- docs/src/docs.scss | 512 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 512 insertions(+), 512 deletions(-) delete mode 100644 docs/src/docs.less create mode 100644 docs/src/docs.scss (limited to 'docs/src') diff --git a/docs/src/docs.less b/docs/src/docs.less deleted file mode 100644 index 432096c..0000000 --- a/docs/src/docs.less +++ /dev/null @@ -1,512 +0,0 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ -/* Spectre version */ -.version::after { - content: "0.3.2"; -} -// Core variables and mixins -@import '../../src/variables.less'; -@import '../../src/mixins.less'; - -/* 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 screen and (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 screen and (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 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 -- cgit v1.3.1-23-gd82d From 8c0f6b2d3ae609b581af7d71610d50e00ab49990 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 29 Aug 2017 21:43:06 +0800 Subject: Improve Docs navbar --- docs/components.html | 30 ++++++++------ docs/css/docs.css | 87 ++++++++++++++++++++++++++-------------- docs/dist/spectre.css | 25 +++++++++++- docs/dist/spectre.min.css | 2 +- docs/elements.html | 29 ++++++++------ docs/experimentals.html | 29 ++++++++------ docs/getting-started.html | 34 ++++++++++------ docs/layout.html | 29 ++++++++------ docs/src/docs.scss | 98 +++++++++++++++++++++++++++++---------------- docs/utilities.html | 29 ++++++++------ gulpfile.js | 1 - src/_accordions.scss | 2 +- src/_chips.scss | 1 + src/_tooltips.scss | 2 + src/utilities/_display.scss | 17 ++++++++ 15 files changed, 275 insertions(+), 140 deletions(-) (limited to 'docs/src') diff --git a/docs/components.html b/docs/components.html index ed34761..251401e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,19 +14,13 @@
-
- -
- -
-
- GitHub -
-