Conversion of User Guide to the SHH stack (#2781)
This commit is contained in:
Adam Hopkins
21
guide/style/bulma-prefers-dark/LICENSE
Normal file
21
guide/style/bulma-prefers-dark/LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 James Loh
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
9
guide/style/bulma-prefers-dark/bulma-prefers-dark.sass
Normal file
9
guide/style/bulma-prefers-dark/bulma-prefers-dark.sass
Normal file
@@ -0,0 +1,9 @@
|
||||
@charset "utf-8"
|
||||
/*! Bulma Prefers Dark | MIT License | github.com/jloh/bulma-prefers-dark */
|
||||
|
||||
@import "sass/utilities/_all"
|
||||
+prefers-scheme(dark)
|
||||
@import "sass/base/_all"
|
||||
@import "sass/elements/_all"
|
||||
@import "sass/components/_all"
|
||||
@import "sass/layout/_all"
|
||||
4
guide/style/bulma-prefers-dark/sass/base/_all.sass
Normal file
4
guide/style/bulma-prefers-dark/sass/base/_all.sass
Normal file
@@ -0,0 +1,4 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "generic.sass"
|
||||
@import "helpers.sass"
|
||||
39
guide/style/bulma-prefers-dark/sass/base/generic.sass
Normal file
39
guide/style/bulma-prefers-dark/sass/base/generic.sass
Normal file
@@ -0,0 +1,39 @@
|
||||
$body-background-color-dark: $body-background-dark !default
|
||||
$body-color-dark: $text-dark !default
|
||||
|
||||
$hr-background-color-dark: $background-dark !default
|
||||
|
||||
$strong-color-dark: $text-strong-dark !default
|
||||
|
||||
html
|
||||
background-color: $body-background-color-dark
|
||||
|
||||
body
|
||||
color: $body-color-dark
|
||||
|
||||
// Inline
|
||||
|
||||
a
|
||||
color: $link-dark
|
||||
&:hover
|
||||
color: $link-hover-dark
|
||||
|
||||
code
|
||||
background-color: $code-background-dark
|
||||
color: $code-dark
|
||||
|
||||
hr
|
||||
background-color: $hr-background-color-dark
|
||||
|
||||
strong
|
||||
color: $strong-color-dark
|
||||
|
||||
// Block
|
||||
|
||||
pre
|
||||
background-color: $pre-background-dark
|
||||
color: $pre-dark
|
||||
|
||||
table
|
||||
th
|
||||
color: $text-strong-dark
|
||||
16
guide/style/bulma-prefers-dark/sass/base/helpers.sass
Normal file
16
guide/style/bulma-prefers-dark/sass/base/helpers.sass
Normal file
@@ -0,0 +1,16 @@
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
.has-text-#{$name}-dark
|
||||
color: $color !important
|
||||
a.has-text-#{$name}-dark
|
||||
&:hover,
|
||||
&:focus
|
||||
color: lighten($color, 10%) !important
|
||||
.has-background-#{$name}-dark
|
||||
background-color: $color !important
|
||||
|
||||
@each $name, $shade in $shades
|
||||
.has-text-#{$name}-dark
|
||||
color: $shade !important
|
||||
.has-background-#{$name}-dark
|
||||
background-color: $shade !important
|
||||
14
guide/style/bulma-prefers-dark/sass/components/_all.sass
Normal file
14
guide/style/bulma-prefers-dark/sass/components/_all.sass
Normal file
@@ -0,0 +1,14 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "breadcrumb.sass"
|
||||
@import "card.sass"
|
||||
@import "dropdown.sass"
|
||||
@import "list.sass"
|
||||
@import "media.sass"
|
||||
@import "menu.sass"
|
||||
@import "message.sass"
|
||||
@import "modal.sass"
|
||||
@import "navbar.sass"
|
||||
@import "pagination.sass"
|
||||
@import "panel.sass"
|
||||
@import "tabs.sass"
|
||||
@@ -0,0 +1,17 @@
|
||||
$breadcrumb-item-color-dark: $link-dark !default
|
||||
$breadcrumb-item-hover-color-dark: $link-hover-dark !default
|
||||
$breadcrumb-item-active-color-dark: $text-strong-dark !default
|
||||
|
||||
$breadcrumb-item-separator-color-dark: $grey-dark !default
|
||||
|
||||
.breadcrumb
|
||||
a
|
||||
color: $breadcrumb-item-color-dark
|
||||
&:hover
|
||||
color: $breadcrumb-item-hover-color-dark
|
||||
li
|
||||
&.is-active
|
||||
a
|
||||
color: $breadcrumb-item-active-color-dark
|
||||
& + li::before
|
||||
color: $breadcrumb-item-separator-color-dark
|
||||
26
guide/style/bulma-prefers-dark/sass/components/card.sass
Normal file
26
guide/style/bulma-prefers-dark/sass/components/card.sass
Normal file
@@ -0,0 +1,26 @@
|
||||
$card-color-dark: $text-dark !default
|
||||
$card-background-color-dark: $black !default
|
||||
$card-shadow-dark: 0 2px 3px rgba($white, 0.1), 0 0 0 1px rgba($white, 0.1) !default
|
||||
|
||||
$card-header-color-dark: $text-strong-dark !default
|
||||
$card-header-shadow-dark: 0 1px 2px rgba($white, 0.1) !default
|
||||
|
||||
$card-footer-border-top-dark: 1px solid $border-dark !default
|
||||
|
||||
.card
|
||||
background-color: $card-background-color-dark
|
||||
box-shadow: $card-shadow-dark
|
||||
color: $card-color-dark
|
||||
|
||||
.card-header
|
||||
box-shadow: $card-header-shadow-dark
|
||||
|
||||
.card-header-title
|
||||
color: $card-header-color-dark
|
||||
|
||||
.card-footer
|
||||
border-top: $card-footer-border-top-dark
|
||||
|
||||
.card-footer-item
|
||||
&:not(:last-child)
|
||||
border-right: $card-footer-border-top-dark
|
||||
30
guide/style/bulma-prefers-dark/sass/components/dropdown.sass
Normal file
30
guide/style/bulma-prefers-dark/sass/components/dropdown.sass
Normal file
@@ -0,0 +1,30 @@
|
||||
$dropdown-content-background-color-dark: $black !default
|
||||
$dropdown-content-arrow: $link-dark !default
|
||||
$dropdown-content-shadow-dark: 0 2px 3px rgba($white, 0.1), 0 0 0 1px rgba($white, 0.1) !default
|
||||
|
||||
$dropdown-item-color-dark: $grey-light !default
|
||||
$dropdown-item-hover-color-dark: $white !default
|
||||
$dropdown-item-hover-background-color-dark: $background-dark !default
|
||||
$dropdown-item-active-color-dark: $link-invert-dark !default
|
||||
$dropdown-item-active-background-color-dark: $link-dark !default
|
||||
|
||||
$dropdown-divider-background-color-dark: $border-dark !default
|
||||
|
||||
.dropdown-content
|
||||
background-color: $dropdown-content-background-color-dark
|
||||
box-shadow: $dropdown-content-shadow-dark
|
||||
|
||||
.dropdown-item
|
||||
color: $dropdown-item-color-dark
|
||||
|
||||
a.dropdown-item,
|
||||
button.dropdown-item
|
||||
&:hover
|
||||
background-color: $dropdown-item-hover-background-color-dark
|
||||
color: $dropdown-item-hover-color-dark
|
||||
&.is-active
|
||||
background-color: $dropdown-item-active-background-color-dark
|
||||
color: $dropdown-item-active-color-dark
|
||||
|
||||
.dropdown-divider
|
||||
background-color: $dropdown-divider-background-color-dark
|
||||
27
guide/style/bulma-prefers-dark/sass/components/list.sass
Normal file
27
guide/style/bulma-prefers-dark/sass/components/list.sass
Normal file
@@ -0,0 +1,27 @@
|
||||
$list-background-color-dark: $black !default
|
||||
$list-shadow-dark: 0 2px 3px rgba($white, 0.1), 0 0 0 1px rgba($white, 0.1) !default
|
||||
|
||||
$list-item-border-dark: 1px solid $border-dark !default
|
||||
$list-item-color-dark: $text-dark !default
|
||||
$list-item-active-background-color-dark: $link-dark !default
|
||||
$list-item-active-color-dark: $link-invert-dark !default
|
||||
$list-item-hover-background-color-dark: $background-dark !default
|
||||
|
||||
.list
|
||||
background-color: $list-background-color-dark
|
||||
box-shadow: $list-shadow-dark
|
||||
// &.is-hoverable > .list-item:hover:not(.is-active)
|
||||
// background-color: $list-item-hover-background-color-dark
|
||||
// cursor: pointer
|
||||
|
||||
.list-item
|
||||
&:not(a)
|
||||
color: $list-item-color-dark
|
||||
&:not(:last-child)
|
||||
border-bottom: $list-item-border-dark
|
||||
&.is-active
|
||||
background-color: $list-item-active-background-color-dark
|
||||
color: $list-item-active-color-dark
|
||||
|
||||
a.list-item
|
||||
background-color: $list-item-hover-background-color-dark
|
||||
@@ -0,0 +1,5 @@
|
||||
.media
|
||||
.media
|
||||
border-top: 1px solid rgba($border-dark, 0.5)
|
||||
& + .media
|
||||
border-top: 1px solid rgba($border-dark, 0.5)
|
||||
21
guide/style/bulma-prefers-dark/sass/components/menu.sass
Normal file
21
guide/style/bulma-prefers-dark/sass/components/menu.sass
Normal file
@@ -0,0 +1,21 @@
|
||||
$menu-item-color-dark: $text-dark !default
|
||||
$menu-item-hover-color-dark: $text-strong-dark !default
|
||||
$menu-item-hover-background-color-dark: $background-dark !default
|
||||
$menu-item-active-color-dark: $link-invert-dark !default
|
||||
$menu-item-active-background-color-dark: $link-dark !default
|
||||
|
||||
$menu-list-border-left-dark: 1px solid $border-dark !default
|
||||
|
||||
.menu-list
|
||||
a
|
||||
color: $menu-item-color-dark
|
||||
&:hover
|
||||
background-color: $menu-item-hover-background-color-dark
|
||||
color: $menu-item-hover-color-dark
|
||||
// Modifiers
|
||||
&.is-active
|
||||
background-color: $menu-item-active-background-color-dark
|
||||
color: $menu-item-active-color-dark
|
||||
li
|
||||
ul
|
||||
border-left: $menu-list-border-left-dark
|
||||
48
guide/style/bulma-prefers-dark/sass/components/message.sass
Normal file
48
guide/style/bulma-prefers-dark/sass/components/message.sass
Normal file
@@ -0,0 +1,48 @@
|
||||
$message-background-color-dark: $background-dark !default
|
||||
|
||||
$message-header-background-color-dark: $text-dark !default
|
||||
$message-header-color-dark: $text-invert-dark !default
|
||||
|
||||
$message-body-border-color-dark: $border-dark !default
|
||||
$message-body-color-dark: $text-dark !default
|
||||
|
||||
$message-body-pre-background-color-dark: $black !default
|
||||
|
||||
.message
|
||||
background-color: $message-background-color-dark
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $background-dark
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: $text-dark
|
||||
|
||||
// Dark Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}-dark
|
||||
background-color: $background-dark
|
||||
.message-header
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
.message-body
|
||||
border-color: $color
|
||||
color: $text-dark
|
||||
|
||||
.message-header
|
||||
background-color: $message-header-background-color-dark
|
||||
color: $message-header-color-dark
|
||||
|
||||
.message-body
|
||||
border-color: $message-body-border-color-dark
|
||||
color: $message-body-color-dark
|
||||
code,
|
||||
pre
|
||||
background-color: $message-body-pre-background-color-dark
|
||||
30
guide/style/bulma-prefers-dark/sass/components/modal.sass
Normal file
30
guide/style/bulma-prefers-dark/sass/components/modal.sass
Normal file
@@ -0,0 +1,30 @@
|
||||
$modal-background-background-color-dark: rgba($white, 0.86) !default
|
||||
|
||||
$modal-card-head-background-color-dark: $background-dark !default
|
||||
$modal-card-head-border-bottom-dark: 1px solid $border-dark !default
|
||||
|
||||
$modal-card-title-color-dark: $text-strong-dark !default
|
||||
|
||||
$modal-card-foot-border-top-dark: 1px solid $border-dark !default
|
||||
|
||||
$modal-card-body-background-color-dark: $white !default
|
||||
|
||||
.modal-background
|
||||
background-color: $modal-background-background-color-dark
|
||||
|
||||
.modal-card-head,
|
||||
.modal-card-foot
|
||||
background-color: $modal-card-head-background-color-dark
|
||||
|
||||
.modal-card-head
|
||||
border-bottom: $modal-card-head-border-bottom-dark
|
||||
|
||||
.modal-card-title
|
||||
color: $modal-card-title-color-dark
|
||||
|
||||
.modal-card-foot
|
||||
border-top: $modal-card-foot-border-top-dark
|
||||
|
||||
.modal-card-body
|
||||
+overflow-touch
|
||||
background-color: $modal-card-body-background-color-dark
|
||||
214
guide/style/bulma-prefers-dark/sass/components/navbar.sass
Normal file
214
guide/style/bulma-prefers-dark/sass/components/navbar.sass
Normal file
@@ -0,0 +1,214 @@
|
||||
$navbar-background-color-dark: $body-background-dark !default
|
||||
$navbar-box-shadow-size: 0 2px 0 0 !default
|
||||
$navbar-box-shadow-color-dark: $background-dark !default
|
||||
|
||||
$navbar-item-color-dark: $grey-light !default
|
||||
$navbar-item-hover-color-dark: $link-dark !default
|
||||
$navbar-item-hover-background-color-dark: $black-bis !default
|
||||
$navbar-item-active-color-dark: $white !default
|
||||
|
||||
$navbar-burger-color-dark: $navbar-item-color-dark !default
|
||||
|
||||
$navbar-tab-hover-border-bottom-color-dark: $link-dark !default
|
||||
$navbar-tab-active-color-dark: $link-dark !default
|
||||
$navbar-tab-active-border-bottom-color-dark: $link-dark !default
|
||||
|
||||
$navbar-dropdown-background-color-dark: $black !default
|
||||
$navbar-dropdown-border-top-dark: 2px solid $border-dark !default
|
||||
$navbar-dropdown-arrow-dark: $link-dark !default
|
||||
|
||||
$navbar-dropdown-boxed-shadow-dark: 0 8px 8px rgba($white, 0.1), 0 0 0 1px rgba($white, 0.1) !default
|
||||
|
||||
$navbar-dropdown-item-hover-color-dark: $white !default
|
||||
$navbar-dropdown-item-hover-background-color-dark: $background-dark !default
|
||||
$navbar-dropdown-item-active-color-dark: $link-dark !default
|
||||
$navbar-dropdown-item-active-background-color-dark: $background-dark !default
|
||||
|
||||
$navbar-divider-background-color-dark: $background-dark !default
|
||||
|
||||
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
|
||||
|
||||
$navbar-breakpoint: $desktop !default
|
||||
|
||||
.navbar
|
||||
background-color: $navbar-background-color-dark
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
$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
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($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
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&.is-active
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// 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
|
||||
.navbar-brand
|
||||
& > .navbar-item,
|
||||
.navbar-link
|
||||
color: $color-invert
|
||||
& > a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($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
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&.is-active
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
&.has-shadow
|
||||
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color-dark
|
||||
&.is-fixed-bottom
|
||||
&.has-shadow
|
||||
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color-dark
|
||||
|
||||
.navbar-burger
|
||||
color: $navbar-burger-color-dark
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
color: $navbar-item-color-dark
|
||||
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: $navbar-item-hover-background-color-dark
|
||||
color: $navbar-item-hover-color-dark
|
||||
|
||||
.navbar-item
|
||||
&:hover
|
||||
border-bottom-color: $navbar-tab-hover-border-bottom-color-dark
|
||||
&.is-active
|
||||
border-bottom-color: $navbar-tab-active-border-bottom-color-dark
|
||||
color: $navbar-tab-active-color-dark
|
||||
|
||||
.navbar-link:not(.is-arrowless)
|
||||
&::after
|
||||
border-color: $navbar-dropdown-arrow-dark
|
||||
|
||||
.navbar-divider
|
||||
background-color: $navbar-divider-background-color-dark
|
||||
|
||||
+until($navbar-breakpoint)
|
||||
.navbar-menu
|
||||
background-color: $navbar-background-color-dark
|
||||
box-shadow: 0 8px 16px rgba($white, 0.1)
|
||||
// Fixed navbar
|
||||
.navbar
|
||||
&.is-fixed-bottom-touch
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px rgba($white, 0.1)
|
||||
|
||||
+from($navbar-breakpoint)
|
||||
.navbar
|
||||
&.is-transparent
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color-dark
|
||||
color: $navbar-dropdown-item-hover-color-dark
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color-dark
|
||||
color: $navbar-dropdown-item-active-color-dark
|
||||
.navbar-item
|
||||
&.has-dropdown-up
|
||||
.navbar-dropdown
|
||||
border-bottom: $navbar-dropdown-border-top-dark
|
||||
box-shadow: 0 -8px 8px rgba($white, 0.1)
|
||||
.navbar-dropdown
|
||||
background-color: $navbar-dropdown-background-color-dark
|
||||
border-top: $navbar-dropdown-border-top-dark
|
||||
box-shadow: 0 8px 8px rgba($white, 0.1)
|
||||
a.navbar-item
|
||||
&:hover
|
||||
background-color: $navbar-dropdown-item-hover-background-color-dark
|
||||
color: $navbar-dropdown-item-hover-color-dark
|
||||
&.is-active
|
||||
background-color: $navbar-dropdown-item-active-background-color-dark
|
||||
color: $navbar-dropdown-item-active-color-dark
|
||||
.navbar.is-spaced &,
|
||||
&.is-boxed
|
||||
box-shadow: $navbar-dropdown-boxed-shadow-dark
|
||||
// Fixed navbar
|
||||
.navbar
|
||||
&.is-fixed-bottom-desktop
|
||||
&.has-shadow
|
||||
box-shadow: 0 -2px 3px rgba($white, 0.1)
|
||||
// Hover/Active states
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
&.is-active
|
||||
color: $navbar-item-active-color-dark
|
||||
.navbar-item.has-dropdown
|
||||
&:hover,
|
||||
&.is-active
|
||||
.navbar-link
|
||||
background-color: $navbar-item-hover-background-color-dark
|
||||
@@ -0,0 +1,49 @@
|
||||
$pagination-color-dark: $grey-lighter !default
|
||||
$pagination-border-color-dark: $grey-darker !default
|
||||
|
||||
$pagination-hover-color-dark: $link-hover-dark !default
|
||||
$pagination-hover-border-color-dark: $link-hover-border-dark !default
|
||||
|
||||
$pagination-focus-color-dark: $link-focus-dark !default
|
||||
$pagination-focus-border-color-dark: $link-focus-border-dark !default
|
||||
|
||||
$pagination-active-color-dark: $link-active-dark !default
|
||||
$pagination-active-border-color-dark: $link-active-border-dark !default
|
||||
|
||||
$pagination-disabled-color-dark: $grey !default
|
||||
$pagination-disabled-background-color-dark: $grey-darker !default
|
||||
$pagination-disabled-border-color-dark: $grey-darker !default
|
||||
|
||||
$pagination-current-color-dark: $link-invert-dark !default
|
||||
$pagination-current-background-color-dark: $link-dark !default
|
||||
$pagination-current-border-color-dark: $link-dark !default
|
||||
|
||||
$pagination-ellipsis-color-dark: $grey-dark !default
|
||||
|
||||
$pagination-shadow-inset-dark: inset 0 1px 2px rgba($white, 0.2)
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link
|
||||
border-color: $pagination-border-color-dark
|
||||
color: $pagination-color-dark
|
||||
&:hover
|
||||
border-color: $pagination-hover-border-color-dark
|
||||
color: $pagination-hover-color-dark
|
||||
&:focus
|
||||
border-color: $pagination-focus-border-color-dark
|
||||
&:active
|
||||
box-shadow: $pagination-shadow-inset-dark
|
||||
&[disabled]
|
||||
background-color: $pagination-disabled-background-color-dark
|
||||
border-color: $pagination-disabled-border-color-dark
|
||||
color: $pagination-disabled-color-dark
|
||||
|
||||
.pagination-link
|
||||
&.is-current
|
||||
background-color: $pagination-current-background-color-dark
|
||||
border-color: $pagination-current-border-color-dark
|
||||
color: $pagination-current-color-dark
|
||||
|
||||
.pagination-ellipsis
|
||||
color: $pagination-ellipsis-color-dark
|
||||
57
guide/style/bulma-prefers-dark/sass/components/panel.sass
Normal file
57
guide/style/bulma-prefers-dark/sass/components/panel.sass
Normal file
@@ -0,0 +1,57 @@
|
||||
$panel-item-border-dark: 1px solid $border-dark !default
|
||||
|
||||
$panel-heading-background-color-dark: $background-dark !default
|
||||
$panel-heading-color-dark: $text-strong-dark !default
|
||||
|
||||
$panel-tab-border-bottom-dark: 1px solid $border-dark !default
|
||||
$panel-tab-active-border-bottom-color-dark: $link-active-border-dark !default
|
||||
$panel-tab-active-color-dark: $link-active-dark !default
|
||||
|
||||
$panel-list-item-color-dark: $text-dark !default
|
||||
$panel-list-item-hover-color-dark: $link-dark !default
|
||||
|
||||
$panel-block-color-dark: $text-strong-dark !default
|
||||
$panel-block-hover-background-color-dark: $background-dark !default
|
||||
$panel-block-active-border-left-color-dark: $link-dark !default
|
||||
$panel-block-active-color-dark: $link-active-dark !default
|
||||
$panel-block-active-icon-color-dark: $link-dark !default
|
||||
|
||||
.panel-heading,
|
||||
.panel-tabs,
|
||||
.panel-block
|
||||
border-bottom: $panel-item-border-dark
|
||||
border-left: $panel-item-border-dark
|
||||
border-right: $panel-item-border-dark
|
||||
&:first-child
|
||||
border-top: $panel-item-border-dark
|
||||
|
||||
.panel-heading
|
||||
background-color: $panel-heading-background-color-dark
|
||||
color: $panel-heading-color-dark
|
||||
|
||||
.panel-tabs
|
||||
a
|
||||
border-bottom: $panel-tab-border-bottom-dark
|
||||
// Modifiers
|
||||
&.is-active
|
||||
border-bottom-color: $panel-tab-active-border-bottom-color-dark
|
||||
color: $panel-tab-active-color-dark
|
||||
|
||||
.panel-list
|
||||
a
|
||||
color: $panel-list-item-color-dark
|
||||
&:hover
|
||||
color: $panel-list-item-hover-color-dark
|
||||
|
||||
.panel-block
|
||||
color: $panel-block-color-dark
|
||||
&.is-active
|
||||
border-left-color: $panel-block-active-border-left-color-dark
|
||||
color: $panel-block-active-color-dark
|
||||
.panel-icon
|
||||
color: $panel-block-active-icon-color-dark
|
||||
|
||||
a.panel-block,
|
||||
label.panel-block
|
||||
&:hover
|
||||
background-color: $panel-block-hover-background-color-dark
|
||||
57
guide/style/bulma-prefers-dark/sass/components/tabs.sass
Normal file
57
guide/style/bulma-prefers-dark/sass/components/tabs.sass
Normal file
@@ -0,0 +1,57 @@
|
||||
$tabs-border-bottom-color-dark: $border-dark !default
|
||||
$tabs-link-color-dark: $text-dark !default
|
||||
$tabs-link-hover-border-bottom-color-dark: $text-strong-dark !default
|
||||
$tabs-link-hover-color-dark: $text-strong-dark !default
|
||||
$tabs-link-active-border-bottom-color-dark: $link-dark !default
|
||||
$tabs-link-active-color-dark: $link-dark !default
|
||||
|
||||
$tabs-boxed-link-hover-background-color-dark: $background-dark !default
|
||||
$tabs-boxed-link-hover-border-bottom-color-dark: $border-dark !default
|
||||
|
||||
$tabs-boxed-link-active-background-color-dark: $black !default
|
||||
$tabs-boxed-link-active-border-color-dark: $border-dark !default
|
||||
|
||||
$tabs-toggle-link-border-color-dark: $border-dark !default
|
||||
$tabs-toggle-link-hover-background-color-dark: $background-dark !default
|
||||
$tabs-toggle-link-hover-border-color-dark: $border-hover-dark !default
|
||||
$tabs-toggle-link-active-background-color-dark: $link-dark !default
|
||||
$tabs-toggle-link-active-border-color-dark: $link-dark !default
|
||||
$tabs-toggle-link-active-color-dark: $link-invert-dark !default
|
||||
|
||||
.tabs
|
||||
a
|
||||
border-bottom-color: $tabs-border-bottom-color-dark
|
||||
color: $tabs-link-color-dark
|
||||
&:hover
|
||||
border-bottom-color: $tabs-link-hover-border-bottom-color-dark
|
||||
color: $tabs-link-hover-color-dark
|
||||
li
|
||||
&.is-active
|
||||
a
|
||||
border-bottom-color: $tabs-link-active-border-bottom-color-dark
|
||||
color: $tabs-link-active-color-dark
|
||||
ul
|
||||
border-bottom-color: $tabs-border-bottom-color-dark
|
||||
// Styles
|
||||
&.is-boxed
|
||||
a
|
||||
&:hover
|
||||
background-color: $tabs-boxed-link-hover-background-color-dark
|
||||
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color-dark
|
||||
li
|
||||
&.is-active
|
||||
a
|
||||
background-color: $tabs-boxed-link-active-background-color-dark
|
||||
border-color: $tabs-boxed-link-active-border-color-dark
|
||||
&.is-toggle
|
||||
a
|
||||
border-color: $tabs-toggle-link-border-color-dark
|
||||
&:hover
|
||||
background-color: $tabs-toggle-link-hover-background-color-dark
|
||||
border-color: $tabs-toggle-link-hover-border-color-dark
|
||||
li
|
||||
&.is-active
|
||||
a
|
||||
background-color: $tabs-toggle-link-active-background-color-dark
|
||||
border-color: $tabs-toggle-link-active-border-color-dark
|
||||
color: $tabs-toggle-link-active-color-dark
|
||||
13
guide/style/bulma-prefers-dark/sass/elements/_all.sass
Normal file
13
guide/style/bulma-prefers-dark/sass/elements/_all.sass
Normal file
@@ -0,0 +1,13 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "box.sass"
|
||||
@import "button.sass"
|
||||
@import "content.sass"
|
||||
@import "form.sass"
|
||||
@import "notification.sass"
|
||||
@import "progress.sass"
|
||||
@import "table.sass"
|
||||
@import "tag.sass"
|
||||
@import "title.sass"
|
||||
|
||||
@import "other.sass"
|
||||
18
guide/style/bulma-prefers-dark/sass/elements/box.sass
Normal file
18
guide/style/bulma-prefers-dark/sass/elements/box.sass
Normal file
@@ -0,0 +1,18 @@
|
||||
$box-color-dark: $text-dark !default
|
||||
$box-background-color-dark: $black !default
|
||||
$box-shadow-dark: 0 2px 3px rgba($white, 0.1), 0 0 0 1px rgba($white, 0.1) !default
|
||||
|
||||
$box-link-hover-shadow-dark: 0 2px 3px rgba($white, 0.1), 0 0 0 1px $link-dark !default
|
||||
$box-link-active-shadow-dark: inset 0 1px 2px rgba($white, 0.2), 0 0 0 1px $link-dark !default
|
||||
|
||||
.box
|
||||
background-color: $box-background-color-dark
|
||||
box-shadow: $box-shadow-dark
|
||||
color: $box-color-dark
|
||||
|
||||
a.box
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: $box-link-hover-shadow-dark
|
||||
&:active
|
||||
box-shadow: $box-link-active-shadow-dark
|
||||
218
guide/style/bulma-prefers-dark/sass/elements/button.sass
Normal file
218
guide/style/bulma-prefers-dark/sass/elements/button.sass
Normal file
@@ -0,0 +1,218 @@
|
||||
$button-color-dark: $grey-lighter !default
|
||||
$button-background-color-dark: $black !default
|
||||
|
||||
$button-border-color-dark: $grey-darker !default
|
||||
|
||||
$button-hover-color-dark: $link-hover-dark !default
|
||||
$button-hover-border-color-dark: $link-hover-border-dark !default
|
||||
|
||||
$button-focus-color-dark: $link-focus-dark !default
|
||||
$button-focus-border-color-dark: $link-focus-border-dark !default
|
||||
$button-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$button-focus-box-shadow-color-dark: rgba($link-dark, 0.25) !default
|
||||
|
||||
$button-active-color-dark: $link-active-dark !default
|
||||
$button-active-border-color-dark: $link-active-border-dark !default
|
||||
|
||||
$button-text-color-dark: $text-dark !default
|
||||
$button-text-hover-background-color-dark: $background-dark !default
|
||||
$button-text-hover-color-dark: $text-strong-dark !default
|
||||
|
||||
$button-disabled-background-color-dark: $black !default
|
||||
$button-disabled-border-color-dark: $grey-darker !default
|
||||
|
||||
$button-static-color-dark: $grey !default
|
||||
$button-static-background-color-dark: $white-ter !default
|
||||
$button-static-border-color-dark: $grey-darker !default
|
||||
|
||||
.button
|
||||
background-color: $button-background-color-dark
|
||||
border-color: $button-border-color-dark
|
||||
color: $button-color-dark
|
||||
// States
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $button-hover-border-color-dark
|
||||
color: $button-hover-color-dark
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: $button-focus-border-color-dark
|
||||
color: $button-focus-color-dark
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color-dark
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $button-active-border-color-dark
|
||||
color: $button-active-color-dark
|
||||
// Colors
|
||||
&.is-text
|
||||
color: $button-text-color-dark
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused
|
||||
background-color: $button-text-hover-background-color-dark
|
||||
color: $button-text-hover-color-dark
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($button-text-hover-background-color-dark, 5%)
|
||||
color: $button-text-hover-color-dark
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
$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
|
||||
color: $color-invert
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($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
|
||||
background-color: darken($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,
|
||||
&:focus
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color $color !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,
|
||||
&:focus
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
box-shadow: none
|
||||
color: $color-invert
|
||||
// Colors Dark
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}-dark
|
||||
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
|
||||
color: $color-invert
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: darken($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
|
||||
background-color: darken($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,
|
||||
&:focus
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
&.is-loading
|
||||
&::after
|
||||
border-color: transparent transparent $color $color !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,
|
||||
&:focus
|
||||
background-color: $color-invert
|
||||
color: $color
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: $color-invert
|
||||
box-shadow: none
|
||||
color: $color-invert
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $button-disabled-background-color-dark
|
||||
border-color: $button-disabled-border-color-dark
|
||||
&.is-static
|
||||
background-color: $button-static-background-color-dark
|
||||
border-color: $button-static-border-color-dark
|
||||
color: $button-static-color-dark
|
||||
35
guide/style/bulma-prefers-dark/sass/elements/content.sass
Normal file
35
guide/style/bulma-prefers-dark/sass/elements/content.sass
Normal file
@@ -0,0 +1,35 @@
|
||||
$content-heading-color-dark: $text-strong-dark !default
|
||||
|
||||
$content-blockquote-background-color-dark: $background-dark !default
|
||||
$content-blockquote-border-left-dark: 5px solid $border-dark !default
|
||||
|
||||
$content-table-cell-border-dark: 1px solid $border-dark !default
|
||||
$content-table-cell-heading-color-dark: $text-strong-dark !default
|
||||
$content-table-head-cell-color-dark: $text-strong-dark !default
|
||||
$content-table-foot-cell-color-dark: $text-strong-dark !default
|
||||
|
||||
.content
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: $content-heading-color-dark
|
||||
blockquote
|
||||
background-color: $content-blockquote-background-color-dark
|
||||
border-left: $content-blockquote-border-left-dark
|
||||
table
|
||||
td,
|
||||
th
|
||||
border: $content-table-cell-border-dark
|
||||
th
|
||||
color: $content-table-cell-heading-color-dark
|
||||
thead
|
||||
td,
|
||||
th
|
||||
color: $content-table-head-cell-color-dark
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
color: $content-table-foot-cell-color-dark
|
||||
236
guide/style/bulma-prefers-dark/sass/elements/form.sass
Normal file
236
guide/style/bulma-prefers-dark/sass/elements/form.sass
Normal file
@@ -0,0 +1,236 @@
|
||||
$input-color-dark: $grey-lighter !default
|
||||
$input-background-color-dark: $black !default
|
||||
$input-border-color-dark: $grey-darker !default
|
||||
$input-shadow-dark: inset 0 1px 2px rgba($white, 0.1) !default
|
||||
$input-placeholder-color-dark: rgba($input-color-dark, 0.3) !default
|
||||
|
||||
$input-hover-color-dark: $grey-lighter !default
|
||||
$input-hover-border-color-dark: $grey-dark !default
|
||||
|
||||
$input-focus-color-dark: $grey-lighter !default
|
||||
$input-focus-border-color-dark: $link-dark !default
|
||||
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||||
$input-focus-box-shadow-color-dark: rgba($link-dark, 0.25) !default
|
||||
|
||||
$input-disabled-color-dark: $text-dark !default
|
||||
$input-disabled-background-color-dark: $background-dark !default
|
||||
$input-disabled-border-color-dark: $background-dark !default
|
||||
$input-disabled-placeholder-color-dark: rgba($input-disabled-color-dark, 0.3) !default
|
||||
|
||||
$input-arrow-dark: $link-dark !default
|
||||
|
||||
$input-icon-color-dark: $grey-darker !default
|
||||
|
||||
$file-border-color-dark: $border-dark !default
|
||||
|
||||
$file-cta-background-color-dark: $black-ter !default
|
||||
$file-cta-color-dark: $grey-light !default
|
||||
$file-cta-hover-color-dark: $grey-lighter !default
|
||||
$file-cta-active-color-dark: $grey-lighter !default
|
||||
|
||||
$file-name-border-color-dark: $border-dark !default
|
||||
|
||||
$label-color-dark: $grey-lighter !default
|
||||
|
||||
=input
|
||||
background-color: $input-background-color-dark
|
||||
border-color: $input-border-color-dark
|
||||
color: $input-color-dark
|
||||
+placeholder
|
||||
color: $input-placeholder-color-dark
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: $input-hover-border-color-dark
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $input-focus-border-color-dark
|
||||
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color-dark
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: $input-disabled-background-color-dark
|
||||
border-color: $input-disabled-border-color-dark
|
||||
color: $input-disabled-color-dark
|
||||
+placeholder
|
||||
color: $input-disabled-placeholder-color-dark
|
||||
|
||||
.input,
|
||||
.textarea
|
||||
+input
|
||||
box-shadow: $input-shadow-dark
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
&.is-#{$name}
|
||||
border-color: $color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
// Colors Dark
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}-dark
|
||||
border-color: $color
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
|
||||
.checkbox,
|
||||
.radio
|
||||
&:hover
|
||||
color: $input-hover-color-dark
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
color: $input-disabled-color-dark
|
||||
|
||||
.select
|
||||
&:not(.is-multiple):not(.is-loading)
|
||||
&::after
|
||||
border-color: $input-arrow-dark
|
||||
select
|
||||
+input
|
||||
&[disabled]:hover,
|
||||
fieldset[disabled] &:hover
|
||||
border-color: $input-disabled-border-color-dark
|
||||
option
|
||||
color: $input-color-dark
|
||||
// States
|
||||
&:not(.is-multiple):not(.is-loading):hover
|
||||
&::after
|
||||
border-color: $input-hover-color-dark
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
&.is-#{$name}
|
||||
&:not(:hover)::after
|
||||
border-color: $color
|
||||
select
|
||||
border-color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: darken($color, 5%)
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
// Colors Dark
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}-dark
|
||||
&:not(:hover)::after
|
||||
border-color: $color
|
||||
select
|
||||
border-color: $color
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
border-color: darken($color, 5%)
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||||
// Modifiers
|
||||
&.is-disabled
|
||||
&::after
|
||||
border-color: $input-disabled-color-dark
|
||||
|
||||
.file
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
.file-cta
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
.file-cta
|
||||
background-color: darken($color, 2.5%)
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
.file-cta
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
||||
color: $color-invert
|
||||
&:active,
|
||||
&.is-active
|
||||
.file-cta
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
// Colors Dark
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}-dark
|
||||
.file-cta
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
.file-cta
|
||||
background-color: darken($color, 2.5%)
|
||||
color: $color-invert
|
||||
&:focus,
|
||||
&.is-focused
|
||||
.file-cta
|
||||
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
||||
color: $color-invert
|
||||
&:active,
|
||||
&.is-active
|
||||
.file-cta
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
|
||||
.file-label
|
||||
&:hover
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color-dark, 2.5%)
|
||||
color: $file-cta-hover-color-dark
|
||||
.file-name
|
||||
border-color: darken($file-name-border-color-dark, 2.5%)
|
||||
&:active
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color-dark, 5%)
|
||||
color: $file-cta-active-color-dark
|
||||
.file-name
|
||||
border-color: darken($file-name-border-color-dark, 5%)
|
||||
|
||||
.file-cta,
|
||||
.file-name
|
||||
border-color: $file-border-color-dark
|
||||
|
||||
.file-cta
|
||||
background-color: $file-cta-background-color-dark
|
||||
color: $file-cta-color-dark
|
||||
|
||||
.file-name
|
||||
border-color: $file-name-border-color-dark
|
||||
|
||||
.label
|
||||
color: $label-color-dark
|
||||
|
||||
.help
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
&.is-#{$name}
|
||||
color: $color
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}-dark
|
||||
color: $color
|
||||
|
||||
// Containers
|
||||
|
||||
.control
|
||||
// Modifiers
|
||||
&.has-icons-left,
|
||||
&.has-icons-right
|
||||
.icon
|
||||
color: $input-icon-color-dark
|
||||
@@ -0,0 +1,21 @@
|
||||
$notification-background-color-dark: $background-dark !default
|
||||
|
||||
.notification
|
||||
background-color: $notification-background-color-dark
|
||||
code,
|
||||
pre
|
||||
background: $black
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// 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
|
||||
2
guide/style/bulma-prefers-dark/sass/elements/other.sass
Normal file
2
guide/style/bulma-prefers-dark/sass/elements/other.sass
Normal file
@@ -0,0 +1,2 @@
|
||||
.number
|
||||
background-color: $background-dark
|
||||
39
guide/style/bulma-prefers-dark/sass/elements/progress.sass
Normal file
39
guide/style/bulma-prefers-dark/sass/elements/progress.sass
Normal file
@@ -0,0 +1,39 @@
|
||||
$progress-bar-background-color-dark: $border-dark !default
|
||||
$progress-value-background-color-dark: $text-dark !default
|
||||
|
||||
.progress
|
||||
&::-webkit-progress-bar
|
||||
background-color: $progress-bar-background-color-dark
|
||||
&::-webkit-progress-value
|
||||
background-color: $progress-value-background-color-dark
|
||||
&::-moz-progress-bar
|
||||
background-color: $progress-value-background-color-dark
|
||||
&::-ms-fill
|
||||
background-color: $progress-value-background-color-dark
|
||||
&:indeterminate
|
||||
background-color: $progress-bar-background-color-dark
|
||||
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color-dark 30%)
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
&.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-dark 30%)
|
||||
// Colors Dark
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}-dark
|
||||
&::-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-dark 30%)
|
||||
78
guide/style/bulma-prefers-dark/sass/elements/table.sass
Normal file
78
guide/style/bulma-prefers-dark/sass/elements/table.sass
Normal file
@@ -0,0 +1,78 @@
|
||||
$table-color-dark: $grey-lighter !default
|
||||
$table-background-color-dark: $black !default
|
||||
|
||||
$table-cell-border-dark: 1px solid $grey-darker !default
|
||||
$table-cell-heading-color-dark: $text-strong-dark !default
|
||||
|
||||
$table-head-cell-color-dark: $text-strong-dark !default
|
||||
$table-foot-cell-color-dark: $text-strong-dark !default
|
||||
|
||||
$table-row-hover-background-color-dark: $black-bis !default
|
||||
|
||||
$table-row-active-background-color-dark: $primary-dark !default
|
||||
$table-row-active-color-dark: $primary-invert-dark !default
|
||||
|
||||
$table-striped-row-even-background-color-dark: $black-bis !default
|
||||
$table-striped-row-even-hover-background-color-dark: $black-ter !default
|
||||
|
||||
.table
|
||||
background-color: $table-background-color-dark
|
||||
color: $table-color-dark
|
||||
td,
|
||||
th
|
||||
border: $table-cell-border-dark
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
// Colors Dark
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}-dark
|
||||
background-color: $color
|
||||
border-color: $color
|
||||
color: $color-invert
|
||||
// Modifiers
|
||||
&.is-selected
|
||||
background-color: $table-row-active-background-color-dark
|
||||
color: $table-row-active-color-dark
|
||||
th
|
||||
color: $table-cell-heading-color-dark
|
||||
tr
|
||||
&.is-selected
|
||||
background-color: $table-row-active-background-color-dark
|
||||
color: $table-row-active-color-dark
|
||||
td,
|
||||
th
|
||||
border-color: $table-row-active-color-dark
|
||||
thead
|
||||
td,
|
||||
th
|
||||
color: $table-head-cell-color-dark
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
color: $table-foot-cell-color-dark
|
||||
// Modifiers
|
||||
&.is-hoverable
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: $table-row-hover-background-color-dark
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: $table-row-hover-background-color-dark
|
||||
&:nth-child(even)
|
||||
background-color: $table-striped-row-even-hover-background-color-dark
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:nth-child(even)
|
||||
background-color: $table-striped-row-even-background-color-dark
|
||||
27
guide/style/bulma-prefers-dark/sass/elements/tag.sass
Normal file
27
guide/style/bulma-prefers-dark/sass/elements/tag.sass
Normal file
@@ -0,0 +1,27 @@
|
||||
$tag-background-color-dark: $background-dark !default
|
||||
$tag-color-dark: $text-dark !default
|
||||
|
||||
.tag:not(body)
|
||||
background-color: $tag-background-color-dark
|
||||
color: $tag-color-dark
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: darken(nth($pair, 1), 10%)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
// 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
|
||||
// Modifiers
|
||||
&.is-delete
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: darken($tag-background-color-dark, 5%)
|
||||
&:active
|
||||
background-color: darken($tag-background-color-dark, 10%)
|
||||
12
guide/style/bulma-prefers-dark/sass/elements/title.sass
Normal file
12
guide/style/bulma-prefers-dark/sass/elements/title.sass
Normal file
@@ -0,0 +1,12 @@
|
||||
$title-color-dark: $grey-lighter !default
|
||||
|
||||
$subtitle-color-dark: $grey-light !default
|
||||
$subtitle-strong-color-dark: $grey-lighter !default
|
||||
|
||||
.title
|
||||
color: $title-color-dark
|
||||
|
||||
.subtitle
|
||||
color: $subtitle-color-dark
|
||||
strong
|
||||
color: $subtitle-strong-color-dark
|
||||
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)
|
||||
5
guide/style/bulma-prefers-dark/sass/utilities/_all.sass
Normal file
5
guide/style/bulma-prefers-dark/sass/utilities/_all.sass
Normal file
@@ -0,0 +1,5 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "initial-variables.sass"
|
||||
@import "derived-variables.sass"
|
||||
@import "mixins.sass"
|
||||
@@ -0,0 +1,67 @@
|
||||
$primary-dark: darken($turquoise, 10%) !default
|
||||
|
||||
$info: darken($cyan, 10%) !default
|
||||
$success: darken($green, 10%) !default
|
||||
$warning: darken($yellow, 10%) !default
|
||||
$danger: darken($red, 10%) !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: $turquoise-invert !default
|
||||
$primary-invert-dark: darken($turquoise-invert, 10%) !default
|
||||
$info-invert: $cyan-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
|
||||
$background-dark: $black-ter !default
|
||||
|
||||
$border-dark: $grey-darker !default
|
||||
$border-hover-dark: $grey-dark !default
|
||||
|
||||
// Text colors
|
||||
|
||||
$text-dark: $grey-light !default
|
||||
$text-invert: findColorInvert($text) !default
|
||||
$text-invert-dark: findColorInvert($text-dark) !default
|
||||
$text-light: $grey !default
|
||||
$text-strong-dark: $grey-lighter !default
|
||||
|
||||
// Code colors
|
||||
|
||||
$code-dark: darken($red, 15%) !default
|
||||
$code-background-dark: $background-dark !default
|
||||
|
||||
$pre-dark: $text-dark !default
|
||||
$pre-background-dark: $background-dark !default
|
||||
|
||||
// Link colors
|
||||
|
||||
$link-dark: $blue-light !default
|
||||
$link-invert-dark: $blue-invert !default
|
||||
|
||||
$link-hover-dark: $grey-lighter !default
|
||||
$link-hover-border-dark: $grey-dark !default
|
||||
|
||||
$link-focus-dark: $grey-lighter !default
|
||||
$link-focus-border-dark: $blue-light !default
|
||||
|
||||
$link-active-dark: $grey-lighter !default
|
||||
$link-active-border-dark: $grey-light !default
|
||||
@@ -0,0 +1,7 @@
|
||||
// Colors
|
||||
|
||||
$blue-light: hsl(209, 71%, 63%) !default
|
||||
|
||||
// Background
|
||||
|
||||
$body-background-dark: #17181c !default
|
||||
@@ -0,0 +1,5 @@
|
||||
// Color schemes
|
||||
|
||||
=prefers-scheme($scheme)
|
||||
@media (prefers-color-scheme: $scheme)
|
||||
@content
|
||||
Reference in New Issue
Block a user