Vasanko/sanic
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Conversion of User Guide to the SHH stack (#2781)

Browse Source
This commit is contained in:
Adam Hopkins
2023-09-06 15:44:00 +03:00
committed by GitHub
parent 47215d4635
commit d255d1aae1
332 changed files with 51495 additions and 2013 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
guide/style/bulma-prefers-dark/sass/components/_all.sass Normal file
View 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"

17
guide/style/bulma-prefers-dark/sass/components/breadcrumb.sass Normal file
View File

@@ -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
View 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
View 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
View 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

5
guide/style/bulma-prefers-dark/sass/components/media.sass Normal file
View File

@@ -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
View 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
View 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
View 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
View 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

49
guide/style/bulma-prefers-dark/sass/components/pagination.sass Normal file
View File

@@ -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
View 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
View 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