summaryrefslogtreecommitdiff
path: root/styles/_sass/elements
diff options
context:
space:
mode:
Diffstat (limited to 'styles/_sass/elements')
-rw-r--r--styles/_sass/elements/_all.sass16
-rw-r--r--styles/_sass/elements/box.sass24
-rw-r--r--styles/_sass/elements/button.sass275
-rw-r--r--styles/_sass/elements/container.sass25
-rw-r--r--styles/_sass/elements/content.sass151
-rw-r--r--styles/_sass/elements/form.sass602
-rw-r--r--styles/_sass/elements/icon.sass21
-rw-r--r--styles/_sass/elements/image.sass69
-rw-r--r--styles/_sass/elements/notification.sass35
-rw-r--r--styles/_sass/elements/other.sass39
-rw-r--r--styles/_sass/elements/progress.sass65
-rw-r--r--styles/_sass/elements/table.sass126
-rw-r--r--styles/_sass/elements/tag.sass130
-rw-r--r--styles/_sass/elements/title.sass64
14 files changed, 1642 insertions, 0 deletions
diff --git a/styles/_sass/elements/_all.sass b/styles/_sass/elements/_all.sass
new file mode 100644
index 0000000..2234322
--- /dev/null
+++ b/styles/_sass/elements/_all.sass
@@ -0,0 +1,16 @@
+@charset "utf-8"
+
+@import "box.sass"
+@import "button.sass"
+@import "container.sass"
+@import "content.sass"
+@import "form.sass"
+@import "icon.sass"
+@import "image.sass"
+@import "notification.sass"
+@import "progress.sass"
+@import "table.sass"
+@import "tag.sass"
+@import "title.sass"
+
+@import "other.sass"
diff --git a/styles/_sass/elements/box.sass b/styles/_sass/elements/box.sass
new file mode 100644
index 0000000..d58f405
--- /dev/null
+++ b/styles/_sass/elements/box.sass
@@ -0,0 +1,24 @@
+$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
+
+$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
+$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
+
+.box
+ @extend %block
+ background-color: $box-background-color
+ border-radius: $box-radius
+ box-shadow: $box-shadow
+ color: $box-color
+ display: block
+ padding: $box-padding
+
+a.box
+ &:hover,
+ &:focus
+ box-shadow: $box-link-hover-shadow
+ &:active
+ box-shadow: $box-link-active-shadow
diff --git a/styles/_sass/elements/button.sass b/styles/_sass/elements/button.sass
new file mode 100644
index 0000000..e75cd2f
--- /dev/null
+++ b/styles/_sass/elements/button.sass
@@ -0,0 +1,275 @@
+$button-color: $grey-darker !default
+$button-background-color: $white !default
+
+$button-border-color: $grey-lighter !default
+$button-border-width: $control-border-width !default
+
+$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
+$button-padding-horizontal: 0.75em !default
+
+$button-hover-color: $link-hover !default
+$button-hover-border-color: $link-hover-border !default
+
+$button-focus-color: $link-focus !default
+$button-focus-border-color: $link-focus-border !default
+$button-focus-box-shadow-size: 0 0 0 0.125em !default
+$button-focus-box-shadow-color: rgba($link, 0.25) !default
+
+$button-active-color: $link-active !default
+$button-active-border-color: $link-active-border !default
+
+$button-text-color: $text !default
+$button-text-hover-background-color: $background !default
+$button-text-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
+
+// The button sizes use mixins so they can be used at different breakpoints
+=button-small
+ border-radius: $radius-small
+ font-size: $size-small
+=button-normal
+ font-size: $size-normal
+=button-medium
+ font-size: $size-medium
+=button-large
+ font-size: $size-large
+
+.button
+ @extend %control
+ @extend %unselectable
+ background-color: $button-background-color
+ border-color: $button-border-color
+ border-width: $button-border-width
+ color: $button-color
+ cursor: pointer
+ justify-content: center
+ padding-bottom: $button-padding-vertical
+ padding-left: $button-padding-horizontal
+ padding-right: $button-padding-horizontal
+ padding-top: $button-padding-vertical
+ text-align: center
+ white-space: nowrap
+ strong
+ color: inherit
+ .icon
+ &,
+ &.is-small,
+ &.is-medium,
+ &.is-large
+ height: 1.5em
+ width: 1.5em
+ &:first-child:not(:last-child)
+ margin-left: calc(-0.375em - #{$button-border-width})
+ margin-right: 0.1875em
+ &:last-child:not(:first-child)
+ margin-left: 0.1875em
+ margin-right: calc(-0.375em - #{$button-border-width})
+ &:first-child:last-child
+ margin-left: calc(-0.375em - #{$button-border-width})
+ margin-right: calc(-0.375em - #{$button-border-width})
+ // States
+ &:hover,
+ &.is-hovered
+ border-color: $button-hover-border-color
+ color: $button-hover-color
+ &:focus,
+ &.is-focused
+ border-color: $button-focus-border-color
+ color: $button-focus-color
+ &:not(:active)
+ box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
+ &:active,
+ &.is-active
+ border-color: $button-active-border-color
+ color: $button-active-color
+ // Colors
+ &.is-text
+ background-color: transparent
+ border-color: transparent
+ color: $button-text-color
+ text-decoration: underline
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused
+ background-color: $button-text-hover-background-color
+ color: $button-text-hover-color
+ &:active,
+ &.is-active
+ background-color: darken($button-text-hover-background-color, 5%)
+ color: $button-text-hover-color
+ &[disabled],
+ fieldset[disabled] &
+ background-color: transparent
+ border-color: transparent
+ box-shadow: none
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ border-color: transparent
+ color: $color-invert
+ &:hover,
+ &.is-hovered
+ background-color: darken($color, 2.5%)
+ border-color: transparent
+ color: $color-invert
+ &:focus,
+ &.is-focused
+ border-color: transparent
+ color: $color-invert
+ &:not(:active)
+ box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
+ &:active,
+ &.is-active
+ background-color: darken($color, 5%)
+ border-color: transparent
+ color: $color-invert
+ &[disabled],
+ fieldset[disabled] &
+ background-color: $color
+ border-color: transparent
+ box-shadow: none
+ &.is-inverted
+ background-color: $color-invert
+ color: $color
+ &:hover
+ background-color: darken($color-invert, 5%)
+ &[disabled],
+ fieldset[disabled] &
+ background-color: $color-invert
+ border-color: transparent
+ box-shadow: none
+ color: $color
+ &.is-loading
+ &::after
+ border-color: transparent transparent $color-invert $color-invert !important
+ &.is-outlined
+ background-color: transparent
+ border-color: $color
+ color: $color
+ &:hover,
+ &:focus
+ background-color: $color
+ border-color: $color
+ color: $color-invert
+ &.is-loading
+ &::after
+ border-color: transparent transparent $color $color !important
+ &[disabled],
+ fieldset[disabled] &
+ background-color: transparent
+ border-color: $color
+ box-shadow: none
+ color: $color
+ &.is-inverted.is-outlined
+ background-color: transparent
+ border-color: $color-invert
+ color: $color-invert
+ &:hover,
+ &:focus
+ background-color: $color-invert
+ color: $color
+ &[disabled],
+ fieldset[disabled] &
+ background-color: transparent
+ border-color: $color-invert
+ box-shadow: none
+ color: $color-invert
+ // Sizes
+ &.is-small
+ +button-small
+ &.is-normal
+ +button-normal
+ &.is-medium
+ +button-medium
+ &.is-large
+ +button-large
+ // Modifiers
+ &[disabled],
+ fieldset[disabled] &
+ 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%
+ &.is-loading
+ color: transparent !important
+ pointer-events: none
+ &::after
+ @extend %loader
+ +center(1em)
+ position: absolute !important
+ &.is-static
+ background-color: $button-static-background-color
+ border-color: $button-static-border-color
+ color: $button-static-color
+ box-shadow: none
+ pointer-events: none
+ &.is-rounded
+ border-radius: $radius-rounded
+ padding-left: 1em
+ padding-right: 1em
+
+.buttons
+ align-items: center
+ display: flex
+ flex-wrap: wrap
+ justify-content: flex-start
+ .button
+ margin-bottom: 0.5rem
+ &:not(:last-child):not(.is-fullwidth)
+ margin-right: 0.5rem
+ &:last-child
+ margin-bottom: -0.5rem
+ &:not(:last-child)
+ margin-bottom: 1rem
+ // Sizes
+ &.are-small
+ .button:not(.is-normal):not(.is-medium):not(.is-large)
+ +button-small
+ &.are-medium
+ .button:not(.is-small):not(.is-normal):not(.is-large)
+ +button-medium
+ &.are-large
+ .button:not(.is-small):not(.is-normal):not(.is-medium)
+ +button-large
+ &.has-addons
+ .button
+ &:not(:first-child)
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &:not(:last-child)
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ margin-right: -1px
+ &:last-child
+ margin-right: 0
+ &:hover,
+ &.is-hovered
+ z-index: 2
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active,
+ &.is-selected
+ z-index: 3
+ &:hover
+ z-index: 4
+ &.is-expanded
+ flex-grow: 1
+ &.is-centered
+ justify-content: center
+ &.is-right
+ justify-content: flex-end
diff --git a/styles/_sass/elements/container.sass b/styles/_sass/elements/container.sass
new file mode 100644
index 0000000..2aaf591
--- /dev/null
+++ b/styles/_sass/elements/container.sass
@@ -0,0 +1,25 @@
+.container
+ margin: 0 auto
+ position: relative
+ +desktop
+ max-width: $desktop - (2 * $gap)
+ width: $desktop - (2 * $gap)
+ &.is-fluid
+ margin-left: $gap
+ margin-right: $gap
+ max-width: none
+ width: auto
+ +until-widescreen
+ &.is-widescreen
+ max-width: $widescreen - (2 * $gap)
+ width: auto
+ +until-fullhd
+ &.is-fullhd
+ max-width: $fullhd - (2 * $gap)
+ width: auto
+ +widescreen
+ max-width: $widescreen - (2 * $gap)
+ width: $widescreen - (2 * $gap)
+ +fullhd
+ max-width: $fullhd - (2 * $gap)
+ width: $fullhd - (2 * $gap)
diff --git a/styles/_sass/elements/content.sass b/styles/_sass/elements/content.sass
new file mode 100644
index 0000000..3f5530e
--- /dev/null
+++ b/styles/_sass/elements/content.sass
@@ -0,0 +1,151 @@
+$content-heading-color: $text-strong !default
+$content-heading-weight: $weight-semibold !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-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
+ @extend %block
+ // Inline
+ li + li
+ margin-top: 0.25em
+ // Block
+ p,
+ dl,
+ ol,
+ ul,
+ blockquote,
+ pre,
+ table
+ &:not(:last-child)
+ margin-bottom: 1em
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $content-heading-color
+ font-weight: $content-heading-weight
+ line-height: $content-heading-line-height
+ h1
+ font-size: 2em
+ margin-bottom: 0.5em
+ &:not(:first-child)
+ margin-top: 1em
+ h2
+ font-size: 1.75em
+ margin-bottom: 0.5714em
+ &:not(:first-child)
+ margin-top: 1.1428em
+ h3
+ font-size: 1.5em
+ margin-bottom: 0.6666em
+ &:not(:first-child)
+ margin-top: 1.3333em
+ h4
+ font-size: 1.25em
+ margin-bottom: 0.8em
+ h5
+ font-size: 1.125em
+ margin-bottom: 0.8888em
+ h6
+ font-size: 1em
+ margin-bottom: 1em
+ blockquote
+ background-color: $content-blockquote-background-color
+ border-left: $content-blockquote-border-left
+ padding: $content-blockquote-padding
+ ol
+ list-style-position: outside
+ margin-left: 2em
+ margin-top: 1em
+ &:not([type])
+ list-style-type: decimal
+ &.is-lower-alpha
+ list-style-type: lower-alpha
+ &.is-lower-roman
+ list-style-type: lower-roman
+ &.is-upper-alpha
+ list-style-type: upper-alpha
+ &.is-upper-roman
+ list-style-type: upper-roman
+ ul
+ list-style: disc outside
+ margin-left: 2em
+ margin-top: 1em
+ ul
+ list-style-type: circle
+ margin-top: 0.5em
+ ul
+ list-style-type: square
+ dd
+ margin-left: 2em
+ figure
+ margin-left: 2em
+ margin-right: 2em
+ text-align: center
+ &:not(:first-child)
+ margin-top: 2em
+ &:not(:last-child)
+ margin-bottom: 2em
+ img
+ display: inline-block
+ figcaption
+ font-style: italic
+ pre
+ +overflow-touch
+ overflow-x: auto
+ padding: $content-pre-padding
+ white-space: pre
+ word-wrap: normal
+ sup,
+ sub
+ font-size: 75%
+ table
+ width: 100%
+ td,
+ th
+ border: $content-table-cell-border
+ border-width: $content-table-cell-border-width
+ padding: $content-table-cell-padding
+ vertical-align: top
+ th
+ color: $content-table-cell-heading-color
+ text-align: left
+ thead
+ td,
+ th
+ border-width: $content-table-head-cell-border-width
+ color: $content-table-head-cell-color
+ tfoot
+ td,
+ th
+ border-width: $content-table-foot-cell-border-width
+ color: $content-table-foot-cell-color
+ tbody
+ tr
+ &:last-child
+ td,
+ th
+ border-bottom-width: 0
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
diff --git a/styles/_sass/elements/form.sass b/styles/_sass/elements/form.sass
new file mode 100644
index 0000000..c944b75
--- /dev/null
+++ b/styles/_sass/elements/form.sass
@@ -0,0 +1,602 @@
+$input-color: $grey-darker !default
+$input-background-color: $white !default
+$input-border-color: $grey-lighter !default
+$input-height: $control-height !default
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
+$input-placeholder-color: rgba($input-color, 0.3) !default
+
+$input-hover-color: $grey-darker !default
+$input-hover-border-color: $grey-light !default
+
+$input-focus-color: $grey-darker !default
+$input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: rgba($link, 0.25) !default
+
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
+$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
+
+$input-arrow: $link !default
+
+$input-icon-color: $grey-lighter !default
+$input-icon-active-color: $grey !default
+
+$input-radius: $radius !default
+
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $white-ter !default
+$file-cta-color: $grey-dark !default
+$file-cta-hover-color: $grey-darker !default
+$file-cta-active-color: $grey-darker !default
+
+$file-name-border-color: $border !default
+$file-name-border-style: solid !default
+$file-name-border-width: 1px 1px 1px 0 !default
+$file-name-max-width: 16em !default
+
+$label-color: $grey-darker !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
+=input
+ @extend %control
+ background-color: $input-background-color
+ border-color: $input-border-color
+ color: $input-color
+ +placeholder
+ color: $input-placeholder-color
+ &:hover,
+ &.is-hovered
+ border-color: $input-hover-border-color
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ border-color: $input-focus-border-color
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
+ &[disabled],
+ fieldset[disabled] &
+ background-color: $input-disabled-background-color
+ border-color: $input-disabled-border-color
+ box-shadow: none
+ color: $input-disabled-color
+ +placeholder
+ color: $input-disabled-placeholder-color
+
+.input,
+.textarea
+ +input
+ box-shadow: $input-shadow
+ max-width: 100%
+ width: 100%
+ &[readonly]
+ box-shadow: none
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ border-color: $color
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+ // Sizes
+ &.is-small
+ +control-small
+ &.is-medium
+ +control-medium
+ &.is-large
+ +control-large
+ // Modifiers
+ &.is-fullwidth
+ display: block
+ width: 100%
+ &.is-inline
+ display: inline
+ width: auto
+
+.input
+ &.is-rounded
+ border-radius: $radius-rounded
+ padding-left: 1em
+ padding-right: 1em
+ &.is-static
+ background-color: transparent
+ border-color: transparent
+ box-shadow: none
+ padding-left: 0
+ padding-right: 0
+
+.textarea
+ display: block
+ max-width: 100%
+ min-width: 100%
+ padding: 0.625em
+ resize: vertical
+ &:not([rows])
+ max-height: 600px
+ min-height: 120px
+ &[rows]
+ height: initial
+ // Modifiers
+ &.has-fixed-size
+ resize: none
+
+.checkbox,
+.radio
+ cursor: pointer
+ display: inline-block
+ line-height: 1.25
+ position: relative
+ input
+ cursor: pointer
+ &:hover
+ color: $input-hover-color
+ &[disabled],
+ fieldset[disabled] &
+ color: $input-disabled-color
+ cursor: not-allowed
+
+.radio
+ & + .radio
+ margin-left: 0.5em
+
+.select
+ display: inline-block
+ max-width: 100%
+ position: relative
+ vertical-align: top
+ &:not(.is-multiple)
+ height: $input-height
+ &:not(.is-multiple):not(.is-loading)
+ &::after
+ @extend %arrow
+ border-color: $input-arrow
+ right: 1.125em
+ z-index: 4
+ &.is-rounded
+ select
+ border-radius: $radius-rounded
+ padding-left: 1em
+ select
+ +input
+ cursor: pointer
+ display: block
+ font-size: 1em
+ max-width: 100%
+ outline: none
+ &::-ms-expand
+ display: none
+ &[disabled]:hover,
+ fieldset[disabled] &:hover
+ border-color: $input-disabled-border-color
+ &:not([multiple])
+ padding-right: 2.5em
+ &[multiple]
+ height: auto
+ padding: 0
+ option
+ padding: 0.5em 1em
+ // States
+ &:not(.is-multiple):not(.is-loading):hover
+ &::after
+ border-color: $input-hover-color
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ &:not(:hover)::after
+ border-color: $color
+ select
+ border-color: $color
+ &:hover,
+ &.is-hovered
+ border-color: darken($color, 5%)
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+ // Sizes
+ &.is-small
+ +control-small
+ &.is-medium
+ +control-medium
+ &.is-large
+ +control-large
+ // Modifiers
+ &.is-disabled
+ &::after
+ border-color: $input-disabled-color
+ &.is-fullwidth
+ width: 100%
+ select
+ width: 100%
+ &.is-loading
+ &::after
+ @extend %loader
+ margin-top: 0
+ position: absolute
+ right: 0.625em
+ top: 0.625em
+ transform: none
+ &.is-small:after
+ font-size: $size-small
+ &.is-medium:after
+ font-size: $size-medium
+ &.is-large:after
+ font-size: $size-large
+
+.file
+ @extend %unselectable
+ align-items: stretch
+ display: flex
+ justify-content: flex-start
+ position: relative
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ .file-cta
+ background-color: $color
+ border-color: transparent
+ color: $color-invert
+ &:hover,
+ &.is-hovered
+ .file-cta
+ background-color: darken($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)
+ color: $color-invert
+ &:active,
+ &.is-active
+ .file-cta
+ background-color: darken($color, 5%)
+ border-color: transparent
+ color: $color-invert
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ .file-icon
+ .fa
+ font-size: 21px
+ &.is-large
+ font-size: $size-large
+ .file-icon
+ .fa
+ font-size: 28px
+ // Modifiers
+ &.has-name
+ .file-cta
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ .file-name
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &.is-empty
+ .file-cta
+ border-radius: $file-radius
+ .file-name
+ display: none
+ &.is-boxed
+ .file-label
+ flex-direction: column
+ .file-cta
+ flex-direction: column
+ height: auto
+ padding: 1em 3em
+ .file-name
+ border-width: 0 1px 1px
+ .file-icon
+ height: 1.5em
+ width: 1.5em
+ .fa
+ font-size: 21px
+ &.is-small
+ .file-icon .fa
+ font-size: 14px
+ &.is-medium
+ .file-icon .fa
+ font-size: 28px
+ &.is-large
+ .file-icon .fa
+ font-size: 35px
+ &.has-name
+ .file-cta
+ border-radius: $file-radius $file-radius 0 0
+ .file-name
+ border-radius: 0 0 $file-radius $file-radius
+ border-width: 0 1px 1px
+ &.is-centered
+ justify-content: center
+ &.is-fullwidth
+ .file-label
+ width: 100%
+ .file-name
+ flex-grow: 1
+ max-width: none
+ &.is-right
+ justify-content: flex-end
+ .file-cta
+ border-radius: 0 $file-radius $file-radius 0
+ .file-name
+ border-radius: $file-radius 0 0 $file-radius
+ border-width: 1px 0 1px 1px
+ order: -1
+
+.file-label
+ align-items: stretch
+ display: flex
+ cursor: pointer
+ justify-content: flex-start
+ overflow: hidden
+ position: relative
+ &:hover
+ .file-cta
+ background-color: darken($file-cta-background-color, 2.5%)
+ color: $file-cta-hover-color
+ .file-name
+ border-color: darken($file-name-border-color, 2.5%)
+ &:active
+ .file-cta
+ background-color: darken($file-cta-background-color, 5%)
+ color: $file-cta-active-color
+ .file-name
+ border-color: darken($file-name-border-color, 5%)
+
+.file-input
+ height: 100%
+ left: 0
+ opacity: 0
+ outline: none
+ position: absolute
+ top: 0
+ width: 100%
+
+.file-cta,
+.file-name
+ @extend %control
+ border-color: $file-border-color
+ border-radius: $file-radius
+ font-size: 1em
+ padding-left: 1em
+ padding-right: 1em
+ white-space: nowrap
+
+.file-cta
+ background-color: $file-cta-background-color
+ color: $file-cta-color
+
+.file-name
+ border-color: $file-name-border-color
+ border-style: $file-name-border-style
+ border-width: $file-name-border-width
+ display: block
+ max-width: $file-name-max-width
+ overflow: hidden
+ text-align: left
+ text-overflow: ellipsis
+
+.file-icon
+ align-items: center
+ display: flex
+ height: 1em
+ justify-content: center
+ margin-right: 0.5em
+ width: 1em
+ .fa
+ font-size: 14px
+
+.label
+ color: $label-color
+ display: block
+ font-size: $size-normal
+ font-weight: $label-weight
+ &:not(:last-child)
+ margin-bottom: 0.5em
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
+
+.help
+ display: block
+ font-size: $help-size
+ margin-top: 0.25rem
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ color: $color
+
+// Containers
+
+.field
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+ // Modifiers
+ &.has-addons
+ display: flex
+ justify-content: flex-start
+ .control
+ &:not(:last-child)
+ margin-right: -1px
+ &:not(:first-child):not(:last-child)
+ .button,
+ .input,
+ .select select
+ border-radius: 0
+ &:first-child:not(:only-child)
+ .button,
+ .input,
+ .select select
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ &:last-child:not(:only-child)
+ .button,
+ .input,
+ .select select
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ .button,
+ .input,
+ .select select
+ &:not([disabled])
+ &:hover,
+ &.is-hovered
+ z-index: 2
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ z-index: 3
+ &:hover
+ z-index: 4
+ &.is-expanded
+ flex-grow: 1
+ &.has-addons-centered
+ justify-content: center
+ &.has-addons-right
+ justify-content: flex-end
+ &.has-addons-fullwidth
+ .control
+ flex-grow: 1
+ flex-shrink: 0
+ &.is-grouped
+ display: flex
+ justify-content: flex-start
+ & > .control
+ flex-shrink: 0
+ &:not(:last-child)
+ margin-bottom: 0
+ margin-right: 0.75rem
+ &.is-expanded
+ flex-grow: 1
+ flex-shrink: 1
+ &.is-grouped-centered
+ justify-content: center
+ &.is-grouped-right
+ justify-content: flex-end
+ &.is-grouped-multiline
+ flex-wrap: wrap
+ & > .control
+ &:last-child,
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+ &:last-child
+ margin-bottom: -0.75rem
+ &:not(:last-child)
+ margin-bottom: 0
+ &.is-horizontal
+ +tablet
+ display: flex
+
+.field-label
+ .label
+ font-size: inherit
+ +mobile
+ margin-bottom: 0.5rem
+ +tablet
+ flex-basis: 0
+ flex-grow: 1
+ flex-shrink: 0
+ margin-right: 1.5rem
+ text-align: right
+ &.is-small
+ font-size: $size-small
+ padding-top: 0.375em
+ &.is-normal
+ padding-top: 0.375em
+ &.is-medium
+ font-size: $size-medium
+ padding-top: 0.375em
+ &.is-large
+ font-size: $size-large
+ padding-top: 0.375em
+
+.field-body
+ .field .field
+ margin-bottom: 0
+ +tablet
+ display: flex
+ flex-basis: 0
+ flex-grow: 5
+ flex-shrink: 1
+ .field
+ margin-bottom: 0
+ & > .field
+ flex-shrink: 1
+ &:not(.is-narrow)
+ flex-grow: 1
+ &:not(:last-child)
+ margin-right: 0.75rem
+
+.control
+ box-sizing: border-box
+ clear: both //fixes the icon floating out of the input when help text is floated right
+ font-size: $size-normal
+ position: relative
+ text-align: left
+ // Modifiers
+ &.has-icons-left,
+ &.has-icons-right
+ .input,
+ .select
+ &:focus
+ & ~ .icon
+ color: $input-icon-active-color
+ &.is-small ~ .icon
+ font-size: $size-small
+ &.is-medium ~ .icon
+ font-size: $size-medium
+ &.is-large ~ .icon
+ font-size: $size-large
+ .icon
+ color: $input-icon-color
+ height: $input-height
+ pointer-events: none
+ position: absolute
+ top: 0
+ width: $input-height
+ z-index: 4
+ &.has-icons-left
+ .input,
+ .select select
+ padding-left: $input-height
+ .icon.is-left
+ left: 0
+ &.has-icons-right
+ .input,
+ .select select
+ padding-right: $input-height
+ .icon.is-right
+ right: 0
+ &.is-loading
+ &::after
+ @extend %loader
+ position: absolute !important
+ right: 0.625em
+ top: 0.625em
+ z-index: 4
+ &.is-small:after
+ font-size: $size-small
+ &.is-medium:after
+ font-size: $size-medium
+ &.is-large:after
+ font-size: $size-large
diff --git a/styles/_sass/elements/icon.sass b/styles/_sass/elements/icon.sass
new file mode 100644
index 0000000..988546c
--- /dev/null
+++ b/styles/_sass/elements/icon.sass
@@ -0,0 +1,21 @@
+$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: $icon-dimensions
+ width: $icon-dimensions
+ // Sizes
+ &.is-small
+ height: $icon-dimensions-small
+ width: $icon-dimensions-small
+ &.is-medium
+ height: $icon-dimensions-medium
+ width: $icon-dimensions-medium
+ &.is-large
+ height: $icon-dimensions-large
+ width: $icon-dimensions-large
diff --git a/styles/_sass/elements/image.sass b/styles/_sass/elements/image.sass
new file mode 100644
index 0000000..cfa64fe
--- /dev/null
+++ b/styles/_sass/elements/image.sass
@@ -0,0 +1,69 @@
+$dimensions: 16 24 32 48 64 96 128 !default
+
+.image
+ display: block
+ position: relative
+ img
+ display: block
+ height: auto
+ width: 100%
+ &.is-rounded
+ border-radius: $radius-rounded
+ // Ratio
+ &.is-square,
+ &.is-1by1,
+ &.is-5by4,
+ &.is-4by3,
+ &.is-3by2,
+ &.is-5by3,
+ &.is-16by9,
+ &.is-2by1,
+ &.is-3by1,
+ &.is-4by5,
+ &.is-3by4,
+ &.is-2by3,
+ &.is-3by5,
+ &.is-9by16,
+ &.is-1by2,
+ &.is-1by3
+ img,
+ .has-ratio
+ @extend %overlay
+ height: 100%
+ width: 100%
+ &.is-square,
+ &.is-1by1
+ padding-top: 100%
+ &.is-5by4
+ padding-top: 80%
+ &.is-4by3
+ padding-top: 75%
+ &.is-3by2
+ padding-top: 66.6666%
+ &.is-5by3
+ padding-top: 60%
+ &.is-16by9
+ padding-top: 56.25%
+ &.is-2by1
+ padding-top: 50%
+ &.is-3by1
+ padding-top: 33.3333%
+ &.is-4by5
+ padding-top: 125%
+ &.is-3by4
+ padding-top: 133.3333%
+ &.is-2by3
+ padding-top: 150%
+ &.is-3by5
+ padding-top: 166.6666%
+ &.is-9by16
+ padding-top: 177.7777%
+ &.is-1by2
+ padding-top: 200%
+ &.is-1by3
+ padding-top: 300%
+ // Sizes
+ @each $dimension in $dimensions
+ &.is-#{$dimension}x#{$dimension}
+ height: $dimension * 1px
+ width: $dimension * 1px
diff --git a/styles/_sass/elements/notification.sass b/styles/_sass/elements/notification.sass
new file mode 100644
index 0000000..2bda414
--- /dev/null
+++ b/styles/_sass/elements/notification.sass
@@ -0,0 +1,35 @@
+$notification-background-color: $background !default
+$notification-radius: $radius !default
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
+
+.notification
+ @extend %block
+ background-color: $notification-background-color
+ border-radius: $notification-radius
+ padding: $notification-padding
+ position: relative
+ a:not(.button):not(.dropdown-item)
+ color: currentColor
+ text-decoration: underline
+ strong
+ color: currentColor
+ code,
+ pre
+ background: $white
+ pre code
+ background: transparent
+ & > .delete
+ position: absolute
+ right: 0.5rem
+ top: 0.5rem
+ .title,
+ .subtitle,
+ .content
+ color: currentColor
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ color: $color-invert
diff --git a/styles/_sass/elements/other.sass b/styles/_sass/elements/other.sass
new file mode 100644
index 0000000..5725617
--- /dev/null
+++ b/styles/_sass/elements/other.sass
@@ -0,0 +1,39 @@
+.block
+ @extend %block
+
+.delete
+ @extend %delete
+
+.heading
+ display: block
+ font-size: 11px
+ letter-spacing: 1px
+ margin-bottom: 5px
+ text-transform: uppercase
+
+.highlight
+ @extend %block
+ font-weight: $weight-normal
+ max-width: 100%
+ overflow: hidden
+ padding: 0
+ pre
+ overflow: auto
+ max-width: 100%
+
+.loader
+ @extend %loader
+
+.number
+ align-items: center
+ background-color: $background
+ border-radius: $radius-rounded
+ display: inline-flex
+ font-size: $size-medium
+ height: 2em
+ justify-content: center
+ margin-right: 1.5rem
+ min-width: 2.5em
+ padding: 0.25rem 0.5rem
+ text-align: center
+ vertical-align: top
diff --git a/styles/_sass/elements/progress.sass b/styles/_sass/elements/progress.sass
new file mode 100644
index 0000000..b263eeb
--- /dev/null
+++ b/styles/_sass/elements/progress.sass
@@ -0,0 +1,65 @@
+$progress-bar-background-color: $border !default
+$progress-value-background-color: $text !default
+
+$progress-indeterminate-duration: 1.5s !default
+
+.progress
+ @extend %block
+ -moz-appearance: none
+ -webkit-appearance: none
+ border: none
+ border-radius: $radius-rounded
+ display: block
+ height: $size-normal
+ overflow: hidden
+ padding: 0
+ width: 100%
+ &::-webkit-progress-bar
+ background-color: $progress-bar-background-color
+ &::-webkit-progress-value
+ background-color: $progress-value-background-color
+ &::-moz-progress-bar
+ background-color: $progress-value-background-color
+ &::-ms-fill
+ background-color: $progress-value-background-color
+ border: none
+ &:indeterminate
+ animation-duration: $progress-indeterminate-duration
+ animation-iteration-count: infinite
+ animation-name: moveIndeterminate
+ animation-timing-function: linear
+ background-color: $progress-bar-background-color
+ background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
+ background-position: top left
+ background-repeat: no-repeat
+ background-size: 150% 150%
+ &::-webkit-progress-bar
+ background-color: transparent
+ &::-moz-progress-bar
+ background-color: transparent
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ &::-webkit-progress-value
+ background-color: $color
+ &::-moz-progress-bar
+ background-color: $color
+ &::-ms-fill
+ background-color: $color
+ &:indeterminate
+ background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
+
+ // Sizes
+ &.is-small
+ height: $size-small
+ &.is-medium
+ height: $size-medium
+ &.is-large
+ height: $size-large
+
+@keyframes moveIndeterminate
+ from
+ background-position: 200% 0
+ to
+ background-position: -200% 0
diff --git a/styles/_sass/elements/table.sass b/styles/_sass/elements/table.sass
new file mode 100644
index 0000000..a1cf936
--- /dev/null
+++ b/styles/_sass/elements/table.sass
@@ -0,0 +1,126 @@
+$table-color: $grey-darker !default
+$table-background-color: $white !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-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-head-background-color: transparent !default
+$table-body-background-color: transparent !default
+$table-foot-background-color: transparent !default
+
+$table-row-hover-background-color: $white-bis !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
+ @extend %block
+ background-color: $table-background-color
+ color: $table-color
+ td,
+ th
+ border: $table-cell-border
+ border-width: $table-cell-border-width
+ padding: $table-cell-padding
+ vertical-align: top
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ border-color: $color
+ color: $color-invert
+ // Modifiers
+ &.is-narrow
+ white-space: nowrap
+ width: 1%
+ &.is-selected
+ background-color: $table-row-active-background-color
+ color: $table-row-active-color
+ a,
+ strong
+ color: currentColor
+ th
+ color: $table-cell-heading-color
+ text-align: left
+ tr
+ &.is-selected
+ background-color: $table-row-active-background-color
+ color: $table-row-active-color
+ a,
+ strong
+ color: currentColor
+ td,
+ th
+ border-color: $table-row-active-color
+ color: currentColor
+ thead
+ background-color: $table-head-background-color
+ td,
+ th
+ border-width: $table-head-cell-border-width
+ color: $table-head-cell-color
+ tfoot
+ background-color: $table-foot-background-color
+ td,
+ th
+ border-width: $table-foot-cell-border-width
+ color: $table-foot-cell-color
+ tbody
+ background-color: $table-body-background-color
+ tr
+ &:last-child
+ td,
+ th
+ border-bottom-width: 0
+ // Modifiers
+ &.is-bordered
+ td,
+ th
+ border-width: 1px
+ tr
+ &:last-child
+ td,
+ th
+ border-bottom-width: 1px
+ &.is-fullwidth
+ width: 100%
+ &.is-hoverable
+ tbody
+ tr:not(.is-selected)
+ &:hover
+ background-color: $table-row-hover-background-color
+ &.is-striped
+ tbody
+ tr:not(.is-selected)
+ &:hover
+ background-color: $table-row-hover-background-color
+ &:nth-child(even)
+ background-color: $table-striped-row-even-hover-background-color
+ &.is-narrow
+ td,
+ th
+ padding: 0.25em 0.5em
+ &.is-striped
+ tbody
+ tr:not(.is-selected)
+ &:nth-child(even)
+ background-color: $table-striped-row-even-background-color
+
+.table-container
+ @extend %block
+ +overflow-touch
+ overflow: auto
+ overflow-y: hidden
+ max-width: 100%
diff --git a/styles/_sass/elements/tag.sass b/styles/_sass/elements/tag.sass
new file mode 100644
index 0000000..a5fb3c4
--- /dev/null
+++ b/styles/_sass/elements/tag.sass
@@ -0,0 +1,130 @@
+$tag-background-color: $background !default
+$tag-color: $text !default
+$tag-radius: $radius !default
+$tag-delete-margin: 1px !default
+
+.tags
+ align-items: center
+ display: flex
+ flex-wrap: wrap
+ justify-content: flex-start
+ .tag
+ margin-bottom: 0.5rem
+ &:not(:last-child)
+ margin-right: 0.5rem
+ &:last-child
+ margin-bottom: -0.5rem
+ &:not(:last-child)
+ margin-bottom: 1rem
+ // Sizes
+ &.are-medium
+ .tag:not(.is-normal):not(.is-large)
+ font-size: $size-normal
+ &.are-large
+ .tag:not(.is-normal):not(.is-medium)
+ font-size: $size-medium
+ &.has-addons
+ .tag
+ margin-right: 0
+ &:not(:first-child)
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &:not(:last-child)
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ &.is-centered
+ justify-content: center
+ .tag
+ margin-right: 0.25rem
+ margin-left: 0.25rem
+ &.is-right
+ justify-content: flex-end
+ .tag
+ &:not(:first-child)
+ margin-left: 0.5rem
+ &:not(:last-child)
+ margin-right: 0
+ &.has-addons
+ .tag
+ margin-right: 0
+ &:not(:first-child)
+ margin-left: 0
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &:not(:last-child)
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+
+.tag:not(body)
+ align-items: center
+ background-color: $tag-background-color
+ border-radius: $tag-radius
+ color: $tag-color
+ display: inline-flex
+ font-size: $size-small
+ height: 2em
+ justify-content: center
+ line-height: 1.5
+ padding-left: 0.75em
+ padding-right: 0.75em
+ white-space: nowrap
+ .delete
+ margin-left: 0.25rem
+ margin-right: -0.375rem
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ color: $color-invert
+ // Sizes
+ &.is-normal
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-normal
+ &.is-large
+ font-size: $size-medium
+ .icon
+ &:first-child:not(:last-child)
+ margin-left: -0.375em
+ margin-right: 0.1875em
+ &:last-child:not(:first-child)
+ margin-left: 0.1875em
+ margin-right: -0.375em
+ &:first-child:last-child
+ margin-left: -0.375em
+ margin-right: -0.375em
+ // Modifiers
+ &.is-delete
+ margin-left: $tag-delete-margin
+ padding: 0
+ position: relative
+ width: 2em
+ &::before,
+ &::after
+ background-color: currentColor
+ content: ""
+ display: block
+ left: 50%
+ position: absolute
+ top: 50%
+ transform: translateX(-50%) translateY(-50%) rotate(45deg)
+ transform-origin: center center
+ &::before
+ height: 1px
+ width: 50%
+ &::after
+ height: 50%
+ width: 1px
+ &:hover,
+ &:focus
+ background-color: darken($tag-background-color, 5%)
+ &:active
+ background-color: darken($tag-background-color, 10%)
+ &.is-rounded
+ border-radius: $radius-rounded
+
+a.tag
+ &:hover
+ text-decoration: underline
diff --git a/styles/_sass/elements/title.sass b/styles/_sass/elements/title.sass
new file mode 100644
index 0000000..febe2fc
--- /dev/null
+++ b/styles/_sass/elements/title.sass
@@ -0,0 +1,64 @@
+$title-color: $grey-darker !default
+$title-size: $size-3 !default
+$title-weight: $weight-semibold !default
+$title-line-height: 1.125 !default
+$title-strong-color: inherit !default
+$title-strong-weight: inherit !default
+$title-sub-size: 0.75em !default
+$title-sup-size: 0.75em !default
+
+$subtitle-color: $grey-dark !default
+$subtitle-size: $size-5 !default
+$subtitle-weight: $weight-normal !default
+$subtitle-line-height: 1.25 !default
+$subtitle-strong-color: $grey-darker !default
+$subtitle-strong-weight: $weight-semibold !default
+$subtitle-negative-margin: -1.25rem !default
+
+.title,
+.subtitle
+ @extend %block
+ word-break: break-word
+ em,
+ span
+ font-weight: inherit
+ sub
+ font-size: $title-sub-size
+ sup
+ font-size: $title-sup-size
+ .tag
+ vertical-align: middle
+
+.title
+ color: $title-color
+ font-size: $title-size
+ font-weight: $title-weight
+ line-height: $title-line-height
+ strong
+ color: $title-strong-color
+ font-weight: $title-strong-weight
+ & + .highlight
+ margin-top: -0.75rem
+ &:not(.is-spaced) + .subtitle
+ margin-top: $subtitle-negative-margin
+ // Sizes
+ @each $size in $sizes
+ $i: index($sizes, $size)
+ &.is-#{$i}
+ font-size: $size
+
+.subtitle
+ color: $subtitle-color
+ font-size: $subtitle-size
+ font-weight: $subtitle-weight
+ line-height: $subtitle-line-height
+ strong
+ color: $subtitle-strong-color
+ font-weight: $subtitle-strong-weight
+ &:not(.is-spaced) + .title
+ margin-top: $subtitle-negative-margin
+ // Sizes
+ @each $size in $sizes
+ $i: index($sizes, $size)
+ &.is-#{$i}
+ font-size: $size
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 06:10:05 +0000