From 88601b40f06487845e6fb088f3f318b1a830bae2 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 21 Sep 2017 15:56:56 +0800 Subject: Remove Spectre Logo in mobile --- docs/getting-started.html | 3 --- 1 file changed, 3 deletions(-) (limited to 'docs/getting-started.html') diff --git a/docs/getting-started.html b/docs/getting-started.html index 070c5b3..ab21657 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -253,9 +253,6 @@ -
GitHub
-- cgit v1.3.1-23-gd82d From 068eee7a401b9b12975a60dcf7d523593fde2ed6 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 23 Sep 2017 16:22:26 +0800 Subject: Improve Buttons and Forms small and large variables --- README.md | 2 +- docs/components.html | 2 +- docs/dist/spectre.css | 14 +++++++------- docs/dist/spectre.min.css | 2 +- docs/elements.html | 2 +- docs/experimentals.html | 2 +- docs/getting-started.html | 8 ++++---- docs/layout.html | 2 +- docs/utilities.html | 2 +- src/_buttons.scss | 6 +++--- src/_forms.scss | 36 ++++++++++++++++++------------------ src/_variables.scss | 10 ++++++---- 12 files changed, 45 insertions(+), 43 deletions(-) (limited to 'docs/getting-started.html') diff --git a/README.md b/README.md index ea5a547..f70e93c 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ Alternatively, you can use the [unpkg](https://unpkg.com/) or [cdnjs](https://cd ## Compiling custom version -You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#compiling). +You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#custom). ## Documentation and examples diff --git a/docs/components.html b/docs/components.html index 3b29551..77542a3 100644 --- a/docs/components.html +++ b/docs/components.html @@ -37,7 +37,7 @@ Installation
  • gulp watch - watch file changes and re-compile CSS files
  • +

    Importing SASS

    +
    +

    It is recommended to custom Spectre by importing SASS source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.

    +
      +
    • First, create your own project and install Spectre via NPM or other package managers.
    • +
    • Then create your project-name.scss file in the root folder. You can use project-name.scss to define your variables.
    • +
    • Compile the SASS file to CSS to get the custom version of Spectre.
    • +
    + + +
    // Example of project-name.scss
    +// Define variables to override default ones
    +$primary-color: #2e5bec;
    +$dark-color: #3e396b;
    +
    +// Import full Spectre source code
    +@import "node_modules/spectre.css/src/spectre";
    +
    + +

    Alternatively, you can create custom _variables.scss and import it to project-name.scss.

    + + +
    // Example of project-name.scss
    +@import "variables";
    +
    +// Import only the needed components
    +@import "node_modules/spectre.css/src/buttons";
    +@import "node_modules/spectre.css/src/forms";
    +
    + +
    -

    Folder Structure

    +

    Folder Structure

    spectre/
    -- 
    cgit v1.3.1-23-gd82d
    
    
    From c85776603151d35904709277b0a89fcbc200bc87 Mon Sep 17 00:00:00 2001
    From: Yan Zhu 
    Date: Thu, 28 Sep 2017 11:16:33 +0800
    Subject: Update primary color to #5755d9
    
    ---
     docs/components.html          |  34 +++---------
     docs/css/docs.css             |  12 ++--
     docs/dist/spectre-exp.css     |  48 ++++++++--------
     docs/dist/spectre-exp.min.css |   2 +-
     docs/dist/spectre.css         | 124 +++++++++++++++++++++---------------------
     docs/dist/spectre.min.css     |   2 +-
     docs/elements.html            |   2 +-
     docs/experimentals.html       |   4 +-
     docs/getting-started.html     |   8 +--
     docs/img/spectre-logo.svg     |   6 +-
     src/_accordions.scss          |   1 +
     src/_variables.scss           |   4 +-
     12 files changed, 114 insertions(+), 133 deletions(-)
    
    (limited to 'docs/getting-started.html')
    
    diff --git a/docs/components.html b/docs/components.html
    index ba002e4..53036ab 100644
    --- a/docs/components.html
    +++ b/docs/components.html
    @@ -467,7 +467,7 @@
                           Steve Rogers
                         
                         
    -                      
    +
    Tony Stark
    @@ -513,7 +513,7 @@
    -
    +
    Tony Stark @@ -639,10 +639,10 @@ <img src="img/avatar-5.png" class="avatar-icon" alt="..."> </figure> -<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure> +<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure> <!-- Show initals when avatar image is unavailable or not fully loaded --> -<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"> +<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"> <img src="img/avatar-1.png" alt="..."> </figure>
    @@ -778,8 +778,8 @@
    25%
    -
    15%
    -
    10%
    +
    15%
    +
    10%
    15%
    @@ -1086,7 +1086,7 @@
    -
    +
    Tony Stark
    @@ -1457,26 +1457,6 @@

    Modal sizes

    -
    - -
    - +
    diff --git a/docs/experimentals.html b/docs/experimentals.html index d79c15b..fe2ad92 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -404,8 +404,8 @@ diff --git a/docs/getting-started.html b/docs/getting-started.html index c0a3042..cf124b3 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -455,14 +455,14 @@
    Colors
    -
    -
    #5764c6
    +
    +
    #5755d9
    Primary
    -
    -
    #eff1fa
    +
    +
    #f1f1fc
    Secondary
    diff --git a/docs/img/spectre-logo.svg b/docs/img/spectre-logo.svg index b6b53ef..e57cd80 100644 --- a/docs/img/spectre-logo.svg +++ b/docs/img/spectre-logo.svg @@ -8,12 +8,12 @@ - + - - + + diff --git a/src/_accordions.scss b/src/_accordions.scss index 47b6c6b..4c69686 100644 --- a/src/_accordions.scss +++ b/src/_accordions.scss @@ -30,6 +30,7 @@ } } +// Remove default details marker in Webkit summary.accordion-header { &::-webkit-details-marker { display: none; diff --git a/src/_variables.scss b/src/_variables.scss index 400d581..2068adc 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -1,10 +1,10 @@ // Core variables // Colors // Core colors -$primary-color: #5764c6 !default; +$primary-color: #5755d9 !default; $primary-color-dark: darken($primary-color, 3%) !default; $primary-color-light: lighten($primary-color, 3%) !default; -$secondary-color: lighten($primary-color, 40%) !default; +$secondary-color: lighten($primary-color, 37.5%) !default; $secondary-color-dark: darken($secondary-color, 3%) !default; $secondary-color-light: lighten($secondary-color, 3%) !default; -- cgit v1.3.1-23-gd82d