library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #1456

Browse Source
This commit is contained in:
Jeremy Thomas 2017-12-04 19:28:07 +00:00
parent 31ec88ea3e
commit 6f964e7260
4 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -6,6 +6,10 @@
* New `.is-italic` helper * New `.is-italic` helper
### Bug fixes
* #1456 Fix customize documentation
## 0.6.2 ## 0.6.2
### Improvements ### Improvements

4
docs/.gitignore vendored
View File

@ -5,11 +5,15 @@
_config.local.yml _config.local.yml
_config.version.yml _config.version.yml
bulma-test.sass bulma-test.sass
bulma-test.scss
bulma-test.css
bulma-website-local.sass bulma-website-local.sass
css/bulma-test.css css/bulma-test.css
css/bulma-docs.css.map css/bulma-docs.css.map
PUBLISHING.md PUBLISHING.md
npm-debug.log npm-debug.log
test.sass
test.scss
# Folders # Folders

46
docs/documentation/overview/customize.html
View File

@ -5,48 +5,48 @@ doc-tab: overview
doc-subtab: customize doc-subtab: customize
--- ---
{% capture sass %} {% capture scss_code %}
// 1. Import the initial variables // 1. Import the initial variables
@import "../sass/utilities/initial-variables" @import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions" @import "../sass/utilities/functions";
// 2. Set your own initial variables // 2. Set your own initial variables
// Update blue // Update blue
$blue: #72d0eb $blue: #72d0eb;
// Add pink and its invert // Add pink and its invert
$pink: #ffb3b3 $pink: #ffb3b3;
$pink-invert: #fff $pink-invert: #fff;
// Add a serif family // Add a serif family
$family-serif: "Merriweather", "Georgia", serif $family-serif: "Merriweather", "Georgia", serif;
// 3. Set the derived variables // 3. Set the derived variables
// Use the new pink as the primary color // Use the new pink as the primary color
$primary: $pink $primary: $pink;
$primary-invert: $pink-invert $primary-invert: $pink-invert;
// Use the existing orange as the danger color // Use the existing orange as the danger color
$danger: $orange $danger: $orange;
// Use the new serif family // Use the new serif family
$family-primary: $family-serif $family-primary: $family-serif;
// 4. Setup your Custom Colors // 4. Setup your Custom Colors
$linkedin: #0077B5 $linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin) $linkedin-invert: findColorInvert($linkedin);
$twitter: #1DA1F2 $twitter: #55acee;
$twitter-invert: findColorInvert($twitter) $twitter-invert: findColorInvert($twitter);
$github: #222222 $github: #333;
$github-invert: findColorInvert($github) $github-invert: findColorInvert($github);
// 5. Add new color variables to the color map. // 5. Add new color variables to the color map.
@import "../sass/utilities/derived-variables.sass" @import "../sass/utilities/derived-variables.sass";
$addColors: ( $addColors: (
"twitter":($twitter, $twitter-invert), "twitter":($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert), "linkedin": ($linkedin, $linkedin-invert),
"github": ($github, $github-invert) "github": ($github, $github-invert)
) );
$colors: map-merge($colors, $addColors) $colors: map-merge($colors, $addColors);
// 6. Import the rest of Bulma // 6. Import the rest of Bulma
@import "../bulma" @import "../bulma";
{% endcapture %} {% endcapture %}
{% include subnav-overview.html %} {% include subnav-overview.html %}
@ -84,10 +84,10 @@ $colors: map-merge($colors, $addColors)
<strong>Set</strong> your variables <strong>Set</strong> your variables
</p> </p>
<p class="subtitle is-6"> <p class="subtitle is-6">
Add your own colors, set new fonts, override Bulma's default styles... Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
</p> </p>
<div class="highlight-full"> <div class="highlight-full">
{% highlight sass %}{{ sass }}{% endhighlight %} {% highlight sass %}{{ scss_code }}{% endhighlight %}
</div> </div>
</div> </div>
</article> </article>

3
package.json
View File

@ -39,7 +39,8 @@
"start": "npm run build-sass -- --watch", "start": "npm run build-sass -- --watch",
"start-docs": "npm run docs-sass -- --watch", "start-docs": "npm run docs-sass -- --watch",
"start-test": "npm run test-sass -- --watch", "start-test": "npm run test-sass -- --watch",
"test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css" "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css",
"test-scss": "node-sass --output-style expanded docs/bulma-test.scss docs/css/bulma-test.css"
}, },
"files": [ "files": [
"css", "css",