Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 12:24:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add customisation variables

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-28 21:05:15 +01:00
parent 2e08a844d7
commit 1be49f2190
47 changed files with 888 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
sass/elements/_all.sass Normal file → Executable file
View File

8
sass/elements/box.sass Normal file → Executable file
View File

@@ -1,5 +1,5 @@
$box: $text !default
$box-background: $white !default
$box-color: $text !default
$box-background-color: $white !default
$box-radius: $radius-large !default
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$box-padding: 1.25rem !default
@@ -9,10 +9,10 @@ $box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
.box
+block
background-color: $box-background
background-color: $box-background-color
border-radius: $box-radius
box-shadow: $box-shadow
color: $box
color: $box-color
display: block
padding: $box-padding

73
sass/elements/button.sass Normal file → Executable file
View File

@@ -1,19 +1,28 @@
$button: $grey-darker !default
$button-background: $white !default
$button-border: $grey-lighter !default
$button-color: $grey-darker !default
$button-background-color: $white !default
$button-border-color: $grey-lighter !default
$button-hover: $link-hover !default
$button-hover-border: $link-hover-border !default
$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default
$button-focus: $link-focus !default
$button-focus-border: $link-focus-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-active: $link-active !default
$button-active-border: $link-active-border !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
$button-static: $grey !default
$button-static-background: $white-ter !default
$button-static-border: $grey-lighter !default
$button-link-color: $text !default
$button-link-hover-background-color: $background !default
$button-link-hover-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !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-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
@@ -29,9 +38,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
.button
+control
+unselectable
background-color: $button-background
border-color: $button-border
color: $button
background-color: $button-background-color
border-color: $button-border-color
color: $button-color
cursor: pointer
justify-content: center
padding-left: 0.75em
@@ -59,23 +68,23 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
// States
&:hover,
&.is-hovered
border-color: $button-hover-border
color: $button-hover
border-color: $button-hover-border-color
color: $button-hover-color
&:focus,
&.is-focused
border-color: $button-focus-border
box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
color: $button-focus
border-color: $button-focus-border-color
box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
color: $button-focus-color
&:active,
&.is-active
border-color: $button-active-border
border-color: $button-active-border-color
box-shadow: $button-shadow-inset
color: $button-active
color: $button-active-color
// Colors
&.is-link
background-color: transparent
border-color: transparent
color: $text
color: $button-link-color
text-decoration: underline
&:hover,
&.is-hovered,
@@ -83,8 +92,8 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&.is-focused,
&:active,
&.is-active
background-color: $background
color: $text-strong
background-color: $button-link-hover-background-color
color: $button-link-hover-color
&[disabled]
background-color: transparent
border-color: transparent
@@ -168,10 +177,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
+button-large
// Modifiers
&[disabled]
background-color: $button-background
border-color: $button-border
box-shadow: none
opacity: 0.5
background-color: $button-disabled-background-color
border-color: $button-disabled-border-color
box-shadow: $button-disabled-shadow
opacity: $button-disabled-opacity
&.is-fullwidth
display: flex
width: 100%
@@ -183,9 +192,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
+center(1em)
position: absolute !important
&.is-static
background-color: $button-static-background
border-color: $button-static-border
color: $button-static
background-color: $button-static-background-color
border-color: $button-static-border-color
color: $button-static-color
box-shadow: none
pointer-events: none

54
sass/elements/content.sass Normal file → Executable file
View File

@@ -1,3 +1,23 @@
$content-heading-color: $text-strong !default
$content-heading-weight: $weight-normal !default
$content-heading-line-height: 1.125 !default
$content-blockquote-background-color: $background !default
$content-blockquote-border-left: 5px solid $border !default
$content-blockquote-padding: 1.25em 1.5em !default
$content-pre-padding: 1.25em 1.5em !default
$content-table-cell-border: 1px solid $border !default
$content-table-cell-border-width: 0 0 1px !default
$content-table-cell-padding: 0.5em 0.75em !default
$content-table-cell-heading-color: $text-strong !default
$content-table-row-hover-background-color: $background !default
$content-table-head-cell-border-width: 0 0 2px !default
$content-table-head-cell-color: $text-strong !default
$content-table-foot-cell-border-width: 2px 0 0 !default
$content-table-foot-cell-color: $text-strong !default
.content
+block
// Inline
@@ -19,9 +39,9 @@
h4,
h5,
h6
color: $text-strong
font-weight: $weight-normal
line-height: 1.125
color: $content-heading-color
font-weight: $content-heading-weight
line-height: $content-heading-line-height
h1
font-size: 2em
margin-bottom: 0.5em
@@ -47,9 +67,9 @@
font-size: 1em
margin-bottom: 1em
blockquote
background-color: $background
border-left: 5px solid $border
padding: 1.25em 1.5em
background-color: $content-blockquote-background-color
border-left: $content-blockquote-border-left
padding: $content-blockquote-padding
ol
list-style: decimal outside
margin-left: 2em
@@ -74,36 +94,36 @@
pre
+overflow-touch
overflow-x: auto
padding: 1.25em 1.5em
padding: $content-pre-padding
white-space: pre
word-wrap: normal
sup,
sub
font-size: 70%
font-size: 75%
table
width: 100%
td,
th
border: 1px solid $border
border-width: 0 0 1px
padding: 0.5em 0.75em
border: $content-table-cell-border
border-width: $content-table-cell-border-width
padding: $content-table-cell-padding
vertical-align: top
th
color: $text-strong
color: $content-table-cell-heading-color
text-align: left
tr
&:hover
background-color: $background
background-color: $content-table-row-hover-background-color
thead
td,
th
border-width: 0 0 2px
color: $text-strong
border-width: $content-table-head-cell-border-width
color: $content-table-head-cell-color
tfoot
td,
th
border-width: 2px 0 0
color: $text-strong
border-width: $content-table-foot-cell-border-width
color: $content-table-foot-cell-color
tbody
tr
&:last-child

81
sass/elements/form.sass Normal file → Executable file
View File

@@ -1,45 +1,50 @@
$input: $grey-darker !default
$input-background: $white !default
$input-border: $grey-lighter !default
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
$input-color: $grey-darker !default
$input-background-color: $white !default
$input-border-color: $grey-lighter !default
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
$input-hover: $grey-darker !default
$input-hover-border: $grey-light !default
$input-hover-color: $grey-darker !default
$input-hover-border-color: $grey-light !default
$input-focus: $grey-darker !default
$input-focus-border: $link !default
$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
$input-disabled: $text-light !default
$input-disabled-background: $background !default
$input-disabled-border: $background !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-arrow: $link !default
$input-arrow: $link !default
$input-icon: $grey-lighter !default
$input-icon-active: $grey !default
$input-icon-color: $grey-lighter !default
$input-icon-active-color: $grey !default
$input-radius: $radius !default
$input-radius: $radius !default
$label-color: $grey-darker !default
$label-weight: $weight-bold !default
$help-size: $size-small !default
=input
+control
background-color: $input-background
border-color: $input-border
color: $input
background-color: $input-background-color
border-color: $input-border-color
color: $input-color
&:hover,
&.is-hovered
border-color: $input-hover-border
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border
border-color: $input-focus-border-color
&[disabled]
background-color: $input-disabled-background
border-color: $input-disabled-border
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
box-shadow: none
color: $input-disabled
color: $input-disabled-color
+placeholder
color: rgba($input, 0.3)
color: rgba($input-disabled-color, 0.3)
.input,
.textarea
@@ -90,9 +95,9 @@ $input-radius: $radius !default
input
cursor: pointer
&:hover
color: $input-hover
color: $input-hover-color
&[disabled]
color: $input-disabled
color: $input-disabled-color
cursor: not-allowed
.radio
@@ -120,16 +125,16 @@ $input-radius: $radius !default
max-width: 100%
outline: none
&:hover
border-color: $input-hover-border
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border
border-color: $input-focus-border-color
&::-ms-expand
display: none
&[disabled]:hover
border-color: $input-disabled-border
border-color: $input-disabled-border-color
&:not([multiple])
padding-right: 2.5em
&[multiple]
@@ -140,7 +145,7 @@ $input-radius: $radius !default
// States
&:hover
&::after
border-color: $input-hover
border-color: $input-hover-color
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
@@ -156,7 +161,7 @@ $input-radius: $radius !default
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled
border-color: $input-disabled-color
&.is-fullwidth
width: 100%
select
@@ -177,10 +182,10 @@ $input-radius: $radius !default
font-size: $size-large
.label
color: $input
color: $label-color
display: block
font-size: $size-normal
font-weight: $weight-bold
font-weight: $label-weight
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
@@ -193,7 +198,7 @@ $input-radius: $radius !default
.help
display: block
font-size: $size-small
font-size: $help-size
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
@@ -326,7 +331,7 @@ $input-radius: $radius !default
// DEPRECATED
&.has-icon
.icon
color: $input-icon
color: $input-icon-color
height: 2.25em
pointer-events: none
position: absolute
@@ -336,7 +341,7 @@ $input-radius: $radius !default
.input
&:focus
& + .icon
color: $input-icon-active
color: $input-icon-active-color
&.is-small
& + .icon
font-size: $size-small
@@ -362,7 +367,7 @@ $input-radius: $radius !default
.select
&:focus
& ~ .icon
color: $input-icon-active
color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
@@ -370,7 +375,7 @@ $input-radius: $radius !default
&.is-large ~ .icon
font-size: $size-large
.icon
color: $input-icon
color: $input-icon-color
height: 2.25em
pointer-events: none
position: absolute

21
sass/elements/icon.sass Normal file → Executable file
View File

@@ -1,24 +1,29 @@
$icon-dimensions: 1.5rem !default
$icon-dimensions-small: 1rem !default
$icon-dimensions-medium: 2rem !default
$icon-dimensions-large: 3rem !default
.icon
align-items: center
display: inline-flex
justify-content: center
height: 1.5rem
width: 1.5rem
height: $icon-dimensions
width: $icon-dimensions
.fa
font-size: 21px
// Sizes
&.is-small
height: 1rem
width: 1rem
height: $icon-dimensions-small
width: $icon-dimensions-small
.fa
font-size: 14px
&.is-medium
height: 2rem
width: 2rem
height: $icon-dimensions-medium
width: $icon-dimensions-medium
.fa
font-size: 28px
&.is-large
height: 3rem
width: 3rem
height: $icon-dimensions-large
width: $icon-dimensions-large
.fa
font-size: 42px

0
sass/elements/image.sass Normal file → Executable file
View File

10
sass/elements/notification.sass Normal file → Executable file
View File

@@ -1,8 +1,12 @@
$notification-background-color: $background !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
.notification
+block
background-color: $background
border-radius: $radius
padding: 1.25rem 2.5rem 1.25rem 1.5rem
background-color: $notification-background-color
border-radius: $notification-radius
padding: $notification-padding
position: relative
a:not(.button)
color: currentColor

0
sass/elements/other.sass Normal file → Executable file
View File

9
sass/elements/progress.sass Normal file → Executable file
View File

@@ -1,3 +1,6 @@
$progress-bar-background-color: $border !default
$progress-value-background-color: $text !default
.progress
+block
-moz-appearance: none
@@ -10,11 +13,11 @@
padding: 0
width: 100%
&::-webkit-progress-bar
background-color: $border
background-color: $progress-bar-background-color
&::-webkit-progress-value
background-color: $text
background-color: $progress-value-background-color
&::-moz-progress-bar
background-color: $text
background-color: $progress-value-background-color
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)

58
sass/elements/table.sass Normal file → Executable file
View File

@@ -1,58 +1,66 @@
$table: $grey-darker !default
$table-background: $white !default
$table-border: $grey-lighter !default
$table-color: $grey-darker !default
$table-background-color: $white !default
$table-head: $grey !default
$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
$table-row-hover-background: $white-bis !default
$table-head-color: $grey !default
$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default
$table-row-active-background: $primary !default
$table-row-active: $primary-invert !default
$table-row-hover-background-color: $white-bis !default
$table-row-even-background: $white-bis !default
$table-row-even-hover-background: $white-ter !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
background-color: $table-background
color: $table
background-color: $table-background-color
color: $table-color
margin-bottom: 1.5rem
width: 100%
td,
th
border: 1px solid $table-border
border-width: 0 0 1px
padding: 0.5em 0.75em
border: $table-cell-border
border-width: $table-cell-border-width
padding: $table-cell-padding
vertical-align: top
// Modifiers
&.is-narrow
white-space: nowrap
width: 1%
th
color: $text-strong
color: $table-cell-heading-color
text-align: left
tr
&:hover
background-color: $table-row-hover-background
background-color: $table-row-hover-background-color
&.is-selected
background-color: $table-row-active-background
color: $table-row-active
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
td,
th
border-color: $table-row-active
border-color: $table-row-active-color
color: currentColor
thead
td,
th
border-width: 0 0 2px
color: $table-head
border-width: $table-head-cell-border-width
color: $table-head-cell-color
tfoot
td,
th
border-width: 2px 0 0
color: $table-head
border-width: $table-foot-cell-border-width
color: $table-foot-cell-color
tbody
tr
&:last-child
@@ -77,6 +85,6 @@ $table-row-even-hover-background: $white-ter !default
tbody
tr:not(.is-selected)
&:nth-child(even)
background-color: $table-row-even-background
background-color: $table-striped-row-even-background-color
&:hover
background-color: $table-row-even-hover-background
background-color: $table-striped-row-even-hover-background-color

7
sass/elements/tag.sass Normal file → Executable file
View File

@@ -1,8 +1,11 @@
$tag-background-color: $background !default
$tag-color: $text !default
.tag
align-items: center
background-color: $background
background-color: $tag-background-color
border-radius: 290486px
color: $text
color: $tag-color
display: inline-flex
font-size: $size-small
height: 2em

18
sass/elements/title.sass Normal file → Executable file
View File

@@ -1,12 +1,12 @@
$title: $grey-darker !default
$title-size: $size-3 !default
$title-weight: $weight-light !default
$title-color: $grey-darker !default
$title-size: $size-3 !default
$title-weight: $weight-light !default
$title-weight-bold: $weight-semibold !default
$subtitle: $grey-dark !default
$subtitle-size: $size-5 !default
$subtitle-strong: $grey-darker !default
$subtitle-weight: $weight-light !default
$subtitle-color: $grey-dark !default
$subtitle-size: $size-5 !default
$subtitle-strong: $grey-darker !default
$subtitle-weight: $weight-light !default
.title,
.subtitle
@@ -21,7 +21,7 @@ $subtitle-weight: $weight-light !default
vertical-align: middle
.title
color: $title
color: $title-color
font-size: $title-size
font-weight: $title-weight
line-height: 1.125
@@ -38,7 +38,7 @@ $subtitle-weight: $weight-light !default
font-size: $size
.subtitle
color: $subtitle
color: $subtitle-color
font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: 1.25