Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into css-variables

Browse Source
This commit is contained in:
Jeremy Thomas
2020-01-05 20:38:06 +00:00
parent 2a3e86cf20 a2768e27ff
commit 65946caa2b
174 changed files with 6337 additions and 3964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/base/generic.sass
View File

@@ -1,4 +1,4 @@
$body-background-color: $white !default
$body-background-color: $scheme-main !default
$body-size: 16px !default
$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default

2
sass/base/minireset.sass
View File

@@ -1,4 +1,4 @@
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,

2
sass/components/breadcrumb.sass
View File

@@ -5,7 +5,7 @@ $breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $grey-light !default
$breadcrumb-item-separator-color: $border-hover !default
.breadcrumb
@extend %block

6
sass/components/card.sass
View File

@@ -1,11 +1,11 @@
$card-color: $text !default
$card-background-color: $white !default
$card-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$card-background-color: $scheme-main !default
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
$card-header-padding: 0.75rem 1rem !default
$card-header-shadow: 0 0.125em 0.25em rgba($black, 0.1) !default
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
$card-header-weight: $weight-bold !default
$card-content-background-color: transparent !default

10
sass/components/dropdown.sass
View File

@@ -1,21 +1,21 @@
$dropdown-menu-min-width: 12rem !default
$dropdown-content-background-color: $white !default
$dropdown-content-background-color: $scheme-main !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$dropdown-content-z: 20 !default
$dropdown-item-color: $grey-dark !default
$dropdown-item-hover-color: $black !default
$dropdown-item-color: $text !default
$dropdown-item-hover-color: $scheme-invert !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default
$dropdown-divider-background-color: $border !default
$dropdown-divider-background-color: $border-light !default
.dropdown
display: inline-flex

4
sass/components/list.sass
View File

@@ -1,5 +1,5 @@
$list-background-color: $white !default
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$list-background-color: $scheme-main !default
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default

6
sass/components/media.sass
View File

@@ -1,3 +1,5 @@
$media-border-color: bulmaRgba($border, 0.5) !default
.media
align-items: flex-start
display: flex
@@ -5,7 +7,7 @@
.content:not(:last-child)
margin-bottom: 0.75rem
.media
border-top: 1px solid rgba($border, 0.5)
border-top: 1px solid $media-border-color
display: flex
padding-top: 0.75rem
.content:not(:last-child),
@@ -16,7 +18,7 @@
& + .media
margin-top: 0.5rem
& + .media
border-top: 1px solid rgba($border, 0.5)
border-top: 1px solid $media-border-color
margin-top: 1rem
padding-top: 1rem
// Sizes

32
sass/components/message.sass
View File

@@ -13,7 +13,7 @@ $message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
$message-body-pre-background-color: $white !default
$message-body-pre-background-color: $scheme-main !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
@@ -41,21 +41,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)
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
@each $name, $components in $message-colors
$color: nth($components, 1)
$color-invert: nth($components, 2)
$color-light: null
$color-dark: null
@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%)
$color-light: lighten($color, $color-lightning)
&.is-#{$name}
background-color: lighten($color, $color-lightning)
background-color: $color-light
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
color: $color-dark
.message-header
align-items: center

4
sass/components/modal.sass
View File

@@ -1,6 +1,6 @@
$modal-z: 40 !default
$modal-background-background-color: rgba($black, 0.86) !default
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
@@ -25,7 +25,7 @@ $modal-card-title-size: $size-4 !default
$modal-card-foot-radius: $radius-large !default
$modal-card-foot-border-top: 1px solid $border !default
$modal-card-body-background-color: $white !default
$modal-card-body-background-color: $scheme-main !default
$modal-card-body-padding: 20px !default
.modal

24
sass/components/navbar.sass
View File

@@ -1,4 +1,4 @@
$navbar-background-color: $white !default
$navbar-background-color: $scheme-main !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default
@@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
$navbar-item-color: $grey-dark !default
$navbar-item-color: $text !default
$navbar-item-hover-color: $link !default
$navbar-item-hover-background-color: $white-bis !default
$navbar-item-active-color: $black !default
$navbar-item-hover-background-color: $scheme-main-bis !default
$navbar-item-active-color: $scheme-invert !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default
@@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default
$navbar-dropdown-background-color: $white !default
$navbar-dropdown-background-color: $scheme-main !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
@@ -32,9 +32,9 @@ $navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$navbar-dropdown-item-hover-color: $black !default
$navbar-dropdown-item-hover-color: $scheme-invert !default
$navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default
@@ -245,7 +245,7 @@ a.navbar-item,
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px rgba($black, 0.1)
box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
padding: 0.5rem 0
&.is-active
display: block
@@ -257,7 +257,7 @@ a.navbar-item,
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
@@ -331,7 +331,7 @@ a.navbar-item,
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
box-shadow: 0 -8px 8px rgba($black, 0.1)
box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
@@ -358,7 +358,7 @@ a.navbar-item,
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
box-shadow: 0 8px 8px rgba($black, 0.1)
box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
left: 0
@@ -409,7 +409,7 @@ a.navbar-item,
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-desktop
top: 0
html,

13
sass/components/pagination.sass
View File

@@ -1,5 +1,5 @@
$pagination-color: $grey-darker !default
$pagination-border-color: $grey-lighter !default
$pagination-color: $text-strong !default
$pagination-border-color: $border !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
@@ -17,9 +17,9 @@ $pagination-focus-border-color: $link-focus-border !default
$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default
$pagination-disabled-color: $grey !default
$pagination-disabled-background-color: $grey-lighter !default
$pagination-disabled-border-color: $grey-lighter !default
$pagination-disabled-color: $text-light !default
$pagination-disabled-background-color: $border !default
$pagination-disabled-border-color: $border !default
$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
@@ -27,9 +27,10 @@ $pagination-current-border-color: $link !default
$pagination-ellipsis-color: $grey-light !default
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
.pagination
@extend %block
font-size: $size-normal
margin: $pagination-margin
// Sizes

18
sass/components/panel.sass
View File

@@ -1,9 +1,9 @@
$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border-light !default
$panel-radius: $radius-large !default
$panel-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$panel-heading-background-color: $white !default
$panel-heading-background-color: $border-light !default
$panel-heading-color: $text-strong !default
$panel-heading-line-height: 1.25 !default
$panel-heading-padding: 0.75em 1em !default
@@ -26,6 +26,7 @@ $panel-block-active-color: $link-active !default
$panel-block-active-icon-color: $link !default
$panel-icon-color: $text-light !default
$panel-colors: $colors !default
.panel
border-radius: $panel-radius
@@ -33,8 +34,19 @@ $panel-icon-color: $text-light !default
font-size: $size-normal
&:not(:last-child)
margin-bottom: $panel-margin
// Colors
@each $name, $components in $panel-colors
$color: nth($components, 1)
$color-invert: nth($components, 2)
&.is-#{$name}
.panel-heading
background-color: $color
color: $color-invert
.panel-tabs a.is-active
border-bottom-color: $color
.panel-block.is-active .panel-icon
color: $color
.panel-heading,
.panel-tabs,
.panel-block
&:not(:last-child)

2
sass/components/tabs.sass
View File

@@ -12,7 +12,7 @@ $tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default
$tabs-boxed-link-active-background-color: $white !default
$tabs-boxed-link-active-background-color: $scheme-main !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default

8
sass/elements/box.sass
View File

@@ -1,11 +1,11 @@
$box-color: $text !default
$box-background-color: $white !default
$box-background-color: $scheme-main !default
$box-radius: $radius-large !default
$box-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0px 0 1px rgba($black, 0.02) !default
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($black, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
.box
@extend %block

51
sass/elements/button.sass
View File

@@ -1,9 +1,9 @@
$button-color: $grey-darker !default
$button-color: $text-strong !default
$button-color-invert: $white !default
$button-background-color: $white !default
$button-background-color: $scheme-main !default
$button-family: false !default
$button-border-color: $grey-lighter !default
$button-border-color: $border !default
$button-border-width: $control-border-width !default
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
@@ -15,7 +15,7 @@ $button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
@@ -30,14 +30,14 @@ $button-text-focus-box-shadow-color: $border-light !default
$button-text-active-background-color: $border-light !default
$button-text-active-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !default
$button-disabled-background-color: $scheme-main !default
$button-disabled-border-color: $border !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default
$button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
$button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
@@ -77,14 +77,14 @@ $button-static-border-color: $grey-lighter !default
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: 0.1875em
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-right: $button-padding-horizontal / 4
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: calc(-0.375em - #{$button-border-width})
margin-left: $button-padding-horizontal / 4
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
&:first-child:last-child
margin-left: calc(-0.375em - #{$button-border-width})
margin-right: calc(-0.375em - #{$button-border-width})
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
// States
&:hover,
&.is-hovered
@@ -213,6 +213,23 @@ $button-static-border-color: $grey-lighter !default
border-color: $color-invert
box-shadow: none
color: $color-invert
// If light and dark colors are provided
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
&:hover,
&.is-hovered
background-color: darken($color-light, 2.5%)
border-color: transparent
color: $color-dark
&:active,
&.is-active
background-color: darken($color-light, 5%)
border-color: transparent
color: $color-dark
// Sizes
&.is-small
+button-small
@@ -247,8 +264,8 @@ $button-static-border-color: $grey-lighter !default
pointer-events: none
&.is-rounded
border-radius: $radius-rounded
padding-left: 1.25em
padding-right: 1.25em
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
.buttons
align-items: center

10
sass/elements/notification.sass
View File

@@ -1,4 +1,5 @@
$notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
@@ -15,7 +16,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
color: currentColor
code,
pre
background: $white
background: $notification-code-background-color
pre code
background: transparent
& > .delete
@@ -33,3 +34,10 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
&.is-#{$name}
background-color: $color
color: $color-invert
// If light and dark colors are provided
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark

12
sass/elements/table.sass
View File

@@ -1,7 +1,7 @@
$table-color: $grey-darker !default
$table-background-color: $white !default
$table-color: $text-strong !default
$table-background-color: $scheme-main !default
$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border: 1px solid $border !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
@@ -15,13 +15,13 @@ $table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default
$table-row-hover-background-color: $white-bis !default
$table-row-hover-background-color: $scheme-main-bis !default
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default
$table-striped-row-even-background-color: $scheme-main-bis !default
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
.table
@extend %block

7
sass/elements/tag.sass
View File

@@ -69,6 +69,13 @@ $tag-delete-margin: 1px !default
&.is-#{$name}
background-color: $color
color: $color-invert
// If a light and dark colors are provided
@if length($pair) > 3
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
// Sizes
&.is-normal
font-size: $size-small

6
sass/elements/title.sass
View File

@@ -1,4 +1,4 @@
$title-color: $grey-darker !default
$title-color: $text-strong !default
$title-family: false !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
@@ -8,12 +8,12 @@ $title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default
$subtitle-color: $grey-dark !default
$subtitle-color: $text !default
$subtitle-family: false !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $grey-darker !default
$subtitle-strong-color: $text-strong !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default

8
sass/form/file.sass
View File

@@ -1,10 +1,10 @@
$file-border-color: $border !default
$file-radius: $radius !default
$file-cta-background-color: $white-ter !default
$file-cta-color: $grey-dark !default
$file-cta-hover-color: $grey-darker !default
$file-cta-active-color: $grey-darker !default
$file-cta-background-color: $scheme-main-ter !default
$file-cta-color: $text !default
$file-cta-hover-color: $text-strong !default
$file-cta-active-color: $text-strong !default
$file-name-border-color: $border !default
$file-name-border-style: solid !default

14
sass/form/input-textarea.sass
View File

@@ -1,3 +1,7 @@
$textarea-padding: $control-padding-horizontal !default
$textarea-max-height: 40em !default
$textarea-min-height: 8em !default
%input-textarea
@extend %input
box-shadow: $input-shadow
@@ -34,8 +38,8 @@
@extend %input-textarea
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
padding-left: calc(#{$control-padding-horizontal} + 0.375em)
padding-right: calc(#{$control-padding-horizontal} + 0.375em)
&.is-static
background-color: transparent
border-color: transparent
@@ -48,11 +52,11 @@
display: block
max-width: 100%
min-width: 100%
padding: 0.625em
padding: $textarea-padding
resize: vertical
&:not([rows])
max-height: 600px
min-height: 120px
max-height: $textarea-max-height
min-height: $textarea-min-height
&[rows]
height: initial
// Modifiers

24
sass/form/shared.sass
View File

@@ -1,27 +1,27 @@
$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !default
$input-color: inherit !default
$input-background-color: $scheme-main !default
$input-border-color: $border !default
$input-height: $control-height !default
$input-shadow: inset 0 1px 2px rgba($black, 0.05) !default
$input-placeholder-color: rgba($input-color, 0.3) !default
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
$input-hover-color: $grey-darker !default
$input-hover-border-color: $grey-light !default
$input-hover-color: $text-strong !default
$input-hover-border-color: $border-hover !default
$input-focus-color: $grey-darker !default
$input-focus-color: $text-strong !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default
$input-icon-color: $border !default
$input-icon-active-color: $text !default
$input-radius: $radius !default

2
sass/form/tools.sass
View File

@@ -1,4 +1,4 @@
$label-color: $grey-darker !default
$label-color: $text-strong !default
$label-weight: $weight-bold !default
$help-size: $size-small !default

2
sass/layout/footer.sass
View File

@@ -1,4 +1,4 @@
$footer-background-color: $white-bis !default
$footer-background-color: $scheme-main-bis !default
$footer-color: false !default
$footer-padding: 3rem 1.5rem 6rem !default

23
sass/layout/hero.sass
View File

@@ -1,5 +1,9 @@
// Main container
$hero-body-padding: 3rem 1.5rem !default
$hero-body-padding-small: 1.5rem !default
$hero-body-padding-medium: 9rem 1.5rem !default
$hero-body-padding-large: 18rem 1.5rem !default
// Main container
.hero
align-items: stretch
display: flex
@@ -23,7 +27,7 @@
.title
color: $color-invert
.subtitle
color: rgba($color-invert, 0.9)
color: bulmaRgba($color-invert, 0.9)
a:not(.button),
strong
color: $color-invert
@@ -32,7 +36,7 @@
background-color: $color
.navbar-item,
.navbar-link
color: rgba($color-invert, 0.7)
color: bulmaRgba($color-invert, 0.7)
a.navbar-item,
.navbar-link
&:hover,
@@ -53,7 +57,7 @@
a
color: $color-invert
&:hover
background-color: rgba($black, 0.1)
background-color: bulmaRgba($scheme-invert, 0.1)
li.is-active a
&,
&:hover
@@ -71,18 +75,15 @@
// Sizes
&.is-small
.hero-body
padding-bottom: 1.5rem
padding-top: 1.5rem
padding: $hero-body-padding-small
&.is-medium
+tablet
.hero-body
padding-bottom: 9rem
padding-top: 9rem
padding: $hero-body-padding-medium
&.is-large
+tablet
.hero-body
padding-bottom: 18rem
padding-top: 18rem
padding: $hero-body-padding-large
&.is-halfheight,
&.is-fullheight,
&.is-fullheight-with-navbar
@@ -140,4 +141,4 @@
.hero-body
flex-grow: 1
flex-shrink: 0
padding: 3rem 1.5rem
padding: $hero-body-padding

37
sass/utilities/derived-variables.sass
View File

@@ -19,16 +19,33 @@ $blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: $turquoise-invert !default
$info-invert: $cyan-invert !default
$success-invert: $green-invert !default
$warning-invert: $yellow-invert !default
$danger-invert: $red-invert !default
$light-invert: $dark !default
$dark-invert: $light !default
$primary-invert: findColorInvert($primary) !default
$primary-light: findLightColor($primary) !default
$primary-dark: findDarkColor($primary) !default
$info-invert: findColorInvert($info) !default
$info-light: findLightColor($info) !default
$info-dark: findDarkColor($info) !default
$success-invert: findColorInvert($success) !default
$success-light: findLightColor($success) !default
$success-dark: findDarkColor($success) !default
$warning-invert: findColorInvert($warning) !default
$warning-light: findLightColor($warning) !default
$warning-dark: findDarkColor($warning) !default
$danger-invert: findColorInvert($danger) !default
$danger-light: findLightColor($danger) !default
$danger-dark: findDarkColor($danger) !default
$light-invert: findColorInvert($light) !default
$dark-invert: findColorInvert($dark) !default
// General colors
$scheme-main: $white !default
$scheme-main-bis: $white-bis !default
$scheme-main-ter: $white-ter !default
$scheme-invert: $black !default
$scheme-invert-bis: $black-bis !default
$scheme-invert-ter: $black-ter !default
$background: $white-ter !default
$border: $grey-lighter !default
@@ -54,7 +71,9 @@ $pre-background: $background !default
// Link colors
$link: $blue !default
$link-invert: $blue-invert !default
$link-invert: findColorInvert($link) !default
$link-light: findLightColor($link) !default
$link-dark: findDarkColor($link) !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
@@ -81,7 +100,7 @@ $size-large: $size-4 !default
$custom-colors: null !default
$custom-shades: null !default
$colors: mergeColorMaps(("white": ($white, $black, "black"), "black": ($black, $white, "white"), "light": ($light, $light-invert, "dark"), "dark": ($dark, $dark-invert, "light"), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

46
sass/utilities/functions.sass
View File

@@ -10,29 +10,43 @@
// or a colors list with at least one element
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
$color-base: null
$color-invert: null
$color-light: null
$color-dark: null
$value: null
// The param can either be a single color
// or a list of 2 colors
@if type-of($components) == 'color'
$color-base: $components
$value: $components
$color-invert: findColorInvert($color-base)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
@else if type-of($components) == 'list'
$color-base: nth($components, 1)
$color-invert: null
// Check if the invert color is provided,
// otherwise compute it
@if length($components) > 1
// If Invert, Light and Dark are provided
@if length($components) > 3
$color-invert: nth($components, 2)
$color-light: nth($components, 3)
$color-dark: nth($components, 4)
// If only Invert and Light are provided
@else if length($components) > 2
$color-invert: nth($components, 2)
$color-light: nth($components, 3)
$color-dark: findDarkColor($color-base)
// If only Invert is provided
@else
$color-invert: findColorInvert($color-base)
$value: ($color-base, $color-invert)
$color-invert: nth($components, 2)
$color-light: findLightColor($color-base)
$color-dark: findDarkColor($color-base)
$value: ($color-base, $color-invert, $color-light, $color-dark)
// We only want to merge the map if the color base is an actual color
@if type-of($color-base) == 'color'
// We merge this colors elements as map with Bulma's colors map
// (we can override them this way, no multiple definition for the same name)
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
$merged-colors: map_merge($merged-colors, ($name: $value))
@return $merged-colors
@@ -68,12 +82,19 @@
@function findLightColor($color)
@if type-of($color) == 'color'
@return change-color($color, $lightness: 96%)
$l: 96%
@if lightness($color) > 96%
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $background
@function findDarkColor($color)
@if type-of($color) == 'color'
@return change-color($color, $lightness: 29%)
$base-l: 29%
$luminance: colorLuminance($color)
$luminance-delta: (0.53 - $luminance)
$target-l: round($base-l + ($luminance-delta * 53))
@return change-color($color, $lightness: max($base-l, $target-l))
@return $text-strong
@function getCssVariable($color, $name)
@@ -82,3 +103,8 @@
$lightness: lightness($color)
$alpha: alpha($color)
@return $hue, $saturation, $lightness
@function bulmaRgba($color, $alpha)
@if type-of($color) == 'color'
@return rgba($color, $alpha)
@return $color

6
sass/utilities/initial-variables.sass
View File

@@ -17,12 +17,12 @@ $white: hsl(0, 0%, 100%) !default
$orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 67%) !default
$green: hsl(141, 61%, 48%) !default
$green: hsl(141, 53%, 53%) !default
$turquoise: hsl(171, 100%, 41%) !default
$cyan: hsl(204, 86%, 53%) !default
$cyan: hsl(204, 71%, 53%) !default
$blue: hsl(217, 71%, 53%) !default
$purple: hsl(271, 100%, 71%) !default
$red: hsl(348, 100%, 61%) !default
$red: hsl(348, 86%, 61%) !default
// Typography

10
sass/utilities/mixins.sass
View File

@@ -48,7 +48,7 @@
&:nth-child(3)
top: calc(50% + 4px)
&:hover
background-color: rgba(black, 0.05)
background-color: bulmaRgba(black, 0.05)
// Modifers
&.is-active
span
@@ -170,7 +170,7 @@
@extend %unselectable
-moz-appearance: none
-webkit-appearance: none
background-color: rgba($black, 0.2)
background-color: bulmaRgba($scheme-invert, 0.2)
border: none
border-radius: $radius-rounded
cursor: pointer
@@ -190,7 +190,7 @@
width: 20px
&::before,
&::after
background-color: $white
background-color: $scheme-main
content: ""
display: block
left: 50%
@@ -206,9 +206,9 @@
width: 2px
&:hover,
&:focus
background-color: rgba($black, 0.3)
background-color: bulmaRgba($scheme-invert, 0.3)
&:active
background-color: rgba($black, 0.4)
background-color: bulmaRgba($scheme-invert, 0.4)
// Sizes
&.is-small
height: 16px