mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add more variables
This commit is contained in:
Jeremy Thomas
parent
3a188329f2
commit
565af6ddd9
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,6 +1,7 @@
|
||||
# Files
|
||||
.DS_Store
|
||||
.ruby-version
|
||||
test.html
|
||||
test.sass
|
||||
npm-debug.log
|
||||
|
||||
|
||||
45
CHANGELOG.md
45
CHANGELOG.md
@ -10,6 +10,51 @@
|
||||
* #2231 Add `.has-text-weight-medium` helper
|
||||
* #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
|
||||
|
||||
* #2396 Update docs with webpack 4 example
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -35,7 +35,7 @@ breadcrumb:
|
||||
<td>Removes any <strong>padding</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="7">Other</th>
|
||||
<th rowspan="9">Other</th>
|
||||
<td><code>is-overlay</code></td>
|
||||
<td>Completely covers the first positioned parent</td>
|
||||
</tr>
|
||||
@ -61,7 +61,7 @@ breadcrumb:
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-hidden</code></td>
|
||||
<td>Hides element</td>
|
||||
<td>Hides element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-sr-only</code></td>
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
$body-background-color: $white !default
|
||||
$body-size: 16px !default
|
||||
$body-min-width: 300px !default
|
||||
$body-rendering: optimizeLegibility !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-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-padding: 0.25em 0.5em 0.25em !default
|
||||
$code-weight: normal !default
|
||||
$code-size: 0.875em !default
|
||||
|
||||
$small-font-size: 0.875em !default
|
||||
|
||||
$hr-background-color: $background !default
|
||||
$hr-height: 2px !default
|
||||
$hr-margin: 1.5rem 0 !default
|
||||
@ -20,12 +25,16 @@ $hr-margin: 1.5rem 0 !default
|
||||
$strong-color: $text-strong !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
|
||||
background-color: $body-background-color
|
||||
font-size: $body-size
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
min-width: 300px
|
||||
min-width: $body-min-width
|
||||
overflow-x: $body-overflow-x
|
||||
overflow-y: $body-overflow-y
|
||||
text-rendering: $body-rendering
|
||||
@ -55,7 +64,7 @@ pre
|
||||
|
||||
body
|
||||
color: $body-color
|
||||
font-size: 1rem
|
||||
font-size: $body-font-size
|
||||
font-weight: $body-weight
|
||||
line-height: $body-line-height
|
||||
|
||||
@ -93,7 +102,7 @@ input[type="radio"]
|
||||
vertical-align: baseline
|
||||
|
||||
small
|
||||
font-size: 0.875em
|
||||
font-size: $small-font-size
|
||||
|
||||
span
|
||||
font-style: inherit
|
||||
@ -112,15 +121,15 @@ pre
|
||||
+overflow-touch
|
||||
background-color: $pre-background
|
||||
color: $pre
|
||||
font-size: 0.875em
|
||||
font-size: $pre-font-size
|
||||
overflow-x: auto
|
||||
padding: 1.25rem 1.5rem
|
||||
padding: $pre-padding
|
||||
white-space: pre
|
||||
word-wrap: normal
|
||||
code
|
||||
background-color: transparent
|
||||
color: currentColor
|
||||
font-size: 1em
|
||||
font-size: $pre-code-font-size
|
||||
padding: 0
|
||||
|
||||
table
|
||||
|
||||
@ -278,4 +278,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
@extend %unselectable
|
||||
|
||||
.is-relative
|
||||
position: relative
|
||||
position: relative !important
|
||||
|
||||
@ -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-color: $text-strong !default
|
||||
$card-header-padding: 0.75rem !default
|
||||
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
|
||||
$card-header-weight: $weight-bold !default
|
||||
|
||||
$card-content-background-color: transparent !default
|
||||
$card-content-padding: 1.5rem !default
|
||||
|
||||
$card-footer-background-color: transparent !default
|
||||
$card-footer-border-top: 1px solid $border !default
|
||||
$card-footer-padding: 0.75rem !default
|
||||
|
||||
$card-media-margin: $block-spacing !default
|
||||
|
||||
.card
|
||||
background-color: $card-background-color
|
||||
@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
|
||||
display: flex
|
||||
flex-grow: 1
|
||||
font-weight: $card-header-weight
|
||||
padding: 0.75rem
|
||||
padding: $card-header-padding
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
|
||||
@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
|
||||
cursor: pointer
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: 0.75rem
|
||||
padding: $card-header-padding
|
||||
|
||||
.card-image
|
||||
display: block
|
||||
@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
|
||||
|
||||
.card-content
|
||||
background-color: $card-content-background-color
|
||||
padding: 1.5rem
|
||||
padding: $card-content-padding
|
||||
|
||||
.card-footer
|
||||
background-color: $card-footer-background-color
|
||||
@ -63,7 +68,7 @@ $card-footer-border-top: 1px solid $border !default
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
justify-content: center
|
||||
padding: 0.75rem
|
||||
padding: $card-footer-padding
|
||||
&:not(:last-child)
|
||||
border-right: $card-footer-border-top
|
||||
|
||||
@ -71,4 +76,4 @@ $card-footer-border-top: 1px solid $border !default
|
||||
|
||||
.card
|
||||
.media:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
margin-bottom: $card-media-margin
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
$dropdown-menu-min-width: 12rem !default
|
||||
|
||||
$dropdown-content-background-color: $white !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 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$dropdown-content-z: 20 !default
|
||||
@ -35,7 +39,7 @@ $dropdown-divider-background-color: $border !default
|
||||
.dropdown-menu
|
||||
display: none
|
||||
left: 0
|
||||
min-width: 12rem
|
||||
min-width: $dropdown-menu-min-width
|
||||
padding-top: $dropdown-content-offset
|
||||
position: absolute
|
||||
top: 100%
|
||||
@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
|
||||
background-color: $dropdown-content-background-color
|
||||
border-radius: $dropdown-content-radius
|
||||
box-shadow: $dropdown-content-shadow
|
||||
padding-bottom: 0.5rem
|
||||
padding-top: 0.5rem
|
||||
padding-bottom: $dropdown-content-padding-bottom
|
||||
padding-top: $dropdown-content-padding-top
|
||||
|
||||
.dropdown-item
|
||||
color: $dropdown-item-color
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
$level-item-spacing: ($block-spacing / 2) !default
|
||||
|
||||
.level
|
||||
@extend %block
|
||||
align-items: center
|
||||
@ -18,7 +20,7 @@
|
||||
.level-item
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0
|
||||
margin-right: 0.75rem
|
||||
margin-right: $level-item-spacing
|
||||
&:not(.is-narrow)
|
||||
flex-grow: 1
|
||||
// Responsiveness
|
||||
@ -41,7 +43,7 @@
|
||||
// Responsiveness
|
||||
+mobile
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
margin-bottom: $level-item-spacing
|
||||
|
||||
.level-left,
|
||||
.level-right
|
||||
@ -55,7 +57,7 @@
|
||||
// Responsiveness
|
||||
+tablet
|
||||
&:not(:last-child)
|
||||
margin-right: 0.75rem
|
||||
margin-right: $level-item-spacing
|
||||
|
||||
.level-left
|
||||
align-items: center
|
||||
|
||||
@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
|
||||
$menu-item-active-background-color: $link !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-font-size: 0.75em !default
|
||||
$menu-label-letter-spacing: 0.1em !default
|
||||
$menu-label-spacing: 1em !default
|
||||
|
||||
.menu
|
||||
font-size: $size-normal
|
||||
@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
|
||||
font-size: $size-large
|
||||
|
||||
.menu-list
|
||||
line-height: 1.25
|
||||
line-height: $menu-list-line-height
|
||||
a
|
||||
border-radius: $menu-item-radius
|
||||
color: $menu-item-color
|
||||
display: block
|
||||
padding: 0.5em 0.75em
|
||||
padding: $menu-list-link-padding
|
||||
&:hover
|
||||
background-color: $menu-item-hover-background-color
|
||||
color: $menu-item-hover-color
|
||||
@ -36,15 +43,15 @@ $menu-label-color: $text-light !default
|
||||
li
|
||||
ul
|
||||
border-left: $menu-list-border-left
|
||||
margin: 0.75em
|
||||
padding-left: 0.75em
|
||||
margin: $menu-nested-list-margin
|
||||
padding-left: $menu-nested-list-padding-left
|
||||
|
||||
.menu-label
|
||||
color: $menu-label-color
|
||||
font-size: 0.75em
|
||||
letter-spacing: 0.1em
|
||||
font-size: $menu-label-font-size
|
||||
letter-spacing: $menu-label-letter-spacing
|
||||
text-transform: uppercase
|
||||
&:not(:first-child)
|
||||
margin-top: 1em
|
||||
margin-top: $menu-label-spacing
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
margin-bottom: $menu-label-spacing
|
||||
|
||||
@ -17,6 +17,7 @@ $message-body-pre-background-color: $white !default
|
||||
$message-body-pre-code-background-color: transparent !default
|
||||
|
||||
$message-header-body-border-width: 0 !default
|
||||
$message-colors: $colors !default
|
||||
|
||||
.message
|
||||
@extend %block
|
||||
@ -36,7 +37,7 @@ $message-header-body-border-width: 0 !default
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
@each $name, $pair in $message-colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
||||
|
||||
@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
|
||||
border-top: $modal-card-foot-border-top
|
||||
.button
|
||||
&:not(:last-child)
|
||||
margin-right: 10px
|
||||
margin-right: 0.5em
|
||||
|
||||
.modal-card-body
|
||||
+overflow-touch
|
||||
|
||||
@ -3,6 +3,11 @@ $pagination-border-color: $grey-lighter !default
|
||||
$pagination-margin: -0.25rem !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-border-color: $link-hover-border !default
|
||||
|
||||
@ -56,11 +61,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
||||
.pagination-ellipsis
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
font-size: 1em
|
||||
padding-left: 0.5em
|
||||
padding-right: 0.5em
|
||||
font-size: $pagination-item-font-size
|
||||
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
|
||||
|
||||
.pagination-previous,
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
$panel-margin: $block-spacing !default
|
||||
$panel-item-border: 1px solid $border !default
|
||||
|
||||
$panel-heading-background-color: $background !default
|
||||
@ -8,6 +9,7 @@ $panel-heading-radius: $radius !default
|
||||
$panel-heading-size: 1.25em !default
|
||||
$panel-heading-weight: $weight-light !default
|
||||
|
||||
$panel-tabs-font-size: 0.875em !default
|
||||
$panel-tab-border-bottom: 1px solid $border !default
|
||||
$panel-tab-active-border-bottom-color: $link-active-border !default
|
||||
$panel-tab-active-color: $link-active !default
|
||||
@ -26,7 +28,7 @@ $panel-icon-color: $text-light !default
|
||||
.panel
|
||||
font-size: $size-normal
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
margin-bottom: $panel-margin
|
||||
|
||||
.panel-heading,
|
||||
.panel-tabs,
|
||||
@ -49,7 +51,7 @@ $panel-icon-color: $text-light !default
|
||||
.panel-tabs
|
||||
align-items: flex-end
|
||||
display: flex
|
||||
font-size: 0.875em
|
||||
font-size: $panel-tabs-font-size
|
||||
justify-content: center
|
||||
a
|
||||
border-bottom: $panel-tab-border-bottom
|
||||
|
||||
@ -269,15 +269,16 @@ $button-static-border-color: $grey-lighter !default
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&:not(.has-addons)
|
||||
&:not(.has-addons)
|
||||
.button:not(.is-fullwidth)
|
||||
margin-left: 0.25rem
|
||||
margin-right: 0.25rem
|
||||
&.is-right
|
||||
justify-content: flex-end
|
||||
&:not(.has-addons)
|
||||
&:not(.has-addons)
|
||||
.button:not(.is-fullwidth)
|
||||
margin-left: 0.25rem
|
||||
margin-right: 0.25rem
|
||||
|
||||
@ -1,21 +1,23 @@
|
||||
$container-offset: (2 * $gap) !default
|
||||
|
||||
.container
|
||||
flex-grow: 1
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
width: auto
|
||||
+desktop
|
||||
max-width: $desktop - (2 * $gap)
|
||||
max-width: $desktop - $container-offset
|
||||
&.is-fluid
|
||||
margin-left: $gap
|
||||
margin-right: $gap
|
||||
max-width: none
|
||||
+until-widescreen
|
||||
&.is-widescreen
|
||||
max-width: $widescreen - (2 * $gap)
|
||||
max-width: $widescreen - $container-offset
|
||||
+until-fullhd
|
||||
&.is-fullhd
|
||||
max-width: $fullhd - (2 * $gap)
|
||||
max-width: $fullhd - $container-offset
|
||||
+widescreen
|
||||
max-width: $widescreen - (2 * $gap)
|
||||
max-width: $widescreen - $container-offset
|
||||
+fullhd
|
||||
max-width: $fullhd - (2 * $gap)
|
||||
max-width: $fullhd - $container-offset
|
||||
|
||||
@ -471,6 +471,7 @@ $help-size: $size-small !default
|
||||
z-index: 4
|
||||
&.is-expanded
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.has-addons-centered
|
||||
justify-content: center
|
||||
&.has-addons-right
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
$tile-spacing: 0.75rem !default
|
||||
|
||||
.tile
|
||||
align-items: stretch
|
||||
display: block
|
||||
@ -7,17 +9,17 @@
|
||||
min-height: min-content
|
||||
// Modifiers
|
||||
&.is-ancestor
|
||||
margin-left: -0.75rem
|
||||
margin-right: -0.75rem
|
||||
margin-top: -0.75rem
|
||||
margin-left: $tile-spacing * -1
|
||||
margin-right: $tile-spacing * -1
|
||||
margin-top: $tile-spacing * -1
|
||||
&:last-child
|
||||
margin-bottom: -0.75rem
|
||||
margin-bottom: $tile-spacing * -1
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
margin-bottom: $tile-spacing
|
||||
&.is-child
|
||||
margin: 0 !important
|
||||
&.is-parent
|
||||
padding: 0.75rem
|
||||
padding: $tile-spacing
|
||||
&.is-vertical
|
||||
flex-direction: column
|
||||
& > .tile.is-child:not(:last-child)
|
||||
|
||||
@ -68,19 +68,6 @@
|
||||
+mobile
|
||||
.navbar-menu
|
||||
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
|
||||
&.is-small
|
||||
.hero-body
|
||||
|
||||
@ -43,6 +43,10 @@ $weight-medium: 500 !default
|
||||
$weight-semibold: 600 !default
|
||||
$weight-bold: 700 !default
|
||||
|
||||
// Spacing
|
||||
|
||||
$block-spacing: 1.5rem !default
|
||||
|
||||
// Responsiveness
|
||||
|
||||
// The container horizontal gap, which acts as the offset for breakpoints
|
||||
|
||||
@ -159,9 +159,9 @@
|
||||
%arrow
|
||||
+arrow
|
||||
|
||||
=block
|
||||
=block($spacing: $block-spacing)
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
margin-bottom: $spacing
|
||||
|
||||
%block
|
||||
+block
|
||||
|
||||
Loading…
Reference in New Issue
Block a user