// 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 $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, 71%, 48%) !default $turquoise: hsl(171, 100%, 41%) !default $blue: hsl(217, 71%, 53%) !default $purple: hsl(271, 100%, 71%) !default $red: hsl(348, 100%, 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 // Responsiveness // The container gap, which acts as the offset for breakpoints $gap: 24px !default // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 $tablet: 769px !default // 960px container + 3rem $desktop: 960px + (2 * $gap) !default // 1152px container + 3rem $widescreen: 1152px + (2 * $gap) !default // 1344px container + 3rem $fullhd: 1344px + (2 * $gap) !default // Miscellaneous $easing: ease-out !default $radius-small: 2px !default $radius: 3px !default $radius-large: 5px !default $speed: 86ms !default @function powerNumber($number, $exp) $value: 1 @if $exp > 0 @for $i from 1 through $exp $value: $value * $number @else if $exp < 0 @for $i from 1 through -$exp $value: $value / $number @return $value @function colorLuminance($color) $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) @each $name, $value in $color-rgb $adjusted: 0 $value: $value / 255 @if $value < 0.03928 $value: $value / 12.92 @else $value: ($value + .055) / 1.055 $value: powerNumber($value, 2) $color-rgb: map-merge($color-rgb, ($name: $value)) @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) @function findColorInvert($color) @if (colorLuminance($color) > 0.55) @return rgba(#000, 0.7) @else @return #fff $primary: $turquoise !default $info: $blue !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 $blue-invert: findColorInvert($blue) !default $purple-invert: findColorInvert($purple) !default $red-invert: findColorInvert($red) !default $primary-invert: $turquoise-invert !default $info-invert: $blue-invert !default $success-invert: $green-invert !default $warning-invert: $yellow-invert !default $danger-invert: $red-invert !default $light-invert: $dark !default $dark-invert: $light !default // General colors $background: $white-ter !default $border: $grey-lighter !default $border-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: $red !default $code-background: $background !default $pre: $text !default $pre-background: $background !default // Link colors $link: $primary !default $link-invert: $primary-invert !default $link-visited: $purple !default $link-hover: $grey-darker !default $link-hover-border: $grey-light !default $link-focus: $grey-darker !default $link-focus-border: $primary !default $link-active: $grey-darker !default $link-active-border: $grey-dark !default // Typography $family-primary: $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 $colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default $shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis) !default $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default @keyframes spinAround from transform: rotate(0deg) to transform: rotate(359deg) =arrow($color) border: 1px solid $color border-right: 0 border-top: 0 content: " " display: block height: 0.5em pointer-events: none position: absolute transform: rotate(-45deg) width: 0.5em =block &:not(:last-child) margin-bottom: 1.5rem =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)) =delete +unselectable -moz-appearance: none -webkit-appearance: none background-color: rgba($black, 0.2) border: none border-radius: 290486px cursor: pointer display: inline-block flex-grow: 0 flex-shrink: 0 font-size: $size-normal height: 20px max-height: 20px max-width: 20px min-height: 20px min-width: 20px outline: none position: relative vertical-align: top width: 20px &:before, &:after background-color: $white content: "" display: block left: 50% position: absolute top: 50% transform: translateX(-50%) translateY(-50%) rotate(45deg) transform-origin: center center &:before height: 2px width: 50% &:after height: 50% width: 2px &:hover, &:focus background-color: rgba($black, 0.3) &:active background-color: rgba($black, 0.4) // Sizes &.is-small height: 16px max-height: 16px max-width: 16px min-height: 16px min-width: 16px width: 16px &.is-medium height: 24px max-height: 24px max-width: 24px min-height: 24px min-width: 24px width: 24px &.is-large height: 32px max-height: 32px max-width: 32px min-height: 32px min-width: 32px width: 32px =fa($size, $dimensions) display: inline-block font-size: $size 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: $text display: block height: 1px left: 50% margin-left: -7px position: absolute top: 50% transition: none $speed $easing transition-property: background, left, opacity, transform width: 15px &:nth-child(1) margin-top: -6px &:nth-child(2) margin-top: -1px &:nth-child(3) margin-top: 4px &:hover background-color: $background // Modifers &.is-active span background-color: $link &:nth-child(1) margin-left: -5px transform: rotate(45deg) transform-origin: left top &:nth-child(2) opacity: 0 &:nth-child(3) margin-left: -5px transform: rotate(-45deg) transform-origin: left bottom =loader animation: spinAround 500ms infinite linear border: 2px solid $border border-radius: 290486px border-right-color: transparent border-top-color: transparent content: "" display: block height: 1em position: relative width: 1em =overflow-touch -webkit-overflow-scrolling: touch =overlay($offset: 0) bottom: $offset left: $offset position: absolute right: $offset top: $offset =placeholder $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' @each $placeholder in $placeholders &:#{$placeholder}-placeholder @content =unselectable -webkit-touch-callout: none -webkit-user-select: none -moz-user-select: none -ms-user-select: none user-select: none // Responsiveness =from($device) @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 @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) @content =widescreen @media screen and (min-width: $widescreen) @content =widescreen-only @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) @content =fullhd @media screen and (min-width: $fullhd) @content $control-radius: $radius !default $control-radius-small: $radius-small !default $control-padding-vertical: calc(0.375em - 1px) !default $control-padding-horizontal: calc(0.625em - 1px) !default =control -moz-appearance: none -webkit-appearance: none align-items: center border: 1px solid transparent border-radius: $control-radius box-shadow: none display: inline-flex font-size: $size-normal height: 2.25em justify-content: flex-start line-height: 1.5 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] cursor: not-allowed // 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 /*! minireset.css v0.0.2 | 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 * box-sizing: inherit &:before, &:after box-sizing: inherit // Media img, embed, object, audio, video max-width: 100% // Iframe iframe border: 0 // Table table border-collapse: collapse border-spacing: 0 td, th padding: 0 text-align: left $body-background-color: #fff !default $body-size: 16px !default $body-rendering: optimizeLegibility !default $body-family: $family-sans-serif !default $body-color: $text !default $body-weight: $weight-normal !default $body-line-height: 1.5 !default $code-family: $family-monospace !default $code-padding: 0.25em 0.5em 0.25em !default $code-weight: normal !default $code-size: 0.875em !default $hr-background-color: $border !default $hr-height: 1px !default $hr-margin: 1.5rem 0 !default $strong-color: $text-strong !default $strong-weight: $weight-bold !default html background-color: $body-background-color font-size: $body-size -moz-osx-font-smoothing: grayscale -webkit-font-smoothing: antialiased min-width: 300px overflow-x: hidden overflow-y: scroll text-rendering: $body-rendering article, aside, figure, footer, header, hgroup, section display: block body, button, input, 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: 1rem font-weight: $body-weight line-height: $body-line-height // Inline a color: $link cursor: pointer text-decoration: none &: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: 0.875em span font-style: inherit font-weight: inherit strong color: $strong-color font-weight: $strong-weight // Block pre background-color: $pre-background color: $pre font-size: 0.875em white-space: pre word-wrap: normal code +overflow-touch background: none color: inherit display: block font-size: 1em overflow-x: auto padding: 1.25rem 1.5rem table td, th text-align: left vertical-align: top th color: $text-strong // Float .is-clearfix +clearfix .is-pulled-left float: left !important .is-pulled-right float: right !important // Overflow .is-clipped overflow: hidden !important // Overlay .is-overlay +overlay // Typography @each $size in $sizes $i: index($sizes, $size) .is-size-#{$i} font-size: $size !important +mobile .is-size-#{$i}-mobile font-size: $size !important +tablet .is-size-#{$i}-tablet font-size: $size !important +touch .is-size-#{$i}-touch font-size: $size !important +desktop .is-size-#{$i}-desktop font-size: $size !important +widescreen .is-size-#{$i}-widescreen font-size: $size !important +fullhd .is-size-#{$i}-fullhd font-size: $size !important .has-text-centered text-align: center !important .has-text-left text-align: left !important .has-text-right text-align: right !important @each $name, $pair in $colors $color: nth($pair, 1) .has-text-#{$name} color: $color !important a.has-text-#{$name} &:hover, &:focus color: darken($color, 10%) @each $name, $shade in $shades .has-text-#{$name} color: $shade !important // Visibility $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' @each $display in $displays .is-#{$display} display: #{$display} +mobile .is-#{$display}-mobile display: #{$display} !important +tablet .is-#{$display}-tablet display: #{$display} !important +tablet-only .is-#{$display}-tablet-only display: #{$display} !important +touch .is-#{$display}-touch display: #{$display} !important +desktop .is-#{$display}-desktop display: #{$display} !important +desktop-only .is-#{$display}-desktop-only display: #{$display} !important +widescreen .is-#{$display}-widescreen display: #{$display} !important +widescreen-only .is-#{$display}-widescreen-only display: #{$display} !important +fullhd .is-#{$display}-fullhd display: #{$display} !important .is-hidden display: none !important +mobile .is-hidden-mobile display: none !important +tablet .is-hidden-tablet display: none !important +tablet-only .is-hidden-tablet-only display: none !important +touch .is-hidden-touch display: none !important +desktop .is-hidden-desktop display: none !important +desktop-only .is-hidden-desktop-only display: none !important +widescreen .is-hidden-widescreen display: none !important +widescreen-only .is-hidden-widescreen-only display: none !important +fullhd .is-hidden-fullhd display: none !important // Other .is-marginless margin: 0 !important .is-paddingless padding: 0 !important .is-radiusless border-radius: 0 !important .is-shadowless box-shadow: none !important .is-unselectable +unselectable $box-color: $text !default $box-background-color: $white !default $box-radius: $radius-large !default $box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default $box-padding: 1.25rem !default $box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link $box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link .box +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 $button-color: $grey-darker !default $button-background-color: $white !default $button-border-color: $grey-lighter !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-active-color: $link-active !default $button-active-border-color: $link-active-border !default $button-link-color: $text !default $button-link-hover-background-color: $background !default $button-link-hover-color: $text-strong !default $button-disabled-background-color: $white !default $button-disabled-border-color: $grey-lighter !default $button-disabled-shadow: none !default $button-disabled-opacity: 0.5 !default $button-static-color: $grey !default $button-static-background-color: $white-ter !default $button-static-border-color: $grey-lighter !default $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !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-medium font-size: $size-medium =button-large font-size: $size-large .button +control +unselectable background-color: $button-background-color border-color: $button-border-color color: $button-color cursor: pointer justify-content: center padding-left: 0.75em padding-right: 0.75em 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) margin-left: calc(-0.375em - 1px) margin-right: 0.1875em &:last-child:not(:first-child) margin-left: 0.1875em margin-right: calc(-0.375em - 1px) &:first-child:last-child margin-left: calc(-0.375em - 1px) margin-right: calc(-0.375em - 1px) // States &:hover, &.is-hovered border-color: $button-hover-border-color color: $button-hover-color &:focus, &.is-focused border-color: $button-focus-border-color box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25) color: $button-focus-color &:active, &.is-active border-color: $button-active-border-color box-shadow: $button-shadow-inset color: $button-active-color // Colors &.is-link background-color: transparent border-color: transparent color: $button-link-color text-decoration: underline &:hover, &.is-hovered, &:focus, &.is-focused, &:active, &.is-active background-color: $button-link-hover-background-color color: $button-link-hover-color &[disabled] background-color: transparent border-color: transparent box-shadow: none @each $name, $pair in $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: darken($color, 2.5%) border-color: transparent color: $color-invert &:focus, &.is-focused border-color: transparent box-shadow: 0 0 0.5em rgba($color, 0.25) color: $color-invert &:active, &.is-active background-color: darken($color, 5%) border-color: transparent box-shadow: $button-shadow-inset color: $color-invert &[disabled] background-color: $color border-color: transparent box-shadow: none &.is-inverted background-color: $color-invert color: $color &:hover background-color: darken($color-invert, 5%) &[disabled] 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, &:focus background-color: $color border-color: $color color: $color-invert &.is-loading &:after border-color: transparent transparent $color $color !important &[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, &:focus background-color: $color-invert color: $color &[disabled] background-color: transparent border-color: $color-invert box-shadow: none color: $color-invert // Sizes &.is-small +button-small &.is-medium +button-medium &.is-large +button-large // Modifiers &[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 +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 $content-heading-color: $text-strong !default $content-heading-weight: $weight-normal !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-row-hover-background-color: $background !default $content-table-head-cell-border-width: 0 0 2px !default $content-table-head-cell-color: $text-strong !default $content-table-foot-cell-border-width: 2px 0 0 !default $content-table-foot-cell-color: $text-strong !default .content +block // 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 border-left: $content-blockquote-border-left padding: $content-blockquote-padding ol list-style: decimal outside margin-left: 2em margin-top: 1em ul list-style: disc outside margin-left: 2em margin-top: 1em ul list-style-type: circle margin-top: 0.5em ul list-style-type: square dd margin-left: 2em figure text-align: center 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 text-align: left tr &:hover background-color: $content-table-row-hover-background-color 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 // Sizes &.is-small font-size: $size-small &.is-medium font-size: $size-medium &.is-large font-size: $size-large $input-color: $grey-darker !default $input-background-color: $white !default $input-border-color: $grey-lighter !default $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default $input-hover-color: $grey-darker !default $input-hover-border-color: $grey-light !default $input-focus-color: $grey-darker !default $input-focus-border-color: $link !default $input-disabled-color: $text-light !default $input-disabled-background-color: $background !default $input-disabled-border-color: $background !default $input-arrow: $link !default $input-icon-color: $grey-lighter !default $input-icon-active-color: $grey !default $input-radius: $radius !default $label-color: $grey-darker !default $label-weight: $weight-bold !default $help-size: $size-small !default =input +control background-color: $input-background-color border-color: $input-border-color color: $input-color &:hover, &.is-hovered border-color: $input-hover-border-color &:focus, &.is-focused, &:active, &.is-active border-color: $input-focus-border-color &[disabled] background-color: $input-disabled-background-color border-color: $input-disabled-border-color box-shadow: none color: $input-disabled-color +placeholder color: rgba($input-disabled-color, 0.3) .input, .textarea +input box-shadow: $input-shadow max-width: 100% width: 100% &[type="search"] border-radius: 290486px // Colors @each $name, $pair in $colors $color: nth($pair, 1) &.is-#{$name} border-color: $color // 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 .textarea display: block max-width: 100% min-width: 100% padding: 0.625em resize: vertical &:not([rows]) max-height: 600px min-height: 120px &[rows] height: unset .checkbox, .radio cursor: pointer display: inline-block line-height: 1.25 position: relative input cursor: pointer &:hover color: $input-hover-color &[disabled] color: $input-disabled-color cursor: not-allowed .radio & + .radio margin-left: 0.5em .select display: inline-block max-width: 100% position: relative vertical-align: top &:not(.is-multiple) height: 2.25em &::after +arrow($input-arrow) margin-top: -0.375em right: 1.125em top: 50% z-index: 4 select +input cursor: pointer display: block font-size: 1em max-width: 100% outline: none &:hover border-color: $input-hover-border-color &:focus, &.is-focused, &:active, &.is-active border-color: $input-focus-border-color &::-ms-expand display: none &[disabled]:hover border-color: $input-disabled-border-color &:not([multiple]) padding-right: 2.5em &[multiple] height: unset padding: 0 option padding: 0.5em 1em // States &:hover &::after border-color: $input-hover-color // Colors @each $name, $pair in $colors $color: nth($pair, 1) &.is-#{$name} select border-color: $color // Sizes &.is-small +control-small &.is-medium +control-medium &.is-large +control-large // Modifiers &.is-disabled &::after border-color: $input-disabled-color &.is-fullwidth width: 100% select width: 100% &.is-loading &::after +loader margin-top: 0 position: absolute right: 0.625em top: 0.625em transform: none &.is-small:after font-size: $size-small &.is-medium:after font-size: $size-medium &.is-large:after font-size: $size-large .label color: $label-color display: block font-size: $size-normal font-weight: $label-weight &:not(:last-child) margin-bottom: 0.5em // Sizes &.is-small font-size: $size-small &.is-medium font-size: $size-medium &.is-large font-size: $size-large .help display: block font-size: $help-size margin-top: 0.25rem @each $name, $pair in $colors $color: nth($pair, 1) &.is-#{$name} color: $color // Containers .field &:not(:last-child) margin-bottom: 0.75rem // Modifiers &.has-addons display: flex justify-content: flex-start .control &:not(:last-child) margin-right: -1px &:first-child .button, .input, .select select border-bottom-left-radius: $input-radius border-top-left-radius: $input-radius &:last-child .button, .input, .select select border-bottom-right-radius: $input-radius border-top-right-radius: $input-radius .button, .input, .select select border-radius: 0 &:hover, &.is-hovered z-index: 2 &:focus, &.is-focused, &:active, &.is-active z-index: 3 &:hover z-index: 4 &.is-expanded flex-grow: 1 &.has-addons-centered justify-content: center &.has-addons-right justify-content: flex-end &.has-addons-fullwidth .control flex-grow: 1 flex-shrink: 0 &.is-grouped display: flex justify-content: flex-start & > .control flex-shrink: 0 &:not(:last-child) margin-bottom: 0 margin-right: 0.75rem &.is-expanded flex-grow: 1 flex-shrink: 1 &.is-grouped-centered justify-content: center &.is-grouped-right justify-content: flex-end &.is-grouped-multiline flex-wrap: wrap & > .control &:last-child, &:not(:last-child) margin-bottom: 0.75rem &:last-child margin-bottom: -0.75rem &:not(:last-child) margin-bottom: 0 &.is-horizontal +tablet display: flex .field-label .label font-size: inherit +mobile margin-bottom: 0.5rem +tablet flex-basis: 0 flex-grow: 1 flex-shrink: 0 margin-right: 1.5rem text-align: right &.is-small font-size: $size-small padding-top: 0.375em &.is-normal padding-top: 0.375em &.is-medium font-size: $size-medium padding-top: 0.375em &.is-large font-size: $size-large padding-top: 0.375em .field-body .field .field margin-bottom: 0 +tablet display: flex flex-basis: 0 flex-grow: 5 flex-shrink: 1 .field margin-bottom: 0 & > .field flex-shrink: 1 &:not(.is-narrow) flex-grow: 1 &:not(:last-child) margin-right: 0.75rem .control font-size: $size-normal position: relative text-align: left // Modifiers // DEPRECATED &.has-icon .icon color: $input-icon-color height: 2.25em pointer-events: none position: absolute top: 0 width: 2.25em z-index: 4 .input &:focus & + .icon color: $input-icon-active-color &.is-small & + .icon font-size: $size-small &.is-medium & + .icon font-size: $size-medium &.is-large & + .icon font-size: $size-large &:not(.has-icon-right) .icon left: 0 .input padding-left: 2.25em &.has-icon-right .icon right: 0 .input padding-right: 2.25em &.has-icons-left, &.has-icons-right .input, .select &:focus & ~ .icon color: $input-icon-active-color &.is-small ~ .icon font-size: $size-small &.is-medium ~ .icon font-size: $size-medium &.is-large ~ .icon font-size: $size-large .icon color: $input-icon-color height: 2.25em pointer-events: none position: absolute top: 0 width: 2.25em z-index: 4 &.has-icons-left .input, .select select padding-left: 2.25em .icon.is-left left: 0 &.has-icons-right .input, .select select padding-right: 2.25em .icon.is-right right: 0 &.is-loading &::after +loader position: absolute !important right: 0.625em top: 0.625em &.is-small:after font-size: $size-small &.is-medium:after font-size: $size-medium &.is-large:after font-size: $size-large $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 .fa font-size: 21px // Sizes &.is-small height: $icon-dimensions-small width: $icon-dimensions-small .fa font-size: 14px &.is-medium height: $icon-dimensions-medium width: $icon-dimensions-medium .fa font-size: 28px &.is-large height: $icon-dimensions-large width: $icon-dimensions-large .fa font-size: 42px $dimensions: 16 24 32 48 64 96 128 .image display: block position: relative img display: block height: auto width: 100% // Ratio &.is-square, &.is-1by1, &.is-4by3, &.is-3by2, &.is-16by9, &.is-2by1 img +overlay height: 100% width: 100% &.is-square, &.is-1by1 padding-top: 100% &.is-4by3 padding-top: 75% &.is-3by2 padding-top: 66.6666% &.is-16by9 padding-top: 56.25% &.is-2by1 padding-top: 50% // Sizes @each $dimension in $dimensions &.is-#{$dimension}x#{$dimension} height: $dimension * 1px width: $dimension * 1px $notification-background-color: $background !default $notification-radius: $radius !default $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default .notification +block background-color: $notification-background-color border-radius: $notification-radius padding: $notification-padding position: relative a:not(.button) color: currentColor text-decoration: underline strong color: currentColor code, pre background: $white pre code background: transparent & > .delete position: absolute right: 0.5em top: 0.5em .title, .subtitle, .content color: currentColor // Colors @each $name, $pair in $colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} background-color: $color color: $color-invert $progress-bar-background-color: $border !default $progress-value-background-color: $text !default .progress +block -moz-appearance: none -webkit-appearance: none border: none border-radius: 290486px 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 // Colors @each $name, $pair in $colors $color: nth($pair, 1) &.is-#{$name} &::-webkit-progress-value background-color: $color &::-moz-progress-bar background-color: $color // Sizes &.is-small height: $size-small &.is-medium height: $size-medium &.is-large height: $size-large $table-color: $grey-darker !default $table-background-color: $white !default $table-cell-border: 1px solid $grey-lighter !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-color: $grey !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-row-hover-background-color: $white-bis !default $table-row-active-background-color: $primary !default $table-row-active-color: $primary-invert !default $table-striped-row-even-background-color: $white-bis !default $table-striped-row-even-hover-background-color: $white-ter !default .table background-color: $table-background-color color: $table-color margin-bottom: 1.5rem td, th border: $table-cell-border border-width: $table-cell-border-width padding: $table-cell-padding vertical-align: top // Modifiers &.is-narrow white-space: nowrap width: 1% th color: $table-cell-heading-color text-align: left tr &:hover background-color: $table-row-hover-background-color &.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 td, th border-width: $table-head-cell-border-width color: $table-head-cell-color tfoot td, th border-width: $table-foot-cell-border-width color: $table-foot-cell-color tbody 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-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 &:hover background-color: $table-striped-row-even-hover-background-color $tag-background-color: $background !default $tag-color: $text !default $tag-radius: $radius !default .tags align-items: center display: flex flex-wrap: wrap justify-content: flex-start .tag margin-bottom: 0.5rem &:not(:last-child) margin-right: 0.5rem &:last-child margin-bottom: -0.5rem &:not(:last-child) margin-bottom: 1rem &.has-addons .tag margin-right: 0 &:not(:first-child) border-bottom-left-radius: 0 border-top-left-radius: 0 &:not(:last-child) border-bottom-right-radius: 0 border-top-right-radius: 0 .tag 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 margin-left: 0.25em margin-right: -0.375em // Colors @each $name, $pair in $colors $color: nth($pair, 1) $color-invert: nth($pair, 2) &.is-#{$name} background-color: $color color: $color-invert // Sizes &.is-medium font-size: $size-normal &.is-large font-size: $size-medium // Modifiers &.is-delete margin-left: 1px 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: 290486px a.tag &:hover text-decoration: underline $title-color: $grey-darker !default $title-size: $size-3 !default $title-weight: $weight-semibold !default $title-strong-color: inherit !default $title-strong-weight: inherit !default $subtitle-color: $grey-dark !default $subtitle-size: $size-5 !default $subtitle-weight: $weight-normal !default $subtitle-strong-color: $grey-darker !default $subtitle-strong-weight: $weight-semibold !default .title, .subtitle +block word-break: break-word em, span font-weight: inherit .tag vertical-align: middle .title color: $title-color font-size: $title-size font-weight: $title-weight line-height: 1.125 strong color: $title-strong-color font-weight: $title-strong-weight & + .highlight margin-top: -0.75rem &:not(.is-spaced) + .subtitle margin-top: -1.5rem // Sizes @each $size in $sizes $i: index($sizes, $size) &.is-#{$i} font-size: $size .subtitle color: $subtitle-color font-size: $subtitle-size font-weight: $subtitle-weight line-height: 1.25 strong color: $subtitle-strong-color font-weight: $subtitle-strong-weight &:not(.is-spaced) + .title margin-top: -1.5rem // Sizes @each $size in $sizes $i: index($sizes, $size) &.is-#{$i} font-size: $size .block +block .container margin: 0 auto position: relative +desktop max-width: $desktop - (2 * $gap) width: $desktop - (2 * $gap) &.is-fluid margin-left: $gap margin-right: $gap max-width: none width: auto +until($widescreen) &.is-widescreen max-width: $widescreen - (2 * $gap) width: auto +until($fullhd) &.is-fullhd max-width: $fullhd - (2 * $gap) width: auto +widescreen max-width: $widescreen - (2 * $gap) width: $widescreen - (2 * $gap) +fullhd max-width: $fullhd - (2 * $gap) width: $fullhd - (2 * $gap) .delete +delete .fa font-size: 21px text-align: center vertical-align: top .heading display: block font-size: 11px letter-spacing: 1px margin-bottom: 5px text-transform: uppercase .highlight +block font-weight: $weight-normal max-width: 100% overflow: hidden padding: 0 pre overflow: auto max-width: 100% .loader +loader .number align-items: center background-color: $background border-radius: 290486px 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 $breadcrumb-item-color: $text-light !default $breadcrumb-item-hover-color: $link-hover !default $breadcrumb-item-active-color: $text-strong !default $breadcrumb-item-separator-color: $text !default .breadcrumb +block +unselectable align-items: stretch display: flex font-size: $size-normal overflow: hidden overflow-x: auto white-space: nowrap a align-items: center color: $breadcrumb-item-color display: flex justify-content: center padding: 0.5em 0.75em &:hover color: $breadcrumb-item-hover-color li align-items: center display: flex &.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: center display: flex flex-grow: 1 flex-shrink: 0 justify-content: flex-start .icon &:first-child margin-right: 0.5em &:last-child margin-left: 0.5em // 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" $card-color: $text !default $card-background-color: $white !default $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default $card-header-color: $text-strong !default $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default $card-header-weight: $weight-bold !default $card-footer-border-top: 1px solid $border !default .card background-color: $card-background-color box-shadow: $card-shadow color: $card-color max-width: 100% position: relative .card-header 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: 0.75rem .card-header-icon align-items: center cursor: pointer display: flex justify-content: center padding: 0.75rem .card-image display: block position: relative .card-content padding: 1.5rem .card-footer 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: 0.75rem &:not(:last-child) border-right: $card-footer-border-top // Combinations .card .media:not(:last-child) margin-bottom: 0.75rem $dropdown-content-background-color: $white !default $dropdown-content-arrow: $link !default $dropdown-content-offset: 4px !default $dropdown-content-radius: $radius !default $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default $dropdown-content-z: 20 !default $dropdown-item-color: $grey-dark !default $dropdown-item-hover-color: $black !default $dropdown-item-hover-background-color: $background !default $dropdown-item-active-color: $primary-invert !default $dropdown-item-active-background-color: $primary !default $dropdown-divider-background-color: $border !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 .dropdown-menu display: none left: 0 min-width: 12rem 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: 0.5rem padding-top: 0.5rem .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 padding-right: 3rem white-space: nowrap &: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 .level +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 &: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: 0.75rem .level-left, .level-right flex-basis: auto flex-grow: 0 flex-shrink: 0 .level-item &:not(:last-child) margin-right: 0.75rem // Modifiers &.is-flexible flex-grow: 1 .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 .media align-items: flex-start display: flex text-align: left .content:not(:last-child) margin-bottom: 0.75rem .media border-top: 1px solid rgba($border, 0.5) display: flex padding-top: 0.75rem .content:not(:last-child), .control:not(:last-child) margin-bottom: 0.5rem .media padding-top: 0.5rem & + .media margin-top: 0.5rem & + .media border-top: 1px solid rgba($border, 0.5) margin-top: 1rem padding-top: 1rem // Sizes &.is-large & + .media margin-top: 1.5rem padding-top: 1.5rem .media-left, .media-right flex-basis: auto flex-grow: 0 flex-shrink: 0 .media-left margin-right: 1rem .media-right margin-left: 1rem .media-content flex-basis: auto flex-grow: 1 flex-shrink: 1 text-align: left $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-label-color: $text-light !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: 1.25 a border-radius: $menu-item-radius color: $menu-item-color display: block padding: 0.5em 0.75em &: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 border-left: $menu-list-border-left margin: 0.75em padding-left: 0.75em .menu-label color: $menu-label-color font-size: 0.75em letter-spacing: 0.1em text-transform: uppercase &:not(:first-child) margin-top: 1em &:not(:last-child) margin-bottom: 1em $message-background-color: $background !default $message-radius: $radius !default $message-header-background-color: $text !default $message-header-color: $text-invert !default $message-header-padding: 0.5em 0.75em !default $message-header-radius: $radius !default $message-body-border: 1px solid $border !default $message-body-color: $text !default $message-body-padding: 1em 1.25em !default $message-body-radius: $radius !default $message-body-pre-background-color: $white !default $message-body-pre-code-background-color: transparent !default .message +block background-color: $message-background-color border-radius: $message-radius font-size: $size-normal // Sizes &.is-small font-size: $size-small &.is-medium font-size: $size-medium &.is-large font-size: $size-large // Colors @each $name, $pair in $colors $color: nth($pair, 1) $color-invert: nth($pair, 2) $color-lightning: max((100% - lightness($color)) - 2%, 0%) $color-luminance: colorLuminance($color) $darken-percentage: $color-luminance * 70% $desaturate-percentage: $color-luminance * 30% &.is-#{$name} background-color: lighten($color, $color-lightning) .message-header background-color: $color color: $color-invert .message-body border-color: $color color: desaturate(darken($color, $darken-percentage), $desaturate-percentage) .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 justify-content: space-between line-height: 1.25 padding: $message-header-padding position: relative a:not(.button), strong color: currentColor a:not(.button) text-decoration: underline .delete flex-grow: 0 flex-shrink: 0 margin-left: 0.75em & + .message-body border-top-left-radius: 0 border-top-right-radius: 0 border-top: none .message-body border: $message-body-border border-radius: $message-body-radius color: $message-body-color padding: $message-body-padding a:not(.button), strong color: currentColor a:not(.button) text-decoration: underline code, pre background-color: $message-body-pre-background-color pre code background-color: $message-body-pre-code-background-color $modal-z: 20 !default $modal-background-background-color: rgba($black, 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: $white !default $modal-card-body-padding: 20px !default .modal +overlay align-items: center display: none justify-content: center overflow: hidden position: fixed z-index: $modal-z // Modifiers &.is-active display: flex .modal-background +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 +tablet margin: 0 auto max-height: calc(100vh - #{$modal-content-spacing-tablet}) width: $modal-content-width .modal-close +delete background: none height: $modal-close-dimensions position: fixed right: $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 .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) margin-right: 10px .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 $nav-height: 3.25rem !default // Components .nav-toggle +hamburger($nav-height) // Responsiveness +tablet display: none .nav-item align-items: center display: flex flex-grow: 0 flex-shrink: 0 font-size: $size-normal justify-content: center line-height: 1.5 padding: 0.5rem 0.75rem a flex-grow: 1 flex-shrink: 0 img max-height: 1.75rem .tag &:first-child:not(:last-child) margin-right: 0.5rem &:last-child:not(:first-child) margin-left: 0.5rem // Responsiveness +mobile justify-content: flex-start .nav-item a:not(.button), a.nav-item:not(.button) color: $text-light &:hover color: $link-hover // Modifiers &.is-active color: $link-active &.is-tab border-bottom: 1px solid transparent border-top: 1px solid transparent padding-bottom: calc(0.75rem - 1px) padding-left: 1rem padding-right: 1rem padding-top: calc(0.75rem - 1px) &:hover border-bottom-color: $primary border-top-color: transparent &.is-active border-bottom: 3px solid $primary color: $primary padding-bottom: calc(0.75rem - 3px) // Responsiveness +desktop &.is-brand padding-left: 0 // Containers .nav-left, .nav-right +overflow-touch align-items: stretch display: flex flex-grow: 1 flex-shrink: 0 max-width: 100% overflow: auto +widescreen flex-basis: 0 .nav-left justify-content: flex-start white-space: nowrap .nav-right justify-content: flex-end .nav-center align-items: stretch display: flex flex-grow: 0 flex-shrink: 0 justify-content: center margin-left: auto margin-right: auto .nav-menu // Responsiveness +mobile &.nav-right background-color: $white box-shadow: 0 4px 7px rgba($black, 0.1) left: 0 display: none right: 0 top: 100% position: absolute .nav-item border-top: 1px solid rgba($border, 0.5) padding: 0.75rem &.is-active display: block // Main container .nav align-items: stretch background-color: $white display: flex height: $nav-height position: relative text-align: center z-index: 10 & > .container align-items: stretch display: flex min-height: $nav-height width: 100% // Modifiers &.has-shadow box-shadow: 0 2px 3px rgba($black, 0.1) $navbar-background-color: $white !default $navbar-height: 3.25rem !default $navbar-item-color: $grey-dark !default $navbar-item-hover-color: $black !default $navbar-item-hover-background-color: $background !default $navbar-item-active-color: $black !default $navbar-item-active-background-color: transparent !default $navbar-tab-hover-background-color: transparent !default $navbar-tab-hover-border-bottom-color: $primary !default $navbar-tab-active-color: $primary !default $navbar-tab-active-background-color: transparent !default $navbar-tab-active-border-bottom-color: $primary !default $navbar-tab-active-border-bottom-style: solid !default $navbar-tab-active-border-bottom-width: 3px !default $navbar-dropdown-background-color: $white !default $navbar-dropdown-border-top: 1px solid $border !default $navbar-dropdown-offset: -4px !default $navbar-dropdown-arrow: $link !default $navbar-dropdown-radius: $radius-large !default $navbar-dropdown-z: 20 !default $navbar-dropdown-boxed-radius: $radius-large !default $navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default $navbar-dropdown-item-hover-color: $black !default $navbar-dropdown-item-hover-background-color: $background !default $navbar-dropdown-item-active-color: $primary !default $navbar-dropdown-item-active-background-color: $background !default $navbar-divider-background-color: $border !default .navbar background-color: $navbar-background-color min-height: $navbar-height position: relative & > .container align-items: stretch display: flex min-height: $navbar-height width: 100% &.has-shadow box-shadow: 0 2px 3px rgba($black, 0.1) .navbar-brand +overflow-touch align-items: stretch display: flex min-height: $navbar-height overflow-x: auto overflow-y: hidden .navbar-burger +hamburger($navbar-height) margin-left: auto .navbar-menu display: none .navbar-item, .navbar-link color: $navbar-item-color display: block line-height: 1.5 padding: 0.5rem 1rem position: relative a.navbar-item, .navbar-link &: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: 1.75rem &.has-dropdown padding: 0 &.is-tab border-bottom: 1px solid transparent min-height: $navbar-height padding-bottom: calc(0.5rem - 1px) &: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 padding-right: 2.5em .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: 1px margin: 0.5rem 0 +touch .navbar-brand .navbar-item align-items: center display: flex .navbar-menu box-shadow: 0 8px 16px rgba($black, 0.1) padding: 0.5rem 0 &.is-active display: block +desktop .navbar, .navbar-menu, .navbar-start, .navbar-end align-items: stretch display: flex .navbar min-height: $navbar-height &.is-transparent a.navbar-item, .navbar-link &:hover, &.is-active background-color: transparent .navbar-item.has-dropdown &.is-active, &.is-hoverable:hover .navbar-link background-color: transparent .navbar-dropdown a.navbar-item &: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 &.is-active, &.is-hoverable:hover .navbar-dropdown display: block &.is-boxed opacity: 1 pointer-events: auto transform: translateY(0) .navbar-link &::after +arrow($navbar-dropdown-arrow) margin-top: -0.375em right: 1.125em top: 50% .navbar-menu flex-grow: 1 flex-shrink: 0 .navbar-start justify-content: flex-start margin-right: auto .navbar-end justify-content: flex-end margin-left: auto .navbar-dropdown background-color: $navbar-dropdown-background-color border-bottom-left-radius: $navbar-dropdown-radius border-bottom-right-radius: $navbar-dropdown-radius border-top: $navbar-dropdown-border-top box-shadow: 0 8px 8px rgba($black, 0.1) display: none font-size: 0.875rem left: 0 min-width: 100% position: absolute top: 100% z-index: $navbar-dropdown-z .navbar-item padding: 0.375rem 1rem white-space: nowrap a.navbar-item padding-right: 3rem &: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 &.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 .navbar-divider display: block .container > .navbar margin-left: -1rem margin-right: -1rem // Hover/Active states a.navbar-item, .navbar-link &.is-active color: $navbar-item-active-color &.is-active:not(:hover) background-color: $navbar-item-active-background-color .navbar-item.has-dropdown &:hover, &.is-active .navbar-link background-color: $navbar-item-hover-background-color $pagination-color: $grey-darker !default $pagination-background: $white !default $pagination-border-color: $grey-lighter !default $pagination-margin: -0.25rem !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: $grey !default $pagination-disabled-background-color: $grey-lighter !default $pagination-disabled-border-color: $grey-lighter !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($black, 0.2) .pagination 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 .pagination, .pagination-list align-items: center display: flex justify-content: center text-align: center .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis +control +unselectable font-size: 1em padding-left: 0.5em padding-right: 0.5em justify-content: center margin: 0.25rem text-align: center .pagination-previous, .pagination-next, .pagination-link border-color: $pagination-border-color min-width: 2.25em &: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 $panel-item-border: 1px solid $border !default $panel-heading-background-color: $background !default $panel-heading-color: $text-strong !default $panel-heading-line-height: 1.25 !default $panel-heading-padding: 0.5em 0.75em !default $panel-heading-radius: $radius !default $panel-heading-size: 1.25em !default $panel-heading-weight: $weight-light !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 font-size: $size-normal &:not(:last-child) margin-bottom: 1.5rem .panel-heading, .panel-tabs, .panel-block border-bottom: $panel-item-border border-left: $panel-item-border border-right: $panel-item-border &:first-child border-top: $panel-item-border .panel-heading background-color: $panel-heading-background-color border-radius: $panel-heading-radius $panel-heading-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: 0.875em 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"] margin-right: 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 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 margin-right: 0.75em .fa font-size: inherit line-height: inherit $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: $primary !default $tabs-link-active-color: $primary !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: $white !default $tabs-boxed-link-active-border-color: $border !default $tabs-boxed-link-active-border-bottom-color: transparent !important !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: $primary !default $tabs-toggle-link-active-border-color: $primary !default $tabs-toggle-link-active-color: $primary-invert !default .tabs +block +overflow-touch +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 margin-right: 0.5em &:last-child margin-left: 0.5em // Alignment &.is-centered ul justify-content: center &.is-right ul justify-content: flex-end // Styles &.is-boxed a border: 1px solid transparent border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 &: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 &.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 margin-left: -#{$tabs-toggle-link-border-width} &:first-child a border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius &:last-child a border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0 &.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 // Sizes &.is-small font-size: $size-small &.is-medium font-size: $size-medium &.is-large font-size: $size-large .column display: block flex-basis: 0 flex-grow: 1 flex-shrink: 1 padding: 0.75rem .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-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% @for $i from 1 through 12 .columns.is-mobile > &.is-#{$i} flex: none width: ($i / 12) * 100% .columns.is-mobile > &.is-offset-#{$i} margin-left: ($i / 12) * 100% +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-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% @for $i from 1 through 12 &.is-#{$i}-mobile flex: none width: ($i / 12) * 100% &.is-offset-#{$i}-mobile margin-left: ($i / 12) * 100% +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-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% @for $i from 1 through 12 &.is-#{$i}, &.is-#{$i}-tablet flex: none width: ($i / 12) * 100% &.is-offset-#{$i}, &.is-offset-#{$i}-tablet margin-left: ($i / 12) * 100% +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-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% @for $i from 1 through 12 &.is-#{$i}-touch flex: none width: ($i / 12) * 100% &.is-offset-#{$i}-touch margin-left: ($i / 12) * 100% +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-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% @for $i from 1 through 12 &.is-#{$i}-desktop flex: none width: ($i / 12) * 100% &.is-offset-#{$i}-desktop margin-left: ($i / 12) * 100% +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-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% @for $i from 1 through 12 &.is-#{$i}-widescreen flex: none width: ($i / 12) * 100% &.is-offset-#{$i}-widescreen margin-left: ($i / 12) * 100% +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-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% @for $i from 1 through 12 &.is-#{$i}-fullhd flex: none width: ($i / 12) * 100% &.is-offset-#{$i}-fullhd margin-left: ($i / 12) * 100% .columns margin-left: -0.75rem margin-right: -0.75rem margin-top: -0.75rem &:last-child margin-bottom: -0.75rem &:not(:last-child) margin-bottom: 0.75rem // Modifiers &.is-centered justify-content: center &.is-gapless margin-left: 0 margin-right: 0 margin-top: 0 &:last-child margin-bottom: 0 &:not(:last-child) margin-bottom: 1.5rem & > .column margin: 0 padding: 0 &.is-grid // Responsiveness +tablet flex-wrap: wrap & > .column max-width: 33.3333% padding: 0.75rem width: 33.3333% & + .column margin-left: 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 .tile align-items: stretch display: block flex-basis: 0 flex-grow: 1 flex-shrink: 1 min-height: min-content // Modifiers &.is-ancestor margin-left: -0.75rem margin-right: -0.75rem margin-top: -0.75rem &:last-child margin-bottom: -0.75rem &:not(:last-child) margin-bottom: 0.75rem &.is-child margin: 0 !important &.is-parent padding: 0.75rem &.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%