diff --git a/docs/_includes/elements/new-tag.html b/docs/_includes/elements/new-tag.html index e4c07b6f..78e027cb 100644 --- a/docs/_includes/elements/new-tag.html +++ b/docs/_includes/elements/new-tag.html @@ -3,8 +3,8 @@
{% if tag_version_value > current_version_value %} - Coming soon! - {{ include.version }} + Coming soon! + {{ include.version }} {% elsif tag_version_value == current_version_value %} New! {{ include.version }} @@ -12,4 +12,4 @@ Since {{ include.version }} {% endif %} -
\ No newline at end of file + diff --git a/docs/bulma-dark.sass b/docs/bulma-dark.sass new file mode 100644 index 00000000..b78a58d7 --- /dev/null +++ b/docs/bulma-dark.sass @@ -0,0 +1,41 @@ +@import ../sass/utilities/initial-variables.sass + +// General colors + +$scheme-main: $black +$scheme-main-bis: $black-bis +$scheme-main-ter: $black-ter +$scheme-invert: $white +$scheme-invert-bis: $white-bis +$scheme-invert-ter: $white-ter + +$background: $black-ter + +$border: $grey-darker +$border-hover: $grey-dark +$border-light: $grey-darker +$border-light-hover: $grey-dark + +// Text colors + +$text: $grey-light +$text-invert: $grey-darker +$text-light: $grey +$text-strong: $white + +// Link colors + +$link-hover: $white +$link-hover-border: $grey-dark + +$link-focus: $white +$link-focus-border: $blue + +$link-active: $white +$link-active-border: $grey-light + +.bd-navbar + background-color: $scheme-main-bis + + &.has-shadow + box-shadow: none diff --git a/docs/bulma-dark.scss b/docs/bulma-dark.scss deleted file mode 100644 index 92a6ec62..00000000 --- a/docs/bulma-dark.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import "../sass/utilities/initial-variables.sass"; - -// General colors - -$scheme-main: $black; -$scheme-main-bis: $black-bis; -$scheme-main-ter: $black-ter; -$scheme-invert: $white; -$scheme-invert-bis: $white-bis; -$scheme-invert-ter: $white-ter; - -$background: $black-ter; - -$border: $grey-darker; -$border-hover: $grey-dark; -$border-light: $grey-darker; -$border-light-hover: $grey-dark; - -// Text colors - -$text: $grey-light; -$text-invert: $grey-darker; -$text-light: $grey; -$text-strong: $white; - -// Link colors - -$link-hover: $white; -$link-hover-border: $grey-dark; - -$link-focus: $white; -$link-focus-border: $blue; - -$link-active: $white; -$link-active-border: $grey-light; diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 068be23c..68fc7254 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -24,7 +24,7 @@ $main-spacing: 3rem $intro-width: 1080px $sidebar-width: 10.5rem -// @import "./bulma-dark.scss" +// @import "./bulma-dark" @import "../bulma" %center diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 3da44a84..9a7e5515 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -15,7 +15,7 @@ meta: --- {% capture button_example %} -Button + {% endcapture %} {% capture button_tags_example %} @@ -26,137 +26,156 @@ meta: {% endcapture %} {% capture button_colors_a_example %} -White -Light -Dark -Black -Text + + + + + {% endcapture %} {% capture button_colors_b_example %} -Primary -Link -Info -Success -Warning -Danger +
+ + +
+ +
+ + + + +
+{% endcapture %} + +{% capture button_light_colors_b_example %} +
+ + +
+ +
+ + + + +
{% endcapture %} {% capture button_sizes_example %} -Small -Default -Normal -Medium -Large + + + + + {% endcapture %} {% capture buttons_medium_sizes_example %}
- All - Medium - Size + + +
{% endcapture %} {% capture buttons_small_normal_sizes_example %}
- Small - Small - Small - Normal - Small + + + + +
{% endcapture %} {% capture button_displays_example %} -Small -Normal -Medium -Large + + + + {% endcapture %} {% capture button_outlined_example %} -Outlined -Outlined -Outlined -Outlined -Outlined -Outlined + + + + + + {% endcapture %} {% capture button_inverted_example %} -Inverted -Inverted -Inverted -Inverted -Inverted + + + + + {% endcapture %} {% capture button_inverted_outlined_example %} -Invert Outlined -Invert Outlined -Invert Outlined -Invert Outlined -Invert Outlined + + + + + {% endcapture %} {% capture button_rounded_example %} -Rounded -Rounded -Rounded -Rounded -Rounded -Rounded + + + + + + {% endcapture %} {% capture button_normal_example %} -Normal -Normal -Normal -Normal -Normal -Normal -Normal + + + + + + + {% endcapture %} {% capture button_hover_example %} -Hover -Hover -Hover -Hover -Hover -Hover -Hover + + + + + + + {% endcapture %} {% capture button_focus_example %} -Focus -Focus -Focus -Focus -Focus -Focus -Focus + + + + + + + {% endcapture %} {% capture button_active_example %} -Active -Active -Active -Active -Active -Active -Active + + + + + + + {% endcapture %} {% capture button_loading_example %} -Loading -Loading -Loading -Loading -Loading -Loading -Loading + + + + + + + {% endcapture %} {% capture button_static_example %} @@ -164,159 +183,159 @@ meta: {% endcapture %} {% capture button_disabled_example %} -Disabled -Disabled -Disabled -Disabled -Disabled -Disabled -Disabled + + + + + + + {% endcapture %} {% capture button_fa_example %}

- + + +

- + + + + + + +

{% endcapture %} {% capture button_only_icon_example %}

- +

- + +

- + + +

- + + +

{% endcapture %} {% capture button_group_example %}

- +

- +

- +

{% endcapture %} @@ -324,28 +343,28 @@ meta: {% capture button_addons_example %}

- +

- +

- +

{% endcapture %} @@ -353,133 +372,133 @@ meta: {% capture button_group_addons_example %}

- +

- +

- +

- +

- +

- +

{% endcapture %} {% capture buttons_list %}
- Save changes - Save and continue - Cancel + + +
{% endcapture %} {% capture buttons_multiple %}
- One - Two - Three - Four - Five - Six - Seven - Eight - Nine - Ten - Eleven - Twelve - Thirteen - Fourteen - Fifteen - Sixteen - Seventeen - Eighteen - Nineteen - Twenty + + + + + + + + + + + + + + + + + + + +
{% endcapture %} {% capture buttons_addons %}
- Yes - Maybe - No + + +
{% endcapture %} {% capture buttons_addons_centered %}
- Yes - Maybe - No + + +
{% endcapture %} {% capture buttons_addons_right %}
- Yes - Maybe - No + + +
{% endcapture %} {% capture buttons_addons_selected %}
- Yes - Maybe - No + + +
- Yes - Maybe - No + + +
- Yes - Maybe - No + + +
{% endcapture %} @@ -515,9 +534,25 @@ meta: {% include elements/anchor.html name="Colors" %} +
+

+ The button is available in all the different colors defined by the $colors Sass map. +

+
+ {% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %} -{% include elements/snippet.html wrapper="buttons" content=button_colors_b_example %} +{% include elements/snippet.html content=button_colors_b_example %} + +{% include elements/new-tag.html version="0.8.0" %} + +
+

+ Each color now comes in its light version. Simply append the modifier is-light to the color modifier to apply the light version of the button. +

+
+ +{% include elements/snippet.html content=button_light_colors_b_example %} {% include elements/anchor.html name="Sizes" %} @@ -633,6 +668,26 @@ meta: {% include elements/anchor.html name="States" %} +
+

+ Bulma styles the different states of its buttons. Each state is available as a pseudo-class and a CSS class: +

+ +

+ This allows you to obtain the style of a certain state without having to trigger it. +

+
+

Normal

{% include elements/snippet.html wrapper="buttons" content=button_normal_example %} @@ -651,6 +706,12 @@ meta:

Loading

+
+

+ You can very easily turn a button into its loading version by appending the .is-loading modifier. You don't even need to remove the inner text, which allows the button to maintain its original size between its default and loading states. +

+
+
@@ -659,7 +720,7 @@ meta:

- Since the loading spinner is implemented using the :after pseudo-element, it is not supported by the <input type="submit"> element. Consider using <button type="submit"> instead. + Since the loading spinner is implemented using the ::after pseudo-element, it is not supported by the <input type="submit"> element. Consider using <button type="submit"> instead.

@@ -689,6 +750,12 @@ meta:

Disabled

+
+

+ Bulma supports the use of the disabled Boolean HTML attribute, which prevents the user from interacting with the button. +

+
+
@@ -707,6 +774,12 @@ meta:

With Font Awesome icons

+
+

+ Bulma buttons can easily be enhanced by adding a Font Awesome icon. For the best results, wrap the inner text in a separate <span> element. +

+
+ {% include elements/snippet.html content=button_fa_example clipped=true %}
@@ -755,7 +828,7 @@ meta:

- You can now create a list of buttons with the .buttons container. + You can create a list of buttons by using the .buttons container.

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index ed0efaf6..7ded58e2 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -52,10 +52,22 @@ document.addEventListener('DOMContentLoaded', () => { }); {% endcapture %} +
+

+ The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the .delete element. +

+
+ {% include elements/snippet.html content=notification %} {% include elements/anchor.html name="Colors" %} +
+

+ The notification element is available in all the different colors defined by the $colors Sass map. +

+
+ {% include elements/snippet.html content=notification_colors %}
@@ -63,18 +75,12 @@ document.addEventListener('DOMContentLoaded', () => {

- The Bulma package does not come with any JavaScript. -
- Here is however an implementation example, which sets click handler for delete elements of all notifications on the page, in Vanilla Javascript. + The Bulma package does not come with any JavaScript. Here is however an implementation example, which sets click handler for delete elements of all notifications on the page, in Vanilla Javascript.

{% highlight html %}{{ notification_js_html }}{% endhighlight %} {% highlight javascript %}{{ notification_js_code }}{% endhighlight %} - -

- Remember, these are just implementation examples. The Bulma package does not come with any JavaScript. -

diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 60058579..e717ed93 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -41,10 +41,22 @@ meta: 60% {% endcapture %} +
+

+ The Bulma progress bar is a simple CSS class that styles the native <progress> HTML element. +

+
+ {% include elements/snippet.html content=progress %} {% include elements/anchor.html name="Colors" %} +
+

+ The progress bar element is available in all the different colors defined by the $colors Sass map. +

+
+ {% include elements/snippet.html content=progress_colors %} {% include elements/anchor.html name="Sizes" %} diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index 17fef33e..77630862 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -101,7 +101,7 @@ variables_keys:
- +
{% endcapture %} diff --git a/sass/components/message.sass b/sass/components/message.sass index d65c00c3..89e4cc9a 100644 --- a/sass/components/message.sass +++ b/sass/components/message.sass @@ -37,34 +37,33 @@ $message-colors: $colors !default &.is-large font-size: $size-large // Colors - @each $name, $pair in $message-colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) + @each $name, $components in $message-colors + $color: nth($components, 1) + $color-invert: nth($components, 2) + $color-light: null + $color-dark: null - $light-background: null - @if length($pair) > 2 - $light-background: nth($pair, 3) + @if length($components) >= 3 + $color-light: nth($components, 3) + @if length($components) >= 4 + $color-dark: nth($components, 4) + @else + $color-luminance: colorLuminance($color) + $darken-percentage: $color-luminance * 70% + $desaturate-percentage: $color-luminance * 30% + $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) @else $color-lightning: max((100% - lightness($color)) - 2%, 0%) - $light-background: lighten($color, $color-lightning) - - $dark-color: null - @if length($pair) > 3 - $dark-color: nth($pair, 4) - @else - $color-luminance: colorLuminance($color) - $darken-percentage: $color-luminance * 70% - $desaturate-percentage: $color-luminance * 30% - $dark-color: desaturate(darken($color, $darken-percentage), $desaturate-percentage) + $color-light: lighten($color, $color-lightning) &.is-#{$name} - background-color: $light-background + background-color: $color-light .message-header background-color: $color color: $color-invert .message-body border-color: $color - color: $dark-color + color: $color-dark .message-header align-items: center diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass index 89badf48..822c2e81 100644 --- a/sass/components/pagination.sass +++ b/sass/components/pagination.sass @@ -30,6 +30,7 @@ $pagination-ellipsis-color: $grey-light !default $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) .pagination + @extend %block font-size: $size-normal margin: $pagination-margin // Sizes diff --git a/sass/elements/button.sass b/sass/elements/button.sass index f266e3da..22078aef 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -207,7 +207,7 @@ $button-static-border-color: $border !default box-shadow: none color: $color-invert // If light and dark colors are provided - @if length($pair) > 3 + @if length($pair) >= 4 $color-light: nth($pair, 3) $color-dark: nth($pair, 4) &.is-light