147 lines
4.2 KiB
Sass
147 lines
4.2 KiB
Sass
// Main container
|
|
|
|
.hero
|
|
// Colors
|
|
@each $name, $pair in $colors
|
|
$color: darken(nth($pair, 1), 10%)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}, &.is-#{$name}-dark
|
|
background-color: $color
|
|
color: $color-invert
|
|
a:not(.button):not(.dropdown-item):not(.tag),
|
|
strong
|
|
color: inherit
|
|
.title
|
|
color: $color-invert
|
|
.subtitle
|
|
color: rgba($color-invert, 0.9)
|
|
a:not(.button),
|
|
strong
|
|
color: $color-invert
|
|
.navbar-menu
|
|
+touch
|
|
background-color: $color
|
|
.navbar-item,
|
|
.navbar-link
|
|
color: rgba($color-invert, 0.7)
|
|
a.navbar-item,
|
|
.navbar-link
|
|
&:hover,
|
|
&.is-active
|
|
background-color: darken($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: rgba($black, 0.1)
|
|
li.is-active a
|
|
&,
|
|
&:hover
|
|
background-color: $color-invert
|
|
border-color: $color-invert
|
|
color: $color
|
|
// Modifiers
|
|
&.is-bold
|
|
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
|
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
|
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
|
+mobile
|
|
.navbar-menu
|
|
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
|
// Responsiveness
|
|
// +mobile
|
|
// .nav-toggle
|
|
// span
|
|
// background-color: $color-invert
|
|
// &:hover
|
|
// background-color: rgba($black, 0.1)
|
|
// &.is-active
|
|
// span
|
|
// background-color: $color-invert
|
|
// .nav-menu
|
|
// .nav-item
|
|
// border-top-color: rgba($color-invert, 0.2)
|
|
|
|
// Colors dark
|
|
@each $name, $pair in $colors
|
|
$color: nth($pair, 1)
|
|
$color-invert: nth($pair, 2)
|
|
&.is-#{$name}-dark
|
|
background-color: $color
|
|
color: $color-invert
|
|
a:not(.button):not(.dropdown-item):not(.tag),
|
|
strong
|
|
color: inherit
|
|
.title
|
|
color: $color-invert
|
|
.subtitle
|
|
color: rgba($color-invert, 0.9)
|
|
a:not(.button),
|
|
strong
|
|
color: $color-invert
|
|
.navbar-menu
|
|
+touch
|
|
background-color: $color
|
|
.navbar-item,
|
|
.navbar-link
|
|
color: rgba($color-invert, 0.7)
|
|
a.navbar-item,
|
|
.navbar-link
|
|
&:hover,
|
|
&.is-active
|
|
background-color: darken($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: rgba($black, 0.1)
|
|
li.is-active a
|
|
&,
|
|
&:hover
|
|
background-color: $color-invert
|
|
border-color: $color-invert
|
|
color: $color
|
|
// Modifiers
|
|
&.is-bold
|
|
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
|
|
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
|
|
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
|
+mobile
|
|
.navbar-menu
|
|
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
|
|
// Responsiveness
|
|
// +mobile
|
|
// .nav-toggle
|
|
// span
|
|
// background-color: $color-invert
|
|
// &:hover
|
|
// background-color: rgba($black, 0.1)
|
|
// &.is-active
|
|
// span
|
|
// background-color: $color-invert
|
|
// .nav-menu
|
|
// .nav-item
|
|
// border-top-color: rgba($color-invert, 0.2)
|