summaryrefslogtreecommitdiff
path: root/public/css/_sass
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/_sass')
-rw-r--r--public/css/_sass/base/generic.sass32
-rw-r--r--public/css/_sass/base/helpers.sass5
-rw-r--r--public/css/_sass/base/minireset.sass11
-rw-r--r--public/css/_sass/components/breadcrumb.sass2
-rw-r--r--public/css/_sass/components/card.sass23
-rw-r--r--public/css/_sass/components/dropdown.sass20
-rw-r--r--public/css/_sass/components/level.sass8
-rw-r--r--public/css/_sass/components/list.sass10
-rw-r--r--public/css/_sass/components/media.sass6
-rw-r--r--public/css/_sass/components/menu.sass23
-rw-r--r--public/css/_sass/components/message.sass33
-rw-r--r--public/css/_sass/components/modal.sass6
-rw-r--r--public/css/_sass/components/navbar.sass41
-rw-r--r--public/css/_sass/components/pagination.sass26
-rw-r--r--public/css/_sass/components/panel.sass43
-rw-r--r--public/css/_sass/components/tabs.sass2
-rw-r--r--public/css/_sass/elements/_all.sass1
-rw-r--r--public/css/_sass/elements/box.sass8
-rw-r--r--public/css/_sass/elements/button.sass89
-rw-r--r--public/css/_sass/elements/container.sass29
-rw-r--r--public/css/_sass/elements/content.sass6
-rw-r--r--public/css/_sass/elements/form.sass603
-rw-r--r--public/css/_sass/elements/image.sass2
-rw-r--r--public/css/_sass/elements/notification.sass3
-rw-r--r--public/css/_sass/elements/progress.sass30
-rw-r--r--public/css/_sass/elements/table.sass15
-rw-r--r--public/css/_sass/elements/tag.sass16
-rw-r--r--public/css/_sass/elements/title.sass12
-rw-r--r--public/css/_sass/form/_all.sass8
-rw-r--r--public/css/_sass/form/checkbox-radio.sass21
-rw-r--r--public/css/_sass/form/file.sass180
-rw-r--r--public/css/_sass/form/input-textarea.sass64
-rw-r--r--public/css/_sass/form/select.sass85
-rw-r--r--public/css/_sass/form/shared.sass55
-rw-r--r--public/css/_sass/form/tools.sass205
-rw-r--r--public/css/_sass/grid/columns.sass14
-rw-r--r--public/css/_sass/grid/tiles.sass14
-rw-r--r--public/css/_sass/layout/footer.sass5
-rw-r--r--public/css/_sass/layout/hero.sass17
-rw-r--r--public/css/_sass/utilities/.DS_Storebin0 -> 6148 bytes
-rw-r--r--public/css/_sass/utilities/controls.sass6
-rw-r--r--public/css/_sass/utilities/derived-variables.sass39
-rw-r--r--public/css/_sass/utilities/functions.sass66
-rw-r--r--public/css/_sass/utilities/initial-variables.sass13
-rw-r--r--public/css/_sass/utilities/mixins.sass12
45 files changed, 1061 insertions, 848 deletions
diff --git a/public/css/_sass/base/generic.sass b/public/css/_sass/base/generic.sass
index 42a3d88..31eedfe 100644
--- a/public/css/_sass/base/generic.sass
+++ b/public/css/_sass/base/generic.sass
@@ -1,8 +1,13 @@
-$body-background-color: $white !default
+$body-background-color: $scheme-main !default
$body-size: 16px !default
+$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default
$body-family: $family-primary !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
@@ -11,6 +16,8 @@ $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
@@ -18,14 +25,18 @@ $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
- overflow-x: hidden
- overflow-y: scroll
+ min-width: $body-min-width
+ overflow-x: $body-overflow-x
+ overflow-y: $body-overflow-y
text-rendering: $body-rendering
text-size-adjust: 100%
@@ -53,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
@@ -91,7 +102,7 @@ input[type="radio"]
vertical-align: baseline
small
- font-size: 0.875em
+ font-size: $small-font-size
span
font-style: inherit
@@ -110,21 +121,22 @@ 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
td,
th
- text-align: left
vertical-align: top
+ &:not([align])
+ text-align: left
th
color: $text-strong
diff --git a/public/css/_sass/base/helpers.sass b/public/css/_sass/base/helpers.sass
index 17fdf15..bbb489d 100644
--- a/public/css/_sass/base/helpers.sass
+++ b/public/css/_sass/base/helpers.sass
@@ -115,6 +115,8 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
+.has-text-weight-medium
+ font-weight: $weight-medium !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
@@ -274,3 +276,6 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
.is-unselectable
@extend %unselectable
+
+.is-relative
+ position: relative !important
diff --git a/public/css/_sass/base/minireset.sass b/public/css/_sass/base/minireset.sass
index 9c34a89..c5657eb 100644
--- a/public/css/_sass/base/minireset.sass
+++ b/public/css/_sass/base/minireset.sass
@@ -1,4 +1,4 @@
-/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
@@ -59,16 +59,10 @@ html
// Media
img,
-embed,
-iframe,
-object,
video
height: auto
max-width: 100%
-audio
- max-width: 100%
-
// Iframe
iframe
border: 0
@@ -81,4 +75,5 @@ table
td,
th
padding: 0
- text-align: left
+ &:not([align])
+ text-align: left
diff --git a/public/css/_sass/components/breadcrumb.sass b/public/css/_sass/components/breadcrumb.sass
index bcbd15b..3d7f4eb 100644
--- a/public/css/_sass/components/breadcrumb.sass
+++ b/public/css/_sass/components/breadcrumb.sass
@@ -5,7 +5,7 @@ $breadcrumb-item-active-color: $text-strong !default
$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default
-$breadcrumb-item-separator-color: $grey-light !default
+$breadcrumb-item-separator-color: $border-hover !default
.breadcrumb
@extend %block
diff --git a/public/css/_sass/components/card.sass b/public/css/_sass/components/card.sass
index ff12395..3cdf000 100644
--- a/public/css/_sass/components/card.sass
+++ b/public/css/_sass/components/card.sass
@@ -1,16 +1,21 @@
$card-color: $text !default
-$card-background-color: $white !default
-$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$card-background-color: $scheme-main !default
+$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
-$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-padding: 0.75rem 1rem !default
+$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 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-border-top: 1px solid $border-light !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
diff --git a/public/css/_sass/components/dropdown.sass b/public/css/_sass/components/dropdown.sass
index aad663a..d62a6d8 100644
--- a/public/css/_sass/components/dropdown.sass
+++ b/public/css/_sass/components/dropdown.sass
@@ -1,17 +1,21 @@
-$dropdown-content-background-color: $white !default
+$dropdown-menu-min-width: 12rem !default
+
+$dropdown-content-background-color: $scheme-main !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-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$dropdown-content-z: 20 !default
-$dropdown-item-color: $grey-dark !default
-$dropdown-item-hover-color: $black !default
+$dropdown-item-color: $text !default
+$dropdown-item-hover-color: $scheme-invert !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default
-$dropdown-divider-background-color: $border !default
+$dropdown-divider-background-color: $border-light !default
.dropdown
display: inline-flex
@@ -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
diff --git a/public/css/_sass/components/level.sass b/public/css/_sass/components/level.sass
index a3b7716..608f291 100644
--- a/public/css/_sass/components/level.sass
+++ b/public/css/_sass/components/level.sass
@@ -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
diff --git a/public/css/_sass/components/list.sass b/public/css/_sass/components/list.sass
index eccd034..bc99428 100644
--- a/public/css/_sass/components/list.sass
+++ b/public/css/_sass/components/list.sass
@@ -1,5 +1,5 @@
-$list-background-color: $white !default
-$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$list-background-color: $scheme-main !default
+$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default
@@ -26,8 +26,8 @@ $list-item-hover-background-color: $background !default
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
- border-top-left-radius: $list-radius
- border-top-right-radius: $list-radius
+ border-bottom-left-radius: $list-radius
+ border-bottom-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
@@ -36,4 +36,4 @@ $list-item-hover-background-color: $background !default
a.list-item
background-color: $list-item-hover-background-color
- cursor: pointer \ No newline at end of file
+ cursor: pointer
diff --git a/public/css/_sass/components/media.sass b/public/css/_sass/components/media.sass
index e8542d8..65939fc 100644
--- a/public/css/_sass/components/media.sass
+++ b/public/css/_sass/components/media.sass
@@ -1,3 +1,5 @@
+$media-border-color: rgba($border, 0.5) !default
+
.media
align-items: flex-start
display: flex
@@ -5,7 +7,7 @@
.content:not(:last-child)
margin-bottom: 0.75rem
.media
- border-top: 1px solid rgba($border, 0.5)
+ border-top: 1px solid $media-border-color
display: flex
padding-top: 0.75rem
.content:not(:last-child),
@@ -16,7 +18,7 @@
& + .media
margin-top: 0.5rem
& + .media
- border-top: 1px solid rgba($border, 0.5)
+ border-top: 1px solid $media-border-color
margin-top: 1rem
padding-top: 1rem
// Sizes
diff --git a/public/css/_sass/components/menu.sass b/public/css/_sass/components/menu.sass
index 727df36..3de7e18 100644
--- a/public/css/_sass/components/menu.sass
+++ b/public/css/_sass/components/menu.sass
@@ -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
diff --git a/public/css/_sass/components/message.sass b/public/css/_sass/components/message.sass
index badac5d..89e4cc9 100644
--- a/public/css/_sass/components/message.sass
+++ b/public/css/_sass/components/message.sass
@@ -13,10 +13,11 @@ $message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
-$message-body-pre-background-color: $white !default
+$message-body-pre-background-color: $scheme-main !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
+$message-colors: $colors !default
.message
@extend %block
@@ -36,21 +37,33 @@ $message-header-body-border-width: 0 !default
&.is-large
font-size: $size-large
// Colors
- @each $name, $pair in $colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- $color-lightning: max((100% - lightness($color)) - 2%, 0%)
- $color-luminance: colorLuminance($color)
- $darken-percentage: $color-luminance * 70%
- $desaturate-percentage: $color-luminance * 30%
+ @each $name, $components in $message-colors
+ $color: nth($components, 1)
+ $color-invert: nth($components, 2)
+ $color-light: null
+ $color-dark: null
+
+ @if length($components) >= 3
+ $color-light: nth($components, 3)
+ @if length($components) >= 4
+ $color-dark: nth($components, 4)
+ @else
+ $color-luminance: colorLuminance($color)
+ $darken-percentage: $color-luminance * 70%
+ $desaturate-percentage: $color-luminance * 30%
+ $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+ @else
+ $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+ $color-light: lighten($color, $color-lightning)
+
&.is-#{$name}
- background-color: lighten($color, $color-lightning)
+ background-color: $color-light
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
- color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+ color: $color-dark
.message-header
align-items: center
diff --git a/public/css/_sass/components/modal.sass b/public/css/_sass/components/modal.sass
index b6fb1a1..c3a5a0c 100644
--- a/public/css/_sass/components/modal.sass
+++ b/public/css/_sass/components/modal.sass
@@ -1,6 +1,6 @@
$modal-z: 40 !default
-$modal-background-background-color: rgba($black, 0.86) !default
+$modal-background-background-color: rgba($scheme-invert, 0.86) !default
$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
@@ -25,7 +25,7 @@ $modal-card-title-size: $size-4 !default
$modal-card-foot-radius: $radius-large !default
$modal-card-foot-border-top: 1px solid $border !default
-$modal-card-body-background-color: $white !default
+$modal-card-body-background-color: $scheme-main !default
$modal-card-body-padding: 20px !default
.modal
@@ -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
diff --git a/public/css/_sass/components/navbar.sass b/public/css/_sass/components/navbar.sass
index dc90dd9..664558f 100644
--- a/public/css/_sass/components/navbar.sass
+++ b/public/css/_sass/components/navbar.sass
@@ -1,4 +1,4 @@
-$navbar-background-color: $white !default
+$navbar-background-color: $scheme-main !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default
@@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default
-$navbar-item-color: $grey-dark !default
+$navbar-item-color: $text !default
$navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $white-bis !default
-$navbar-item-active-color: $black !default
+$navbar-item-hover-background-color: $scheme-main-bis !default
+$navbar-item-active-color: $scheme-invert !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default
@@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default
-$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-background-color: $scheme-main !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
@@ -32,9 +32,9 @@ $navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
-$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-color: $scheme-invert !default
$navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default
@@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
+ &:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
@@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
+ &:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
@@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
.navbar-link
&::after
border-color: $color-invert
+ .navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%)
@@ -135,6 +138,7 @@ body
.navbar-brand
a.navbar-item
+ &:focus,
&:hover
background-color: transparent
@@ -167,6 +171,8 @@ body
a.navbar-item,
.navbar-link
cursor: pointer
+ &:focus,
+ &:focus-within,
&:hover,
&.is-active
background-color: $navbar-item-hover-background-color
@@ -187,6 +193,7 @@ a.navbar-item,
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
+ &:focus,
&:hover
background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -238,7 +245,7 @@ a.navbar-item,
display: none
.navbar-menu
background-color: $navbar-background-color
- box-shadow: 0 8px 16px rgba($black, 0.1)
+ box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
padding: 0.5rem 0
&.is-active
display: block
@@ -250,7 +257,7 @@ a.navbar-item,
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
- box-shadow: 0 -2px 3px rgba($black, 0.1)
+ box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-touch
top: 0
&.is-fixed-top,
@@ -286,16 +293,20 @@ a.navbar-item,
&.is-transparent
a.navbar-item,
.navbar-link
+ &:focus,
&:hover,
&.is-active
background-color: transparent !important
.navbar-item.has-dropdown
&.is-active,
+ &.is-hoverable:focus,
+ &.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-link
background-color: transparent !important
.navbar-dropdown
a.navbar-item
+ &:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@@ -320,9 +331,11 @@ a.navbar-item,
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
- box-shadow: 0 -8px 8px rgba($black, 0.1)
+ box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
top: auto
&.is-active,
+ &.is-hoverable:focus,
+ &.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-dropdown
display: block
@@ -345,7 +358,7 @@ a.navbar-item,
border-bottom-left-radius: $navbar-dropdown-radius
border-bottom-right-radius: $navbar-dropdown-radius
border-top: $navbar-dropdown-border-top
- box-shadow: 0 8px 8px rgba($black, 0.1)
+ box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
display: none
font-size: 0.875rem
left: 0
@@ -358,6 +371,7 @@ a.navbar-item,
white-space: nowrap
a.navbar-item
padding-right: 3rem
+ &:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
@@ -395,7 +409,7 @@ a.navbar-item,
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
- box-shadow: 0 -2px 3px rgba($black, 0.1)
+ box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
&.is-fixed-top-desktop
top: 0
html,
@@ -413,9 +427,10 @@ a.navbar-item,
.navbar-link
&.is-active
color: $navbar-item-active-color
- &.is-active:not(:hover)
+ &.is-active:not(:focus):not(:hover)
background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown
+ &:focus,
&:hover,
&.is-active
.navbar-link
diff --git a/public/css/_sass/components/pagination.sass b/public/css/_sass/components/pagination.sass
index 9b8fd03..822c2e8 100644
--- a/public/css/_sass/components/pagination.sass
+++ b/public/css/_sass/components/pagination.sass
@@ -1,8 +1,13 @@
-$pagination-color: $grey-darker !default
-$pagination-border-color: $grey-lighter !default
+$pagination-color: $text-strong !default
+$pagination-border-color: $border !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
@@ -12,9 +17,9 @@ $pagination-focus-border-color: $link-focus-border !default
$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default
-$pagination-disabled-color: $grey !default
-$pagination-disabled-background-color: $grey-lighter !default
-$pagination-disabled-border-color: $grey-lighter !default
+$pagination-disabled-color: $text-light !default
+$pagination-disabled-background-color: $border !default
+$pagination-disabled-border-color: $border !default
$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
@@ -22,9 +27,10 @@ $pagination-current-border-color: $link !default
$pagination-ellipsis-color: $grey-light !default
-$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
.pagination
+ @extend %block
font-size: $size-normal
margin: $pagination-margin
// Sizes
@@ -56,11 +62,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,
diff --git a/public/css/_sass/components/panel.sass b/public/css/_sass/components/panel.sass
index b9d339e..3c32be6 100644
--- a/public/css/_sass/components/panel.sass
+++ b/public/css/_sass/components/panel.sass
@@ -1,13 +1,17 @@
-$panel-item-border: 1px solid $border !default
+$panel-margin: $block-spacing !default
+$panel-item-border: 1px solid $border-light !default
+$panel-radius: $radius-large !default
+$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
-$panel-heading-background-color: $background !default
+$panel-heading-background-color: $border-light !default
$panel-heading-color: $text-strong !default
$panel-heading-line-height: 1.25 !default
-$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-padding: 0.75em 1em !default
$panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default
-$panel-heading-weight: $weight-light !default
+$panel-heading-weight: $weight-bold !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
@@ -24,22 +28,32 @@ $panel-block-active-icon-color: $link !default
$panel-icon-color: $text-light !default
.panel
+ border-radius: $panel-radius
+ box-shadow: $panel-shadow
font-size: $size-normal
&:not(:last-child)
- margin-bottom: 1.5rem
+ margin-bottom: $panel-margin
+ // Colors
+ @each $name, $components in $message-colors
+ $color: nth($components, 1)
+ $color-invert: nth($components, 2)
+ &.is-#{$name}
+ .panel-heading
+ background-color: $color
+ color: $color-invert
+ .panel-tabs a.is-active
+ border-bottom-color: $color
+ .panel-block.is-active .panel-icon
+ color: $color
-.panel-heading,
.panel-tabs,
.panel-block
- border-bottom: $panel-item-border
- border-left: $panel-item-border
- border-right: $panel-item-border
- &:first-child
- border-top: $panel-item-border
+ &:not(:last-child)
+ border-bottom: $panel-item-border
.panel-heading
background-color: $panel-heading-background-color
- border-radius: $panel-heading-radius $panel-heading-radius 0 0
+ border-radius: $panel-radius $panel-radius 0 0
color: $panel-heading-color
font-size: $panel-heading-size
font-weight: $panel-heading-weight
@@ -49,7 +63,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
@@ -85,6 +99,9 @@ $panel-icon-color: $text-light !default
color: $panel-block-active-color
.panel-icon
color: $panel-block-active-icon-color
+ &:last-child
+ border-bottom-left-radius: $panel-radius
+ border-bottom-right-radius: $panel-radius
a.panel-block,
label.panel-block
diff --git a/public/css/_sass/components/tabs.sass b/public/css/_sass/components/tabs.sass
index 21ed90a..8c28c25 100644
--- a/public/css/_sass/components/tabs.sass
+++ b/public/css/_sass/components/tabs.sass
@@ -12,7 +12,7 @@ $tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default
-$tabs-boxed-link-active-background-color: $white !default
+$tabs-boxed-link-active-background-color: $scheme-main !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default
diff --git a/public/css/_sass/elements/_all.sass b/public/css/_sass/elements/_all.sass
index 2234322..7490c00 100644
--- a/public/css/_sass/elements/_all.sass
+++ b/public/css/_sass/elements/_all.sass
@@ -4,7 +4,6 @@
@import "button.sass"
@import "container.sass"
@import "content.sass"
-@import "form.sass"
@import "icon.sass"
@import "image.sass"
@import "notification.sass"
diff --git a/public/css/_sass/elements/box.sass b/public/css/_sass/elements/box.sass
index d58f405..2fd18d4 100644
--- a/public/css/_sass/elements/box.sass
+++ b/public/css/_sass/elements/box.sass
@@ -1,11 +1,11 @@
$box-color: $text !default
-$box-background-color: $white !default
+$box-background-color: $scheme-main !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-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !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-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
+$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
.box
@extend %block
diff --git a/public/css/_sass/elements/button.sass b/public/css/_sass/elements/button.sass
index e75cd2f..22078ae 100644
--- a/public/css/_sass/elements/button.sass
+++ b/public/css/_sass/elements/button.sass
@@ -1,11 +1,12 @@
-$button-color: $grey-darker !default
-$button-background-color: $white !default
+$button-color: $text-strong !default
+$button-background-color: $scheme-main !default
+$button-family: false !default
-$button-border-color: $grey-lighter !default
+$button-border-color: $border !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-padding-vertical: calc(0.5em - #{$button-border-width}) !default
+$button-padding-horizontal: 1em !default
$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default
@@ -22,14 +23,14 @@ $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-background-color: $scheme-main !default
+$button-disabled-border-color: $border !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-static-color: $text-light !default
+$button-static-background-color: $scheme-main-ter !default
+$button-static-border-color: $border !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
@@ -50,6 +51,8 @@ $button-static-border-color: $grey-lighter !default
border-width: $button-border-width
color: $button-color
cursor: pointer
+ @if $button-family
+ font-family: $button-family
justify-content: center
padding-bottom: $button-padding-vertical
padding-left: $button-padding-horizontal
@@ -67,14 +70,14 @@ $button-static-border-color: $grey-lighter !default
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
- margin-left: calc(-0.375em - #{$button-border-width})
- margin-right: 0.1875em
+ margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+ margin-right: $button-padding-horizontal / 4
&:last-child:not(:first-child)
- margin-left: 0.1875em
- margin-right: calc(-0.375em - #{$button-border-width})
+ margin-left: $button-padding-horizontal / 4
+ margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
&:first-child:last-child
- margin-left: calc(-0.375em - #{$button-border-width})
- margin-right: calc(-0.375em - #{$button-border-width})
+ margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+ margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
// States
&:hover,
&.is-hovered
@@ -142,7 +145,8 @@ $button-static-border-color: $grey-lighter !default
&.is-inverted
background-color: $color-invert
color: $color
- &:hover
+ &:hover,
+ &.is-hovered
background-color: darken($color-invert, 5%)
&[disabled],
fieldset[disabled] &
@@ -158,13 +162,21 @@ $button-static-border-color: $grey-lighter !default
border-color: $color
color: $color
&:hover,
- &:focus
+ &.is-hovered,
+ &:focus,
+ &.is-focused
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&::after
border-color: transparent transparent $color $color !important
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused
+ &::after
+ border-color: transparent transparent $color-invert $color-invert !important
&[disabled],
fieldset[disabled] &
background-color: transparent
@@ -176,15 +188,41 @@ $button-static-border-color: $grey-lighter !default
border-color: $color-invert
color: $color-invert
&:hover,
- &:focus
+ &.is-hovered,
+ &:focus,
+ &.is-focused
background-color: $color-invert
color: $color
+ &.is-loading
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused
+ &::after
+ border-color: transparent transparent $color $color !important
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
+ // If light and dark colors are provided
+ @if length($pair) >= 4
+ $color-light: nth($pair, 3)
+ $color-dark: nth($pair, 4)
+ &.is-light
+ background-color: $color-light
+ color: $color-dark
+ &:hover,
+ &.is-hovered
+ background-color: darken($color-light, 2.5%)
+ border-color: transparent
+ color: $color-dark
+ &:active,
+ &.is-active
+ background-color: darken($color-light, 5%)
+ border-color: transparent
+ color: $color-dark
// Sizes
&.is-small
+button-small
@@ -219,8 +257,8 @@ $button-static-border-color: $grey-lighter !default
pointer-events: none
&.is-rounded
border-radius: $radius-rounded
- padding-left: 1em
- padding-right: 1em
+ padding-left: calc(#{$button-padding-horizontal} + 0.25em)
+ padding-right: calc(#{$button-padding-horizontal} + 0.25em)
.buttons
align-items: center
@@ -269,7 +307,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)
+ .button:not(.is-fullwidth)
+ margin-left: 0.25rem
+ margin-right: 0.25rem
&.is-right
justify-content: flex-end
+ &:not(.has-addons)
+ .button:not(.is-fullwidth)
+ margin-left: 0.25rem
+ margin-right: 0.25rem
diff --git a/public/css/_sass/elements/container.sass b/public/css/_sass/elements/container.sass
index 2aaf591..d88eb94 100644
--- a/public/css/_sass/elements/container.sass
+++ b/public/css/_sass/elements/container.sass
@@ -1,25 +1,24 @@
+$container-offset: (2 * $gap) !default
+
.container
+ flex-grow: 1
margin: 0 auto
position: relative
+ width: auto
+ &.is-fluid
+ max-width: none
+ padding-left: $gap
+ padding-right: $gap
+ width: 100%
+desktop
- max-width: $desktop - (2 * $gap)
- width: $desktop - (2 * $gap)
- &.is-fluid
- margin-left: $gap
- margin-right: $gap
- max-width: none
- width: auto
+ max-width: $desktop - $container-offset
+until-widescreen
&.is-widescreen
- max-width: $widescreen - (2 * $gap)
- width: auto
+ max-width: $widescreen - $container-offset
+until-fullhd
&.is-fullhd
- max-width: $fullhd - (2 * $gap)
- width: auto
+ max-width: $fullhd - $container-offset
+widescreen
- max-width: $widescreen - (2 * $gap)
- width: $widescreen - (2 * $gap)
+ max-width: $widescreen - $container-offset
+fullhd
- max-width: $fullhd - (2 * $gap)
- width: $fullhd - (2 * $gap)
+ max-width: $fullhd - $container-offset
diff --git a/public/css/_sass/elements/content.sass b/public/css/_sass/elements/content.sass
index 3f5530e..001419a 100644
--- a/public/css/_sass/elements/content.sass
+++ b/public/css/_sass/elements/content.sass
@@ -125,7 +125,8 @@ $content-table-foot-cell-color: $text-strong !default
vertical-align: top
th
color: $content-table-cell-heading-color
- text-align: left
+ &:not([align])
+ text-align: left
thead
td,
th
@@ -142,6 +143,9 @@ $content-table-foot-cell-color: $text-strong !default
td,
th
border-bottom-width: 0
+ .tabs
+ li + li
+ margin-top: 0
// Sizes
&.is-small
font-size: $size-small
diff --git a/public/css/_sass/elements/form.sass b/public/css/_sass/elements/form.sass
index c944b75..3122dc4 100644
--- a/public/css/_sass/elements/form.sass
+++ b/public/css/_sass/elements/form.sass
@@ -1,602 +1 @@
-$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
+@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
diff --git a/public/css/_sass/elements/image.sass b/public/css/_sass/elements/image.sass
index cfa64fe..7547abc 100644
--- a/public/css/_sass/elements/image.sass
+++ b/public/css/_sass/elements/image.sass
@@ -9,6 +9,8 @@ $dimensions: 16 24 32 48 64 96 128 !default
width: 100%
&.is-rounded
border-radius: $radius-rounded
+ &.is-fullwidth
+ width: 100%
// Ratio
&.is-square,
&.is-1by1,
diff --git a/public/css/_sass/elements/notification.sass b/public/css/_sass/elements/notification.sass
index 2bda414..24122e7 100644
--- a/public/css/_sass/elements/notification.sass
+++ b/public/css/_sass/elements/notification.sass
@@ -1,4 +1,5 @@
$notification-background-color: $background !default
+$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
@@ -15,7 +16,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
color: currentColor
code,
pre
- background: $white
+ background: $notification-code-background-color
pre code
background: transparent
& > .delete
diff --git a/public/css/_sass/elements/progress.sass b/public/css/_sass/elements/progress.sass
index b263eeb..bb43bb6 100644
--- a/public/css/_sass/elements/progress.sass
+++ b/public/css/_sass/elements/progress.sass
@@ -1,5 +1,6 @@
-$progress-bar-background-color: $border !default
+$progress-bar-background-color: $border-light !default
$progress-value-background-color: $text !default
+$progress-border-radius: $radius-rounded !default
$progress-indeterminate-duration: 1.5s !default
@@ -8,7 +9,7 @@ $progress-indeterminate-duration: 1.5s !default
-moz-appearance: none
-webkit-appearance: none
border: none
- border-radius: $radius-rounded
+ border-radius: $progress-border-radius
display: block
height: $size-normal
overflow: hidden
@@ -23,6 +24,19 @@ $progress-indeterminate-duration: 1.5s !default
&::-ms-fill
background-color: $progress-value-background-color
border: none
+ // 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%)
+
&:indeterminate
animation-duration: $progress-indeterminate-duration
animation-iteration-count: infinite
@@ -37,18 +51,6 @@ $progress-indeterminate-duration: 1.5s !default
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
diff --git a/public/css/_sass/elements/table.sass b/public/css/_sass/elements/table.sass
index a1cf936..2e6036a 100644
--- a/public/css/_sass/elements/table.sass
+++ b/public/css/_sass/elements/table.sass
@@ -1,7 +1,7 @@
-$table-color: $grey-darker !default
-$table-background-color: $white !default
+$table-color: $text-strong !default
+$table-background-color: $scheme-main !default
-$table-cell-border: 1px solid $grey-lighter !default
+$table-cell-border: 1px solid $border !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
@@ -15,13 +15,13 @@ $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-hover-background-color: $scheme-main-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-striped-row-even-background-color: $scheme-main-bis !default
+$table-striped-row-even-hover-background-color: $scheme-main-ter !default
.table
@extend %block
@@ -53,7 +53,8 @@ $table-striped-row-even-hover-background-color: $white-ter !default
color: currentColor
th
color: $table-cell-heading-color
- text-align: left
+ &:not([align])
+ text-align: left
tr
&.is-selected
background-color: $table-row-active-background-color
diff --git a/public/css/_sass/elements/tag.sass b/public/css/_sass/elements/tag.sass
index a5fb3c4..e0fb89e 100644
--- a/public/css/_sass/elements/tag.sass
+++ b/public/css/_sass/elements/tag.sass
@@ -23,15 +23,6 @@ $tag-delete-margin: 1px !default
&.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
@@ -78,6 +69,13 @@ $tag-delete-margin: 1px !default
&.is-#{$name}
background-color: $color
color: $color-invert
+ // If a light and dark colors are provided
+ @if length($pair) > 3
+ $color-light: nth($pair, 3)
+ $color-dark: nth($pair, 4)
+ &.is-light
+ background-color: $color-light
+ color: $color-dark
// Sizes
&.is-normal
font-size: $size-small
diff --git a/public/css/_sass/elements/title.sass b/public/css/_sass/elements/title.sass
index febe2fc..fa9947d 100644
--- a/public/css/_sass/elements/title.sass
+++ b/public/css/_sass/elements/title.sass
@@ -1,4 +1,5 @@
-$title-color: $grey-darker !default
+$title-color: $text-strong !default
+$title-family: false !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
$title-line-height: 1.125 !default
@@ -7,11 +8,12 @@ $title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default
-$subtitle-color: $grey-dark !default
+$subtitle-color: $text !default
+$subtitle-family: false !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-color: $text-strong !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default
@@ -31,6 +33,8 @@ $subtitle-negative-margin: -1.25rem !default
.title
color: $title-color
+ @if $title-family
+ font-family: $title-family
font-size: $title-size
font-weight: $title-weight
line-height: $title-line-height
@@ -49,6 +53,8 @@ $subtitle-negative-margin: -1.25rem !default
.subtitle
color: $subtitle-color
+ @if $subtitle-family
+ font-family: $subtitle-family
font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: $subtitle-line-height
diff --git a/public/css/_sass/form/_all.sass b/public/css/_sass/form/_all.sass
new file mode 100644
index 0000000..d9a2b95
--- /dev/null
+++ b/public/css/_sass/form/_all.sass
@@ -0,0 +1,8 @@
+@charset "utf-8"
+
+@import "shared.sass"
+@import "input-textarea.sass"
+@import "checkbox-radio.sass"
+@import "select.sass"
+@import "file.sass"
+@import "tools.sass"
diff --git a/public/css/_sass/form/checkbox-radio.sass b/public/css/_sass/form/checkbox-radio.sass
new file mode 100644
index 0000000..d9f3ff0
--- /dev/null
+++ b/public/css/_sass/form/checkbox-radio.sass
@@ -0,0 +1,21 @@
+%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
+
+.checkbox
+ @extend %checkbox-radio
+
+.radio
+ @extend %checkbox-radio
+ & + .radio
+ margin-left: 0.5em
diff --git a/public/css/_sass/form/file.sass b/public/css/_sass/form/file.sass
new file mode 100644
index 0000000..41cc021
--- /dev/null
+++ b/public/css/_sass/form/file.sass
@@ -0,0 +1,180 @@
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $scheme-main-ter !default
+$file-cta-color: $text !default
+$file-cta-hover-color: $text-strong !default
+$file-cta-active-color: $text-strong !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
+
+.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
diff --git a/public/css/_sass/form/input-textarea.sass b/public/css/_sass/form/input-textarea.sass
new file mode 100644
index 0000000..7636cda
--- /dev/null
+++ b/public/css/_sass/form/input-textarea.sass
@@ -0,0 +1,64 @@
+$textarea-padding: $control-padding-horizontal !default
+$textarea-max-height: 40em !default
+$textarea-min-height: 8em !default
+
+%input-textarea
+ @extend %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
+ @extend %input-textarea
+ &.is-rounded
+ border-radius: $radius-rounded
+ padding-left: calc(#{$control-padding-horizontal} + 0.375em)
+ padding-right: calc(#{$control-padding-horizontal} + 0.375em)
+ &.is-static
+ background-color: transparent
+ border-color: transparent
+ box-shadow: none
+ padding-left: 0
+ padding-right: 0
+
+.textarea
+ @extend %input-textarea
+ display: block
+ max-width: 100%
+ min-width: 100%
+ padding: $textarea-padding
+ resize: vertical
+ &:not([rows])
+ max-height: $textarea-max-height
+ min-height: $textarea-min-height
+ &[rows]
+ height: initial
+ // Modifiers
+ &.has-fixed-size
+ resize: none
diff --git a/public/css/_sass/form/select.sass b/public/css/_sass/form/select.sass
new file mode 100644
index 0000000..909b9d5
--- /dev/null
+++ b/public/css/_sass/form/select.sass
@@ -0,0 +1,85 @@
+.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
+ @extend %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
diff --git a/public/css/_sass/form/shared.sass b/public/css/_sass/form/shared.sass
new file mode 100644
index 0000000..f9c6890
--- /dev/null
+++ b/public/css/_sass/form/shared.sass
@@ -0,0 +1,55 @@
+$input-color: $text-strong !default
+$input-background-color: $scheme-main !default
+$input-border-color: $border !default
+$input-height: $control-height !default
+$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
+$input-placeholder-color: rgba($input-color, 0.3) !default
+
+$input-hover-color: $text-strong !default
+$input-hover-border-color: $border-hover !default
+
+$input-focus-color: $text-strong !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: $border !default
+$input-icon-active-color: $text !default
+
+$input-radius: $radius !default
+
+=input
+ @extend %control
+ background-color: $input-background-color
+ border-color: $input-border-color
+ border-radius: $input-radius
+ 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
+ +input
diff --git a/public/css/_sass/form/tools.sass b/public/css/_sass/form/tools.sass
new file mode 100644
index 0000000..ff2f8e2
--- /dev/null
+++ b/public/css/_sass/form/tools.sass
@@ -0,0 +1,205 @@
+$label-color: $text-strong !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
+.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
+ flex-shrink: 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
+ 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/public/css/_sass/grid/columns.sass b/public/css/_sass/grid/columns.sass
index bd41761..34a8353 100644
--- a/public/css/_sass/grid/columns.sass
+++ b/public/css/_sass/grid/columns.sass
@@ -56,7 +56,7 @@ $column-gap: 0.75rem !default
margin-left: 60%
.columns.is-mobile > &.is-offset-four-fifths
margin-left: 80%
- @for $i from 1 through 12
+ @for $i from 0 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
width: percentage($i / 12)
@@ -113,7 +113,7 @@ $column-gap: 0.75rem !default
margin-left: 60%
&.is-offset-four-fifths-mobile
margin-left: 80%
- @for $i from 1 through 12
+ @for $i from 0 through 12
&.is-#{$i}-mobile
flex: none
width: percentage($i / 12)
@@ -190,7 +190,7 @@ $column-gap: 0.75rem !default
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
margin-left: 80%
- @for $i from 1 through 12
+ @for $i from 0 through 12
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
@@ -249,7 +249,7 @@ $column-gap: 0.75rem !default
margin-left: 60%
&.is-offset-four-fifths-touch
margin-left: 80%
- @for $i from 1 through 12
+ @for $i from 0 through 12
&.is-#{$i}-touch
flex: none
width: percentage($i / 12)
@@ -306,7 +306,7 @@ $column-gap: 0.75rem !default
margin-left: 60%
&.is-offset-four-fifths-desktop
margin-left: 80%
- @for $i from 1 through 12
+ @for $i from 0 through 12
&.is-#{$i}-desktop
flex: none
width: percentage($i / 12)
@@ -363,7 +363,7 @@ $column-gap: 0.75rem !default
margin-left: 60%
&.is-offset-four-fifths-widescreen
margin-left: 80%
- @for $i from 1 through 12
+ @for $i from 0 through 12
&.is-#{$i}-widescreen
flex: none
width: percentage($i / 12)
@@ -420,7 +420,7 @@ $column-gap: 0.75rem !default
margin-left: 60%
&.is-offset-four-fifths-fullhd
margin-left: 80%
- @for $i from 1 through 12
+ @for $i from 0 through 12
&.is-#{$i}-fullhd
flex: none
width: percentage($i / 12)
diff --git a/public/css/_sass/grid/tiles.sass b/public/css/_sass/grid/tiles.sass
index 1f6a626..15648c2 100644
--- a/public/css/_sass/grid/tiles.sass
+++ b/public/css/_sass/grid/tiles.sass
@@ -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)
diff --git a/public/css/_sass/layout/footer.sass b/public/css/_sass/layout/footer.sass
index 1988153..8faa11e 100644
--- a/public/css/_sass/layout/footer.sass
+++ b/public/css/_sass/layout/footer.sass
@@ -1,6 +1,9 @@
-$footer-background-color: $white-bis !default
+$footer-background-color: $scheme-main-bis !default
+$footer-color: false !default
$footer-padding: 3rem 1.5rem 6rem !default
.footer
background-color: $footer-background-color
padding: $footer-padding
+ @if $footer-color
+ color: $footer-color
diff --git a/public/css/_sass/layout/hero.sass b/public/css/_sass/layout/hero.sass
index d988040..9b18e4f 100644
--- a/public/css/_sass/layout/hero.sass
+++ b/public/css/_sass/layout/hero.sass
@@ -17,7 +17,7 @@
&.is-#{$name}
background-color: $color
color: $color-invert
- a:not(.button):not(.dropdown-item):not(.tag),
+ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
strong
color: inherit
.title
@@ -53,7 +53,7 @@
a
color: $color-invert
&:hover
- background-color: rgba($black, 0.1)
+ background-color: rgba($scheme-invert, 0.1)
li.is-active a
&,
&:hover
@@ -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
diff --git a/public/css/_sass/utilities/.DS_Store b/public/css/_sass/utilities/.DS_Store
new file mode 100644
index 0000000..5008ddf
--- /dev/null
+++ b/public/css/_sass/utilities/.DS_Store
Binary files differ
diff --git a/public/css/_sass/utilities/controls.sass b/public/css/_sass/utilities/controls.sass
index 7ca0521..cc7672a 100644
--- a/public/css/_sass/utilities/controls.sass
+++ b/public/css/_sass/utilities/controls.sass
@@ -3,11 +3,11 @@ $control-radius-small: $radius-small !default
$control-border-width: 1px !default
-$control-height: 2.25em !default
+$control-height: 2.5em !default
$control-line-height: 1.5 !default
-$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
-$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
+$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
+$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
=control
-moz-appearance: none
diff --git a/public/css/_sass/utilities/derived-variables.sass b/public/css/_sass/utilities/derived-variables.sass
index c464814..18a7f46 100644
--- a/public/css/_sass/utilities/derived-variables.sass
+++ b/public/css/_sass/utilities/derived-variables.sass
@@ -19,20 +19,39 @@ $blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
-$primary-invert: $turquoise-invert !default
-$info-invert: $cyan-invert !default
-$success-invert: $green-invert !default
-$warning-invert: $yellow-invert !default
-$danger-invert: $red-invert !default
-$light-invert: $dark !default
-$dark-invert: $light !default
+$primary-invert: findColorInvert($primary) !default
+$primary-light: findLightColor($primary) !default
+$primary-dark: findDarkColor($primary) !default
+$info-invert: findColorInvert($info) !default
+$info-light: findLightColor($info) !default
+$info-dark: findDarkColor($info) !default
+$success-invert: findColorInvert($success) !default
+$success-light: findLightColor($success) !default
+$success-dark: findDarkColor($success) !default
+$warning-invert: findColorInvert($warning) !default
+$warning-light: findLightColor($warning) !default
+$warning-dark: findDarkColor($warning) !default
+$danger-invert: findColorInvert($danger) !default
+$danger-light: findLightColor($danger) !default
+$danger-dark: findDarkColor($danger) !default
+$light-invert: findColorInvert($light) !default
+$dark-invert: findColorInvert($dark) !default
// General colors
+$scheme-main: $white !default
+$scheme-main-bis: $white-bis !default
+$scheme-main-ter: $white-ter !default
+$scheme-invert: $black !default
+$scheme-invert-bis: $black-bis !default
+$scheme-invert-ter: $black-ter !default
+
$background: $white-ter !default
$border: $grey-lighter !default
$border-hover: $grey-light !default
+$border-light: $grey-lightest !default
+$border-light-hover: $grey-light !default
// Text colors
@@ -52,7 +71,9 @@ $pre-background: $background !default
// Link colors
$link: $blue !default
-$link-invert: $blue-invert !default
+$link-invert: findColorInvert($link) !default
+$link-light: findLightColor($link) !default
+$link-dark: findDarkColor($link) !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
@@ -79,7 +100,7 @@ $size-large: $size-4 !default
$custom-colors: null !default
$custom-shades: null !default
-$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
diff --git a/public/css/_sass/utilities/functions.sass b/public/css/_sass/utilities/functions.sass
index acd3e83..481ab95 100644
--- a/public/css/_sass/utilities/functions.sass
+++ b/public/css/_sass/utilities/functions.sass
@@ -1,34 +1,53 @@
@function mergeColorMaps($bulma-colors, $custom-colors)
- // we return at least bulma hardcoded colors
+ // We return at least Bulma's hard-coded colors
$merged-colors: $bulma-colors
- // we want a map as input
+ // We want a map as input
@if type-of($custom-colors) == 'map'
@each $name, $components in $custom-colors
- // color name should be a string and colors pair a list with at least one element
+ // The color name should be a string
+ // and the components either a single color
+ // or a colors list with at least one element
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
$color-base: null
+ $color-invert: null
+ $color-light: null
+ $color-dark: null
+ $value: null
- // the param can either be a single color
+ // The param can either be a single color
// or a list of 2 colors
@if type-of($components) == 'color'
$color-base: $components
+ $color-invert: findColorInvert($color-base)
+ $color-light: findLightColor($color-base)
+ $color-dark: findDarkColor($color-base)
@else if type-of($components) == 'list'
$color-base: nth($components, 1)
+ // If Invert, Light and Dark are provided
+ @if length($components) > 3
+ $color-invert: nth($components, 2)
+ $color-light: nth($components, 3)
+ $color-dark: nth($components, 4)
+ // If only Invert and Light are provided
+ @else if length($components) > 2
+ $color-invert: nth($components, 2)
+ $color-light: nth($components, 3)
+ $color-dark: findDarkColor($color-base)
+ // If only Invert is provided
+ @else
+ $color-invert: nth($components, 2)
+ $color-light: findLightColor($color-base)
+ $color-dark: findDarkColor($color-base)
- $color-invert: null
- // is an inverted color provided in the list
- @if length($components) > 1
- $color-invert: nth($components, 2)
+ $value: ($color-base, $color-invert, $color-light, $color-dark)
- // we only want a color as base color
+ // We only want to merge the map if the color base is an actual color
@if type-of($color-base) == 'color'
- // if inverted color is not provided or is not a color we compute it
- @if type-of($color-invert) != 'color'
- $color-invert: findColorInvert($color-base)
-
- // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
- $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
+ // We merge this colors elements as map with Bulma's colors map
+ // (we can override them this way, no multiple definition for the same name)
+ // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
+ $merged-colors: map_merge($merged-colors, ($name: $value))
@return $merged-colors
@@ -60,3 +79,20 @@
@return rgba(#000, 0.7)
@else
@return #fff
+
+@function findLightColor($color)
+ @if type-of($color) == 'color'
+ $l: 96%
+ @if lightness($color) > 96%
+ $l: lightness($color)
+ @return change-color($color, $lightness: $l)
+ @return $background
+
+@function findDarkColor($color)
+ @if type-of($color) == 'color'
+ $base-l: 29%
+ $luminance: colorLuminance($color)
+ $luminance-delta: (0.53 - $luminance)
+ $target-l: round($base-l + ($luminance-delta * 53))
+ @return change-color($color, $lightness: max($base-l, $target-l))
+ @return $text-strong
diff --git a/public/css/_sass/utilities/initial-variables.sass b/public/css/_sass/utilities/initial-variables.sass
index 421bd3d..03bbc12 100644
--- a/public/css/_sass/utilities/initial-variables.sass
+++ b/public/css/_sass/utilities/initial-variables.sass
@@ -9,6 +9,7 @@ $grey-dark: hsl(0, 0%, 29%) !default
$grey: hsl(0, 0%, 48%) !default
$grey-light: hsl(0, 0%, 71%) !default
$grey-lighter: hsl(0, 0%, 86%) !default
+$grey-lightest: hsl(0, 0%, 93%) !default
$white-ter: hsl(0, 0%, 96%) !default
$white-bis: hsl(0, 0%, 98%) !default
@@ -16,12 +17,12 @@ $white: hsl(0, 0%, 100%) !default
$orange: hsl(14, 100%, 53%) !default
$yellow: hsl(48, 100%, 67%) !default
-$green: hsl(141, 71%, 48%) !default
+$green: hsl(141, 53%, 53%) !default
$turquoise: hsl(171, 100%, 41%) !default
-$cyan: hsl(204, 86%, 53%) !default
+$cyan: hsl(204, 71%, 53%) !default
$blue: hsl(217, 71%, 53%) !default
$purple: hsl(271, 100%, 71%) !default
-$red: hsl(348, 100%, 61%) !default
+$red: hsl(348, 86%, 61%) !default
// Typography
@@ -43,10 +44,14 @@ $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
-$gap: 64px !default
+$gap: 32px !default
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 4rem
diff --git a/public/css/_sass/utilities/mixins.sass b/public/css/_sass/utilities/mixins.sass
index 5623e3c..4ef2985 100644
--- a/public/css/_sass/utilities/mixins.sass
+++ b/public/css/_sass/utilities/mixins.sass
@@ -159,9 +159,9 @@
%arrow
+arrow
-=block
+=block($spacing: $block-spacing)
&:not(:last-child)
- margin-bottom: 1.5rem
+ margin-bottom: $spacing
%block
+block
@@ -170,7 +170,7 @@
@extend %unselectable
-moz-appearance: none
-webkit-appearance: none
- background-color: rgba($black, 0.2)
+ background-color: rgba($scheme-invert, 0.2)
border: none
border-radius: $radius-rounded
cursor: pointer
@@ -190,7 +190,7 @@
width: 20px
&::before,
&::after
- background-color: $white
+ background-color: $scheme-main
content: ""
display: block
left: 50%
@@ -206,9 +206,9 @@
width: 2px
&:hover,
&:focus
- background-color: rgba($black, 0.3)
+ background-color: rgba($scheme-invert, 0.3)
&:active
- background-color: rgba($black, 0.4)
+ background-color: rgba($scheme-invert, 0.4)
// Sizes
&.is-small
height: 16px