mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 03:14:30 -07:00
Explain findColorInvert
This commit is contained in:
@@ -50,14 +50,16 @@ npm install bulma
|
||||
// 2. Set your own initial variables
|
||||
// Update blue
|
||||
$blue: #72d0eb
|
||||
// Add pink
|
||||
// Add pink and its invert
|
||||
$pink: #ffb3b3
|
||||
$pink-invert: #fff
|
||||
// Add a serif family
|
||||
$family-serif: "Merriweather", "Georgia", serif
|
||||
|
||||
// 3. Set the derived variables
|
||||
// Use the new pink as the primary color
|
||||
$primary: $pink
|
||||
$primary-invert: $pink-invert
|
||||
// Use the existing orange as the danger color
|
||||
$danger: $orange
|
||||
// Use the new serif family
|
||||
@@ -79,7 +81,7 @@ $family-primary: $family-serif
|
||||
See the <strong>result</strong>: before and after
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Notice how the <code>$blue-invert</code> is now black instead of white, based on <code>findColorInvert(#72d0eb)</code></p>
|
||||
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
|
||||
</p>
|
||||
<figure>
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
|
||||
|
||||
Reference in New Issue
Block a user