parent
a72a6e7e62
commit
8115b908cf
64 changed files with 4 additions and 5273 deletions
@ -0,0 +1,3 @@ |
|||||||
|
[submodule "css/sass/bulma"] |
||||||
|
path = css/sass/bulma |
||||||
|
url = git@github.com:jgthms/bulma.git |
||||||
@ -0,0 +1 @@ |
|||||||
|
Subproject commit 1e15b305a5f3d46b2cfd7837e2f8733e43ae7dab |
||||||
@ -1,5 +0,0 @@ |
|||||||
/* Bulma Base */ |
|
||||||
@charset "utf-8" |
|
||||||
|
|
||||||
@import "minireset.sass" |
|
||||||
@import "generic.sass" |
|
||||||
@ -1,143 +0,0 @@ |
|||||||
$body-background-color: $scheme-main !default |
|
||||||
$body-size: 16px !default |
|
||||||
$body-min-width: 300px !default |
|
||||||
$body-rendering: optimizeLegibility !default |
|
||||||
$body-family: $family-primary !default |
|
||||||
$body-overflow-x: hidden !default |
|
||||||
$body-overflow-y: scroll !default |
|
||||||
|
|
||||||
$body-color: $text !default |
|
||||||
$body-font-size: 1em !default |
|
||||||
$body-weight: $weight-normal !default |
|
||||||
$body-line-height: 1.5 !default |
|
||||||
|
|
||||||
$code-family: $family-code !default |
|
||||||
$code-padding: 0.25em 0.5em 0.25em !default |
|
||||||
$code-weight: normal !default |
|
||||||
$code-size: 0.875em !default |
|
||||||
|
|
||||||
$small-font-size: 0.875em !default |
|
||||||
|
|
||||||
$hr-background-color: $background !default |
|
||||||
$hr-height: 2px !default |
|
||||||
$hr-margin: 1.5rem 0 !default |
|
||||||
|
|
||||||
$strong-color: $text-strong !default |
|
||||||
$strong-weight: $weight-bold !default |
|
||||||
|
|
||||||
$pre-font-size: 0.875em !default |
|
||||||
$pre-padding: 1.25rem 1.5rem !default |
|
||||||
$pre-code-font-size: 1em !default |
|
||||||
|
|
||||||
html |
|
||||||
background-color: $body-background-color |
|
||||||
font-size: $body-size |
|
||||||
-moz-osx-font-smoothing: grayscale |
|
||||||
-webkit-font-smoothing: antialiased |
|
||||||
min-width: $body-min-width |
|
||||||
overflow-x: $body-overflow-x |
|
||||||
overflow-y: $body-overflow-y |
|
||||||
text-rendering: $body-rendering |
|
||||||
text-size-adjust: 100% |
|
||||||
|
|
||||||
article, |
|
||||||
aside, |
|
||||||
figure, |
|
||||||
footer, |
|
||||||
header, |
|
||||||
hgroup, |
|
||||||
section |
|
||||||
display: block |
|
||||||
|
|
||||||
body, |
|
||||||
button, |
|
||||||
input, |
|
||||||
optgroup, |
|
||||||
select, |
|
||||||
textarea |
|
||||||
font-family: $body-family |
|
||||||
|
|
||||||
code, |
|
||||||
pre |
|
||||||
-moz-osx-font-smoothing: auto |
|
||||||
-webkit-font-smoothing: auto |
|
||||||
font-family: $code-family |
|
||||||
|
|
||||||
body |
|
||||||
color: $body-color |
|
||||||
font-size: $body-font-size |
|
||||||
font-weight: $body-weight |
|
||||||
line-height: $body-line-height |
|
||||||
|
|
||||||
// Inline |
|
||||||
|
|
||||||
a |
|
||||||
color: $link |
|
||||||
cursor: pointer |
|
||||||
text-decoration: none |
|
||||||
strong |
|
||||||
color: currentColor |
|
||||||
&:hover |
|
||||||
color: $link-hover |
|
||||||
|
|
||||||
code |
|
||||||
background-color: $code-background |
|
||||||
color: $code |
|
||||||
font-size: $code-size |
|
||||||
font-weight: $code-weight |
|
||||||
padding: $code-padding |
|
||||||
|
|
||||||
hr |
|
||||||
background-color: $hr-background-color |
|
||||||
border: none |
|
||||||
display: block |
|
||||||
height: $hr-height |
|
||||||
margin: $hr-margin |
|
||||||
|
|
||||||
img |
|
||||||
height: auto |
|
||||||
max-width: 100% |
|
||||||
|
|
||||||
input[type="checkbox"], |
|
||||||
input[type="radio"] |
|
||||||
vertical-align: baseline |
|
||||||
|
|
||||||
small |
|
||||||
font-size: $small-font-size |
|
||||||
|
|
||||||
span |
|
||||||
font-style: inherit |
|
||||||
font-weight: inherit |
|
||||||
|
|
||||||
strong |
|
||||||
color: $strong-color |
|
||||||
font-weight: $strong-weight |
|
||||||
|
|
||||||
// Block |
|
||||||
|
|
||||||
fieldset |
|
||||||
border: none |
|
||||||
|
|
||||||
pre |
|
||||||
+overflow-touch |
|
||||||
background-color: $pre-background |
|
||||||
color: $pre |
|
||||||
font-size: $pre-font-size |
|
||||||
overflow-x: auto |
|
||||||
padding: $pre-padding |
|
||||||
white-space: pre |
|
||||||
word-wrap: normal |
|
||||||
code |
|
||||||
background-color: transparent |
|
||||||
color: currentColor |
|
||||||
font-size: $pre-code-font-size |
|
||||||
padding: 0 |
|
||||||
|
|
||||||
table |
|
||||||
td, |
|
||||||
th |
|
||||||
vertical-align: top |
|
||||||
&:not([align]) |
|
||||||
text-align: inherit |
|
||||||
th |
|
||||||
color: $text-strong |
|
||||||
@ -1 +0,0 @@ |
|||||||
@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead." |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ |
|
||||||
// Blocks |
|
||||||
html, |
|
||||||
body, |
|
||||||
p, |
|
||||||
ol, |
|
||||||
ul, |
|
||||||
li, |
|
||||||
dl, |
|
||||||
dt, |
|
||||||
dd, |
|
||||||
blockquote, |
|
||||||
figure, |
|
||||||
fieldset, |
|
||||||
legend, |
|
||||||
textarea, |
|
||||||
pre, |
|
||||||
iframe, |
|
||||||
hr, |
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6 |
|
||||||
margin: 0 |
|
||||||
padding: 0 |
|
||||||
|
|
||||||
// Headings |
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6 |
|
||||||
font-size: 100% |
|
||||||
font-weight: normal |
|
||||||
|
|
||||||
// List |
|
||||||
ul |
|
||||||
list-style: none |
|
||||||
|
|
||||||
// Form |
|
||||||
button, |
|
||||||
input, |
|
||||||
select, |
|
||||||
textarea |
|
||||||
margin: 0 |
|
||||||
|
|
||||||
// Box sizing |
|
||||||
html |
|
||||||
box-sizing: border-box |
|
||||||
|
|
||||||
* |
|
||||||
&, |
|
||||||
&::before, |
|
||||||
&::after |
|
||||||
box-sizing: inherit |
|
||||||
|
|
||||||
// Media |
|
||||||
img, |
|
||||||
video |
|
||||||
height: auto |
|
||||||
max-width: 100% |
|
||||||
|
|
||||||
// Iframe |
|
||||||
iframe |
|
||||||
border: 0 |
|
||||||
|
|
||||||
// Table |
|
||||||
table |
|
||||||
border-collapse: collapse |
|
||||||
border-spacing: 0 |
|
||||||
|
|
||||||
td, |
|
||||||
th |
|
||||||
padding: 0 |
|
||||||
&:not([align]) |
|
||||||
text-align: inherit |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
/* Bulma Components */ |
|
||||||
@charset "utf-8" |
|
||||||
|
|
||||||
@import "breadcrumb.sass" |
|
||||||
@import "card.sass" |
|
||||||
@import "dropdown.sass" |
|
||||||
@import "level.sass" |
|
||||||
@import "media.sass" |
|
||||||
@import "menu.sass" |
|
||||||
@import "message.sass" |
|
||||||
@import "modal.sass" |
|
||||||
@import "navbar.sass" |
|
||||||
@import "pagination.sass" |
|
||||||
@import "panel.sass" |
|
||||||
@import "tabs.sass" |
|
||||||
@ -1,75 +0,0 @@ |
|||||||
$breadcrumb-item-color: $link !default |
|
||||||
$breadcrumb-item-hover-color: $link-hover !default |
|
||||||
$breadcrumb-item-active-color: $text-strong !default |
|
||||||
|
|
||||||
$breadcrumb-item-padding-vertical: 0 !default |
|
||||||
$breadcrumb-item-padding-horizontal: 0.75em !default |
|
||||||
|
|
||||||
$breadcrumb-item-separator-color: $border-hover !default |
|
||||||
|
|
||||||
.breadcrumb |
|
||||||
@extend %block |
|
||||||
@extend %unselectable |
|
||||||
font-size: $size-normal |
|
||||||
white-space: nowrap |
|
||||||
a |
|
||||||
align-items: center |
|
||||||
color: $breadcrumb-item-color |
|
||||||
display: flex |
|
||||||
justify-content: center |
|
||||||
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal |
|
||||||
&:hover |
|
||||||
color: $breadcrumb-item-hover-color |
|
||||||
li |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
&:first-child a |
|
||||||
+ltr-property("padding", 0, false) |
|
||||||
&.is-active |
|
||||||
a |
|
||||||
color: $breadcrumb-item-active-color |
|
||||||
cursor: default |
|
||||||
pointer-events: none |
|
||||||
& + li::before |
|
||||||
color: $breadcrumb-item-separator-color |
|
||||||
content: "\0002f" |
|
||||||
ul, |
|
||||||
ol |
|
||||||
align-items: flex-start |
|
||||||
display: flex |
|
||||||
flex-wrap: wrap |
|
||||||
justify-content: flex-start |
|
||||||
.icon |
|
||||||
&:first-child |
|
||||||
+ltr-property("margin", 0.5em) |
|
||||||
&:last-child |
|
||||||
+ltr-property("margin", 0.5em, false) |
|
||||||
// Alignment |
|
||||||
&.is-centered |
|
||||||
ol, |
|
||||||
ul |
|
||||||
justify-content: center |
|
||||||
&.is-right |
|
||||||
ol, |
|
||||||
ul |
|
||||||
justify-content: flex-end |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
// Styles |
|
||||||
&.has-arrow-separator |
|
||||||
li + li::before |
|
||||||
content: "\02192" |
|
||||||
&.has-bullet-separator |
|
||||||
li + li::before |
|
||||||
content: "\02022" |
|
||||||
&.has-dot-separator |
|
||||||
li + li::before |
|
||||||
content: "\000b7" |
|
||||||
&.has-succeeds-separator |
|
||||||
li + li::before |
|
||||||
content: "\0227B" |
|
||||||
@ -1,83 +0,0 @@ |
|||||||
$card-color: $text !default |
|
||||||
$card-background-color: $scheme-main !default |
|
||||||
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default |
|
||||||
$card-radius: 0.25rem !default |
|
||||||
$card-overflow: hidden !default |
|
||||||
|
|
||||||
$card-header-background-color: transparent !default |
|
||||||
$card-header-color: $text-strong !default |
|
||||||
$card-header-padding: 0.75rem 1rem !default |
|
||||||
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default |
|
||||||
$card-header-weight: $weight-bold !default |
|
||||||
|
|
||||||
$card-content-background-color: transparent !default |
|
||||||
$card-content-padding: 1.5rem !default |
|
||||||
|
|
||||||
$card-footer-background-color: transparent !default |
|
||||||
$card-footer-border-top: 1px solid $border-light !default |
|
||||||
$card-footer-padding: 0.75rem !default |
|
||||||
|
|
||||||
$card-media-margin: $block-spacing !default |
|
||||||
|
|
||||||
.card |
|
||||||
background-color: $card-background-color |
|
||||||
border-radius: $card-radius |
|
||||||
box-shadow: $card-shadow |
|
||||||
color: $card-color |
|
||||||
max-width: 100% |
|
||||||
overflow: $card-overflow |
|
||||||
position: relative |
|
||||||
|
|
||||||
.card-header |
|
||||||
background-color: $card-header-background-color |
|
||||||
align-items: stretch |
|
||||||
box-shadow: $card-header-shadow |
|
||||||
display: flex |
|
||||||
|
|
||||||
.card-header-title |
|
||||||
align-items: center |
|
||||||
color: $card-header-color |
|
||||||
display: flex |
|
||||||
flex-grow: 1 |
|
||||||
font-weight: $card-header-weight |
|
||||||
padding: $card-header-padding |
|
||||||
&.is-centered |
|
||||||
justify-content: center |
|
||||||
|
|
||||||
.card-header-icon |
|
||||||
align-items: center |
|
||||||
cursor: pointer |
|
||||||
display: flex |
|
||||||
justify-content: center |
|
||||||
padding: $card-header-padding |
|
||||||
|
|
||||||
.card-image |
|
||||||
display: block |
|
||||||
position: relative |
|
||||||
|
|
||||||
.card-content |
|
||||||
background-color: $card-content-background-color |
|
||||||
padding: $card-content-padding |
|
||||||
|
|
||||||
.card-footer |
|
||||||
background-color: $card-footer-background-color |
|
||||||
border-top: $card-footer-border-top |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
|
|
||||||
.card-footer-item |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
flex-basis: 0 |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
justify-content: center |
|
||||||
padding: $card-footer-padding |
|
||||||
&:not(:last-child) |
|
||||||
+ltr-property("border", $card-footer-border-top) |
|
||||||
|
|
||||||
// Combinations |
|
||||||
|
|
||||||
.card |
|
||||||
.media:not(:last-child) |
|
||||||
margin-bottom: $card-media-margin |
|
||||||
@ -1,81 +0,0 @@ |
|||||||
$dropdown-menu-min-width: 12rem !default |
|
||||||
|
|
||||||
$dropdown-content-background-color: $scheme-main !default |
|
||||||
$dropdown-content-arrow: $link !default |
|
||||||
$dropdown-content-offset: 4px !default |
|
||||||
$dropdown-content-padding-bottom: 0.5rem !default |
|
||||||
$dropdown-content-padding-top: 0.5rem !default |
|
||||||
$dropdown-content-radius: $radius !default |
|
||||||
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default |
|
||||||
$dropdown-content-z: 20 !default |
|
||||||
|
|
||||||
$dropdown-item-color: $text !default |
|
||||||
$dropdown-item-hover-color: $scheme-invert !default |
|
||||||
$dropdown-item-hover-background-color: $background !default |
|
||||||
$dropdown-item-active-color: $link-invert !default |
|
||||||
$dropdown-item-active-background-color: $link !default |
|
||||||
|
|
||||||
$dropdown-divider-background-color: $border-light !default |
|
||||||
|
|
||||||
.dropdown |
|
||||||
display: inline-flex |
|
||||||
position: relative |
|
||||||
vertical-align: top |
|
||||||
&.is-active, |
|
||||||
&.is-hoverable:hover |
|
||||||
.dropdown-menu |
|
||||||
display: block |
|
||||||
&.is-right |
|
||||||
.dropdown-menu |
|
||||||
left: auto |
|
||||||
right: 0 |
|
||||||
&.is-up |
|
||||||
.dropdown-menu |
|
||||||
bottom: 100% |
|
||||||
padding-bottom: $dropdown-content-offset |
|
||||||
padding-top: initial |
|
||||||
top: auto |
|
||||||
|
|
||||||
.dropdown-menu |
|
||||||
display: none |
|
||||||
+ltr-position(0, false) |
|
||||||
min-width: $dropdown-menu-min-width |
|
||||||
padding-top: $dropdown-content-offset |
|
||||||
position: absolute |
|
||||||
top: 100% |
|
||||||
z-index: $dropdown-content-z |
|
||||||
|
|
||||||
.dropdown-content |
|
||||||
background-color: $dropdown-content-background-color |
|
||||||
border-radius: $dropdown-content-radius |
|
||||||
box-shadow: $dropdown-content-shadow |
|
||||||
padding-bottom: $dropdown-content-padding-bottom |
|
||||||
padding-top: $dropdown-content-padding-top |
|
||||||
|
|
||||||
.dropdown-item |
|
||||||
color: $dropdown-item-color |
|
||||||
display: block |
|
||||||
font-size: 0.875rem |
|
||||||
line-height: 1.5 |
|
||||||
padding: 0.375rem 1rem |
|
||||||
position: relative |
|
||||||
|
|
||||||
a.dropdown-item, |
|
||||||
button.dropdown-item |
|
||||||
+ltr-property("padding", 3rem) |
|
||||||
text-align: inherit |
|
||||||
white-space: nowrap |
|
||||||
width: 100% |
|
||||||
&:hover |
|
||||||
background-color: $dropdown-item-hover-background-color |
|
||||||
color: $dropdown-item-hover-color |
|
||||||
&.is-active |
|
||||||
background-color: $dropdown-item-active-background-color |
|
||||||
color: $dropdown-item-active-color |
|
||||||
|
|
||||||
.dropdown-divider |
|
||||||
background-color: $dropdown-divider-background-color |
|
||||||
border: none |
|
||||||
display: block |
|
||||||
height: 1px |
|
||||||
margin: 0.5rem 0 |
|
||||||
@ -1,77 +0,0 @@ |
|||||||
$level-item-spacing: ($block-spacing / 2) !default |
|
||||||
|
|
||||||
.level |
|
||||||
@extend %block |
|
||||||
align-items: center |
|
||||||
justify-content: space-between |
|
||||||
code |
|
||||||
border-radius: $radius |
|
||||||
img |
|
||||||
display: inline-block |
|
||||||
vertical-align: top |
|
||||||
// Modifiers |
|
||||||
&.is-mobile |
|
||||||
display: flex |
|
||||||
.level-left, |
|
||||||
.level-right |
|
||||||
display: flex |
|
||||||
.level-left + .level-right |
|
||||||
margin-top: 0 |
|
||||||
.level-item |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 0 |
|
||||||
+ltr-property("margin", $level-item-spacing) |
|
||||||
&:not(.is-narrow) |
|
||||||
flex-grow: 1 |
|
||||||
// Responsiveness |
|
||||||
+tablet |
|
||||||
display: flex |
|
||||||
& > .level-item |
|
||||||
&:not(.is-narrow) |
|
||||||
flex-grow: 1 |
|
||||||
|
|
||||||
.level-item |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
flex-basis: auto |
|
||||||
flex-grow: 0 |
|
||||||
flex-shrink: 0 |
|
||||||
justify-content: center |
|
||||||
.title, |
|
||||||
.subtitle |
|
||||||
margin-bottom: 0 |
|
||||||
// Responsiveness |
|
||||||
+mobile |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: $level-item-spacing |
|
||||||
|
|
||||||
.level-left, |
|
||||||
.level-right |
|
||||||
flex-basis: auto |
|
||||||
flex-grow: 0 |
|
||||||
flex-shrink: 0 |
|
||||||
.level-item |
|
||||||
// Modifiers |
|
||||||
&.is-flexible |
|
||||||
flex-grow: 1 |
|
||||||
// Responsiveness |
|
||||||
+tablet |
|
||||||
&:not(:last-child) |
|
||||||
+ltr-property("margin", $level-item-spacing) |
|
||||||
|
|
||||||
.level-left |
|
||||||
align-items: center |
|
||||||
justify-content: flex-start |
|
||||||
// Responsiveness |
|
||||||
+mobile |
|
||||||
& + .level-right |
|
||||||
margin-top: 1.5rem |
|
||||||
+tablet |
|
||||||
display: flex |
|
||||||
|
|
||||||
.level-right |
|
||||||
align-items: center |
|
||||||
justify-content: flex-end |
|
||||||
// Responsiveness |
|
||||||
+tablet |
|
||||||
display: flex |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
$media-border-color: bulmaRgba($border, 0.5) !default |
|
||||||
$media-spacing: 1rem |
|
||||||
$media-spacing-large: 1.5rem |
|
||||||
|
|
||||||
.media |
|
||||||
align-items: flex-start |
|
||||||
display: flex |
|
||||||
text-align: inherit |
|
||||||
.content:not(:last-child) |
|
||||||
margin-bottom: 0.75rem |
|
||||||
.media |
|
||||||
border-top: 1px solid $media-border-color |
|
||||||
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 $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,57 +0,0 @@ |
|||||||
$menu-item-color: $text !default |
|
||||||
$menu-item-radius: $radius-small !default |
|
||||||
$menu-item-hover-color: $text-strong !default |
|
||||||
$menu-item-hover-background-color: $background !default |
|
||||||
$menu-item-active-color: $link-invert !default |
|
||||||
$menu-item-active-background-color: $link !default |
|
||||||
|
|
||||||
$menu-list-border-left: 1px solid $border !default |
|
||||||
$menu-list-line-height: 1.25 !default |
|
||||||
$menu-list-link-padding: 0.5em 0.75em !default |
|
||||||
$menu-nested-list-margin: 0.75em !default |
|
||||||
$menu-nested-list-padding-left: 0.75em !default |
|
||||||
|
|
||||||
$menu-label-color: $text-light !default |
|
||||||
$menu-label-font-size: 0.75em !default |
|
||||||
$menu-label-letter-spacing: 0.1em !default |
|
||||||
$menu-label-spacing: 1em !default |
|
||||||
|
|
||||||
.menu |
|
||||||
font-size: $size-normal |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
|
|
||||||
.menu-list |
|
||||||
line-height: $menu-list-line-height |
|
||||||
a |
|
||||||
border-radius: $menu-item-radius |
|
||||||
color: $menu-item-color |
|
||||||
display: block |
|
||||||
padding: $menu-list-link-padding |
|
||||||
&:hover |
|
||||||
background-color: $menu-item-hover-background-color |
|
||||||
color: $menu-item-hover-color |
|
||||||
// Modifiers |
|
||||||
&.is-active |
|
||||||
background-color: $menu-item-active-background-color |
|
||||||
color: $menu-item-active-color |
|
||||||
li |
|
||||||
ul |
|
||||||
+ltr-property("border", $menu-list-border-left, false) |
|
||||||
margin: $menu-nested-list-margin |
|
||||||
+ltr-property("padding", $menu-nested-list-padding-left, false) |
|
||||||
|
|
||||||
.menu-label |
|
||||||
color: $menu-label-color |
|
||||||
font-size: $menu-label-font-size |
|
||||||
letter-spacing: $menu-label-letter-spacing |
|
||||||
text-transform: uppercase |
|
||||||
&:not(:first-child) |
|
||||||
margin-top: $menu-label-spacing |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: $menu-label-spacing |
|
||||||
@ -1,99 +0,0 @@ |
|||||||
$message-background-color: $background !default |
|
||||||
$message-radius: $radius !default |
|
||||||
|
|
||||||
$message-header-background-color: $text !default |
|
||||||
$message-header-color: $text-invert !default |
|
||||||
$message-header-weight: $weight-bold !default |
|
||||||
$message-header-padding: 0.75em 1em !default |
|
||||||
$message-header-radius: $radius !default |
|
||||||
|
|
||||||
$message-body-border-color: $border !default |
|
||||||
$message-body-border-width: 0 0 0 4px !default |
|
||||||
$message-body-color: $text !default |
|
||||||
$message-body-padding: 1.25em 1.5em !default |
|
||||||
$message-body-radius: $radius !default |
|
||||||
|
|
||||||
$message-body-pre-background-color: $scheme-main !default |
|
||||||
$message-body-pre-code-background-color: transparent !default |
|
||||||
|
|
||||||
$message-header-body-border-width: 0 !default |
|
||||||
$message-colors: $colors !default |
|
||||||
|
|
||||||
.message |
|
||||||
@extend %block |
|
||||||
background-color: $message-background-color |
|
||||||
border-radius: $message-radius |
|
||||||
font-size: $size-normal |
|
||||||
strong |
|
||||||
color: currentColor |
|
||||||
a:not(.button):not(.tag):not(.dropdown-item) |
|
||||||
color: currentColor |
|
||||||
text-decoration: underline |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
// Colors |
|
||||||
@each $name, $components in $message-colors |
|
||||||
$color: nth($components, 1) |
|
||||||
$color-invert: nth($components, 2) |
|
||||||
$color-light: null |
|
||||||
$color-dark: null |
|
||||||
|
|
||||||
@if length($components) >= 3 |
|
||||||
$color-light: nth($components, 3) |
|
||||||
@if length($components) >= 4 |
|
||||||
$color-dark: nth($components, 4) |
|
||||||
@else |
|
||||||
$color-luminance: colorLuminance($color) |
|
||||||
$darken-percentage: $color-luminance * 70% |
|
||||||
$desaturate-percentage: $color-luminance * 30% |
|
||||||
$color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) |
|
||||||
@else |
|
||||||
$color-lightning: max((100% - lightness($color)) - 2%, 0%) |
|
||||||
$color-light: lighten($color, $color-lightning) |
|
||||||
|
|
||||||
&.is-#{$name} |
|
||||||
background-color: $color-light |
|
||||||
.message-header |
|
||||||
background-color: $color |
|
||||||
color: $color-invert |
|
||||||
.message-body |
|
||||||
border-color: $color |
|
||||||
color: $color-dark |
|
||||||
|
|
||||||
.message-header |
|
||||||
align-items: center |
|
||||||
background-color: $message-header-background-color |
|
||||||
border-radius: $message-header-radius $message-header-radius 0 0 |
|
||||||
color: $message-header-color |
|
||||||
display: flex |
|
||||||
font-weight: $message-header-weight |
|
||||||
justify-content: space-between |
|
||||||
line-height: 1.25 |
|
||||||
padding: $message-header-padding |
|
||||||
position: relative |
|
||||||
.delete |
|
||||||
flex-grow: 0 |
|
||||||
flex-shrink: 0 |
|
||||||
+ltr-property("margin", 0.75em, false) |
|
||||||
& + .message-body |
|
||||||
border-width: $message-header-body-border-width |
|
||||||
border-top-left-radius: 0 |
|
||||||
border-top-right-radius: 0 |
|
||||||
|
|
||||||
.message-body |
|
||||||
border-color: $message-body-border-color |
|
||||||
border-radius: $message-body-radius |
|
||||||
border-style: solid |
|
||||||
border-width: $message-body-border-width |
|
||||||
color: $message-body-color |
|
||||||
padding: $message-body-padding |
|
||||||
code, |
|
||||||
pre |
|
||||||
background-color: $message-body-pre-background-color |
|
||||||
pre code |
|
||||||
background-color: $message-body-pre-code-background-color |
|
||||||
@ -1,115 +0,0 @@ |
|||||||
$modal-z: 40 !default |
|
||||||
|
|
||||||
$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default |
|
||||||
|
|
||||||
$modal-content-width: 640px !default |
|
||||||
$modal-content-margin-mobile: 20px !default |
|
||||||
$modal-content-spacing-mobile: 160px !default |
|
||||||
$modal-content-spacing-tablet: 40px !default |
|
||||||
|
|
||||||
$modal-close-dimensions: 40px !default |
|
||||||
$modal-close-right: 20px !default |
|
||||||
$modal-close-top: 20px !default |
|
||||||
|
|
||||||
$modal-card-spacing: 40px !default |
|
||||||
|
|
||||||
$modal-card-head-background-color: $background !default |
|
||||||
$modal-card-head-border-bottom: 1px solid $border !default |
|
||||||
$modal-card-head-padding: 20px !default |
|
||||||
$modal-card-head-radius: $radius-large !default |
|
||||||
|
|
||||||
$modal-card-title-color: $text-strong !default |
|
||||||
$modal-card-title-line-height: 1 !default |
|
||||||
$modal-card-title-size: $size-4 !default |
|
||||||
|
|
||||||
$modal-card-foot-radius: $radius-large !default |
|
||||||
$modal-card-foot-border-top: 1px solid $border !default |
|
||||||
|
|
||||||
$modal-card-body-background-color: $scheme-main !default |
|
||||||
$modal-card-body-padding: 20px !default |
|
||||||
|
|
||||||
$modal-breakpoint: $tablet !default |
|
||||||
|
|
||||||
.modal |
|
||||||
@extend %overlay |
|
||||||
align-items: center |
|
||||||
display: none |
|
||||||
flex-direction: column |
|
||||||
justify-content: center |
|
||||||
overflow: hidden |
|
||||||
position: fixed |
|
||||||
z-index: $modal-z |
|
||||||
// Modifiers |
|
||||||
&.is-active |
|
||||||
display: flex |
|
||||||
|
|
||||||
.modal-background |
|
||||||
@extend %overlay |
|
||||||
background-color: $modal-background-background-color |
|
||||||
|
|
||||||
.modal-content, |
|
||||||
.modal-card |
|
||||||
margin: 0 $modal-content-margin-mobile |
|
||||||
max-height: calc(100vh - #{$modal-content-spacing-mobile}) |
|
||||||
overflow: auto |
|
||||||
position: relative |
|
||||||
width: 100% |
|
||||||
// Responsiveness |
|
||||||
+from($modal-breakpoint) |
|
||||||
margin: 0 auto |
|
||||||
max-height: calc(100vh - #{$modal-content-spacing-tablet}) |
|
||||||
width: $modal-content-width |
|
||||||
|
|
||||||
.modal-close |
|
||||||
@extend %delete |
|
||||||
background: none |
|
||||||
height: $modal-close-dimensions |
|
||||||
position: fixed |
|
||||||
+ltr-position($modal-close-right) |
|
||||||
top: $modal-close-top |
|
||||||
width: $modal-close-dimensions |
|
||||||
|
|
||||||
.modal-card |
|
||||||
display: flex |
|
||||||
flex-direction: column |
|
||||||
max-height: calc(100vh - #{$modal-card-spacing}) |
|
||||||
overflow: hidden |
|
||||||
-ms-overflow-y: visible |
|
||||||
|
|
||||||
.modal-card-head, |
|
||||||
.modal-card-foot |
|
||||||
align-items: center |
|
||||||
background-color: $modal-card-head-background-color |
|
||||||
display: flex |
|
||||||
flex-shrink: 0 |
|
||||||
justify-content: flex-start |
|
||||||
padding: $modal-card-head-padding |
|
||||||
position: relative |
|
||||||
|
|
||||||
.modal-card-head |
|
||||||
border-bottom: $modal-card-head-border-bottom |
|
||||||
border-top-left-radius: $modal-card-head-radius |
|
||||||
border-top-right-radius: $modal-card-head-radius |
|
||||||
|
|
||||||
.modal-card-title |
|
||||||
color: $modal-card-title-color |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
font-size: $modal-card-title-size |
|
||||||
line-height: $modal-card-title-line-height |
|
||||||
|
|
||||||
.modal-card-foot |
|
||||||
border-bottom-left-radius: $modal-card-foot-radius |
|
||||||
border-bottom-right-radius: $modal-card-foot-radius |
|
||||||
border-top: $modal-card-foot-border-top |
|
||||||
.button |
|
||||||
&:not(:last-child) |
|
||||||
+ltr-property("margin", 0.5em) |
|
||||||
|
|
||||||
.modal-card-body |
|
||||||
+overflow-touch |
|
||||||
background-color: $modal-card-body-background-color |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
overflow: auto |
|
||||||
padding: $modal-card-body-padding |
|
||||||
@ -1,443 +0,0 @@ |
|||||||
$navbar-background-color: $scheme-main !default |
|
||||||
$navbar-box-shadow-size: 0 2px 0 0 !default |
|
||||||
$navbar-box-shadow-color: $background !default |
|
||||||
$navbar-height: 3.25rem !default |
|
||||||
$navbar-padding-vertical: 1rem !default |
|
||||||
$navbar-padding-horizontal: 2rem !default |
|
||||||
$navbar-z: 30 !default |
|
||||||
$navbar-fixed-z: 30 !default |
|
||||||
|
|
||||||
$navbar-item-color: $text !default |
|
||||||
$navbar-item-hover-color: $link !default |
|
||||||
$navbar-item-hover-background-color: $scheme-main-bis !default |
|
||||||
$navbar-item-active-color: $scheme-invert !default |
|
||||||
$navbar-item-active-background-color: transparent !default |
|
||||||
$navbar-item-img-max-height: 1.75rem !default |
|
||||||
|
|
||||||
$navbar-burger-color: $navbar-item-color !default |
|
||||||
|
|
||||||
$navbar-tab-hover-background-color: transparent !default |
|
||||||
$navbar-tab-hover-border-bottom-color: $link !default |
|
||||||
$navbar-tab-active-color: $link !default |
|
||||||
$navbar-tab-active-background-color: transparent !default |
|
||||||
$navbar-tab-active-border-bottom-color: $link !default |
|
||||||
$navbar-tab-active-border-bottom-style: solid !default |
|
||||||
$navbar-tab-active-border-bottom-width: 3px !default |
|
||||||
|
|
||||||
$navbar-dropdown-background-color: $scheme-main !default |
|
||||||
$navbar-dropdown-border-top: 2px solid $border !default |
|
||||||
$navbar-dropdown-offset: -4px !default |
|
||||||
$navbar-dropdown-arrow: $link !default |
|
||||||
$navbar-dropdown-radius: $radius-large !default |
|
||||||
$navbar-dropdown-z: 20 !default |
|
||||||
|
|
||||||
$navbar-dropdown-boxed-radius: $radius-large !default |
|
||||||
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default |
|
||||||
|
|
||||||
$navbar-dropdown-item-hover-color: $scheme-invert !default |
|
||||||
$navbar-dropdown-item-hover-background-color: $background !default |
|
||||||
$navbar-dropdown-item-active-color: $link !default |
|
||||||
$navbar-dropdown-item-active-background-color: $background !default |
|
||||||
|
|
||||||
$navbar-divider-background-color: $background !default |
|
||||||
$navbar-divider-height: 2px !default |
|
||||||
|
|
||||||
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default |
|
||||||
|
|
||||||
$navbar-breakpoint: $desktop !default |
|
||||||
|
|
||||||
$navbar-colors: $colors !default |
|
||||||
|
|
||||||
=navbar-fixed |
|
||||||
left: 0 |
|
||||||
position: fixed |
|
||||||
right: 0 |
|
||||||
z-index: $navbar-fixed-z |
|
||||||
|
|
||||||
.navbar |
|
||||||
background-color: $navbar-background-color |
|
||||||
min-height: $navbar-height |
|
||||||
position: relative |
|
||||||
z-index: $navbar-z |
|
||||||
@each $name, $pair in $navbar-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
$color-invert: nth($pair, 2) |
|
||||||
&.is-#{$name} |
|
||||||
background-color: $color |
|
||||||
color: $color-invert |
|
||||||
.navbar-brand |
|
||||||
& > .navbar-item, |
|
||||||
.navbar-link |
|
||||||
color: $color-invert |
|
||||||
& > a.navbar-item, |
|
||||||
.navbar-link |
|
||||||
&:focus, |
|
||||||
&:hover, |
|
||||||
&.is-active |
|
||||||
background-color: bulmaDarken($color, 5%) |
|
||||||
color: $color-invert |
|
||||||
.navbar-link |
|
||||||
&::after |
|
||||||
border-color: $color-invert |
|
||||||
.navbar-burger |
|
||||||
color: $color-invert |
|
||||||
+from($navbar-breakpoint) |
|
||||||
.navbar-start, |
|
||||||
.navbar-end |
|
||||||
& > .navbar-item, |
|
||||||
.navbar-link |
|
||||||
color: $color-invert |
|
||||||
& > a.navbar-item, |
|
||||||
.navbar-link |
|
||||||
&:focus, |
|
||||||
&:hover, |
|
||||||
&.is-active |
|
||||||
background-color: bulmaDarken($color, 5%) |
|
||||||
color: $color-invert |
|
||||||
.navbar-link |
|
||||||
&::after |
|
||||||
border-color: $color-invert |
|
||||||
.navbar-item.has-dropdown:focus .navbar-link, |
|
||||||
.navbar-item.has-dropdown:hover .navbar-link, |
|
||||||
.navbar-item.has-dropdown.is-active .navbar-link |
|
||||||
background-color: bulmaDarken($color, 5%) |
|
||||||
color: $color-invert |
|
||||||
.navbar-dropdown |
|
||||||
a.navbar-item |
|
||||||
&.is-active |
|
||||||
background-color: $color |
|
||||||
color: $color-invert |
|
||||||
& > .container |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
min-height: $navbar-height |
|
||||||
width: 100% |
|
||||||
&.has-shadow |
|
||||||
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color |
|
||||||
&.is-fixed-bottom, |
|
||||||
&.is-fixed-top |
|
||||||
+navbar-fixed |
|
||||||
&.is-fixed-bottom |
|
||||||
bottom: 0 |
|
||||||
&.has-shadow |
|
||||||
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color |
|
||||||
&.is-fixed-top |
|
||||||
top: 0 |
|
||||||
|
|
||||||
html, |
|
||||||
body |
|
||||||
&.has-navbar-fixed-top |
|
||||||
padding-top: $navbar-height |
|
||||||
&.has-navbar-fixed-bottom |
|
||||||
padding-bottom: $navbar-height |
|
||||||
|
|
||||||
.navbar-brand, |
|
||||||
.navbar-tabs |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
flex-shrink: 0 |
|
||||||
min-height: $navbar-height |
|
||||||
|
|
||||||
.navbar-brand |
|
||||||
a.navbar-item |
|
||||||
&:focus, |
|
||||||
&:hover |
|
||||||
background-color: transparent |
|
||||||
|
|
||||||
.navbar-tabs |
|
||||||
+overflow-touch |
|
||||||
max-width: 100vw |
|
||||||
overflow-x: auto |
|
||||||
overflow-y: hidden |
|
||||||
|
|
||||||
.navbar-burger |
|
||||||
color: $navbar-burger-color |
|
||||||
+hamburger($navbar-height) |
|
||||||
+ltr-property("margin", auto, false) |
|
||||||
|
|
||||||
.navbar-menu |
|
||||||
display: none |
|
||||||
|
|
||||||
.navbar-item, |
|
||||||
.navbar-link |
|
||||||
color: $navbar-item-color |
|
||||||
display: block |
|
||||||
line-height: 1.5 |
|
||||||
padding: 0.5rem 0.75rem |
|
||||||
position: relative |
|
||||||
.icon |
|
||||||
&:only-child |
|
||||||
margin-left: -0.25rem |
|
||||||
margin-right: -0.25rem |
|
||||||
|
|
||||||
a.navbar-item, |
|
||||||
.navbar-link |
|
||||||
cursor: pointer |
|
||||||
&:focus, |
|
||||||
&:focus-within, |
|
||||||
&:hover, |
|
||||||
&.is-active |
|
||||||
background-color: $navbar-item-hover-background-color |
|
||||||
color: $navbar-item-hover-color |
|
||||||
|
|
||||||
.navbar-item |
|
||||||
flex-grow: 0 |
|
||||||
flex-shrink: 0 |
|
||||||
img |
|
||||||
max-height: $navbar-item-img-max-height |
|
||||||
&.has-dropdown |
|
||||||
padding: 0 |
|
||||||
&.is-expanded |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
&.is-tab |
|
||||||
border-bottom: 1px solid transparent |
|
||||||
min-height: $navbar-height |
|
||||||
padding-bottom: calc(0.5rem - 1px) |
|
||||||
&:focus, |
|
||||||
&:hover |
|
||||||
background-color: $navbar-tab-hover-background-color |
|
||||||
border-bottom-color: $navbar-tab-hover-border-bottom-color |
|
||||||
&.is-active |
|
||||||
background-color: $navbar-tab-active-background-color |
|
||||||
border-bottom-color: $navbar-tab-active-border-bottom-color |
|
||||||
border-bottom-style: $navbar-tab-active-border-bottom-style |
|
||||||
border-bottom-width: $navbar-tab-active-border-bottom-width |
|
||||||
color: $navbar-tab-active-color |
|
||||||
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}) |
|
||||||
|
|
||||||
.navbar-content |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
|
|
||||||
.navbar-link:not(.is-arrowless) |
|
||||||
+ltr-property("padding", 2.5em) |
|
||||||
&::after |
|
||||||
@extend %arrow |
|
||||||
border-color: $navbar-dropdown-arrow |
|
||||||
margin-top: -0.375em |
|
||||||
+ltr-position(1.125em) |
|
||||||
|
|
||||||
.navbar-dropdown |
|
||||||
font-size: 0.875rem |
|
||||||
padding-bottom: 0.5rem |
|
||||||
padding-top: 0.5rem |
|
||||||
.navbar-item |
|
||||||
padding-left: 1.5rem |
|
||||||
padding-right: 1.5rem |
|
||||||
|
|
||||||
.navbar-divider |
|
||||||
background-color: $navbar-divider-background-color |
|
||||||
border: none |
|
||||||
display: none |
|
||||||
height: $navbar-divider-height |
|
||||||
margin: 0.5rem 0 |
|
||||||
|
|
||||||
+until($navbar-breakpoint) |
|
||||||
.navbar > .container |
|
||||||
display: block |
|
||||||
.navbar-brand, |
|
||||||
.navbar-tabs |
|
||||||
.navbar-item |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
.navbar-link |
|
||||||
&::after |
|
||||||
display: none |
|
||||||
.navbar-menu |
|
||||||
background-color: $navbar-background-color |
|
||||||
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1) |
|
||||||
padding: 0.5rem 0 |
|
||||||
&.is-active |
|
||||||
display: block |
|
||||||
// Fixed navbar |
|
||||||
.navbar |
|
||||||
&.is-fixed-bottom-touch, |
|
||||||
&.is-fixed-top-touch |
|
||||||
+navbar-fixed |
|
||||||
&.is-fixed-bottom-touch |
|
||||||
bottom: 0 |
|
||||||
&.has-shadow |
|
||||||
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) |
|
||||||
&.is-fixed-top-touch |
|
||||||
top: 0 |
|
||||||
&.is-fixed-top, |
|
||||||
&.is-fixed-top-touch |
|
||||||
.navbar-menu |
|
||||||
+overflow-touch |
|
||||||
max-height: calc(100vh - #{$navbar-height}) |
|
||||||
overflow: auto |
|
||||||
html, |
|
||||||
body |
|
||||||
&.has-navbar-fixed-top-touch |
|
||||||
padding-top: $navbar-height |
|
||||||
&.has-navbar-fixed-bottom-touch |
|
||||||
padding-bottom: $navbar-height |
|
||||||
|
|
||||||
+from($navbar-breakpoint) |
|
||||||
.navbar, |
|
||||||
.navbar-menu, |
|
||||||
.navbar-start, |
|
||||||
.navbar-end |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
.navbar |
|
||||||
min-height: $navbar-height |
|
||||||
&.is-spaced |
|
||||||
padding: $navbar-padding-vertical $navbar-padding-horizontal |
|
||||||
.navbar-start, |
|
||||||
.navbar-end |
|
||||||
align-items: center |
|
||||||
a.navbar-item, |
|
||||||
.navbar-link |
|
||||||
border-radius: $radius |
|
||||||
&.is-transparent |
|
||||||
a.navbar-item, |
|
||||||
.navbar-link |
|
||||||
&:focus, |
|
||||||
&:hover, |
|
||||||
&.is-active |
|
||||||
background-color: transparent !important |
|
||||||
.navbar-item.has-dropdown |
|
||||||
&.is-active, |
|
||||||
&.is-hoverable:focus, |
|
||||||
&.is-hoverable:focus-within, |
|
||||||
&.is-hoverable:hover |
|
||||||
.navbar-link |
|
||||||
background-color: transparent !important |
|
||||||
.navbar-dropdown |
|
||||||
a.navbar-item |
|
||||||
&:focus, |
|
||||||
&:hover |
|
||||||
background-color: $navbar-dropdown-item-hover-background-color |
|
||||||
color: $navbar-dropdown-item-hover-color |
|
||||||
&.is-active |
|
||||||
background-color: $navbar-dropdown-item-active-background-color |
|
||||||
color: $navbar-dropdown-item-active-color |
|
||||||
.navbar-burger |
|
||||||
display: none |
|
||||||
.navbar-item, |
|
||||||
.navbar-link |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
.navbar-item |
|
||||||
&.has-dropdown |
|
||||||
align-items: stretch |
|
||||||
&.has-dropdown-up |
|
||||||
.navbar-link::after |
|
||||||
transform: rotate(135deg) translate(0.25em, -0.25em) |
|
||||||
.navbar-dropdown |
|
||||||
border-bottom: $navbar-dropdown-border-top |
|
||||||
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 |
|
||||||
border-top: none |
|
||||||
bottom: 100% |
|
||||||
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1) |
|
||||||
top: auto |
|
||||||
&.is-active, |
|
||||||
&.is-hoverable:focus, |
|
||||||
&.is-hoverable:focus-within, |
|
||||||
&.is-hoverable:hover |
|
||||||
.navbar-dropdown |
|
||||||
display: block |
|
||||||
.navbar.is-spaced &, |
|
||||||
&.is-boxed |
|
||||||
opacity: 1 |
|
||||||
pointer-events: auto |
|
||||||
transform: translateY(0) |
|
||||||
.navbar-menu |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
.navbar-start |
|
||||||
justify-content: flex-start |
|
||||||
+ltr-property("margin", auto) |
|
||||||
.navbar-end |
|
||||||
justify-content: flex-end |
|
||||||
+ltr-property("margin", auto, false) |
|
||||||
.navbar-dropdown |
|
||||||
background-color: $navbar-dropdown-background-color |
|
||||||
border-bottom-left-radius: $navbar-dropdown-radius |
|
||||||
border-bottom-right-radius: $navbar-dropdown-radius |
|
||||||
border-top: $navbar-dropdown-border-top |
|
||||||
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1) |
|
||||||
display: none |
|
||||||
font-size: 0.875rem |
|
||||||
+ltr-position(0, false) |
|
||||||
min-width: 100% |
|
||||||
position: absolute |
|
||||||
top: 100% |
|
||||||
z-index: $navbar-dropdown-z |
|
||||||
.navbar-item |
|
||||||
padding: 0.375rem 1rem |
|
||||||
white-space: nowrap |
|
||||||
a.navbar-item |
|
||||||
+ltr-property("padding", 3rem) |
|
||||||
&:focus, |
|
||||||
&:hover |
|
||||||
background-color: $navbar-dropdown-item-hover-background-color |
|
||||||
color: $navbar-dropdown-item-hover-color |
|
||||||
&.is-active |
|
||||||
background-color: $navbar-dropdown-item-active-background-color |
|
||||||
color: $navbar-dropdown-item-active-color |
|
||||||
.navbar.is-spaced &, |
|
||||||
&.is-boxed |
|
||||||
border-radius: $navbar-dropdown-boxed-radius |
|
||||||
border-top: none |
|
||||||
box-shadow: $navbar-dropdown-boxed-shadow |
|
||||||
display: block |
|
||||||
opacity: 0 |
|
||||||
pointer-events: none |
|
||||||
top: calc(100% + (#{$navbar-dropdown-offset})) |
|
||||||
transform: translateY(-5px) |
|
||||||
transition-duration: $speed |
|
||||||
transition-property: opacity, transform |
|
||||||
&.is-right |
|
||||||
left: auto |
|
||||||
right: 0 |
|
||||||
.navbar-divider |
|
||||||
display: block |
|
||||||
.navbar > .container, |
|
||||||
.container > .navbar |
|
||||||
.navbar-brand |
|
||||||
+ltr-property("margin", -.75rem, false) |
|
||||||
.navbar-menu |
|
||||||
+ltr-property("margin", -.75rem) |
|
||||||
// Fixed navbar |
|
||||||
.navbar |
|
||||||
&.is-fixed-bottom-desktop, |
|
||||||
&.is-fixed-top-desktop |
|
||||||
+navbar-fixed |
|
||||||
&.is-fixed-bottom-desktop |
|
||||||
bottom: 0 |
|
||||||
&.has-shadow |
|
||||||
box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) |
|
||||||
&.is-fixed-top-desktop |
|
||||||
top: 0 |
|
||||||
html, |
|
||||||
body |
|
||||||
&.has-navbar-fixed-top-desktop |
|
||||||
padding-top: $navbar-height |
|
||||||
&.has-navbar-fixed-bottom-desktop |
|
||||||
padding-bottom: $navbar-height |
|
||||||
&.has-spaced-navbar-fixed-top |
|
||||||
padding-top: $navbar-height + ($navbar-padding-vertical * 2) |
|
||||||
&.has-spaced-navbar-fixed-bottom |
|
||||||
padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) |
|
||||||
// Hover/Active states |
|
||||||
a.navbar-item, |
|
||||||
.navbar-link |
|
||||||
&.is-active |
|
||||||
color: $navbar-item-active-color |
|
||||||
&.is-active:not(:focus):not(:hover) |
|
||||||
background-color: $navbar-item-active-background-color |
|
||||||
.navbar-item.has-dropdown |
|
||||||
&:focus, |
|
||||||
&:hover, |
|
||||||
&.is-active |
|
||||||
.navbar-link |
|
||||||
background-color: $navbar-item-hover-background-color |
|
||||||
|
|
||||||
// Combination |
|
||||||
|
|
||||||
.hero |
|
||||||
&.is-fullheight-with-navbar |
|
||||||
min-height: calc(100vh - #{$navbar-height}) |
|
||||||
@ -1,150 +0,0 @@ |
|||||||
$pagination-color: $text-strong !default |
|
||||||
$pagination-border-color: $border !default |
|
||||||
$pagination-margin: -0.25rem !default |
|
||||||
$pagination-min-width: $control-height !default |
|
||||||
|
|
||||||
$pagination-item-font-size: 1em !default |
|
||||||
$pagination-item-margin: 0.25rem !default |
|
||||||
$pagination-item-padding-left: 0.5em !default |
|
||||||
$pagination-item-padding-right: 0.5em !default |
|
||||||
|
|
||||||
$pagination-hover-color: $link-hover !default |
|
||||||
$pagination-hover-border-color: $link-hover-border !default |
|
||||||
|
|
||||||
$pagination-focus-color: $link-focus !default |
|
||||||
$pagination-focus-border-color: $link-focus-border !default |
|
||||||
|
|
||||||
$pagination-active-color: $link-active !default |
|
||||||
$pagination-active-border-color: $link-active-border !default |
|
||||||
|
|
||||||
$pagination-disabled-color: $text-light !default |
|
||||||
$pagination-disabled-background-color: $border !default |
|
||||||
$pagination-disabled-border-color: $border !default |
|
||||||
|
|
||||||
$pagination-current-color: $link-invert !default |
|
||||||
$pagination-current-background-color: $link !default |
|
||||||
$pagination-current-border-color: $link !default |
|
||||||
|
|
||||||
$pagination-ellipsis-color: $grey-light !default |
|
||||||
|
|
||||||
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) |
|
||||||
|
|
||||||
.pagination |
|
||||||
@extend %block |
|
||||||
font-size: $size-normal |
|
||||||
margin: $pagination-margin |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
&.is-rounded |
|
||||||
.pagination-previous, |
|
||||||
.pagination-next |
|
||||||
padding-left: 1em |
|
||||||
padding-right: 1em |
|
||||||
border-radius: $radius-rounded |
|
||||||
.pagination-link |
|
||||||
border-radius: $radius-rounded |
|
||||||
|
|
||||||
.pagination, |
|
||||||
.pagination-list |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
justify-content: center |
|
||||||
text-align: center |
|
||||||
|
|
||||||
.pagination-previous, |
|
||||||
.pagination-next, |
|
||||||
.pagination-link, |
|
||||||
.pagination-ellipsis |
|
||||||
@extend %control |
|
||||||
@extend %unselectable |
|
||||||
font-size: $pagination-item-font-size |
|
||||||
justify-content: center |
|
||||||
margin: $pagination-item-margin |
|
||||||
padding-left: $pagination-item-padding-left |
|
||||||
padding-right: $pagination-item-padding-right |
|
||||||
text-align: center |
|
||||||
|
|
||||||
.pagination-previous, |
|
||||||
.pagination-next, |
|
||||||
.pagination-link |
|
||||||
border-color: $pagination-border-color |
|
||||||
color: $pagination-color |
|
||||||
min-width: $pagination-min-width |
|
||||||
&:hover |
|
||||||
border-color: $pagination-hover-border-color |
|
||||||
color: $pagination-hover-color |
|
||||||
&:focus |
|
||||||
border-color: $pagination-focus-border-color |
|
||||||
&:active |
|
||||||
box-shadow: $pagination-shadow-inset |
|
||||||
&[disabled] |
|
||||||
background-color: $pagination-disabled-background-color |
|
||||||
border-color: $pagination-disabled-border-color |
|
||||||
box-shadow: none |
|
||||||
color: $pagination-disabled-color |
|
||||||
opacity: 0.5 |
|
||||||
|
|
||||||
.pagination-previous, |
|
||||||
.pagination-next |
|
||||||
padding-left: 0.75em |
|
||||||
padding-right: 0.75em |
|
||||||
white-space: nowrap |
|
||||||
|
|
||||||
.pagination-link |
|
||||||
&.is-current |
|
||||||
background-color: $pagination-current-background-color |
|
||||||
border-color: $pagination-current-border-color |
|
||||||
color: $pagination-current-color |
|
||||||
|
|
||||||
.pagination-ellipsis |
|
||||||
color: $pagination-ellipsis-color |
|
||||||
pointer-events: none |
|
||||||
|
|
||||||
.pagination-list |
|
||||||
flex-wrap: wrap |
|
||||||
|
|
||||||
+mobile |
|
||||||
.pagination |
|
||||||
flex-wrap: wrap |
|
||||||
.pagination-previous, |
|
||||||
.pagination-next |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
.pagination-list |
|
||||||
li |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
|
|
||||||
+tablet |
|
||||||
.pagination-list |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
justify-content: flex-start |
|
||||||
order: 1 |
|
||||||
.pagination-previous |
|
||||||
order: 2 |
|
||||||
.pagination-next |
|
||||||
order: 3 |
|
||||||
.pagination |
|
||||||
justify-content: space-between |
|
||||||
&.is-centered |
|
||||||
.pagination-previous |
|
||||||
order: 1 |
|
||||||
.pagination-list |
|
||||||
justify-content: center |
|
||||||
order: 2 |
|
||||||
.pagination-next |
|
||||||
order: 3 |
|
||||||
&.is-right |
|
||||||
.pagination-previous |
|
||||||
order: 1 |
|
||||||
.pagination-next |
|
||||||
order: 2 |
|
||||||
.pagination-list |
|
||||||
justify-content: flex-end |
|
||||||
order: 3 |
|
||||||
@ -1,119 +0,0 @@ |
|||||||
$panel-margin: $block-spacing !default |
|
||||||
$panel-item-border: 1px solid $border-light !default |
|
||||||
$panel-radius: $radius-large !default |
|
||||||
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default |
|
||||||
|
|
||||||
$panel-heading-background-color: $border-light !default |
|
||||||
$panel-heading-color: $text-strong !default |
|
||||||
$panel-heading-line-height: 1.25 !default |
|
||||||
$panel-heading-padding: 0.75em 1em !default |
|
||||||
$panel-heading-radius: $radius !default |
|
||||||
$panel-heading-size: 1.25em !default |
|
||||||
$panel-heading-weight: $weight-bold !default |
|
||||||
|
|
||||||
$panel-tabs-font-size: 0.875em !default |
|
||||||
$panel-tab-border-bottom: 1px solid $border !default |
|
||||||
$panel-tab-active-border-bottom-color: $link-active-border !default |
|
||||||
$panel-tab-active-color: $link-active !default |
|
||||||
|
|
||||||
$panel-list-item-color: $text !default |
|
||||||
$panel-list-item-hover-color: $link !default |
|
||||||
|
|
||||||
$panel-block-color: $text-strong !default |
|
||||||
$panel-block-hover-background-color: $background !default |
|
||||||
$panel-block-active-border-left-color: $link !default |
|
||||||
$panel-block-active-color: $link-active !default |
|
||||||
$panel-block-active-icon-color: $link !default |
|
||||||
|
|
||||||
$panel-icon-color: $text-light !default |
|
||||||
$panel-colors: $colors !default |
|
||||||
|
|
||||||
.panel |
|
||||||
border-radius: $panel-radius |
|
||||||
box-shadow: $panel-shadow |
|
||||||
font-size: $size-normal |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: $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-tabs, |
|
||||||
.panel-block |
|
||||||
&:not(:last-child) |
|
||||||
border-bottom: $panel-item-border |
|
||||||
|
|
||||||
.panel-heading |
|
||||||
background-color: $panel-heading-background-color |
|
||||||
border-radius: $panel-radius $panel-radius 0 0 |
|
||||||
color: $panel-heading-color |
|
||||||
font-size: $panel-heading-size |
|
||||||
font-weight: $panel-heading-weight |
|
||||||
line-height: $panel-heading-line-height |
|
||||||
padding: $panel-heading-padding |
|
||||||
|
|
||||||
.panel-tabs |
|
||||||
align-items: flex-end |
|
||||||
display: flex |
|
||||||
font-size: $panel-tabs-font-size |
|
||||||
justify-content: center |
|
||||||
a |
|
||||||
border-bottom: $panel-tab-border-bottom |
|
||||||
margin-bottom: -1px |
|
||||||
padding: 0.5em |
|
||||||
// Modifiers |
|
||||||
&.is-active |
|
||||||
border-bottom-color: $panel-tab-active-border-bottom-color |
|
||||||
color: $panel-tab-active-color |
|
||||||
|
|
||||||
.panel-list |
|
||||||
a |
|
||||||
color: $panel-list-item-color |
|
||||||
&:hover |
|
||||||
color: $panel-list-item-hover-color |
|
||||||
|
|
||||||
.panel-block |
|
||||||
align-items: center |
|
||||||
color: $panel-block-color |
|
||||||
display: flex |
|
||||||
justify-content: flex-start |
|
||||||
padding: 0.5em 0.75em |
|
||||||
input[type="checkbox"] |
|
||||||
+ltr-property("margin", 0.75em) |
|
||||||
& > .control |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
width: 100% |
|
||||||
&.is-wrapped |
|
||||||
flex-wrap: wrap |
|
||||||
&.is-active |
|
||||||
border-left-color: $panel-block-active-border-left-color |
|
||||||
color: $panel-block-active-color |
|
||||||
.panel-icon |
|
||||||
color: $panel-block-active-icon-color |
|
||||||
&:last-child |
|
||||||
border-bottom-left-radius: $panel-radius |
|
||||||
border-bottom-right-radius: $panel-radius |
|
||||||
|
|
||||||
a.panel-block, |
|
||||||
label.panel-block |
|
||||||
cursor: pointer |
|
||||||
&:hover |
|
||||||
background-color: $panel-block-hover-background-color |
|
||||||
|
|
||||||
.panel-icon |
|
||||||
+fa(14px, 1em) |
|
||||||
color: $panel-icon-color |
|
||||||
+ltr-property("margin", 0.75em) |
|
||||||
.fa |
|
||||||
font-size: inherit |
|
||||||
line-height: inherit |
|
||||||
@ -1,174 +0,0 @@ |
|||||||
$tabs-border-bottom-color: $border !default |
|
||||||
$tabs-border-bottom-style: solid !default |
|
||||||
$tabs-border-bottom-width: 1px !default |
|
||||||
$tabs-link-color: $text !default |
|
||||||
$tabs-link-hover-border-bottom-color: $text-strong !default |
|
||||||
$tabs-link-hover-color: $text-strong !default |
|
||||||
$tabs-link-active-border-bottom-color: $link !default |
|
||||||
$tabs-link-active-color: $link !default |
|
||||||
$tabs-link-padding: 0.5em 1em !default |
|
||||||
|
|
||||||
$tabs-boxed-link-radius: $radius !default |
|
||||||
$tabs-boxed-link-hover-background-color: $background !default |
|
||||||
$tabs-boxed-link-hover-border-bottom-color: $border !default |
|
||||||
|
|
||||||
$tabs-boxed-link-active-background-color: $scheme-main !default |
|
||||||
$tabs-boxed-link-active-border-color: $border !default |
|
||||||
$tabs-boxed-link-active-border-bottom-color: transparent !default |
|
||||||
|
|
||||||
$tabs-toggle-link-border-color: $border !default |
|
||||||
$tabs-toggle-link-border-style: solid !default |
|
||||||
$tabs-toggle-link-border-width: 1px !default |
|
||||||
$tabs-toggle-link-hover-background-color: $background !default |
|
||||||
$tabs-toggle-link-hover-border-color: $border-hover !default |
|
||||||
$tabs-toggle-link-radius: $radius !default |
|
||||||
$tabs-toggle-link-active-background-color: $link !default |
|
||||||
$tabs-toggle-link-active-border-color: $link !default |
|
||||||
$tabs-toggle-link-active-color: $link-invert !default |
|
||||||
|
|
||||||
.tabs |
|
||||||
@extend %block |
|
||||||
+overflow-touch |
|
||||||
@extend %unselectable |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
font-size: $size-normal |
|
||||||
justify-content: space-between |
|
||||||
overflow: hidden |
|
||||||
overflow-x: auto |
|
||||||
white-space: nowrap |
|
||||||
a |
|
||||||
align-items: center |
|
||||||
border-bottom-color: $tabs-border-bottom-color |
|
||||||
border-bottom-style: $tabs-border-bottom-style |
|
||||||
border-bottom-width: $tabs-border-bottom-width |
|
||||||
color: $tabs-link-color |
|
||||||
display: flex |
|
||||||
justify-content: center |
|
||||||
margin-bottom: -#{$tabs-border-bottom-width} |
|
||||||
padding: $tabs-link-padding |
|
||||||
vertical-align: top |
|
||||||
&:hover |
|
||||||
border-bottom-color: $tabs-link-hover-border-bottom-color |
|
||||||
color: $tabs-link-hover-color |
|
||||||
li |
|
||||||
display: block |
|
||||||
&.is-active |
|
||||||
a |
|
||||||
border-bottom-color: $tabs-link-active-border-bottom-color |
|
||||||
color: $tabs-link-active-color |
|
||||||
ul |
|
||||||
align-items: center |
|
||||||
border-bottom-color: $tabs-border-bottom-color |
|
||||||
border-bottom-style: $tabs-border-bottom-style |
|
||||||
border-bottom-width: $tabs-border-bottom-width |
|
||||||
display: flex |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
justify-content: flex-start |
|
||||||
&.is-left |
|
||||||
padding-right: 0.75em |
|
||||||
&.is-center |
|
||||||
flex: none |
|
||||||
justify-content: center |
|
||||||
padding-left: 0.75em |
|
||||||
padding-right: 0.75em |
|
||||||
&.is-right |
|
||||||
justify-content: flex-end |
|
||||||
padding-left: 0.75em |
|
||||||
.icon |
|
||||||
&:first-child |
|
||||||
+ltr-property("margin", 0.5em) |
|
||||||
&:last-child |
|
||||||
+ltr-property("margin", 0.5em, false) |
|
||||||
// Alignment |
|
||||||
&.is-centered |
|
||||||
ul |
|
||||||
justify-content: center |
|
||||||
&.is-right |
|
||||||
ul |
|
||||||
justify-content: flex-end |
|
||||||
// Styles |
|
||||||
&.is-boxed |
|
||||||
a |
|
||||||
border: 1px solid transparent |
|
||||||
+ltr |
|
||||||
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 |
|
||||||
+rtl |
|
||||||
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius |
|
||||||
&:hover |
|
||||||
background-color: $tabs-boxed-link-hover-background-color |
|
||||||
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color |
|
||||||
li |
|
||||||
&.is-active |
|
||||||
a |
|
||||||
background-color: $tabs-boxed-link-active-background-color |
|
||||||
border-color: $tabs-boxed-link-active-border-color |
|
||||||
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important |
|
||||||
&.is-fullwidth |
|
||||||
li |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
&.is-toggle |
|
||||||
a |
|
||||||
border-color: $tabs-toggle-link-border-color |
|
||||||
border-style: $tabs-toggle-link-border-style |
|
||||||
border-width: $tabs-toggle-link-border-width |
|
||||||
margin-bottom: 0 |
|
||||||
position: relative |
|
||||||
&:hover |
|
||||||
background-color: $tabs-toggle-link-hover-background-color |
|
||||||
border-color: $tabs-toggle-link-hover-border-color |
|
||||||
z-index: 2 |
|
||||||
li |
|
||||||
& + li |
|
||||||
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false) |
|
||||||
&:first-child a |
|
||||||
+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 |
|
||||||
+ltr |
|
||||||
border-top-right-radius: $tabs-toggle-link-radius |
|
||||||
border-bottom-right-radius: $tabs-toggle-link-radius |
|
||||||
+rtl |
|
||||||
border-top-left-radius: $tabs-toggle-link-radius |
|
||||||
border-bottom-left-radius: $tabs-toggle-link-radius |
|
||||||
&.is-active |
|
||||||
a |
|
||||||
background-color: $tabs-toggle-link-active-background-color |
|
||||||
border-color: $tabs-toggle-link-active-border-color |
|
||||||
color: $tabs-toggle-link-active-color |
|
||||||
z-index: 1 |
|
||||||
ul |
|
||||||
border-bottom: none |
|
||||||
&.is-toggle-rounded |
|
||||||
li |
|
||||||
&:first-child a |
|
||||||
+ltr |
|
||||||
border-bottom-left-radius: $radius-rounded |
|
||||||
border-top-left-radius: $radius-rounded |
|
||||||
padding-left: 1.25em |
|
||||||
+rtl |
|
||||||
border-bottom-right-radius: $radius-rounded |
|
||||||
border-top-right-radius: $radius-rounded |
|
||||||
padding-right: 1.25em |
|
||||||
&:last-child a |
|
||||||
+ltr |
|
||||||
border-bottom-right-radius: $radius-rounded |
|
||||||
border-top-right-radius: $radius-rounded |
|
||||||
padding-right: 1.25em |
|
||||||
+rtl |
|
||||||
border-bottom-left-radius: $radius-rounded |
|
||||||
border-top-left-radius: $radius-rounded |
|
||||||
padding-left: 1.25em |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
/* Bulma Elements */ |
|
||||||
@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,24 +0,0 @@ |
|||||||
$box-color: $text !default |
|
||||||
$box-background-color: $scheme-main !default |
|
||||||
$box-radius: $radius-large !default |
|
||||||
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default |
|
||||||
$box-padding: 1.25rem !default |
|
||||||
|
|
||||||
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default |
|
||||||
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default |
|
||||||
|
|
||||||
.box |
|
||||||
@extend %block |
|
||||||
background-color: $box-background-color |
|
||||||
border-radius: $box-radius |
|
||||||
box-shadow: $box-shadow |
|
||||||
color: $box-color |
|
||||||
display: block |
|
||||||
padding: $box-padding |
|
||||||
|
|
||||||
a.box |
|
||||||
&:hover, |
|
||||||
&:focus |
|
||||||
box-shadow: $box-link-hover-shadow |
|
||||||
&:active |
|
||||||
box-shadow: $box-link-active-shadow |
|
||||||
@ -1,325 +0,0 @@ |
|||||||
$button-color: $text-strong !default |
|
||||||
$button-background-color: $scheme-main !default |
|
||||||
$button-family: false !default |
|
||||||
|
|
||||||
$button-border-color: $border !default |
|
||||||
$button-border-width: $control-border-width !default |
|
||||||
|
|
||||||
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default |
|
||||||
$button-padding-horizontal: 1em !default |
|
||||||
|
|
||||||
$button-hover-color: $link-hover !default |
|
||||||
$button-hover-border-color: $link-hover-border !default |
|
||||||
|
|
||||||
$button-focus-color: $link-focus !default |
|
||||||
$button-focus-border-color: $link-focus-border !default |
|
||||||
$button-focus-box-shadow-size: 0 0 0 0.125em !default |
|
||||||
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default |
|
||||||
|
|
||||||
$button-active-color: $link-active !default |
|
||||||
$button-active-border-color: $link-active-border !default |
|
||||||
|
|
||||||
$button-text-color: $text !default |
|
||||||
$button-text-decoration: underline !default |
|
||||||
$button-text-hover-background-color: $background !default |
|
||||||
$button-text-hover-color: $text-strong !default |
|
||||||
|
|
||||||
$button-disabled-background-color: $scheme-main !default |
|
||||||
$button-disabled-border-color: $border !default |
|
||||||
$button-disabled-shadow: none !default |
|
||||||
$button-disabled-opacity: 0.5 !default |
|
||||||
|
|
||||||
$button-static-color: $text-light !default |
|
||||||
$button-static-background-color: $scheme-main-ter !default |
|
||||||
$button-static-border-color: $border !default |
|
||||||
|
|
||||||
$button-colors: $colors !default |
|
||||||
|
|
||||||
// The button sizes use mixins so they can be used at different breakpoints |
|
||||||
=button-small |
|
||||||
border-radius: $radius-small |
|
||||||
font-size: $size-small |
|
||||||
=button-normal |
|
||||||
font-size: $size-normal |
|
||||||
=button-medium |
|
||||||
font-size: $size-medium |
|
||||||
=button-large |
|
||||||
font-size: $size-large |
|
||||||
|
|
||||||
.button |
|
||||||
@extend %control |
|
||||||
@extend %unselectable |
|
||||||
background-color: $button-background-color |
|
||||||
border-color: $button-border-color |
|
||||||
border-width: $button-border-width |
|
||||||
color: $button-color |
|
||||||
cursor: pointer |
|
||||||
@if $button-family |
|
||||||
font-family: $button-family |
|
||||||
justify-content: center |
|
||||||
padding-bottom: $button-padding-vertical |
|
||||||
padding-left: $button-padding-horizontal |
|
||||||
padding-right: $button-padding-horizontal |
|
||||||
padding-top: $button-padding-vertical |
|
||||||
text-align: center |
|
||||||
white-space: nowrap |
|
||||||
strong |
|
||||||
color: inherit |
|
||||||
.icon |
|
||||||
&, |
|
||||||
&.is-small, |
|
||||||
&.is-medium, |
|
||||||
&.is-large |
|
||||||
height: 1.5em |
|
||||||
width: 1.5em |
|
||||||
&:first-child:not(:last-child) |
|
||||||
+ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false) |
|
||||||
+ltr-property("margin", $button-padding-horizontal / 4) |
|
||||||
&:last-child:not(:first-child) |
|
||||||
+ltr-property("margin", $button-padding-horizontal / 4, false) |
|
||||||
+ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})) |
|
||||||
&:first-child:last-child |
|
||||||
margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) |
|
||||||
margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}) |
|
||||||
// States |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
border-color: $button-hover-border-color |
|
||||||
color: $button-hover-color |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
border-color: $button-focus-border-color |
|
||||||
color: $button-focus-color |
|
||||||
&:not(:active) |
|
||||||
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
border-color: $button-active-border-color |
|
||||||
color: $button-active-color |
|
||||||
// Colors |
|
||||||
&.is-text |
|
||||||
background-color: transparent |
|
||||||
border-color: transparent |
|
||||||
color: $button-text-color |
|
||||||
text-decoration: $button-text-decoration |
|
||||||
&:hover, |
|
||||||
&.is-hovered, |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
background-color: $button-text-hover-background-color |
|
||||||
color: $button-text-hover-color |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
background-color: bulmaDarken($button-text-hover-background-color, 5%) |
|
||||||
color: $button-text-hover-color |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
background-color: transparent |
|
||||||
border-color: transparent |
|
||||||
box-shadow: none |
|
||||||
@each $name, $pair in $button-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
$color-invert: nth($pair, 2) |
|
||||||
&.is-#{$name} |
|
||||||
background-color: $color |
|
||||||
border-color: transparent |
|
||||||
color: $color-invert |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
background-color: bulmaDarken($color, 2.5%) |
|
||||||
border-color: transparent |
|
||||||
color: $color-invert |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
border-color: transparent |
|
||||||
color: $color-invert |
|
||||||
&:not(:active) |
|
||||||
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25) |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
background-color: bulmaDarken($color, 5%) |
|
||||||
border-color: transparent |
|
||||||
color: $color-invert |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
background-color: $color |
|
||||||
border-color: transparent |
|
||||||
box-shadow: none |
|
||||||
&.is-inverted |
|
||||||
background-color: $color-invert |
|
||||||
color: $color |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
background-color: bulmaDarken($color-invert, 5%) |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
background-color: $color-invert |
|
||||||
border-color: transparent |
|
||||||
box-shadow: none |
|
||||||
color: $color |
|
||||||
&.is-loading |
|
||||||
&::after |
|
||||||
border-color: transparent transparent $color-invert $color-invert !important |
|
||||||
&.is-outlined |
|
||||||
background-color: transparent |
|
||||||
border-color: $color |
|
||||||
color: $color |
|
||||||
&:hover, |
|
||||||
&.is-hovered, |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
background-color: $color |
|
||||||
border-color: $color |
|
||||||
color: $color-invert |
|
||||||
&.is-loading |
|
||||||
&::after |
|
||||||
border-color: transparent transparent $color $color !important |
|
||||||
&:hover, |
|
||||||
&.is-hovered, |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
&::after |
|
||||||
border-color: transparent transparent $color-invert $color-invert !important |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
background-color: transparent |
|
||||||
border-color: $color |
|
||||||
box-shadow: none |
|
||||||
color: $color |
|
||||||
&.is-inverted.is-outlined |
|
||||||
background-color: transparent |
|
||||||
border-color: $color-invert |
|
||||||
color: $color-invert |
|
||||||
&:hover, |
|
||||||
&.is-hovered, |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
background-color: $color-invert |
|
||||||
color: $color |
|
||||||
&.is-loading |
|
||||||
&:hover, |
|
||||||
&.is-hovered, |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
&::after |
|
||||||
border-color: transparent transparent $color $color !important |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
background-color: transparent |
|
||||||
border-color: $color-invert |
|
||||||
box-shadow: none |
|
||||||
color: $color-invert |
|
||||||
// If light and dark colors are provided |
|
||||||
@if length($pair) >= 4 |
|
||||||
$color-light: nth($pair, 3) |
|
||||||
$color-dark: nth($pair, 4) |
|
||||||
&.is-light |
|
||||||
background-color: $color-light |
|
||||||
color: $color-dark |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
background-color: bulmaDarken($color-light, 2.5%) |
|
||||||
border-color: transparent |
|
||||||
color: $color-dark |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
background-color: bulmaDarken($color-light, 5%) |
|
||||||
border-color: transparent |
|
||||||
color: $color-dark |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
+button-small |
|
||||||
&.is-normal |
|
||||||
+button-normal |
|
||||||
&.is-medium |
|
||||||
+button-medium |
|
||||||
&.is-large |
|
||||||
+button-large |
|
||||||
// Modifiers |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
background-color: $button-disabled-background-color |
|
||||||
border-color: $button-disabled-border-color |
|
||||||
box-shadow: $button-disabled-shadow |
|
||||||
opacity: $button-disabled-opacity |
|
||||||
&.is-fullwidth |
|
||||||
display: flex |
|
||||||
width: 100% |
|
||||||
&.is-loading |
|
||||||
color: transparent !important |
|
||||||
pointer-events: none |
|
||||||
&::after |
|
||||||
@extend %loader |
|
||||||
+center(1em) |
|
||||||
position: absolute !important |
|
||||||
&.is-static |
|
||||||
background-color: $button-static-background-color |
|
||||||
border-color: $button-static-border-color |
|
||||||
color: $button-static-color |
|
||||||
box-shadow: none |
|
||||||
pointer-events: none |
|
||||||
&.is-rounded |
|
||||||
border-radius: $radius-rounded |
|
||||||
padding-left: calc(#{$button-padding-horizontal} + 0.25em) |
|
||||||
padding-right: calc(#{$button-padding-horizontal} + 0.25em) |
|
||||||
|
|
||||||
.buttons |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
flex-wrap: wrap |
|
||||||
justify-content: flex-start |
|
||||||
.button |
|
||||||
margin-bottom: 0.5rem |
|
||||||
&:not(:last-child):not(.is-fullwidth) |
|
||||||
+ltr-property("margin", 0.5rem) |
|
||||||
&:last-child |
|
||||||
margin-bottom: -0.5rem |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 1rem |
|
||||||
// Sizes |
|
||||||
&.are-small |
|
||||||
.button:not(.is-normal):not(.is-medium):not(.is-large) |
|
||||||
+button-small |
|
||||||
&.are-medium |
|
||||||
.button:not(.is-small):not(.is-normal):not(.is-large) |
|
||||||
+button-medium |
|
||||||
&.are-large |
|
||||||
.button:not(.is-small):not(.is-normal):not(.is-medium) |
|
||||||
+button-large |
|
||||||
&.has-addons |
|
||||||
.button |
|
||||||
&:not(:first-child) |
|
||||||
border-bottom-left-radius: 0 |
|
||||||
border-top-left-radius: 0 |
|
||||||
&:not(:last-child) |
|
||||||
border-bottom-right-radius: 0 |
|
||||||
border-top-right-radius: 0 |
|
||||||
+ltr-property("margin", -1px) |
|
||||||
&:last-child |
|
||||||
+ltr-property("margin", 0) |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
z-index: 2 |
|
||||||
&:focus, |
|
||||||
&.is-focused, |
|
||||||
&:active, |
|
||||||
&.is-active, |
|
||||||
&.is-selected |
|
||||||
z-index: 3 |
|
||||||
&:hover |
|
||||||
z-index: 4 |
|
||||||
&.is-expanded |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
&.is-centered |
|
||||||
justify-content: center |
|
||||||
&:not(.has-addons) |
|
||||||
.button:not(.is-fullwidth) |
|
||||||
margin-left: 0.25rem |
|
||||||
margin-right: 0.25rem |
|
||||||
&.is-right |
|
||||||
justify-content: flex-end |
|
||||||
&:not(.has-addons) |
|
||||||
.button:not(.is-fullwidth) |
|
||||||
margin-left: 0.25rem |
|
||||||
margin-right: 0.25rem |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
$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,155 +0,0 @@ |
|||||||
$content-heading-color: $text-strong !default |
|
||||||
$content-heading-weight: $weight-semibold !default |
|
||||||
$content-heading-line-height: 1.125 !default |
|
||||||
|
|
||||||
$content-blockquote-background-color: $background !default |
|
||||||
$content-blockquote-border-left: 5px solid $border !default |
|
||||||
$content-blockquote-padding: 1.25em 1.5em !default |
|
||||||
|
|
||||||
$content-pre-padding: 1.25em 1.5em !default |
|
||||||
|
|
||||||
$content-table-cell-border: 1px solid $border !default |
|
||||||
$content-table-cell-border-width: 0 0 1px !default |
|
||||||
$content-table-cell-padding: 0.5em 0.75em !default |
|
||||||
$content-table-cell-heading-color: $text-strong !default |
|
||||||
$content-table-head-cell-border-width: 0 0 2px !default |
|
||||||
$content-table-head-cell-color: $text-strong !default |
|
||||||
$content-table-foot-cell-border-width: 2px 0 0 !default |
|
||||||
$content-table-foot-cell-color: $text-strong !default |
|
||||||
|
|
||||||
.content |
|
||||||
@extend %block |
|
||||||
// Inline |
|
||||||
li + li |
|
||||||
margin-top: 0.25em |
|
||||||
// Block |
|
||||||
p, |
|
||||||
dl, |
|
||||||
ol, |
|
||||||
ul, |
|
||||||
blockquote, |
|
||||||
pre, |
|
||||||
table |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 1em |
|
||||||
h1, |
|
||||||
h2, |
|
||||||
h3, |
|
||||||
h4, |
|
||||||
h5, |
|
||||||
h6 |
|
||||||
color: $content-heading-color |
|
||||||
font-weight: $content-heading-weight |
|
||||||
line-height: $content-heading-line-height |
|
||||||
h1 |
|
||||||
font-size: 2em |
|
||||||
margin-bottom: 0.5em |
|
||||||
&:not(:first-child) |
|
||||||
margin-top: 1em |
|
||||||
h2 |
|
||||||
font-size: 1.75em |
|
||||||
margin-bottom: 0.5714em |
|
||||||
&:not(:first-child) |
|
||||||
margin-top: 1.1428em |
|
||||||
h3 |
|
||||||
font-size: 1.5em |
|
||||||
margin-bottom: 0.6666em |
|
||||||
&:not(:first-child) |
|
||||||
margin-top: 1.3333em |
|
||||||
h4 |
|
||||||
font-size: 1.25em |
|
||||||
margin-bottom: 0.8em |
|
||||||
h5 |
|
||||||
font-size: 1.125em |
|
||||||
margin-bottom: 0.8888em |
|
||||||
h6 |
|
||||||
font-size: 1em |
|
||||||
margin-bottom: 1em |
|
||||||
blockquote |
|
||||||
background-color: $content-blockquote-background-color |
|
||||||
+ltr-property("border", $content-blockquote-border-left, false) |
|
||||||
padding: $content-blockquote-padding |
|
||||||
ol |
|
||||||
list-style-position: outside |
|
||||||
+ltr-property("margin", 2em, false) |
|
||||||
margin-top: 1em |
|
||||||
&:not([type]) |
|
||||||
list-style-type: decimal |
|
||||||
&.is-lower-alpha |
|
||||||
list-style-type: lower-alpha |
|
||||||
&.is-lower-roman |
|
||||||
list-style-type: lower-roman |
|
||||||
&.is-upper-alpha |
|
||||||
list-style-type: upper-alpha |
|
||||||
&.is-upper-roman |
|
||||||
list-style-type: upper-roman |
|
||||||
ul |
|
||||||
list-style: disc outside |
|
||||||
+ltr-property("margin", 2em, false) |
|
||||||
margin-top: 1em |
|
||||||
ul |
|
||||||
list-style-type: circle |
|
||||||
margin-top: 0.5em |
|
||||||
ul |
|
||||||
list-style-type: square |
|
||||||
dd |
|
||||||
+ltr-property("margin", 2em, false) |
|
||||||
figure |
|
||||||
margin-left: 2em |
|
||||||
margin-right: 2em |
|
||||||
text-align: center |
|
||||||
&:not(:first-child) |
|
||||||
margin-top: 2em |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 2em |
|
||||||
img |
|
||||||
display: inline-block |
|
||||||
figcaption |
|
||||||
font-style: italic |
|
||||||
pre |
|
||||||
+overflow-touch |
|
||||||
overflow-x: auto |
|
||||||
padding: $content-pre-padding |
|
||||||
white-space: pre |
|
||||||
word-wrap: normal |
|
||||||
sup, |
|
||||||
sub |
|
||||||
font-size: 75% |
|
||||||
table |
|
||||||
width: 100% |
|
||||||
td, |
|
||||||
th |
|
||||||
border: $content-table-cell-border |
|
||||||
border-width: $content-table-cell-border-width |
|
||||||
padding: $content-table-cell-padding |
|
||||||
vertical-align: top |
|
||||||
th |
|
||||||
color: $content-table-cell-heading-color |
|
||||||
&:not([align]) |
|
||||||
text-align: inherit |
|
||||||
thead |
|
||||||
td, |
|
||||||
th |
|
||||||
border-width: $content-table-head-cell-border-width |
|
||||||
color: $content-table-head-cell-color |
|
||||||
tfoot |
|
||||||
td, |
|
||||||
th |
|
||||||
border-width: $content-table-foot-cell-border-width |
|
||||||
color: $content-table-foot-cell-color |
|
||||||
tbody |
|
||||||
tr |
|
||||||
&:last-child |
|
||||||
td, |
|
||||||
th |
|
||||||
border-bottom-width: 0 |
|
||||||
.tabs |
|
||||||
li + li |
|
||||||
margin-top: 0 |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
@ -1 +0,0 @@ |
|||||||
@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead." |
|
||||||
@ -1,21 +0,0 @@ |
|||||||
$icon-dimensions: 1.5rem !default |
|
||||||
$icon-dimensions-small: 1rem !default |
|
||||||
$icon-dimensions-medium: 2rem !default |
|
||||||
$icon-dimensions-large: 3rem !default |
|
||||||
|
|
||||||
.icon |
|
||||||
align-items: center |
|
||||||
display: inline-flex |
|
||||||
justify-content: center |
|
||||||
height: $icon-dimensions |
|
||||||
width: $icon-dimensions |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
height: $icon-dimensions-small |
|
||||||
width: $icon-dimensions-small |
|
||||||
&.is-medium |
|
||||||
height: $icon-dimensions-medium |
|
||||||
width: $icon-dimensions-medium |
|
||||||
&.is-large |
|
||||||
height: $icon-dimensions-large |
|
||||||
width: $icon-dimensions-large |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
$dimensions: 16 24 32 48 64 96 128 !default |
|
||||||
|
|
||||||
.image |
|
||||||
display: block |
|
||||||
position: relative |
|
||||||
img |
|
||||||
display: block |
|
||||||
height: auto |
|
||||||
width: 100% |
|
||||||
&.is-rounded |
|
||||||
border-radius: $radius-rounded |
|
||||||
&.is-fullwidth |
|
||||||
width: 100% |
|
||||||
// Ratio |
|
||||||
&.is-square, |
|
||||||
&.is-1by1, |
|
||||||
&.is-5by4, |
|
||||||
&.is-4by3, |
|
||||||
&.is-3by2, |
|
||||||
&.is-5by3, |
|
||||||
&.is-16by9, |
|
||||||
&.is-2by1, |
|
||||||
&.is-3by1, |
|
||||||
&.is-4by5, |
|
||||||
&.is-3by4, |
|
||||||
&.is-2by3, |
|
||||||
&.is-3by5, |
|
||||||
&.is-9by16, |
|
||||||
&.is-1by2, |
|
||||||
&.is-1by3 |
|
||||||
img, |
|
||||||
.has-ratio |
|
||||||
@extend %overlay |
|
||||||
height: 100% |
|
||||||
width: 100% |
|
||||||
&.is-square, |
|
||||||
&.is-1by1 |
|
||||||
padding-top: 100% |
|
||||||
&.is-5by4 |
|
||||||
padding-top: 80% |
|
||||||
&.is-4by3 |
|
||||||
padding-top: 75% |
|
||||||
&.is-3by2 |
|
||||||
padding-top: 66.6666% |
|
||||||
&.is-5by3 |
|
||||||
padding-top: 60% |
|
||||||
&.is-16by9 |
|
||||||
padding-top: 56.25% |
|
||||||
&.is-2by1 |
|
||||||
padding-top: 50% |
|
||||||
&.is-3by1 |
|
||||||
padding-top: 33.3333% |
|
||||||
&.is-4by5 |
|
||||||
padding-top: 125% |
|
||||||
&.is-3by4 |
|
||||||
padding-top: 133.3333% |
|
||||||
&.is-2by3 |
|
||||||
padding-top: 150% |
|
||||||
&.is-3by5 |
|
||||||
padding-top: 166.6666% |
|
||||||
&.is-9by16 |
|
||||||
padding-top: 177.7777% |
|
||||||
&.is-1by2 |
|
||||||
padding-top: 200% |
|
||||||
&.is-1by3 |
|
||||||
padding-top: 300% |
|
||||||
// Sizes |
|
||||||
@each $dimension in $dimensions |
|
||||||
&.is-#{$dimension}x#{$dimension} |
|
||||||
height: $dimension * 1px |
|
||||||
width: $dimension * 1px |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
$notification-background-color: $background !default |
|
||||||
$notification-code-background-color: $scheme-main !default |
|
||||||
$notification-radius: $radius !default |
|
||||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default |
|
||||||
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default |
|
||||||
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default |
|
||||||
|
|
||||||
$notification-colors: $colors !default |
|
||||||
|
|
||||||
.notification |
|
||||||
@extend %block |
|
||||||
background-color: $notification-background-color |
|
||||||
border-radius: $notification-radius |
|
||||||
position: relative |
|
||||||
+ltr |
|
||||||
padding: $notification-padding-ltr |
|
||||||
+rtl |
|
||||||
padding: $notification-padding-rtl |
|
||||||
a:not(.button):not(.dropdown-item) |
|
||||||
color: currentColor |
|
||||||
text-decoration: underline |
|
||||||
strong |
|
||||||
color: currentColor |
|
||||||
code, |
|
||||||
pre |
|
||||||
background: $notification-code-background-color |
|
||||||
pre code |
|
||||||
background: transparent |
|
||||||
& > .delete |
|
||||||
+ltr-position(0.5rem) |
|
||||||
position: absolute |
|
||||||
top: 0.5rem |
|
||||||
.title, |
|
||||||
.subtitle, |
|
||||||
.content |
|
||||||
color: currentColor |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $notification-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
$color-invert: nth($pair, 2) |
|
||||||
&.is-#{$name} |
|
||||||
background-color: $color |
|
||||||
color: $color-invert |
|
||||||
// If light and dark colors are provided |
|
||||||
@if length($pair) >= 4 |
|
||||||
$color-light: nth($pair, 3) |
|
||||||
$color-dark: nth($pair, 4) |
|
||||||
&.is-light |
|
||||||
background-color: $color-light |
|
||||||
color: $color-dark |
|
||||||
@ -1,39 +0,0 @@ |
|||||||
.block |
|
||||||
@extend %block |
|
||||||
|
|
||||||
.delete |
|
||||||
@extend %delete |
|
||||||
|
|
||||||
.heading |
|
||||||
display: block |
|
||||||
font-size: 11px |
|
||||||
letter-spacing: 1px |
|
||||||
margin-bottom: 5px |
|
||||||
text-transform: uppercase |
|
||||||
|
|
||||||
.highlight |
|
||||||
@extend %block |
|
||||||
font-weight: $weight-normal |
|
||||||
max-width: 100% |
|
||||||
overflow: hidden |
|
||||||
padding: 0 |
|
||||||
pre |
|
||||||
overflow: auto |
|
||||||
max-width: 100% |
|
||||||
|
|
||||||
.loader |
|
||||||
@extend %loader |
|
||||||
|
|
||||||
.number |
|
||||||
align-items: center |
|
||||||
background-color: $background |
|
||||||
border-radius: $radius-rounded |
|
||||||
display: inline-flex |
|
||||||
font-size: $size-medium |
|
||||||
height: 2em |
|
||||||
justify-content: center |
|
||||||
margin-right: 1.5rem |
|
||||||
min-width: 2.5em |
|
||||||
padding: 0.25rem 0.5rem |
|
||||||
text-align: center |
|
||||||
vertical-align: top |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
$progress-bar-background-color: $border-light !default |
|
||||||
$progress-value-background-color: $text !default |
|
||||||
$progress-border-radius: $radius-rounded !default |
|
||||||
|
|
||||||
$progress-indeterminate-duration: 1.5s !default |
|
||||||
|
|
||||||
$progress-colors: $colors !default |
|
||||||
|
|
||||||
.progress |
|
||||||
@extend %block |
|
||||||
-moz-appearance: none |
|
||||||
-webkit-appearance: none |
|
||||||
border: none |
|
||||||
border-radius: $progress-border-radius |
|
||||||
display: block |
|
||||||
height: $size-normal |
|
||||||
overflow: hidden |
|
||||||
padding: 0 |
|
||||||
width: 100% |
|
||||||
&::-webkit-progress-bar |
|
||||||
background-color: $progress-bar-background-color |
|
||||||
&::-webkit-progress-value |
|
||||||
background-color: $progress-value-background-color |
|
||||||
&::-moz-progress-bar |
|
||||||
background-color: $progress-value-background-color |
|
||||||
&::-ms-fill |
|
||||||
background-color: $progress-value-background-color |
|
||||||
border: none |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $progress-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
&.is-#{$name} |
|
||||||
&::-webkit-progress-value |
|
||||||
background-color: $color |
|
||||||
&::-moz-progress-bar |
|
||||||
background-color: $color |
|
||||||
&::-ms-fill |
|
||||||
background-color: $color |
|
||||||
&:indeterminate |
|
||||||
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) |
|
||||||
|
|
||||||
&:indeterminate |
|
||||||
animation-duration: $progress-indeterminate-duration |
|
||||||
animation-iteration-count: infinite |
|
||||||
animation-name: moveIndeterminate |
|
||||||
animation-timing-function: linear |
|
||||||
background-color: $progress-bar-background-color |
|
||||||
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) |
|
||||||
background-position: top left |
|
||||||
background-repeat: no-repeat |
|
||||||
background-size: 150% 150% |
|
||||||
&::-webkit-progress-bar |
|
||||||
background-color: transparent |
|
||||||
&::-moz-progress-bar |
|
||||||
background-color: transparent |
|
||||||
&::-ms-fill |
|
||||||
animation-name: none |
|
||||||
|
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
height: $size-small |
|
||||||
&.is-medium |
|
||||||
height: $size-medium |
|
||||||
&.is-large |
|
||||||
height: $size-large |
|
||||||
|
|
||||||
@keyframes moveIndeterminate |
|
||||||
from |
|
||||||
background-position: 200% 0 |
|
||||||
to |
|
||||||
background-position: -200% 0 |
|
||||||
@ -1,131 +0,0 @@ |
|||||||
$table-color: $text-strong !default |
|
||||||
$table-background-color: $scheme-main !default |
|
||||||
|
|
||||||
$table-cell-border: 1px solid $border !default |
|
||||||
$table-cell-border-width: 0 0 1px !default |
|
||||||
$table-cell-padding: 0.5em 0.75em !default |
|
||||||
$table-cell-heading-color: $text-strong !default |
|
||||||
|
|
||||||
$table-head-cell-border-width: 0 0 2px !default |
|
||||||
$table-head-cell-color: $text-strong !default |
|
||||||
$table-foot-cell-border-width: 2px 0 0 !default |
|
||||||
$table-foot-cell-color: $text-strong !default |
|
||||||
|
|
||||||
$table-head-background-color: transparent !default |
|
||||||
$table-body-background-color: transparent !default |
|
||||||
$table-foot-background-color: transparent !default |
|
||||||
|
|
||||||
$table-row-hover-background-color: $scheme-main-bis !default |
|
||||||
|
|
||||||
$table-row-active-background-color: $primary !default |
|
||||||
$table-row-active-color: $primary-invert !default |
|
||||||
|
|
||||||
$table-striped-row-even-background-color: $scheme-main-bis !default |
|
||||||
$table-striped-row-even-hover-background-color: $scheme-main-ter !default |
|
||||||
|
|
||||||
$table-colors: $colors !default |
|
||||||
|
|
||||||
.table |
|
||||||
@extend %block |
|
||||||
background-color: $table-background-color |
|
||||||
color: $table-color |
|
||||||
td, |
|
||||||
th |
|
||||||
border: $table-cell-border |
|
||||||
border-width: $table-cell-border-width |
|
||||||
padding: $table-cell-padding |
|
||||||
vertical-align: top |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $table-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
$color-invert: nth($pair, 2) |
|
||||||
&.is-#{$name} |
|
||||||
background-color: $color |
|
||||||
border-color: $color |
|
||||||
color: $color-invert |
|
||||||
// Modifiers |
|
||||||
&.is-narrow |
|
||||||
white-space: nowrap |
|
||||||
width: 1% |
|
||||||
&.is-selected |
|
||||||
background-color: $table-row-active-background-color |
|
||||||
color: $table-row-active-color |
|
||||||
a, |
|
||||||
strong |
|
||||||
color: currentColor |
|
||||||
&.is-vcentered |
|
||||||
vertical-align: middle |
|
||||||
th |
|
||||||
color: $table-cell-heading-color |
|
||||||
&:not([align]) |
|
||||||
text-align: inherit |
|
||||||
tr |
|
||||||
&.is-selected |
|
||||||
background-color: $table-row-active-background-color |
|
||||||
color: $table-row-active-color |
|
||||||
a, |
|
||||||
strong |
|
||||||
color: currentColor |
|
||||||
td, |
|
||||||
th |
|
||||||
border-color: $table-row-active-color |
|
||||||
color: currentColor |
|
||||||
thead |
|
||||||
background-color: $table-head-background-color |
|
||||||
td, |
|
||||||
th |
|
||||||
border-width: $table-head-cell-border-width |
|
||||||
color: $table-head-cell-color |
|
||||||
tfoot |
|
||||||
background-color: $table-foot-background-color |
|
||||||
td, |
|
||||||
th |
|
||||||
border-width: $table-foot-cell-border-width |
|
||||||
color: $table-foot-cell-color |
|
||||||
tbody |
|
||||||
background-color: $table-body-background-color |
|
||||||
tr |
|
||||||
&:last-child |
|
||||||
td, |
|
||||||
th |
|
||||||
border-bottom-width: 0 |
|
||||||
// Modifiers |
|
||||||
&.is-bordered |
|
||||||
td, |
|
||||||
th |
|
||||||
border-width: 1px |
|
||||||
tr |
|
||||||
&:last-child |
|
||||||
td, |
|
||||||
th |
|
||||||
border-bottom-width: 1px |
|
||||||
&.is-fullwidth |
|
||||||
width: 100% |
|
||||||
&.is-hoverable |
|
||||||
tbody |
|
||||||
tr:not(.is-selected) |
|
||||||
&:hover |
|
||||||
background-color: $table-row-hover-background-color |
|
||||||
&.is-striped |
|
||||||
tbody |
|
||||||
tr:not(.is-selected) |
|
||||||
&:hover |
|
||||||
background-color: $table-row-hover-background-color |
|
||||||
&:nth-child(even) |
|
||||||
background-color: $table-striped-row-even-hover-background-color |
|
||||||
&.is-narrow |
|
||||||
td, |
|
||||||
th |
|
||||||
padding: 0.25em 0.5em |
|
||||||
&.is-striped |
|
||||||
tbody |
|
||||||
tr:not(.is-selected) |
|
||||||
&:nth-child(even) |
|
||||||
background-color: $table-striped-row-even-background-color |
|
||||||
|
|
||||||
.table-container |
|
||||||
@extend %block |
|
||||||
+overflow-touch |
|
||||||
overflow: auto |
|
||||||
overflow-y: hidden |
|
||||||
max-width: 100% |
|
||||||
@ -1,138 +0,0 @@ |
|||||||
$tag-background-color: $background !default |
|
||||||
$tag-color: $text !default |
|
||||||
$tag-radius: $radius !default |
|
||||||
$tag-delete-margin: 1px !default |
|
||||||
|
|
||||||
$tag-colors: $colors !default |
|
||||||
|
|
||||||
.tags |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
flex-wrap: wrap |
|
||||||
justify-content: flex-start |
|
||||||
.tag |
|
||||||
margin-bottom: 0.5rem |
|
||||||
&:not(:last-child) |
|
||||||
+ltr-property("margin", 0.5rem) |
|
||||||
&:last-child |
|
||||||
margin-bottom: -0.5rem |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 1rem |
|
||||||
// Sizes |
|
||||||
&.are-medium |
|
||||||
.tag:not(.is-normal):not(.is-large) |
|
||||||
font-size: $size-normal |
|
||||||
&.are-large |
|
||||||
.tag:not(.is-normal):not(.is-medium) |
|
||||||
font-size: $size-medium |
|
||||||
&.is-centered |
|
||||||
justify-content: center |
|
||||||
.tag |
|
||||||
margin-right: 0.25rem |
|
||||||
margin-left: 0.25rem |
|
||||||
&.is-right |
|
||||||
justify-content: flex-end |
|
||||||
.tag |
|
||||||
&:not(:first-child) |
|
||||||
margin-left: 0.5rem |
|
||||||
&:not(:last-child) |
|
||||||
margin-right: 0 |
|
||||||
&.has-addons |
|
||||||
.tag |
|
||||||
+ltr-property("margin", 0) |
|
||||||
&:not(:first-child) |
|
||||||
+ltr-property("margin", 0, false) |
|
||||||
+ltr |
|
||||||
border-top-left-radius: 0 |
|
||||||
border-bottom-left-radius: 0 |
|
||||||
+rtl |
|
||||||
border-top-right-radius: 0 |
|
||||||
border-bottom-right-radius: 0 |
|
||||||
&:not(:last-child) |
|
||||||
+ltr |
|
||||||
border-top-right-radius: 0 |
|
||||||
border-bottom-right-radius: 0 |
|
||||||
+rtl |
|
||||||
border-top-left-radius: 0 |
|
||||||
border-bottom-left-radius: 0 |
|
||||||
|
|
||||||
.tag:not(body) |
|
||||||
align-items: center |
|
||||||
background-color: $tag-background-color |
|
||||||
border-radius: $tag-radius |
|
||||||
color: $tag-color |
|
||||||
display: inline-flex |
|
||||||
font-size: $size-small |
|
||||||
height: 2em |
|
||||||
justify-content: center |
|
||||||
line-height: 1.5 |
|
||||||
padding-left: 0.75em |
|
||||||
padding-right: 0.75em |
|
||||||
white-space: nowrap |
|
||||||
.delete |
|
||||||
+ltr-property("margin", 0.25rem, false) |
|
||||||
+ltr-property("margin", -0.375rem) |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $tag-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
$color-invert: nth($pair, 2) |
|
||||||
&.is-#{$name} |
|
||||||
background-color: $color |
|
||||||
color: $color-invert |
|
||||||
// If a light and dark colors are provided |
|
||||||
@if length($pair) > 3 |
|
||||||
$color-light: nth($pair, 3) |
|
||||||
$color-dark: nth($pair, 4) |
|
||||||
&.is-light |
|
||||||
background-color: $color-light |
|
||||||
color: $color-dark |
|
||||||
// Sizes |
|
||||||
&.is-normal |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-normal |
|
||||||
&.is-large |
|
||||||
font-size: $size-medium |
|
||||||
.icon |
|
||||||
&:first-child:not(:last-child) |
|
||||||
+ltr-property("margin", -0.375em, false) |
|
||||||
+ltr-property("margin", 0.1875em) |
|
||||||
&:last-child:not(:first-child) |
|
||||||
+ltr-property("margin", 0.1875em, false) |
|
||||||
+ltr-property("margin", -0.375em) |
|
||||||
&:first-child:last-child |
|
||||||
+ltr-property("margin", -0.375em, false) |
|
||||||
+ltr-property("margin", -0.375em) |
|
||||||
// Modifiers |
|
||||||
&.is-delete |
|
||||||
+ltr-property("margin", $tag-delete-margin, false) |
|
||||||
padding: 0 |
|
||||||
position: relative |
|
||||||
width: 2em |
|
||||||
&::before, |
|
||||||
&::after |
|
||||||
background-color: currentColor |
|
||||||
content: "" |
|
||||||
display: block |
|
||||||
left: 50% |
|
||||||
position: absolute |
|
||||||
top: 50% |
|
||||||
transform: translateX(-50%) translateY(-50%) rotate(45deg) |
|
||||||
transform-origin: center center |
|
||||||
&::before |
|
||||||
height: 1px |
|
||||||
width: 50% |
|
||||||
&::after |
|
||||||
height: 50% |
|
||||||
width: 1px |
|
||||||
&:hover, |
|
||||||
&:focus |
|
||||||
background-color: darken($tag-background-color, 5%) |
|
||||||
&:active |
|
||||||
background-color: darken($tag-background-color, 10%) |
|
||||||
&.is-rounded |
|
||||||
border-radius: $radius-rounded |
|
||||||
|
|
||||||
a.tag |
|
||||||
&:hover |
|
||||||
text-decoration: underline |
|
||||||
@ -1,70 +0,0 @@ |
|||||||
$title-color: $text-strong !default |
|
||||||
$title-family: false !default |
|
||||||
$title-size: $size-3 !default |
|
||||||
$title-weight: $weight-semibold !default |
|
||||||
$title-line-height: 1.125 !default |
|
||||||
$title-strong-color: inherit !default |
|
||||||
$title-strong-weight: inherit !default |
|
||||||
$title-sub-size: 0.75em !default |
|
||||||
$title-sup-size: 0.75em !default |
|
||||||
|
|
||||||
$subtitle-color: $text !default |
|
||||||
$subtitle-family: false !default |
|
||||||
$subtitle-size: $size-5 !default |
|
||||||
$subtitle-weight: $weight-normal !default |
|
||||||
$subtitle-line-height: 1.25 !default |
|
||||||
$subtitle-strong-color: $text-strong !default |
|
||||||
$subtitle-strong-weight: $weight-semibold !default |
|
||||||
$subtitle-negative-margin: -1.25rem !default |
|
||||||
|
|
||||||
.title, |
|
||||||
.subtitle |
|
||||||
@extend %block |
|
||||||
word-break: break-word |
|
||||||
em, |
|
||||||
span |
|
||||||
font-weight: inherit |
|
||||||
sub |
|
||||||
font-size: $title-sub-size |
|
||||||
sup |
|
||||||
font-size: $title-sup-size |
|
||||||
.tag |
|
||||||
vertical-align: middle |
|
||||||
|
|
||||||
.title |
|
||||||
color: $title-color |
|
||||||
@if $title-family |
|
||||||
font-family: $title-family |
|
||||||
font-size: $title-size |
|
||||||
font-weight: $title-weight |
|
||||||
line-height: $title-line-height |
|
||||||
strong |
|
||||||
color: $title-strong-color |
|
||||||
font-weight: $title-strong-weight |
|
||||||
& + .highlight |
|
||||||
margin-top: -0.75rem |
|
||||||
&:not(.is-spaced) + .subtitle |
|
||||||
margin-top: $subtitle-negative-margin |
|
||||||
// Sizes |
|
||||||
@each $size in $sizes |
|
||||||
$i: index($sizes, $size) |
|
||||||
&.is-#{$i} |
|
||||||
font-size: $size |
|
||||||
|
|
||||||
.subtitle |
|
||||||
color: $subtitle-color |
|
||||||
@if $subtitle-family |
|
||||||
font-family: $subtitle-family |
|
||||||
font-size: $subtitle-size |
|
||||||
font-weight: $subtitle-weight |
|
||||||
line-height: $subtitle-line-height |
|
||||||
strong |
|
||||||
color: $subtitle-strong-color |
|
||||||
font-weight: $subtitle-strong-weight |
|
||||||
&:not(.is-spaced) + .title |
|
||||||
margin-top: $subtitle-negative-margin |
|
||||||
// Sizes |
|
||||||
@each $size in $sizes |
|
||||||
$i: index($sizes, $size) |
|
||||||
&.is-#{$i} |
|
||||||
font-size: $size |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
/* Bulma Form */ |
|
||||||
@charset "utf-8" |
|
||||||
|
|
||||||
@import "shared.sass" |
|
||||||
@import "input-textarea.sass" |
|
||||||
@import "checkbox-radio.sass" |
|
||||||
@import "select.sass" |
|
||||||
@import "file.sass" |
|
||||||
@import "tools.sass" |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
%checkbox-radio |
|
||||||
cursor: pointer |
|
||||||
display: inline-block |
|
||||||
line-height: 1.25 |
|
||||||
position: relative |
|
||||||
input |
|
||||||
cursor: pointer |
|
||||||
&:hover |
|
||||||
color: $input-hover-color |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] &, |
|
||||||
input[disabled] |
|
||||||
color: $input-disabled-color |
|
||||||
cursor: not-allowed |
|
||||||
|
|
||||||
.checkbox |
|
||||||
@extend %checkbox-radio |
|
||||||
|
|
||||||
.radio |
|
||||||
@extend %checkbox-radio |
|
||||||
& + .radio |
|
||||||
+ltr-property("margin", 0.5em, false) |
|
||||||
@ -1,182 +0,0 @@ |
|||||||
$file-border-color: $border !default |
|
||||||
$file-radius: $radius !default |
|
||||||
|
|
||||||
$file-cta-background-color: $scheme-main-ter !default |
|
||||||
$file-cta-color: $text !default |
|
||||||
$file-cta-hover-color: $text-strong !default |
|
||||||
$file-cta-active-color: $text-strong !default |
|
||||||
|
|
||||||
$file-name-border-color: $border !default |
|
||||||
$file-name-border-style: solid !default |
|
||||||
$file-name-border-width: 1px 1px 1px 0 !default |
|
||||||
$file-name-max-width: 16em !default |
|
||||||
|
|
||||||
$file-colors: $form-colors !default |
|
||||||
|
|
||||||
.file |
|
||||||
@extend %unselectable |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
justify-content: flex-start |
|
||||||
position: relative |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $file-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
$color-invert: nth($pair, 2) |
|
||||||
&.is-#{$name} |
|
||||||
.file-cta |
|
||||||
background-color: $color |
|
||||||
border-color: transparent |
|
||||||
color: $color-invert |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
.file-cta |
|
||||||
background-color: bulmaDarken($color, 2.5%) |
|
||||||
border-color: transparent |
|
||||||
color: $color-invert |
|
||||||
&:focus, |
|
||||||
&.is-focused |
|
||||||
.file-cta |
|
||||||
border-color: transparent |
|
||||||
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25) |
|
||||||
color: $color-invert |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
.file-cta |
|
||||||
background-color: bulmaDarken($color, 5%) |
|
||||||
border-color: transparent |
|
||||||
color: $color-invert |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
.file-icon |
|
||||||
.fa |
|
||||||
font-size: 21px |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
.file-icon |
|
||||||
.fa |
|
||||||
font-size: 28px |
|
||||||
// Modifiers |
|
||||||
&.has-name |
|
||||||
.file-cta |
|
||||||
border-bottom-right-radius: 0 |
|
||||||
border-top-right-radius: 0 |
|
||||||
.file-name |
|
||||||
border-bottom-left-radius: 0 |
|
||||||
border-top-left-radius: 0 |
|
||||||
&.is-empty |
|
||||||
.file-cta |
|
||||||
border-radius: $file-radius |
|
||||||
.file-name |
|
||||||
display: none |
|
||||||
&.is-boxed |
|
||||||
.file-label |
|
||||||
flex-direction: column |
|
||||||
.file-cta |
|
||||||
flex-direction: column |
|
||||||
height: auto |
|
||||||
padding: 1em 3em |
|
||||||
.file-name |
|
||||||
border-width: 0 1px 1px |
|
||||||
.file-icon |
|
||||||
height: 1.5em |
|
||||||
width: 1.5em |
|
||||||
.fa |
|
||||||
font-size: 21px |
|
||||||
&.is-small |
|
||||||
.file-icon .fa |
|
||||||
font-size: 14px |
|
||||||
&.is-medium |
|
||||||
.file-icon .fa |
|
||||||
font-size: 28px |
|
||||||
&.is-large |
|
||||||
.file-icon .fa |
|
||||||
font-size: 35px |
|
||||||
&.has-name |
|
||||||
.file-cta |
|
||||||
border-radius: $file-radius $file-radius 0 0 |
|
||||||
.file-name |
|
||||||
border-radius: 0 0 $file-radius $file-radius |
|
||||||
border-width: 0 1px 1px |
|
||||||
&.is-centered |
|
||||||
justify-content: center |
|
||||||
&.is-fullwidth |
|
||||||
.file-label |
|
||||||
width: 100% |
|
||||||
.file-name |
|
||||||
flex-grow: 1 |
|
||||||
max-width: none |
|
||||||
&.is-right |
|
||||||
justify-content: flex-end |
|
||||||
.file-cta |
|
||||||
border-radius: 0 $file-radius $file-radius 0 |
|
||||||
.file-name |
|
||||||
border-radius: $file-radius 0 0 $file-radius |
|
||||||
border-width: 1px 0 1px 1px |
|
||||||
order: -1 |
|
||||||
|
|
||||||
.file-label |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
cursor: pointer |
|
||||||
justify-content: flex-start |
|
||||||
overflow: hidden |
|
||||||
position: relative |
|
||||||
&:hover |
|
||||||
.file-cta |
|
||||||
background-color: bulmaDarken($file-cta-background-color, 2.5%) |
|
||||||
color: $file-cta-hover-color |
|
||||||
.file-name |
|
||||||
border-color: bulmaDarken($file-name-border-color, 2.5%) |
|
||||||
&:active |
|
||||||
.file-cta |
|
||||||
background-color: bulmaDarken($file-cta-background-color, 5%) |
|
||||||
color: $file-cta-active-color |
|
||||||
.file-name |
|
||||||
border-color: bulmaDarken($file-name-border-color, 5%) |
|
||||||
|
|
||||||
.file-input |
|
||||||
height: 100% |
|
||||||
left: 0 |
|
||||||
opacity: 0 |
|
||||||
outline: none |
|
||||||
position: absolute |
|
||||||
top: 0 |
|
||||||
width: 100% |
|
||||||
|
|
||||||
.file-cta, |
|
||||||
.file-name |
|
||||||
@extend %control |
|
||||||
border-color: $file-border-color |
|
||||||
border-radius: $file-radius |
|
||||||
font-size: 1em |
|
||||||
padding-left: 1em |
|
||||||
padding-right: 1em |
|
||||||
white-space: nowrap |
|
||||||
|
|
||||||
.file-cta |
|
||||||
background-color: $file-cta-background-color |
|
||||||
color: $file-cta-color |
|
||||||
|
|
||||||
.file-name |
|
||||||
border-color: $file-name-border-color |
|
||||||
border-style: $file-name-border-style |
|
||||||
border-width: $file-name-border-width |
|
||||||
display: block |
|
||||||
max-width: $file-name-max-width |
|
||||||
overflow: hidden |
|
||||||
text-align: inherit |
|
||||||
text-overflow: ellipsis |
|
||||||
|
|
||||||
.file-icon |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
height: 1em |
|
||||||
justify-content: center |
|
||||||
+ltr-property("margin", 0.5em) |
|
||||||
width: 1em |
|
||||||
.fa |
|
||||||
font-size: 14px |
|
||||||
@ -1,66 +0,0 @@ |
|||||||
$textarea-padding: $control-padding-horizontal !default |
|
||||||
$textarea-max-height: 40em !default |
|
||||||
$textarea-min-height: 8em !default |
|
||||||
|
|
||||||
$textarea-colors: $form-colors !default |
|
||||||
|
|
||||||
%input-textarea |
|
||||||
@extend %input |
|
||||||
box-shadow: $input-shadow |
|
||||||
max-width: 100% |
|
||||||
width: 100% |
|
||||||
&[readonly] |
|
||||||
box-shadow: none |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $textarea-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
&.is-#{$name} |
|
||||||
border-color: $color |
|
||||||
&:focus, |
|
||||||
&.is-focused, |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25) |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
+control-small |
|
||||||
&.is-medium |
|
||||||
+control-medium |
|
||||||
&.is-large |
|
||||||
+control-large |
|
||||||
// Modifiers |
|
||||||
&.is-fullwidth |
|
||||||
display: block |
|
||||||
width: 100% |
|
||||||
&.is-inline |
|
||||||
display: inline |
|
||||||
width: auto |
|
||||||
|
|
||||||
.input |
|
||||||
@extend %input-textarea |
|
||||||
&.is-rounded |
|
||||||
border-radius: $radius-rounded |
|
||||||
padding-left: calc(#{$control-padding-horizontal} + 0.375em) |
|
||||||
padding-right: calc(#{$control-padding-horizontal} + 0.375em) |
|
||||||
&.is-static |
|
||||||
background-color: transparent |
|
||||||
border-color: transparent |
|
||||||
box-shadow: none |
|
||||||
padding-left: 0 |
|
||||||
padding-right: 0 |
|
||||||
|
|
||||||
.textarea |
|
||||||
@extend %input-textarea |
|
||||||
display: block |
|
||||||
max-width: 100% |
|
||||||
min-width: 100% |
|
||||||
padding: $textarea-padding |
|
||||||
resize: vertical |
|
||||||
&:not([rows]) |
|
||||||
max-height: $textarea-max-height |
|
||||||
min-height: $textarea-min-height |
|
||||||
&[rows] |
|
||||||
height: initial |
|
||||||
// Modifiers |
|
||||||
&.has-fixed-size |
|
||||||
resize: none |
|
||||||
@ -1,87 +0,0 @@ |
|||||||
$select-colors: $form-colors !default |
|
||||||
|
|
||||||
.select |
|
||||||
display: inline-block |
|
||||||
max-width: 100% |
|
||||||
position: relative |
|
||||||
vertical-align: top |
|
||||||
&:not(.is-multiple) |
|
||||||
height: $input-height |
|
||||||
&:not(.is-multiple):not(.is-loading) |
|
||||||
&::after |
|
||||||
@extend %arrow |
|
||||||
border-color: $input-arrow |
|
||||||
+ltr-position(1.125em) |
|
||||||
z-index: 4 |
|
||||||
&.is-rounded |
|
||||||
select |
|
||||||
border-radius: $radius-rounded |
|
||||||
+ltr-property("padding", 1em, false) |
|
||||||
select |
|
||||||
@extend %input |
|
||||||
cursor: pointer |
|
||||||
display: block |
|
||||||
font-size: 1em |
|
||||||
max-width: 100% |
|
||||||
outline: none |
|
||||||
&::-ms-expand |
|
||||||
display: none |
|
||||||
&[disabled]:hover, |
|
||||||
fieldset[disabled] &:hover |
|
||||||
border-color: $input-disabled-border-color |
|
||||||
&:not([multiple]) |
|
||||||
+ltr-property("padding", 2.5em) |
|
||||||
&[multiple] |
|
||||||
height: auto |
|
||||||
padding: 0 |
|
||||||
option |
|
||||||
padding: 0.5em 1em |
|
||||||
// States |
|
||||||
&:not(.is-multiple):not(.is-loading):hover |
|
||||||
&::after |
|
||||||
border-color: $input-hover-color |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $select-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
&.is-#{$name} |
|
||||||
&:not(:hover)::after |
|
||||||
border-color: $color |
|
||||||
select |
|
||||||
border-color: $color |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
border-color: bulmaDarken($color, 5%) |
|
||||||
&:focus, |
|
||||||
&.is-focused, |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25) |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
+control-small |
|
||||||
&.is-medium |
|
||||||
+control-medium |
|
||||||
&.is-large |
|
||||||
+control-large |
|
||||||
// Modifiers |
|
||||||
&.is-disabled |
|
||||||
&::after |
|
||||||
border-color: $input-disabled-color |
|
||||||
&.is-fullwidth |
|
||||||
width: 100% |
|
||||||
select |
|
||||||
width: 100% |
|
||||||
&.is-loading |
|
||||||
&::after |
|
||||||
@extend %loader |
|
||||||
margin-top: 0 |
|
||||||
position: absolute |
|
||||||
+ltr-position(0.625em) |
|
||||||
top: 0.625em |
|
||||||
transform: none |
|
||||||
&.is-small:after |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium:after |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large:after |
|
||||||
font-size: $size-large |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
$form-colors: $colors !default |
|
||||||
|
|
||||||
$input-color: $text-strong !default |
|
||||||
$input-background-color: $scheme-main !default |
|
||||||
$input-border-color: $border !default |
|
||||||
$input-height: $control-height !default |
|
||||||
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default |
|
||||||
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default |
|
||||||
|
|
||||||
$input-hover-color: $text-strong !default |
|
||||||
$input-hover-border-color: $border-hover !default |
|
||||||
|
|
||||||
$input-focus-color: $text-strong !default |
|
||||||
$input-focus-border-color: $link !default |
|
||||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default |
|
||||||
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default |
|
||||||
|
|
||||||
$input-disabled-color: $text-light !default |
|
||||||
$input-disabled-background-color: $background !default |
|
||||||
$input-disabled-border-color: $background !default |
|
||||||
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default |
|
||||||
|
|
||||||
$input-arrow: $link !default |
|
||||||
|
|
||||||
$input-icon-color: $border !default |
|
||||||
$input-icon-active-color: $text !default |
|
||||||
|
|
||||||
$input-radius: $radius !default |
|
||||||
|
|
||||||
=input |
|
||||||
@extend %control |
|
||||||
background-color: $input-background-color |
|
||||||
border-color: $input-border-color |
|
||||||
border-radius: $input-radius |
|
||||||
color: $input-color |
|
||||||
+placeholder |
|
||||||
color: $input-placeholder-color |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
border-color: $input-hover-border-color |
|
||||||
&:focus, |
|
||||||
&.is-focused, |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
border-color: $input-focus-border-color |
|
||||||
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
background-color: $input-disabled-background-color |
|
||||||
border-color: $input-disabled-border-color |
|
||||||
box-shadow: none |
|
||||||
color: $input-disabled-color |
|
||||||
+placeholder |
|
||||||
color: $input-disabled-placeholder-color |
|
||||||
|
|
||||||
%input |
|
||||||
+input |
|
||||||
@ -1,215 +0,0 @@ |
|||||||
$label-color: $text-strong !default |
|
||||||
$label-weight: $weight-bold !default |
|
||||||
|
|
||||||
$help-size: $size-small !default |
|
||||||
|
|
||||||
$label-colors: $form-colors !default |
|
||||||
|
|
||||||
.label |
|
||||||
color: $label-color |
|
||||||
display: block |
|
||||||
font-size: $size-normal |
|
||||||
font-weight: $label-weight |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 0.5em |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
|
|
||||||
.help |
|
||||||
display: block |
|
||||||
font-size: $help-size |
|
||||||
margin-top: 0.25rem |
|
||||||
@each $name, $pair in $label-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
&.is-#{$name} |
|
||||||
color: $color |
|
||||||
|
|
||||||
// Containers |
|
||||||
|
|
||||||
.field |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 0.75rem |
|
||||||
// Modifiers |
|
||||||
&.has-addons |
|
||||||
display: flex |
|
||||||
justify-content: flex-start |
|
||||||
.control |
|
||||||
&:not(:last-child) |
|
||||||
+ltr-property("margin", -1px) |
|
||||||
&:not(:first-child):not(:last-child) |
|
||||||
.button, |
|
||||||
.input, |
|
||||||
.select select |
|
||||||
border-radius: 0 |
|
||||||
&:first-child:not(:only-child) |
|
||||||
.button, |
|
||||||
.input, |
|
||||||
.select select |
|
||||||
+ltr |
|
||||||
border-bottom-right-radius: 0 |
|
||||||
border-top-right-radius: 0 |
|
||||||
+rtl |
|
||||||
border-bottom-left-radius: 0 |
|
||||||
border-top-left-radius: 0 |
|
||||||
&:last-child:not(:only-child) |
|
||||||
.button, |
|
||||||
.input, |
|
||||||
.select select |
|
||||||
+ltr |
|
||||||
border-bottom-left-radius: 0 |
|
||||||
border-top-left-radius: 0 |
|
||||||
+rtl |
|
||||||
border-bottom-right-radius: 0 |
|
||||||
border-top-right-radius: 0 |
|
||||||
.button, |
|
||||||
.input, |
|
||||||
.select select |
|
||||||
&:not([disabled]) |
|
||||||
&:hover, |
|
||||||
&.is-hovered |
|
||||||
z-index: 2 |
|
||||||
&:focus, |
|
||||||
&.is-focused, |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
z-index: 3 |
|
||||||
&:hover |
|
||||||
z-index: 4 |
|
||||||
&.is-expanded |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
&.has-addons-centered |
|
||||||
justify-content: center |
|
||||||
&.has-addons-right |
|
||||||
justify-content: flex-end |
|
||||||
&.has-addons-fullwidth |
|
||||||
.control |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
&.is-grouped |
|
||||||
display: flex |
|
||||||
justify-content: flex-start |
|
||||||
& > .control |
|
||||||
flex-shrink: 0 |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 0 |
|
||||||
+ltr-property("margin", 0.75rem) |
|
||||||
&.is-expanded |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
&.is-grouped-centered |
|
||||||
justify-content: center |
|
||||||
&.is-grouped-right |
|
||||||
justify-content: flex-end |
|
||||||
&.is-grouped-multiline |
|
||||||
flex-wrap: wrap |
|
||||||
& > .control |
|
||||||
&:last-child, |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 0.75rem |
|
||||||
&:last-child |
|
||||||
margin-bottom: -0.75rem |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 0 |
|
||||||
&.is-horizontal |
|
||||||
+tablet |
|
||||||
display: flex |
|
||||||
|
|
||||||
.field-label |
|
||||||
.label |
|
||||||
font-size: inherit |
|
||||||
+mobile |
|
||||||
margin-bottom: 0.5rem |
|
||||||
+tablet |
|
||||||
flex-basis: 0 |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
+ltr-property("margin", 1.5rem) |
|
||||||
text-align: right |
|
||||||
&.is-small |
|
||||||
font-size: $size-small |
|
||||||
padding-top: 0.375em |
|
||||||
&.is-normal |
|
||||||
padding-top: 0.375em |
|
||||||
&.is-medium |
|
||||||
font-size: $size-medium |
|
||||||
padding-top: 0.375em |
|
||||||
&.is-large |
|
||||||
font-size: $size-large |
|
||||||
padding-top: 0.375em |
|
||||||
|
|
||||||
.field-body |
|
||||||
.field .field |
|
||||||
margin-bottom: 0 |
|
||||||
+tablet |
|
||||||
display: flex |
|
||||||
flex-basis: 0 |
|
||||||
flex-grow: 5 |
|
||||||
flex-shrink: 1 |
|
||||||
.field |
|
||||||
margin-bottom: 0 |
|
||||||
& > .field |
|
||||||
flex-shrink: 1 |
|
||||||
&:not(.is-narrow) |
|
||||||
flex-grow: 1 |
|
||||||
&:not(:last-child) |
|
||||||
+ltr-property("margin", 0.75rem) |
|
||||||
|
|
||||||
.control |
|
||||||
box-sizing: border-box |
|
||||||
clear: both |
|
||||||
font-size: $size-normal |
|
||||||
position: relative |
|
||||||
text-align: inherit |
|
||||||
// Modifiers |
|
||||||
&.has-icons-left, |
|
||||||
&.has-icons-right |
|
||||||
.input, |
|
||||||
.select |
|
||||||
&:focus |
|
||||||
& ~ .icon |
|
||||||
color: $input-icon-active-color |
|
||||||
&.is-small ~ .icon |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium ~ .icon |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large ~ .icon |
|
||||||
font-size: $size-large |
|
||||||
.icon |
|
||||||
color: $input-icon-color |
|
||||||
height: $input-height |
|
||||||
pointer-events: none |
|
||||||
position: absolute |
|
||||||
top: 0 |
|
||||||
width: $input-height |
|
||||||
z-index: 4 |
|
||||||
&.has-icons-left |
|
||||||
.input, |
|
||||||
.select select |
|
||||||
padding-left: $input-height |
|
||||||
.icon.is-left |
|
||||||
left: 0 |
|
||||||
&.has-icons-right |
|
||||||
.input, |
|
||||||
.select select |
|
||||||
padding-right: $input-height |
|
||||||
.icon.is-right |
|
||||||
right: 0 |
|
||||||
&.is-loading |
|
||||||
&::after |
|
||||||
@extend %loader |
|
||||||
position: absolute !important |
|
||||||
+ltr-position(0.625em) |
|
||||||
top: 0.625em |
|
||||||
z-index: 4 |
|
||||||
&.is-small:after |
|
||||||
font-size: $size-small |
|
||||||
&.is-medium:after |
|
||||||
font-size: $size-medium |
|
||||||
&.is-large:after |
|
||||||
font-size: $size-large |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
/* Bulma Grid */ |
|
||||||
@charset "utf-8" |
|
||||||
|
|
||||||
@import "columns.sass" |
|
||||||
@import "tiles.sass" |
|
||||||
@ -1,504 +0,0 @@ |
|||||||
$column-gap: 0.75rem !default |
|
||||||
|
|
||||||
.column |
|
||||||
display: block |
|
||||||
flex-basis: 0 |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
padding: $column-gap |
|
||||||
.columns.is-mobile > &.is-narrow |
|
||||||
flex: none |
|
||||||
.columns.is-mobile > &.is-full |
|
||||||
flex: none |
|
||||||
width: 100% |
|
||||||
.columns.is-mobile > &.is-three-quarters |
|
||||||
flex: none |
|
||||||
width: 75% |
|
||||||
.columns.is-mobile > &.is-two-thirds |
|
||||||
flex: none |
|
||||||
width: 66.6666% |
|
||||||
.columns.is-mobile > &.is-half |
|
||||||
flex: none |
|
||||||
width: 50% |
|
||||||
.columns.is-mobile > &.is-one-third |
|
||||||
flex: none |
|
||||||
width: 33.3333% |
|
||||||
.columns.is-mobile > &.is-one-quarter |
|
||||||
flex: none |
|
||||||
width: 25% |
|
||||||
.columns.is-mobile > &.is-one-fifth |
|
||||||
flex: none |
|
||||||
width: 20% |
|
||||||
.columns.is-mobile > &.is-two-fifths |
|
||||||
flex: none |
|
||||||
width: 40% |
|
||||||
.columns.is-mobile > &.is-three-fifths |
|
||||||
flex: none |
|
||||||
width: 60% |
|
||||||
.columns.is-mobile > &.is-four-fifths |
|
||||||
flex: none |
|
||||||
width: 80% |
|
||||||
.columns.is-mobile > &.is-offset-three-quarters |
|
||||||
margin-left: 75% |
|
||||||
.columns.is-mobile > &.is-offset-two-thirds |
|
||||||
margin-left: 66.6666% |
|
||||||
.columns.is-mobile > &.is-offset-half |
|
||||||
margin-left: 50% |
|
||||||
.columns.is-mobile > &.is-offset-one-third |
|
||||||
margin-left: 33.3333% |
|
||||||
.columns.is-mobile > &.is-offset-one-quarter |
|
||||||
margin-left: 25% |
|
||||||
.columns.is-mobile > &.is-offset-one-fifth |
|
||||||
margin-left: 20% |
|
||||||
.columns.is-mobile > &.is-offset-two-fifths |
|
||||||
margin-left: 40% |
|
||||||
.columns.is-mobile > &.is-offset-three-fifths |
|
||||||
margin-left: 60% |
|
||||||
.columns.is-mobile > &.is-offset-four-fifths |
|
||||||
margin-left: 80% |
|
||||||
@for $i from 0 through 12 |
|
||||||
.columns.is-mobile > &.is-#{$i} |
|
||||||
flex: none |
|
||||||
width: percentage($i / 12) |
|
||||||
.columns.is-mobile > &.is-offset-#{$i} |
|
||||||
margin-left: percentage($i / 12) |
|
||||||
+mobile |
|
||||||
&.is-narrow-mobile |
|
||||||
flex: none |
|
||||||
&.is-full-mobile |
|
||||||
flex: none |
|
||||||
width: 100% |
|
||||||
&.is-three-quarters-mobile |
|
||||||
flex: none |
|
||||||
width: 75% |
|
||||||
&.is-two-thirds-mobile |
|
||||||
flex: none |
|
||||||
width: 66.6666% |
|
||||||
&.is-half-mobile |
|
||||||
flex: none |
|
||||||
width: 50% |
|
||||||
&.is-one-third-mobile |
|
||||||
flex: none |
|
||||||
width: 33.3333% |
|
||||||
&.is-one-quarter-mobile |
|
||||||
flex: none |
|
||||||
width: 25% |
|
||||||
&.is-one-fifth-mobile |
|
||||||
flex: none |
|
||||||
width: 20% |
|
||||||
&.is-two-fifths-mobile |
|
||||||
flex: none |
|
||||||
width: 40% |
|
||||||
&.is-three-fifths-mobile |
|
||||||
flex: none |
|
||||||
width: 60% |
|
||||||
&.is-four-fifths-mobile |
|
||||||
flex: none |
|
||||||
width: 80% |
|
||||||
&.is-offset-three-quarters-mobile |
|
||||||
margin-left: 75% |
|
||||||
&.is-offset-two-thirds-mobile |
|
||||||
margin-left: 66.6666% |
|
||||||
&.is-offset-half-mobile |
|
||||||
margin-left: 50% |
|
||||||
&.is-offset-one-third-mobile |
|
||||||
margin-left: 33.3333% |
|
||||||
&.is-offset-one-quarter-mobile |
|
||||||
margin-left: 25% |
|
||||||
&.is-offset-one-fifth-mobile |
|
||||||
margin-left: 20% |
|
||||||
&.is-offset-two-fifths-mobile |
|
||||||
margin-left: 40% |
|
||||||
&.is-offset-three-fifths-mobile |
|
||||||
margin-left: 60% |
|
||||||
&.is-offset-four-fifths-mobile |
|
||||||
margin-left: 80% |
|
||||||
@for $i from 0 through 12 |
|
||||||
&.is-#{$i}-mobile |
|
||||||
flex: none |
|
||||||
width: percentage($i / 12) |
|
||||||
&.is-offset-#{$i}-mobile |
|
||||||
margin-left: percentage($i / 12) |
|
||||||
+tablet |
|
||||||
&.is-narrow, |
|
||||||
&.is-narrow-tablet |
|
||||||
flex: none |
|
||||||
&.is-full, |
|
||||||
&.is-full-tablet |
|
||||||
flex: none |
|
||||||
width: 100% |
|
||||||
&.is-three-quarters, |
|
||||||
&.is-three-quarters-tablet |
|
||||||
flex: none |
|
||||||
width: 75% |
|
||||||
&.is-two-thirds, |
|
||||||
&.is-two-thirds-tablet |
|
||||||
flex: none |
|
||||||
width: 66.6666% |
|
||||||
&.is-half, |
|
||||||
&.is-half-tablet |
|
||||||
flex: none |
|
||||||
width: 50% |
|
||||||
&.is-one-third, |
|
||||||
&.is-one-third-tablet |
|
||||||
flex: none |
|
||||||
width: 33.3333% |
|
||||||
&.is-one-quarter, |
|
||||||
&.is-one-quarter-tablet |
|
||||||
flex: none |
|
||||||
width: 25% |
|
||||||
&.is-one-fifth, |
|
||||||
&.is-one-fifth-tablet |
|
||||||
flex: none |
|
||||||
width: 20% |
|
||||||
&.is-two-fifths, |
|
||||||
&.is-two-fifths-tablet |
|
||||||
flex: none |
|
||||||
width: 40% |
|
||||||
&.is-three-fifths, |
|
||||||
&.is-three-fifths-tablet |
|
||||||
flex: none |
|
||||||
width: 60% |
|
||||||
&.is-four-fifths, |
|
||||||
&.is-four-fifths-tablet |
|
||||||
flex: none |
|
||||||
width: 80% |
|
||||||
&.is-offset-three-quarters, |
|
||||||
&.is-offset-three-quarters-tablet |
|
||||||
margin-left: 75% |
|
||||||
&.is-offset-two-thirds, |
|
||||||
&.is-offset-two-thirds-tablet |
|
||||||
margin-left: 66.6666% |
|
||||||
&.is-offset-half, |
|
||||||
&.is-offset-half-tablet |
|
||||||
margin-left: 50% |
|
||||||
&.is-offset-one-third, |
|
||||||
&.is-offset-one-third-tablet |
|
||||||
margin-left: 33.3333% |
|
||||||
&.is-offset-one-quarter, |
|
||||||
&.is-offset-one-quarter-tablet |
|
||||||
margin-left: 25% |
|
||||||
&.is-offset-one-fifth, |
|
||||||
&.is-offset-one-fifth-tablet |
|
||||||
margin-left: 20% |
|
||||||
&.is-offset-two-fifths, |
|
||||||
&.is-offset-two-fifths-tablet |
|
||||||
margin-left: 40% |
|
||||||
&.is-offset-three-fifths, |
|
||||||
&.is-offset-three-fifths-tablet |
|
||||||
margin-left: 60% |
|
||||||
&.is-offset-four-fifths, |
|
||||||
&.is-offset-four-fifths-tablet |
|
||||||
margin-left: 80% |
|
||||||
@for $i from 0 through 12 |
|
||||||
&.is-#{$i}, |
|
||||||
&.is-#{$i}-tablet |
|
||||||
flex: none |
|
||||||
width: percentage($i / 12) |
|
||||||
&.is-offset-#{$i}, |
|
||||||
&.is-offset-#{$i}-tablet |
|
||||||
margin-left: percentage($i / 12) |
|
||||||
+touch |
|
||||||
&.is-narrow-touch |
|
||||||
flex: none |
|
||||||
&.is-full-touch |
|
||||||
flex: none |
|
||||||
width: 100% |
|
||||||
&.is-three-quarters-touch |
|
||||||
flex: none |
|
||||||
width: 75% |
|
||||||
&.is-two-thirds-touch |
|
||||||
flex: none |
|
||||||
width: 66.6666% |
|
||||||
&.is-half-touch |
|
||||||
flex: none |
|
||||||
width: 50% |
|
||||||
&.is-one-third-touch |
|
||||||
flex: none |
|
||||||
width: 33.3333% |
|
||||||
&.is-one-quarter-touch |
|
||||||
flex: none |
|
||||||
width: 25% |
|
||||||
&.is-one-fifth-touch |
|
||||||
flex: none |
|
||||||
width: 20% |
|
||||||
&.is-two-fifths-touch |
|
||||||
flex: none |
|
||||||
width: 40% |
|
||||||
&.is-three-fifths-touch |
|
||||||
flex: none |
|
||||||
width: 60% |
|
||||||
&.is-four-fifths-touch |
|
||||||
flex: none |
|
||||||
width: 80% |
|
||||||
&.is-offset-three-quarters-touch |
|
||||||
margin-left: 75% |
|
||||||
&.is-offset-two-thirds-touch |
|
||||||
margin-left: 66.6666% |
|
||||||
&.is-offset-half-touch |
|
||||||
margin-left: 50% |
|
||||||
&.is-offset-one-third-touch |
|
||||||
margin-left: 33.3333% |
|
||||||
&.is-offset-one-quarter-touch |
|
||||||
margin-left: 25% |
|
||||||
&.is-offset-one-fifth-touch |
|
||||||
margin-left: 20% |
|
||||||
&.is-offset-two-fifths-touch |
|
||||||
margin-left: 40% |
|
||||||
&.is-offset-three-fifths-touch |
|
||||||
margin-left: 60% |
|
||||||
&.is-offset-four-fifths-touch |
|
||||||
margin-left: 80% |
|
||||||
@for $i from 0 through 12 |
|
||||||
&.is-#{$i}-touch |
|
||||||
flex: none |
|
||||||
width: percentage($i / 12) |
|
||||||
&.is-offset-#{$i}-touch |
|
||||||
margin-left: percentage($i / 12) |
|
||||||
+desktop |
|
||||||
&.is-narrow-desktop |
|
||||||
flex: none |
|
||||||
&.is-full-desktop |
|
||||||
flex: none |
|
||||||
width: 100% |
|
||||||
&.is-three-quarters-desktop |
|
||||||
flex: none |
|
||||||
width: 75% |
|
||||||
&.is-two-thirds-desktop |
|
||||||
flex: none |
|
||||||
width: 66.6666% |
|
||||||
&.is-half-desktop |
|
||||||
flex: none |
|
||||||
width: 50% |
|
||||||
&.is-one-third-desktop |
|
||||||
flex: none |
|
||||||
width: 33.3333% |
|
||||||
&.is-one-quarter-desktop |
|
||||||
flex: none |
|
||||||
width: 25% |
|
||||||
&.is-one-fifth-desktop |
|
||||||
flex: none |
|
||||||
width: 20% |
|
||||||
&.is-two-fifths-desktop |
|
||||||
flex: none |
|
||||||
width: 40% |
|
||||||
&.is-three-fifths-desktop |
|
||||||
flex: none |
|
||||||
width: 60% |
|
||||||
&.is-four-fifths-desktop |
|
||||||
flex: none |
|
||||||
width: 80% |
|
||||||
&.is-offset-three-quarters-desktop |
|
||||||
margin-left: 75% |
|
||||||
&.is-offset-two-thirds-desktop |
|
||||||
margin-left: 66.6666% |
|
||||||
&.is-offset-half-desktop |
|
||||||
margin-left: 50% |
|
||||||
&.is-offset-one-third-desktop |
|
||||||
margin-left: 33.3333% |
|
||||||
&.is-offset-one-quarter-desktop |
|
||||||
margin-left: 25% |
|
||||||
&.is-offset-one-fifth-desktop |
|
||||||
margin-left: 20% |
|
||||||
&.is-offset-two-fifths-desktop |
|
||||||
margin-left: 40% |
|
||||||
&.is-offset-three-fifths-desktop |
|
||||||
margin-left: 60% |
|
||||||
&.is-offset-four-fifths-desktop |
|
||||||
margin-left: 80% |
|
||||||
@for $i from 0 through 12 |
|
||||||
&.is-#{$i}-desktop |
|
||||||
flex: none |
|
||||||
width: percentage($i / 12) |
|
||||||
&.is-offset-#{$i}-desktop |
|
||||||
margin-left: percentage($i / 12) |
|
||||||
+widescreen |
|
||||||
&.is-narrow-widescreen |
|
||||||
flex: none |
|
||||||
&.is-full-widescreen |
|
||||||
flex: none |
|
||||||
width: 100% |
|
||||||
&.is-three-quarters-widescreen |
|
||||||
flex: none |
|
||||||
width: 75% |
|
||||||
&.is-two-thirds-widescreen |
|
||||||
flex: none |
|
||||||
width: 66.6666% |
|
||||||
&.is-half-widescreen |
|
||||||
flex: none |
|
||||||
width: 50% |
|
||||||
&.is-one-third-widescreen |
|
||||||
flex: none |
|
||||||
width: 33.3333% |
|
||||||
&.is-one-quarter-widescreen |
|
||||||
flex: none |
|
||||||
width: 25% |
|
||||||
&.is-one-fifth-widescreen |
|
||||||
flex: none |
|
||||||
width: 20% |
|
||||||
&.is-two-fifths-widescreen |
|
||||||
flex: none |
|
||||||
width: 40% |
|
||||||
&.is-three-fifths-widescreen |
|
||||||
flex: none |
|
||||||
width: 60% |
|
||||||
&.is-four-fifths-widescreen |
|
||||||
flex: none |
|
||||||
width: 80% |
|
||||||
&.is-offset-three-quarters-widescreen |
|
||||||
margin-left: 75% |
|
||||||
&.is-offset-two-thirds-widescreen |
|
||||||
margin-left: 66.6666% |
|
||||||
&.is-offset-half-widescreen |
|
||||||
margin-left: 50% |
|
||||||
&.is-offset-one-third-widescreen |
|
||||||
margin-left: 33.3333% |
|
||||||
&.is-offset-one-quarter-widescreen |
|
||||||
margin-left: 25% |
|
||||||
&.is-offset-one-fifth-widescreen |
|
||||||
margin-left: 20% |
|
||||||
&.is-offset-two-fifths-widescreen |
|
||||||
margin-left: 40% |
|
||||||
&.is-offset-three-fifths-widescreen |
|
||||||
margin-left: 60% |
|
||||||
&.is-offset-four-fifths-widescreen |
|
||||||
margin-left: 80% |
|
||||||
@for $i from 0 through 12 |
|
||||||
&.is-#{$i}-widescreen |
|
||||||
flex: none |
|
||||||
width: percentage($i / 12) |
|
||||||
&.is-offset-#{$i}-widescreen |
|
||||||
margin-left: percentage($i / 12) |
|
||||||
+fullhd |
|
||||||
&.is-narrow-fullhd |
|
||||||
flex: none |
|
||||||
&.is-full-fullhd |
|
||||||
flex: none |
|
||||||
width: 100% |
|
||||||
&.is-three-quarters-fullhd |
|
||||||
flex: none |
|
||||||
width: 75% |
|
||||||
&.is-two-thirds-fullhd |
|
||||||
flex: none |
|
||||||
width: 66.6666% |
|
||||||
&.is-half-fullhd |
|
||||||
flex: none |
|
||||||
width: 50% |
|
||||||
&.is-one-third-fullhd |
|
||||||
flex: none |
|
||||||
width: 33.3333% |
|
||||||
&.is-one-quarter-fullhd |
|
||||||
flex: none |
|
||||||
width: 25% |
|
||||||
&.is-one-fifth-fullhd |
|
||||||
flex: none |
|
||||||
width: 20% |
|
||||||
&.is-two-fifths-fullhd |
|
||||||
flex: none |
|
||||||
width: 40% |
|
||||||
&.is-three-fifths-fullhd |
|
||||||
flex: none |
|
||||||
width: 60% |
|
||||||
&.is-four-fifths-fullhd |
|
||||||
flex: none |
|
||||||
width: 80% |
|
||||||
&.is-offset-three-quarters-fullhd |
|
||||||
margin-left: 75% |
|
||||||
&.is-offset-two-thirds-fullhd |
|
||||||
margin-left: 66.6666% |
|
||||||
&.is-offset-half-fullhd |
|
||||||
margin-left: 50% |
|
||||||
&.is-offset-one-third-fullhd |
|
||||||
margin-left: 33.3333% |
|
||||||
&.is-offset-one-quarter-fullhd |
|
||||||
margin-left: 25% |
|
||||||
&.is-offset-one-fifth-fullhd |
|
||||||
margin-left: 20% |
|
||||||
&.is-offset-two-fifths-fullhd |
|
||||||
margin-left: 40% |
|
||||||
&.is-offset-three-fifths-fullhd |
|
||||||
margin-left: 60% |
|
||||||
&.is-offset-four-fifths-fullhd |
|
||||||
margin-left: 80% |
|
||||||
@for $i from 0 through 12 |
|
||||||
&.is-#{$i}-fullhd |
|
||||||
flex: none |
|
||||||
width: percentage($i / 12) |
|
||||||
&.is-offset-#{$i}-fullhd |
|
||||||
margin-left: percentage($i / 12) |
|
||||||
|
|
||||||
.columns |
|
||||||
margin-left: (-$column-gap) |
|
||||||
margin-right: (-$column-gap) |
|
||||||
margin-top: (-$column-gap) |
|
||||||
&:last-child |
|
||||||
margin-bottom: (-$column-gap) |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: calc(1.5rem - #{$column-gap}) |
|
||||||
// Modifiers |
|
||||||
&.is-centered |
|
||||||
justify-content: center |
|
||||||
&.is-gapless |
|
||||||
margin-left: 0 |
|
||||||
margin-right: 0 |
|
||||||
margin-top: 0 |
|
||||||
& > .column |
|
||||||
margin: 0 |
|
||||||
padding: 0 !important |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 1.5rem |
|
||||||
&:last-child |
|
||||||
margin-bottom: 0 |
|
||||||
&.is-mobile |
|
||||||
display: flex |
|
||||||
&.is-multiline |
|
||||||
flex-wrap: wrap |
|
||||||
&.is-vcentered |
|
||||||
align-items: center |
|
||||||
// Responsiveness |
|
||||||
+tablet |
|
||||||
&:not(.is-desktop) |
|
||||||
display: flex |
|
||||||
+desktop |
|
||||||
// Modifiers |
|
||||||
&.is-desktop |
|
||||||
display: flex |
|
||||||
|
|
||||||
@if $variable-columns |
|
||||||
.columns.is-variable |
|
||||||
--columnGap: 0.75rem |
|
||||||
margin-left: calc(-1 * var(--columnGap)) |
|
||||||
margin-right: calc(-1 * var(--columnGap)) |
|
||||||
.column |
|
||||||
padding-left: var(--columnGap) |
|
||||||
padding-right: var(--columnGap) |
|
||||||
@for $i from 0 through 8 |
|
||||||
&.is-#{$i} |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+mobile |
|
||||||
&.is-#{$i}-mobile |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+tablet |
|
||||||
&.is-#{$i}-tablet |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+tablet-only |
|
||||||
&.is-#{$i}-tablet-only |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+touch |
|
||||||
&.is-#{$i}-touch |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+desktop |
|
||||||
&.is-#{$i}-desktop |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+desktop-only |
|
||||||
&.is-#{$i}-desktop-only |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+widescreen |
|
||||||
&.is-#{$i}-widescreen |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+widescreen-only |
|
||||||
&.is-#{$i}-widescreen-only |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
+fullhd |
|
||||||
&.is-#{$i}-fullhd |
|
||||||
--columnGap: #{$i * 0.25rem} |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
$tile-spacing: 0.75rem !default |
|
||||||
|
|
||||||
.tile |
|
||||||
align-items: stretch |
|
||||||
display: block |
|
||||||
flex-basis: 0 |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
min-height: min-content |
|
||||||
// Modifiers |
|
||||||
&.is-ancestor |
|
||||||
margin-left: $tile-spacing * -1 |
|
||||||
margin-right: $tile-spacing * -1 |
|
||||||
margin-top: $tile-spacing * -1 |
|
||||||
&:last-child |
|
||||||
margin-bottom: $tile-spacing * -1 |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: $tile-spacing |
|
||||||
&.is-child |
|
||||||
margin: 0 !important |
|
||||||
&.is-parent |
|
||||||
padding: $tile-spacing |
|
||||||
&.is-vertical |
|
||||||
flex-direction: column |
|
||||||
& > .tile.is-child:not(:last-child) |
|
||||||
margin-bottom: 1.5rem !important |
|
||||||
// Responsiveness |
|
||||||
+tablet |
|
||||||
&:not(.is-child) |
|
||||||
display: flex |
|
||||||
@for $i from 1 through 12 |
|
||||||
&.is-#{$i} |
|
||||||
flex: none |
|
||||||
width: ($i / 12) * 100% |
|
||||||
@ -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,37 +0,0 @@ |
|||||||
@each $name, $pair in $colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
.has-text-#{$name} |
|
||||||
color: $color !important |
|
||||||
a.has-text-#{$name} |
|
||||||
&:hover, |
|
||||||
&:focus |
|
||||||
color: bulmaDarken($color, 10%) !important |
|
||||||
.has-background-#{$name} |
|
||||||
background-color: $color !important |
|
||||||
@if length($pair) >= 4 |
|
||||||
$color-light: nth($pair, 3) |
|
||||||
$color-dark: nth($pair, 4) |
|
||||||
// Light |
|
||||||
.has-text-#{$name}-light |
|
||||||
color: $color-light !important |
|
||||||
a.has-text-#{$name}-light |
|
||||||
&:hover, |
|
||||||
&:focus |
|
||||||
color: bulmaDarken($color-light, 10%) !important |
|
||||||
.has-background-#{$name}-light |
|
||||||
background-color: $color-light !important |
|
||||||
// Dark |
|
||||||
.has-text-#{$name}-dark |
|
||||||
color: $color-dark !important |
|
||||||
a.has-text-#{$name}-dark |
|
||||||
&:hover, |
|
||||||
&:focus |
|
||||||
color: bulmaLighten($color-dark, 10%) !important |
|
||||||
.has-background-#{$name}-dark |
|
||||||
background-color: $color-dark !important |
|
||||||
|
|
||||||
@each $name, $shade in $shades |
|
||||||
.has-text-#{$name} |
|
||||||
color: $shade !important |
|
||||||
.has-background-#{$name} |
|
||||||
background-color: $shade !important |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
$flex-direction-values: row, row-reverse, column, column-reverse |
|
||||||
@each $value in $flex-direction-values |
|
||||||
.is-flex-direction-#{$value} |
|
||||||
flex-direction: $value !important |
|
||||||
|
|
||||||
$flex-wrap-values: nowrap, wrap, wrap-reverse |
|
||||||
@each $value in $flex-wrap-values |
|
||||||
.is-flex-wrap-#{$value} |
|
||||||
flex-wrap: $value !important |
|
||||||
|
|
||||||
$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right |
|
||||||
@each $value in $justify-content-values |
|
||||||
.is-justify-content-#{$value} |
|
||||||
justify-content: $value !important |
|
||||||
|
|
||||||
$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline |
|
||||||
@each $value in $align-content-values |
|
||||||
.is-align-content-#{$value} |
|
||||||
align-content: $value !important |
|
||||||
|
|
||||||
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end |
|
||||||
@each $value in $align-items-values |
|
||||||
.is-align-items-#{$value} |
|
||||||
align-items: $value !important |
|
||||||
|
|
||||||
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch |
|
||||||
@each $value in $align-self-values |
|
||||||
.is-align-self-#{$value} |
|
||||||
align-self: $value !important |
|
||||||
|
|
||||||
$flex-operators: grow, shrink |
|
||||||
@each $operator in $flex-operators |
|
||||||
@for $i from 0 through 5 |
|
||||||
.is-flex-#{$operator}-#{$i} |
|
||||||
flex-#{$operator}: $i !important |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
.is-clearfix |
|
||||||
+clearfix |
|
||||||
|
|
||||||
.is-pulled-left |
|
||||||
float: left !important |
|
||||||
|
|
||||||
.is-pulled-right |
|
||||||
float: right !important |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
.is-radiusless |
|
||||||
border-radius: 0 !important |
|
||||||
|
|
||||||
.is-shadowless |
|
||||||
box-shadow: none !important |
|
||||||
|
|
||||||
.is-clickable |
|
||||||
cursor: pointer !important |
|
||||||
|
|
||||||
.is-unselectable |
|
||||||
@extend %unselectable |
|
||||||
@ -1,2 +0,0 @@ |
|||||||
.is-clipped |
|
||||||
overflow: hidden !important |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
.is-overlay |
|
||||||
@extend %overlay |
|
||||||
|
|
||||||
.is-relative |
|
||||||
position: relative !important |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
.is-marginless |
|
||||||
margin: 0 !important |
|
||||||
|
|
||||||
.is-paddingless |
|
||||||
padding: 0 !important |
|
||||||
|
|
||||||
$spacing-shortcuts: ("margin": "m", "padding": "p") !default |
|
||||||
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default |
|
||||||
$spacing-horizontal: "x" !default |
|
||||||
$spacing-vertical: "y" !default |
|
||||||
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default |
|
||||||
|
|
||||||
@each $property, $shortcut in $spacing-shortcuts |
|
||||||
@each $name, $value in $spacing-values |
|
||||||
// All directions |
|
||||||
.#{$shortcut}-#{$name} |
|
||||||
#{$property}: $value !important |
|
||||||
// Cardinal directions |
|
||||||
@each $direction, $suffix in $spacing-directions |
|
||||||
.#{$shortcut}#{$suffix}-#{$name} |
|
||||||
#{$property}-#{$direction}: $value !important |
|
||||||
// Horizontal axis |
|
||||||
@if $spacing-horizontal != null |
|
||||||
.#{$shortcut}#{$spacing-horizontal}-#{$name} |
|
||||||
#{$property}-left: $value !important |
|
||||||
#{$property}-right: $value !important |
|
||||||
// Vertical axis |
|
||||||
@if $spacing-vertical != null |
|
||||||
.#{$shortcut}#{$spacing-vertical}-#{$name} |
|
||||||
#{$property}-top: $value !important |
|
||||||
#{$property}-bottom: $value !important |
|
||||||
@ -1,98 +0,0 @@ |
|||||||
=typography-size($target:'') |
|
||||||
@each $size in $sizes |
|
||||||
$i: index($sizes, $size) |
|
||||||
.is-size-#{$i}#{if($target == '', '', '-' + $target)} |
|
||||||
font-size: $size !important |
|
||||||
|
|
||||||
+typography-size() |
|
||||||
|
|
||||||
+mobile |
|
||||||
+typography-size('mobile') |
|
||||||
|
|
||||||
+tablet |
|
||||||
+typography-size('tablet') |
|
||||||
|
|
||||||
+touch |
|
||||||
+typography-size('touch') |
|
||||||
|
|
||||||
+desktop |
|
||||||
+typography-size('desktop') |
|
||||||
|
|
||||||
+widescreen |
|
||||||
+typography-size('widescreen') |
|
||||||
|
|
||||||
+fullhd |
|
||||||
+typography-size('fullhd') |
|
||||||
|
|
||||||
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') |
|
||||||
|
|
||||||
@each $alignment, $text-align in $alignments |
|
||||||
.has-text-#{$alignment} |
|
||||||
text-align: #{$text-align} !important |
|
||||||
|
|
||||||
@each $alignment, $text-align in $alignments |
|
||||||
+mobile |
|
||||||
.has-text-#{$alignment}-mobile |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+tablet |
|
||||||
.has-text-#{$alignment}-tablet |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+tablet-only |
|
||||||
.has-text-#{$alignment}-tablet-only |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+touch |
|
||||||
.has-text-#{$alignment}-touch |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+desktop |
|
||||||
.has-text-#{$alignment}-desktop |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+desktop-only |
|
||||||
.has-text-#{$alignment}-desktop-only |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+widescreen |
|
||||||
.has-text-#{$alignment}-widescreen |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+widescreen-only |
|
||||||
.has-text-#{$alignment}-widescreen-only |
|
||||||
text-align: #{$text-align} !important |
|
||||||
+fullhd |
|
||||||
.has-text-#{$alignment}-fullhd |
|
||||||
text-align: #{$text-align} !important |
|
||||||
|
|
||||||
.is-capitalized |
|
||||||
text-transform: capitalize !important |
|
||||||
|
|
||||||
.is-lowercase |
|
||||||
text-transform: lowercase !important |
|
||||||
|
|
||||||
.is-uppercase |
|
||||||
text-transform: uppercase !important |
|
||||||
|
|
||||||
.is-italic |
|
||||||
font-style: italic !important |
|
||||||
|
|
||||||
.has-text-weight-light |
|
||||||
font-weight: $weight-light !important |
|
||||||
.has-text-weight-normal |
|
||||||
font-weight: $weight-normal !important |
|
||||||
.has-text-weight-medium |
|
||||||
font-weight: $weight-medium !important |
|
||||||
.has-text-weight-semibold |
|
||||||
font-weight: $weight-semibold !important |
|
||||||
.has-text-weight-bold |
|
||||||
font-weight: $weight-bold !important |
|
||||||
|
|
||||||
.is-family-primary |
|
||||||
font-family: $family-primary !important |
|
||||||
|
|
||||||
.is-family-secondary |
|
||||||
font-family: $family-secondary !important |
|
||||||
|
|
||||||
.is-family-sans-serif |
|
||||||
font-family: $family-sans-serif !important |
|
||||||
|
|
||||||
.is-family-monospace |
|
||||||
font-family: $family-monospace !important |
|
||||||
|
|
||||||
.is-family-code |
|
||||||
font-family: $family-code !important |
|
||||||
@ -1,122 +0,0 @@ |
|||||||
|
|
||||||
|
|
||||||
$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 |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
/* Bulma Layout */ |
|
||||||
@charset "utf-8" |
|
||||||
|
|
||||||
@import "hero.sass" |
|
||||||
@import "section.sass" |
|
||||||
@import "footer.sass" |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
$footer-background-color: $scheme-main-bis !default |
|
||||||
$footer-color: false !default |
|
||||||
$footer-padding: 3rem 1.5rem 6rem !default |
|
||||||
|
|
||||||
.footer |
|
||||||
background-color: $footer-background-color |
|
||||||
padding: $footer-padding |
|
||||||
@if $footer-color |
|
||||||
color: $footer-color |
|
||||||
@ -1,147 +0,0 @@ |
|||||||
$hero-body-padding: 3rem 1.5rem !default |
|
||||||
$hero-body-padding-small: 1.5rem !default |
|
||||||
$hero-body-padding-medium: 9rem 1.5rem !default |
|
||||||
$hero-body-padding-large: 18rem 1.5rem !default |
|
||||||
|
|
||||||
$hero-colors: $colors !default |
|
||||||
|
|
||||||
// Main container |
|
||||||
.hero |
|
||||||
align-items: stretch |
|
||||||
display: flex |
|
||||||
flex-direction: column |
|
||||||
justify-content: space-between |
|
||||||
.navbar |
|
||||||
background: none |
|
||||||
.tabs |
|
||||||
ul |
|
||||||
border-bottom: none |
|
||||||
// Colors |
|
||||||
@each $name, $pair in $hero-colors |
|
||||||
$color: nth($pair, 1) |
|
||||||
$color-invert: nth($pair, 2) |
|
||||||
&.is-#{$name} |
|
||||||
background-color: $color |
|
||||||
color: $color-invert |
|
||||||
a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), |
|
||||||
strong |
|
||||||
color: inherit |
|
||||||
.title |
|
||||||
color: $color-invert |
|
||||||
.subtitle |
|
||||||
color: bulmaRgba($color-invert, 0.9) |
|
||||||
a:not(.button), |
|
||||||
strong |
|
||||||
color: $color-invert |
|
||||||
.navbar-menu |
|
||||||
+touch |
|
||||||
background-color: $color |
|
||||||
.navbar-item, |
|
||||||
.navbar-link |
|
||||||
color: bulmaRgba($color-invert, 0.7) |
|
||||||
a.navbar-item, |
|
||||||
.navbar-link |
|
||||||
&:hover, |
|
||||||
&.is-active |
|
||||||
background-color: bulmaDarken($color, 5%) |
|
||||||
color: $color-invert |
|
||||||
.tabs |
|
||||||
a |
|
||||||
color: $color-invert |
|
||||||
opacity: 0.9 |
|
||||||
&:hover |
|
||||||
opacity: 1 |
|
||||||
li |
|
||||||
&.is-active a |
|
||||||
opacity: 1 |
|
||||||
&.is-boxed, |
|
||||||
&.is-toggle |
|
||||||
a |
|
||||||
color: $color-invert |
|
||||||
&:hover |
|
||||||
background-color: bulmaRgba($scheme-invert, 0.1) |
|
||||||
li.is-active a |
|
||||||
&, |
|
||||||
&:hover |
|
||||||
background-color: $color-invert |
|
||||||
border-color: $color-invert |
|
||||||
color: $color |
|
||||||
// Modifiers |
|
||||||
@if type-of($color) == 'color' |
|
||||||
&.is-bold |
|
||||||
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) |
|
||||||
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) |
|
||||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) |
|
||||||
+mobile |
|
||||||
.navbar-menu |
|
||||||
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
.hero-body |
|
||||||
padding: $hero-body-padding-small |
|
||||||
&.is-medium |
|
||||||
+tablet |
|
||||||
.hero-body |
|
||||||
padding: $hero-body-padding-medium |
|
||||||
&.is-large |
|
||||||
+tablet |
|
||||||
.hero-body |
|
||||||
padding: $hero-body-padding-large |
|
||||||
&.is-halfheight, |
|
||||||
&.is-fullheight, |
|
||||||
&.is-fullheight-with-navbar |
|
||||||
.hero-body |
|
||||||
align-items: center |
|
||||||
display: flex |
|
||||||
& > .container |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 1 |
|
||||||
&.is-halfheight |
|
||||||
min-height: 50vh |
|
||||||
&.is-fullheight |
|
||||||
min-height: 100vh |
|
||||||
|
|
||||||
// Components |
|
||||||
|
|
||||||
.hero-video |
|
||||||
@extend %overlay |
|
||||||
overflow: hidden |
|
||||||
video |
|
||||||
left: 50% |
|
||||||
min-height: 100% |
|
||||||
min-width: 100% |
|
||||||
position: absolute |
|
||||||
top: 50% |
|
||||||
transform: translate3d(-50%, -50%, 0) |
|
||||||
// Modifiers |
|
||||||
&.is-transparent |
|
||||||
opacity: 0.3 |
|
||||||
// Responsiveness |
|
||||||
+mobile |
|
||||||
display: none |
|
||||||
|
|
||||||
.hero-buttons |
|
||||||
margin-top: 1.5rem |
|
||||||
// Responsiveness |
|
||||||
+mobile |
|
||||||
.button |
|
||||||
display: flex |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: 0.75rem |
|
||||||
+tablet |
|
||||||
display: flex |
|
||||||
justify-content: center |
|
||||||
.button:not(:last-child) |
|
||||||
+ltr-property("margin", 1.5rem) |
|
||||||
|
|
||||||
// Containers |
|
||||||
|
|
||||||
.hero-head, |
|
||||||
.hero-foot |
|
||||||
flex-grow: 0 |
|
||||||
flex-shrink: 0 |
|
||||||
|
|
||||||
.hero-body |
|
||||||
flex-grow: 1 |
|
||||||
flex-shrink: 0 |
|
||||||
padding: $hero-body-padding |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
$section-padding: 3rem 1.5rem !default |
|
||||||
$section-padding-medium: 9rem 1.5rem !default |
|
||||||
$section-padding-large: 18rem 1.5rem !default |
|
||||||
|
|
||||||
.section |
|
||||||
padding: $section-padding |
|
||||||
// Responsiveness |
|
||||||
+desktop |
|
||||||
// Sizes |
|
||||||
&.is-medium |
|
||||||
padding: $section-padding-medium |
|
||||||
&.is-large |
|
||||||
padding: $section-padding-large |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
/* Bulma Utilities */ |
|
||||||
@charset "utf-8" |
|
||||||
|
|
||||||
@import "initial-variables.sass" |
|
||||||
@import "functions.sass" |
|
||||||
@import "derived-variables.sass" |
|
||||||
@import "animations.sass" |
|
||||||
@import "mixins.sass" |
|
||||||
@import "controls.sass" |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
@keyframes spinAround |
|
||||||
from |
|
||||||
transform: rotate(0deg) |
|
||||||
to |
|
||||||
transform: rotate(359deg) |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
$control-radius: $radius !default |
|
||||||
$control-radius-small: $radius-small !default |
|
||||||
|
|
||||||
$control-border-width: 1px !default |
|
||||||
|
|
||||||
$control-height: 2.5em !default |
|
||||||
$control-line-height: 1.5 !default |
|
||||||
|
|
||||||
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default |
|
||||||
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default |
|
||||||
|
|
||||||
=control |
|
||||||
-moz-appearance: none |
|
||||||
-webkit-appearance: none |
|
||||||
align-items: center |
|
||||||
border: $control-border-width solid transparent |
|
||||||
border-radius: $control-radius |
|
||||||
box-shadow: none |
|
||||||
display: inline-flex |
|
||||||
font-size: $size-normal |
|
||||||
height: $control-height |
|
||||||
justify-content: flex-start |
|
||||||
line-height: $control-line-height |
|
||||||
padding-bottom: $control-padding-vertical |
|
||||||
padding-left: $control-padding-horizontal |
|
||||||
padding-right: $control-padding-horizontal |
|
||||||
padding-top: $control-padding-vertical |
|
||||||
position: relative |
|
||||||
vertical-align: top |
|
||||||
// States |
|
||||||
&:focus, |
|
||||||
&.is-focused, |
|
||||||
&:active, |
|
||||||
&.is-active |
|
||||||
outline: none |
|
||||||
&[disabled], |
|
||||||
fieldset[disabled] & |
|
||||||
cursor: not-allowed |
|
||||||
|
|
||||||
%control |
|
||||||
+control |
|
||||||
|
|
||||||
// The controls sizes use mixins so they can be used at different breakpoints |
|
||||||
=control-small |
|
||||||
border-radius: $control-radius-small |
|
||||||
font-size: $size-small |
|
||||||
=control-medium |
|
||||||
font-size: $size-medium |
|
||||||
=control-large |
|
||||||
font-size: $size-large |
|
||||||
@ -1,107 +0,0 @@ |
|||||||
$primary: $turquoise !default |
|
||||||
|
|
||||||
$info: $cyan !default |
|
||||||
$success: $green !default |
|
||||||
$warning: $yellow !default |
|
||||||
$danger: $red !default |
|
||||||
|
|
||||||
$light: $white-ter !default |
|
||||||
$dark: $grey-darker !default |
|
||||||
|
|
||||||
// Invert colors |
|
||||||
|
|
||||||
$orange-invert: findColorInvert($orange) !default |
|
||||||
$yellow-invert: findColorInvert($yellow) !default |
|
||||||
$green-invert: findColorInvert($green) !default |
|
||||||
$turquoise-invert: findColorInvert($turquoise) !default |
|
||||||
$cyan-invert: findColorInvert($cyan) !default |
|
||||||
$blue-invert: findColorInvert($blue) !default |
|
||||||
$purple-invert: findColorInvert($purple) !default |
|
||||||
$red-invert: findColorInvert($red) !default |
|
||||||
|
|
||||||
$primary-invert: findColorInvert($primary) !default |
|
||||||
$primary-light: findLightColor($primary) !default |
|
||||||
$primary-dark: findDarkColor($primary) !default |
|
||||||
$info-invert: findColorInvert($info) !default |
|
||||||
$info-light: findLightColor($info) !default |
|
||||||
$info-dark: findDarkColor($info) !default |
|
||||||
$success-invert: findColorInvert($success) !default |
|
||||||
$success-light: findLightColor($success) !default |
|
||||||
$success-dark: findDarkColor($success) !default |
|
||||||
$warning-invert: findColorInvert($warning) !default |
|
||||||
$warning-light: findLightColor($warning) !default |
|
||||||
$warning-dark: findDarkColor($warning) !default |
|
||||||
$danger-invert: findColorInvert($danger) !default |
|
||||||
$danger-light: findLightColor($danger) !default |
|
||||||
$danger-dark: findDarkColor($danger) !default |
|
||||||
$light-invert: findColorInvert($light) !default |
|
||||||
$dark-invert: findColorInvert($dark) !default |
|
||||||
|
|
||||||
// General colors |
|
||||||
|
|
||||||
$scheme-main: $white !default |
|
||||||
$scheme-main-bis: $white-bis !default |
|
||||||
$scheme-main-ter: $white-ter !default |
|
||||||
$scheme-invert: $black !default |
|
||||||
$scheme-invert-bis: $black-bis !default |
|
||||||
$scheme-invert-ter: $black-ter !default |
|
||||||
|
|
||||||
$background: $white-ter !default |
|
||||||
|
|
||||||
$border: $grey-lighter !default |
|
||||||
$border-hover: $grey-light !default |
|
||||||
$border-light: $grey-lightest !default |
|
||||||
$border-light-hover: $grey-light !default |
|
||||||
|
|
||||||
// Text colors |
|
||||||
|
|
||||||
$text: $grey-dark !default |
|
||||||
$text-invert: findColorInvert($text) !default |
|
||||||
$text-light: $grey !default |
|
||||||
$text-strong: $grey-darker !default |
|
||||||
|
|
||||||
// Code colors |
|
||||||
|
|
||||||
$code: darken($red, 15%) !default |
|
||||||
$code-background: $background !default |
|
||||||
|
|
||||||
$pre: $text !default |
|
||||||
$pre-background: $background !default |
|
||||||
|
|
||||||
// Link colors |
|
||||||
|
|
||||||
$link: $blue !default |
|
||||||
$link-invert: findColorInvert($link) !default |
|
||||||
$link-light: findLightColor($link) !default |
|
||||||
$link-dark: findDarkColor($link) !default |
|
||||||
$link-visited: $purple !default |
|
||||||
|
|
||||||
$link-hover: $grey-darker !default |
|
||||||
$link-hover-border: $grey-light !default |
|
||||||
|
|
||||||
$link-focus: $grey-darker !default |
|
||||||
$link-focus-border: $blue !default |
|
||||||
|
|
||||||
$link-active: $grey-darker !default |
|
||||||
$link-active-border: $grey-dark !default |
|
||||||
|
|
||||||
// Typography |
|
||||||
|
|
||||||
$family-primary: $family-sans-serif !default |
|
||||||
$family-secondary: $family-sans-serif !default |
|
||||||
$family-code: $family-monospace !default |
|
||||||
|
|
||||||
$size-small: $size-7 !default |
|
||||||
$size-normal: $size-6 !default |
|
||||||
$size-medium: $size-5 !default |
|
||||||
$size-large: $size-4 !default |
|
||||||
|
|
||||||
// Lists and maps |
|
||||||
$custom-colors: null !default |
|
||||||
$custom-shades: null !default |
|
||||||
|
|
||||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default |
|
||||||
|
|
||||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default |
|
||||||
|
|
||||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default |
|
||||||
@ -1,115 +0,0 @@ |
|||||||
@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: $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: $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 |
|
||||||
|
|
||||||
@function findLightColor($color) |
|
||||||
@if type-of($color) == 'color' |
|
||||||
$l: 96% |
|
||||||
@if lightness($color) > 96% |
|
||||||
$l: lightness($color) |
|
||||||
@return change-color($color, $lightness: $l) |
|
||||||
@return $background |
|
||||||
|
|
||||||
@function findDarkColor($color) |
|
||||||
@if type-of($color) == 'color' |
|
||||||
$base-l: 29% |
|
||||||
$luminance: colorLuminance($color) |
|
||||||
$luminance-delta: (0.53 - $luminance) |
|
||||||
$target-l: round($base-l + ($luminance-delta * 53)) |
|
||||||
@return change-color($color, $lightness: max($base-l, $target-l)) |
|
||||||
@return $text-strong |
|
||||||
|
|
||||||
@function bulmaRgba($color, $alpha) |
|
||||||
@if type-of($color) != 'color' |
|
||||||
@return $color |
|
||||||
@return rgba($color, $alpha) |
|
||||||
|
|
||||||
@function bulmaDarken($color, $amount) |
|
||||||
@if type-of($color) != 'color' |
|
||||||
@return $color |
|
||||||
@return darken($color, $amount) |
|
||||||
|
|
||||||
@function bulmaLighten($color, $amount) |
|
||||||
@if type-of($color) != 'color' |
|
||||||
@return $color |
|
||||||
@return lighten($color, $amount) |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
// Colors |
|
||||||
|
|
||||||
$black: hsl(0, 0%, 4%) !default |
|
||||||
$black-bis: hsl(0, 0%, 7%) !default |
|
||||||
$black-ter: hsl(0, 0%, 14%) !default |
|
||||||
|
|
||||||
$grey-darker: hsl(0, 0%, 21%) !default |
|
||||||
$grey-dark: hsl(0, 0%, 29%) !default |
|
||||||
$grey: hsl(0, 0%, 48%) !default |
|
||||||
$grey-light: hsl(0, 0%, 71%) !default |
|
||||||
$grey-lighter: hsl(0, 0%, 86%) !default |
|
||||||
$grey-lightest: hsl(0, 0%, 93%) !default |
|
||||||
|
|
||||||
$white-ter: hsl(0, 0%, 96%) !default |
|
||||||
$white-bis: hsl(0, 0%, 98%) !default |
|
||||||
$white: hsl(0, 0%, 100%) !default |
|
||||||
|
|
||||||
$orange: hsl(14, 100%, 53%) !default |
|
||||||
$yellow: hsl(48, 100%, 67%) !default |
|
||||||
$green: hsl(141, 53%, 53%) !default |
|
||||||
$turquoise: hsl(171, 100%, 41%) !default |
|
||||||
$cyan: hsl(204, 71%, 53%) !default |
|
||||||
$blue: hsl(217, 71%, 53%) !default |
|
||||||
$purple: hsl(271, 100%, 71%) !default |
|
||||||
$red: hsl(348, 86%, 61%) !default |
|
||||||
|
|
||||||
// Typography |
|
||||||
|
|
||||||
$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 |
|
||||||
$render-mode: optimizeLegibility !default |
|
||||||
|
|
||||||
$size-1: 3rem !default |
|
||||||
$size-2: 2.5rem !default |
|
||||||
$size-3: 2rem !default |
|
||||||
$size-4: 1.5rem !default |
|
||||||
$size-5: 1.25rem !default |
|
||||||
$size-6: 1rem !default |
|
||||||
$size-7: 0.75rem !default |
|
||||||
|
|
||||||
$weight-light: 300 !default |
|
||||||
$weight-normal: 400 !default |
|
||||||
$weight-medium: 500 !default |
|
||||||
$weight-semibold: 600 !default |
|
||||||
$weight-bold: 700 !default |
|
||||||
|
|
||||||
// Spacing |
|
||||||
|
|
||||||
$block-spacing: 1.5rem !default |
|
||||||
|
|
||||||
// Responsiveness |
|
||||||
|
|
||||||
// The container horizontal gap, which acts as the offset for breakpoints |
|
||||||
$gap: 32px !default |
|
||||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 |
|
||||||
$tablet: 769px !default |
|
||||||
// 960px container + 4rem |
|
||||||
$desktop: 960px + (2 * $gap) !default |
|
||||||
// 1152px container + 4rem |
|
||||||
$widescreen: 1152px + (2 * $gap) !default |
|
||||||
$widescreen-enabled: true !default |
|
||||||
// 1344px container + 4rem |
|
||||||
$fullhd: 1344px + (2 * $gap) !default |
|
||||||
$fullhd-enabled: true !default |
|
||||||
|
|
||||||
// Miscellaneous |
|
||||||
|
|
||||||
$easing: ease-out !default |
|
||||||
$radius-small: 2px !default |
|
||||||
$radius: 4px !default |
|
||||||
$radius-large: 6px !default |
|
||||||
$radius-rounded: 290486px !default |
|
||||||
$speed: 86ms !default |
|
||||||
|
|
||||||
// Flags |
|
||||||
|
|
||||||
$variable-columns: true !default |
|
||||||
$rtl: false !default |
|
||||||
@ -1,285 +0,0 @@ |
|||||||
@import "initial-variables" |
|
||||||
|
|
||||||
=clearfix |
|
||||||
&::after |
|
||||||
clear: both |
|
||||||
content: " " |
|
||||||
display: table |
|
||||||
|
|
||||||
=center($width, $height: 0) |
|
||||||
position: absolute |
|
||||||
@if $height != 0 |
|
||||||
left: calc(50% - (#{$width} / 2)) |
|
||||||
top: calc(50% - (#{$height} / 2)) |
|
||||||
@else |
|
||||||
left: calc(50% - (#{$width} / 2)) |
|
||||||
top: calc(50% - (#{$width} / 2)) |
|
||||||
|
|
||||||
=fa($size, $dimensions) |
|
||||||
display: inline-block |
|
||||||
font-size: $size |
|
||||||
height: $dimensions |
|
||||||
line-height: $dimensions |
|
||||||
text-align: center |
|
||||||
vertical-align: top |
|
||||||
width: $dimensions |
|
||||||
|
|
||||||
=hamburger($dimensions) |
|
||||||
cursor: pointer |
|
||||||
display: block |
|
||||||
height: $dimensions |
|
||||||
position: relative |
|
||||||
width: $dimensions |
|
||||||
span |
|
||||||
background-color: currentColor |
|
||||||
display: block |
|
||||||
height: 1px |
|
||||||
left: calc(50% - 8px) |
|
||||||
position: absolute |
|
||||||
transform-origin: center |
|
||||||
transition-duration: $speed |
|
||||||
transition-property: background-color, opacity, transform |
|
||||||
transition-timing-function: $easing |
|
||||||
width: 16px |
|
||||||
&:nth-child(1) |
|
||||||
top: calc(50% - 6px) |
|
||||||
&:nth-child(2) |
|
||||||
top: calc(50% - 1px) |
|
||||||
&:nth-child(3) |
|
||||||
top: calc(50% + 4px) |
|
||||||
&:hover |
|
||||||
background-color: bulmaRgba(black, 0.05) |
|
||||||
// Modifers |
|
||||||
&.is-active |
|
||||||
span |
|
||||||
&:nth-child(1) |
|
||||||
transform: translateY(5px) rotate(45deg) |
|
||||||
&:nth-child(2) |
|
||||||
opacity: 0 |
|
||||||
&:nth-child(3) |
|
||||||
transform: translateY(-5px) rotate(-45deg) |
|
||||||
|
|
||||||
=overflow-touch |
|
||||||
-webkit-overflow-scrolling: touch |
|
||||||
|
|
||||||
=placeholder |
|
||||||
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' |
|
||||||
@each $placeholder in $placeholders |
|
||||||
&:#{$placeholder}-placeholder |
|
||||||
@content |
|
||||||
|
|
||||||
// Responsiveness |
|
||||||
|
|
||||||
=from($device) |
|
||||||
@media screen and (min-width: $device) |
|
||||||
@content |
|
||||||
|
|
||||||
=until($device) |
|
||||||
@media screen and (max-width: $device - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=mobile |
|
||||||
@media screen and (max-width: $tablet - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=tablet |
|
||||||
@media screen and (min-width: $tablet), print |
|
||||||
@content |
|
||||||
|
|
||||||
=tablet-only |
|
||||||
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=touch |
|
||||||
@media screen and (max-width: $desktop - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=desktop |
|
||||||
@media screen and (min-width: $desktop) |
|
||||||
@content |
|
||||||
|
|
||||||
=desktop-only |
|
||||||
@if $widescreen-enabled |
|
||||||
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=until-widescreen |
|
||||||
@if $widescreen-enabled |
|
||||||
@media screen and (max-width: $widescreen - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=widescreen |
|
||||||
@if $widescreen-enabled |
|
||||||
@media screen and (min-width: $widescreen) |
|
||||||
@content |
|
||||||
|
|
||||||
=widescreen-only |
|
||||||
@if $widescreen-enabled and $fullhd-enabled |
|
||||||
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=until-fullhd |
|
||||||
@if $fullhd-enabled |
|
||||||
@media screen and (max-width: $fullhd - 1px) |
|
||||||
@content |
|
||||||
|
|
||||||
=fullhd |
|
||||||
@if $fullhd-enabled |
|
||||||
@media screen and (min-width: $fullhd) |
|
||||||
@content |
|
||||||
|
|
||||||
=ltr |
|
||||||
@if not $rtl |
|
||||||
@content |
|
||||||
|
|
||||||
=rtl |
|
||||||
@if $rtl |
|
||||||
@content |
|
||||||
|
|
||||||
=ltr-property($property, $spacing, $right: true) |
|
||||||
$normal: if($right, "right", "left") |
|
||||||
$opposite: if($right, "left", "right") |
|
||||||
@if $rtl |
|
||||||
#{$property}-#{$opposite}: $spacing |
|
||||||
@else |
|
||||||
#{$property}-#{$normal}: $spacing |
|
||||||
|
|
||||||
=ltr-position($spacing, $right: true) |
|
||||||
$normal: if($right, "right", "left") |
|
||||||
$opposite: if($right, "left", "right") |
|
||||||
@if $rtl |
|
||||||
#{$opposite}: $spacing |
|
||||||
@else |
|
||||||
#{$normal}: $spacing |
|
||||||
|
|
||||||
// Placeholders |
|
||||||
|
|
||||||
=unselectable |
|
||||||
-webkit-touch-callout: none |
|
||||||
-webkit-user-select: none |
|
||||||
-moz-user-select: none |
|
||||||
-ms-user-select: none |
|
||||||
user-select: none |
|
||||||
|
|
||||||
%unselectable |
|
||||||
+unselectable |
|
||||||
|
|
||||||
=arrow($color: transparent) |
|
||||||
border: 3px solid $color |
|
||||||
border-radius: 2px |
|
||||||
border-right: 0 |
|
||||||
border-top: 0 |
|
||||||
content: " " |
|
||||||
display: block |
|
||||||
height: 0.625em |
|
||||||
margin-top: -0.4375em |
|
||||||
pointer-events: none |
|
||||||
position: absolute |
|
||||||
top: 50% |
|
||||||
transform: rotate(-45deg) |
|
||||||
transform-origin: center |
|
||||||
width: 0.625em |
|
||||||
|
|
||||||
%arrow |
|
||||||
+arrow |
|
||||||
|
|
||||||
=block($spacing: $block-spacing) |
|
||||||
&:not(:last-child) |
|
||||||
margin-bottom: $spacing |
|
||||||
|
|
||||||
%block |
|
||||||
+block |
|
||||||
|
|
||||||
=delete |
|
||||||
@extend %unselectable |
|
||||||
-moz-appearance: none |
|
||||||
-webkit-appearance: none |
|
||||||
background-color: bulmaRgba($scheme-invert, 0.2) |
|
||||||
border: none |
|
||||||
border-radius: $radius-rounded |
|
||||||
cursor: pointer |
|
||||||
pointer-events: auto |
|
||||||
display: inline-block |
|
||||||
flex-grow: 0 |
|
||||||
flex-shrink: 0 |
|
||||||
font-size: 0 |
|
||||||
height: 20px |
|
||||||
max-height: 20px |
|
||||||
max-width: 20px |
|
||||||
min-height: 20px |
|
||||||
min-width: 20px |
|
||||||
outline: none |
|
||||||
position: relative |
|
||||||
vertical-align: top |
|
||||||
width: 20px |
|
||||||
&::before, |
|
||||||
&::after |
|
||||||
background-color: $scheme-main |
|
||||||
content: "" |
|
||||||
display: block |
|
||||||
left: 50% |
|
||||||
position: absolute |
|
||||||
top: 50% |
|
||||||
transform: translateX(-50%) translateY(-50%) rotate(45deg) |
|
||||||
transform-origin: center center |
|
||||||
&::before |
|
||||||
height: 2px |
|
||||||
width: 50% |
|
||||||
&::after |
|
||||||
height: 50% |
|
||||||
width: 2px |
|
||||||
&:hover, |
|
||||||
&:focus |
|
||||||
background-color: bulmaRgba($scheme-invert, 0.3) |
|
||||||
&:active |
|
||||||
background-color: bulmaRgba($scheme-invert, 0.4) |
|
||||||
// Sizes |
|
||||||
&.is-small |
|
||||||
height: 16px |
|
||||||
max-height: 16px |
|
||||||
max-width: 16px |
|
||||||
min-height: 16px |
|
||||||
min-width: 16px |
|
||||||
width: 16px |
|
||||||
&.is-medium |
|
||||||
height: 24px |
|
||||||
max-height: 24px |
|
||||||
max-width: 24px |
|
||||||
min-height: 24px |
|
||||||
min-width: 24px |
|
||||||
width: 24px |
|
||||||
&.is-large |
|
||||||
height: 32px |
|
||||||
max-height: 32px |
|
||||||
max-width: 32px |
|
||||||
min-height: 32px |
|
||||||
min-width: 32px |
|
||||||
width: 32px |
|
||||||
|
|
||||||
%delete |
|
||||||
+delete |
|
||||||
|
|
||||||
=loader |
|
||||||
animation: spinAround 500ms infinite linear |
|
||||||
border: 2px solid $grey-lighter |
|
||||||
border-radius: $radius-rounded |
|
||||||
border-right-color: transparent |
|
||||||
border-top-color: transparent |
|
||||||
content: "" |
|
||||||
display: block |
|
||||||
height: 1em |
|
||||||
position: relative |
|
||||||
width: 1em |
|
||||||
|
|
||||||
%loader |
|
||||||
+loader |
|
||||||
|
|
||||||
=overlay($offset: 0) |
|
||||||
bottom: $offset |
|
||||||
left: $offset |
|
||||||
position: absolute |
|
||||||
right: $offset |
|
||||||
top: $offset |
|
||||||
|
|
||||||
%overlay |
|
||||||
+overlay |
|
||||||
Loading…
Reference in new issue