feliix42/deps.rs
1
0
Fork 0
mirror of https://github.com/deps-rs/deps.rs.git synced 2024-11-24 19:16:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade bulma to 0.9.2 and reduce imported styles (#102)

Browse source 
* Upgrade bulma to 0.7.5

* Upgrade bulma to 0.8.2

* Upgrade bulma to 0.9.2

* Reduce features

* Remove ';' from sass
This commit is contained in:
Paolo Barbolini 2021-02-15 08:50:28 +01:00 committed by GitHub
parent c0de9d15b6
commit 3f74371333
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 2512 additions and 1566 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/styles/bulma/LICENSE
View file

@ -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

7
assets/styles/bulma/base/_all.sass Executable file → Normal file
View file

@ -1,5 +1,6 @@
/* Bulma Base */
@charset "utf-8"
@import "minireset.sass"
@import "generic.sass"
@import "helpers.sass"
@import "minireset"
@import "generic"
@import "animations"

5
assets/styles/bulma/base/animations.sass Normal file
View file

@ -0,0 +1,5 @@
@keyframes spinAround
from
transform: rotate(0deg)
to
transform: rotate(359deg)

42
assets/styles/bulma/base/generic.sass Executable file → Normal file
View file

@ -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

246
assets/styles/bulma/base/helpers.sass Executable file → Normal file
View file

@ -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."

15
assets/styles/bulma/base/minireset.sass Executable file → Normal file
View file

@ -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

25
assets/styles/bulma/components/_all.sass Executable file → Normal file
View file

@ -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"

37
assets/styles/bulma/components/breadcrumb.sass Executable file → Normal file
View file

@ -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

57
assets/styles/bulma/components/card.sass Executable file → Normal file
View file

@ -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

33
assets/styles/bulma/components/dropdown.sass Executable file → Normal file
View file

@ -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

12
assets/styles/bulma/components/level.sass Executable file → Normal file
View file

@ -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

46
assets/styles/bulma/components/media.sass Executable file → Normal file
View file

@ -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

27
assets/styles/bulma/components/menu.sass Executable file → Normal file
View file

@ -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

58
assets/styles/bulma/components/message.sass Executable file → Normal file
View file

@ -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,

22
assets/styles/bulma/components/modal.sass Executable file → Normal file
View file

@ -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

191
assets/styles/bulma/components/navbar.sass Executable file → Normal file
View file

@ -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})

45
assets/styles/bulma/components/pagination.sass Executable file → Normal file
View file

@ -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

50
assets/styles/bulma/components/panel.sass Executable file → Normal file
View file

@ -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

55
assets/styles/bulma/components/tabs.sass Executable file → Normal file
View file

@ -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

26
assets/styles/bulma/elements/_all.sass Executable file → Normal file
View file

@ -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"

12
assets/styles/bulma/elements/box.sass Executable file → Normal file
View file

@ -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

192
assets/styles/bulma/elements/button.sass Executable file → Normal file
View file

@ -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

48
assets/styles/bulma/elements/container.sass Executable file → Normal file
View file

@ -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)
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

36
assets/styles/bulma/elements/content.sass Executable file → Normal file
View file

@ -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

621
assets/styles/bulma/elements/form.sass Executable file → Normal file
View file

@ -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."

19
assets/styles/bulma/elements/icon.sass Executable file → Normal file
View file

@ -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

41
assets/styles/bulma/elements/image.sass Executable file → Normal file
View file

@ -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}

29
assets/styles/bulma/elements/notification.sass Executable file → Normal file
View file

@ -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

10
assets/styles/bulma/elements/other.sass Executable file → Normal file
View file

@ -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

41
assets/styles/bulma/elements/progress.sass Executable file → Normal file
View file

@ -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

43
assets/styles/bulma/elements/table.sass Executable file → Normal file
View file

@ -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%

77
assets/styles/bulma/elements/tag.sass Executable file → Normal file
View file

@ -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,

27
assets/styles/bulma/elements/title.sass Executable file → Normal file
View file

@ -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)

9
assets/styles/bulma/form/_all.sass Normal file
View file

@ -0,0 +1,9 @@
/* Bulma Form */
@charset "utf-8"
@import "shared"
@import "input-textarea"
@import "checkbox-radio"
@import "select"
@import "file"
@import "tools"

22
assets/styles/bulma/form/checkbox-radio.sass Normal file
View file

@ -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)

182
assets/styles/bulma/form/file.sass Normal file
View file

@ -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

66
assets/styles/bulma/form/input-textarea.sass Normal file
View file

@ -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

87
assets/styles/bulma/form/select.sass Normal file
View file

@ -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

60
assets/styles/bulma/form/shared.sass Normal file
View file

@ -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

215
assets/styles/bulma/form/tools.sass Normal file
View file

@ -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

5
assets/styles/bulma/grid/_all.sass Executable file → Normal file
View file

@ -1,4 +1,5 @@
/* Bulma Grid */
@charset "utf-8"
@import "columns.sass"
@import "tiles.sass"
@import "columns"
@import "tiles"

218
assets/styles/bulma/grid/columns.sass Executable file → Normal file
View file

@ -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}

16
assets/styles/bulma/grid/tiles.sass Executable file → Normal file
View file

@ -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)

12
assets/styles/bulma/helpers/_all.sass Normal file
View file

@ -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"

39
assets/styles/bulma/helpers/color.sass Normal file
View file

@ -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

35
assets/styles/bulma/helpers/flexbox.sass Normal file
View file

@ -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

10
assets/styles/bulma/helpers/float.sass Normal file
View file

@ -0,0 +1,10 @@
@import "../utilities/mixins"
.is-clearfix
+clearfix
.is-pulled-left
float: left !important
.is-pulled-right
float: right !important

14
assets/styles/bulma/helpers/other.sass Normal file
View file

@ -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

2
assets/styles/bulma/helpers/overflow.sass Normal file
View file

@ -0,0 +1,2 @@
.is-clipped
overflow: hidden !important

7
assets/styles/bulma/helpers/position.sass Normal file
View file

@ -0,0 +1,7 @@
@import "../utilities/mixins"
.is-overlay
@extend %overlay
.is-relative
position: relative !important

31
assets/styles/bulma/helpers/spacing.sass Normal file
View file

@ -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

100
assets/styles/bulma/helpers/typography.sass Normal file
View file

@ -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

122
assets/styles/bulma/helpers/visibility.sass Normal file
View file

@ -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

7
assets/styles/bulma/layout/_all.sass Executable file → Normal file
View file

@ -1,5 +1,6 @@
/* Bulma Layout */
@charset "utf-8"
@import "hero.sass"
@import "section.sass"
@import "footer.sass"
@import "hero"
@import "section"
@import "footer"

10
assets/styles/bulma/layout/footer.sass Executable file → Normal file
View file

@ -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

68
assets/styles/bulma/layout/hero.sass Executable file → Normal file
View file

@ -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

2
assets/styles/bulma/layout/section.sass Executable file → Normal file
View file

@ -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

13
assets/styles/bulma/utilities/_all.sass Executable file → Normal file
View file

@ -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"

6
assets/styles/bulma/utilities/animations.sass Executable file → Normal file
View file

@ -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."

20
assets/styles/bulma/utilities/controls.sass Executable file → Normal file
View file

@ -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

50
assets/styles/bulma/utilities/derived-variables.sass Executable file → Normal file
View file

@ -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

22
assets/styles/bulma/utilities/extends.sass Normal file
View file

@ -0,0 +1,22 @@
@import "mixins"
%control
+control
%unselectable
+unselectable
%arrow
+arrow
%block
+block
%delete
+delete
%loader
+loader
%overlay
+overlay

87
assets/styles/bulma/utilities/functions.sass Executable file → Normal file
View file

@ -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)

18
assets/styles/bulma/utilities/initial-variables.sass Executable file → Normal file
View file

@ -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

281
assets/styles/bulma/utilities/mixins.sass Executable file → Normal file
View file

@ -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

45
assets/styles/main.sass
View file

@ -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"