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

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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

8
sass/components/level.sass
View File

@@ -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

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

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-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%)

2
sass/components/modal.sass
View File

@@ -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

13
sass/components/pagination.sass
View File

@@ -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,

6
sass/components/panel.sass
View File

@@ -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