mirror of
https://github.com/nikdoof/website-hugo.git
synced 2025-12-14 17:22:17 +00:00
Update bulma, adjust font
This commit is contained in:
@@ -1,5 +0,0 @@
|
|||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "minireset.sass"
|
|
||||||
@import "generic.sass"
|
|
||||||
@import "helpers.sass"
|
|
||||||
@@ -1,281 +0,0 @@
|
|||||||
// 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
|
|
||||||
@extend %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
|
|
||||||
|
|
||||||
@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
|
|
||||||
|
|
||||||
@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
|
|
||||||
.has-background-#{$name}
|
|
||||||
background-color: $color !important
|
|
||||||
|
|
||||||
@each $name, $shade in $shades
|
|
||||||
.has-text-#{$name}
|
|
||||||
color: $shade !important
|
|
||||||
.has-background-#{$name}
|
|
||||||
background-color: $shade !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
|
|
||||||
|
|
||||||
// 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
|
|
||||||
|
|
||||||
.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
|
|
||||||
|
|
||||||
// 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
|
|
||||||
@extend %unselectable
|
|
||||||
|
|
||||||
.is-relative
|
|
||||||
position: relative !important
|
|
||||||
18
themes/lhs/assets/sass/bulma.sass
vendored
18
themes/lhs/assets/sass/bulma.sass
vendored
@@ -1,10 +1,10 @@
|
|||||||
@charset "utf-8"
|
@charset "utf-8"
|
||||||
/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
|
/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
|
||||||
@import "utilities/_all"
|
@import "bulma/utilities/_all"
|
||||||
@import "base/_all"
|
@import "bulma/base/_all"
|
||||||
@import "elements/_all"
|
@import "bulma/elements/_all"
|
||||||
@import "form/_all"
|
@import "bulma/form/_all"
|
||||||
@import "components/_all"
|
@import "bulma/components/_all"
|
||||||
@import "grid/_all"
|
@import "bulma/grid/_all"
|
||||||
@import "layout/_all"
|
@import "bulma/helpers/_all"
|
||||||
@import "helpers/_all"
|
@import "bulma/layout/_all"
|
||||||
|
|||||||
6
themes/lhs/assets/sass/bulma/base/_all.sass
Normal file
6
themes/lhs/assets/sass/bulma/base/_all.sass
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/* Bulma Base */
|
||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "minireset"
|
||||||
|
@import "generic"
|
||||||
|
@import "animations"
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
$body-background-color: $white !default
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$body-background-color: $scheme-main !default
|
||||||
$body-size: 16px !default
|
$body-size: 16px !default
|
||||||
$body-min-width: 300px !default
|
$body-min-width: 300px !default
|
||||||
$body-rendering: optimizeLegibility !default
|
$body-rendering: optimizeLegibility !default
|
||||||
@@ -52,6 +54,7 @@ section
|
|||||||
body,
|
body,
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
|
optgroup,
|
||||||
select,
|
select,
|
||||||
textarea
|
textarea
|
||||||
font-family: $body-family
|
font-family: $body-family
|
||||||
@@ -137,6 +140,6 @@ table
|
|||||||
th
|
th
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
&:not([align])
|
&:not([align])
|
||||||
text-align: left
|
text-align: inherit
|
||||||
th
|
th
|
||||||
color: $text-strong
|
color: $text-strong
|
||||||
1
themes/lhs/assets/sass/bulma/base/helpers.sass
Normal file
1
themes/lhs/assets/sass/bulma/base/helpers.sass
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
|
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
||||||
// Blocks
|
// Blocks
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
@@ -59,16 +59,10 @@ html
|
|||||||
|
|
||||||
// Media
|
// Media
|
||||||
img,
|
img,
|
||||||
embed,
|
|
||||||
iframe,
|
|
||||||
object,
|
|
||||||
video
|
video
|
||||||
height: auto
|
height: auto
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
|
|
||||||
audio
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
// Iframe
|
// Iframe
|
||||||
iframe
|
iframe
|
||||||
border: 0
|
border: 0
|
||||||
@@ -82,4 +76,4 @@ td,
|
|||||||
th
|
th
|
||||||
padding: 0
|
padding: 0
|
||||||
&:not([align])
|
&:not([align])
|
||||||
text-align: left
|
text-align: inherit
|
||||||
15
themes/lhs/assets/sass/bulma/components/_all.sass
Normal file
15
themes/lhs/assets/sass/bulma/components/_all.sass
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
/* Bulma Components */
|
||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "breadcrumb"
|
||||||
|
@import "card"
|
||||||
|
@import "dropdown"
|
||||||
|
@import "level"
|
||||||
|
@import "media"
|
||||||
|
@import "menu"
|
||||||
|
@import "message"
|
||||||
|
@import "modal"
|
||||||
|
@import "navbar"
|
||||||
|
@import "pagination"
|
||||||
|
@import "panel"
|
||||||
|
@import "tabs"
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$breadcrumb-item-color: $link !default
|
$breadcrumb-item-color: $link !default
|
||||||
$breadcrumb-item-hover-color: $link-hover !default
|
$breadcrumb-item-hover-color: $link-hover !default
|
||||||
$breadcrumb-item-active-color: $text-strong !default
|
$breadcrumb-item-active-color: $text-strong !default
|
||||||
@@ -5,7 +7,7 @@ $breadcrumb-item-active-color: $text-strong !default
|
|||||||
$breadcrumb-item-padding-vertical: 0 !default
|
$breadcrumb-item-padding-vertical: 0 !default
|
||||||
$breadcrumb-item-padding-horizontal: 0.75em !default
|
$breadcrumb-item-padding-horizontal: 0.75em !default
|
||||||
|
|
||||||
$breadcrumb-item-separator-color: $grey-light !default
|
$breadcrumb-item-separator-color: $border-hover !default
|
||||||
|
|
||||||
.breadcrumb
|
.breadcrumb
|
||||||
@extend %block
|
@extend %block
|
||||||
@@ -24,7 +26,7 @@ $breadcrumb-item-separator-color: $grey-light !default
|
|||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
&:first-child a
|
&:first-child a
|
||||||
padding-left: 0
|
+ltr-property("padding", 0, false)
|
||||||
&.is-active
|
&.is-active
|
||||||
a
|
a
|
||||||
color: $breadcrumb-item-active-color
|
color: $breadcrumb-item-active-color
|
||||||
@@ -41,9 +43,9 @@ $breadcrumb-item-separator-color: $grey-light !default
|
|||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
.icon
|
.icon
|
||||||
&:first-child
|
&:first-child
|
||||||
margin-right: 0.5em
|
+ltr-property("margin", 0.5em)
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-left: 0.5em
|
+ltr-property("margin", 0.5em, false)
|
||||||
// Alignment
|
// Alignment
|
||||||
&.is-centered
|
&.is-centered
|
||||||
ol,
|
ol,
|
||||||
@@ -1,30 +1,43 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$card-color: $text !default
|
$card-color: $text !default
|
||||||
$card-background-color: $white !default
|
$card-background-color: $scheme-main !default
|
||||||
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
$card-shadow: $shadow !default
|
||||||
|
$card-radius: 0.25rem !default
|
||||||
|
|
||||||
$card-header-background-color: transparent !default
|
$card-header-background-color: transparent !default
|
||||||
$card-header-color: $text-strong !default
|
$card-header-color: $text-strong !default
|
||||||
$card-header-padding: 0.75rem !default
|
$card-header-padding: 0.75rem 1rem !default
|
||||||
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
|
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
|
||||||
$card-header-weight: $weight-bold !default
|
$card-header-weight: $weight-bold !default
|
||||||
|
|
||||||
$card-content-background-color: transparent !default
|
$card-content-background-color: transparent !default
|
||||||
$card-content-padding: 1.5rem !default
|
$card-content-padding: 1.5rem !default
|
||||||
|
|
||||||
$card-footer-background-color: transparent !default
|
$card-footer-background-color: transparent !default
|
||||||
$card-footer-border-top: 1px solid $border !default
|
$card-footer-border-top: 1px solid $border-light !default
|
||||||
$card-footer-padding: 0.75rem !default
|
$card-footer-padding: 0.75rem !default
|
||||||
|
|
||||||
$card-media-margin: $block-spacing !default
|
$card-media-margin: $block-spacing !default
|
||||||
|
|
||||||
.card
|
.card
|
||||||
background-color: $card-background-color
|
background-color: $card-background-color
|
||||||
|
border-radius: $card-radius
|
||||||
box-shadow: $card-shadow
|
box-shadow: $card-shadow
|
||||||
color: $card-color
|
color: $card-color
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
position: relative
|
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
|
.card-header
|
||||||
|
@extend %card-item
|
||||||
background-color: $card-header-background-color
|
background-color: $card-header-background-color
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
box-shadow: $card-header-shadow
|
box-shadow: $card-header-shadow
|
||||||
@@ -41,6 +54,7 @@ $card-media-margin: $block-spacing !default
|
|||||||
justify-content: center
|
justify-content: center
|
||||||
|
|
||||||
.card-header-icon
|
.card-header-icon
|
||||||
|
+reset
|
||||||
align-items: center
|
align-items: center
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
display: flex
|
display: flex
|
||||||
@@ -50,12 +64,22 @@ $card-media-margin: $block-spacing !default
|
|||||||
.card-image
|
.card-image
|
||||||
display: block
|
display: block
|
||||||
position: relative
|
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
|
.card-content
|
||||||
|
@extend %card-item
|
||||||
background-color: $card-content-background-color
|
background-color: $card-content-background-color
|
||||||
padding: $card-content-padding
|
padding: $card-content-padding
|
||||||
|
|
||||||
.card-footer
|
.card-footer
|
||||||
|
@extend %card-item
|
||||||
background-color: $card-footer-background-color
|
background-color: $card-footer-background-color
|
||||||
border-top: $card-footer-border-top
|
border-top: $card-footer-border-top
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
@@ -70,7 +94,7 @@ $card-media-margin: $block-spacing !default
|
|||||||
justify-content: center
|
justify-content: center
|
||||||
padding: $card-footer-padding
|
padding: $card-footer-padding
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
border-right: $card-footer-border-top
|
+ltr-property("border", $card-footer-border-top)
|
||||||
|
|
||||||
// Combinations
|
// Combinations
|
||||||
|
|
||||||
@@ -1,21 +1,23 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$dropdown-menu-min-width: 12rem !default
|
$dropdown-menu-min-width: 12rem !default
|
||||||
|
|
||||||
$dropdown-content-background-color: $white !default
|
$dropdown-content-background-color: $scheme-main !default
|
||||||
$dropdown-content-arrow: $link !default
|
$dropdown-content-arrow: $link !default
|
||||||
$dropdown-content-offset: 4px !default
|
$dropdown-content-offset: 4px !default
|
||||||
$dropdown-content-padding-bottom: 0.5rem !default
|
$dropdown-content-padding-bottom: 0.5rem !default
|
||||||
$dropdown-content-padding-top: 0.5rem !default
|
$dropdown-content-padding-top: 0.5rem !default
|
||||||
$dropdown-content-radius: $radius !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: $shadow !default
|
||||||
$dropdown-content-z: 20 !default
|
$dropdown-content-z: 20 !default
|
||||||
|
|
||||||
$dropdown-item-color: $grey-dark !default
|
$dropdown-item-color: $text !default
|
||||||
$dropdown-item-hover-color: $black !default
|
$dropdown-item-hover-color: $scheme-invert !default
|
||||||
$dropdown-item-hover-background-color: $background !default
|
$dropdown-item-hover-background-color: $background !default
|
||||||
$dropdown-item-active-color: $link-invert !default
|
$dropdown-item-active-color: $link-invert !default
|
||||||
$dropdown-item-active-background-color: $link !default
|
$dropdown-item-active-background-color: $link !default
|
||||||
|
|
||||||
$dropdown-divider-background-color: $border !default
|
$dropdown-divider-background-color: $border-light !default
|
||||||
|
|
||||||
.dropdown
|
.dropdown
|
||||||
display: inline-flex
|
display: inline-flex
|
||||||
@@ -38,7 +40,7 @@ $dropdown-divider-background-color: $border !default
|
|||||||
|
|
||||||
.dropdown-menu
|
.dropdown-menu
|
||||||
display: none
|
display: none
|
||||||
left: 0
|
+ltr-position(0, false)
|
||||||
min-width: $dropdown-menu-min-width
|
min-width: $dropdown-menu-min-width
|
||||||
padding-top: $dropdown-content-offset
|
padding-top: $dropdown-content-offset
|
||||||
position: absolute
|
position: absolute
|
||||||
@@ -62,8 +64,8 @@ $dropdown-divider-background-color: $border !default
|
|||||||
|
|
||||||
a.dropdown-item,
|
a.dropdown-item,
|
||||||
button.dropdown-item
|
button.dropdown-item
|
||||||
padding-right: 3rem
|
+ltr-property("padding", 3rem)
|
||||||
text-align: left
|
text-align: inherit
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
width: 100%
|
width: 100%
|
||||||
&:hover
|
&:hover
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
$level-item-spacing: ($block-spacing / 2) !default
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$level-item-spacing: ($block-spacing * 0.5) !default
|
||||||
|
|
||||||
.level
|
.level
|
||||||
@extend %block
|
@extend %block
|
||||||
@@ -20,7 +22,7 @@ $level-item-spacing: ($block-spacing / 2) !default
|
|||||||
.level-item
|
.level-item
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
margin-right: $level-item-spacing
|
+ltr-property("margin", $level-item-spacing)
|
||||||
&:not(.is-narrow)
|
&:not(.is-narrow)
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
@@ -57,7 +59,7 @@ $level-item-spacing: ($block-spacing / 2) !default
|
|||||||
// Responsiveness
|
// Responsiveness
|
||||||
+tablet
|
+tablet
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-right: $level-item-spacing
|
+ltr-property("margin", $level-item-spacing)
|
||||||
|
|
||||||
.level-left
|
.level-left
|
||||||
align-items: center
|
align-items: center
|
||||||
59
themes/lhs/assets/sass/bulma/components/media.sass
Normal file
59
themes/lhs/assets/sass/bulma/components/media.sass
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
@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: inherit
|
||||||
|
.content:not(:last-child)
|
||||||
|
margin-bottom: $media-content-spacing
|
||||||
|
.media
|
||||||
|
border-top: $media-border-size solid $media-border-color
|
||||||
|
display: flex
|
||||||
|
padding-top: $media-level-1-spacing
|
||||||
|
.content:not(:last-child),
|
||||||
|
.control:not(:last-child)
|
||||||
|
margin-bottom: $media-level-1-content-spacing
|
||||||
|
.media
|
||||||
|
padding-top: $media-level-2-spacing
|
||||||
|
& + .media
|
||||||
|
margin-top: $media-level-2-spacing
|
||||||
|
& + .media
|
||||||
|
border-top: $media-border-size solid $media-border-color
|
||||||
|
margin-top: $media-spacing
|
||||||
|
padding-top: $media-spacing
|
||||||
|
// Sizes
|
||||||
|
&.is-large
|
||||||
|
& + .media
|
||||||
|
margin-top: $media-spacing-large
|
||||||
|
padding-top: $media-spacing-large
|
||||||
|
|
||||||
|
.media-left,
|
||||||
|
.media-right
|
||||||
|
flex-basis: auto
|
||||||
|
flex-grow: 0
|
||||||
|
flex-shrink: 0
|
||||||
|
|
||||||
|
.media-left
|
||||||
|
+ltr-property("margin", $media-spacing)
|
||||||
|
|
||||||
|
.media-right
|
||||||
|
+ltr-property("margin", $media-spacing, false)
|
||||||
|
|
||||||
|
.media-content
|
||||||
|
flex-basis: auto
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 1
|
||||||
|
text-align: inherit
|
||||||
|
|
||||||
|
+mobile
|
||||||
|
.media-content
|
||||||
|
overflow-x: auto
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$menu-item-color: $text !default
|
$menu-item-color: $text !default
|
||||||
$menu-item-radius: $radius-small !default
|
$menu-item-radius: $radius-small !default
|
||||||
$menu-item-hover-color: $text-strong !default
|
$menu-item-hover-color: $text-strong !default
|
||||||
@@ -42,9 +44,9 @@ $menu-label-spacing: 1em !default
|
|||||||
color: $menu-item-active-color
|
color: $menu-item-active-color
|
||||||
li
|
li
|
||||||
ul
|
ul
|
||||||
border-left: $menu-list-border-left
|
+ltr-property("border", $menu-list-border-left, false)
|
||||||
margin: $menu-nested-list-margin
|
margin: $menu-nested-list-margin
|
||||||
padding-left: $menu-nested-list-padding-left
|
+ltr-property("padding", $menu-nested-list-padding-left, false)
|
||||||
|
|
||||||
.menu-label
|
.menu-label
|
||||||
color: $menu-label-color
|
color: $menu-label-color
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$message-background-color: $background !default
|
$message-background-color: $background !default
|
||||||
$message-radius: $radius !default
|
$message-radius: $radius !default
|
||||||
|
|
||||||
@@ -13,7 +15,7 @@ $message-body-color: $text !default
|
|||||||
$message-body-padding: 1.25em 1.5em !default
|
$message-body-padding: 1.25em 1.5em !default
|
||||||
$message-body-radius: $radius !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-body-pre-code-background-color: transparent !default
|
||||||
|
|
||||||
$message-header-body-border-width: 0 !default
|
$message-header-body-border-width: 0 !default
|
||||||
@@ -37,21 +39,33 @@ $message-colors: $colors !default
|
|||||||
&.is-large
|
&.is-large
|
||||||
font-size: $size-large
|
font-size: $size-large
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $message-colors
|
@each $name, $components in $message-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($components, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($components, 2)
|
||||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
|
$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)
|
$color-luminance: colorLuminance($color)
|
||||||
$darken-percentage: $color-luminance * 70%
|
$darken-percentage: $color-luminance * 70%
|
||||||
$desaturate-percentage: $color-luminance * 30%
|
$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}
|
&.is-#{$name}
|
||||||
background-color: lighten($color, $color-lightning)
|
background-color: $color-light
|
||||||
.message-header
|
.message-header
|
||||||
background-color: $color
|
background-color: $color
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.message-body
|
.message-body
|
||||||
border-color: $color
|
border-color: $color
|
||||||
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
|
color: $color-dark
|
||||||
|
|
||||||
.message-header
|
.message-header
|
||||||
align-items: center
|
align-items: center
|
||||||
@@ -67,7 +81,7 @@ $message-colors: $colors !default
|
|||||||
.delete
|
.delete
|
||||||
flex-grow: 0
|
flex-grow: 0
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
margin-left: 0.75em
|
+ltr-property("margin", 0.75em, false)
|
||||||
& + .message-body
|
& + .message-body
|
||||||
border-width: $message-header-body-border-width
|
border-width: $message-header-body-border-width
|
||||||
border-top-left-radius: 0
|
border-top-left-radius: 0
|
||||||
@@ -1,6 +1,8 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$modal-z: 40 !default
|
$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-width: 640px !default
|
||||||
$modal-content-margin-mobile: 20px !default
|
$modal-content-margin-mobile: 20px !default
|
||||||
@@ -25,9 +27,11 @@ $modal-card-title-size: $size-4 !default
|
|||||||
$modal-card-foot-radius: $radius-large !default
|
$modal-card-foot-radius: $radius-large !default
|
||||||
$modal-card-foot-border-top: 1px solid $border !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-card-body-padding: 20px !default
|
||||||
|
|
||||||
|
$modal-breakpoint: $tablet !default
|
||||||
|
|
||||||
.modal
|
.modal
|
||||||
@extend %overlay
|
@extend %overlay
|
||||||
align-items: center
|
align-items: center
|
||||||
@@ -53,7 +57,7 @@ $modal-card-body-padding: 20px !default
|
|||||||
position: relative
|
position: relative
|
||||||
width: 100%
|
width: 100%
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
+tablet
|
+from($modal-breakpoint)
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
max-height: calc(100vh - #{$modal-content-spacing-tablet})
|
max-height: calc(100vh - #{$modal-content-spacing-tablet})
|
||||||
width: $modal-content-width
|
width: $modal-content-width
|
||||||
@@ -63,7 +67,7 @@ $modal-card-body-padding: 20px !default
|
|||||||
background: none
|
background: none
|
||||||
height: $modal-close-dimensions
|
height: $modal-close-dimensions
|
||||||
position: fixed
|
position: fixed
|
||||||
right: $modal-close-right
|
+ltr-position($modal-close-right)
|
||||||
top: $modal-close-top
|
top: $modal-close-top
|
||||||
width: $modal-close-dimensions
|
width: $modal-close-dimensions
|
||||||
|
|
||||||
@@ -102,7 +106,7 @@ $modal-card-body-padding: 20px !default
|
|||||||
border-top: $modal-card-foot-border-top
|
border-top: $modal-card-foot-border-top
|
||||||
.button
|
.button
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-right: 0.5em
|
+ltr-property("margin", 0.5em)
|
||||||
|
|
||||||
.modal-card-body
|
.modal-card-body
|
||||||
+overflow-touch
|
+overflow-touch
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
$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-size: 0 2px 0 0 !default
|
||||||
$navbar-box-shadow-color: $background !default
|
$navbar-box-shadow-color: $background !default
|
||||||
$navbar-height: 3.25rem !default
|
$navbar-height: 3.25rem !default
|
||||||
@@ -7,10 +9,10 @@ $navbar-padding-horizontal: 2rem !default
|
|||||||
$navbar-z: 30 !default
|
$navbar-z: 30 !default
|
||||||
$navbar-fixed-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-color: $link !default
|
||||||
$navbar-item-hover-background-color: $white-bis !default
|
$navbar-item-hover-background-color: $scheme-main-bis !default
|
||||||
$navbar-item-active-color: $black !default
|
$navbar-item-active-color: $scheme-invert !default
|
||||||
$navbar-item-active-background-color: transparent !default
|
$navbar-item-active-background-color: transparent !default
|
||||||
$navbar-item-img-max-height: 1.75rem !default
|
$navbar-item-img-max-height: 1.75rem !default
|
||||||
|
|
||||||
@@ -24,7 +26,7 @@ $navbar-tab-active-border-bottom-color: $link !default
|
|||||||
$navbar-tab-active-border-bottom-style: solid !default
|
$navbar-tab-active-border-bottom-style: solid !default
|
||||||
$navbar-tab-active-border-bottom-width: 3px !default
|
$navbar-tab-active-border-bottom-width: 3px !default
|
||||||
|
|
||||||
$navbar-dropdown-background-color: $white !default
|
$navbar-dropdown-background-color: $scheme-main !default
|
||||||
$navbar-dropdown-border-top: 2px solid $border !default
|
$navbar-dropdown-border-top: 2px solid $border !default
|
||||||
$navbar-dropdown-offset: -4px !default
|
$navbar-dropdown-offset: -4px !default
|
||||||
$navbar-dropdown-arrow: $link !default
|
$navbar-dropdown-arrow: $link !default
|
||||||
@@ -32,9 +34,9 @@ $navbar-dropdown-radius: $radius-large !default
|
|||||||
$navbar-dropdown-z: 20 !default
|
$navbar-dropdown-z: 20 !default
|
||||||
|
|
||||||
$navbar-dropdown-boxed-radius: $radius-large !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-hover-background-color: $background !default
|
||||||
$navbar-dropdown-item-active-color: $link !default
|
$navbar-dropdown-item-active-color: $link !default
|
||||||
$navbar-dropdown-item-active-background-color: $background !default
|
$navbar-dropdown-item-active-background-color: $background !default
|
||||||
@@ -46,6 +48,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
|
|||||||
|
|
||||||
$navbar-breakpoint: $desktop !default
|
$navbar-breakpoint: $desktop !default
|
||||||
|
|
||||||
|
$navbar-colors: $colors !default
|
||||||
|
|
||||||
=navbar-fixed
|
=navbar-fixed
|
||||||
left: 0
|
left: 0
|
||||||
position: fixed
|
position: fixed
|
||||||
@@ -57,7 +61,7 @@ $navbar-breakpoint: $desktop !default
|
|||||||
min-height: $navbar-height
|
min-height: $navbar-height
|
||||||
position: relative
|
position: relative
|
||||||
z-index: $navbar-z
|
z-index: $navbar-z
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $navbar-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
@@ -72,7 +76,7 @@ $navbar-breakpoint: $desktop !default
|
|||||||
&:focus,
|
&:focus,
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: darken($color, 5%)
|
background-color: bulmaDarken($color, 5%)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.navbar-link
|
.navbar-link
|
||||||
&::after
|
&::after
|
||||||
@@ -90,7 +94,7 @@ $navbar-breakpoint: $desktop !default
|
|||||||
&:focus,
|
&:focus,
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: darken($color, 5%)
|
background-color: bulmaDarken($color, 5%)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.navbar-link
|
.navbar-link
|
||||||
&::after
|
&::after
|
||||||
@@ -98,7 +102,7 @@ $navbar-breakpoint: $desktop !default
|
|||||||
.navbar-item.has-dropdown:focus .navbar-link,
|
.navbar-item.has-dropdown:focus .navbar-link,
|
||||||
.navbar-item.has-dropdown:hover .navbar-link,
|
.navbar-item.has-dropdown:hover .navbar-link,
|
||||||
.navbar-item.has-dropdown.is-active .navbar-link
|
.navbar-item.has-dropdown.is-active .navbar-link
|
||||||
background-color: darken($color, 5%)
|
background-color: bulmaDarken($color, 5%)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.navbar-dropdown
|
.navbar-dropdown
|
||||||
a.navbar-item
|
a.navbar-item
|
||||||
@@ -149,9 +153,10 @@ body
|
|||||||
overflow-y: hidden
|
overflow-y: hidden
|
||||||
|
|
||||||
.navbar-burger
|
.navbar-burger
|
||||||
|
@extend %reset
|
||||||
color: $navbar-burger-color
|
color: $navbar-burger-color
|
||||||
+hamburger($navbar-height)
|
+hamburger($navbar-height)
|
||||||
margin-left: auto
|
+ltr-property("margin", auto, false)
|
||||||
|
|
||||||
.navbar-menu
|
.navbar-menu
|
||||||
display: none
|
display: none
|
||||||
@@ -179,7 +184,6 @@ a.navbar-item,
|
|||||||
color: $navbar-item-hover-color
|
color: $navbar-item-hover-color
|
||||||
|
|
||||||
.navbar-item
|
.navbar-item
|
||||||
display: block
|
|
||||||
flex-grow: 0
|
flex-grow: 0
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
img
|
img
|
||||||
@@ -210,12 +214,12 @@ a.navbar-item,
|
|||||||
flex-shrink: 1
|
flex-shrink: 1
|
||||||
|
|
||||||
.navbar-link:not(.is-arrowless)
|
.navbar-link:not(.is-arrowless)
|
||||||
padding-right: 2.5em
|
+ltr-property("padding", 2.5em)
|
||||||
&::after
|
&::after
|
||||||
@extend %arrow
|
@extend %arrow
|
||||||
border-color: $navbar-dropdown-arrow
|
border-color: $navbar-dropdown-arrow
|
||||||
margin-top: -0.375em
|
margin-top: -0.375em
|
||||||
right: 1.125em
|
+ltr-position(1.125em)
|
||||||
|
|
||||||
.navbar-dropdown
|
.navbar-dropdown
|
||||||
font-size: 0.875rem
|
font-size: 0.875rem
|
||||||
@@ -245,7 +249,7 @@ a.navbar-item,
|
|||||||
display: none
|
display: none
|
||||||
.navbar-menu
|
.navbar-menu
|
||||||
background-color: $navbar-background-color
|
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
|
padding: 0.5rem 0
|
||||||
&.is-active
|
&.is-active
|
||||||
display: block
|
display: block
|
||||||
@@ -257,7 +261,7 @@ a.navbar-item,
|
|||||||
&.is-fixed-bottom-touch
|
&.is-fixed-bottom-touch
|
||||||
bottom: 0
|
bottom: 0
|
||||||
&.has-shadow
|
&.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
|
&.is-fixed-top-touch
|
||||||
top: 0
|
top: 0
|
||||||
&.is-fixed-top,
|
&.is-fixed-top,
|
||||||
@@ -320,7 +324,6 @@ a.navbar-item,
|
|||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
.navbar-item
|
.navbar-item
|
||||||
display: flex
|
|
||||||
&.has-dropdown
|
&.has-dropdown
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
&.has-dropdown-up
|
&.has-dropdown-up
|
||||||
@@ -331,7 +334,7 @@ a.navbar-item,
|
|||||||
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
|
||||||
border-top: none
|
border-top: none
|
||||||
bottom: 100%
|
bottom: 100%
|
||||||
box-shadow: 0 -8px 8px rgba($black, 0.1)
|
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
|
||||||
top: auto
|
top: auto
|
||||||
&.is-active,
|
&.is-active,
|
||||||
&.is-hoverable:focus,
|
&.is-hoverable:focus,
|
||||||
@@ -349,19 +352,19 @@ a.navbar-item,
|
|||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
.navbar-start
|
.navbar-start
|
||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
margin-right: auto
|
+ltr-property("margin", auto)
|
||||||
.navbar-end
|
.navbar-end
|
||||||
justify-content: flex-end
|
justify-content: flex-end
|
||||||
margin-left: auto
|
+ltr-property("margin", auto, false)
|
||||||
.navbar-dropdown
|
.navbar-dropdown
|
||||||
background-color: $navbar-dropdown-background-color
|
background-color: $navbar-dropdown-background-color
|
||||||
border-bottom-left-radius: $navbar-dropdown-radius
|
border-bottom-left-radius: $navbar-dropdown-radius
|
||||||
border-bottom-right-radius: $navbar-dropdown-radius
|
border-bottom-right-radius: $navbar-dropdown-radius
|
||||||
border-top: $navbar-dropdown-border-top
|
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
|
display: none
|
||||||
font-size: 0.875rem
|
font-size: 0.875rem
|
||||||
left: 0
|
+ltr-position(0, false)
|
||||||
min-width: 100%
|
min-width: 100%
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 100%
|
top: 100%
|
||||||
@@ -370,7 +373,7 @@ a.navbar-item,
|
|||||||
padding: 0.375rem 1rem
|
padding: 0.375rem 1rem
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
a.navbar-item
|
a.navbar-item
|
||||||
padding-right: 3rem
|
+ltr-property("padding", 3rem)
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover
|
&:hover
|
||||||
background-color: $navbar-dropdown-item-hover-background-color
|
background-color: $navbar-dropdown-item-hover-background-color
|
||||||
@@ -398,9 +401,9 @@ a.navbar-item,
|
|||||||
.navbar > .container,
|
.navbar > .container,
|
||||||
.container > .navbar
|
.container > .navbar
|
||||||
.navbar-brand
|
.navbar-brand
|
||||||
margin-left: -.75rem
|
+ltr-property("margin", -.75rem, false)
|
||||||
.navbar-menu
|
.navbar-menu
|
||||||
margin-right: -.75rem
|
+ltr-property("margin", -.75rem)
|
||||||
// Fixed navbar
|
// Fixed navbar
|
||||||
.navbar
|
.navbar
|
||||||
&.is-fixed-bottom-desktop,
|
&.is-fixed-bottom-desktop,
|
||||||
@@ -409,7 +412,7 @@ a.navbar-item,
|
|||||||
&.is-fixed-bottom-desktop
|
&.is-fixed-bottom-desktop
|
||||||
bottom: 0
|
bottom: 0
|
||||||
&.has-shadow
|
&.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
|
&.is-fixed-top-desktop
|
||||||
top: 0
|
top: 0
|
||||||
html,
|
html,
|
||||||
@@ -1,5 +1,8 @@
|
|||||||
$pagination-color: $grey-darker !default
|
@import "../utilities/controls"
|
||||||
$pagination-border-color: $grey-lighter !default
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$pagination-color: $text-strong !default
|
||||||
|
$pagination-border-color: $border !default
|
||||||
$pagination-margin: -0.25rem !default
|
$pagination-margin: -0.25rem !default
|
||||||
$pagination-min-width: $control-height !default
|
$pagination-min-width: $control-height !default
|
||||||
|
|
||||||
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default
|
|||||||
$pagination-item-padding-left: 0.5em !default
|
$pagination-item-padding-left: 0.5em !default
|
||||||
$pagination-item-padding-right: 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-color: $link-hover !default
|
||||||
$pagination-hover-border-color: $link-hover-border !default
|
$pagination-hover-border-color: $link-hover-border !default
|
||||||
|
|
||||||
@@ -17,9 +23,9 @@ $pagination-focus-border-color: $link-focus-border !default
|
|||||||
$pagination-active-color: $link-active !default
|
$pagination-active-color: $link-active !default
|
||||||
$pagination-active-border-color: $link-active-border !default
|
$pagination-active-border-color: $link-active-border !default
|
||||||
|
|
||||||
$pagination-disabled-color: $grey !default
|
$pagination-disabled-color: $text-light !default
|
||||||
$pagination-disabled-background-color: $grey-lighter !default
|
$pagination-disabled-background-color: $border !default
|
||||||
$pagination-disabled-border-color: $grey-lighter !default
|
$pagination-disabled-border-color: $border !default
|
||||||
|
|
||||||
$pagination-current-color: $link-invert !default
|
$pagination-current-color: $link-invert !default
|
||||||
$pagination-current-background-color: $link !default
|
$pagination-current-background-color: $link !default
|
||||||
@@ -27,9 +33,10 @@ $pagination-current-border-color: $link !default
|
|||||||
|
|
||||||
$pagination-ellipsis-color: $grey-light !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
|
.pagination
|
||||||
|
@extend %block
|
||||||
font-size: $size-normal
|
font-size: $size-normal
|
||||||
margin: $pagination-margin
|
margin: $pagination-margin
|
||||||
// Sizes
|
// Sizes
|
||||||
@@ -81,7 +88,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
|||||||
border-color: $pagination-focus-border-color
|
border-color: $pagination-focus-border-color
|
||||||
&:active
|
&:active
|
||||||
box-shadow: $pagination-shadow-inset
|
box-shadow: $pagination-shadow-inset
|
||||||
&[disabled]
|
&[disabled],
|
||||||
|
&.is-disabled
|
||||||
background-color: $pagination-disabled-background-color
|
background-color: $pagination-disabled-background-color
|
||||||
border-color: $pagination-disabled-border-color
|
border-color: $pagination-disabled-border-color
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
@@ -90,8 +98,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
|||||||
|
|
||||||
.pagination-previous,
|
.pagination-previous,
|
||||||
.pagination-next
|
.pagination-next
|
||||||
padding-left: 0.75em
|
padding-left: $pagination-nav-padding-left
|
||||||
padding-right: 0.75em
|
padding-right: $pagination-nav-padding-right
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
|
|
||||||
.pagination-link
|
.pagination-link
|
||||||
@@ -106,6 +114,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
|||||||
|
|
||||||
.pagination-list
|
.pagination-list
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
|
li
|
||||||
|
list-style: none
|
||||||
|
|
||||||
+mobile
|
+mobile
|
||||||
.pagination
|
.pagination
|
||||||
@@ -125,12 +135,20 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
|||||||
flex-shrink: 1
|
flex-shrink: 1
|
||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
order: 1
|
order: 1
|
||||||
|
.pagination-previous,
|
||||||
|
.pagination-next,
|
||||||
|
.pagination-link,
|
||||||
|
.pagination-ellipsis
|
||||||
|
margin-bottom: 0
|
||||||
|
margin-top: 0
|
||||||
.pagination-previous
|
.pagination-previous
|
||||||
order: 2
|
order: 2
|
||||||
.pagination-next
|
.pagination-next
|
||||||
order: 3
|
order: 3
|
||||||
.pagination
|
.pagination
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
|
margin-bottom: 0
|
||||||
|
margin-top: 0
|
||||||
&.is-centered
|
&.is-centered
|
||||||
.pagination-previous
|
.pagination-previous
|
||||||
order: 1
|
order: 1
|
||||||
@@ -1,13 +1,17 @@
|
|||||||
$panel-margin: $block-spacing !default
|
@import "../utilities/mixins"
|
||||||
$panel-item-border: 1px solid $border !default
|
|
||||||
|
|
||||||
$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: $shadow !default
|
||||||
|
|
||||||
|
$panel-heading-background-color: $border-light !default
|
||||||
$panel-heading-color: $text-strong !default
|
$panel-heading-color: $text-strong !default
|
||||||
$panel-heading-line-height: 1.25 !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-radius: $radius !default
|
||||||
$panel-heading-size: 1.25em !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-tabs-font-size: 0.875em !default
|
||||||
$panel-tab-border-bottom: 1px solid $border !default
|
$panel-tab-border-bottom: 1px solid $border !default
|
||||||
@@ -24,24 +28,35 @@ $panel-block-active-color: $link-active !default
|
|||||||
$panel-block-active-icon-color: $link !default
|
$panel-block-active-icon-color: $link !default
|
||||||
|
|
||||||
$panel-icon-color: $text-light !default
|
$panel-icon-color: $text-light !default
|
||||||
|
$panel-colors: $colors !default
|
||||||
|
|
||||||
.panel
|
.panel
|
||||||
|
border-radius: $panel-radius
|
||||||
|
box-shadow: $panel-shadow
|
||||||
font-size: $size-normal
|
font-size: $size-normal
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: $panel-margin
|
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-tabs,
|
||||||
.panel-block
|
.panel-block
|
||||||
|
&:not(:last-child)
|
||||||
border-bottom: $panel-item-border
|
border-bottom: $panel-item-border
|
||||||
border-left: $panel-item-border
|
|
||||||
border-right: $panel-item-border
|
|
||||||
&:first-child
|
|
||||||
border-top: $panel-item-border
|
|
||||||
|
|
||||||
.panel-heading
|
.panel-heading
|
||||||
background-color: $panel-heading-background-color
|
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
|
color: $panel-heading-color
|
||||||
font-size: $panel-heading-size
|
font-size: $panel-heading-size
|
||||||
font-weight: $panel-heading-weight
|
font-weight: $panel-heading-weight
|
||||||
@@ -75,7 +90,7 @@ $panel-icon-color: $text-light !default
|
|||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
padding: 0.5em 0.75em
|
padding: 0.5em 0.75em
|
||||||
input[type="checkbox"]
|
input[type="checkbox"]
|
||||||
margin-right: 0.75em
|
+ltr-property("margin", 0.75em)
|
||||||
& > .control
|
& > .control
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 1
|
flex-shrink: 1
|
||||||
@@ -87,6 +102,9 @@ $panel-icon-color: $text-light !default
|
|||||||
color: $panel-block-active-color
|
color: $panel-block-active-color
|
||||||
.panel-icon
|
.panel-icon
|
||||||
color: $panel-block-active-icon-color
|
color: $panel-block-active-icon-color
|
||||||
|
&:last-child
|
||||||
|
border-bottom-left-radius: $panel-radius
|
||||||
|
border-bottom-right-radius: $panel-radius
|
||||||
|
|
||||||
a.panel-block,
|
a.panel-block,
|
||||||
label.panel-block
|
label.panel-block
|
||||||
@@ -97,7 +115,7 @@ label.panel-block
|
|||||||
.panel-icon
|
.panel-icon
|
||||||
+fa(14px, 1em)
|
+fa(14px, 1em)
|
||||||
color: $panel-icon-color
|
color: $panel-icon-color
|
||||||
margin-right: 0.75em
|
+ltr-property("margin", 0.75em)
|
||||||
.fa
|
.fa
|
||||||
font-size: inherit
|
font-size: inherit
|
||||||
line-height: inherit
|
line-height: inherit
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$tabs-border-bottom-color: $border !default
|
$tabs-border-bottom-color: $border !default
|
||||||
$tabs-border-bottom-style: solid !default
|
$tabs-border-bottom-style: solid !default
|
||||||
$tabs-border-bottom-width: 1px !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-background-color: $background !default
|
||||||
$tabs-boxed-link-hover-border-bottom-color: $border !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-color: $border !default
|
||||||
$tabs-boxed-link-active-border-bottom-color: transparent !default
|
$tabs-boxed-link-active-border-bottom-color: transparent !default
|
||||||
|
|
||||||
@@ -78,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
|
|||||||
padding-left: 0.75em
|
padding-left: 0.75em
|
||||||
.icon
|
.icon
|
||||||
&:first-child
|
&:first-child
|
||||||
margin-right: 0.5em
|
+ltr-property("margin", 0.5em)
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-left: 0.5em
|
+ltr-property("margin", 0.5em, false)
|
||||||
// Alignment
|
// Alignment
|
||||||
&.is-centered
|
&.is-centered
|
||||||
ul
|
ul
|
||||||
@@ -92,7 +94,10 @@ $tabs-toggle-link-active-color: $link-invert !default
|
|||||||
&.is-boxed
|
&.is-boxed
|
||||||
a
|
a
|
||||||
border: 1px solid transparent
|
border: 1px solid transparent
|
||||||
|
+ltr
|
||||||
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
|
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
|
&:hover
|
||||||
background-color: $tabs-boxed-link-hover-background-color
|
background-color: $tabs-boxed-link-hover-background-color
|
||||||
border-bottom-color: $tabs-boxed-link-hover-border-bottom-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
|
z-index: 2
|
||||||
li
|
li
|
||||||
& + li
|
& + li
|
||||||
margin-left: -#{$tabs-toggle-link-border-width}
|
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
|
||||||
&:first-child a
|
&: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
|
&: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
|
&.is-active
|
||||||
a
|
a
|
||||||
background-color: $tabs-toggle-link-active-background-color
|
background-color: $tabs-toggle-link-active-background-color
|
||||||
@@ -135,13 +150,23 @@ $tabs-toggle-link-active-color: $link-invert !default
|
|||||||
&.is-toggle-rounded
|
&.is-toggle-rounded
|
||||||
li
|
li
|
||||||
&:first-child a
|
&:first-child a
|
||||||
|
+ltr
|
||||||
border-bottom-left-radius: $radius-rounded
|
border-bottom-left-radius: $radius-rounded
|
||||||
border-top-left-radius: $radius-rounded
|
border-top-left-radius: $radius-rounded
|
||||||
padding-left: 1.25em
|
padding-left: 1.25em
|
||||||
&:last-child a
|
+rtl
|
||||||
border-bottom-right-radius: $radius-rounded
|
border-bottom-right-radius: $radius-rounded
|
||||||
border-top-right-radius: $radius-rounded
|
border-top-right-radius: $radius-rounded
|
||||||
padding-right: 1.25em
|
padding-right: 1.25em
|
||||||
|
&:last-child a
|
||||||
|
+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
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
16
themes/lhs/assets/sass/bulma/elements/_all.sass
Normal file
16
themes/lhs/assets/sass/bulma/elements/_all.sass
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
/* Bulma Elements */
|
||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "box"
|
||||||
|
@import "button"
|
||||||
|
@import "container"
|
||||||
|
@import "content"
|
||||||
|
@import "icon"
|
||||||
|
@import "image"
|
||||||
|
@import "notification"
|
||||||
|
@import "progress"
|
||||||
|
@import "table"
|
||||||
|
@import "tag"
|
||||||
|
@import "title"
|
||||||
|
|
||||||
|
@import "other"
|
||||||
@@ -1,11 +1,13 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$box-color: $text !default
|
$box-color: $text !default
|
||||||
$box-background-color: $white !default
|
$box-background-color: $scheme-main !default
|
||||||
$box-radius: $radius-large !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: $shadow !default
|
||||||
$box-padding: 1.25rem !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-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($black, 0.2), 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
|
.box
|
||||||
@extend %block
|
@extend %block
|
||||||
@@ -1,12 +1,15 @@
|
|||||||
$button-color: $grey-darker !default
|
@import "../utilities/controls"
|
||||||
$button-background-color: $white !default
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$button-color: $text-strong !default
|
||||||
|
$button-background-color: $scheme-main !default
|
||||||
$button-family: false !default
|
$button-family: false !default
|
||||||
|
|
||||||
$button-border-color: $grey-lighter !default
|
$button-border-color: $border !default
|
||||||
$button-border-width: $control-border-width !default
|
$button-border-width: $control-border-width !default
|
||||||
|
|
||||||
$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
|
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
|
||||||
$button-padding-horizontal: 0.75em !default
|
$button-padding-horizontal: 1em !default
|
||||||
|
|
||||||
$button-hover-color: $link-hover !default
|
$button-hover-color: $link-hover !default
|
||||||
$button-hover-border-color: $link-hover-border !default
|
$button-hover-border-color: $link-hover-border !default
|
||||||
@@ -14,26 +17,38 @@ $button-hover-border-color: $link-hover-border !default
|
|||||||
$button-focus-color: $link-focus !default
|
$button-focus-color: $link-focus !default
|
||||||
$button-focus-border-color: $link-focus-border !default
|
$button-focus-border-color: $link-focus-border !default
|
||||||
$button-focus-box-shadow-size: 0 0 0 0.125em !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-color: $link-active !default
|
||||||
$button-active-border-color: $link-active-border !default
|
$button-active-border-color: $link-active-border !default
|
||||||
|
|
||||||
$button-text-color: $text !default
|
$button-text-color: $text !default
|
||||||
|
$button-text-decoration: underline !default
|
||||||
$button-text-hover-background-color: $background !default
|
$button-text-hover-background-color: $background !default
|
||||||
$button-text-hover-color: $text-strong !default
|
$button-text-hover-color: $text-strong !default
|
||||||
|
|
||||||
$button-disabled-background-color: $white !default
|
$button-ghost-background: none !default
|
||||||
$button-disabled-border-color: $grey-lighter !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-shadow: none !default
|
||||||
$button-disabled-opacity: 0.5 !default
|
$button-disabled-opacity: 0.5 !default
|
||||||
|
|
||||||
$button-static-color: $grey !default
|
$button-static-color: $text-light !default
|
||||||
$button-static-background-color: $white-ter !default
|
$button-static-background-color: $scheme-main-ter !default
|
||||||
$button-static-border-color: $grey-lighter !default
|
$button-static-border-color: $border !default
|
||||||
|
|
||||||
|
$button-colors: $colors !default
|
||||||
|
$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default
|
||||||
|
|
||||||
// The button sizes use mixins so they can be used at different breakpoints
|
// The button sizes use mixins so they can be used at different breakpoints
|
||||||
=button-small
|
=button-small
|
||||||
|
&:not(.is-rounded)
|
||||||
border-radius: $radius-small
|
border-radius: $radius-small
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
=button-normal
|
=button-normal
|
||||||
@@ -70,14 +85,14 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
height: 1.5em
|
height: 1.5em
|
||||||
width: 1.5em
|
width: 1.5em
|
||||||
&:first-child:not(:last-child)
|
&:first-child:not(:last-child)
|
||||||
margin-left: calc(-0.375em - #{$button-border-width})
|
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
|
||||||
margin-right: 0.1875em
|
+ltr-property("margin", $button-padding-horizontal * 0.25)
|
||||||
&:last-child:not(:first-child)
|
&:last-child:not(:first-child)
|
||||||
margin-left: 0.1875em
|
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
|
||||||
margin-right: calc(-0.375em - #{$button-border-width})
|
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
|
||||||
&:first-child:last-child
|
&:first-child:last-child
|
||||||
margin-left: calc(-0.375em - #{$button-border-width})
|
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
||||||
margin-right: calc(-0.375em - #{$button-border-width})
|
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
|
||||||
// States
|
// States
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered
|
&.is-hovered
|
||||||
@@ -98,7 +113,7 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
color: $button-text-color
|
color: $button-text-color
|
||||||
text-decoration: underline
|
text-decoration: $button-text-decoration
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered,
|
&.is-hovered,
|
||||||
&:focus,
|
&:focus,
|
||||||
@@ -107,14 +122,23 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
color: $button-text-hover-color
|
color: $button-text-hover-color
|
||||||
&:active,
|
&:active,
|
||||||
&.is-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
|
color: $button-text-hover-color
|
||||||
&[disabled],
|
&[disabled],
|
||||||
fieldset[disabled] &
|
fieldset[disabled] &
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
box-shadow: none
|
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: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
@@ -123,7 +147,7 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
color: $color-invert
|
color: $color-invert
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered
|
&.is-hovered
|
||||||
background-color: darken($color, 2.5%)
|
background-color: bulmaDarken($color, 2.5%)
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&:focus,
|
&:focus,
|
||||||
@@ -131,23 +155,23 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
border-color: transparent
|
border-color: transparent
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&:not(:active)
|
&: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,
|
&:active,
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: darken($color, 5%)
|
background-color: bulmaDarken($color, 5%)
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&[disabled],
|
&[disabled],
|
||||||
fieldset[disabled] &
|
fieldset[disabled] &
|
||||||
background-color: $color
|
background-color: $color
|
||||||
border-color: transparent
|
border-color: $color
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
&.is-inverted
|
&.is-inverted
|
||||||
background-color: $color-invert
|
background-color: $color-invert
|
||||||
color: $color
|
color: $color
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered
|
&.is-hovered
|
||||||
background-color: darken($color-invert, 5%)
|
background-color: bulmaDarken($color-invert, 5%)
|
||||||
&[disabled],
|
&[disabled],
|
||||||
fieldset[disabled] &
|
fieldset[disabled] &
|
||||||
background-color: $color-invert
|
background-color: $color-invert
|
||||||
@@ -206,6 +230,23 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
border-color: $color-invert
|
border-color: $color-invert
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
color: $color-invert
|
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
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
+button-small
|
+button-small
|
||||||
@@ -240,8 +281,8 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
pointer-events: none
|
pointer-events: none
|
||||||
&.is-rounded
|
&.is-rounded
|
||||||
border-radius: $radius-rounded
|
border-radius: $radius-rounded
|
||||||
padding-left: 1em
|
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
|
||||||
padding-right: 1em
|
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
|
||||||
|
|
||||||
.buttons
|
.buttons
|
||||||
align-items: center
|
align-items: center
|
||||||
@@ -251,7 +292,7 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
.button
|
.button
|
||||||
margin-bottom: 0.5rem
|
margin-bottom: 0.5rem
|
||||||
&:not(:last-child):not(.is-fullwidth)
|
&:not(:last-child):not(.is-fullwidth)
|
||||||
margin-right: 0.5rem
|
+ltr-property("margin", 0.5rem)
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom: -0.5rem
|
margin-bottom: -0.5rem
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
@@ -274,9 +315,9 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
border-bottom-right-radius: 0
|
border-bottom-right-radius: 0
|
||||||
border-top-right-radius: 0
|
border-top-right-radius: 0
|
||||||
margin-right: -1px
|
+ltr-property("margin", -1px)
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-right: 0
|
+ltr-property("margin", 0)
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered
|
&.is-hovered
|
||||||
z-index: 2
|
z-index: 2
|
||||||
@@ -303,3 +344,14 @@ $button-static-border-color: $grey-lighter !default
|
|||||||
.button:not(.is-fullwidth)
|
.button:not(.is-fullwidth)
|
||||||
margin-left: 0.25rem
|
margin-left: 0.25rem
|
||||||
margin-right: 0.25rem
|
margin-right: 0.25rem
|
||||||
|
|
||||||
|
@each $bp-name, $bp-sizes in $button-responsive-sizes
|
||||||
|
+breakpoint($bp-name)
|
||||||
|
@each $size, $value in $bp-sizes
|
||||||
|
@if $size != "normal"
|
||||||
|
.button.is-responsive.is-#{$size}
|
||||||
|
font-size: $value
|
||||||
|
@else
|
||||||
|
.button.is-responsive,
|
||||||
|
.button.is-responsive.is-normal
|
||||||
|
font-size: $value
|
||||||
29
themes/lhs/assets/sass/bulma/elements/container.sass
Normal file
29
themes/lhs/assets/sass/bulma/elements/container.sass
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$container-offset: (2 * $gap) !default
|
||||||
|
$container-max-width: $fullhd !default
|
||||||
|
|
||||||
|
.container
|
||||||
|
flex-grow: 1
|
||||||
|
margin: 0 auto
|
||||||
|
position: relative
|
||||||
|
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
|
||||||
@@ -1,7 +1,11 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$content-heading-color: $text-strong !default
|
$content-heading-color: $text-strong !default
|
||||||
$content-heading-weight: $weight-semibold !default
|
$content-heading-weight: $weight-semibold !default
|
||||||
$content-heading-line-height: 1.125 !default
|
$content-heading-line-height: 1.125 !default
|
||||||
|
|
||||||
|
$content-block-margin-bottom: 1em !default
|
||||||
|
|
||||||
$content-blockquote-background-color: $background !default
|
$content-blockquote-background-color: $background !default
|
||||||
$content-blockquote-border-left: 5px solid $border !default
|
$content-blockquote-border-left: 5px solid $border !default
|
||||||
$content-blockquote-padding: 1.25em 1.5em !default
|
$content-blockquote-padding: 1.25em 1.5em !default
|
||||||
@@ -14,6 +18,7 @@ $content-table-cell-padding: 0.5em 0.75em !default
|
|||||||
$content-table-cell-heading-color: $text-strong !default
|
$content-table-cell-heading-color: $text-strong !default
|
||||||
$content-table-head-cell-border-width: 0 0 2px !default
|
$content-table-head-cell-border-width: 0 0 2px !default
|
||||||
$content-table-head-cell-color: $text-strong !default
|
$content-table-head-cell-color: $text-strong !default
|
||||||
|
$content-table-body-last-row-cell-border-bottom-width: 0 !default
|
||||||
$content-table-foot-cell-border-width: 2px 0 0 !default
|
$content-table-foot-cell-border-width: 2px 0 0 !default
|
||||||
$content-table-foot-cell-color: $text-strong !default
|
$content-table-foot-cell-color: $text-strong !default
|
||||||
|
|
||||||
@@ -31,7 +36,7 @@ $content-table-foot-cell-color: $text-strong !default
|
|||||||
pre,
|
pre,
|
||||||
table
|
table
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: 1em
|
margin-bottom: $content-block-margin-bottom
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
@@ -67,11 +72,11 @@ $content-table-foot-cell-color: $text-strong !default
|
|||||||
margin-bottom: 1em
|
margin-bottom: 1em
|
||||||
blockquote
|
blockquote
|
||||||
background-color: $content-blockquote-background-color
|
background-color: $content-blockquote-background-color
|
||||||
border-left: $content-blockquote-border-left
|
+ltr-property("border", $content-blockquote-border-left, false)
|
||||||
padding: $content-blockquote-padding
|
padding: $content-blockquote-padding
|
||||||
ol
|
ol
|
||||||
list-style-position: outside
|
list-style-position: outside
|
||||||
margin-left: 2em
|
+ltr-property("margin", 2em, false)
|
||||||
margin-top: 1em
|
margin-top: 1em
|
||||||
&:not([type])
|
&:not([type])
|
||||||
list-style-type: decimal
|
list-style-type: decimal
|
||||||
@@ -85,7 +90,7 @@ $content-table-foot-cell-color: $text-strong !default
|
|||||||
list-style-type: upper-roman
|
list-style-type: upper-roman
|
||||||
ul
|
ul
|
||||||
list-style: disc outside
|
list-style: disc outside
|
||||||
margin-left: 2em
|
+ltr-property("margin", 2em, false)
|
||||||
margin-top: 1em
|
margin-top: 1em
|
||||||
ul
|
ul
|
||||||
list-style-type: circle
|
list-style-type: circle
|
||||||
@@ -93,7 +98,7 @@ $content-table-foot-cell-color: $text-strong !default
|
|||||||
ul
|
ul
|
||||||
list-style-type: square
|
list-style-type: square
|
||||||
dd
|
dd
|
||||||
margin-left: 2em
|
+ltr-property("margin", 2em, false)
|
||||||
figure
|
figure
|
||||||
margin-left: 2em
|
margin-left: 2em
|
||||||
margin-right: 2em
|
margin-right: 2em
|
||||||
@@ -126,7 +131,7 @@ $content-table-foot-cell-color: $text-strong !default
|
|||||||
th
|
th
|
||||||
color: $content-table-cell-heading-color
|
color: $content-table-cell-heading-color
|
||||||
&:not([align])
|
&:not([align])
|
||||||
text-align: left
|
text-align: inherit
|
||||||
thead
|
thead
|
||||||
td,
|
td,
|
||||||
th
|
th
|
||||||
@@ -142,13 +147,15 @@ $content-table-foot-cell-color: $text-strong !default
|
|||||||
&:last-child
|
&:last-child
|
||||||
td,
|
td,
|
||||||
th
|
th
|
||||||
border-bottom-width: 0
|
border-bottom-width: $content-table-body-last-row-cell-border-bottom-width
|
||||||
.tabs
|
.tabs
|
||||||
li + li
|
li + li
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
|
&.is-normal
|
||||||
|
font-size: $size-normal
|
||||||
&.is-medium
|
&.is-medium
|
||||||
font-size: $size-medium
|
font-size: $size-medium
|
||||||
&.is-large
|
&.is-large
|
||||||
@@ -2,6 +2,7 @@ $icon-dimensions: 1.5rem !default
|
|||||||
$icon-dimensions-small: 1rem !default
|
$icon-dimensions-small: 1rem !default
|
||||||
$icon-dimensions-medium: 2rem !default
|
$icon-dimensions-medium: 2rem !default
|
||||||
$icon-dimensions-large: 3rem !default
|
$icon-dimensions-large: 3rem !default
|
||||||
|
$icon-text-spacing: 0.25em !default
|
||||||
|
|
||||||
.icon
|
.icon
|
||||||
align-items: center
|
align-items: center
|
||||||
@@ -19,3 +20,27 @@ $icon-dimensions-large: 3rem !default
|
|||||||
&.is-large
|
&.is-large
|
||||||
height: $icon-dimensions-large
|
height: $icon-dimensions-large
|
||||||
width: $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)
|
||||||
|
+ltr
|
||||||
|
margin-right: $icon-text-spacing
|
||||||
|
+rtl
|
||||||
|
margin-left: $icon-text-spacing
|
||||||
|
&:not(:first-child)
|
||||||
|
+ltr
|
||||||
|
margin-left: $icon-text-spacing
|
||||||
|
+rtl
|
||||||
|
margin-right: $icon-text-spacing
|
||||||
|
|
||||||
|
div.icon-text
|
||||||
|
display: flex
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$dimensions: 16 24 32 48 64 96 128 !default
|
$dimensions: 16 24 32 48 64 96 128 !default
|
||||||
|
|
||||||
.image
|
.image
|
||||||
@@ -9,6 +11,8 @@ $dimensions: 16 24 32 48 64 96 128 !default
|
|||||||
width: 100%
|
width: 100%
|
||||||
&.is-rounded
|
&.is-rounded
|
||||||
border-radius: $radius-rounded
|
border-radius: $radius-rounded
|
||||||
|
&.is-fullwidth
|
||||||
|
width: 100%
|
||||||
// Ratio
|
// Ratio
|
||||||
&.is-square,
|
&.is-square,
|
||||||
&.is-1by1,
|
&.is-1by1,
|
||||||
@@ -1,13 +1,23 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$notification-background-color: $background !default
|
$notification-background-color: $background !default
|
||||||
|
$notification-code-background-color: $scheme-main !default
|
||||||
$notification-radius: $radius !default
|
$notification-radius: $radius !default
|
||||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !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
|
.notification
|
||||||
@extend %block
|
@extend %block
|
||||||
background-color: $notification-background-color
|
background-color: $notification-background-color
|
||||||
border-radius: $notification-radius
|
border-radius: $notification-radius
|
||||||
padding: $notification-padding
|
|
||||||
position: relative
|
position: relative
|
||||||
|
+ltr
|
||||||
|
padding: $notification-padding-ltr
|
||||||
|
+rtl
|
||||||
|
padding: $notification-padding-rtl
|
||||||
a:not(.button):not(.dropdown-item)
|
a:not(.button):not(.dropdown-item)
|
||||||
color: currentColor
|
color: currentColor
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
@@ -15,21 +25,28 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
|||||||
color: currentColor
|
color: currentColor
|
||||||
code,
|
code,
|
||||||
pre
|
pre
|
||||||
background: $white
|
background: $notification-code-background-color
|
||||||
pre code
|
pre code
|
||||||
background: transparent
|
background: transparent
|
||||||
& > .delete
|
& > .delete
|
||||||
|
+ltr-position(0.5rem)
|
||||||
position: absolute
|
position: absolute
|
||||||
right: 0.5rem
|
|
||||||
top: 0.5rem
|
top: 0.5rem
|
||||||
.title,
|
.title,
|
||||||
.subtitle,
|
.subtitle,
|
||||||
.content
|
.content
|
||||||
color: currentColor
|
color: currentColor
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $notification-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
background-color: $color
|
background-color: $color
|
||||||
color: $color-invert
|
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
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
.block
|
.block
|
||||||
@extend %block
|
@extend %block
|
||||||
|
|
||||||
@@ -11,16 +13,6 @@
|
|||||||
margin-bottom: 5px
|
margin-bottom: 5px
|
||||||
text-transform: uppercase
|
text-transform: uppercase
|
||||||
|
|
||||||
.highlight
|
|
||||||
@extend %block
|
|
||||||
font-weight: $weight-normal
|
|
||||||
max-width: 100%
|
|
||||||
overflow: hidden
|
|
||||||
padding: 0
|
|
||||||
pre
|
|
||||||
overflow: auto
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
.loader
|
.loader
|
||||||
@extend %loader
|
@extend %loader
|
||||||
|
|
||||||
@@ -1,9 +1,13 @@
|
|||||||
$progress-bar-background-color: $border !default
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$progress-bar-background-color: $border-light !default
|
||||||
$progress-value-background-color: $text !default
|
$progress-value-background-color: $text !default
|
||||||
$progress-border-radius: $radius-rounded !default
|
$progress-border-radius: $radius-rounded !default
|
||||||
|
|
||||||
$progress-indeterminate-duration: 1.5s !default
|
$progress-indeterminate-duration: 1.5s !default
|
||||||
|
|
||||||
|
$progress-colors: $colors !default
|
||||||
|
|
||||||
.progress
|
.progress
|
||||||
@extend %block
|
@extend %block
|
||||||
-moz-appearance: none
|
-moz-appearance: none
|
||||||
@@ -25,7 +29,7 @@ $progress-indeterminate-duration: 1.5s !default
|
|||||||
background-color: $progress-value-background-color
|
background-color: $progress-value-background-color
|
||||||
border: none
|
border: none
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $progress-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
&::-webkit-progress-value
|
&::-webkit-progress-value
|
||||||
@@ -51,6 +55,8 @@ $progress-indeterminate-duration: 1.5s !default
|
|||||||
background-color: transparent
|
background-color: transparent
|
||||||
&::-moz-progress-bar
|
&::-moz-progress-bar
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
|
&::-ms-fill
|
||||||
|
animation-name: none
|
||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
@@ -1,10 +1,13 @@
|
|||||||
$table-color: $grey-darker !default
|
@import "../utilities/mixins"
|
||||||
$table-background-color: $white !default
|
|
||||||
|
|
||||||
$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-border-width: 0 0 1px !default
|
||||||
$table-cell-padding: 0.5em 0.75em !default
|
$table-cell-padding: 0.5em 0.75em !default
|
||||||
$table-cell-heading-color: $text-strong !default
|
$table-cell-heading-color: $text-strong !default
|
||||||
|
$table-cell-text-align: left !default
|
||||||
|
|
||||||
$table-head-cell-border-width: 0 0 2px !default
|
$table-head-cell-border-width: 0 0 2px !default
|
||||||
$table-head-cell-color: $text-strong !default
|
$table-head-cell-color: $text-strong !default
|
||||||
@@ -15,13 +18,15 @@ $table-head-background-color: transparent !default
|
|||||||
$table-body-background-color: transparent !default
|
$table-body-background-color: transparent !default
|
||||||
$table-foot-background-color: transparent !default
|
$table-foot-background-color: transparent !default
|
||||||
|
|
||||||
$table-row-hover-background-color: $white-bis !default
|
$table-row-hover-background-color: $scheme-main-bis !default
|
||||||
|
|
||||||
$table-row-active-background-color: $primary !default
|
$table-row-active-background-color: $primary !default
|
||||||
$table-row-active-color: $primary-invert !default
|
$table-row-active-color: $primary-invert !default
|
||||||
|
|
||||||
$table-striped-row-even-background-color: $white-bis !default
|
$table-striped-row-even-background-color: $scheme-main-bis !default
|
||||||
$table-striped-row-even-hover-background-color: $white-ter !default
|
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
|
||||||
|
|
||||||
|
$table-colors: $colors !default
|
||||||
|
|
||||||
.table
|
.table
|
||||||
@extend %block
|
@extend %block
|
||||||
@@ -34,7 +39,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default
|
|||||||
padding: $table-cell-padding
|
padding: $table-cell-padding
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $table-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
@@ -51,10 +56,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default
|
|||||||
a,
|
a,
|
||||||
strong
|
strong
|
||||||
color: currentColor
|
color: currentColor
|
||||||
|
&.is-vcentered
|
||||||
|
vertical-align: middle
|
||||||
th
|
th
|
||||||
color: $table-cell-heading-color
|
color: $table-cell-heading-color
|
||||||
&:not([align])
|
&:not([align])
|
||||||
text-align: left
|
text-align: $table-cell-text-align
|
||||||
tr
|
tr
|
||||||
&.is-selected
|
&.is-selected
|
||||||
background-color: $table-row-active-background-color
|
background-color: $table-row-active-background-color
|
||||||
@@ -1,8 +1,12 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$tag-background-color: $background !default
|
$tag-background-color: $background !default
|
||||||
$tag-color: $text !default
|
$tag-color: $text !default
|
||||||
$tag-radius: $radius !default
|
$tag-radius: $radius !default
|
||||||
$tag-delete-margin: 1px !default
|
$tag-delete-margin: 1px !default
|
||||||
|
|
||||||
|
$tag-colors: $colors !default
|
||||||
|
|
||||||
.tags
|
.tags
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
@@ -11,7 +15,7 @@ $tag-delete-margin: 1px !default
|
|||||||
.tag
|
.tag
|
||||||
margin-bottom: 0.5rem
|
margin-bottom: 0.5rem
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-right: 0.5rem
|
+ltr-property("margin", 0.5rem)
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom: -0.5rem
|
margin-bottom: -0.5rem
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
@@ -37,14 +41,22 @@ $tag-delete-margin: 1px !default
|
|||||||
margin-right: 0
|
margin-right: 0
|
||||||
&.has-addons
|
&.has-addons
|
||||||
.tag
|
.tag
|
||||||
margin-right: 0
|
+ltr-property("margin", 0)
|
||||||
&:not(:first-child)
|
&:not(:first-child)
|
||||||
margin-left: 0
|
+ltr-property("margin", 0, false)
|
||||||
border-bottom-left-radius: 0
|
+ltr
|
||||||
border-top-left-radius: 0
|
border-top-left-radius: 0
|
||||||
&:not(:last-child)
|
border-bottom-left-radius: 0
|
||||||
border-bottom-right-radius: 0
|
+rtl
|
||||||
border-top-right-radius: 0
|
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)
|
.tag:not(body)
|
||||||
align-items: center
|
align-items: center
|
||||||
@@ -60,15 +72,22 @@ $tag-delete-margin: 1px !default
|
|||||||
padding-right: 0.75em
|
padding-right: 0.75em
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
.delete
|
.delete
|
||||||
margin-left: 0.25rem
|
+ltr-property("margin", 0.25rem, false)
|
||||||
margin-right: -0.375rem
|
+ltr-property("margin", -0.375rem)
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $tag-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
background-color: $color
|
background-color: $color
|
||||||
color: $color-invert
|
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
|
// Sizes
|
||||||
&.is-normal
|
&.is-normal
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
@@ -78,17 +97,17 @@ $tag-delete-margin: 1px !default
|
|||||||
font-size: $size-medium
|
font-size: $size-medium
|
||||||
.icon
|
.icon
|
||||||
&:first-child:not(:last-child)
|
&:first-child:not(:last-child)
|
||||||
margin-left: -0.375em
|
+ltr-property("margin", -0.375em, false)
|
||||||
margin-right: 0.1875em
|
+ltr-property("margin", 0.1875em)
|
||||||
&:last-child:not(:first-child)
|
&:last-child:not(:first-child)
|
||||||
margin-left: 0.1875em
|
+ltr-property("margin", 0.1875em, false)
|
||||||
margin-right: -0.375em
|
+ltr-property("margin", -0.375em)
|
||||||
&:first-child:last-child
|
&:first-child:last-child
|
||||||
margin-left: -0.375em
|
+ltr-property("margin", -0.375em, false)
|
||||||
margin-right: -0.375em
|
+ltr-property("margin", -0.375em)
|
||||||
// Modifiers
|
// Modifiers
|
||||||
&.is-delete
|
&.is-delete
|
||||||
margin-left: $tag-delete-margin
|
+ltr-property("margin", $tag-delete-margin, false)
|
||||||
padding: 0
|
padding: 0
|
||||||
position: relative
|
position: relative
|
||||||
width: 2em
|
width: 2em
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
$title-color: $grey-darker !default
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$title-color: $text-strong !default
|
||||||
$title-family: false !default
|
$title-family: false !default
|
||||||
$title-size: $size-3 !default
|
$title-size: $size-3 !default
|
||||||
$title-weight: $weight-semibold !default
|
$title-weight: $weight-semibold !default
|
||||||
@@ -8,12 +10,12 @@ $title-strong-weight: inherit !default
|
|||||||
$title-sub-size: 0.75em !default
|
$title-sub-size: 0.75em !default
|
||||||
$title-sup-size: 0.75em !default
|
$title-sup-size: 0.75em !default
|
||||||
|
|
||||||
$subtitle-color: $grey-dark !default
|
$subtitle-color: $text !default
|
||||||
$subtitle-family: false !default
|
$subtitle-family: false !default
|
||||||
$subtitle-size: $size-5 !default
|
$subtitle-size: $size-5 !default
|
||||||
$subtitle-weight: $weight-normal !default
|
$subtitle-weight: $weight-normal !default
|
||||||
$subtitle-line-height: 1.25 !default
|
$subtitle-line-height: 1.25 !default
|
||||||
$subtitle-strong-color: $grey-darker !default
|
$subtitle-strong-color: $text-strong !default
|
||||||
$subtitle-strong-weight: $weight-semibold !default
|
$subtitle-strong-weight: $weight-semibold !default
|
||||||
$subtitle-negative-margin: -1.25rem !default
|
$subtitle-negative-margin: -1.25rem !default
|
||||||
|
|
||||||
@@ -41,8 +43,6 @@ $subtitle-negative-margin: -1.25rem !default
|
|||||||
strong
|
strong
|
||||||
color: $title-strong-color
|
color: $title-strong-color
|
||||||
font-weight: $title-strong-weight
|
font-weight: $title-strong-weight
|
||||||
& + .highlight
|
|
||||||
margin-top: -0.75rem
|
|
||||||
&:not(.is-spaced) + .subtitle
|
&:not(.is-spaced) + .subtitle
|
||||||
margin-top: $subtitle-negative-margin
|
margin-top: $subtitle-negative-margin
|
||||||
// Sizes
|
// Sizes
|
||||||
9
themes/lhs/assets/sass/bulma/form/_all.sass
Normal file
9
themes/lhs/assets/sass/bulma/form/_all.sass
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/* Bulma Form */
|
||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "shared"
|
||||||
|
@import "input-textarea"
|
||||||
|
@import "checkbox-radio"
|
||||||
|
@import "select"
|
||||||
|
@import "file"
|
||||||
|
@import "tools"
|
||||||
@@ -8,7 +8,8 @@
|
|||||||
&:hover
|
&:hover
|
||||||
color: $input-hover-color
|
color: $input-hover-color
|
||||||
&[disabled],
|
&[disabled],
|
||||||
fieldset[disabled] &
|
fieldset[disabled] &,
|
||||||
|
input[disabled]
|
||||||
color: $input-disabled-color
|
color: $input-disabled-color
|
||||||
cursor: not-allowed
|
cursor: not-allowed
|
||||||
|
|
||||||
@@ -18,4 +19,4 @@
|
|||||||
.radio
|
.radio
|
||||||
@extend %checkbox-radio
|
@extend %checkbox-radio
|
||||||
& + .radio
|
& + .radio
|
||||||
margin-left: 0.5em
|
+ltr-property("margin", 0.5em, false)
|
||||||
@@ -1,16 +1,18 @@
|
|||||||
$file-border-color: $border !default
|
$file-border-color: $border !default
|
||||||
$file-radius: $radius !default
|
$file-radius: $radius !default
|
||||||
|
|
||||||
$file-cta-background-color: $white-ter !default
|
$file-cta-background-color: $scheme-main-ter !default
|
||||||
$file-cta-color: $grey-dark !default
|
$file-cta-color: $text !default
|
||||||
$file-cta-hover-color: $grey-darker !default
|
$file-cta-hover-color: $text-strong !default
|
||||||
$file-cta-active-color: $grey-darker !default
|
$file-cta-active-color: $text-strong !default
|
||||||
|
|
||||||
$file-name-border-color: $border !default
|
$file-name-border-color: $border !default
|
||||||
$file-name-border-style: solid !default
|
$file-name-border-style: solid !default
|
||||||
$file-name-border-width: 1px 1px 1px 0 !default
|
$file-name-border-width: 1px 1px 1px 0 !default
|
||||||
$file-name-max-width: 16em !default
|
$file-name-max-width: 16em !default
|
||||||
|
|
||||||
|
$file-colors: $form-colors !default
|
||||||
|
|
||||||
.file
|
.file
|
||||||
@extend %unselectable
|
@extend %unselectable
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
@@ -18,7 +20,7 @@ $file-name-max-width: 16em !default
|
|||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
position: relative
|
position: relative
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $file-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
@@ -29,24 +31,26 @@ $file-name-max-width: 16em !default
|
|||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered
|
&.is-hovered
|
||||||
.file-cta
|
.file-cta
|
||||||
background-color: darken($color, 2.5%)
|
background-color: bulmaDarken($color, 2.5%)
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&:focus,
|
&:focus,
|
||||||
&.is-focused
|
&.is-focused
|
||||||
.file-cta
|
.file-cta
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&:active,
|
&:active,
|
||||||
&.is-active
|
&.is-active
|
||||||
.file-cta
|
.file-cta
|
||||||
background-color: darken($color, 5%)
|
background-color: bulmaDarken($color, 5%)
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
|
&.is-normal
|
||||||
|
font-size: $size-normal
|
||||||
&.is-medium
|
&.is-medium
|
||||||
font-size: $size-medium
|
font-size: $size-medium
|
||||||
.file-icon
|
.file-icon
|
||||||
@@ -125,16 +129,16 @@ $file-name-max-width: 16em !default
|
|||||||
position: relative
|
position: relative
|
||||||
&:hover
|
&:hover
|
||||||
.file-cta
|
.file-cta
|
||||||
background-color: darken($file-cta-background-color, 2.5%)
|
background-color: bulmaDarken($file-cta-background-color, 2.5%)
|
||||||
color: $file-cta-hover-color
|
color: $file-cta-hover-color
|
||||||
.file-name
|
.file-name
|
||||||
border-color: darken($file-name-border-color, 2.5%)
|
border-color: bulmaDarken($file-name-border-color, 2.5%)
|
||||||
&:active
|
&:active
|
||||||
.file-cta
|
.file-cta
|
||||||
background-color: darken($file-cta-background-color, 5%)
|
background-color: bulmaDarken($file-cta-background-color, 5%)
|
||||||
color: $file-cta-active-color
|
color: $file-cta-active-color
|
||||||
.file-name
|
.file-name
|
||||||
border-color: darken($file-name-border-color, 5%)
|
border-color: bulmaDarken($file-name-border-color, 5%)
|
||||||
|
|
||||||
.file-input
|
.file-input
|
||||||
height: 100%
|
height: 100%
|
||||||
@@ -166,7 +170,7 @@ $file-name-max-width: 16em !default
|
|||||||
display: block
|
display: block
|
||||||
max-width: $file-name-max-width
|
max-width: $file-name-max-width
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
text-align: left
|
text-align: inherit
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
|
|
||||||
.file-icon
|
.file-icon
|
||||||
@@ -174,7 +178,7 @@ $file-name-max-width: 16em !default
|
|||||||
display: flex
|
display: flex
|
||||||
height: 1em
|
height: 1em
|
||||||
justify-content: center
|
justify-content: center
|
||||||
margin-right: 0.5em
|
+ltr-property("margin", 0.5em)
|
||||||
width: 1em
|
width: 1em
|
||||||
.fa
|
.fa
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
@@ -1,3 +1,9 @@
|
|||||||
|
$textarea-padding: $control-padding-horizontal !default
|
||||||
|
$textarea-max-height: 40em !default
|
||||||
|
$textarea-min-height: 8em !default
|
||||||
|
|
||||||
|
$textarea-colors: $form-colors !default
|
||||||
|
|
||||||
%input-textarea
|
%input-textarea
|
||||||
@extend %input
|
@extend %input
|
||||||
box-shadow: $input-shadow
|
box-shadow: $input-shadow
|
||||||
@@ -6,7 +12,7 @@
|
|||||||
&[readonly]
|
&[readonly]
|
||||||
box-shadow: none
|
box-shadow: none
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $textarea-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
border-color: $color
|
border-color: $color
|
||||||
@@ -14,7 +20,7 @@
|
|||||||
&.is-focused,
|
&.is-focused,
|
||||||
&:active,
|
&:active,
|
||||||
&.is-active
|
&.is-active
|
||||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
+control-small
|
+control-small
|
||||||
@@ -34,8 +40,8 @@
|
|||||||
@extend %input-textarea
|
@extend %input-textarea
|
||||||
&.is-rounded
|
&.is-rounded
|
||||||
border-radius: $radius-rounded
|
border-radius: $radius-rounded
|
||||||
padding-left: 1em
|
padding-left: calc(#{$control-padding-horizontal} + 0.375em)
|
||||||
padding-right: 1em
|
padding-right: calc(#{$control-padding-horizontal} + 0.375em)
|
||||||
&.is-static
|
&.is-static
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
@@ -48,11 +54,11 @@
|
|||||||
display: block
|
display: block
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
min-width: 100%
|
min-width: 100%
|
||||||
padding: 0.625em
|
padding: $textarea-padding
|
||||||
resize: vertical
|
resize: vertical
|
||||||
&:not([rows])
|
&:not([rows])
|
||||||
max-height: 600px
|
max-height: $textarea-max-height
|
||||||
min-height: 120px
|
min-height: $textarea-min-height
|
||||||
&[rows]
|
&[rows]
|
||||||
height: initial
|
height: initial
|
||||||
// Modifiers
|
// Modifiers
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
$select-colors: $form-colors !default
|
||||||
|
|
||||||
.select
|
.select
|
||||||
display: inline-block
|
display: inline-block
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
@@ -9,12 +11,12 @@
|
|||||||
&::after
|
&::after
|
||||||
@extend %arrow
|
@extend %arrow
|
||||||
border-color: $input-arrow
|
border-color: $input-arrow
|
||||||
right: 1.125em
|
+ltr-position(1.125em)
|
||||||
z-index: 4
|
z-index: 4
|
||||||
&.is-rounded
|
&.is-rounded
|
||||||
select
|
select
|
||||||
border-radius: $radius-rounded
|
border-radius: $radius-rounded
|
||||||
padding-left: 1em
|
+ltr-property("padding", 1em, false)
|
||||||
select
|
select
|
||||||
@extend %input
|
@extend %input
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
@@ -28,7 +30,7 @@
|
|||||||
fieldset[disabled] &:hover
|
fieldset[disabled] &:hover
|
||||||
border-color: $input-disabled-border-color
|
border-color: $input-disabled-border-color
|
||||||
&:not([multiple])
|
&:not([multiple])
|
||||||
padding-right: 2.5em
|
+ltr-property("padding", 2.5em)
|
||||||
&[multiple]
|
&[multiple]
|
||||||
height: auto
|
height: auto
|
||||||
padding: 0
|
padding: 0
|
||||||
@@ -39,7 +41,7 @@
|
|||||||
&::after
|
&::after
|
||||||
border-color: $input-hover-color
|
border-color: $input-hover-color
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $select-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
&:not(:hover)::after
|
&:not(:hover)::after
|
||||||
@@ -48,12 +50,12 @@
|
|||||||
border-color: $color
|
border-color: $color
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-hovered
|
&.is-hovered
|
||||||
border-color: darken($color, 5%)
|
border-color: bulmaDarken($color, 5%)
|
||||||
&:focus,
|
&:focus,
|
||||||
&.is-focused,
|
&.is-focused,
|
||||||
&:active,
|
&:active,
|
||||||
&.is-active
|
&.is-active
|
||||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
+control-small
|
+control-small
|
||||||
@@ -64,7 +66,8 @@
|
|||||||
// Modifiers
|
// Modifiers
|
||||||
&.is-disabled
|
&.is-disabled
|
||||||
&::after
|
&::after
|
||||||
border-color: $input-disabled-color
|
border-color: $input-disabled-color !important
|
||||||
|
opacity: 0.5
|
||||||
&.is-fullwidth
|
&.is-fullwidth
|
||||||
width: 100%
|
width: 100%
|
||||||
select
|
select
|
||||||
@@ -74,7 +77,7 @@
|
|||||||
@extend %loader
|
@extend %loader
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
position: absolute
|
position: absolute
|
||||||
right: 0.625em
|
+ltr-position(0.625em)
|
||||||
top: 0.625em
|
top: 0.625em
|
||||||
transform: none
|
transform: none
|
||||||
&.is-small:after
|
&.is-small:after
|
||||||
@@ -1,27 +1,32 @@
|
|||||||
$input-color: $grey-darker !default
|
@import "../utilities/controls"
|
||||||
$input-background-color: $white !default
|
@import "../utilities/mixins"
|
||||||
$input-border-color: $grey-lighter !default
|
|
||||||
|
$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-height: $control-height !default
|
||||||
$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
|
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
|
||||||
$input-placeholder-color: rgba($input-color, 0.3) !default
|
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
|
||||||
|
|
||||||
$input-hover-color: $grey-darker !default
|
$input-hover-color: $text-strong !default
|
||||||
$input-hover-border-color: $grey-light !default
|
$input-hover-border-color: $border-hover !default
|
||||||
|
|
||||||
$input-focus-color: $grey-darker !default
|
$input-focus-color: $text-strong !default
|
||||||
$input-focus-border-color: $link !default
|
$input-focus-border-color: $link !default
|
||||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||||
$input-focus-box-shadow-color: rgba($link, 0.25) !default
|
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
|
||||||
|
|
||||||
$input-disabled-color: $text-light !default
|
$input-disabled-color: $text-light !default
|
||||||
$input-disabled-background-color: $background !default
|
$input-disabled-background-color: $background !default
|
||||||
$input-disabled-border-color: $background !default
|
$input-disabled-border-color: $background !default
|
||||||
$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
|
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
|
||||||
|
|
||||||
$input-arrow: $link !default
|
$input-arrow: $link !default
|
||||||
|
|
||||||
$input-icon-color: $grey-lighter !default
|
$input-icon-color: $border !default
|
||||||
$input-icon-active-color: $grey !default
|
$input-icon-active-color: $text !default
|
||||||
|
|
||||||
$input-radius: $radius !default
|
$input-radius: $radius !default
|
||||||
|
|
||||||
@@ -1,8 +1,10 @@
|
|||||||
$label-color: $grey-darker !default
|
$label-color: $text-strong !default
|
||||||
$label-weight: $weight-bold !default
|
$label-weight: $weight-bold !default
|
||||||
|
|
||||||
$help-size: $size-small !default
|
$help-size: $size-small !default
|
||||||
|
|
||||||
|
$label-colors: $form-colors !default
|
||||||
|
|
||||||
.label
|
.label
|
||||||
color: $label-color
|
color: $label-color
|
||||||
display: block
|
display: block
|
||||||
@@ -22,7 +24,7 @@ $help-size: $size-small !default
|
|||||||
display: block
|
display: block
|
||||||
font-size: $help-size
|
font-size: $help-size
|
||||||
margin-top: 0.25rem
|
margin-top: 0.25rem
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $label-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
color: $color
|
color: $color
|
||||||
@@ -38,7 +40,7 @@ $help-size: $size-small !default
|
|||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
.control
|
.control
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-right: -1px
|
+ltr-property("margin", -1px)
|
||||||
&:not(:first-child):not(:last-child)
|
&:not(:first-child):not(:last-child)
|
||||||
.button,
|
.button,
|
||||||
.input,
|
.input,
|
||||||
@@ -48,14 +50,22 @@ $help-size: $size-small !default
|
|||||||
.button,
|
.button,
|
||||||
.input,
|
.input,
|
||||||
.select select
|
.select select
|
||||||
|
+ltr
|
||||||
border-bottom-right-radius: 0
|
border-bottom-right-radius: 0
|
||||||
border-top-right-radius: 0
|
border-top-right-radius: 0
|
||||||
|
+rtl
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
border-top-left-radius: 0
|
||||||
&:last-child:not(:only-child)
|
&:last-child:not(:only-child)
|
||||||
.button,
|
.button,
|
||||||
.input,
|
.input,
|
||||||
.select select
|
.select select
|
||||||
|
+ltr
|
||||||
border-bottom-left-radius: 0
|
border-bottom-left-radius: 0
|
||||||
border-top-left-radius: 0
|
border-top-left-radius: 0
|
||||||
|
+rtl
|
||||||
|
border-bottom-right-radius: 0
|
||||||
|
border-top-right-radius: 0
|
||||||
.button,
|
.button,
|
||||||
.input,
|
.input,
|
||||||
.select select
|
.select select
|
||||||
@@ -88,7 +98,7 @@ $help-size: $size-small !default
|
|||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
margin-right: 0.75rem
|
+ltr-property("margin", 0.75rem)
|
||||||
&.is-expanded
|
&.is-expanded
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 1
|
flex-shrink: 1
|
||||||
@@ -119,7 +129,7 @@ $help-size: $size-small !default
|
|||||||
flex-basis: 0
|
flex-basis: 0
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
margin-right: 1.5rem
|
+ltr-property("margin", 1.5rem)
|
||||||
text-align: right
|
text-align: right
|
||||||
&.is-small
|
&.is-small
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
@@ -148,14 +158,14 @@ $help-size: $size-small !default
|
|||||||
&:not(.is-narrow)
|
&:not(.is-narrow)
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-right: 0.75rem
|
+ltr-property("margin", 0.75rem)
|
||||||
|
|
||||||
.control
|
.control
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
clear: both
|
clear: both
|
||||||
font-size: $size-normal
|
font-size: $size-normal
|
||||||
position: relative
|
position: relative
|
||||||
text-align: left
|
text-align: inherit
|
||||||
// Modifiers
|
// Modifiers
|
||||||
&.has-icons-left,
|
&.has-icons-left,
|
||||||
&.has-icons-right
|
&.has-icons-right
|
||||||
@@ -194,7 +204,7 @@ $help-size: $size-small !default
|
|||||||
&::after
|
&::after
|
||||||
@extend %loader
|
@extend %loader
|
||||||
position: absolute !important
|
position: absolute !important
|
||||||
right: 0.625em
|
+ltr-position(0.625em)
|
||||||
top: 0.625em
|
top: 0.625em
|
||||||
z-index: 4
|
z-index: 4
|
||||||
&.is-small:after
|
&.is-small:after
|
||||||
5
themes/lhs/assets/sass/bulma/grid/_all.sass
Normal file
5
themes/lhs/assets/sass/bulma/grid/_all.sass
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/* Bulma Grid */
|
||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "columns"
|
||||||
|
@import "tiles"
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$column-gap: 0.75rem !default
|
$column-gap: 0.75rem !default
|
||||||
|
|
||||||
.column
|
.column
|
||||||
@@ -8,6 +10,7 @@ $column-gap: 0.75rem !default
|
|||||||
padding: $column-gap
|
padding: $column-gap
|
||||||
.columns.is-mobile > &.is-narrow
|
.columns.is-mobile > &.is-narrow
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
.columns.is-mobile > &.is-full
|
.columns.is-mobile > &.is-full
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@@ -39,32 +42,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
.columns.is-mobile > &.is-offset-three-quarters
|
.columns.is-mobile > &.is-offset-three-quarters
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
.columns.is-mobile > &.is-offset-two-thirds
|
.columns.is-mobile > &.is-offset-two-thirds
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
.columns.is-mobile > &.is-offset-half
|
.columns.is-mobile > &.is-offset-half
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
.columns.is-mobile > &.is-offset-one-third
|
.columns.is-mobile > &.is-offset-one-third
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
.columns.is-mobile > &.is-offset-one-quarter
|
.columns.is-mobile > &.is-offset-one-quarter
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
.columns.is-mobile > &.is-offset-one-fifth
|
.columns.is-mobile > &.is-offset-one-fifth
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
.columns.is-mobile > &.is-offset-two-fifths
|
.columns.is-mobile > &.is-offset-two-fifths
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
.columns.is-mobile > &.is-offset-three-fifths
|
.columns.is-mobile > &.is-offset-three-fifths
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
.columns.is-mobile > &.is-offset-four-fifths
|
.columns.is-mobile > &.is-offset-four-fifths
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
.columns.is-mobile > &.is-#{$i}
|
.columns.is-mobile > &.is-#{$i}
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage(divide($i, 12))
|
||||||
.columns.is-mobile > &.is-offset-#{$i}
|
.columns.is-mobile > &.is-offset-#{$i}
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||||
+mobile
|
+mobile
|
||||||
&.is-narrow-mobile
|
&.is-narrow-mobile
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-mobile
|
&.is-full-mobile
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@@ -96,33 +100,34 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-mobile
|
&.is-offset-three-quarters-mobile
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-mobile
|
&.is-offset-two-thirds-mobile
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-mobile
|
&.is-offset-half-mobile
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-mobile
|
&.is-offset-one-third-mobile
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-mobile
|
&.is-offset-one-quarter-mobile
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-mobile
|
&.is-offset-one-fifth-mobile
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-mobile
|
&.is-offset-two-fifths-mobile
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-mobile
|
&.is-offset-three-fifths-mobile
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-mobile
|
&.is-offset-four-fifths-mobile
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-mobile
|
&.is-#{$i}-mobile
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage(divide($i, 12))
|
||||||
&.is-offset-#{$i}-mobile
|
&.is-offset-#{$i}-mobile
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||||
+tablet
|
+tablet
|
||||||
&.is-narrow,
|
&.is-narrow,
|
||||||
&.is-narrow-tablet
|
&.is-narrow-tablet
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full,
|
&.is-full,
|
||||||
&.is-full-tablet
|
&.is-full-tablet
|
||||||
flex: none
|
flex: none
|
||||||
@@ -165,42 +170,43 @@ $column-gap: 0.75rem !default
|
|||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters,
|
&.is-offset-three-quarters,
|
||||||
&.is-offset-three-quarters-tablet
|
&.is-offset-three-quarters-tablet
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds,
|
&.is-offset-two-thirds,
|
||||||
&.is-offset-two-thirds-tablet
|
&.is-offset-two-thirds-tablet
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half,
|
&.is-offset-half,
|
||||||
&.is-offset-half-tablet
|
&.is-offset-half-tablet
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third,
|
&.is-offset-one-third,
|
||||||
&.is-offset-one-third-tablet
|
&.is-offset-one-third-tablet
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter,
|
&.is-offset-one-quarter,
|
||||||
&.is-offset-one-quarter-tablet
|
&.is-offset-one-quarter-tablet
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth,
|
&.is-offset-one-fifth,
|
||||||
&.is-offset-one-fifth-tablet
|
&.is-offset-one-fifth-tablet
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths,
|
&.is-offset-two-fifths,
|
||||||
&.is-offset-two-fifths-tablet
|
&.is-offset-two-fifths-tablet
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths,
|
&.is-offset-three-fifths,
|
||||||
&.is-offset-three-fifths-tablet
|
&.is-offset-three-fifths-tablet
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths,
|
&.is-offset-four-fifths,
|
||||||
&.is-offset-four-fifths-tablet
|
&.is-offset-four-fifths-tablet
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i},
|
&.is-#{$i},
|
||||||
&.is-#{$i}-tablet
|
&.is-#{$i}-tablet
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage(divide($i, 12))
|
||||||
&.is-offset-#{$i},
|
&.is-offset-#{$i},
|
||||||
&.is-offset-#{$i}-tablet
|
&.is-offset-#{$i}-tablet
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||||
+touch
|
+touch
|
||||||
&.is-narrow-touch
|
&.is-narrow-touch
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-touch
|
&.is-full-touch
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@@ -232,32 +238,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-touch
|
&.is-offset-three-quarters-touch
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-touch
|
&.is-offset-two-thirds-touch
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-touch
|
&.is-offset-half-touch
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-touch
|
&.is-offset-one-third-touch
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-touch
|
&.is-offset-one-quarter-touch
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-touch
|
&.is-offset-one-fifth-touch
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-touch
|
&.is-offset-two-fifths-touch
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-touch
|
&.is-offset-three-fifths-touch
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-touch
|
&.is-offset-four-fifths-touch
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-touch
|
&.is-#{$i}-touch
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage(divide($i, 12))
|
||||||
&.is-offset-#{$i}-touch
|
&.is-offset-#{$i}-touch
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||||
+desktop
|
+desktop
|
||||||
&.is-narrow-desktop
|
&.is-narrow-desktop
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-desktop
|
&.is-full-desktop
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@@ -289,32 +296,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-desktop
|
&.is-offset-three-quarters-desktop
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-desktop
|
&.is-offset-two-thirds-desktop
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-desktop
|
&.is-offset-half-desktop
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-desktop
|
&.is-offset-one-third-desktop
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-desktop
|
&.is-offset-one-quarter-desktop
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-desktop
|
&.is-offset-one-fifth-desktop
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-desktop
|
&.is-offset-two-fifths-desktop
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-desktop
|
&.is-offset-three-fifths-desktop
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-desktop
|
&.is-offset-four-fifths-desktop
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-desktop
|
&.is-#{$i}-desktop
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage(divide($i, 12))
|
||||||
&.is-offset-#{$i}-desktop
|
&.is-offset-#{$i}-desktop
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||||
+widescreen
|
+widescreen
|
||||||
&.is-narrow-widescreen
|
&.is-narrow-widescreen
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-widescreen
|
&.is-full-widescreen
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@@ -346,32 +354,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-widescreen
|
&.is-offset-three-quarters-widescreen
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-widescreen
|
&.is-offset-two-thirds-widescreen
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-widescreen
|
&.is-offset-half-widescreen
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-widescreen
|
&.is-offset-one-third-widescreen
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-widescreen
|
&.is-offset-one-quarter-widescreen
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-widescreen
|
&.is-offset-one-fifth-widescreen
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-widescreen
|
&.is-offset-two-fifths-widescreen
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-widescreen
|
&.is-offset-three-fifths-widescreen
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-widescreen
|
&.is-offset-four-fifths-widescreen
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-widescreen
|
&.is-#{$i}-widescreen
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage(divide($i, 12))
|
||||||
&.is-offset-#{$i}-widescreen
|
&.is-offset-#{$i}-widescreen
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||||
+fullhd
|
+fullhd
|
||||||
&.is-narrow-fullhd
|
&.is-narrow-fullhd
|
||||||
flex: none
|
flex: none
|
||||||
|
width: unset
|
||||||
&.is-full-fullhd
|
&.is-full-fullhd
|
||||||
flex: none
|
flex: none
|
||||||
width: 100%
|
width: 100%
|
||||||
@@ -403,33 +412,33 @@ $column-gap: 0.75rem !default
|
|||||||
flex: none
|
flex: none
|
||||||
width: 80%
|
width: 80%
|
||||||
&.is-offset-three-quarters-fullhd
|
&.is-offset-three-quarters-fullhd
|
||||||
margin-left: 75%
|
+ltr-property("margin", 75%, false)
|
||||||
&.is-offset-two-thirds-fullhd
|
&.is-offset-two-thirds-fullhd
|
||||||
margin-left: 66.6666%
|
+ltr-property("margin", 66.6666%, false)
|
||||||
&.is-offset-half-fullhd
|
&.is-offset-half-fullhd
|
||||||
margin-left: 50%
|
+ltr-property("margin", 50%, false)
|
||||||
&.is-offset-one-third-fullhd
|
&.is-offset-one-third-fullhd
|
||||||
margin-left: 33.3333%
|
+ltr-property("margin", 33.3333%, false)
|
||||||
&.is-offset-one-quarter-fullhd
|
&.is-offset-one-quarter-fullhd
|
||||||
margin-left: 25%
|
+ltr-property("margin", 25%, false)
|
||||||
&.is-offset-one-fifth-fullhd
|
&.is-offset-one-fifth-fullhd
|
||||||
margin-left: 20%
|
+ltr-property("margin", 20%, false)
|
||||||
&.is-offset-two-fifths-fullhd
|
&.is-offset-two-fifths-fullhd
|
||||||
margin-left: 40%
|
+ltr-property("margin", 40%, false)
|
||||||
&.is-offset-three-fifths-fullhd
|
&.is-offset-three-fifths-fullhd
|
||||||
margin-left: 60%
|
+ltr-property("margin", 60%, false)
|
||||||
&.is-offset-four-fifths-fullhd
|
&.is-offset-four-fifths-fullhd
|
||||||
margin-left: 80%
|
+ltr-property("margin", 80%, false)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 12
|
||||||
&.is-#{$i}-fullhd
|
&.is-#{$i}-fullhd
|
||||||
flex: none
|
flex: none
|
||||||
width: percentage($i / 12)
|
width: percentage(divide($i, 12))
|
||||||
&.is-offset-#{$i}-fullhd
|
&.is-offset-#{$i}-fullhd
|
||||||
margin-left: percentage($i / 12)
|
+ltr-property("margin", percentage(divide($i, 12)), false)
|
||||||
|
|
||||||
.columns
|
.columns
|
||||||
margin-left: (-$column-gap)
|
+ltr-property("margin", (-$column-gap), false)
|
||||||
margin-right: (-$column-gap)
|
+ltr-property("margin", (-$column-gap))
|
||||||
margin-top: (-$column-gap)
|
margin-top: (-$column-gap)
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom: (-$column-gap)
|
margin-bottom: (-$column-gap)
|
||||||
@@ -439,8 +448,8 @@ $column-gap: 0.75rem !default
|
|||||||
&.is-centered
|
&.is-centered
|
||||||
justify-content: center
|
justify-content: center
|
||||||
&.is-gapless
|
&.is-gapless
|
||||||
margin-left: 0
|
+ltr-property("margin", 0, false)
|
||||||
margin-right: 0
|
+ltr-property("margin", 0)
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
& > .column
|
& > .column
|
||||||
margin: 0
|
margin: 0
|
||||||
@@ -467,9 +476,9 @@ $column-gap: 0.75rem !default
|
|||||||
@if $variable-columns
|
@if $variable-columns
|
||||||
.columns.is-variable
|
.columns.is-variable
|
||||||
--columnGap: 0.75rem
|
--columnGap: 0.75rem
|
||||||
margin-left: calc(-1 * var(--columnGap))
|
+ltr-property("margin", calc(-1 * var(--columnGap)), false)
|
||||||
margin-right: calc(-1 * var(--columnGap))
|
+ltr-property("margin", calc(-1 * var(--columnGap)))
|
||||||
.column
|
> .column
|
||||||
padding-left: var(--columnGap)
|
padding-left: var(--columnGap)
|
||||||
padding-right: var(--columnGap)
|
padding-right: var(--columnGap)
|
||||||
@for $i from 0 through 8
|
@for $i from 0 through 8
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$tile-spacing: 0.75rem !default
|
$tile-spacing: 0.75rem !default
|
||||||
|
|
||||||
.tile
|
.tile
|
||||||
@@ -31,4 +33,4 @@ $tile-spacing: 0.75rem !default
|
|||||||
@for $i from 1 through 12
|
@for $i from 1 through 12
|
||||||
&.is-#{$i}
|
&.is-#{$i}
|
||||||
flex: none
|
flex: none
|
||||||
width: ($i / 12) * 100%
|
width: (divide($i, 12)) * 100%
|
||||||
12
themes/lhs/assets/sass/bulma/helpers/_all.sass
Normal file
12
themes/lhs/assets/sass/bulma/helpers/_all.sass
Normal 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"
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/derived-variables"
|
||||||
|
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
.has-text-#{$name}
|
.has-text-#{$name}
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
.is-clearfix
|
.is-clearfix
|
||||||
+clearfix
|
+clearfix
|
||||||
|
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
.is-radiusless
|
.is-radiusless
|
||||||
border-radius: 0 !important
|
border-radius: 0 !important
|
||||||
|
|
||||||
@@ -6,6 +8,7 @@
|
|||||||
|
|
||||||
.is-clickable
|
.is-clickable
|
||||||
cursor: pointer !important
|
cursor: pointer !important
|
||||||
|
pointer-events: all !important
|
||||||
|
|
||||||
.is-unselectable
|
.is-unselectable
|
||||||
@extend %unselectable
|
@extend %unselectable
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
.is-overlay
|
.is-overlay
|
||||||
@extend %overlay
|
@extend %overlay
|
||||||
|
|
||||||
@@ -8,7 +8,7 @@ $spacing-shortcuts: ("margin": "m", "padding": "p") !default
|
|||||||
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
|
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
|
||||||
$spacing-horizontal: "x" !default
|
$spacing-horizontal: "x" !default
|
||||||
$spacing-vertical: "y" !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
|
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
|
||||||
|
|
||||||
@each $property, $shortcut in $spacing-shortcuts
|
@each $property, $shortcut in $spacing-shortcuts
|
||||||
@each $name, $value in $spacing-values
|
@each $name, $value in $spacing-values
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
=typography-size($target:'')
|
=typography-size($target:'')
|
||||||
@each $size in $sizes
|
@each $size in $sizes
|
||||||
$i: index($sizes, $size)
|
$i: index($sizes, $size)
|
||||||
@@ -71,6 +73,9 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
|
|||||||
.is-italic
|
.is-italic
|
||||||
font-style: italic !important
|
font-style: italic !important
|
||||||
|
|
||||||
|
.is-underlined
|
||||||
|
text-decoration: underline !important
|
||||||
|
|
||||||
.has-text-weight-light
|
.has-text-weight-light
|
||||||
font-weight: $weight-light !important
|
font-weight: $weight-light !important
|
||||||
.has-text-weight-normal
|
.has-text-weight-normal
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||||
|
|
||||||
6
themes/lhs/assets/sass/bulma/layout/_all.sass
Normal file
6
themes/lhs/assets/sass/bulma/layout/_all.sass
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/* Bulma Layout */
|
||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "hero"
|
||||||
|
@import "section"
|
||||||
|
@import "footer"
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
$footer-background-color: $white-bis !default
|
@import "../utilities/derived-variables"
|
||||||
|
|
||||||
|
$footer-background-color: $scheme-main-bis !default
|
||||||
$footer-color: false !default
|
$footer-color: false !default
|
||||||
$footer-padding: 3rem 1.5rem 6rem !default
|
$footer-padding: 3rem 1.5rem 6rem !default
|
||||||
|
|
||||||
@@ -1,5 +1,14 @@
|
|||||||
// Main container
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
|
$hero-body-padding: 3rem 1.5rem !default
|
||||||
|
$hero-body-padding-tablet: 3rem 3rem !default
|
||||||
|
$hero-body-padding-small: 1.5rem !default
|
||||||
|
$hero-body-padding-medium: 9rem 4.5rem !default
|
||||||
|
$hero-body-padding-large: 18rem 6rem !default
|
||||||
|
|
||||||
|
$hero-colors: $colors !default
|
||||||
|
|
||||||
|
// Main container
|
||||||
.hero
|
.hero
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
display: flex
|
display: flex
|
||||||
@@ -11,7 +20,7 @@
|
|||||||
ul
|
ul
|
||||||
border-bottom: none
|
border-bottom: none
|
||||||
// Colors
|
// Colors
|
||||||
@each $name, $pair in $colors
|
@each $name, $pair in $hero-colors
|
||||||
$color: nth($pair, 1)
|
$color: nth($pair, 1)
|
||||||
$color-invert: nth($pair, 2)
|
$color-invert: nth($pair, 2)
|
||||||
&.is-#{$name}
|
&.is-#{$name}
|
||||||
@@ -23,7 +32,7 @@
|
|||||||
.title
|
.title
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.subtitle
|
.subtitle
|
||||||
color: rgba($color-invert, 0.9)
|
color: bulmaRgba($color-invert, 0.9)
|
||||||
a:not(.button),
|
a:not(.button),
|
||||||
strong
|
strong
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
@@ -32,12 +41,12 @@
|
|||||||
background-color: $color
|
background-color: $color
|
||||||
.navbar-item,
|
.navbar-item,
|
||||||
.navbar-link
|
.navbar-link
|
||||||
color: rgba($color-invert, 0.7)
|
color: bulmaRgba($color-invert, 0.7)
|
||||||
a.navbar-item,
|
a.navbar-item,
|
||||||
.navbar-link
|
.navbar-link
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: darken($color, 5%)
|
background-color: bulmaDarken($color, 5%)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.tabs
|
.tabs
|
||||||
a
|
a
|
||||||
@@ -47,13 +56,14 @@
|
|||||||
opacity: 1
|
opacity: 1
|
||||||
li
|
li
|
||||||
&.is-active a
|
&.is-active a
|
||||||
|
color: $color !important
|
||||||
opacity: 1
|
opacity: 1
|
||||||
&.is-boxed,
|
&.is-boxed,
|
||||||
&.is-toggle
|
&.is-toggle
|
||||||
a
|
a
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
&:hover
|
&:hover
|
||||||
background-color: rgba($black, 0.1)
|
background-color: bulmaRgba($scheme-invert, 0.1)
|
||||||
li.is-active a
|
li.is-active a
|
||||||
&,
|
&,
|
||||||
&:hover
|
&:hover
|
||||||
@@ -61,6 +71,7 @@
|
|||||||
border-color: $color-invert
|
border-color: $color-invert
|
||||||
color: $color
|
color: $color
|
||||||
// Modifiers
|
// Modifiers
|
||||||
|
@if type-of($color) == 'color'
|
||||||
&.is-bold
|
&.is-bold
|
||||||
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
||||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
||||||
@@ -71,18 +82,15 @@
|
|||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
.hero-body
|
.hero-body
|
||||||
padding-bottom: 1.5rem
|
padding: $hero-body-padding-small
|
||||||
padding-top: 1.5rem
|
|
||||||
&.is-medium
|
&.is-medium
|
||||||
+tablet
|
+tablet
|
||||||
.hero-body
|
.hero-body
|
||||||
padding-bottom: 9rem
|
padding: $hero-body-padding-medium
|
||||||
padding-top: 9rem
|
|
||||||
&.is-large
|
&.is-large
|
||||||
+tablet
|
+tablet
|
||||||
.hero-body
|
.hero-body
|
||||||
padding-bottom: 18rem
|
padding: $hero-body-padding-large
|
||||||
padding-top: 18rem
|
|
||||||
&.is-halfheight,
|
&.is-halfheight,
|
||||||
&.is-fullheight,
|
&.is-fullheight,
|
||||||
&.is-fullheight-with-navbar
|
&.is-fullheight-with-navbar
|
||||||
@@ -128,7 +136,7 @@
|
|||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
.button:not(:last-child)
|
.button:not(:last-child)
|
||||||
margin-right: 1.5rem
|
+ltr-property("margin", 1.5rem)
|
||||||
|
|
||||||
// Containers
|
// Containers
|
||||||
|
|
||||||
@@ -140,4 +148,6 @@
|
|||||||
.hero-body
|
.hero-body
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
padding: 3rem 1.5rem
|
padding: $hero-body-padding
|
||||||
|
+tablet
|
||||||
|
padding: $hero-body-padding-tablet
|
||||||
@@ -1,11 +1,15 @@
|
|||||||
|
@import "../utilities/mixins"
|
||||||
|
|
||||||
$section-padding: 3rem 1.5rem !default
|
$section-padding: 3rem 1.5rem !default
|
||||||
$section-padding-medium: 9rem 1.5rem !default
|
$section-padding-desktop: 3rem 3rem !default
|
||||||
$section-padding-large: 18rem 1.5rem !default
|
$section-padding-medium: 9rem 4.5rem !default
|
||||||
|
$section-padding-large: 18rem 6rem !default
|
||||||
|
|
||||||
.section
|
.section
|
||||||
padding: $section-padding
|
padding: $section-padding
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
+desktop
|
+desktop
|
||||||
|
padding: $section-padding-desktop
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-medium
|
&.is-medium
|
||||||
padding: $section-padding-medium
|
padding: $section-padding-medium
|
||||||
9
themes/lhs/assets/sass/bulma/utilities/_all.sass
Normal file
9
themes/lhs/assets/sass/bulma/utilities/_all.sass
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/* Bulma Utilities */
|
||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "initial-variables"
|
||||||
|
@import "functions"
|
||||||
|
@import "derived-variables"
|
||||||
|
@import "mixins"
|
||||||
|
@import "controls"
|
||||||
|
@import "extends"
|
||||||
1
themes/lhs/assets/sass/bulma/utilities/animations.sass
Normal file
1
themes/lhs/assets/sass/bulma/utilities/animations.sass
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
|
||||||
@@ -1,13 +1,15 @@
|
|||||||
|
@import "derived-variables"
|
||||||
|
|
||||||
$control-radius: $radius !default
|
$control-radius: $radius !default
|
||||||
$control-radius-small: $radius-small !default
|
$control-radius-small: $radius-small !default
|
||||||
|
|
||||||
$control-border-width: 1px !default
|
$control-border-width: 1px !default
|
||||||
|
|
||||||
$control-height: 2.25em !default
|
$control-height: 2.5em !default
|
||||||
$control-line-height: 1.5 !default
|
$control-line-height: 1.5 !default
|
||||||
|
|
||||||
$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
|
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
|
||||||
$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
|
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
|
||||||
|
|
||||||
=control
|
=control
|
||||||
-moz-appearance: none
|
-moz-appearance: none
|
||||||
@@ -37,9 +39,6 @@ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
|
|||||||
fieldset[disabled] &
|
fieldset[disabled] &
|
||||||
cursor: not-allowed
|
cursor: not-allowed
|
||||||
|
|
||||||
%control
|
|
||||||
+control
|
|
||||||
|
|
||||||
// The controls sizes use mixins so they can be used at different breakpoints
|
// The controls sizes use mixins so they can be used at different breakpoints
|
||||||
=control-small
|
=control-small
|
||||||
border-radius: $control-radius-small
|
border-radius: $control-radius-small
|
||||||
@@ -1,3 +1,6 @@
|
|||||||
|
@import "initial-variables"
|
||||||
|
@import "functions"
|
||||||
|
|
||||||
$primary: $turquoise !default
|
$primary: $turquoise !default
|
||||||
|
|
||||||
$info: $cyan !default
|
$info: $cyan !default
|
||||||
@@ -19,20 +22,39 @@ $blue-invert: findColorInvert($blue) !default
|
|||||||
$purple-invert: findColorInvert($purple) !default
|
$purple-invert: findColorInvert($purple) !default
|
||||||
$red-invert: findColorInvert($red) !default
|
$red-invert: findColorInvert($red) !default
|
||||||
|
|
||||||
$primary-invert: $turquoise-invert !default
|
$primary-invert: findColorInvert($primary) !default
|
||||||
$info-invert: $cyan-invert !default
|
$primary-light: findLightColor($primary) !default
|
||||||
$success-invert: $green-invert !default
|
$primary-dark: findDarkColor($primary) !default
|
||||||
$warning-invert: $yellow-invert !default
|
$info-invert: findColorInvert($info) !default
|
||||||
$danger-invert: $red-invert !default
|
$info-light: findLightColor($info) !default
|
||||||
$light-invert: $dark !default
|
$info-dark: findDarkColor($info) !default
|
||||||
$dark-invert: $light !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
|
// 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
|
$background: $white-ter !default
|
||||||
|
|
||||||
$border: $grey-lighter !default
|
$border: $grey-lighter !default
|
||||||
$border-hover: $grey-light !default
|
$border-hover: $grey-light !default
|
||||||
|
$border-light: $grey-lightest !default
|
||||||
|
$border-light-hover: $grey-light !default
|
||||||
|
|
||||||
// Text colors
|
// Text colors
|
||||||
|
|
||||||
@@ -43,7 +65,7 @@ $text-strong: $grey-darker !default
|
|||||||
|
|
||||||
// Code colors
|
// Code colors
|
||||||
|
|
||||||
$code: $red !default
|
$code: darken($red, 15%) !default
|
||||||
$code-background: $background !default
|
$code-background: $background !default
|
||||||
|
|
||||||
$pre: $text !default
|
$pre: $text !default
|
||||||
@@ -52,7 +74,9 @@ $pre-background: $background !default
|
|||||||
// Link colors
|
// Link colors
|
||||||
|
|
||||||
$link: $blue !default
|
$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-visited: $purple !default
|
||||||
|
|
||||||
$link-hover: $grey-darker !default
|
$link-hover: $grey-darker !default
|
||||||
@@ -75,11 +99,16 @@ $size-normal: $size-6 !default
|
|||||||
$size-medium: $size-5 !default
|
$size-medium: $size-5 !default
|
||||||
$size-large: $size-4 !default
|
$size-large: $size-4 !default
|
||||||
|
|
||||||
|
// Effects
|
||||||
|
|
||||||
|
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
|
||||||
|
|
||||||
// Lists and maps
|
// Lists and maps
|
||||||
$custom-colors: null !default
|
$custom-colors: null !default
|
||||||
$custom-shades: null !default
|
$custom-shades: null !default
|
||||||
|
|
||||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
|
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
|
||||||
|
|
||||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
$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
|
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||||
25
themes/lhs/assets/sass/bulma/utilities/extends.sass
Normal file
25
themes/lhs/assets/sass/bulma/utilities/extends.sass
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
@import "mixins"
|
||||||
|
|
||||||
|
%control
|
||||||
|
+control
|
||||||
|
|
||||||
|
%unselectable
|
||||||
|
+unselectable
|
||||||
|
|
||||||
|
%arrow
|
||||||
|
+arrow
|
||||||
|
|
||||||
|
%block
|
||||||
|
+block
|
||||||
|
|
||||||
|
%delete
|
||||||
|
+delete
|
||||||
|
|
||||||
|
%loader
|
||||||
|
+loader
|
||||||
|
|
||||||
|
%overlay
|
||||||
|
+overlay
|
||||||
|
|
||||||
|
%reset
|
||||||
|
+reset
|
||||||
135
themes/lhs/assets/sass/bulma/utilities/functions.sass
Normal file
135
themes/lhs/assets/sass/bulma/utilities/functions.sass
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
@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
|
||||||
|
@for $i from 1 through $exp
|
||||||
|
$value: $value * $number
|
||||||
|
@else if $exp < 0
|
||||||
|
@for $i from 1 through -$exp
|
||||||
|
$value: divide($value, $number)
|
||||||
|
@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
|
||||||
|
$value: divide($value, 255)
|
||||||
|
@if $value < 0.03928
|
||||||
|
$value: divide($value, 12.92)
|
||||||
|
@else
|
||||||
|
$value: divide(($value + .055), 1.055)
|
||||||
|
$value: powerNumber($value, 2)
|
||||||
|
$color-rgb: map-merge($color-rgb, ($name: $value))
|
||||||
|
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||||
|
|
||||||
|
@function findColorInvert($color)
|
||||||
|
@if (colorLuminance($color) > 0.55)
|
||||||
|
@return rgba(#000, 0.7)
|
||||||
|
@else
|
||||||
|
@return #fff
|
||||||
|
|
||||||
|
@function findLightColor($color, $l: 96%)
|
||||||
|
@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, $base-l: 29%)
|
||||||
|
@if type-of($color) == 'color'
|
||||||
|
$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)
|
||||||
|
|
||||||
|
// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
|
||||||
|
// Replaces old slash division deprecated in Dart Sass
|
||||||
|
@function divide($dividend, $divisor, $precision: 10)
|
||||||
|
$sign: if($dividend > 0 and $divisor > 0, 1, -1)
|
||||||
|
$dividend: abs($dividend)
|
||||||
|
$divisor: abs($divisor)
|
||||||
|
$quotient: 0
|
||||||
|
$remainder: $dividend
|
||||||
|
@if $dividend == 0
|
||||||
|
@return 0
|
||||||
|
@if $divisor == 0
|
||||||
|
@error "Cannot divide by 0"
|
||||||
|
@if $divisor == 1
|
||||||
|
@return $dividend
|
||||||
|
@while $remainder >= $divisor
|
||||||
|
$quotient: $quotient + 1
|
||||||
|
$remainder: $remainder - $divisor
|
||||||
|
@if $remainder > 0 and $precision > 0
|
||||||
|
$remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
|
||||||
|
@return ($quotient + $remainder) * $sign
|
||||||
@@ -9,23 +9,24 @@ $grey-dark: hsl(0, 0%, 29%) !default
|
|||||||
$grey: hsl(0, 0%, 48%) !default
|
$grey: hsl(0, 0%, 48%) !default
|
||||||
$grey-light: hsl(0, 0%, 71%) !default
|
$grey-light: hsl(0, 0%, 71%) !default
|
||||||
$grey-lighter: hsl(0, 0%, 86%) !default
|
$grey-lighter: hsl(0, 0%, 86%) !default
|
||||||
|
$grey-lightest: hsl(0, 0%, 93%) !default
|
||||||
|
|
||||||
$white-ter: hsl(0, 0%, 96%) !default
|
$white-ter: hsl(0, 0%, 96%) !default
|
||||||
$white-bis: hsl(0, 0%, 98%) !default
|
$white-bis: hsl(0, 0%, 98%) !default
|
||||||
$white: hsl(0, 0%, 100%) !default
|
$white: hsl(0, 0%, 100%) !default
|
||||||
|
|
||||||
$orange: hsl(14, 100%, 53%) !default
|
$orange: hsl(14, 100%, 53%) !default
|
||||||
$yellow: hsl(48, 100%, 67%) !default
|
$yellow: hsl(44, 100%, 77%) !default
|
||||||
$green: hsl(141, 71%, 48%) !default
|
$green: hsl(153, 53%, 53%) !default
|
||||||
$turquoise: hsl(171, 100%, 41%) !default
|
$turquoise: hsl(171, 100%, 41%) !default
|
||||||
$cyan: hsl(204, 86%, 53%) !default
|
$cyan: hsl(207, 61%, 53%) !default
|
||||||
$blue: hsl(217, 71%, 53%) !default
|
$blue: hsl(229, 53%, 53%) !default
|
||||||
$purple: hsl(271, 100%, 71%) !default
|
$purple: hsl(271, 100%, 71%) !default
|
||||||
$red: hsl(348, 100%, 61%) !default
|
$red: hsl(348, 86%, 61%) !default
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
|
|
||||||
$family-sans-serif: 'Roboto' , sans-serif !default
|
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
|
||||||
$family-monospace: monospace !default
|
$family-monospace: monospace !default
|
||||||
$render-mode: optimizeLegibility !default
|
$render-mode: optimizeLegibility !default
|
||||||
|
|
||||||
@@ -61,6 +62,7 @@ $widescreen-enabled: true !default
|
|||||||
// 1344px container + 4rem
|
// 1344px container + 4rem
|
||||||
$fullhd: 1344px + (2 * $gap) !default
|
$fullhd: 1344px + (2 * $gap) !default
|
||||||
$fullhd-enabled: true !default
|
$fullhd-enabled: true !default
|
||||||
|
$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default
|
||||||
|
|
||||||
// Miscellaneous
|
// Miscellaneous
|
||||||
|
|
||||||
@@ -68,9 +70,10 @@ $easing: ease-out !default
|
|||||||
$radius-small: 2px !default
|
$radius-small: 2px !default
|
||||||
$radius: 4px !default
|
$radius: 4px !default
|
||||||
$radius-large: 6px !default
|
$radius-large: 6px !default
|
||||||
$radius-rounded: 290486px !default
|
$radius-rounded: 9999px !default
|
||||||
$speed: 86ms !default
|
$speed: 86ms !default
|
||||||
|
|
||||||
// Flags
|
// Flags
|
||||||
|
|
||||||
$variable-columns: true !default
|
$variable-columns: true !default
|
||||||
|
$rtl: false !default
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
@import "initial-variables"
|
@import "derived-variables"
|
||||||
|
|
||||||
=clearfix
|
=clearfix
|
||||||
&::after
|
&::after
|
||||||
@@ -9,11 +9,11 @@
|
|||||||
=center($width, $height: 0)
|
=center($width, $height: 0)
|
||||||
position: absolute
|
position: absolute
|
||||||
@if $height != 0
|
@if $height != 0
|
||||||
left: calc(50% - (#{$width} / 2))
|
left: calc(50% - (#{$width} * 0.5))
|
||||||
top: calc(50% - (#{$height} / 2))
|
top: calc(50% - (#{$height} * 0.5))
|
||||||
@else
|
@else
|
||||||
left: calc(50% - (#{$width} / 2))
|
left: calc(50% - (#{$width} * 0.5))
|
||||||
top: calc(50% - (#{$width} / 2))
|
top: calc(50% - (#{$width} * 0.5))
|
||||||
|
|
||||||
=fa($size, $dimensions)
|
=fa($size, $dimensions)
|
||||||
display: inline-block
|
display: inline-block
|
||||||
@@ -25,6 +25,11 @@
|
|||||||
width: $dimensions
|
width: $dimensions
|
||||||
|
|
||||||
=hamburger($dimensions)
|
=hamburger($dimensions)
|
||||||
|
-moz-appearance: none
|
||||||
|
-webkit-appearance: none
|
||||||
|
appearance: none
|
||||||
|
background: none
|
||||||
|
border: none
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
display: block
|
display: block
|
||||||
height: $dimensions
|
height: $dimensions
|
||||||
@@ -48,7 +53,7 @@
|
|||||||
&:nth-child(3)
|
&:nth-child(3)
|
||||||
top: calc(50% + 4px)
|
top: calc(50% + 4px)
|
||||||
&:hover
|
&:hover
|
||||||
background-color: rgba(black, 0.05)
|
background-color: bulmaRgba(black, 0.05)
|
||||||
// Modifers
|
// Modifers
|
||||||
&.is-active
|
&.is-active
|
||||||
span
|
span
|
||||||
@@ -68,6 +73,18 @@
|
|||||||
&:#{$placeholder}-placeholder
|
&:#{$placeholder}-placeholder
|
||||||
@content
|
@content
|
||||||
|
|
||||||
|
=reset
|
||||||
|
-moz-appearance: none
|
||||||
|
-webkit-appearance: none
|
||||||
|
appearance: none
|
||||||
|
background: none
|
||||||
|
border: none
|
||||||
|
color: currentColor
|
||||||
|
font-family: inherit
|
||||||
|
font-size: 1em
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
|
|
||||||
=from($device)
|
=from($device)
|
||||||
@@ -78,6 +95,10 @@
|
|||||||
@media screen and (max-width: $device - 1px)
|
@media screen and (max-width: $device - 1px)
|
||||||
@content
|
@content
|
||||||
|
|
||||||
|
=between($from, $until)
|
||||||
|
@media screen and (min-width: $from) and (max-width: $until - 1px)
|
||||||
|
@content
|
||||||
|
|
||||||
=mobile
|
=mobile
|
||||||
@media screen and (max-width: $tablet - 1px)
|
@media screen and (max-width: $tablet - 1px)
|
||||||
@content
|
@content
|
||||||
@@ -128,6 +149,45 @@
|
|||||||
@media screen and (min-width: $fullhd)
|
@media screen and (min-width: $fullhd)
|
||||||
@content
|
@content
|
||||||
|
|
||||||
|
=breakpoint($name)
|
||||||
|
$breakpoint: map-get($breakpoints, $name)
|
||||||
|
@if $breakpoint
|
||||||
|
$from: map-get($breakpoint, "from")
|
||||||
|
$until: map-get($breakpoint, "until")
|
||||||
|
@if $from and $until
|
||||||
|
+between($from, $until)
|
||||||
|
@content
|
||||||
|
@else if $from
|
||||||
|
+from($from)
|
||||||
|
@content
|
||||||
|
@else if $until
|
||||||
|
+until($until)
|
||||||
|
@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
|
// Placeholders
|
||||||
|
|
||||||
=unselectable
|
=unselectable
|
||||||
@@ -137,9 +197,6 @@
|
|||||||
-ms-user-select: none
|
-ms-user-select: none
|
||||||
user-select: none
|
user-select: none
|
||||||
|
|
||||||
%unselectable
|
|
||||||
+unselectable
|
|
||||||
|
|
||||||
=arrow($color: transparent)
|
=arrow($color: transparent)
|
||||||
border: 3px solid $color
|
border: 3px solid $color
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
@@ -156,21 +213,15 @@
|
|||||||
transform-origin: center
|
transform-origin: center
|
||||||
width: 0.625em
|
width: 0.625em
|
||||||
|
|
||||||
%arrow
|
|
||||||
+arrow
|
|
||||||
|
|
||||||
=block($spacing: $block-spacing)
|
=block($spacing: $block-spacing)
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: $spacing
|
margin-bottom: $spacing
|
||||||
|
|
||||||
%block
|
|
||||||
+block
|
|
||||||
|
|
||||||
=delete
|
=delete
|
||||||
@extend %unselectable
|
+unselectable
|
||||||
-moz-appearance: none
|
-moz-appearance: none
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
background-color: rgba($black, 0.2)
|
background-color: bulmaRgba($scheme-invert, 0.2)
|
||||||
border: none
|
border: none
|
||||||
border-radius: $radius-rounded
|
border-radius: $radius-rounded
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
@@ -190,7 +241,7 @@
|
|||||||
width: 20px
|
width: 20px
|
||||||
&::before,
|
&::before,
|
||||||
&::after
|
&::after
|
||||||
background-color: $white
|
background-color: $scheme-main
|
||||||
content: ""
|
content: ""
|
||||||
display: block
|
display: block
|
||||||
left: 50%
|
left: 50%
|
||||||
@@ -206,9 +257,9 @@
|
|||||||
width: 2px
|
width: 2px
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus
|
&:focus
|
||||||
background-color: rgba($black, 0.3)
|
background-color: bulmaRgba($scheme-invert, 0.3)
|
||||||
&:active
|
&:active
|
||||||
background-color: rgba($black, 0.4)
|
background-color: bulmaRgba($scheme-invert, 0.4)
|
||||||
// Sizes
|
// Sizes
|
||||||
&.is-small
|
&.is-small
|
||||||
height: 16px
|
height: 16px
|
||||||
@@ -232,9 +283,6 @@
|
|||||||
min-width: 32px
|
min-width: 32px
|
||||||
width: 32px
|
width: 32px
|
||||||
|
|
||||||
%delete
|
|
||||||
+delete
|
|
||||||
|
|
||||||
=loader
|
=loader
|
||||||
animation: spinAround 500ms infinite linear
|
animation: spinAround 500ms infinite linear
|
||||||
border: 2px solid $grey-lighter
|
border: 2px solid $grey-lighter
|
||||||
@@ -247,15 +295,9 @@
|
|||||||
position: relative
|
position: relative
|
||||||
width: 1em
|
width: 1em
|
||||||
|
|
||||||
%loader
|
|
||||||
+loader
|
|
||||||
|
|
||||||
=overlay($offset: 0)
|
=overlay($offset: 0)
|
||||||
bottom: $offset
|
bottom: $offset
|
||||||
left: $offset
|
left: $offset
|
||||||
position: absolute
|
position: absolute
|
||||||
right: $offset
|
right: $offset
|
||||||
top: $offset
|
top: $offset
|
||||||
|
|
||||||
%overlay
|
|
||||||
+overlay
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "breadcrumb.sass"
|
|
||||||
@import "card.sass"
|
|
||||||
@import "dropdown.sass"
|
|
||||||
@import "level.sass"
|
|
||||||
@import "list.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"
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
$list-background-color: $white !default
|
|
||||||
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
|
||||||
$list-radius: $radius !default
|
|
||||||
|
|
||||||
$list-item-border: 1px solid $border !default
|
|
||||||
$list-item-color: $text !default
|
|
||||||
$list-item-active-background-color: $link !default
|
|
||||||
$list-item-active-color: $link-invert !default
|
|
||||||
$list-item-hover-background-color: $background !default
|
|
||||||
|
|
||||||
.list
|
|
||||||
@extend %block
|
|
||||||
background-color: $list-background-color
|
|
||||||
border-radius: $list-radius
|
|
||||||
box-shadow: $list-shadow
|
|
||||||
// &.is-hoverable > .list-item:hover:not(.is-active)
|
|
||||||
// background-color: $list-item-hover-background-color
|
|
||||||
// cursor: pointer
|
|
||||||
|
|
||||||
.list-item
|
|
||||||
display: block
|
|
||||||
padding: 0.5em 1em
|
|
||||||
&:not(a)
|
|
||||||
color: $list-item-color
|
|
||||||
&:first-child
|
|
||||||
border-top-left-radius: $list-radius
|
|
||||||
border-top-right-radius: $list-radius
|
|
||||||
&:last-child
|
|
||||||
border-bottom-left-radius: $list-radius
|
|
||||||
border-bottom-right-radius: $list-radius
|
|
||||||
&:not(:last-child)
|
|
||||||
border-bottom: $list-item-border
|
|
||||||
&.is-active
|
|
||||||
background-color: $list-item-active-background-color
|
|
||||||
color: $list-item-active-color
|
|
||||||
|
|
||||||
a.list-item
|
|
||||||
background-color: $list-item-hover-background-color
|
|
||||||
cursor: pointer
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
.media
|
|
||||||
align-items: flex-start
|
|
||||||
display: flex
|
|
||||||
text-align: left
|
|
||||||
.content:not(:last-child)
|
|
||||||
margin-bottom: 0.75rem
|
|
||||||
.media
|
|
||||||
border-top: 1px solid rgba($border, 0.5)
|
|
||||||
display: flex
|
|
||||||
padding-top: 0.75rem
|
|
||||||
.content:not(:last-child),
|
|
||||||
.control:not(:last-child)
|
|
||||||
margin-bottom: 0.5rem
|
|
||||||
.media
|
|
||||||
padding-top: 0.5rem
|
|
||||||
& + .media
|
|
||||||
margin-top: 0.5rem
|
|
||||||
& + .media
|
|
||||||
border-top: 1px solid rgba($border, 0.5)
|
|
||||||
margin-top: 1rem
|
|
||||||
padding-top: 1rem
|
|
||||||
// Sizes
|
|
||||||
&.is-large
|
|
||||||
& + .media
|
|
||||||
margin-top: 1.5rem
|
|
||||||
padding-top: 1.5rem
|
|
||||||
|
|
||||||
.media-left,
|
|
||||||
.media-right
|
|
||||||
flex-basis: auto
|
|
||||||
flex-grow: 0
|
|
||||||
flex-shrink: 0
|
|
||||||
|
|
||||||
.media-left
|
|
||||||
margin-right: 1rem
|
|
||||||
|
|
||||||
.media-right
|
|
||||||
margin-left: 1rem
|
|
||||||
|
|
||||||
.media-content
|
|
||||||
flex-basis: auto
|
|
||||||
flex-grow: 1
|
|
||||||
flex-shrink: 1
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
+mobile
|
|
||||||
.media-content
|
|
||||||
overflow-x: auto
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "box.sass"
|
|
||||||
@import "button.sass"
|
|
||||||
@import "container.sass"
|
|
||||||
@import "content.sass"
|
|
||||||
@import "icon.sass"
|
|
||||||
@import "image.sass"
|
|
||||||
@import "notification.sass"
|
|
||||||
@import "progress.sass"
|
|
||||||
@import "table.sass"
|
|
||||||
@import "tag.sass"
|
|
||||||
@import "title.sass"
|
|
||||||
|
|
||||||
@import "other.sass"
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
$container-offset: (2 * $gap) !default
|
|
||||||
|
|
||||||
.container
|
|
||||||
flex-grow: 1
|
|
||||||
margin: 0 auto
|
|
||||||
position: relative
|
|
||||||
width: auto
|
|
||||||
+desktop
|
|
||||||
max-width: $desktop - $container-offset
|
|
||||||
&.is-fluid
|
|
||||||
margin-left: $gap
|
|
||||||
margin-right: $gap
|
|
||||||
max-width: none
|
|
||||||
+until-widescreen
|
|
||||||
&.is-widescreen
|
|
||||||
max-width: $widescreen - $container-offset
|
|
||||||
+until-fullhd
|
|
||||||
&.is-fullhd
|
|
||||||
max-width: $fullhd - $container-offset
|
|
||||||
+widescreen
|
|
||||||
max-width: $widescreen - $container-offset
|
|
||||||
+fullhd
|
|
||||||
max-width: $fullhd - $container-offset
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "shared.sass"
|
|
||||||
@import "input-textarea.sass"
|
|
||||||
@import "checkbox-radio.sass"
|
|
||||||
@import "select.sass"
|
|
||||||
@import "file.sass"
|
|
||||||
@import "tools.sass"
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "columns.sass"
|
|
||||||
@import "tiles.sass"
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
/* Bulma Helpers */
|
|
||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "color.sass"
|
|
||||||
@import "flexbox.sass"
|
|
||||||
@import "float.sass"
|
|
||||||
@import "other.sass"
|
|
||||||
@import "overflow.sass"
|
|
||||||
@import "position.sass"
|
|
||||||
@import "spacing.sass"
|
|
||||||
@import "typography.sass"
|
|
||||||
@import "visibility.sass"
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "hero.sass"
|
|
||||||
@import "section.sass"
|
|
||||||
@import "footer.sass"
|
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Hackspace Branding
|
// Hackspace Branding
|
||||||
$family-sans-serif: "Roboto", sans-serif;
|
//$family-sans-serif: "Roboto", sans-serif;
|
||||||
$primary: #d41246;
|
$primary: #d41246;
|
||||||
$accent: #fbf3ee;
|
$accent: #fbf3ee;
|
||||||
$link: $primary;
|
$link: $primary;
|
||||||
@@ -18,11 +18,11 @@ $navbar-background-color: black;
|
|||||||
$navbar-burger-color: white;
|
$navbar-burger-color: white;
|
||||||
$footer-background-color: black;
|
$footer-background-color: black;
|
||||||
$footer-link-color: #e2e2e2;
|
$footer-link-color: #e2e2e2;
|
||||||
$button-padding-vertical: calc(0.5em) !default;
|
//$button-padding-vertical: calc(0.5em) !default;
|
||||||
$body-font-size: 1.375em;
|
$body-font-size: 1.25em;
|
||||||
$body-line-height: 1.636em;
|
//$body-line-height: 1.636em;
|
||||||
$subtitle-font-size:$body-font-size!important;
|
//$subtitle-font-size:$body-font-size!important;
|
||||||
$subtitle-line-height:$body-line-height;
|
//$subtitle-line-height:$body-line-height;
|
||||||
|
|
||||||
// Import Bulmas styles
|
// Import Bulmas styles
|
||||||
@import "bulma.sass";
|
@import "bulma.sass";
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
@charset "utf-8"
|
|
||||||
|
|
||||||
@import "initial-variables.sass"
|
|
||||||
@import "functions.sass"
|
|
||||||
@import "derived-variables.sass"
|
|
||||||
@import "animations.sass"
|
|
||||||
@import "mixins.sass"
|
|
||||||
@import "controls.sass"
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
@function mergeColorMaps($bulma-colors, $custom-colors)
|
|
||||||
// we return at least bulma hardcoded colors
|
|
||||||
$merged-colors: $bulma-colors
|
|
||||||
|
|
||||||
// we want a map as input
|
|
||||||
@if type-of($custom-colors) == 'map'
|
|
||||||
@each $name, $components in $custom-colors
|
|
||||||
// color name should be a string and colors pair a list with at least one element
|
|
||||||
@if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
|
|
||||||
$color-base: null
|
|
||||||
|
|
||||||
// the param can either be a single color
|
|
||||||
// or a list of 2 colors
|
|
||||||
@if type-of($components) == 'color'
|
|
||||||
$color-base: $components
|
|
||||||
@else if type-of($components) == 'list'
|
|
||||||
$color-base: nth($components, 1)
|
|
||||||
|
|
||||||
$color-invert: null
|
|
||||||
// is an inverted color provided in the list
|
|
||||||
@if length($components) > 1
|
|
||||||
$color-invert: nth($components, 2)
|
|
||||||
|
|
||||||
// we only want a color as base color
|
|
||||||
@if type-of($color-base) == 'color'
|
|
||||||
// if inverted color is not provided or is not a color we compute it
|
|
||||||
@if type-of($color-invert) != 'color'
|
|
||||||
$color-invert: findColorInvert($color-base)
|
|
||||||
|
|
||||||
// we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
|
|
||||||
$merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
|
|
||||||
|
|
||||||
@return $merged-colors
|
|
||||||
|
|
||||||
@function powerNumber($number, $exp)
|
|
||||||
$value: 1
|
|
||||||
@if $exp > 0
|
|
||||||
@for $i from 1 through $exp
|
|
||||||
$value: $value * $number
|
|
||||||
@else if $exp < 0
|
|
||||||
@for $i from 1 through -$exp
|
|
||||||
$value: $value / $number
|
|
||||||
@return $value
|
|
||||||
|
|
||||||
@function colorLuminance($color)
|
|
||||||
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
|
|
||||||
@each $name, $value in $color-rgb
|
|
||||||
$adjusted: 0
|
|
||||||
$value: $value / 255
|
|
||||||
@if $value < 0.03928
|
|
||||||
$value: $value / 12.92
|
|
||||||
@else
|
|
||||||
$value: ($value + .055) / 1.055
|
|
||||||
$value: powerNumber($value, 2)
|
|
||||||
$color-rgb: map-merge($color-rgb, ($name: $value))
|
|
||||||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
|
||||||
|
|
||||||
@function findColorInvert($color)
|
|
||||||
@if (colorLuminance($color) > 0.55)
|
|
||||||
@return rgba(#000, 0.7)
|
|
||||||
@else
|
|
||||||
@return #fff
|
|
||||||
Reference in New Issue
Block a user