diff options
Diffstat (limited to 'public/css/_sass')
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 Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/public/css/_sass/utilities/.DS_Store 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 |