Conversion of User Guide to the SHH stack (#2781)
This commit is contained in:
4
guide/style/bulma-prefers-dark/sass/layout/_all.sass
Normal file
4
guide/style/bulma-prefers-dark/sass/layout/_all.sass
Normal file
@@ -0,0 +1,4 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "hero.sass"
|
||||
@import "footer.sass"
|
||||
4
guide/style/bulma-prefers-dark/sass/layout/footer.sass
Normal file
4
guide/style/bulma-prefers-dark/sass/layout/footer.sass
Normal file
@@ -0,0 +1,4 @@
|
||||
$footer-background-color-dark: $black-bis !default
|
||||
|
||||
.footer
|
||||
background-color: $footer-background-color-dark
|
||||
146
guide/style/bulma-prefers-dark/sass/layout/hero.sass
Normal file
146
guide/style/bulma-prefers-dark/sass/layout/hero.sass
Normal file
@@ -0,0 +1,146 @@
|
||||
// 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)
|
||||
Reference in New Issue
Block a user