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 rtl-support

Browse Source
This commit is contained in:
Jeremy Thomas
2020-05-17 19:14:19 +01:00
parent 79389cbf11 0dc44161bc
commit ff70b7f858
90 changed files with 8752 additions and 1676 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sass/base/helpers.sass
View File

@@ -101,7 +101,7 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
a.has-text-#{$name}
&:hover,
&:focus
color: darken($color, 10%) !important
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important

19
sass/components/navbar.sass
View File

@@ -32,7 +32,7 @@ $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($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
$navbar-dropdown-item-hover-color: $scheme-invert !default
$navbar-dropdown-item-hover-background-color: $background !default
@@ -72,7 +72,7 @@ $navbar-breakpoint: $desktop !default
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
color: $color-invert
.navbar-link
&::after
@@ -90,7 +90,7 @@ $navbar-breakpoint: $desktop !default
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
color: $color-invert
.navbar-link
&::after
@@ -98,7 +98,7 @@ $navbar-breakpoint: $desktop !default
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
color: $color-invert
.navbar-dropdown
a.navbar-item
@@ -244,7 +244,7 @@ a.navbar-item,
display: none
.navbar-menu
background-color: $navbar-background-color
box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
padding: 0.5rem 0
&.is-active
display: block
@@ -256,7 +256,7 @@ a.navbar-item,
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
@@ -319,7 +319,6 @@ a.navbar-item,
align-items: center
display: flex
.navbar-item
display: flex
&.has-dropdown
align-items: stretch
&.has-dropdown-up
@@ -330,7 +329,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($scheme-invert, 0.1)
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
@@ -357,7 +356,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($scheme-invert, 0.1)
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
left: 0
@@ -408,7 +407,7 @@ a.navbar-item,
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
&.is-fixed-top-desktop
top: 0
html,

14
sass/elements/button.sass
View File

@@ -108,7 +108,7 @@ $button-static-border-color: $border !default
color: $button-text-hover-color
&:active,
&.is-active
background-color: darken($button-text-hover-background-color, 5%)
background-color: bulmaDarken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled],
fieldset[disabled] &
@@ -124,7 +124,7 @@ $button-static-border-color: $border !default
color: $color-invert
&:hover,
&.is-hovered
background-color: darken($color, 2.5%)
background-color: bulmaDarken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
@@ -132,10 +132,10 @@ $button-static-border-color: $border !default
border-color: transparent
color: $color-invert
&:not(:active)
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
&:active,
&.is-active
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
border-color: transparent
color: $color-invert
&[disabled],
@@ -148,7 +148,7 @@ $button-static-border-color: $border !default
color: $color
&:hover,
&.is-hovered
background-color: darken($color-invert, 5%)
background-color: bulmaDarken($color-invert, 5%)
&[disabled],
fieldset[disabled] &
background-color: $color-invert
@@ -216,12 +216,12 @@ $button-static-border-color: $border !default
color: $color-dark
&:hover,
&.is-hovered
background-color: darken($color-light, 2.5%)
background-color: bulmaDarken($color-light, 2.5%)
border-color: transparent
color: $color-dark
&:active,
&.is-active
background-color: darken($color-light, 5%)
background-color: bulmaDarken($color-light, 5%)
border-color: transparent
color: $color-dark
// Sizes

2
sass/elements/table.sass
View File

@@ -51,6 +51,8 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
a,
strong
color: currentColor
&.is-vcentered
vertical-align: middle
th
color: $table-cell-heading-color
&:not([align])

14
sass/form/file.sass
View File

@@ -29,19 +29,19 @@ $file-name-max-width: 16em !default
&:hover,
&.is-hovered
.file-cta
background-color: darken($color, 2.5%)
background-color: bulmaDarken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
.file-cta
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.25)
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
color: $color-invert
&:active,
&.is-active
.file-cta
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
border-color: transparent
color: $color-invert
// Sizes
@@ -125,16 +125,16 @@ $file-name-max-width: 16em !default
position: relative
&:hover
.file-cta
background-color: darken($file-cta-background-color, 2.5%)
background-color: bulmaDarken($file-cta-background-color, 2.5%)
color: $file-cta-hover-color
.file-name
border-color: darken($file-name-border-color, 2.5%)
border-color: bulmaDarken($file-name-border-color, 2.5%)
&:active
.file-cta
background-color: darken($file-cta-background-color, 5%)
background-color: bulmaDarken($file-cta-background-color, 5%)
color: $file-cta-active-color
.file-name
border-color: darken($file-name-border-color, 5%)
border-color: bulmaDarken($file-name-border-color, 5%)
.file-input
height: 100%

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

@@ -18,7 +18,7 @@ $textarea-min-height: 8em !default
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small

4
sass/form/select.sass
View File

@@ -48,12 +48,12 @@
border-color: $color
&:hover,
&.is-hovered
border-color: darken($color, 5%)
border-color: bulmaDarken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small

2
sass/form/shared.sass
View File

@@ -1,4 +1,4 @@
$input-color: inherit !default
$input-color: $text-strong !default
$input-background-color: $scheme-main !default
$input-border-color: $border !default
$input-height: $control-height !default

17
sass/layout/hero.sass
View File

@@ -41,7 +41,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
.navbar-link
&:hover,
&.is-active
background-color: darken($color, 5%)
background-color: bulmaDarken($color, 5%)
color: $color-invert
.tabs
a
@@ -65,13 +65,14 @@ $hero-body-padding-large: 18rem 1.5rem !default
border-color: $color-invert
color: $color
// Modifiers
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.navbar-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
@if type-of($color) == 'color'
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.navbar-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Sizes
&.is-small
.hero-body

13
sass/utilities/functions.sass
View File

@@ -62,6 +62,8 @@
@return $value
@function colorLuminance($color)
@if type-of($color) != 'color'
@return 0.55
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
@each $name, $value in $color-rgb
$adjusted: 0
@@ -98,6 +100,11 @@
@return $text-strong
@function bulmaRgba($color, $alpha)
@if type-of($color) == 'color'
@return rgba($color, $alpha)
@return $color
@if type-of($color) != 'color'
@return $color
@return rgba($color, $alpha)
@function bulmaDarken($color, $amount)
@if type-of($color) != 'color'
@return $color
@return darken($color, $amount)