From ea508ef4aa932188a1c8cd3a76bd1be6e318b196 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 12 Sep 2017 23:52:31 +0800 Subject: Add Off-screen experimental code --- docs/src/docs.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'docs/src') diff --git a/docs/src/docs.scss b/docs/src/docs.scss index d7e93aa..a065342 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.4.1"; + content: "0.4.2"; } // Core variables and mixins @import '../../src/variables'; @@ -246,6 +246,11 @@ filter: grayscale(75%); } } + + .off-canvas { + height: 20rem; + position: relative; + } } .s-brand { -- cgit v1.3.1-23-gd82d From a08ac2610bda551dc89f61fcf6da54ce3373e8a0 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 21 Sep 2017 10:41:44 +0800 Subject: Add Ads (TEST) --- README.md | 20 ++++++++++---------- docs/components.html | 30 ++++++++++++++++++++++++++++++ docs/css/docs.css | 17 +++++++++++++++++ docs/elements.html | 30 ++++++++++++++++++++++++++++++ docs/experimentals.html | 26 ++++++++++++++++++++++++++ docs/getting-started.html | 30 ++++++++++++++++++++++++++++-- docs/layout.html | 29 +++++++++++++++++++++++++++++ docs/src/docs.scss | 17 +++++++++++++++++ docs/utilities.html | 29 +++++++++++++++++++++++++++++ 9 files changed, 216 insertions(+), 12 deletions(-) (limited to 'docs/src') diff --git a/README.md b/README.md index 768bd9f..ea5a547 100644 --- a/README.md +++ b/README.md @@ -42,18 +42,18 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt ### Elements -- [Typography](https://picturepan2.github.io/spectre/elements.html#typography) - headings, paragraphs, semantic text, blockquote, lists and code elements, optimized for east asian fonts -- [Tables](https://picturepan2.github.io/spectre/elements.html#tables) - organize and display data -- [Buttons](https://picturepan2.github.io/spectre/elements.html#buttons) - button styles in different types and sizes, and even button groups -- [Forms](https://picturepan2.github.io/spectre/elements.html#forms) - input, radio, checkbox, switch and other form elements -- [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - single-element, responsive and pure CSS icons -- [Labels](https://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information -- [Codes](https://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets -- [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video +- [Typography](https://picturepan2.github.io/spectre/elements.html#typography) +- [Tables](https://picturepan2.github.io/spectre/elements.html#tables) +- [Buttons](https://picturepan2.github.io/spectre/elements.html#buttons) +- [Forms](https://picturepan2.github.io/spectre/elements.html#forms) +- [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - CSS only +- [Labels](https://picturepan2.github.io/spectre/elements.html#labels) +- [Codes](https://picturepan2.github.io/spectre/elements.html#codes) +- [Media](https://picturepan2.github.io/spectre/elements.html#media) ### Layout -- [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system -- [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities +- [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) +- [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) ### Components diff --git a/docs/components.html b/docs/components.html index 68d078e..08e98ac 100644 --- a/docs/components.html +++ b/docs/components.html @@ -263,6 +263,36 @@
+
+

Components

+
+ +
+
+
+ + + + +
+
+ + + +
+
+
+

Accordions

diff --git a/docs/css/docs.css b/docs/css/docs.css index 4295995..171b6a9 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -130,6 +130,23 @@ margin: 1.5rem 0; } +.s-content .docs-ad { + background: #f8f9fa; + border-radius: .1rem; + display: inline-block; + padding: .4rem; + position: relative; +} + +.s-content .docs-ad::before { + color: #acb3c2; + content: "AD"; + font-size: .6rem; + position: absolute; + right: .4rem; + top: .1rem; +} + .s-content .column { padding: .4rem; } diff --git a/docs/elements.html b/docs/elements.html index 8f02dc4..12d2276 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -262,6 +262,36 @@
+
+

Elements

+
+ +
+
+
+ + + + +
+
+ + + +
+
+
+

Typography

diff --git a/docs/experimentals.html b/docs/experimentals.html index f47d983..aeb8e83 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -270,6 +270,32 @@
+
+
+
+ + + + +
+
+ + + +
+
+
+

Calendars

diff --git a/docs/getting-started.html b/docs/getting-started.html index 6dc53c6..070c5b3 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -270,6 +270,32 @@
+
+
+
+ + + + +
+
+ + + +
+
+
+

Installation

@@ -574,10 +600,10 @@ gulp.task('prefix', function() {

April 2017

  • - Accordions: used to toggle sections of content NEW + Accordions: used to toggle sections of content
  • - Filters: CSS only content filters NEW + Filters: CSS only content filters
  • Comparison Sliders: sliders for comparing two images diff --git a/docs/layout.html b/docs/layout.html index 19d5c6f..39013f3 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -262,6 +262,35 @@
+
+

Layout

+
+ +
+
+
+ + + + +
+
+ + + +
+
+

Flexbox grid

diff --git a/docs/src/docs.scss b/docs/src/docs.scss index a065342..11da1f6 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -132,6 +132,23 @@ margin: 1.5rem 0; } + .docs-ad { + background: $bg-color; + border-radius: $border-radius; + display: inline-block; + padding: $layout-spacing; + position: relative; + + &::before { + content: "AD"; + color: $gray-color; + font-size: $font-size-sm; + position: absolute; + right: $layout-spacing; + top: $unit-h; + } + } + .column { padding: $layout-spacing; } diff --git a/docs/utilities.html b/docs/utilities.html index 9247349..b23adda 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -262,6 +262,35 @@
+
+

Utilities

+
+ +
+
+
+ + + + +
+
+ + + +
+
+

Color utilities

-- cgit v1.3.1-23-gd82d From 0ffeef8db4eeaa529a90836f8687e79ec90aa113 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 21 Sep 2017 10:51:17 +0800 Subject: Fix coding style --- docs/src/docs.scss | 2 +- src/_codes.scss | 2 +- src/_off-canvas.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/src') diff --git a/docs/src/docs.scss b/docs/src/docs.scss index 11da1f6..383d7c6 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -140,8 +140,8 @@ position: relative; &::before { - content: "AD"; color: $gray-color; + content: "AD"; font-size: $font-size-sm; position: absolute; right: $layout-spacing; diff --git a/src/_codes.scss b/src/_codes.scss index 3d2cc10..af7ac90 100644 --- a/src/_codes.scss +++ b/src/_codes.scss @@ -12,8 +12,8 @@ code { position: relative; &::before { - content: attr(data-lang); color: $gray-color; + content: attr(data-lang); font-size: $font-size-sm; position: absolute; right: $layout-spacing; diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss index 35aa8bf..8364bff 100644 --- a/src/_off-canvas.scss +++ b/src/_off-canvas.scss @@ -35,8 +35,8 @@ &:checked ~ .off-canvas-toggle { background: rgba($dark-color, .1); border-color: transparent; - bottom: 0; border-radius: 0; + bottom: 0; height: 100%; left: 0; right: 0; @@ -79,4 +79,4 @@ display: none; } } -} \ No newline at end of file +} -- cgit v1.3.1-23-gd82d