From 3f74371333a93149cfa089abd89a1d28dd5cc9ff Mon Sep 17 00:00:00 2001 From: Paolo Barbolini Date: Mon, 15 Feb 2021 08:50:28 +0100 Subject: [PATCH] Upgrade bulma to 0.9.2 and reduce imported styles (#102) * Upgrade bulma to 0.7.5 * Upgrade bulma to 0.8.2 * Upgrade bulma to 0.9.2 * Reduce features * Remove ';' from sass --- assets/styles/bulma/LICENSE | 2 +- assets/styles/bulma/base/_all.sass | 7 +- assets/styles/bulma/base/animations.sass | 5 + assets/styles/bulma/base/generic.sass | 42 +- assets/styles/bulma/base/helpers.sass | 246 +------ assets/styles/bulma/base/minireset.sass | 15 +- assets/styles/bulma/components/_all.sass | 25 +- .../styles/bulma/components/breadcrumb.sass | 37 +- assets/styles/bulma/components/card.sass | 57 +- assets/styles/bulma/components/dropdown.sass | 33 +- assets/styles/bulma/components/level.sass | 12 +- assets/styles/bulma/components/media.sass | 46 +- assets/styles/bulma/components/menu.sass | 27 +- assets/styles/bulma/components/message.sass | 58 +- assets/styles/bulma/components/modal.sass | 22 +- assets/styles/bulma/components/navbar.sass | 191 ++++-- .../styles/bulma/components/pagination.sass | 45 +- assets/styles/bulma/components/panel.sass | 50 +- assets/styles/bulma/components/tabs.sass | 55 +- assets/styles/bulma/elements/_all.sass | 26 +- assets/styles/bulma/elements/box.sass | 12 +- assets/styles/bulma/elements/button.sass | 192 ++++-- assets/styles/bulma/elements/container.sass | 48 +- assets/styles/bulma/elements/content.sass | 36 +- assets/styles/bulma/elements/form.sass | 621 +----------------- assets/styles/bulma/elements/icon.sass | 19 + assets/styles/bulma/elements/image.sass | 41 +- .../styles/bulma/elements/notification.sass | 29 +- assets/styles/bulma/elements/other.sass | 10 +- assets/styles/bulma/elements/progress.sass | 41 +- assets/styles/bulma/elements/table.sass | 43 +- assets/styles/bulma/elements/tag.sass | 77 ++- assets/styles/bulma/elements/title.sass | 27 +- assets/styles/bulma/form/_all.sass | 9 + assets/styles/bulma/form/checkbox-radio.sass | 22 + assets/styles/bulma/form/file.sass | 182 +++++ assets/styles/bulma/form/input-textarea.sass | 66 ++ assets/styles/bulma/form/select.sass | 87 +++ assets/styles/bulma/form/shared.sass | 60 ++ assets/styles/bulma/form/tools.sass | 215 ++++++ assets/styles/bulma/grid/_all.sass | 5 +- assets/styles/bulma/grid/columns.sass | 218 +++--- assets/styles/bulma/grid/tiles.sass | 16 +- assets/styles/bulma/helpers/_all.sass | 12 + assets/styles/bulma/helpers/color.sass | 39 ++ assets/styles/bulma/helpers/flexbox.sass | 35 + assets/styles/bulma/helpers/float.sass | 10 + assets/styles/bulma/helpers/other.sass | 14 + assets/styles/bulma/helpers/overflow.sass | 2 + assets/styles/bulma/helpers/position.sass | 7 + assets/styles/bulma/helpers/spacing.sass | 31 + assets/styles/bulma/helpers/typography.sass | 100 +++ assets/styles/bulma/helpers/visibility.sass | 122 ++++ assets/styles/bulma/layout/_all.sass | 7 +- assets/styles/bulma/layout/footer.sass | 10 +- assets/styles/bulma/layout/hero.sass | 68 +- assets/styles/bulma/layout/section.sass | 2 + assets/styles/bulma/utilities/_all.sass | 13 +- assets/styles/bulma/utilities/animations.sass | 6 +- assets/styles/bulma/utilities/controls.sass | 20 +- .../bulma/utilities/derived-variables.sass | 50 +- assets/styles/bulma/utilities/extends.sass | 22 + assets/styles/bulma/utilities/functions.sass | 87 +++ .../bulma/utilities/initial-variables.sass | 18 +- assets/styles/bulma/utilities/mixins.sass | 281 ++++---- assets/styles/main.sass | 45 +- 66 files changed, 2512 insertions(+), 1566 deletions(-) mode change 100755 => 100644 assets/styles/bulma/base/_all.sass create mode 100644 assets/styles/bulma/base/animations.sass mode change 100755 => 100644 assets/styles/bulma/base/generic.sass mode change 100755 => 100644 assets/styles/bulma/base/helpers.sass mode change 100755 => 100644 assets/styles/bulma/base/minireset.sass mode change 100755 => 100644 assets/styles/bulma/components/_all.sass mode change 100755 => 100644 assets/styles/bulma/components/breadcrumb.sass mode change 100755 => 100644 assets/styles/bulma/components/card.sass mode change 100755 => 100644 assets/styles/bulma/components/dropdown.sass mode change 100755 => 100644 assets/styles/bulma/components/level.sass mode change 100755 => 100644 assets/styles/bulma/components/media.sass mode change 100755 => 100644 assets/styles/bulma/components/menu.sass mode change 100755 => 100644 assets/styles/bulma/components/message.sass mode change 100755 => 100644 assets/styles/bulma/components/modal.sass mode change 100755 => 100644 assets/styles/bulma/components/navbar.sass mode change 100755 => 100644 assets/styles/bulma/components/pagination.sass mode change 100755 => 100644 assets/styles/bulma/components/panel.sass mode change 100755 => 100644 assets/styles/bulma/components/tabs.sass mode change 100755 => 100644 assets/styles/bulma/elements/_all.sass mode change 100755 => 100644 assets/styles/bulma/elements/box.sass mode change 100755 => 100644 assets/styles/bulma/elements/button.sass mode change 100755 => 100644 assets/styles/bulma/elements/container.sass mode change 100755 => 100644 assets/styles/bulma/elements/content.sass mode change 100755 => 100644 assets/styles/bulma/elements/form.sass mode change 100755 => 100644 assets/styles/bulma/elements/icon.sass mode change 100755 => 100644 assets/styles/bulma/elements/image.sass mode change 100755 => 100644 assets/styles/bulma/elements/notification.sass mode change 100755 => 100644 assets/styles/bulma/elements/other.sass mode change 100755 => 100644 assets/styles/bulma/elements/progress.sass mode change 100755 => 100644 assets/styles/bulma/elements/table.sass mode change 100755 => 100644 assets/styles/bulma/elements/tag.sass mode change 100755 => 100644 assets/styles/bulma/elements/title.sass create mode 100644 assets/styles/bulma/form/_all.sass create mode 100644 assets/styles/bulma/form/checkbox-radio.sass create mode 100644 assets/styles/bulma/form/file.sass create mode 100644 assets/styles/bulma/form/input-textarea.sass create mode 100644 assets/styles/bulma/form/select.sass create mode 100644 assets/styles/bulma/form/shared.sass create mode 100644 assets/styles/bulma/form/tools.sass mode change 100755 => 100644 assets/styles/bulma/grid/_all.sass mode change 100755 => 100644 assets/styles/bulma/grid/columns.sass mode change 100755 => 100644 assets/styles/bulma/grid/tiles.sass create mode 100644 assets/styles/bulma/helpers/_all.sass create mode 100644 assets/styles/bulma/helpers/color.sass create mode 100644 assets/styles/bulma/helpers/flexbox.sass create mode 100644 assets/styles/bulma/helpers/float.sass create mode 100644 assets/styles/bulma/helpers/other.sass create mode 100644 assets/styles/bulma/helpers/overflow.sass create mode 100644 assets/styles/bulma/helpers/position.sass create mode 100644 assets/styles/bulma/helpers/spacing.sass create mode 100644 assets/styles/bulma/helpers/typography.sass create mode 100644 assets/styles/bulma/helpers/visibility.sass mode change 100755 => 100644 assets/styles/bulma/layout/_all.sass mode change 100755 => 100644 assets/styles/bulma/layout/footer.sass mode change 100755 => 100644 assets/styles/bulma/layout/hero.sass mode change 100755 => 100644 assets/styles/bulma/layout/section.sass mode change 100755 => 100644 assets/styles/bulma/utilities/_all.sass mode change 100755 => 100644 assets/styles/bulma/utilities/animations.sass mode change 100755 => 100644 assets/styles/bulma/utilities/controls.sass mode change 100755 => 100644 assets/styles/bulma/utilities/derived-variables.sass create mode 100644 assets/styles/bulma/utilities/extends.sass mode change 100755 => 100644 assets/styles/bulma/utilities/functions.sass mode change 100755 => 100644 assets/styles/bulma/utilities/initial-variables.sass mode change 100755 => 100644 assets/styles/bulma/utilities/mixins.sass diff --git a/assets/styles/bulma/LICENSE b/assets/styles/bulma/LICENSE index e51b32b..2c51c72 100644 --- a/assets/styles/bulma/LICENSE +++ b/assets/styles/bulma/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 Jeremy Thomas +Copyright (c) 2020 Jeremy Thomas Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/assets/styles/bulma/base/_all.sass b/assets/styles/bulma/base/_all.sass old mode 100755 new mode 100644 index e913d6b..a5ae0a7 --- a/assets/styles/bulma/base/_all.sass +++ b/assets/styles/bulma/base/_all.sass @@ -1,5 +1,6 @@ +/* Bulma Base */ @charset "utf-8" -@import "minireset.sass" -@import "generic.sass" -@import "helpers.sass" +@import "minireset" +@import "generic" +@import "animations" diff --git a/assets/styles/bulma/base/animations.sass b/assets/styles/bulma/base/animations.sass new file mode 100644 index 0000000..a14525d --- /dev/null +++ b/assets/styles/bulma/base/animations.sass @@ -0,0 +1,5 @@ +@keyframes spinAround + from + transform: rotate(0deg) + to + transform: rotate(359deg) diff --git a/assets/styles/bulma/base/generic.sass b/assets/styles/bulma/base/generic.sass old mode 100755 new mode 100644 index 6fd5848..42c736a --- a/assets/styles/bulma/base/generic.sass +++ b/assets/styles/bulma/base/generic.sass @@ -1,8 +1,15 @@ -$body-background-color: $white !default +@import "../utilities/mixins" + +$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,21 +18,27 @@ $code-padding: 0.25em 0.5em 0.25em !default $code-weight: normal !default $code-size: 0.875em !default -$hr-background-color: $border !default -$hr-height: 1px !default +$small-font-size: 0.875em !default + +$hr-background-color: $background !default +$hr-height: 2px !default $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% @@ -41,6 +54,7 @@ section body, button, input, +optgroup, select, textarea font-family: $body-family @@ -53,7 +67,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 +105,7 @@ input[type="radio"] vertical-align: baseline small - font-size: 0.875em + font-size: $small-font-size span font-style: inherit @@ -103,25 +117,29 @@ strong // Block +fieldset + border: none + 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: inherit th color: $text-strong diff --git a/assets/styles/bulma/base/helpers.sass b/assets/styles/bulma/base/helpers.sass old mode 100755 new mode 100644 index 936905c..e356830 --- a/assets/styles/bulma/base/helpers.sass +++ b/assets/styles/bulma/base/helpers.sass @@ -1,245 +1 @@ -// Float - -.is-clearfix - +clearfix - -.is-pulled-left - float: left !important - -.is-pulled-right - float: right !important - -// Overflow - -.is-clipped - overflow: hidden !important - -// Overlay - -.is-overlay - +overlay - -// Typography - -=typography-size($target:'') - @each $size in $sizes - $i: index($sizes, $size) - .is-size-#{$i}#{if($target == '', '', '-' + $target)} - font-size: $size !important - -+typography-size() - -+mobile - +typography-size('mobile') - -+tablet - +typography-size('tablet') - -+touch - +typography-size('touch') - -+desktop - +typography-size('desktop') - -+widescreen - +typography-size('widescreen') - -+fullhd - +typography-size('fullhd') - -$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') - -@each $alignment, $text-align in $alignments - .has-text-#{$alignment} - text-align: #{$text-align} !important - +mobile - .has-text-#{$alignment}-mobile - text-align: #{$text-align} !important - +tablet - .has-text-#{$alignment}-tablet - text-align: #{$text-align} !important - +tablet-only - .has-text-#{$alignment}-tablet-only - text-align: #{$text-align} !important - +touch - .has-text-#{$alignment}-touch - text-align: #{$text-align} !important - +desktop - .has-text-#{$alignment}-desktop - text-align: #{$text-align} !important - +desktop-only - .has-text-#{$alignment}-desktop-only - text-align: #{$text-align} !important - +widescreen - .has-text-#{$alignment}-widescreen - text-align: #{$text-align} !important - +widescreen-only - .has-text-#{$alignment}-widescreen-only - text-align: #{$text-align} !important - +fullhd - .has-text-#{$alignment}-fullhd - text-align: #{$text-align} !important - -.is-capitalized - text-transform: capitalize !important - -.is-lowercase - text-transform: lowercase !important - -.is-uppercase - text-transform: uppercase !important - -.is-italic - font-style: italic !important - -@each $name, $pair in $colors - $color: nth($pair, 1) - .has-text-#{$name} - color: $color !important - a.has-text-#{$name} - &:hover, - &:focus - color: darken($color, 10%) !important - -@each $name, $shade in $shades - .has-text-#{$name} - color: $shade !important - -.has-text-weight-light - font-weight: $weight-light !important -.has-text-weight-normal - font-weight: $weight-normal !important -.has-text-weight-semibold - font-weight: $weight-semibold !important -.has-text-weight-bold - font-weight: $weight-bold !important - -// Visibility - -$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' - -@each $display in $displays - .is-#{$display} - display: #{$display} !important - +mobile - .is-#{$display}-mobile - display: #{$display} !important - +tablet - .is-#{$display}-tablet - display: #{$display} !important - +tablet-only - .is-#{$display}-tablet-only - display: #{$display} !important - +touch - .is-#{$display}-touch - display: #{$display} !important - +desktop - .is-#{$display}-desktop - display: #{$display} !important - +desktop-only - .is-#{$display}-desktop-only - display: #{$display} !important - +widescreen - .is-#{$display}-widescreen - display: #{$display} !important - +widescreen-only - .is-#{$display}-widescreen-only - display: #{$display} !important - +fullhd - .is-#{$display}-fullhd - display: #{$display} !important - -.is-hidden - display: none !important - -+mobile - .is-hidden-mobile - display: none !important - -+tablet - .is-hidden-tablet - display: none !important - -+tablet-only - .is-hidden-tablet-only - display: none !important - -+touch - .is-hidden-touch - display: none !important - -+desktop - .is-hidden-desktop - display: none !important - -+desktop-only - .is-hidden-desktop-only - display: none !important - -+widescreen - .is-hidden-widescreen - display: none !important - -+widescreen-only - .is-hidden-widescreen-only - display: none !important - -+fullhd - .is-hidden-fullhd - display: none !important - -.is-invisible - visibility: hidden !important - -+mobile - .is-invisible-mobile - visibility: hidden !important - -+tablet - .is-invisible-tablet - visibility: hidden !important - -+tablet-only - .is-invisible-tablet-only - visibility: hidden !important - -+touch - .is-invisible-touch - visibility: hidden !important - -+desktop - .is-invisible-desktop - visibility: hidden !important - -+desktop-only - .is-invisible-desktop-only - visibility: hidden !important - -+widescreen - .is-invisible-widescreen - visibility: hidden !important - -+widescreen-only - .is-invisible-widescreen-only - visibility: hidden !important - -+fullhd - .is-invisible-fullhd - visibility: hidden !important - -// Other - -.is-marginless - margin: 0 !important - -.is-paddingless - padding: 0 !important - -.is-radiusless - border-radius: 0 !important - -.is-shadowless - box-shadow: none !important - -.is-unselectable - +unselectable +@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead." diff --git a/assets/styles/bulma/base/minireset.sass b/assets/styles/bulma/base/minireset.sass old mode 100755 new mode 100644 index 98ad814..aa2b6f3 --- a/assets/styles/bulma/base/minireset.sass +++ b/assets/styles/bulma/base/minireset.sass @@ -1,4 +1,4 @@ -/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */ +/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ // Blocks html, body, @@ -52,17 +52,15 @@ html box-sizing: border-box * - box-sizing: inherit - &:before, - &:after + &, + &::before, + &::after box-sizing: inherit // Media img, -embed, -object, -audio, video + height: auto max-width: 100% // Iframe @@ -77,4 +75,5 @@ table td, th padding: 0 - text-align: left + &:not([align]) + text-align: inherit diff --git a/assets/styles/bulma/components/_all.sass b/assets/styles/bulma/components/_all.sass old mode 100755 new mode 100644 index 1de2c21..a7062ec --- a/assets/styles/bulma/components/_all.sass +++ b/assets/styles/bulma/components/_all.sass @@ -1,14 +1,15 @@ +/* Bulma Components */ @charset "utf-8" -@import "breadcrumb.sass" -@import "card.sass" -@import "dropdown.sass" -@import "level.sass" -@import "media.sass" -@import "menu.sass" -@import "message.sass" -@import "modal.sass" -@import "navbar.sass" -@import "pagination.sass" -@import "panel.sass" -@import "tabs.sass" +@import "breadcrumb" +@import "card" +@import "dropdown" +@import "level" +@import "media" +@import "menu" +@import "message" +@import "modal" +@import "navbar" +@import "pagination" +@import "panel" +@import "tabs" diff --git a/assets/styles/bulma/components/breadcrumb.sass b/assets/styles/bulma/components/breadcrumb.sass old mode 100755 new mode 100644 index 5cf3729..60bb17b --- a/assets/styles/bulma/components/breadcrumb.sass +++ b/assets/styles/bulma/components/breadcrumb.sass @@ -1,31 +1,32 @@ +@import "../utilities/mixins" + $breadcrumb-item-color: $link !default $breadcrumb-item-hover-color: $link-hover !default $breadcrumb-item-active-color: $text-strong !default -$breadcrumb-item-separator-color: $text !default +$breadcrumb-item-padding-vertical: 0 !default +$breadcrumb-item-padding-horizontal: 0.75em !default + +$breadcrumb-item-separator-color: $border-hover !default .breadcrumb - +block - +unselectable - align-items: stretch - display: flex + @extend %block + @extend %unselectable font-size: $size-normal - overflow: hidden - overflow-x: auto white-space: nowrap a align-items: center color: $breadcrumb-item-color display: flex justify-content: center - padding: 0.5em 0.75em + padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal &:hover color: $breadcrumb-item-hover-color li align-items: center display: flex &:first-child a - padding-left: 0 + +ltr-property("padding", 0, false) &.is-active a color: $breadcrumb-item-active-color @@ -34,23 +35,25 @@ $breadcrumb-item-separator-color: $text !default & + li::before color: $breadcrumb-item-separator-color content: "\0002f" - ul, ol - align-items: center + ul, + ol + align-items: flex-start display: flex - flex-grow: 1 - flex-shrink: 0 + flex-wrap: wrap justify-content: flex-start .icon &:first-child - margin-right: 0.5em + +ltr-property("margin", 0.5em) &:last-child - margin-left: 0.5em + +ltr-property("margin", 0.5em, false) // Alignment &.is-centered - ol, ul + ol, + ul justify-content: center &.is-right - ol, ul + ol, + ul justify-content: flex-end // Sizes &.is-small diff --git a/assets/styles/bulma/components/card.sass b/assets/styles/bulma/components/card.sass old mode 100755 new mode 100644 index 76a07be..09f1109 --- a/assets/styles/bulma/components/card.sass +++ b/assets/styles/bulma/components/card.sass @@ -1,21 +1,44 @@ -$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 +@import "../utilities/mixins" +$card-color: $text !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-radius: 0.25rem !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-footer-border-top: 1px solid $border !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-light !default +$card-footer-padding: 0.75rem !default + +$card-media-margin: $block-spacing !default .card background-color: $card-background-color + border-radius: $card-radius box-shadow: $card-shadow color: $card-color max-width: 100% position: relative +%card-item + &:first-child + border-top-left-radius: $card-radius + border-top-right-radius: $card-radius + &:last-child + border-bottom-left-radius: $card-radius + border-bottom-right-radius: $card-radius + .card-header + @extend %card-item + background-color: $card-header-background-color align-items: stretch box-shadow: $card-header-shadow display: flex @@ -26,7 +49,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 @@ -35,16 +58,28 @@ $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 position: relative + &:first-child + img + border-top-left-radius: $card-radius + border-top-right-radius: $card-radius + &:last-child + img + border-bottom-left-radius: $card-radius + border-bottom-right-radius: $card-radius .card-content - padding: 1.5rem + @extend %card-item + background-color: $card-content-background-color + padding: $card-content-padding .card-footer + @extend %card-item + background-color: $card-footer-background-color border-top: $card-footer-border-top align-items: stretch display: flex @@ -56,12 +91,12 @@ $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 + +ltr-property("border", $card-footer-border-top) // Combinations .card .media:not(:last-child) - margin-bottom: 0.75rem + margin-bottom: $card-media-margin diff --git a/assets/styles/bulma/components/dropdown.sass b/assets/styles/bulma/components/dropdown.sass old mode 100755 new mode 100644 index b5200c3..6bf6a3a --- a/assets/styles/bulma/components/dropdown.sass +++ b/assets/styles/bulma/components/dropdown.sass @@ -1,17 +1,23 @@ -$dropdown-content-background-color: $white !default +@import "../utilities/mixins" + +$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 @@ -29,13 +35,13 @@ $dropdown-divider-background-color: $border !default .dropdown-menu bottom: 100% padding-bottom: $dropdown-content-offset - padding-top: unset + padding-top: initial top: auto .dropdown-menu display: none - left: 0 - min-width: 12rem + +ltr-position(0, false) + min-width: $dropdown-menu-min-width padding-top: $dropdown-content-offset position: absolute top: 100% @@ -45,8 +51,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 @@ -56,9 +62,12 @@ $dropdown-divider-background-color: $border !default padding: 0.375rem 1rem position: relative -a.dropdown-item - padding-right: 3rem +a.dropdown-item, +button.dropdown-item + +ltr-property("padding", 3rem) + text-align: inherit white-space: nowrap + width: 100% &:hover background-color: $dropdown-item-hover-background-color color: $dropdown-item-hover-color diff --git a/assets/styles/bulma/components/level.sass b/assets/styles/bulma/components/level.sass old mode 100755 new mode 100644 index 3328410..0133ebf --- a/assets/styles/bulma/components/level.sass +++ b/assets/styles/bulma/components/level.sass @@ -1,5 +1,9 @@ +@import "../utilities/mixins" + +$level-item-spacing: ($block-spacing / 2) !default + .level - +block + @extend %block align-items: center justify-content: space-between code @@ -18,9 +22,9 @@ .level-item &:not(:last-child) margin-bottom: 0 + +ltr-property("margin", $level-item-spacing) &:not(.is-narrow) flex-grow: 1 - margin-right: 0.75rem // Responsiveness +tablet display: flex @@ -41,7 +45,7 @@ // Responsiveness +mobile &:not(:last-child) - margin-bottom: 0.75rem + margin-bottom: $level-item-spacing .level-left, .level-right @@ -55,7 +59,7 @@ // Responsiveness +tablet &:not(:last-child) - margin-right: 0.75rem + +ltr-property("margin", $level-item-spacing) .level-left align-items: center diff --git a/assets/styles/bulma/components/media.sass b/assets/styles/bulma/components/media.sass old mode 100755 new mode 100644 index b9f5bbf..fc3f7d1 --- a/assets/styles/bulma/components/media.sass +++ b/assets/styles/bulma/components/media.sass @@ -1,29 +1,40 @@ +@import "../utilities/mixins" + +$media-border-color: bulmaRgba($border, 0.5) !default +$media-border-size: 1px !default +$media-spacing: 1rem !default +$media-spacing-large: 1.5rem !default +$media-content-spacing: 0.75rem !default +$media-level-1-spacing: 0.75rem !default +$media-level-1-content-spacing: 0.5rem !default +$media-level-2-spacing: 0.5rem !default + .media align-items: flex-start display: flex - text-align: left + text-align: inherit .content:not(:last-child) - margin-bottom: 0.75rem + margin-bottom: $media-content-spacing .media - border-top: 1px solid rgba($border, 0.5) + border-top: $media-border-size solid $media-border-color display: flex - padding-top: 0.75rem + padding-top: $media-level-1-spacing .content:not(:last-child), .control:not(:last-child) - margin-bottom: 0.5rem + margin-bottom: $media-level-1-content-spacing .media - padding-top: 0.5rem + padding-top: $media-level-2-spacing & + .media - margin-top: 0.5rem + margin-top: $media-level-2-spacing & + .media - border-top: 1px solid rgba($border, 0.5) - margin-top: 1rem - padding-top: 1rem + border-top: $media-border-size solid $media-border-color + margin-top: $media-spacing + padding-top: $media-spacing // Sizes &.is-large & + .media - margin-top: 1.5rem - padding-top: 1.5rem + margin-top: $media-spacing-large + padding-top: $media-spacing-large .media-left, .media-right @@ -32,14 +43,17 @@ flex-shrink: 0 .media-left - margin-right: 1rem + +ltr-property("margin", $media-spacing) .media-right - margin-left: 1rem + +ltr-property("margin", $media-spacing, false) .media-content flex-basis: auto flex-grow: 1 flex-shrink: 1 - overflow: auto - text-align: left + text-align: inherit + ++mobile + .media-content + overflow-x: auto diff --git a/assets/styles/bulma/components/menu.sass b/assets/styles/bulma/components/menu.sass old mode 100755 new mode 100644 index 727df36..31dc56f --- a/assets/styles/bulma/components/menu.sass +++ b/assets/styles/bulma/components/menu.sass @@ -1,3 +1,5 @@ +@import "../utilities/mixins" + $menu-item-color: $text !default $menu-item-radius: $radius-small !default $menu-item-hover-color: $text-strong !default @@ -6,8 +8,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 +29,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 @@ -35,16 +44,16 @@ $menu-label-color: $text-light !default color: $menu-item-active-color li ul - border-left: $menu-list-border-left - margin: 0.75em - padding-left: 0.75em + +ltr-property("border", $menu-list-border-left, false) + margin: $menu-nested-list-margin + +ltr-property("padding", $menu-nested-list-padding-left, false) .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/assets/styles/bulma/components/message.sass b/assets/styles/bulma/components/message.sass old mode 100755 new mode 100644 index d173639..ab83780 --- a/assets/styles/bulma/components/message.sass +++ b/assets/styles/bulma/components/message.sass @@ -1,27 +1,34 @@ +@import "../utilities/mixins" + $message-background-color: $background !default $message-radius: $radius !default $message-header-background-color: $text !default $message-header-color: $text-invert !default -$message-header-padding: 0.5em 0.75em !default +$message-header-weight: $weight-bold !default +$message-header-padding: 0.75em 1em !default $message-header-radius: $radius !default -$message-body-border: 1px solid $border !default +$message-body-border-color: $border !default +$message-body-border-width: 0 0 0 4px !default $message-body-color: $text !default -$message-body-padding: 1em 1.25em !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 - +block + @extend %block background-color: $message-background-color border-radius: $message-radius font-size: $size-normal strong color: currentColor - a:not(.button):not(.tag) + a:not(.button):not(.tag):not(.dropdown-item) color: currentColor text-decoration: underline // Sizes @@ -32,21 +39,33 @@ $message-body-pre-code-background-color: transparent !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 @@ -54,6 +73,7 @@ $message-body-pre-code-background-color: transparent !default border-radius: $message-header-radius $message-header-radius 0 0 color: $message-header-color display: flex + font-weight: $message-header-weight justify-content: space-between line-height: 1.25 padding: $message-header-padding @@ -61,15 +81,17 @@ $message-body-pre-code-background-color: transparent !default .delete flex-grow: 0 flex-shrink: 0 - margin-left: 0.75em + +ltr-property("margin", 0.75em, false) & + .message-body + border-width: $message-header-body-border-width border-top-left-radius: 0 border-top-right-radius: 0 - border-top: none .message-body - border: $message-body-border + border-color: $message-body-border-color border-radius: $message-body-radius + border-style: solid + border-width: $message-body-border-width color: $message-body-color padding: $message-body-padding code, diff --git a/assets/styles/bulma/components/modal.sass b/assets/styles/bulma/components/modal.sass old mode 100755 new mode 100644 index 65597c4..fdbddd6 --- a/assets/styles/bulma/components/modal.sass +++ b/assets/styles/bulma/components/modal.sass @@ -1,6 +1,8 @@ +@import "../utilities/mixins" + $modal-z: 40 !default -$modal-background-background-color: rgba($black, 0.86) !default +$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default $modal-content-width: 640px !default $modal-content-margin-mobile: 20px !default @@ -25,13 +27,16 @@ $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-breakpoint: $tablet !default + .modal - +overlay + @extend %overlay align-items: center display: none + flex-direction: column justify-content: center overflow: hidden position: fixed @@ -41,7 +46,7 @@ $modal-card-body-padding: 20px !default display: flex .modal-background - +overlay + @extend %overlay background-color: $modal-background-background-color .modal-content, @@ -52,17 +57,17 @@ $modal-card-body-padding: 20px !default position: relative width: 100% // Responsiveness - +tablet + +from($modal-breakpoint) margin: 0 auto max-height: calc(100vh - #{$modal-content-spacing-tablet}) width: $modal-content-width .modal-close - +delete + @extend %delete background: none height: $modal-close-dimensions position: fixed - right: $modal-close-right + +ltr-position($modal-close-right) top: $modal-close-top width: $modal-close-dimensions @@ -71,6 +76,7 @@ $modal-card-body-padding: 20px !default flex-direction: column max-height: calc(100vh - #{$modal-card-spacing}) overflow: hidden + -ms-overflow-y: visible .modal-card-head, .modal-card-foot @@ -100,7 +106,7 @@ $modal-card-body-padding: 20px !default border-top: $modal-card-foot-border-top .button &:not(:last-child) - margin-right: 10px + +ltr-property("margin", 0.5em) .modal-card-body +overflow-touch diff --git a/assets/styles/bulma/components/navbar.sass b/assets/styles/bulma/components/navbar.sass old mode 100755 new mode 100644 index c75a485..bcbcd80 --- a/assets/styles/bulma/components/navbar.sass +++ b/assets/styles/bulma/components/navbar.sass @@ -1,14 +1,23 @@ -$navbar-background-color: $white !default +@import "../utilities/mixins" + +$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 +$navbar-padding-vertical: 1rem !default +$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: $background !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 +$navbar-burger-color: $navbar-item-color !default + $navbar-tab-hover-background-color: transparent !default $navbar-tab-hover-border-bottom-color: $link !default $navbar-tab-active-color: $link !default @@ -17,22 +26,29 @@ $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-border-top: 1px solid $border !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 $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 bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($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 -$navbar-divider-background-color: $border !default +$navbar-divider-background-color: $background !default +$navbar-divider-height: 2px !default + +$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default + +$navbar-breakpoint: $desktop !default + +$navbar-colors: $colors !default =navbar-fixed left: 0 @@ -40,16 +56,12 @@ $navbar-divider-background-color: $border !default right: 0 z-index: $navbar-fixed-z -=navbar-fixed-html - left: 0 - position: fixed - right: 0 - .navbar background-color: $navbar-background-color min-height: $navbar-height position: relative - @each $name, $pair in $colors + z-index: $navbar-z + @each $name, $pair in $navbar-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} @@ -61,14 +73,17 @@ $navbar-divider-background-color: $border !default color: $color-invert & > a.navbar-item, .navbar-link + &:focus, &:hover, &.is-active - background-color: darken($color, 5%) + background-color: bulmaDarken($color, 5%) color: $color-invert .navbar-link &::after border-color: $color-invert - +desktop + .navbar-burger + color: $color-invert + +from($navbar-breakpoint) .navbar-start, .navbar-end & > .navbar-item, @@ -76,16 +91,18 @@ $navbar-divider-background-color: $border !default color: $color-invert & > a.navbar-item, .navbar-link + &:focus, &:hover, &.is-active - background-color: darken($color, 5%) + background-color: bulmaDarken($color, 5%) color: $color-invert .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%) + background-color: bulmaDarken($color, 5%) color: $color-invert .navbar-dropdown a.navbar-item @@ -98,22 +115,23 @@ $navbar-divider-background-color: $border !default min-height: $navbar-height width: 100% &.has-shadow - box-shadow: 0 2px 3px rgba($black, 0.1) + box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color &.is-fixed-bottom, &.is-fixed-top +navbar-fixed &.is-fixed-bottom bottom: 0 &.has-shadow - box-shadow: 0 -2px 3px rgba($black, 0.1) + box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color &.is-fixed-top top: 0 -html.has-navbar-fixed-top - padding-top: $navbar-height - -html.has-navbar-fixed-bottom - padding-bottom: $navbar-height +html, +body + &.has-navbar-fixed-top + padding-top: $navbar-height + &.has-navbar-fixed-bottom + padding-bottom: $navbar-height .navbar-brand, .navbar-tabs @@ -122,6 +140,12 @@ html.has-navbar-fixed-bottom flex-shrink: 0 min-height: $navbar-height +.navbar-brand + a.navbar-item + &:focus, + &:hover + background-color: transparent + .navbar-tabs +overflow-touch max-width: 100vw @@ -129,8 +153,9 @@ html.has-navbar-fixed-bottom overflow-y: hidden .navbar-burger + color: $navbar-burger-color +hamburger($navbar-height) - margin-left: auto + +ltr-property("margin", auto, false) .navbar-menu display: none @@ -140,11 +165,18 @@ html.has-navbar-fixed-bottom color: $navbar-item-color display: block line-height: 1.5 - padding: 0.5rem 1rem + padding: 0.5rem 0.75rem position: relative + .icon + &:only-child + margin-left: -0.25rem + margin-right: -0.25rem a.navbar-item, -a.navbar-link +.navbar-link + cursor: pointer + &:focus, + &:focus-within, &:hover, &.is-active background-color: $navbar-item-hover-background-color @@ -164,6 +196,7 @@ a.navbar-link 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 @@ -179,8 +212,13 @@ a.navbar-link flex-grow: 1 flex-shrink: 1 -.navbar-link - padding-right: 2.5em +.navbar-link:not(.is-arrowless) + +ltr-property("padding", 2.5em) + &::after + @extend %arrow + border-color: $navbar-dropdown-arrow + margin-top: -0.375em + +ltr-position(1.125em) .navbar-dropdown font-size: 0.875rem @@ -194,10 +232,10 @@ a.navbar-link background-color: $navbar-divider-background-color border: none display: none - height: 1px + height: $navbar-divider-height margin: 0.5rem 0 -+touch ++until($navbar-breakpoint) .navbar > .container display: block .navbar-brand, @@ -205,9 +243,12 @@ a.navbar-link .navbar-item align-items: center display: flex + .navbar-link + &::after + display: none .navbar-menu background-color: $navbar-background-color - box-shadow: 0 8px 16px rgba($black, 0.1) + box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1) padding: 0.5rem 0 &.is-active display: block @@ -219,7 +260,7 @@ a.navbar-link &.is-fixed-bottom-touch bottom: 0 &.has-shadow - box-shadow: 0 -2px 3px rgba($black, 0.1) + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) &.is-fixed-top-touch top: 0 &.is-fixed-top, @@ -228,12 +269,14 @@ a.navbar-link +overflow-touch max-height: calc(100vh - #{$navbar-height}) overflow: auto - html.has-navbar-fixed-top-touch - padding-top: $navbar-height - html.has-navbar-fixed-bottom-touch - padding-bottom: $navbar-height + html, + body + &.has-navbar-fixed-top-touch + padding-top: $navbar-height + &.has-navbar-fixed-bottom-touch + padding-bottom: $navbar-height -+desktop ++from($navbar-breakpoint) .navbar, .navbar-menu, .navbar-start, @@ -242,19 +285,31 @@ a.navbar-link display: flex .navbar min-height: $navbar-height + &.is-spaced + padding: $navbar-padding-vertical $navbar-padding-horizontal + .navbar-start, + .navbar-end + align-items: center + a.navbar-item, + .navbar-link + border-radius: $radius &.is-transparent a.navbar-item, - a.navbar-link + .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 @@ -278,40 +333,37 @@ a.navbar-link 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 bulmaRgba($scheme-invert, 0.1) top: auto &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, &.is-hoverable:hover .navbar-dropdown display: block + .navbar.is-spaced &, &.is-boxed opacity: 1 pointer-events: auto transform: translateY(0) - .navbar-link - &::after - +arrow($navbar-dropdown-arrow) - margin-top: -0.375em - right: 1.125em - top: 50% .navbar-menu flex-grow: 1 flex-shrink: 0 .navbar-start justify-content: flex-start - margin-right: auto + +ltr-property("margin", auto) .navbar-end justify-content: flex-end - margin-left: auto + +ltr-property("margin", auto, false) .navbar-dropdown background-color: $navbar-dropdown-background-color 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 bulmaRgba($scheme-invert, 0.1) display: none font-size: 0.875rem - left: 0 + +ltr-position(0, false) min-width: 100% position: absolute top: 100% @@ -320,13 +372,15 @@ a.navbar-link padding: 0.375rem 1rem white-space: nowrap a.navbar-item - padding-right: 3rem + +ltr-property("padding", 3rem) + &:focus, &:hover background-color: $navbar-dropdown-item-hover-background-color color: $navbar-dropdown-item-hover-color &.is-active background-color: $navbar-dropdown-item-active-background-color color: $navbar-dropdown-item-active-color + .navbar.is-spaced &, &.is-boxed border-radius: $navbar-dropdown-boxed-radius border-top: none @@ -346,9 +400,9 @@ a.navbar-link .navbar > .container, .container > .navbar .navbar-brand - margin-left: -1rem + +ltr-property("margin", -.75rem, false) .navbar-menu - margin-right: -1rem + +ltr-property("margin", -.75rem) // Fixed navbar .navbar &.is-fixed-bottom-desktop, @@ -357,22 +411,35 @@ a.navbar-link &.is-fixed-bottom-desktop bottom: 0 &.has-shadow - box-shadow: 0 -2px 3px rgba($black, 0.1) + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) &.is-fixed-top-desktop top: 0 - html.has-navbar-fixed-top-desktop - padding-top: $navbar-height - html.has-navbar-fixed-bottom-desktop - padding-bottom: $navbar-height + html, + body + &.has-navbar-fixed-top-desktop + padding-top: $navbar-height + &.has-navbar-fixed-bottom-desktop + padding-bottom: $navbar-height + &.has-spaced-navbar-fixed-top + padding-top: $navbar-height + ($navbar-padding-vertical * 2) + &.has-spaced-navbar-fixed-bottom + padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) // Hover/Active states a.navbar-item, - a.navbar-link + .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 background-color: $navbar-item-hover-background-color + +// Combination + +.hero + &.is-fullheight-with-navbar + min-height: calc(100vh - #{$navbar-height}) diff --git a/assets/styles/bulma/components/pagination.sass b/assets/styles/bulma/components/pagination.sass old mode 100755 new mode 100644 index 34dd59d..7455b52 --- a/assets/styles/bulma/components/pagination.sass +++ b/assets/styles/bulma/components/pagination.sass @@ -1,6 +1,18 @@ -$pagination-color: $grey-darker !default -$pagination-border-color: $grey-lighter !default +@import "../utilities/controls" +@import "../utilities/mixins" + +$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-nav-padding-left: 0.75em !default +$pagination-nav-padding-right: 0.75em !default $pagination-hover-color: $link-hover !default $pagination-hover-border-color: $link-hover-border !default @@ -11,9 +23,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 @@ -21,9 +33,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) !default .pagination + @extend %block font-size: $size-normal margin: $pagination-margin // Sizes @@ -53,13 +66,13 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) .pagination-next, .pagination-link, .pagination-ellipsis - +control - +unselectable - font-size: 1em - padding-left: 0.5em - padding-right: 0.5em + @extend %control + @extend %unselectable + 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, @@ -67,7 +80,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) .pagination-link border-color: $pagination-border-color color: $pagination-color - min-width: 2.25em + min-width: $pagination-min-width &:hover border-color: $pagination-hover-border-color color: $pagination-hover-color @@ -84,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) .pagination-previous, .pagination-next - padding-left: 0.75em - padding-right: 0.75em + padding-left: $pagination-nav-padding-left + padding-right: $pagination-nav-padding-right white-space: nowrap .pagination-link @@ -100,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) .pagination-list flex-wrap: wrap + li + list-style: none +mobile .pagination diff --git a/assets/styles/bulma/components/panel.sass b/assets/styles/bulma/components/panel.sass old mode 100755 new mode 100644 index b9d339e..a9d42fb --- a/assets/styles/bulma/components/panel.sass +++ b/assets/styles/bulma/components/panel.sass @@ -1,13 +1,19 @@ -$panel-item-border: 1px solid $border !default +@import "../utilities/mixins" -$panel-heading-background-color: $background !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: $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 @@ -22,24 +28,35 @@ $panel-block-active-color: $link-active !default $panel-block-active-icon-color: $link !default $panel-icon-color: $text-light !default +$panel-colors: $colors !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 $panel-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 +66,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 @@ -73,7 +90,7 @@ $panel-icon-color: $text-light !default justify-content: flex-start padding: 0.5em 0.75em input[type="checkbox"] - margin-right: 0.75em + +ltr-property("margin", 0.75em) & > .control flex-grow: 1 flex-shrink: 1 @@ -85,6 +102,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 @@ -95,7 +115,7 @@ label.panel-block .panel-icon +fa(14px, 1em) color: $panel-icon-color - margin-right: 0.75em + +ltr-property("margin", 0.75em) .fa font-size: inherit line-height: inherit diff --git a/assets/styles/bulma/components/tabs.sass b/assets/styles/bulma/components/tabs.sass old mode 100755 new mode 100644 index ccbf679..2cb6a54 --- a/assets/styles/bulma/components/tabs.sass +++ b/assets/styles/bulma/components/tabs.sass @@ -1,3 +1,5 @@ +@import "../utilities/mixins" + $tabs-border-bottom-color: $border !default $tabs-border-bottom-style: solid !default $tabs-border-bottom-width: 1px !default @@ -12,7 +14,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 @@ -27,9 +29,9 @@ $tabs-toggle-link-active-border-color: $link !default $tabs-toggle-link-active-color: $link-invert !default .tabs - +block + @extend %block +overflow-touch - +unselectable + @extend %unselectable align-items: stretch display: flex font-size: $size-normal @@ -78,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default padding-left: 0.75em .icon &:first-child - margin-right: 0.5em + +ltr-property("margin", 0.5em) &:last-child - margin-left: 0.5em + +ltr-property("margin", 0.5em, false) // Alignment &.is-centered ul @@ -92,7 +94,10 @@ $tabs-toggle-link-active-color: $link-invert !default &.is-boxed a border: 1px solid transparent - border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 + +ltr + border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 + +rtl + border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius &:hover background-color: $tabs-boxed-link-hover-background-color border-bottom-color: $tabs-boxed-link-hover-border-bottom-color @@ -119,11 +124,21 @@ $tabs-toggle-link-active-color: $link-invert !default z-index: 2 li & + li - margin-left: -#{$tabs-toggle-link-border-width} + +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false) &:first-child a - border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius + +ltr + border-top-left-radius: $tabs-toggle-link-radius + border-bottom-left-radius: $tabs-toggle-link-radius + +rtl + border-top-right-radius: $tabs-toggle-link-radius + border-bottom-right-radius: $tabs-toggle-link-radius &:last-child a - border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 + +ltr + border-top-right-radius: $tabs-toggle-link-radius + border-bottom-right-radius: $tabs-toggle-link-radius + +rtl + border-top-left-radius: $tabs-toggle-link-radius + border-bottom-left-radius: $tabs-toggle-link-radius &.is-active a background-color: $tabs-toggle-link-active-background-color @@ -135,13 +150,23 @@ $tabs-toggle-link-active-color: $link-invert !default &.is-toggle-rounded li &:first-child a - border-bottom-left-radius: $radius-rounded - border-top-left-radius: $radius-rounded - padding-left: 1.25em + +ltr + border-bottom-left-radius: $radius-rounded + border-top-left-radius: $radius-rounded + padding-left: 1.25em + +rtl + border-bottom-right-radius: $radius-rounded + border-top-right-radius: $radius-rounded + padding-right: 1.25em &:last-child a - border-bottom-right-radius: $radius-rounded - border-top-right-radius: $radius-rounded - padding-right: 1.25em + +ltr + border-bottom-right-radius: $radius-rounded + border-top-right-radius: $radius-rounded + padding-right: 1.25em + +rtl + border-bottom-left-radius: $radius-rounded + border-top-left-radius: $radius-rounded + padding-left: 1.25em // Sizes &.is-small font-size: $size-small diff --git a/assets/styles/bulma/elements/_all.sass b/assets/styles/bulma/elements/_all.sass old mode 100755 new mode 100644 index 2234322..511047a --- a/assets/styles/bulma/elements/_all.sass +++ b/assets/styles/bulma/elements/_all.sass @@ -1,16 +1,16 @@ +/* Bulma Elements */ @charset "utf-8" -@import "box.sass" -@import "button.sass" -@import "container.sass" -@import "content.sass" -@import "form.sass" -@import "icon.sass" -@import "image.sass" -@import "notification.sass" -@import "progress.sass" -@import "table.sass" -@import "tag.sass" -@import "title.sass" +@import "box" +@import "button" +@import "container" +@import "content" +@import "icon" +@import "image" +@import "notification" +@import "progress" +@import "table" +@import "tag" +@import "title" -@import "other.sass" +@import "other" diff --git a/assets/styles/bulma/elements/box.sass b/assets/styles/bulma/elements/box.sass old mode 100755 new mode 100644 index df18542..ed70a39 --- a/assets/styles/bulma/elements/box.sass +++ b/assets/styles/bulma/elements/box.sass @@ -1,14 +1,16 @@ +@import "../utilities/mixins" + $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 - +block + @extend %block background-color: $box-background-color border-radius: $box-radius box-shadow: $box-shadow diff --git a/assets/styles/bulma/elements/button.sass b/assets/styles/bulma/elements/button.sass old mode 100755 new mode 100644 index 025fce8..ca3bc3d --- a/assets/styles/bulma/elements/button.sass +++ b/assets/styles/bulma/elements/button.sass @@ -1,6 +1,15 @@ -$button-color: $grey-darker !default -$button-background-color: $white !default -$button-border-color: $grey-lighter !default +@import "../utilities/controls" +@import "../utilities/mixins" + +$button-color: $text-strong !default +$button-background-color: $scheme-main !default +$button-family: false !default + +$button-border-color: $border !default +$button-border-width: $control-border-width !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 @@ -8,43 +17,61 @@ $button-hover-border-color: $link-hover-border !default $button-focus-color: $link-focus !default $button-focus-border-color: $link-focus-border !default $button-focus-box-shadow-size: 0 0 0 0.125em !default -$button-focus-box-shadow-color: rgba($link, 0.25) !default +$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default $button-active-color: $link-active !default $button-active-border-color: $link-active-border !default $button-text-color: $text !default +$button-text-decoration: underline !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-ghost-background: none !default +$button-ghost-border-color: transparent !default +$button-ghost-color: $link !default +$button-ghost-decoration: none !default +$button-ghost-hover-color: $link !default +$button-ghost-hover-decoration: underline !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 + +$button-colors: $colors !default // The button sizes use mixins so they can be used at different breakpoints =button-small - border-radius: $radius-small + &:not(.is-rounded) + border-radius: $radius-small font-size: $size-small +=button-normal + font-size: $size-normal =button-medium font-size: $size-medium =button-large font-size: $size-large .button - +control - +unselectable + @extend %control + @extend %unselectable background-color: $button-background-color border-color: $button-border-color + border-width: $button-border-width color: $button-color cursor: pointer + @if $button-family + font-family: $button-family justify-content: center - padding-left: 0.75em - padding-right: 0.75em + padding-bottom: $button-padding-vertical + padding-left: $button-padding-horizontal + padding-right: $button-padding-horizontal + padding-top: $button-padding-vertical text-align: center white-space: nowrap strong @@ -57,14 +84,14 @@ $button-static-border-color: $grey-lighter !default height: 1.5em width: 1.5em &:first-child:not(:last-child) - margin-left: calc(-0.375em - 1px) - margin-right: 0.1875em + +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false) + +ltr-property("margin", $button-padding-horizontal / 4) &:last-child:not(:first-child) - margin-left: 0.1875em - margin-right: calc(-0.375em - 1px) + +ltr-property("margin", $button-padding-horizontal / 4, false) + +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})) &:first-child:last-child - margin-left: calc(-0.375em - 1px) - margin-right: calc(-0.375em - 1px) + 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 @@ -85,7 +112,7 @@ $button-static-border-color: $grey-lighter !default background-color: transparent border-color: transparent color: $button-text-color - text-decoration: underline + text-decoration: $button-text-decoration &:hover, &.is-hovered, &:focus, @@ -94,13 +121,23 @@ $button-static-border-color: $grey-lighter !default color: $button-text-hover-color &:active, &.is-active - background-color: darken($button-text-hover-background-color, 5%) + background-color: bulmaDarken($button-text-hover-background-color, 5%) color: $button-text-hover-color - &[disabled] + &[disabled], + fieldset[disabled] & background-color: transparent border-color: transparent box-shadow: none - @each $name, $pair in $colors + &.is-ghost + background: $button-ghost-background + border-color: $button-ghost-border-color + color: $button-ghost-color + text-decoration: $button-ghost-decoration + &:hover, + &.is-hovered + color: $button-ghost-hover-color + text-decoration: $button-ghost-hover-decoration + @each $name, $pair in $button-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} @@ -109,7 +146,7 @@ $button-static-border-color: $grey-lighter !default color: $color-invert &:hover, &.is-hovered - background-color: darken($color, 2.5%) + background-color: bulmaDarken($color, 2.5%) border-color: transparent color: $color-invert &:focus, @@ -117,42 +154,54 @@ $button-static-border-color: $grey-lighter !default border-color: transparent color: $color-invert &:not(:active) - box-shadow: $button-focus-box-shadow-size rgba($color, 0.25) + box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25) &:active, &.is-active - background-color: darken($color, 5%) + background-color: bulmaDarken($color, 5%) border-color: transparent color: $color-invert - &[disabled] + &[disabled], + fieldset[disabled] & background-color: $color border-color: transparent box-shadow: none &.is-inverted background-color: $color-invert color: $color - &:hover - background-color: darken($color-invert, 5%) - &[disabled] + &:hover, + &.is-hovered + background-color: bulmaDarken($color-invert, 5%) + &[disabled], + fieldset[disabled] & background-color: $color-invert border-color: transparent box-shadow: none color: $color &.is-loading - &:after + &::after border-color: transparent transparent $color-invert $color-invert !important &.is-outlined background-color: transparent border-color: $color color: $color &:hover, - &:focus + &.is-hovered, + &:focus, + &.is-focused background-color: $color border-color: $color color: $color-invert &.is-loading - &:after + &::after border-color: transparent transparent $color $color !important - &[disabled] + &:hover, + &.is-hovered, + &:focus, + &.is-focused + &::after + border-color: transparent transparent $color-invert $color-invert !important + &[disabled], + fieldset[disabled] & background-color: transparent border-color: $color box-shadow: none @@ -162,23 +211,53 @@ $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 - &[disabled] + &.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: bulmaDarken($color-light, 2.5%) + border-color: transparent + color: $color-dark + &:active, + &.is-active + background-color: bulmaDarken($color-light, 5%) + border-color: transparent + color: $color-dark // Sizes &.is-small +button-small + &.is-normal + +button-normal &.is-medium +button-medium &.is-large +button-large // Modifiers - &[disabled] + &[disabled], + fieldset[disabled] & background-color: $button-disabled-background-color border-color: $button-disabled-border-color box-shadow: $button-disabled-shadow @@ -189,8 +268,8 @@ $button-static-border-color: $grey-lighter !default &.is-loading color: transparent !important pointer-events: none - &:after - +loader + &::after + @extend %loader +center(1em) position: absolute !important &.is-static @@ -201,8 +280,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 @@ -211,12 +290,22 @@ $button-static-border-color: $grey-lighter !default justify-content: flex-start .button margin-bottom: 0.5rem - &:not(:last-child) - margin-right: 0.5rem + &:not(:last-child):not(.is-fullwidth) + +ltr-property("margin", 0.5rem) &:last-child margin-bottom: -0.5rem &:not(:last-child) margin-bottom: 1rem + // Sizes + &.are-small + .button:not(.is-normal):not(.is-medium):not(.is-large) + +button-small + &.are-medium + .button:not(.is-small):not(.is-normal):not(.is-large) + +button-medium + &.are-large + .button:not(.is-small):not(.is-normal):not(.is-medium) + +button-large &.has-addons .button &:not(:first-child) @@ -225,9 +314,9 @@ $button-static-border-color: $grey-lighter !default &:not(:last-child) border-bottom-right-radius: 0 border-top-right-radius: 0 - margin-right: -1px + +ltr-property("margin", -1px) &:last-child - margin-right: 0 + +ltr-property("margin", 0) &:hover, &.is-hovered z-index: 2 @@ -239,7 +328,18 @@ $button-static-border-color: $grey-lighter !default z-index: 3 &:hover 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/assets/styles/bulma/elements/container.sass b/assets/styles/bulma/elements/container.sass old mode 100755 new mode 100644 index 3a2158f..c13011e --- a/assets/styles/bulma/elements/container.sass +++ b/assets/styles/bulma/elements/container.sass @@ -1,25 +1,29 @@ +@import "../utilities/mixins" + +$container-offset: (2 * $gap) !default +$container-max-width: $fullhd !default + .container + flex-grow: 1 margin: 0 auto position: relative - +from($desktop) - max-width: $desktop - (2 * $gap) - width: $desktop - (2 * $gap) - &.is-fluid - margin-left: $gap - margin-right: $gap - max-width: none - width: auto - +until($widescreen) - &.is-widescreen - max-width: $widescreen - (2 * $gap) - width: auto - +until($fullhd) - &.is-fullhd - max-width: $fullhd - (2 * $gap) - width: auto - +from($widescreen) - max-width: $widescreen - (2 * $gap) - width: $widescreen - (2 * $gap) - +from($fullhd) - max-width: $fullhd - (2 * $gap) - width: $fullhd - (2 * $gap) \ No newline at end of file + width: auto + &.is-fluid + max-width: none !important + padding-left: $gap + padding-right: $gap + width: 100% + +desktop + max-width: $desktop - $container-offset + +until-widescreen + &.is-widescreen:not(.is-max-desktop) + max-width: min($widescreen, $container-max-width) - $container-offset + +until-fullhd + &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) + max-width: min($fullhd, $container-max-width) - $container-offset + +widescreen + &:not(.is-max-desktop) + max-width: min($widescreen, $container-max-width) - $container-offset + +fullhd + &:not(.is-max-desktop):not(.is-max-widescreen) + max-width: min($fullhd, $container-max-width) - $container-offset diff --git a/assets/styles/bulma/elements/content.sass b/assets/styles/bulma/elements/content.sass old mode 100755 new mode 100644 index 62438cd..ebfa9f0 --- a/assets/styles/bulma/elements/content.sass +++ b/assets/styles/bulma/elements/content.sass @@ -1,5 +1,7 @@ +@import "../utilities/mixins" + $content-heading-color: $text-strong !default -$content-heading-weight: $weight-normal !default +$content-heading-weight: $weight-semibold !default $content-heading-line-height: 1.125 !default $content-blockquote-background-color: $background !default @@ -12,14 +14,13 @@ $content-table-cell-border: 1px solid $border !default $content-table-cell-border-width: 0 0 1px !default $content-table-cell-padding: 0.5em 0.75em !default $content-table-cell-heading-color: $text-strong !default -$content-table-row-hover-background-color: $background !default $content-table-head-cell-border-width: 0 0 2px !default $content-table-head-cell-color: $text-strong !default $content-table-foot-cell-border-width: 2px 0 0 !default $content-table-foot-cell-color: $text-strong !default .content - +block + @extend %block // Inline li + li margin-top: 0.25em @@ -68,15 +69,25 @@ $content-table-foot-cell-color: $text-strong !default margin-bottom: 1em blockquote background-color: $content-blockquote-background-color - border-left: $content-blockquote-border-left + +ltr-property("border", $content-blockquote-border-left, false) padding: $content-blockquote-padding ol - list-style: decimal outside - margin-left: 2em + list-style-position: outside + +ltr-property("margin", 2em, false) margin-top: 1em + &:not([type]) + list-style-type: decimal + &.is-lower-alpha + list-style-type: lower-alpha + &.is-lower-roman + list-style-type: lower-roman + &.is-upper-alpha + list-style-type: upper-alpha + &.is-upper-roman + list-style-type: upper-roman ul list-style: disc outside - margin-left: 2em + +ltr-property("margin", 2em, false) margin-top: 1em ul list-style-type: circle @@ -84,7 +95,7 @@ $content-table-foot-cell-color: $text-strong !default ul list-style-type: square dd - margin-left: 2em + +ltr-property("margin", 2em, false) figure margin-left: 2em margin-right: 2em @@ -116,10 +127,8 @@ $content-table-foot-cell-color: $text-strong !default vertical-align: top th color: $content-table-cell-heading-color - text-align: left - tr - &:hover - background-color: $content-table-row-hover-background-color + &:not([align]) + text-align: inherit thead td, th @@ -136,6 +145,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/assets/styles/bulma/elements/form.sass b/assets/styles/bulma/elements/form.sass old mode 100755 new mode 100644 index 9820c89..3122dc4 --- a/assets/styles/bulma/elements/form.sass +++ b/assets/styles/bulma/elements/form.sass @@ -1,620 +1 @@ -$input-color: $grey-darker !default -$input-background-color: $white !default -$input-border-color: $grey-lighter !default -$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default - -$input-hover-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-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 - +control - background-color: $input-background-color - border-color: $input-border-color - color: $input-color - +placeholder - color: rgba($input-color, 0.3) - &: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] - background-color: $input-disabled-background-color - border-color: $input-disabled-border-color - box-shadow: none - color: $input-disabled-color - +placeholder - color: rgba($input-disabled-color, 0.3) - -.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: unset - // 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] - 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: 2.25em - &::after - +arrow($input-arrow) - margin-top: -0.375em - right: 1.125em - top: 50% - 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 - border-color: $input-disabled-border-color - &:not([multiple]) - padding-right: 2.5em - &[multiple] - height: unset - padding: 0 - option - padding: 0.5em 1em - // States - &:hover - &::after - border-color: $input-hover-color - // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} select - 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-disabled - &::after - border-color: $input-disabled-color - &.is-fullwidth - width: 100% - select - width: 100% - &.is-loading - &::after - +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 - +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: 0.01em - left: 0 - outline: none - position: absolute - top: 0 - width: 0.01em - -.file-cta, -.file-name - +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 - .button, - .input, - .select select - border-bottom-right-radius: 0 - border-top-right-radius: 0 - &:last-child - .button, - .input, - .select select - border-bottom-left-radius: 0 - border-top-left-radius: 0 - .button, - .input, - .select select - &: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 - font-size: $size-normal - position: relative - text-align: left - // Modifiers - // DEPRECATED - &.has-icon - .icon - color: $input-icon-color - height: 2.25em - pointer-events: none - position: absolute - top: 0 - width: 2.25em - z-index: 4 - .input - &: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 - &:not(.has-icon-right) - .icon - left: 0 - .input - padding-left: 2.25em - &.has-icon-right - .icon - right: 0 - .input - padding-right: 2.25em - &.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: 2.25em - pointer-events: none - position: absolute - top: 0 - width: 2.25em - z-index: 4 - &.has-icons-left - .input, - .select select - padding-left: 2.25em - .icon.is-left - left: 0 - &.has-icons-right - .input, - .select select - padding-right: 2.25em - .icon.is-right - right: 0 - &.is-loading - &::after - +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/assets/styles/bulma/elements/icon.sass b/assets/styles/bulma/elements/icon.sass old mode 100755 new mode 100644 index 988546c..466146f --- a/assets/styles/bulma/elements/icon.sass +++ b/assets/styles/bulma/elements/icon.sass @@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default $icon-dimensions-small: 1rem !default $icon-dimensions-medium: 2rem !default $icon-dimensions-large: 3rem !default +$icon-text-spacing: 0.25em !default .icon align-items: center @@ -19,3 +20,21 @@ $icon-dimensions-large: 3rem !default &.is-large height: $icon-dimensions-large width: $icon-dimensions-large + +.icon-text + align-items: flex-start + color: inherit + display: inline-flex + flex-wrap: wrap + line-height: $icon-dimensions + vertical-align: top + .icon + flex-grow: 0 + flex-shrink: 0 + &:not(:last-child) + margin-right: $icon-text-spacing + &:not(:first-child) + margin-left: $icon-text-spacing + +div.icon-text + display: flex diff --git a/assets/styles/bulma/elements/image.sass b/assets/styles/bulma/elements/image.sass old mode 100755 new mode 100644 index 52b7a1c..fc46541 --- a/assets/styles/bulma/elements/image.sass +++ b/assets/styles/bulma/elements/image.sass @@ -1,3 +1,5 @@ +@import "../utilities/mixins" + $dimensions: 16 24 32 48 64 96 128 !default .image @@ -9,28 +11,61 @@ $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, + &.is-5by4, &.is-4by3, &.is-3by2, + &.is-5by3, &.is-16by9, - &.is-2by1 - img - +overlay + &.is-2by1, + &.is-3by1, + &.is-4by5, + &.is-3by4, + &.is-2by3, + &.is-3by5, + &.is-9by16, + &.is-1by2, + &.is-1by3 + img, + .has-ratio + @extend %overlay height: 100% width: 100% &.is-square, &.is-1by1 padding-top: 100% + &.is-5by4 + padding-top: 80% &.is-4by3 padding-top: 75% &.is-3by2 padding-top: 66.6666% + &.is-5by3 + padding-top: 60% &.is-16by9 padding-top: 56.25% &.is-2by1 padding-top: 50% + &.is-3by1 + padding-top: 33.3333% + &.is-4by5 + padding-top: 125% + &.is-3by4 + padding-top: 133.3333% + &.is-2by3 + padding-top: 150% + &.is-3by5 + padding-top: 166.6666% + &.is-9by16 + padding-top: 177.7777% + &.is-1by2 + padding-top: 200% + &.is-1by3 + padding-top: 300% // Sizes @each $dimension in $dimensions &.is-#{$dimension}x#{$dimension} diff --git a/assets/styles/bulma/elements/notification.sass b/assets/styles/bulma/elements/notification.sass old mode 100755 new mode 100644 index 8daccaa..f5c6021 --- a/assets/styles/bulma/elements/notification.sass +++ b/assets/styles/bulma/elements/notification.sass @@ -1,35 +1,52 @@ +@import "../utilities/mixins" + $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 +$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default +$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default + +$notification-colors: $colors !default .notification - +block + @extend %block background-color: $notification-background-color border-radius: $notification-radius - padding: $notification-padding position: relative - a:not(.button) + +ltr + padding: $notification-padding-ltr + +rtl + padding: $notification-padding-rtl + a:not(.button):not(.dropdown-item) color: currentColor text-decoration: underline strong color: currentColor code, pre - background: $white + background: $notification-code-background-color pre code background: transparent & > .delete + +ltr-position(0.5rem) position: absolute - right: 0.5rem top: 0.5rem .title, .subtitle, .content color: currentColor // Colors - @each $name, $pair in $colors + @each $name, $pair in $notification-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} background-color: $color 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 diff --git a/assets/styles/bulma/elements/other.sass b/assets/styles/bulma/elements/other.sass old mode 100755 new mode 100644 index b10d1fa..b993d68 --- a/assets/styles/bulma/elements/other.sass +++ b/assets/styles/bulma/elements/other.sass @@ -1,8 +1,10 @@ +@import "../utilities/mixins" + .block - +block + @extend %block .delete - +delete + @extend %delete .heading display: block @@ -12,7 +14,7 @@ text-transform: uppercase .highlight - +block + @extend %block font-weight: $weight-normal max-width: 100% overflow: hidden @@ -22,7 +24,7 @@ max-width: 100% .loader - +loader + @extend %loader .number align-items: center diff --git a/assets/styles/bulma/elements/progress.sass b/assets/styles/bulma/elements/progress.sass old mode 100755 new mode 100644 index f6e8de3..4daeb80 --- a/assets/styles/bulma/elements/progress.sass +++ b/assets/styles/bulma/elements/progress.sass @@ -1,12 +1,19 @@ -$progress-bar-background-color: $border !default +@import "../utilities/mixins" + +$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 + +$progress-colors: $colors !default .progress - +block + @extend %block -moz-appearance: none -webkit-appearance: none border: none - border-radius: $radius-rounded + border-radius: $progress-border-radius display: block height: $size-normal overflow: hidden @@ -22,7 +29,7 @@ $progress-value-background-color: $text !default background-color: $progress-value-background-color border: none // Colors - @each $name, $pair in $colors + @each $name, $pair in $progress-colors $color: nth($pair, 1) &.is-#{$name} &::-webkit-progress-value @@ -31,6 +38,26 @@ $progress-value-background-color: $text !default 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 + animation-name: moveIndeterminate + animation-timing-function: linear + background-color: $progress-bar-background-color + background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) + background-position: top left + background-repeat: no-repeat + background-size: 150% 150% + &::-webkit-progress-bar + background-color: transparent + &::-moz-progress-bar + background-color: transparent + &::-ms-fill + animation-name: none + // Sizes &.is-small height: $size-small @@ -38,3 +65,9 @@ $progress-value-background-color: $text !default height: $size-medium &.is-large height: $size-large + +@keyframes moveIndeterminate + from + background-position: 200% 0 + to + background-position: -200% 0 diff --git a/assets/styles/bulma/elements/table.sass b/assets/styles/bulma/elements/table.sass old mode 100755 new mode 100644 index edcaed8..7ea6c11 --- a/assets/styles/bulma/elements/table.sass +++ b/assets/styles/bulma/elements/table.sass @@ -1,7 +1,9 @@ -$table-color: $grey-darker !default -$table-background-color: $white !default +@import "../utilities/mixins" -$table-cell-border: 1px solid $grey-lighter !default +$table-color: $text-strong !default +$table-background-color: $scheme-main !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 @@ -11,18 +13,24 @@ $table-head-cell-color: $text-strong !default $table-foot-cell-border-width: 2px 0 0 !default $table-foot-cell-color: $text-strong !default -$table-row-hover-background-color: $white-bis !default +$table-head-background-color: transparent !default +$table-body-background-color: transparent !default +$table-foot-background-color: transparent !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-colors: $colors !default .table + @extend %block background-color: $table-background-color color: $table-color - margin-bottom: 1.5rem td, th border: $table-cell-border @@ -30,7 +38,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default padding: $table-cell-padding vertical-align: top // Colors - @each $name, $pair in $colors + @each $name, $pair in $table-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} @@ -47,9 +55,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default a, strong color: currentColor + &.is-vcentered + vertical-align: middle th color: $table-cell-heading-color - text-align: left + &:not([align]) + text-align: inherit tr &.is-selected background-color: $table-row-active-background-color @@ -62,16 +73,19 @@ $table-striped-row-even-hover-background-color: $white-ter !default border-color: $table-row-active-color color: currentColor thead + background-color: $table-head-background-color td, th border-width: $table-head-cell-border-width color: $table-head-cell-color tfoot + background-color: $table-foot-background-color td, th border-width: $table-foot-cell-border-width color: $table-foot-cell-color tbody + background-color: $table-body-background-color tr &:last-child td, @@ -98,7 +112,9 @@ $table-striped-row-even-hover-background-color: $white-ter !default tbody tr:not(.is-selected) &:hover - background-color: $table-striped-row-even-hover-background-color + background-color: $table-row-hover-background-color + &:nth-child(even) + background-color: $table-striped-row-even-hover-background-color &.is-narrow td, th @@ -108,3 +124,10 @@ $table-striped-row-even-hover-background-color: $white-ter !default tr:not(.is-selected) &:nth-child(even) background-color: $table-striped-row-even-background-color + +.table-container + @extend %block + +overflow-touch + overflow: auto + overflow-y: hidden + max-width: 100% diff --git a/assets/styles/bulma/elements/tag.sass b/assets/styles/bulma/elements/tag.sass old mode 100755 new mode 100644 index 5b9548f..392daee --- a/assets/styles/bulma/elements/tag.sass +++ b/assets/styles/bulma/elements/tag.sass @@ -1,8 +1,12 @@ +@import "../utilities/mixins" + $tag-background-color: $background !default $tag-color: $text !default $tag-radius: $radius !default $tag-delete-margin: 1px !default +$tag-colors: $colors !default + .tags align-items: center display: flex @@ -11,20 +15,18 @@ $tag-delete-margin: 1px !default .tag margin-bottom: 0.5rem &:not(:last-child) - margin-right: 0.5rem + +ltr-property("margin", 0.5rem) &:last-child margin-bottom: -0.5rem &:not(:last-child) margin-bottom: 1rem - &.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 + // Sizes + &.are-medium + .tag:not(.is-normal):not(.is-large) + font-size: $size-normal + &.are-large + .tag:not(.is-normal):not(.is-medium) + font-size: $size-medium &.is-centered justify-content: center .tag @@ -37,6 +39,24 @@ $tag-delete-margin: 1px !default margin-left: 0.5rem &:not(:last-child) margin-right: 0 + &.has-addons + .tag + +ltr-property("margin", 0) + &:not(:first-child) + +ltr-property("margin", 0, false) + +ltr + border-top-left-radius: 0 + border-bottom-left-radius: 0 + +rtl + border-top-right-radius: 0 + border-bottom-right-radius: 0 + &:not(:last-child) + +ltr + border-top-right-radius: 0 + border-bottom-right-radius: 0 + +rtl + border-top-left-radius: 0 + border-bottom-left-radius: 0 .tag:not(body) align-items: center @@ -52,38 +72,47 @@ $tag-delete-margin: 1px !default padding-right: 0.75em white-space: nowrap .delete - margin-left: 0.25em - margin-right: -0.375em + +ltr-property("margin", 0.25rem, false) + +ltr-property("margin", -0.375rem) // Colors - @each $name, $pair in $colors + @each $name, $pair in $tag-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.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 &.is-medium font-size: $size-normal &.is-large font-size: $size-medium .icon &:first-child:not(:last-child) - margin-left: -0.375em - margin-right: 0.1875em + +ltr-property("margin", -0.375em, false) + +ltr-property("margin", 0.1875em) &:last-child:not(:first-child) - margin-left: 0.1875em - margin-right: -0.375em + +ltr-property("margin", 0.1875em, false) + +ltr-property("margin", -0.375em) &:first-child:last-child - margin-left: -0.375em - margin-right: -0.375em + +ltr-property("margin", -0.375em, false) + +ltr-property("margin", -0.375em) // Modifiers &.is-delete - margin-left: $tag-delete-margin + +ltr-property("margin", $tag-delete-margin, false) padding: 0 position: relative width: 2em - &:before, - &:after + &::before, + &::after background-color: currentColor content: "" display: block @@ -92,10 +121,10 @@ $tag-delete-margin: 1px !default top: 50% transform: translateX(-50%) translateY(-50%) rotate(45deg) transform-origin: center center - &:before + &::before height: 1px width: 50% - &:after + &::after height: 50% width: 1px &:hover, diff --git a/assets/styles/bulma/elements/title.sass b/assets/styles/bulma/elements/title.sass old mode 100755 new mode 100644 index 7735360..e87c531 --- a/assets/styles/bulma/elements/title.sass +++ b/assets/styles/bulma/elements/title.sass @@ -1,20 +1,27 @@ -$title-color: $grey-darker !default +@import "../utilities/mixins" + +$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 $title-strong-color: inherit !default $title-strong-weight: inherit !default $title-sub-size: 0.75em !default $title-sup-size: 0.75em !default -$subtitle-color: $grey-dark !default +$subtitle-color: $text !default +$subtitle-family: false !default $subtitle-size: $size-5 !default $subtitle-weight: $weight-normal !default -$subtitle-strong-color: $grey-darker !default +$subtitle-line-height: 1.25 !default +$subtitle-strong-color: $text-strong !default $subtitle-strong-weight: $weight-semibold !default +$subtitle-negative-margin: -1.25rem !default .title, .subtitle - +block + @extend %block word-break: break-word em, span @@ -28,16 +35,18 @@ $subtitle-strong-weight: $weight-semibold !default .title color: $title-color + @if $title-family + font-family: $title-family font-size: $title-size font-weight: $title-weight - line-height: 1.125 + line-height: $title-line-height strong color: $title-strong-color font-weight: $title-strong-weight & + .highlight margin-top: -0.75rem &:not(.is-spaced) + .subtitle - margin-top: -1.5rem + margin-top: $subtitle-negative-margin // Sizes @each $size in $sizes $i: index($sizes, $size) @@ -46,14 +55,16 @@ $subtitle-strong-weight: $weight-semibold !default .subtitle color: $subtitle-color + @if $subtitle-family + font-family: $subtitle-family font-size: $subtitle-size font-weight: $subtitle-weight - line-height: 1.25 + line-height: $subtitle-line-height strong color: $subtitle-strong-color font-weight: $subtitle-strong-weight &:not(.is-spaced) + .title - margin-top: -1.5rem + margin-top: $subtitle-negative-margin // Sizes @each $size in $sizes $i: index($sizes, $size) diff --git a/assets/styles/bulma/form/_all.sass b/assets/styles/bulma/form/_all.sass new file mode 100644 index 0000000..0a15f80 --- /dev/null +++ b/assets/styles/bulma/form/_all.sass @@ -0,0 +1,9 @@ +/* Bulma Form */ +@charset "utf-8" + +@import "shared" +@import "input-textarea" +@import "checkbox-radio" +@import "select" +@import "file" +@import "tools" diff --git a/assets/styles/bulma/form/checkbox-radio.sass b/assets/styles/bulma/form/checkbox-radio.sass new file mode 100644 index 0000000..f033d11 --- /dev/null +++ b/assets/styles/bulma/form/checkbox-radio.sass @@ -0,0 +1,22 @@ +%checkbox-radio + cursor: pointer + display: inline-block + line-height: 1.25 + position: relative + input + cursor: pointer + &:hover + color: $input-hover-color + &[disabled], + fieldset[disabled] &, + input[disabled] + color: $input-disabled-color + cursor: not-allowed + +.checkbox + @extend %checkbox-radio + +.radio + @extend %checkbox-radio + & + .radio + +ltr-property("margin", 0.5em, false) diff --git a/assets/styles/bulma/form/file.sass b/assets/styles/bulma/form/file.sass new file mode 100644 index 0000000..22a5a50 --- /dev/null +++ b/assets/styles/bulma/form/file.sass @@ -0,0 +1,182 @@ +$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-colors: $form-colors !default + +.file + @extend %unselectable + align-items: stretch + display: flex + justify-content: flex-start + position: relative + // Colors + @each $name, $pair in $file-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: bulmaDarken($color, 2.5%) + border-color: transparent + color: $color-invert + &:focus, + &.is-focused + .file-cta + border-color: transparent + box-shadow: 0 0 0.5em bulmaRgba($color, 0.25) + color: $color-invert + &:active, + &.is-active + .file-cta + background-color: bulmaDarken($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: bulmaDarken($file-cta-background-color, 2.5%) + color: $file-cta-hover-color + .file-name + border-color: bulmaDarken($file-name-border-color, 2.5%) + &:active + .file-cta + background-color: bulmaDarken($file-cta-background-color, 5%) + color: $file-cta-active-color + .file-name + border-color: bulmaDarken($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: inherit + text-overflow: ellipsis + +.file-icon + align-items: center + display: flex + height: 1em + justify-content: center + +ltr-property("margin", 0.5em) + width: 1em + .fa + font-size: 14px diff --git a/assets/styles/bulma/form/input-textarea.sass b/assets/styles/bulma/form/input-textarea.sass new file mode 100644 index 0000000..8d842a0 --- /dev/null +++ b/assets/styles/bulma/form/input-textarea.sass @@ -0,0 +1,66 @@ +$textarea-padding: $control-padding-horizontal !default +$textarea-max-height: 40em !default +$textarea-min-height: 8em !default + +$textarea-colors: $form-colors !default + +%input-textarea + @extend %input + box-shadow: $input-shadow + max-width: 100% + width: 100% + &[readonly] + box-shadow: none + // Colors + @each $name, $pair in $textarea-colors + $color: nth($pair, 1) + &.is-#{$name} + border-color: $color + &:focus, + &.is-focused, + &:active, + &.is-active + box-shadow: $input-focus-box-shadow-size bulmaRgba($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/assets/styles/bulma/form/select.sass b/assets/styles/bulma/form/select.sass new file mode 100644 index 0000000..07fe98c --- /dev/null +++ b/assets/styles/bulma/form/select.sass @@ -0,0 +1,87 @@ +$select-colors: $form-colors !default + +.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 + +ltr-position(1.125em) + z-index: 4 + &.is-rounded + select + border-radius: $radius-rounded + +ltr-property("padding", 1em, false) + 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]) + +ltr-property("padding", 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 $select-colors + $color: nth($pair, 1) + &.is-#{$name} + &:not(:hover)::after + border-color: $color + select + border-color: $color + &:hover, + &.is-hovered + border-color: bulmaDarken($color, 5%) + &:focus, + &.is-focused, + &:active, + &.is-active + box-shadow: $input-focus-box-shadow-size bulmaRgba($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 + +ltr-position(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/assets/styles/bulma/form/shared.sass b/assets/styles/bulma/form/shared.sass new file mode 100644 index 0000000..422d7aa --- /dev/null +++ b/assets/styles/bulma/form/shared.sass @@ -0,0 +1,60 @@ +@import "../utilities/controls" +@import "../utilities/mixins" + +$form-colors: $colors !default + +$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: bulmaRgba($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: bulmaRgba($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: bulmaRgba($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/assets/styles/bulma/form/tools.sass b/assets/styles/bulma/form/tools.sass new file mode 100644 index 0000000..73b09b6 --- /dev/null +++ b/assets/styles/bulma/form/tools.sass @@ -0,0 +1,215 @@ +$label-color: $text-strong !default +$label-weight: $weight-bold !default + +$help-size: $size-small !default + +$label-colors: $form-colors !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 $label-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) + +ltr-property("margin", -1px) + &:not(:first-child):not(:last-child) + .button, + .input, + .select select + border-radius: 0 + &:first-child:not(:only-child) + .button, + .input, + .select select + +ltr + border-bottom-right-radius: 0 + border-top-right-radius: 0 + +rtl + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &:last-child:not(:only-child) + .button, + .input, + .select select + +ltr + border-bottom-left-radius: 0 + border-top-left-radius: 0 + +rtl + border-bottom-right-radius: 0 + border-top-right-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 + +ltr-property("margin", 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 + +ltr-property("margin", 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) + +ltr-property("margin", 0.75rem) + +.control + box-sizing: border-box + clear: both + font-size: $size-normal + position: relative + text-align: inherit + // 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 + +ltr-position(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/assets/styles/bulma/grid/_all.sass b/assets/styles/bulma/grid/_all.sass old mode 100755 new mode 100644 index e53070f..0b5ed31 --- a/assets/styles/bulma/grid/_all.sass +++ b/assets/styles/bulma/grid/_all.sass @@ -1,4 +1,5 @@ +/* Bulma Grid */ @charset "utf-8" -@import "columns.sass" -@import "tiles.sass" +@import "columns" +@import "tiles" diff --git a/assets/styles/bulma/grid/columns.sass b/assets/styles/bulma/grid/columns.sass old mode 100755 new mode 100644 index 90aeee8..2c6c47c --- a/assets/styles/bulma/grid/columns.sass +++ b/assets/styles/bulma/grid/columns.sass @@ -1,3 +1,5 @@ +@import "../utilities/mixins" + $column-gap: 0.75rem !default .column @@ -8,6 +10,7 @@ $column-gap: 0.75rem !default padding: $column-gap .columns.is-mobile > &.is-narrow flex: none + width: unset .columns.is-mobile > &.is-full flex: none width: 100% @@ -39,32 +42,33 @@ $column-gap: 0.75rem !default flex: none width: 80% .columns.is-mobile > &.is-offset-three-quarters - margin-left: 75% + +ltr-property("margin", 75%, false) .columns.is-mobile > &.is-offset-two-thirds - margin-left: 66.6666% + +ltr-property("margin", 66.6666%, false) .columns.is-mobile > &.is-offset-half - margin-left: 50% + +ltr-property("margin", 50%, false) .columns.is-mobile > &.is-offset-one-third - margin-left: 33.3333% + +ltr-property("margin", 33.3333%, false) .columns.is-mobile > &.is-offset-one-quarter - margin-left: 25% + +ltr-property("margin", 25%, false) .columns.is-mobile > &.is-offset-one-fifth - margin-left: 20% + +ltr-property("margin", 20%, false) .columns.is-mobile > &.is-offset-two-fifths - margin-left: 40% + +ltr-property("margin", 40%, false) .columns.is-mobile > &.is-offset-three-fifths - margin-left: 60% + +ltr-property("margin", 60%, false) .columns.is-mobile > &.is-offset-four-fifths - margin-left: 80% - @for $i from 1 through 12 + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 .columns.is-mobile > &.is-#{$i} flex: none - width: ($i / 12) * 100% + width: percentage($i / 12) .columns.is-mobile > &.is-offset-#{$i} - margin-left: ($i / 12) * 100% + +ltr-property("margin", percentage($i / 12), false) +mobile &.is-narrow-mobile flex: none + width: unset &.is-full-mobile flex: none width: 100% @@ -96,33 +100,34 @@ $column-gap: 0.75rem !default flex: none width: 80% &.is-offset-three-quarters-mobile - margin-left: 75% + +ltr-property("margin", 75%, false) &.is-offset-two-thirds-mobile - margin-left: 66.6666% + +ltr-property("margin", 66.6666%, false) &.is-offset-half-mobile - margin-left: 50% + +ltr-property("margin", 50%, false) &.is-offset-one-third-mobile - margin-left: 33.3333% + +ltr-property("margin", 33.3333%, false) &.is-offset-one-quarter-mobile - margin-left: 25% + +ltr-property("margin", 25%, false) &.is-offset-one-fifth-mobile - margin-left: 20% + +ltr-property("margin", 20%, false) &.is-offset-two-fifths-mobile - margin-left: 40% + +ltr-property("margin", 40%, false) &.is-offset-three-fifths-mobile - margin-left: 60% + +ltr-property("margin", 60%, false) &.is-offset-four-fifths-mobile - margin-left: 80% - @for $i from 1 through 12 + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 &.is-#{$i}-mobile flex: none - width: ($i / 12) * 100% + width: percentage($i / 12) &.is-offset-#{$i}-mobile - margin-left: ($i / 12) * 100% + +ltr-property("margin", percentage($i / 12), false) +tablet &.is-narrow, &.is-narrow-tablet flex: none + width: unset &.is-full, &.is-full-tablet flex: none @@ -165,42 +170,43 @@ $column-gap: 0.75rem !default width: 80% &.is-offset-three-quarters, &.is-offset-three-quarters-tablet - margin-left: 75% + +ltr-property("margin", 75%, false) &.is-offset-two-thirds, &.is-offset-two-thirds-tablet - margin-left: 66.6666% + +ltr-property("margin", 66.6666%, false) &.is-offset-half, &.is-offset-half-tablet - margin-left: 50% + +ltr-property("margin", 50%, false) &.is-offset-one-third, &.is-offset-one-third-tablet - margin-left: 33.3333% + +ltr-property("margin", 33.3333%, false) &.is-offset-one-quarter, &.is-offset-one-quarter-tablet - margin-left: 25% + +ltr-property("margin", 25%, false) &.is-offset-one-fifth, &.is-offset-one-fifth-tablet - margin-left: 20% + +ltr-property("margin", 20%, false) &.is-offset-two-fifths, &.is-offset-two-fifths-tablet - margin-left: 40% + +ltr-property("margin", 40%, false) &.is-offset-three-fifths, &.is-offset-three-fifths-tablet - margin-left: 60% + +ltr-property("margin", 60%, false) &.is-offset-four-fifths, &.is-offset-four-fifths-tablet - margin-left: 80% - @for $i from 1 through 12 + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 &.is-#{$i}, &.is-#{$i}-tablet flex: none - width: ($i / 12) * 100% + width: percentage($i / 12) &.is-offset-#{$i}, &.is-offset-#{$i}-tablet - margin-left: ($i / 12) * 100% + +ltr-property("margin", percentage($i / 12), false) +touch &.is-narrow-touch flex: none + width: unset &.is-full-touch flex: none width: 100% @@ -232,32 +238,33 @@ $column-gap: 0.75rem !default flex: none width: 80% &.is-offset-three-quarters-touch - margin-left: 75% + +ltr-property("margin", 75%, false) &.is-offset-two-thirds-touch - margin-left: 66.6666% + +ltr-property("margin", 66.6666%, false) &.is-offset-half-touch - margin-left: 50% + +ltr-property("margin", 50%, false) &.is-offset-one-third-touch - margin-left: 33.3333% + +ltr-property("margin", 33.3333%, false) &.is-offset-one-quarter-touch - margin-left: 25% + +ltr-property("margin", 25%, false) &.is-offset-one-fifth-touch - margin-left: 20% + +ltr-property("margin", 20%, false) &.is-offset-two-fifths-touch - margin-left: 40% + +ltr-property("margin", 40%, false) &.is-offset-three-fifths-touch - margin-left: 60% + +ltr-property("margin", 60%, false) &.is-offset-four-fifths-touch - margin-left: 80% - @for $i from 1 through 12 + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 &.is-#{$i}-touch flex: none - width: ($i / 12) * 100% + width: percentage($i / 12) &.is-offset-#{$i}-touch - margin-left: ($i / 12) * 100% + +ltr-property("margin", percentage($i / 12), false) +desktop &.is-narrow-desktop flex: none + width: unset &.is-full-desktop flex: none width: 100% @@ -289,32 +296,33 @@ $column-gap: 0.75rem !default flex: none width: 80% &.is-offset-three-quarters-desktop - margin-left: 75% + +ltr-property("margin", 75%, false) &.is-offset-two-thirds-desktop - margin-left: 66.6666% + +ltr-property("margin", 66.6666%, false) &.is-offset-half-desktop - margin-left: 50% + +ltr-property("margin", 50%, false) &.is-offset-one-third-desktop - margin-left: 33.3333% + +ltr-property("margin", 33.3333%, false) &.is-offset-one-quarter-desktop - margin-left: 25% + +ltr-property("margin", 25%, false) &.is-offset-one-fifth-desktop - margin-left: 20% + +ltr-property("margin", 20%, false) &.is-offset-two-fifths-desktop - margin-left: 40% + +ltr-property("margin", 40%, false) &.is-offset-three-fifths-desktop - margin-left: 60% + +ltr-property("margin", 60%, false) &.is-offset-four-fifths-desktop - margin-left: 80% - @for $i from 1 through 12 + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 &.is-#{$i}-desktop flex: none - width: ($i / 12) * 100% + width: percentage($i / 12) &.is-offset-#{$i}-desktop - margin-left: ($i / 12) * 100% + +ltr-property("margin", percentage($i / 12), false) +widescreen &.is-narrow-widescreen flex: none + width: unset &.is-full-widescreen flex: none width: 100% @@ -346,32 +354,33 @@ $column-gap: 0.75rem !default flex: none width: 80% &.is-offset-three-quarters-widescreen - margin-left: 75% + +ltr-property("margin", 75%, false) &.is-offset-two-thirds-widescreen - margin-left: 66.6666% + +ltr-property("margin", 66.6666%, false) &.is-offset-half-widescreen - margin-left: 50% + +ltr-property("margin", 50%, false) &.is-offset-one-third-widescreen - margin-left: 33.3333% + +ltr-property("margin", 33.3333%, false) &.is-offset-one-quarter-widescreen - margin-left: 25% + +ltr-property("margin", 25%, false) &.is-offset-one-fifth-widescreen - margin-left: 20% + +ltr-property("margin", 20%, false) &.is-offset-two-fifths-widescreen - margin-left: 40% + +ltr-property("margin", 40%, false) &.is-offset-three-fifths-widescreen - margin-left: 60% + +ltr-property("margin", 60%, false) &.is-offset-four-fifths-widescreen - margin-left: 80% - @for $i from 1 through 12 + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 &.is-#{$i}-widescreen flex: none - width: ($i / 12) * 100% + width: percentage($i / 12) &.is-offset-#{$i}-widescreen - margin-left: ($i / 12) * 100% + +ltr-property("margin", percentage($i / 12), false) +fullhd &.is-narrow-fullhd flex: none + width: unset &.is-full-fullhd flex: none width: 100% @@ -403,33 +412,33 @@ $column-gap: 0.75rem !default flex: none width: 80% &.is-offset-three-quarters-fullhd - margin-left: 75% + +ltr-property("margin", 75%, false) &.is-offset-two-thirds-fullhd - margin-left: 66.6666% + +ltr-property("margin", 66.6666%, false) &.is-offset-half-fullhd - margin-left: 50% + +ltr-property("margin", 50%, false) &.is-offset-one-third-fullhd - margin-left: 33.3333% + +ltr-property("margin", 33.3333%, false) &.is-offset-one-quarter-fullhd - margin-left: 25% + +ltr-property("margin", 25%, false) &.is-offset-one-fifth-fullhd - margin-left: 20% + +ltr-property("margin", 20%, false) &.is-offset-two-fifths-fullhd - margin-left: 40% + +ltr-property("margin", 40%, false) &.is-offset-three-fifths-fullhd - margin-left: 60% + +ltr-property("margin", 60%, false) &.is-offset-four-fifths-fullhd - margin-left: 80% - @for $i from 1 through 12 + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 &.is-#{$i}-fullhd flex: none - width: ($i / 12) * 100% + width: percentage($i / 12) &.is-offset-#{$i}-fullhd - margin-left: ($i / 12) * 100% + +ltr-property("margin", percentage($i / 12), false) .columns - margin-left: (-$column-gap) - margin-right: (-$column-gap) + +ltr-property("margin", (-$column-gap), false) + +ltr-property("margin", (-$column-gap)) margin-top: (-$column-gap) &:last-child margin-bottom: (-$column-gap) @@ -439,8 +448,8 @@ $column-gap: 0.75rem !default &.is-centered justify-content: center &.is-gapless - margin-left: 0 - margin-right: 0 + +ltr-property("margin", 0, false) + +ltr-property("margin", 0) margin-top: 0 & > .column margin: 0 @@ -467,11 +476,38 @@ $column-gap: 0.75rem !default @if $variable-columns .columns.is-variable --columnGap: 0.75rem - margin-left: calc(-1 * var(--columnGap)) - margin-right: calc(-1 * var(--columnGap)) - .column + +ltr-property("margin", calc(-1 * var(--columnGap)), false) + +ltr-property("margin", calc(-1 * var(--columnGap))) + > .column padding-left: var(--columnGap) padding-right: var(--columnGap) @for $i from 0 through 8 &.is-#{$i} --columnGap: #{$i * 0.25rem} + +mobile + &.is-#{$i}-mobile + --columnGap: #{$i * 0.25rem} + +tablet + &.is-#{$i}-tablet + --columnGap: #{$i * 0.25rem} + +tablet-only + &.is-#{$i}-tablet-only + --columnGap: #{$i * 0.25rem} + +touch + &.is-#{$i}-touch + --columnGap: #{$i * 0.25rem} + +desktop + &.is-#{$i}-desktop + --columnGap: #{$i * 0.25rem} + +desktop-only + &.is-#{$i}-desktop-only + --columnGap: #{$i * 0.25rem} + +widescreen + &.is-#{$i}-widescreen + --columnGap: #{$i * 0.25rem} + +widescreen-only + &.is-#{$i}-widescreen-only + --columnGap: #{$i * 0.25rem} + +fullhd + &.is-#{$i}-fullhd + --columnGap: #{$i * 0.25rem} diff --git a/assets/styles/bulma/grid/tiles.sass b/assets/styles/bulma/grid/tiles.sass old mode 100755 new mode 100644 index 1f6a626..ebd136f --- a/assets/styles/bulma/grid/tiles.sass +++ b/assets/styles/bulma/grid/tiles.sass @@ -1,3 +1,7 @@ +@import "../utilities/mixins" + +$tile-spacing: 0.75rem !default + .tile align-items: stretch display: block @@ -7,17 +11,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/assets/styles/bulma/helpers/_all.sass b/assets/styles/bulma/helpers/_all.sass new file mode 100644 index 0000000..d673da6 --- /dev/null +++ b/assets/styles/bulma/helpers/_all.sass @@ -0,0 +1,12 @@ +/* Bulma Helpers */ +@charset "utf-8" + +@import "color" +@import "flexbox" +@import "float" +@import "other" +@import "overflow" +@import "position" +@import "spacing" +@import "typography" +@import "visibility" diff --git a/assets/styles/bulma/helpers/color.sass b/assets/styles/bulma/helpers/color.sass new file mode 100644 index 0000000..b7a8a50 --- /dev/null +++ b/assets/styles/bulma/helpers/color.sass @@ -0,0 +1,39 @@ +@import "../utilities/derived-variables" + +@each $name, $pair in $colors + $color: nth($pair, 1) + .has-text-#{$name} + color: $color !important + a.has-text-#{$name} + &:hover, + &:focus + color: bulmaDarken($color, 10%) !important + .has-background-#{$name} + background-color: $color !important + @if length($pair) >= 4 + $color-light: nth($pair, 3) + $color-dark: nth($pair, 4) + // Light + .has-text-#{$name}-light + color: $color-light !important + a.has-text-#{$name}-light + &:hover, + &:focus + color: bulmaDarken($color-light, 10%) !important + .has-background-#{$name}-light + background-color: $color-light !important + // Dark + .has-text-#{$name}-dark + color: $color-dark !important + a.has-text-#{$name}-dark + &:hover, + &:focus + color: bulmaLighten($color-dark, 10%) !important + .has-background-#{$name}-dark + background-color: $color-dark !important + +@each $name, $shade in $shades + .has-text-#{$name} + color: $shade !important + .has-background-#{$name} + background-color: $shade !important diff --git a/assets/styles/bulma/helpers/flexbox.sass b/assets/styles/bulma/helpers/flexbox.sass new file mode 100644 index 0000000..2538a2d --- /dev/null +++ b/assets/styles/bulma/helpers/flexbox.sass @@ -0,0 +1,35 @@ +$flex-direction-values: row, row-reverse, column, column-reverse +@each $value in $flex-direction-values + .is-flex-direction-#{$value} + flex-direction: $value !important + +$flex-wrap-values: nowrap, wrap, wrap-reverse +@each $value in $flex-wrap-values + .is-flex-wrap-#{$value} + flex-wrap: $value !important + +$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right +@each $value in $justify-content-values + .is-justify-content-#{$value} + justify-content: $value !important + +$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline +@each $value in $align-content-values + .is-align-content-#{$value} + align-content: $value !important + +$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end +@each $value in $align-items-values + .is-align-items-#{$value} + align-items: $value !important + +$align-self-values: auto, flex-start, flex-end, center, baseline, stretch +@each $value in $align-self-values + .is-align-self-#{$value} + align-self: $value !important + +$flex-operators: grow, shrink +@each $operator in $flex-operators + @for $i from 0 through 5 + .is-flex-#{$operator}-#{$i} + flex-#{$operator}: $i !important diff --git a/assets/styles/bulma/helpers/float.sass b/assets/styles/bulma/helpers/float.sass new file mode 100644 index 0000000..f62f24e --- /dev/null +++ b/assets/styles/bulma/helpers/float.sass @@ -0,0 +1,10 @@ +@import "../utilities/mixins" + +.is-clearfix + +clearfix + +.is-pulled-left + float: left !important + +.is-pulled-right + float: right !important diff --git a/assets/styles/bulma/helpers/other.sass b/assets/styles/bulma/helpers/other.sass new file mode 100644 index 0000000..6e2e63c --- /dev/null +++ b/assets/styles/bulma/helpers/other.sass @@ -0,0 +1,14 @@ +@import "../utilities/mixins" + +.is-radiusless + border-radius: 0 !important + +.is-shadowless + box-shadow: none !important + +.is-clickable + cursor: pointer !important + pointer-events: all !important + +.is-unselectable + @extend %unselectable diff --git a/assets/styles/bulma/helpers/overflow.sass b/assets/styles/bulma/helpers/overflow.sass new file mode 100644 index 0000000..ef1e3ef --- /dev/null +++ b/assets/styles/bulma/helpers/overflow.sass @@ -0,0 +1,2 @@ +.is-clipped + overflow: hidden !important diff --git a/assets/styles/bulma/helpers/position.sass b/assets/styles/bulma/helpers/position.sass new file mode 100644 index 0000000..4b8fda4 --- /dev/null +++ b/assets/styles/bulma/helpers/position.sass @@ -0,0 +1,7 @@ +@import "../utilities/mixins" + +.is-overlay + @extend %overlay + +.is-relative + position: relative !important diff --git a/assets/styles/bulma/helpers/spacing.sass b/assets/styles/bulma/helpers/spacing.sass new file mode 100644 index 0000000..b9bb19b --- /dev/null +++ b/assets/styles/bulma/helpers/spacing.sass @@ -0,0 +1,31 @@ +.is-marginless + margin: 0 !important + +.is-paddingless + padding: 0 !important + +$spacing-shortcuts: ("margin": "m", "padding": "p") !default +$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default +$spacing-horizontal: "x" !default +$spacing-vertical: "y" !default +$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default + +@each $property, $shortcut in $spacing-shortcuts + @each $name, $value in $spacing-values + // All directions + .#{$shortcut}-#{$name} + #{$property}: $value !important + // Cardinal directions + @each $direction, $suffix in $spacing-directions + .#{$shortcut}#{$suffix}-#{$name} + #{$property}-#{$direction}: $value !important + // Horizontal axis + @if $spacing-horizontal != null + .#{$shortcut}#{$spacing-horizontal}-#{$name} + #{$property}-left: $value !important + #{$property}-right: $value !important + // Vertical axis + @if $spacing-vertical != null + .#{$shortcut}#{$spacing-vertical}-#{$name} + #{$property}-top: $value !important + #{$property}-bottom: $value !important diff --git a/assets/styles/bulma/helpers/typography.sass b/assets/styles/bulma/helpers/typography.sass new file mode 100644 index 0000000..5243315 --- /dev/null +++ b/assets/styles/bulma/helpers/typography.sass @@ -0,0 +1,100 @@ +@import "../utilities/mixins" + +=typography-size($target:'') + @each $size in $sizes + $i: index($sizes, $size) + .is-size-#{$i}#{if($target == '', '', '-' + $target)} + font-size: $size !important + ++typography-size() + ++mobile + +typography-size('mobile') + ++tablet + +typography-size('tablet') + ++touch + +typography-size('touch') + ++desktop + +typography-size('desktop') + ++widescreen + +typography-size('widescreen') + ++fullhd + +typography-size('fullhd') + +$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') + +@each $alignment, $text-align in $alignments + .has-text-#{$alignment} + text-align: #{$text-align} !important + +@each $alignment, $text-align in $alignments + +mobile + .has-text-#{$alignment}-mobile + text-align: #{$text-align} !important + +tablet + .has-text-#{$alignment}-tablet + text-align: #{$text-align} !important + +tablet-only + .has-text-#{$alignment}-tablet-only + text-align: #{$text-align} !important + +touch + .has-text-#{$alignment}-touch + text-align: #{$text-align} !important + +desktop + .has-text-#{$alignment}-desktop + text-align: #{$text-align} !important + +desktop-only + .has-text-#{$alignment}-desktop-only + text-align: #{$text-align} !important + +widescreen + .has-text-#{$alignment}-widescreen + text-align: #{$text-align} !important + +widescreen-only + .has-text-#{$alignment}-widescreen-only + text-align: #{$text-align} !important + +fullhd + .has-text-#{$alignment}-fullhd + text-align: #{$text-align} !important + +.is-capitalized + text-transform: capitalize !important + +.is-lowercase + text-transform: lowercase !important + +.is-uppercase + text-transform: uppercase !important + +.is-italic + font-style: italic !important + +.has-text-weight-light + 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 + font-weight: $weight-bold !important + +.is-family-primary + font-family: $family-primary !important + +.is-family-secondary + font-family: $family-secondary !important + +.is-family-sans-serif + font-family: $family-sans-serif !important + +.is-family-monospace + font-family: $family-monospace !important + +.is-family-code + font-family: $family-code !important diff --git a/assets/styles/bulma/helpers/visibility.sass b/assets/styles/bulma/helpers/visibility.sass new file mode 100644 index 0000000..a1bb0d5 --- /dev/null +++ b/assets/styles/bulma/helpers/visibility.sass @@ -0,0 +1,122 @@ +@import "../utilities/mixins" + +$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' + +@each $display in $displays + .is-#{$display} + display: #{$display} !important + +mobile + .is-#{$display}-mobile + display: #{$display} !important + +tablet + .is-#{$display}-tablet + display: #{$display} !important + +tablet-only + .is-#{$display}-tablet-only + display: #{$display} !important + +touch + .is-#{$display}-touch + display: #{$display} !important + +desktop + .is-#{$display}-desktop + display: #{$display} !important + +desktop-only + .is-#{$display}-desktop-only + display: #{$display} !important + +widescreen + .is-#{$display}-widescreen + display: #{$display} !important + +widescreen-only + .is-#{$display}-widescreen-only + display: #{$display} !important + +fullhd + .is-#{$display}-fullhd + display: #{$display} !important + +.is-hidden + display: none !important + +.is-sr-only + border: none !important + clip: rect(0, 0, 0, 0) !important + height: 0.01em !important + overflow: hidden !important + padding: 0 !important + position: absolute !important + white-space: nowrap !important + width: 0.01em !important + ++mobile + .is-hidden-mobile + display: none !important + ++tablet + .is-hidden-tablet + display: none !important + ++tablet-only + .is-hidden-tablet-only + display: none !important + ++touch + .is-hidden-touch + display: none !important + ++desktop + .is-hidden-desktop + display: none !important + ++desktop-only + .is-hidden-desktop-only + display: none !important + ++widescreen + .is-hidden-widescreen + display: none !important + ++widescreen-only + .is-hidden-widescreen-only + display: none !important + ++fullhd + .is-hidden-fullhd + display: none !important + +.is-invisible + visibility: hidden !important + ++mobile + .is-invisible-mobile + visibility: hidden !important + ++tablet + .is-invisible-tablet + visibility: hidden !important + ++tablet-only + .is-invisible-tablet-only + visibility: hidden !important + ++touch + .is-invisible-touch + visibility: hidden !important + ++desktop + .is-invisible-desktop + visibility: hidden !important + ++desktop-only + .is-invisible-desktop-only + visibility: hidden !important + ++widescreen + .is-invisible-widescreen + visibility: hidden !important + ++widescreen-only + .is-invisible-widescreen-only + visibility: hidden !important + ++fullhd + .is-invisible-fullhd + visibility: hidden !important diff --git a/assets/styles/bulma/layout/_all.sass b/assets/styles/bulma/layout/_all.sass old mode 100755 new mode 100644 index 143ada3..4d1df5b --- a/assets/styles/bulma/layout/_all.sass +++ b/assets/styles/bulma/layout/_all.sass @@ -1,5 +1,6 @@ +/* Bulma Layout */ @charset "utf-8" -@import "hero.sass" -@import "section.sass" -@import "footer.sass" +@import "hero" +@import "section" +@import "footer" diff --git a/assets/styles/bulma/layout/footer.sass b/assets/styles/bulma/layout/footer.sass old mode 100755 new mode 100644 index 5b59e25..4e9187e --- a/assets/styles/bulma/layout/footer.sass +++ b/assets/styles/bulma/layout/footer.sass @@ -1,5 +1,11 @@ -$footer-background-color: $background !default +@import "../utilities/derived-variables" + +$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: 3rem 1.5rem 6rem + padding: $footer-padding + @if $footer-color + color: $footer-color diff --git a/assets/styles/bulma/layout/hero.sass b/assets/styles/bulma/layout/hero.sass old mode 100755 new mode 100644 index be7a9d7..491e976 --- a/assets/styles/bulma/layout/hero.sass +++ b/assets/styles/bulma/layout/hero.sass @@ -1,5 +1,13 @@ -// Main container +@import "../utilities/mixins" +$hero-body-padding: 3rem 1.5rem !default +$hero-body-padding-small: 1.5rem !default +$hero-body-padding-medium: 9rem 1.5rem !default +$hero-body-padding-large: 18rem 1.5rem !default + +$hero-colors: $colors !default + +// Main container .hero align-items: stretch display: flex @@ -11,19 +19,19 @@ ul border-bottom: none // Colors - @each $name, $pair in $colors + @each $name, $pair in $hero-colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.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 color: $color-invert .subtitle - color: rgba($color-invert, 0.9) + color: bulmaRgba($color-invert, 0.9) a:not(.button), strong color: $color-invert @@ -32,12 +40,12 @@ background-color: $color .navbar-item, .navbar-link - color: rgba($color-invert, 0.7) + color: bulmaRgba($color-invert, 0.7) a.navbar-item, .navbar-link &:hover, &.is-active - background-color: darken($color, 5%) + background-color: bulmaDarken($color, 5%) color: $color-invert .tabs a @@ -53,7 +61,7 @@ a color: $color-invert &:hover - background-color: rgba($black, 0.1) + background-color: bulmaRgba($scheme-invert, 0.1) li.is-active a &, &:hover @@ -61,43 +69,29 @@ border-color: $color-invert color: $color // Modifiers - &.is-bold - $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) - $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) - background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) - +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) + @if type-of($color) == 'color' + &.is-bold + $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) + $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) + +mobile + .navbar-menu + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) // Sizes &.is-small .hero-body - padding-bottom: 1.5rem - padding-top: 1.5rem + padding: $hero-body-padding-small &.is-medium +tablet .hero-body - padding-bottom: 9rem - padding-top: 9rem + padding: $hero-body-padding-medium &.is-large +tablet .hero-body - padding-bottom: 18rem - padding-top: 18rem + padding: $hero-body-padding-large &.is-halfheight, - &.is-fullheight + &.is-fullheight, + &.is-fullheight-with-navbar .hero-body align-items: center display: flex @@ -112,7 +106,7 @@ // Components .hero-video - +overlay + @extend %overlay overflow: hidden video left: 50% @@ -140,7 +134,7 @@ display: flex justify-content: center .button:not(:last-child) - margin-right: 1.5rem + +ltr-property("margin", 1.5rem) // Containers @@ -152,4 +146,4 @@ .hero-body flex-grow: 1 flex-shrink: 0 - padding: 3rem 1.5rem + padding: $hero-body-padding diff --git a/assets/styles/bulma/layout/section.sass b/assets/styles/bulma/layout/section.sass old mode 100755 new mode 100644 index 6f2d352..25e7038 --- a/assets/styles/bulma/layout/section.sass +++ b/assets/styles/bulma/layout/section.sass @@ -1,3 +1,5 @@ +@import "../utilities/mixins" + $section-padding: 3rem 1.5rem !default $section-padding-medium: 9rem 1.5rem !default $section-padding-large: 18rem 1.5rem !default diff --git a/assets/styles/bulma/utilities/_all.sass b/assets/styles/bulma/utilities/_all.sass old mode 100755 new mode 100644 index bf4ecfe..51cf348 --- a/assets/styles/bulma/utilities/_all.sass +++ b/assets/styles/bulma/utilities/_all.sass @@ -1,8 +1,9 @@ +/* Bulma Utilities */ @charset "utf-8" -@import "initial-variables.sass" -@import "functions.sass" -@import "derived-variables.sass" -@import "animations.sass" -@import "mixins.sass" -@import "controls.sass" +@import "initial-variables" +@import "functions" +@import "derived-variables" +@import "mixins" +@import "controls" +@import "extends" diff --git a/assets/styles/bulma/utilities/animations.sass b/assets/styles/bulma/utilities/animations.sass old mode 100755 new mode 100644 index a14525d..1872e08 --- a/assets/styles/bulma/utilities/animations.sass +++ b/assets/styles/bulma/utilities/animations.sass @@ -1,5 +1 @@ -@keyframes spinAround - from - transform: rotate(0deg) - to - transform: rotate(359deg) +@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead." diff --git a/assets/styles/bulma/utilities/controls.sass b/assets/styles/bulma/utilities/controls.sass old mode 100755 new mode 100644 index cb258df..4c738c7 --- a/assets/styles/bulma/utilities/controls.sass +++ b/assets/styles/bulma/utilities/controls.sass @@ -1,21 +1,28 @@ +@import "derived-variables" + $control-radius: $radius !default $control-radius-small: $radius-small !default -$control-padding-vertical: calc(0.375em - 1px) !default -$control-padding-horizontal: calc(0.625em - 1px) !default +$control-border-width: 1px !default + +$control-height: 2.5em !default +$control-line-height: 1.5 !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 -webkit-appearance: none align-items: center - border: 1px solid transparent + border: $control-border-width solid transparent border-radius: $control-radius box-shadow: none display: inline-flex font-size: $size-normal - height: 2.25em + height: $control-height justify-content: flex-start - line-height: 1.5 + line-height: $control-line-height padding-bottom: $control-padding-vertical padding-left: $control-padding-horizontal padding-right: $control-padding-horizontal @@ -28,7 +35,8 @@ $control-padding-horizontal: calc(0.625em - 1px) !default &:active, &.is-active outline: none - &[disabled] + &[disabled], + fieldset[disabled] & cursor: not-allowed // The controls sizes use mixins so they can be used at different breakpoints diff --git a/assets/styles/bulma/utilities/derived-variables.sass b/assets/styles/bulma/utilities/derived-variables.sass old mode 100755 new mode 100644 index 92a7107..2b9e7e0 --- a/assets/styles/bulma/utilities/derived-variables.sass +++ b/assets/styles/bulma/utilities/derived-variables.sass @@ -1,3 +1,6 @@ +@import "initial-variables" +@import "functions" + $primary: $turquoise !default $info: $cyan !default @@ -19,20 +22,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 @@ -43,7 +65,7 @@ $text-strong: $grey-darker !default // Code colors -$code: $red !default +$code: darken($red, 15%) !default $code-background: $background !default $pre: $text !default @@ -52,7 +74,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 @@ -67,6 +91,7 @@ $link-active-border: $grey-dark !default // Typography $family-primary: $family-sans-serif !default +$family-secondary: $family-sans-serif !default $family-code: $family-monospace !default $size-small: $size-7 !default @@ -75,8 +100,11 @@ $size-medium: $size-5 !default $size-large: $size-4 !default // Lists and maps +$custom-colors: null !default +$custom-shades: null !default -$colors: ("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)) !default -$shades: ("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) !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/assets/styles/bulma/utilities/extends.sass b/assets/styles/bulma/utilities/extends.sass new file mode 100644 index 0000000..e7b69fe --- /dev/null +++ b/assets/styles/bulma/utilities/extends.sass @@ -0,0 +1,22 @@ +@import "mixins" + +%control + +control + +%unselectable + +unselectable + +%arrow + +arrow + +%block + +block + +%delete + +delete + +%loader + +loader + +%overlay + +overlay diff --git a/assets/styles/bulma/utilities/functions.sass b/assets/styles/bulma/utilities/functions.sass old mode 100755 new mode 100644 index e38d172..270121f --- a/assets/styles/bulma/utilities/functions.sass +++ b/assets/styles/bulma/utilities/functions.sass @@ -1,3 +1,56 @@ +@function mergeColorMaps($bulma-colors, $custom-colors) + // We return at least Bulma's hard-coded colors + $merged-colors: $bulma-colors + + // We want a map as input + @if type-of($custom-colors) == 'map' + @each $name, $components in $custom-colors + // 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 + // 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) + + $value: ($color-base, $color-invert, $color-light, $color-dark) + + // We only want to merge the map if the color base is an actual color + @if type-of($color-base) == 'color' + // 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 + @function powerNumber($number, $exp) $value: 1 @if $exp > 0 @@ -9,6 +62,8 @@ @return $value @function colorLuminance($color) + @if type-of($color) != 'color' + @return 0.55 $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) @each $name, $value in $color-rgb $adjusted: 0 @@ -26,3 +81,35 @@ @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 + +@function bulmaRgba($color, $alpha) + @if type-of($color) != 'color' + @return $color + @return rgba($color, $alpha) + +@function bulmaDarken($color, $amount) + @if type-of($color) != 'color' + @return $color + @return darken($color, $amount) + +@function bulmaLighten($color, $amount) + @if type-of($color) != 'color' + @return $color + @return lighten($color, $amount) diff --git a/assets/styles/bulma/utilities/initial-variables.sass b/assets/styles/bulma/utilities/initial-variables.sass old mode 100755 new mode 100644 index d138cea..a1d688b --- a/assets/styles/bulma/utilities/initial-variables.sass +++ b/assets/styles/bulma/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,6 +44,10 @@ $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 @@ -53,18 +58,21 @@ $tablet: 769px !default $desktop: 960px + (2 * $gap) !default // 1152px container + 4rem $widescreen: 1152px + (2 * $gap) !default +$widescreen-enabled: true !default // 1344px container + 4rem $fullhd: 1344px + (2 * $gap) !default +$fullhd-enabled: true !default // Miscellaneous $easing: ease-out !default $radius-small: 2px !default -$radius: 3px !default -$radius-large: 5px !default +$radius: 4px !default +$radius-large: 6px !default $radius-rounded: 290486px !default $speed: 86ms !default // Flags $variable-columns: true !default +$rtl: false !default diff --git a/assets/styles/bulma/utilities/mixins.sass b/assets/styles/bulma/utilities/mixins.sass old mode 100755 new mode 100644 index 51c0493..7b0057f --- a/assets/styles/bulma/utilities/mixins.sass +++ b/assets/styles/bulma/utilities/mixins.sass @@ -1,24 +1,7 @@ -@import "initial-variables" - -=arrow($color) - border: 1px solid $color - border-right: 0 - border-top: 0 - content: " " - display: block - height: 0.5em - pointer-events: none - position: absolute - transform: rotate(-45deg) - transform-origin: center - width: 0.5em - -=block - &:not(:last-child) - margin-bottom: 1.5rem +@import "derived-variables" =clearfix - &:after + &::after clear: both content: " " display: table @@ -32,71 +15,6 @@ left: calc(50% - (#{$width} / 2)) top: calc(50% - (#{$width} / 2)) -=delete - +unselectable - -moz-appearance: none - -webkit-appearance: none - background-color: rgba($black, 0.2) - border: none - border-radius: $radius-rounded - cursor: pointer - display: inline-block - flex-grow: 0 - flex-shrink: 0 - font-size: 0 - height: 20px - max-height: 20px - max-width: 20px - min-height: 20px - min-width: 20px - outline: none - position: relative - vertical-align: top - width: 20px - &:before, - &:after - background-color: $white - content: "" - display: block - left: 50% - position: absolute - top: 50% - transform: translateX(-50%) translateY(-50%) rotate(45deg) - transform-origin: center center - &:before - height: 2px - width: 50% - &:after - height: 50% - width: 2px - &:hover, - &:focus - background-color: rgba($black, 0.3) - &:active - background-color: rgba($black, 0.4) - // Sizes - &.is-small - height: 16px - max-height: 16px - max-width: 16px - min-height: 16px - min-width: 16px - width: 16px - &.is-medium - height: 24px - max-height: 24px - max-width: 24px - min-height: 24px - min-width: 24px - width: 24px - &.is-large - height: 32px - max-height: 32px - max-width: 32px - min-height: 32px - min-width: 32px - width: 32px - =fa($size, $dimensions) display: inline-block font-size: $size @@ -130,7 +48,7 @@ &:nth-child(3) top: calc(50% + 4px) &:hover - background-color: rgba(black, 0.05) + background-color: bulmaRgba(black, 0.05) // Modifers &.is-active span @@ -141,41 +59,15 @@ &:nth-child(3) transform: translateY(-5px) rotate(-45deg) -=loader - animation: spinAround 500ms infinite linear - border: 2px solid $border - border-radius: $radius-rounded - border-right-color: transparent - border-top-color: transparent - content: "" - display: block - height: 1em - position: relative - width: 1em - =overflow-touch -webkit-overflow-scrolling: touch -=overlay($offset: 0) - bottom: $offset - left: $offset - position: absolute - right: $offset - top: $offset - =placeholder $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' @each $placeholder in $placeholders &:#{$placeholder}-placeholder @content -=unselectable - -webkit-touch-callout: none - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - // Responsiveness =from($device) @@ -207,17 +99,170 @@ @content =desktop-only - @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) - @content + @if $widescreen-enabled + @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) + @content + +=until-widescreen + @if $widescreen-enabled + @media screen and (max-width: $widescreen - 1px) + @content =widescreen - @media screen and (min-width: $widescreen) - @content + @if $widescreen-enabled + @media screen and (min-width: $widescreen) + @content =widescreen-only - @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) - @content + @if $widescreen-enabled and $fullhd-enabled + @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) + @content + +=until-fullhd + @if $fullhd-enabled + @media screen and (max-width: $fullhd - 1px) + @content =fullhd - @media screen and (min-width: $fullhd) + @if $fullhd-enabled + @media screen and (min-width: $fullhd) + @content + +=ltr + @if not $rtl @content + +=rtl + @if $rtl + @content + +=ltr-property($property, $spacing, $right: true) + $normal: if($right, "right", "left") + $opposite: if($right, "left", "right") + @if $rtl + #{$property}-#{$opposite}: $spacing + @else + #{$property}-#{$normal}: $spacing + +=ltr-position($spacing, $right: true) + $normal: if($right, "right", "left") + $opposite: if($right, "left", "right") + @if $rtl + #{$opposite}: $spacing + @else + #{$normal}: $spacing + +// Placeholders + +=unselectable + -webkit-touch-callout: none + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + +=arrow($color: transparent) + border: 3px solid $color + border-radius: 2px + border-right: 0 + border-top: 0 + content: " " + display: block + height: 0.625em + margin-top: -0.4375em + pointer-events: none + position: absolute + top: 50% + transform: rotate(-45deg) + transform-origin: center + width: 0.625em + +=block($spacing: $block-spacing) + &:not(:last-child) + margin-bottom: $spacing + +=delete + +unselectable + -moz-appearance: none + -webkit-appearance: none + background-color: bulmaRgba($scheme-invert, 0.2) + border: none + border-radius: $radius-rounded + cursor: pointer + pointer-events: auto + display: inline-block + flex-grow: 0 + flex-shrink: 0 + font-size: 0 + height: 20px + max-height: 20px + max-width: 20px + min-height: 20px + min-width: 20px + outline: none + position: relative + vertical-align: top + width: 20px + &::before, + &::after + background-color: $scheme-main + content: "" + display: block + left: 50% + position: absolute + top: 50% + transform: translateX(-50%) translateY(-50%) rotate(45deg) + transform-origin: center center + &::before + height: 2px + width: 50% + &::after + height: 50% + width: 2px + &:hover, + &:focus + background-color: bulmaRgba($scheme-invert, 0.3) + &:active + background-color: bulmaRgba($scheme-invert, 0.4) + // Sizes + &.is-small + height: 16px + max-height: 16px + max-width: 16px + min-height: 16px + min-width: 16px + width: 16px + &.is-medium + height: 24px + max-height: 24px + max-width: 24px + min-height: 24px + min-width: 24px + width: 24px + &.is-large + height: 32px + max-height: 32px + max-width: 32px + min-height: 32px + min-width: 32px + width: 32px + +=loader + animation: spinAround 500ms infinite linear + border: 2px solid $grey-lighter + border-radius: $radius-rounded + border-right-color: transparent + border-top-color: transparent + content: "" + display: block + height: 1em + position: relative + width: 1em + +=overlay($offset: 0) + bottom: $offset + left: $offset + position: absolute + right: $offset + top: $offset + diff --git a/assets/styles/main.sass b/assets/styles/main.sass index f63748e..6a35a1f 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -1,21 +1,38 @@ -@charset "utf-8"; +@charset "utf-8" -@import "./fa.sass"; +@import "./fa.sass" -@import "bulma/utilities/initial-variables"; -@import "bulma/utilities/functions"; +@import "bulma/utilities/initial-variables" +@import "bulma/utilities/functions" // make view narrower -$widescreen: $desktop; -$fullhd: $desktop; +$widescreen: $desktop +$fullhd: $desktop // custom fonts -$family-sans-serif: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -$family-monospace: "Source Serif Pro", monospace; +$family-sans-serif: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif +$family-monospace: "Source Serif Pro", monospace -@import "bulma/utilities/_all"; -@import "bulma/base/_all"; -@import "bulma/elements/_all"; -@import "bulma/components/_all"; -@import "bulma/grid/_all"; -@import "bulma/layout/_all"; +@import "bulma/utilities/_all" + +@import "bulma/helpers/color" +@import "bulma/helpers/typography" +@import "bulma/helpers/visibility" + +@import "bulma/base/minireset" +@import "bulma/base/generic" + +@import "bulma/elements/box" +@import "bulma/elements/container" +@import "bulma/elements/content" +@import "bulma/elements/notification" +@import "bulma/elements/table" +@import "bulma/elements/tag" +@import "bulma/elements/title" + +@import "bulma/components/level" +@import "bulma/components/message" +@import "bulma/components/navbar" + +@import "bulma/grid/columns" +@import "bulma/layout/_all"