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

Add more variables

Browse Source
This commit is contained in:
Jeremy Thomas 2019-05-17 13:50:39 +01:00
parent 3a188329f2
commit 565af6ddd9
21 changed files with 290 additions and 667 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
# Files # Files
.DS_Store .DS_Store
.ruby-version .ruby-version
test.html
test.sass test.sass
npm-debug.log npm-debug.log

45
CHANGELOG.md
View File

@ -10,6 +10,51 @@
* #2231 Add `.has-text-weight-medium` helper * #2231 Add `.has-text-weight-medium` helper
* #2224 Add customizable border radius to progress bar * #2224 Add customizable border radius to progress bar
### New variables
#### Initial variables
* `$block-spacing`
#### Base
* `$body-font-size`
* `$small-font-size`
* `$pre-font-size`
* `$pre-padding`
* `$pre-code-font-size`
#### Components
* `$card-header-padding`
* `$card-content-padding`
* `$card-media-margin`
* `$dropdown-menu-min-width`
* `$dropdown-content-padding-bottom`
* `$dropdown-content-padding-top`
* `$level-item-spacing`
* `$menu-list-line-height`
* `$menu-list-link-padding`
* `$menu-nested-list-margin`
* `$menu-nested-list-padding-left`
* `$menu-label-font-size`
* `$menu-label-letter-spacing`
* `$menu-label-spacing`
* `$pagination-item-font-size`
* `$pagination-item-margin`
* `$pagination-item-padding-left`
* `$pagination-item-padding-right`
* `$panel-margin`
* `$panel-tabs-font-size`
#### Elements
* `$container-offset`
#### Grid
* `$tile-spacing`
### Improvements ### Improvements
* #2396 Update docs with webpack 4 example * #2396 Update docs with webpack 4 example

745
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

2
docs/documentation/modifiers/helpers.html
View File

@ -35,7 +35,7 @@ breadcrumb:
<td>Removes any <strong>padding</strong></td> <td>Removes any <strong>padding</strong></td>
</tr> </tr>
<tr> <tr>
<th rowspan="7">Other</th> <th rowspan="9">Other</th>
<td><code>is-overlay</code></td> <td><code>is-overlay</code></td>
<td>Completely covers the first positioned parent</td> <td>Completely covers the first positioned parent</td>
</tr> </tr>

27
sass/base/generic.sass
View File

@ -1,18 +1,23 @@
$body-background-color: $white !default $body-background-color: $white !default
$body-size: 16px !default $body-size: 16px !default
$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default $body-rendering: optimizeLegibility !default
$body-family: $family-primary !default $body-family: $family-primary !default
$body-color: $text !default
$body-weight: $weight-normal !default
$body-line-height: 1.5 !default
$body-overflow-x: hidden !default $body-overflow-x: hidden !default
$body-overflow-y: scroll !default $body-overflow-y: scroll !default
$body-color: $text !default
$body-font-size: 1em !default
$body-weight: $weight-normal !default
$body-line-height: 1.5 !default
$code-family: $family-code !default $code-family: $family-code !default
$code-padding: 0.25em 0.5em 0.25em !default $code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default $code-weight: normal !default
$code-size: 0.875em !default $code-size: 0.875em !default
$small-font-size: 0.875em !default
$hr-background-color: $background !default $hr-background-color: $background !default
$hr-height: 2px !default $hr-height: 2px !default
$hr-margin: 1.5rem 0 !default $hr-margin: 1.5rem 0 !default
@ -20,12 +25,16 @@ $hr-margin: 1.5rem 0 !default
$strong-color: $text-strong !default $strong-color: $text-strong !default
$strong-weight: $weight-bold !default $strong-weight: $weight-bold !default
$pre-font-size: 0.875em !default
$pre-padding: 1.25rem 1.5rem !default
$pre-code-font-size: 1em !default
html html
background-color: $body-background-color background-color: $body-background-color
font-size: $body-size font-size: $body-size
-moz-osx-font-smoothing: grayscale -moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
min-width: 300px min-width: $body-min-width
overflow-x: $body-overflow-x overflow-x: $body-overflow-x
overflow-y: $body-overflow-y overflow-y: $body-overflow-y
text-rendering: $body-rendering text-rendering: $body-rendering
@ -55,7 +64,7 @@ pre
body body
color: $body-color color: $body-color
font-size: 1rem font-size: $body-font-size
font-weight: $body-weight font-weight: $body-weight
line-height: $body-line-height line-height: $body-line-height
@ -93,7 +102,7 @@ input[type="radio"]
vertical-align: baseline vertical-align: baseline
small small
font-size: 0.875em font-size: $small-font-size
span span
font-style: inherit font-style: inherit
@ -112,15 +121,15 @@ pre
+overflow-touch +overflow-touch
background-color: $pre-background background-color: $pre-background
color: $pre color: $pre
font-size: 0.875em font-size: $pre-font-size
overflow-x: auto overflow-x: auto
padding: 1.25rem 1.5rem padding: $pre-padding
white-space: pre white-space: pre
word-wrap: normal word-wrap: normal
code code
background-color: transparent background-color: transparent
color: currentColor color: currentColor
font-size: 1em font-size: $pre-code-font-size
padding: 0 padding: 0
table table

2
sass/base/helpers.sass
View File

@ -278,4 +278,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@extend %unselectable @extend %unselectable
.is-relative .is-relative
position: relative position: relative !important

15
sass/components/card.sass
View File

@ -4,13 +4,18 @@ $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$card-header-background-color: transparent !default $card-header-background-color: transparent !default
$card-header-color: $text-strong !default $card-header-color: $text-strong !default
$card-header-padding: 0.75rem !default
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
$card-header-weight: $weight-bold !default $card-header-weight: $weight-bold !default
$card-content-background-color: transparent !default $card-content-background-color: transparent !default
$card-content-padding: 1.5rem !default
$card-footer-background-color: transparent !default $card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid $border !default $card-footer-border-top: 1px solid $border !default
$card-footer-padding: 0.75rem !default
$card-media-margin: $block-spacing !default
.card .card
background-color: $card-background-color background-color: $card-background-color
@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
display: flex display: flex
flex-grow: 1 flex-grow: 1
font-weight: $card-header-weight font-weight: $card-header-weight
padding: 0.75rem padding: $card-header-padding
&.is-centered &.is-centered
justify-content: center justify-content: center
@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
cursor: pointer cursor: pointer
display: flex display: flex
justify-content: center justify-content: center
padding: 0.75rem padding: $card-header-padding
.card-image .card-image
display: block display: block
@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
.card-content .card-content
background-color: $card-content-background-color background-color: $card-content-background-color
padding: 1.5rem padding: $card-content-padding
.card-footer .card-footer
background-color: $card-footer-background-color background-color: $card-footer-background-color
@ -63,7 +68,7 @@ $card-footer-border-top: 1px solid $border !default
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0
justify-content: center justify-content: center
padding: 0.75rem padding: $card-footer-padding
&:not(:last-child) &:not(:last-child)
border-right: $card-footer-border-top border-right: $card-footer-border-top
@ -71,4 +76,4 @@ $card-footer-border-top: 1px solid $border !default
.card .card
.media:not(:last-child) .media:not(:last-child)
margin-bottom: 0.75rem margin-bottom: $card-media-margin

10
sass/components/dropdown.sass
View File

@ -1,6 +1,10 @@
$dropdown-menu-min-width: 12rem !default
$dropdown-content-background-color: $white !default $dropdown-content-background-color: $white !default
$dropdown-content-arrow: $link !default $dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !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-radius: $radius !default
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$dropdown-content-z: 20 !default $dropdown-content-z: 20 !default
@ -35,7 +39,7 @@ $dropdown-divider-background-color: $border !default
.dropdown-menu .dropdown-menu
display: none display: none
left: 0 left: 0
min-width: 12rem min-width: $dropdown-menu-min-width
padding-top: $dropdown-content-offset padding-top: $dropdown-content-offset
position: absolute position: absolute
top: 100% top: 100%
@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
background-color: $dropdown-content-background-color background-color: $dropdown-content-background-color
border-radius: $dropdown-content-radius border-radius: $dropdown-content-radius
box-shadow: $dropdown-content-shadow box-shadow: $dropdown-content-shadow
padding-bottom: 0.5rem padding-bottom: $dropdown-content-padding-bottom
padding-top: 0.5rem padding-top: $dropdown-content-padding-top
.dropdown-item .dropdown-item
color: $dropdown-item-color color: $dropdown-item-color

8
sass/components/level.sass
View File

@ -1,3 +1,5 @@
$level-item-spacing: ($block-spacing / 2) !default
.level .level
@extend %block @extend %block
align-items: center align-items: center
@ -18,7 +20,7 @@
.level-item .level-item
&:not(:last-child) &:not(:last-child)
margin-bottom: 0 margin-bottom: 0
margin-right: 0.75rem margin-right: $level-item-spacing
&:not(.is-narrow) &:not(.is-narrow)
flex-grow: 1 flex-grow: 1
// Responsiveness // Responsiveness
@ -41,7 +43,7 @@
// Responsiveness // Responsiveness
+mobile +mobile
&:not(:last-child) &:not(:last-child)
margin-bottom: 0.75rem margin-bottom: $level-item-spacing
.level-left, .level-left,
.level-right .level-right
@ -55,7 +57,7 @@
// Responsiveness // Responsiveness
+tablet +tablet
&:not(:last-child) &:not(:last-child)
margin-right: 0.75rem margin-right: $level-item-spacing
.level-left .level-left
align-items: center align-items: center

23
sass/components/menu.sass
View File

@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default $menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default $menu-list-border-left: 1px solid $border !default
$menu-list-line-height: 1.25 !default
$menu-list-link-padding: 0.5em 0.75em !default
$menu-nested-list-margin: 0.75em !default
$menu-nested-list-padding-left: 0.75em !default
$menu-label-color: $text-light !default $menu-label-color: $text-light !default
$menu-label-font-size: 0.75em !default
$menu-label-letter-spacing: 0.1em !default
$menu-label-spacing: 1em !default
.menu .menu
font-size: $size-normal font-size: $size-normal
@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
font-size: $size-large font-size: $size-large
.menu-list .menu-list
line-height: 1.25 line-height: $menu-list-line-height
a a
border-radius: $menu-item-radius border-radius: $menu-item-radius
color: $menu-item-color color: $menu-item-color
display: block display: block
padding: 0.5em 0.75em padding: $menu-list-link-padding
&:hover &:hover
background-color: $menu-item-hover-background-color background-color: $menu-item-hover-background-color
color: $menu-item-hover-color color: $menu-item-hover-color
@ -36,15 +43,15 @@ $menu-label-color: $text-light !default
li li
ul ul
border-left: $menu-list-border-left border-left: $menu-list-border-left
margin: 0.75em margin: $menu-nested-list-margin
padding-left: 0.75em padding-left: $menu-nested-list-padding-left
.menu-label .menu-label
color: $menu-label-color color: $menu-label-color
font-size: 0.75em font-size: $menu-label-font-size
letter-spacing: 0.1em letter-spacing: $menu-label-letter-spacing
text-transform: uppercase text-transform: uppercase
&:not(:first-child) &:not(:first-child)
margin-top: 1em margin-top: $menu-label-spacing
&:not(:last-child) &:not(:last-child)
margin-bottom: 1em margin-bottom: $menu-label-spacing

3
sass/components/message.sass
View File

@ -17,6 +17,7 @@ $message-body-pre-background-color: $white !default
$message-body-pre-code-background-color: transparent !default $message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default $message-header-body-border-width: 0 !default
$message-colors: $colors !default
.message .message
@extend %block @extend %block
@ -36,7 +37,7 @@ $message-header-body-border-width: 0 !default
&.is-large &.is-large
font-size: $size-large font-size: $size-large
// Colors // Colors
@each $name, $pair in $colors @each $name, $pair in $message-colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
$color-lightning: max((100% - lightness($color)) - 2%, 0%) $color-lightning: max((100% - lightness($color)) - 2%, 0%)

2
sass/components/modal.sass
View File

@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
border-top: $modal-card-foot-border-top border-top: $modal-card-foot-border-top
.button .button
&:not(:last-child) &:not(:last-child)
margin-right: 10px margin-right: 0.5em
.modal-card-body .modal-card-body
+overflow-touch +overflow-touch

13
sass/components/pagination.sass
View File

@ -3,6 +3,11 @@ $pagination-border-color: $grey-lighter !default
$pagination-margin: -0.25rem !default $pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default $pagination-min-width: $control-height !default
$pagination-item-font-size: 1em !default
$pagination-item-margin: 0.25rem !default
$pagination-item-padding-left: 0.5em !default
$pagination-item-padding-right: 0.5em !default
$pagination-hover-color: $link-hover !default $pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default $pagination-hover-border-color: $link-hover-border !default
@ -56,11 +61,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-ellipsis .pagination-ellipsis
@extend %control @extend %control
@extend %unselectable @extend %unselectable
font-size: 1em font-size: $pagination-item-font-size
padding-left: 0.5em
padding-right: 0.5em
justify-content: center justify-content: center
margin: 0.25rem margin: $pagination-item-margin
padding-left: $pagination-item-padding-left
padding-right: $pagination-item-padding-right
text-align: center text-align: center
.pagination-previous, .pagination-previous,

6
sass/components/panel.sass
View File

@ -1,3 +1,4 @@
$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border !default $panel-item-border: 1px solid $border !default
$panel-heading-background-color: $background !default $panel-heading-background-color: $background !default
@ -8,6 +9,7 @@ $panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default $panel-heading-size: 1.25em !default
$panel-heading-weight: $weight-light !default $panel-heading-weight: $weight-light !default
$panel-tabs-font-size: 0.875em !default
$panel-tab-border-bottom: 1px solid $border !default $panel-tab-border-bottom: 1px solid $border !default
$panel-tab-active-border-bottom-color: $link-active-border !default $panel-tab-active-border-bottom-color: $link-active-border !default
$panel-tab-active-color: $link-active !default $panel-tab-active-color: $link-active !default
@ -26,7 +28,7 @@ $panel-icon-color: $text-light !default
.panel .panel
font-size: $size-normal font-size: $size-normal
&:not(:last-child) &:not(:last-child)
margin-bottom: 1.5rem margin-bottom: $panel-margin
.panel-heading, .panel-heading,
.panel-tabs, .panel-tabs,
@ -49,7 +51,7 @@ $panel-icon-color: $text-light !default
.panel-tabs .panel-tabs
align-items: flex-end align-items: flex-end
display: flex display: flex
font-size: 0.875em font-size: $panel-tabs-font-size
justify-content: center justify-content: center
a a
border-bottom: $panel-tab-border-bottom border-bottom: $panel-tab-border-bottom

1
sass/elements/button.sass
View File

@ -269,6 +269,7 @@ $button-static-border-color: $grey-lighter !default
z-index: 4 z-index: 4
&.is-expanded &.is-expanded
flex-grow: 1 flex-grow: 1
flex-shrink: 1
&.is-centered &.is-centered
justify-content: center justify-content: center
&:not(.has-addons) &:not(.has-addons)

12
sass/elements/container.sass
View File

@ -1,21 +1,23 @@
$container-offset: (2 * $gap) !default
.container .container
flex-grow: 1 flex-grow: 1
margin: 0 auto margin: 0 auto
position: relative position: relative
width: auto width: auto
+desktop +desktop
max-width: $desktop - (2 * $gap) max-width: $desktop - $container-offset
&.is-fluid &.is-fluid
margin-left: $gap margin-left: $gap
margin-right: $gap margin-right: $gap
max-width: none max-width: none
+until-widescreen +until-widescreen
&.is-widescreen &.is-widescreen
max-width: $widescreen - (2 * $gap) max-width: $widescreen - $container-offset
+until-fullhd +until-fullhd
&.is-fullhd &.is-fullhd
max-width: $fullhd - (2 * $gap) max-width: $fullhd - $container-offset
+widescreen +widescreen
max-width: $widescreen - (2 * $gap) max-width: $widescreen - $container-offset
+fullhd +fullhd
max-width: $fullhd - (2 * $gap) max-width: $fullhd - $container-offset

1
sass/elements/form.sass
View File

@ -471,6 +471,7 @@ $help-size: $size-small !default
z-index: 4 z-index: 4
&.is-expanded &.is-expanded
flex-grow: 1 flex-grow: 1
flex-shrink: 1
&.has-addons-centered &.has-addons-centered
justify-content: center justify-content: center
&.has-addons-right &.has-addons-right

14
sass/grid/tiles.sass
View File

@ -1,3 +1,5 @@
$tile-spacing: 0.75rem !default
.tile .tile
align-items: stretch align-items: stretch
display: block display: block
@ -7,17 +9,17 @@
min-height: min-content min-height: min-content
// Modifiers // Modifiers
&.is-ancestor &.is-ancestor
margin-left: -0.75rem margin-left: $tile-spacing * -1
margin-right: -0.75rem margin-right: $tile-spacing * -1
margin-top: -0.75rem margin-top: $tile-spacing * -1
&:last-child &:last-child
margin-bottom: -0.75rem margin-bottom: $tile-spacing * -1
&:not(:last-child) &:not(:last-child)
margin-bottom: 0.75rem margin-bottom: $tile-spacing
&.is-child &.is-child
margin: 0 !important margin: 0 !important
&.is-parent &.is-parent
padding: 0.75rem padding: $tile-spacing
&.is-vertical &.is-vertical
flex-direction: column flex-direction: column
& > .tile.is-child:not(:last-child) & > .tile.is-child:not(:last-child)

13
sass/layout/hero.sass
View File

@ -68,19 +68,6 @@
+mobile +mobile
.navbar-menu .navbar-menu
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Responsiveness
// +mobile
// .nav-toggle
// span
// background-color: $color-invert
// &:hover
// background-color: rgba($black, 0.1)
// &.is-active
// span
// background-color: $color-invert
// .nav-menu
// .nav-item
// border-top-color: rgba($color-invert, 0.2)
// Sizes // Sizes
&.is-small &.is-small
.hero-body .hero-body

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

@ -43,6 +43,10 @@ $weight-medium: 500 !default
$weight-semibold: 600 !default $weight-semibold: 600 !default
$weight-bold: 700 !default $weight-bold: 700 !default
// Spacing
$block-spacing: 1.5rem !default
// Responsiveness // Responsiveness
// The container horizontal gap, which acts as the offset for breakpoints // The container horizontal gap, which acts as the offset for breakpoints

4
sass/utilities/mixins.sass
View File

@ -159,9 +159,9 @@
%arrow %arrow
+arrow +arrow
=block =block($spacing: $block-spacing)
&:not(:last-child) &:not(:last-child)
margin-bottom: 1.5rem margin-bottom: $spacing
%block %block
+block +block