Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Style dark components

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-18 20:29:40 -04:00
parent 6b09dcfcf0
commit 9209d1fe42
25 changed files with 1079 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/global/navbar.html
View File

@@ -41,7 +41,7 @@
{% for link_id in site.data.links.navbar %} {% for link_id in site.data.links.navbar %}
{% assign link = site.data.links.by_id[link_id] %} {% assign link = site.data.links.by_id[link_id] %}
<a class="navbar-item bd-navbar-item-{{ link.id }} {% if page.route == link.id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/"> <a class="navbar-item bd-navbar-item-{{ link_id }} {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
<span class="icon has-text-{{ link.color }}"> <span class="icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i> <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span> </span>

6
docs/_sass/book.sass
View File

@@ -45,7 +45,7 @@ $book-beige: #FFEDD7
.bd-book-content .bd-book-content
@extend %bd-box @extend %bd-box
box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}-scheme-invert), 0.2) box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}scheme-invert), 0.2)
max-width: 520px max-width: 520px
padding: 3rem padding: 3rem
@@ -98,7 +98,7 @@ $book-beige: #FFEDD7
.bd-book-modal-background .bd-book-modal-background
+overlay +overlay
background-color: rgba(var(--#{$prefix}-scheme-invert), 0.86) background-color: rgba(var(--#{$prefix}scheme-invert), 0.86)
.bd-book-modal .bd-book-modal
.bd-book-modal-background, .bd-book-modal-background,
@@ -153,7 +153,7 @@ $book-beige: #FFEDD7
.bd-book-inline-cover .bd-book-inline-cover
display: none display: none
.bd-book-modal-column .bd-book-modal-column
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
position: relative position: relative
&.bd-is-cover &.bd-is-cover
align-items: center align-items: center

6
docs/_sass/bootstrap.sass
View File

@@ -70,11 +70,11 @@ $bootstrap-invert: #fff
&:hover &:hover
text-decoration: underline text-decoration: underline
.bd-is-empty .bd-is-empty
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
.bd-is-unique .bd-is-unique
background-color: rgba($green, 0.25) background-color: rgba($green, 0.25)
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
font-weight: $weight-bold font-weight: $weight-bold
.bd-bootstrap-comparison-header .bd-bootstrap-comparison-header

14
docs/_sass/bsa.sass
View File

@@ -8,7 +8,7 @@
.default-ad .default-ad
background-color: rgba(black, 0.3) background-color: rgba(black, 0.3)
border-radius: 2px border-radius: 2px
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
display: inline-block display: inline-block
font-size: 10px font-size: 10px
font-weight: bold font-weight: bold
@@ -16,10 +16,10 @@
text-transform: uppercase text-transform: uppercase
vertical-align: top vertical-align: top
& > a & > a
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
border-radius: $radius-large border-radius: $radius-large
box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px rgba(var(--#{$prefix}-scheme-invert), 0.1) box-shadow: 0 2px 3px rgba(var(--#{$prefix}scheme-invert), 0.1), 0 0 0 1px rgba(var(--#{$prefix}scheme-invert), 0.1)
color: var(--#{$prefix}-text) color: var(--#{$prefix}text)
display: block display: block
line-height: 1.375 line-height: 1.375
margin-top: 15px margin-top: 15px
@@ -29,9 +29,9 @@
position: relative position: relative
&:hover, &:hover,
&:focus &:focus
box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}-link) box-shadow: 0 2px 3px rgba(var(--#{$prefix}scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}link)
&:active &:active
box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}-scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}-link) box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}link)
span span
display: block display: block
.default-image .default-image
@@ -46,7 +46,7 @@
height: 40px height: 40px
width: 40px width: 40px
.default-title .default-title
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
display: inline display: inline
font-weight: $weight-bold font-weight: $weight-bold
&::after &::after

2
docs/_sass/callout.sass
View File

@@ -1,6 +1,6 @@
.bd-callout .bd-callout
+block +block
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
border-radius: $radius border-radius: $radius
padding: 1.25rem 2.5rem 1.25rem 1.5rem padding: 1.25rem 2.5rem 1.25rem 1.5rem
position: relative position: relative

13
docs/_sass/example.sass
View File

@@ -1,7 +1,7 @@
.bd-example, .bd-example,
.bd-structure, .bd-structure,
.bd-snippet .bd-snippet
border: 2px solid $background border: 2px solid var(--#{$prefix}background)
position: relative position: relative
&::before &::before
background: $yellow background: $yellow
@@ -164,7 +164,7 @@ $structure-invert: $danger-invert
position: relative position: relative
&::before &::before
+overlay +overlay
background: rgba(var(--#{$prefix}-scheme-invert), 0.7) background: rgba(var(--#{$prefix}scheme-invert), 0.7)
background: $background background: $background
border: 1px solid $border border: 1px solid $border
content: "" content: ""
@@ -193,7 +193,7 @@ $structure-invert: $danger-invert
.bd-expand .bd-expand
background: none background: none
border: none border: none
color: var(--#{$prefix}-text) color: var(--#{$prefix}text)
cursor: pointer cursor: pointer
font-size: 0.625rem font-size: 0.625rem
outline: none outline: none
@@ -213,20 +213,23 @@ $structure-invert: $danger-invert
.bd-show .bd-show
+overlay +overlay
align-items: center align-items: center
background-color: rgba($background, 0.7) background-color: var(--#{$prefix}background)
border: none border: none
color: rgba(#000, 0.5) color: var(--#{$prefix}scheme-invert)
cursor: pointer cursor: pointer
display: none display: none
font-size: $size-small font-size: $size-small
justify-content: center justify-content: center
opacity: 0.8
width: 100% width: 100%
strong strong
color: currentColor color: currentColor
font-weight: $weight-semibold font-weight: $weight-semibold
opacity: 1
&:hover &:hover
background-color: rgba($yellow, 0.8) background-color: rgba($yellow, 0.8)
color: rgba(#000, 0.7) color: rgba(#000, 0.7)
opacity: 1
+tablet +tablet
pre pre
white-space: pre-wrap white-space: pre-wrap

4
docs/_sass/expo.sass
View File

@@ -1,5 +1,5 @@
.bd-expo .bd-expo
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
padding: 1.5rem padding: 1.5rem
.bd-website .bd-website
@@ -31,7 +31,7 @@
transition: opacity 200ms $easing transition: opacity 200ms $easing
.bd-website-overlay .bd-website-overlay
background-color: var(--#{$prefix}-scheme-invert) background-color: var(--#{$prefix}scheme-invert)
opacity: 0 opacity: 0
transition: opacity 200ms $easing transition: opacity 200ms $easing

22
docs/_sass/footer.sass
View File

@@ -1,5 +1,5 @@
.bd-footer-title .bd-footer-title
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
font-size: 1.25rem font-size: 1.25rem
line-height: 1.25 line-height: 1.25
margin-bottom: 0.5rem margin-bottom: 0.5rem
@@ -9,7 +9,7 @@
font-weight: $weight-semibold font-weight: $weight-semibold
.bd-footer-subtitle .bd-footer-subtitle
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
margin-top: -0.5rem margin-top: -0.5rem
transition-duration: $speed transition-duration: $speed
transition-property: color transition-property: color
@@ -29,7 +29,7 @@
width: 100% width: 100%
.bd-footer-tsp .bd-footer-tsp
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
margin-top: 1.5rem margin-top: 1.5rem
%bd-footer-box %bd-footer-box
@@ -42,7 +42,7 @@
.bd-footer-support .bd-footer-support
@extend %bd-footer-box @extend %bd-footer-box
border-top: 2px solid var(--#{$prefix}-scheme-main-ter) border-top: 2px solid var(--#{$prefix}scheme-main-ter)
box-shadow: none box-shadow: none
padding: 3rem padding: 3rem
.bd-footer-title .bd-footer-title
@@ -63,7 +63,7 @@
padding: 0.75rem 1.5rem padding: 0.75rem 1.5rem
.bd-footer-donation-title .bd-footer-donation-title
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
margin-bottom: 0.5rem margin-bottom: 0.5rem
strong strong
color: currentColor color: currentColor
@@ -103,11 +103,11 @@ $star-figure-height: 156px
+tablet +tablet
width: calc(33.3333% - 2rem) width: calc(33.3333% - 2rem)
&:hover &:hover
box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}-scheme-invert), 0.1) box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}scheme-invert), 0.1)
transform: translateY(-0.5rem) transform: translateY(-0.5rem)
.bd-footer-title, .bd-footer-title,
.bd-footer-subtitle .bd-footer-subtitle
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
&.bd-is-expo, &.bd-is-expo,
&.bd-is-love &.bd-is-love
padding-bottom: $star-figure-height padding-bottom: $star-figure-height
@@ -144,10 +144,10 @@ $star-figure-height: 156px
a a
color: currentColor color: currentColor
&:hover &:hover
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
.bd-footer-link-title .bd-footer-link-title
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
font-size: 1.25rem font-size: 1.25rem
font-weight: $weight-semibold font-weight: $weight-semibold
&:not(:first-child) &:not(:first-child)
@@ -158,7 +158,7 @@ $star-figure-height: 156px
&.bd-is-more &.bd-is-more
font-size: 0.875rem font-size: 0.875rem
a:not(:hover) a:not(:hover)
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
&.bd-has-subtitle &.bd-has-subtitle
a a
align-items: center align-items: center
@@ -174,7 +174,7 @@ $star-figure-height: 156px
font-style: normal font-style: normal
&:not(:hover) &:not(:hover)
em em
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
+mobile +mobile
flex-wrap: wrap flex-wrap: wrap
margin-top: 1rem margin-top: 1rem

16
docs/_sass/global.sass
View File

@@ -16,10 +16,10 @@ svg
strong strong
color: currentColor color: currentColor
a a
border-bottom: 1px solid rgba(var(--#{$prefix}-scheme-main), 0.5) border-bottom: 1px solid rgba(var(--#{$prefix}scheme-main), 0.5)
padding-bottom: 2px padding-bottom: 2px
&:hover &:hover
border-bottom-color: var(--#{$prefix}-scheme-main) border-bottom-color: var(--#{$prefix}scheme-main)
span span
margin: 0 0.25em margin: 0 0.25em
opacity: 0.5 opacity: 0.5
@@ -99,8 +99,8 @@ $carbon-poweredby-height: 20px
padding: 0 padding: 0
position: relative position: relative
&:hover &:hover
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}-scheme-main) box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}scheme-main)
+tablet +tablet
width: $carbon-width width: $carbon-width
@@ -138,20 +138,20 @@ $carbon-poweredby-height: 20px
width: $carbon-image-width width: $carbon-image-width
&:hover &:hover
& + .carbon-text & + .carbon-text
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
&:active &:active
opacity: 0.8 opacity: 0.8
.carbon-text .carbon-text
display: block display: block
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
line-height: 20px line-height: 20px
min-height: $carbon-height min-height: $carbon-height
padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing}) padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
&:hover &:hover
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
.carbon-poweredby .carbon-poweredby
bottom: 0 bottom: 0
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
display: inline display: inline
font-size: $size-small font-size: $size-small
line-height: $carbon-poweredby-height line-height: $carbon-poweredby-height

8
docs/_sass/header.sass
View File

@@ -4,19 +4,19 @@
&:hover &:hover
background: $github background: $github
border-color: $github border-color: $github
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
.bd-tw-button .bd-tw-button
background-color: $twitter background-color: $twitter
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
border-color: transparent !important border-color: transparent !important
&:hover &:hover
background-color: darken($twitter, 2.5%) background-color: darken($twitter, 2.5%)
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
&:active, &:active,
&:focus &:focus
background-color: darken($twitter, 5%) background-color: darken($twitter, 5%)
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
#moreDropdown #moreDropdown
.navbar-item .navbar-item

2
docs/_sass/highlight.sass
View File

@@ -1,5 +1,5 @@
.highlight .highlight
background-color: var(--#{$prefix}-pre-background) background-color: var(--#{$prefix}pre-background)
border-radius: $radius-large border-radius: $radius-large
color: #586e75 color: #586e75
pre pre

36
docs/_sass/index.sass
View File

@@ -11,14 +11,14 @@
&:hover &:hover
color: $blue color: $blue
strong strong
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
strong strong
font-weight: $weight-semibold font-weight: $weight-semibold
.title .title
strong strong
color: $primary color: $primary
.subtitle .subtitle
color: var(--#{$prefix}-border-hover) !important color: var(--#{$prefix}border-hover) !important
strong strong
color: currentColor color: currentColor
&:not(:last-child) &:not(:last-child)
@@ -41,7 +41,7 @@
margin-right: auto margin-right: auto
.bd-index-custom-title .bd-index-custom-title
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
.bd-index-custom-example .bd-index-custom-example
padding: 1rem padding: 1rem
@@ -77,28 +77,28 @@
.button .button
&.is-primary &.is-primary
background-color: $mauve background-color: $mauve
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
&:hover &:hover
background-color: darken($mauve, 2.5%) background-color: darken($mauve, 2.5%)
&:active &:active
background-color: darken($mauve, 5%) background-color: darken($mauve, 5%)
&.is-link &.is-link
background-color: $pink background-color: $pink
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
&:hover &:hover
background-color: darken($pink, 2.5%) background-color: darken($pink, 2.5%)
&:active &:active
background-color: darken($pink, 5%) background-color: darken($pink, 5%)
+selection +selection
background-color: $pink background-color: $pink
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
// Fullscreen // Fullscreen
.bd-index-fullscreen .bd-index-fullscreen
.tabs .tabs
a a
color: var(--#{$prefix}-border-hover) !important color: var(--#{$prefix}border-hover) !important
// Columns // Columns
@@ -161,13 +161,13 @@
transition-duration: $speed * 2 transition-duration: $speed * 2
transition-property: color transition-property: color
.subtitle .subtitle
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
position: relative position: relative
strong strong
color: currentColor color: currentColor
&::before &::before
+overlay +overlay
background-color: var(--#{$prefix}-scheme-main-bis) background-color: var(--#{$prefix}scheme-main-bis)
border-radius: $radius-large border-radius: $radius-large
content: "" content: ""
display: block display: block
@@ -182,7 +182,7 @@
opacity: 1 opacity: 1
transform: scale(1) transform: scale(1)
.subtitle .subtitle
color: var(--#{$prefix}-text) color: var(--#{$prefix}text)
&:nth-child(1):hover &:nth-child(1):hover
.title .title
color: $orange color: $orange
@@ -191,10 +191,10 @@
color: $success color: $success
&:nth-child(3):hover &:nth-child(3):hover
.title .title
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
&:nth-child(4):hover &:nth-child(4):hover
.title .title
color: var(--#{$prefix}-scheme-invert) color: var(--#{$prefix}scheme-invert)
.bd-focus-icon .bd-focus-icon
position: relative position: relative
@@ -292,7 +292,7 @@
color: $black-ter color: $black-ter
&.is-success, &.is-success,
&.is-error &.is-error
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
pointer-events: none pointer-events: none
text-decoration: none text-decoration: none
&.is-success &.is-success
@@ -301,10 +301,10 @@
background-color: $red background-color: $red
\::-moz-selection \::-moz-selection
background: $yellow background: $yellow
color: var(--#{$prefix}-scheme-invert-ter) color: var(--#{$prefix}scheme-invert-ter)
\::selection \::selection
background: $yellow background: $yellow
color: var(--#{$prefix}-scheme-invert-ter) color: var(--#{$prefix}scheme-invert-ter)
.intro-buttons .intro-buttons
margin-top: 1.5rem margin-top: 1.5rem
@@ -313,7 +313,7 @@
padding-right: 1.375em padding-right: 1.375em
.intro-video .intro-video
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
max-width: 640px max-width: 640px
@@ -384,12 +384,12 @@
width: 100% width: 100%
.intro-author .intro-author
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
font-size: $size-small font-size: $size-small
margin-top: 40px margin-top: 40px
text-align: center text-align: center
a a
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
&:hover &:hover
text-decoration: underline text-decoration: underline
span span

4
docs/_sass/klmn.sass
View File

@@ -12,7 +12,7 @@
margin: 0.25rem auto 0.25rem 0 margin: 0.25rem auto 0.25rem 0
.bd-klmn-gap .bd-klmn-gap
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
border-radius: $radius border-radius: $radius
color: $red color: $red
font-family: $family-monospace font-family: $family-monospace
@@ -24,7 +24,7 @@
white-space: nowrap white-space: nowrap
&.bd-is-selected &.bd-is-selected
background-color: $green background-color: $green
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
.bd-klmn-columns:last-child .bd-klmn-columns:last-child
.bd-notification .bd-notification

8
docs/_sass/love.sass
View File

@@ -1,5 +1,5 @@
.bd-testimonials .bd-testimonials
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
.bd-testimonial .bd-testimonial
align-items: flex-start align-items: flex-start
@@ -7,7 +7,7 @@
justify-content: center justify-content: center
.bd-testimonial-tweet .bd-testimonial-tweet
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
.bd-more-loves .bd-more-loves
align-items: center align-items: center
@@ -57,7 +57,7 @@
.hero.bd-is-love .hero.bd-is-love
.title, .title,
.subtitle .subtitle
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
@keyframes rainbow @keyframes rainbow
0% 0%
@@ -111,7 +111,7 @@
margin-left: 1.5rem margin-left: 1.5rem
.bd-shoutout .bd-shoutout
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
padding: 2rem padding: 2rem
text-align: center text-align: center
&:not(:last-child) &:not(:last-child)

40
docs/_sass/main.sass
View File

@@ -5,7 +5,7 @@
.bd-figure .bd-figure
+block +block
align-items: center align-items: center
border: 2px solid var(--#{$prefix}-scheme-main-ter) border: 2px solid var(--#{$prefix}scheme-main-ter)
border-radius: $radius border-radius: $radius
display: flex display: flex
flex-direction: column flex-direction: column
@@ -14,8 +14,8 @@
margin: 1em margin: 1em
figcaption figcaption
align-self: stretch align-self: stretch
background-color: var(--#{$prefix}-scheme-main-ter) background-color: var(--#{$prefix}scheme-main-ter)
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
font-size: $size-small font-size: $size-small
padding: 1em padding: 1em
@@ -33,7 +33,7 @@
.bd-prev-next .bd-prev-next
align-items: flex-start align-items: flex-start
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
display: none display: none
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
@@ -45,7 +45,7 @@
width: 1.5rem width: 1.5rem
a a
&:hover &:hover
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
.bd-prev-next-bis .bd-prev-next-bis
border-top: 2px solid $background border-top: 2px solid $background
@@ -64,7 +64,7 @@
.bd-header .bd-header
margin-bottom: $main-spacing margin-bottom: $main-spacing
.subtitle .subtitle
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
strong strong
color: currentColor color: currentColor
#meta #meta
@@ -87,12 +87,12 @@
overflow: visible overflow: visible
ul, ul,
a a
border-bottom-color: var(--#{$prefix}-scheme-main-ter) border-bottom-color: var(--#{$prefix}scheme-main-ter)
border-bottom-width: 2px border-bottom-width: 2px
a a
margin-bottom: -2px margin-bottom: -2px
li:not(.is-active) a:hover li:not(.is-active) a:hover
border-bottom-color: var(--#{$prefix}-border) border-bottom-color: var(--#{$prefix}border)
ul ul
flex-wrap: wrap flex-wrap: wrap
max-width: 100% max-width: 100%
@@ -109,7 +109,7 @@
.bd-side, .bd-side,
.bd-side-background .bd-side-background
background-color: var(--#{$prefix}-scheme-main-bis) background-color: var(--#{$prefix}scheme-main-bis)
.bd-side .bd-side
position: relative position: relative
@@ -128,19 +128,19 @@
margin-bottom: 0.5em margin-bottom: 0.5em
&.is-past &.is-past
a a
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
&.is-current &.is-current
a a
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
a a
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
&:hover &:hover
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
.bd-category .bd-category
a a
&:hover &:hover
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
&:not(:last-child) &:not(:last-child)
margin-bottom: 0.5rem margin-bottom: 0.5rem
&.is-active &.is-active
@@ -156,7 +156,7 @@
.bd-category-toggle .bd-category-toggle
+overlay +overlay
align-items: center align-items: center
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
display: flex display: flex
justify-content: flex-end justify-content: flex-end
.icon .icon
@@ -174,10 +174,10 @@
vertical-align: text-bottom vertical-align: text-bottom
.bd-category-name .bd-category-name
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
position: relative position: relative
&.is-active &.is-active
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
.bd-mini-tag .bd-mini-tag
margin-left: 0.5em margin-left: 0.5em
@@ -201,7 +201,7 @@
top: 0 top: 0
.bd-anchors-title .bd-anchors-title
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
font-size: 0.875rem font-size: 0.875rem
font-weight: $weight-semibold font-weight: $weight-semibold
margin-bottom: 0.5rem margin-bottom: 0.5rem
@@ -212,7 +212,7 @@
&:last-child &:last-child
margin-top: 1em margin-top: 1em
a a
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
+touch +touch
.bd-lead, .bd-lead,
@@ -229,7 +229,7 @@
.bd-duo .bd-duo
display: flex display: flex
.bd-lead .bd-lead
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
overflow: hidden overflow: hidden
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1

4
docs/_sass/native.sass
View File

@@ -30,7 +30,7 @@
text-decoration: none text-decoration: none
&:hover &:hover
.native-cta .native-cta
box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}-scheme-invert), 0.1) box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}scheme-invert), 0.1)
transform: translateY(-0.25rem) transform: translateY(-0.25rem)
.native-img .native-img
@@ -62,7 +62,7 @@
.native-cta .native-cta
border: none border: none
box-shadow: 0 0.5rem 1rem 0 rgba(var(--#{$prefix}-scheme-invert), 0.2) box-shadow: 0 0.5rem 1rem 0 rgba(var(--#{$prefix}scheme-invert), 0.2)
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
font-weight: $weight-semibold font-weight: $weight-semibold

12
docs/_sass/patreon.sass
View File

@@ -4,7 +4,7 @@
.bd-side-sponsor-label, .bd-side-sponsor-label,
.bd-banner-label .bd-banner-label
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
font-size: 0.75rem font-size: 0.75rem
margin-bottom: 0.75rem margin-bottom: 0.75rem
@@ -31,17 +31,17 @@
margin-bottom: 0.25em margin-bottom: 0.25em
&.is-patreon &.is-patreon
background-color: $patreon-blue background-color: $patreon-blue
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
// &.is-fortyfour // &.is-fortyfour
// background-color: var(--#{$prefix}-scheme-main) // background-color: var(--#{$prefix}scheme-main)
// border: 2px solid $background // border: 2px solid $background
.button .button
transform-origin: center transform-origin: center
transition-duration: $speed transition-duration: $speed
transition-property: transform transition-property: transform
&:hover &:hover
border-color: var(--#{$prefix}-link) border-color: var(--#{$prefix}link)
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
.bd-banner-title .bd-banner-title
color: currentColor color: currentColor
.button .button
@@ -55,7 +55,7 @@
opacity: 0.5 opacity: 0.5
.bd-banner-title .bd-banner-title
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
font-size: 1.25em font-size: 1.25em
font-weight: $weight-semibold font-weight: $weight-semibold
line-height: 1.25 line-height: 1.25

28
docs/_sass/specific.sass
View File

@@ -58,7 +58,7 @@
.bd-link .bd-link
border-radius: $radius-large border-radius: $radius-large
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
display: block display: block
font-size: $size-5 font-size: $size-5
padding: 1rem 3rem 1.5rem 5rem padding: 1rem 3rem 1.5rem 5rem
@@ -68,7 +68,7 @@
strong strong
font-weight: $weight-semibold font-weight: $weight-semibold
&:hover &:hover
background-color: var(--#{$prefix}-scheme-main-bis) background-color: var(--#{$prefix}scheme-main-bis)
.bd-link-surtitle .bd-link-surtitle
float: right float: right
@@ -91,7 +91,7 @@
min-width: 1.5em min-width: 1.5em
.bd-link-counter .bd-link-counter
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
display: block display: block
counter-increment: bd-links counter-increment: bd-links
font-weight: $weight-normal font-weight: $weight-normal
@@ -123,7 +123,7 @@
width: 50% width: 50%
.bd-link-name .bd-link-name
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
font-size: $size-4 font-size: $size-4
font-weight: $weight-semibold font-weight: $weight-semibold
@@ -139,11 +139,11 @@
min-width: calc(33.3333% - 3rem) min-width: calc(33.3333% - 3rem)
.bd-doc-title .bd-doc-title
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
a a
color: currentColor color: currentColor
&:hover &:hover
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
&:not(:last-child) &:not(:last-child)
margin-bottom: 0.75rem margin-bottom: 0.75rem
@@ -227,15 +227,15 @@
background-color: darken($rss, 10%) background-color: darken($rss, 10%)
.bd-view-all-versions .bd-view-all-versions
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
&:hover &:hover
text-decoration: underline text-decoration: underline
.bd-feature-title .bd-feature-title
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
a a
border-bottom: 1px solid transparent border-bottom: 1px solid transparent
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
&:hover &:hover
border-bottom-color: $primary border-bottom-color: $primary
@@ -273,14 +273,14 @@
font-size: 1.25em font-size: 1.25em
vertical-align: middle vertical-align: middle
$notification-background-color: var(--#{$prefix}-background) !default $notification-background-color: var(--#{$prefix}background) !default
$notification-radius: $radius !default $notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
.bd-notification .bd-notification
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
border-radius: $radius border-radius: $radius
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
font-weight: $weight-semibold font-weight: $weight-semibold
padding: 1.25rem 0 padding: 1.25rem 0
position: relative position: relative
@@ -292,9 +292,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
color: currentColor color: currentColor
code, code,
pre pre
background-color: rgba(var(--#{$prefix}-scheme-invert), 0.2) background-color: rgba(var(--#{$prefix}scheme-invert), 0.2)
border-radius: $radius border-radius: $radius
color: var(--#{$prefix}-scheme-main) color: var(--#{$prefix}scheme-main)
pre code pre code
background-color: transparent background-color: transparent
// Colors // Colors

10
docs/_sass/sponsors.sass
View File

@@ -29,13 +29,13 @@
min-height: 80px min-height: 80px
text-align: center text-align: center
&.is-text &.is-text
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
font-size: 0.75em font-size: 0.75em
line-height: 1.25 line-height: 1.25
min-height: 0 min-height: 0
.bd-partnrs .bd-partnrs
background-color: var(--#{$prefix}-scheme-main-bis) background-color: var(--#{$prefix}scheme-main-bis)
#carbonads #carbonads
.carbon-text .carbon-text
padding-bottom: 0 padding-bottom: 0
@@ -43,7 +43,7 @@
display: none display: none
.bd-partner-title .bd-partner-title
color: var(--#{$prefix}-border-hover) color: var(--#{$prefix}border-hover)
font-size: 0.875rem font-size: 0.875rem
margin-bottom: 1rem margin-bottom: 1rem
@@ -57,11 +57,11 @@
.bd-minis-link .bd-minis-link
@extend %center @extend %center
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
.icon .icon
margin-right: 0.25em margin-right: 0.25em
strong strong
color: var(--#{$prefix}-text-light) color: var(--#{$prefix}text-light)
margin-left: 0.25em margin-left: 0.25em
.bd-minis-list .bd-minis-list

12
docs/_sass/twitter.sass
View File

@@ -1,14 +1,14 @@
// $tw-black: #1c2022 // $tw-black: #1c2022
$tw-black: var(--#{$prefix}-text-strong) $tw-black: var(--#{$prefix}text-strong)
$tw-blue: #2b7bb9 $tw-blue: #2b7bb9
$tw-grey: #697882 $tw-grey: #697882
$tw-border: #e1e8ed $tw-border: #e1e8ed
.bd-tws-home .bd-tws-home
background-color: var(--#{$prefix}-scheme-main-bis) background-color: var(--#{$prefix}scheme-main-bis)
.bd-tw .bd-tw
background-color: var(--#{$prefix}-scheme-main-bis) background-color: var(--#{$prefix}scheme-main-bis)
border-radius: $radius-large border-radius: $radius-large
color: $tw-grey color: $tw-grey
flex-shrink: 0 flex-shrink: 0
@@ -18,7 +18,7 @@ $tw-border: #e1e8ed
padding: 20px padding: 20px
text-align: left text-align: left
&.bd-is-white &.bd-is-white
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
.bd-tw-header .bd-tw-header
align-items: stretch align-items: stretch
@@ -45,7 +45,7 @@ $tw-border: #e1e8ed
width: 36px width: 36px
.bd-tw-fullname .bd-tw-fullname
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
display: block display: block
font-size: 16px font-size: 16px
font-weight: 700 font-weight: 700
@@ -163,7 +163,7 @@ $tw-border: #e1e8ed
min-height: 632px min-height: 632px
.twitter-tweet:not(.twitter-tweet-rendered) .twitter-tweet:not(.twitter-tweet-rendered)
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
border: 1px solid $tw-border border: 1px solid $tw-border
border-radius: 5px border-radius: 5px
color: $tw-grey color: $tw-grey

80
docs/bulma-cssvar.sass
View File

@@ -2,9 +2,9 @@ $prefix: "bulma-"
@function findCSSVarColorInvert($color) @function findCSSVarColorInvert($color)
@if colorLuminance($color) > 0.55 @if colorLuminance($color) > 0.55
@return var(--#{$prefix}-black-transparent) @return var(--#{$prefix}black-transparent)
@else @else
@return var(--#{$prefix}-white) @return var(--#{$prefix}white)
@function findCSSVarLightColor($color) @function findCSSVarLightColor($color)
@if type-of($color) == "color" @if type-of($color) == "color"
@@ -12,7 +12,7 @@ $prefix: "bulma-"
@if lightness($color) > 96% @if lightness($color) > 96%
$l: lightness($color) $l: lightness($color)
@return change-color($color, $lightness: $l) @return change-color($color, $lightness: $l)
@return var(--#{$prefix}-background) @return var(--#{$prefix}background)
@function findCSSVarDarkColor($color) @function findCSSVarDarkColor($color)
@if type-of($color) == "color" @if type-of($color) == "color"
@@ -21,7 +21,7 @@ $prefix: "bulma-"
$luminance-delta: 0.53 - $luminance $luminance-delta: 0.53 - $luminance
$target-l: round($base-l + $luminance-delta * 53) $target-l: round($base-l + $luminance-delta * 53)
@return change-color($color, $lightness: max($base-l, $target-l)) @return change-color($color, $lightness: max($base-l, $target-l))
@return var(--#{$prefix}-text-strong) @return var(--#{$prefix}text-strong)
$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker) $cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker)
@@ -55,42 +55,42 @@ $cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $
--#{$base}-dark-active: #{darken($color-dark, 10%)} --#{$base}-dark-active: #{darken($color-dark, 10%)}
\:root \:root
--#{$prefix}-white: #{$white} --#{$prefix}white: #{$white}
--#{$prefix}-black: #{$black} --#{$prefix}black: #{$black}
--#{$prefix}-black-transparent: #{rgba(#000, 0.7)} --#{$prefix}black-transparent: #{rgba(#000, 0.7)}
@each $name, $color in $cssvar-colors @each $name, $color in $cssvar-colors
+cssvar($name, $color) +cssvar($name, $color)
// $white: var(--#{$prefix}-white) // $white: var(--#{$prefix}white)
// $black: var(--#{$prefix}-black) // $black: var(--#{$prefix}black)
// $black-transparent: var(--#{$prefix}-black-transparent) // $black-transparent: var(--#{$prefix}black-transparent)
// $scheme-main: var(--#{$prefix}-scheme-main) // $scheme-main: var(--#{$prefix}scheme-main)
// $scheme-main-bis: var(--#{$prefix}-scheme-main-bis) // $scheme-main-bis: var(--#{$prefix}scheme-main-bis)
// $scheme-main-ter: var(--#{$prefix}-scheme-main-ter) // $scheme-main-ter: var(--#{$prefix}scheme-main-ter)
// $scheme-invert: var(--#{$prefix}-scheme-invert) // $scheme-invert: var(--#{$prefix}scheme-invert)
// $scheme-invert-bis: var(--#{$prefix}-scheme-invert-bis) // $scheme-invert-bis: var(--#{$prefix}scheme-invert-bis)
// $scheme-invert-ter: var(--#{$prefix}-scheme-invert-ter) // $scheme-invert-ter: var(--#{$prefix}scheme-invert-ter)
// $background: var(--#{$prefix}-background) // $background: var(--#{$prefix}background)
// $border: var(--#{$prefix}-border) // $border: var(--#{$prefix}border)
// $border-hover: var(--#{$prefix}-border-hover) // $border-hover: var(--#{$prefix}border-hover)
// $border-light: var(--#{$prefix}-border-light) // $border-light: var(--#{$prefix}border-light)
// $border-light-hover: var(--#{$prefix}-border-light-hover) // $border-light-hover: var(--#{$prefix}border-light-hover)
// $text: var(--#{$prefix}-text) // $text: var(--#{$prefix}text)
// $text-invert: var(--#{$prefix}-text-invert) // $text-invert: var(--#{$prefix}text-invert)
// $text-light: var(--#{$prefix}-text-light) // $text-light: var(--#{$prefix}text-light)
// $text-strong: var(--#{$prefix}-text-strong) // $text-strong: var(--#{$prefix}text-strong)
// $code: var(--#{$prefix}-code) // $code: var(--#{$prefix}code)
// $code-background: var(--#{$prefix}-code-background) // $code-background: var(--#{$prefix}code-background)
// $pre: var(--#{$prefix}-pre) // $pre: var(--#{$prefix}pre)
// $pre-background: var(--#{$prefix}-pre-background) // $pre-background: var(--#{$prefix}pre-background)
// $link: var(--#{$prefix}-link) // $link: var(--#{$prefix}link)
// $link-invert: var(--#{$prefix}-link-invert) // $link-invert: var(--#{$prefix}link-invert)
// $link-light: var(--#{$prefix}-link-light) // $link-light: var(--#{$prefix}link-light)
// $link-dark: var(--#{$prefix}-link-dark) // $link-dark: var(--#{$prefix}link-dark)
// $link-visited: var(--#{$prefix}-link-visited) // $link-visited: var(--#{$prefix}link-visited)
// $link-hover: var(--#{$prefix}-link-hover) // $link-hover: var(--#{$prefix}link-hover)
// $link-hover-border: var(--#{$prefix}-link-hover-border) // $link-hover-border: var(--#{$prefix}link-hover-border)
// $link-focus: var(--#{$prefix}-link-focus) // $link-focus: var(--#{$prefix}link-focus)
// $link-focus-border: var(--#{$prefix}-link-focus-border) // $link-focus-border: var(--#{$prefix}link-focus-border)
// $link-active: var(--#{$prefix}-link-active) // $link-active: var(--#{$prefix}link-active)
// $link-active-border: var(--#{$prefix}-link-active-border) // $link-active-border: var(--#{$prefix}link-active-border)

140
docs/bulma-cssvar.scss
View File

@@ -2,9 +2,9 @@ $prefix: "bulma-";
@function findCSSVarColorInvert($color) { @function findCSSVarColorInvert($color) {
@if (colorLuminance($color) > 0.55) { @if (colorLuminance($color) > 0.55) {
@return var(--#{$prefix}-black-transparent); @return var(--#{$prefix}black-transparent);
} @else { } @else {
@return var(--#{$prefix}-white); @return var(--#{$prefix}white);
} }
} }
@@ -16,7 +16,7 @@ $prefix: "bulma-";
} }
@return change-color($color, $lightness: $l); @return change-color($color, $lightness: $l);
} }
@return var(--#{$prefix}-background); @return var(--#{$prefix}background);
} }
@function findCSSVarDarkColor($color) { @function findCSSVarDarkColor($color) {
@@ -27,7 +27,7 @@ $prefix: "bulma-";
$target-l: round($base-l + ($luminance-delta * 53)); $target-l: round($base-l + ($luminance-delta * 53));
@return change-color($color, $lightness: max($base-l, $target-l)); @return change-color($color, $lightness: max($base-l, $target-l));
} }
@return var(--#{$prefix}-text-strong); @return var(--#{$prefix}text-strong);
} }
$cssvar-colors: ( $cssvar-colors: (
@@ -78,78 +78,78 @@ $cssvar-colors: (
} }
:root { :root {
--#{$prefix}-white: #{$white}; --#{$prefix}white: #{$white};
--#{$prefix}-black: #{$black}; --#{$prefix}black: #{$black};
--#{$prefix}-black-transparent: #{rgba(#000, 0.7)}; --#{$prefix}black-transparent: #{rgba(#000, 0.7)};
--#{$prefix}-scheme-main: #{$white}; --#{$prefix}scheme-main: #{$white};
--#{$prefix}-scheme-main-bis: #{$white-bis}; --#{$prefix}scheme-main-bis: #{$white-bis};
--#{$prefix}-scheme-main-ter: #{$white-ter}; --#{$prefix}scheme-main-ter: #{$white-ter};
--#{$prefix}-scheme-invert: #{$black}; --#{$prefix}scheme-invert: #{$black};
--#{$prefix}-scheme-invert-bis: #{$black-bis}; --#{$prefix}scheme-invert-bis: #{$black-bis};
--#{$prefix}-scheme-invert-ter: #{$black-ter}; --#{$prefix}scheme-invert-ter: #{$black-ter};
--#{$prefix}-background: #{$white-ter}; --#{$prefix}background: #{$white-ter};
--#{$prefix}-border: #{$grey-lighter}; --#{$prefix}border: #{$grey-lighter};
--#{$prefix}-border-hover: #{$grey-light}; --#{$prefix}border-hover: #{$grey-light};
--#{$prefix}-border-light: #{$grey-lightest}; --#{$prefix}border-light: #{$grey-lightest};
--#{$prefix}-border-light-hover: #{$grey-light}; --#{$prefix}border-light-hover: #{$grey-light};
--#{$prefix}-text: #{$grey-dark}; --#{$prefix}text: #{$grey-dark};
--#{$prefix}-text-invert: #{findCSSVarColorInvert($text)}; --#{$prefix}text-invert: #{findCSSVarColorInvert($text)};
--#{$prefix}-text-light: #{$grey}; --#{$prefix}text-light: #{$grey};
--#{$prefix}-text-strong: #{$grey-darker}; --#{$prefix}text-strong: #{$grey-darker};
--#{$prefix}-code: #{$red}; --#{$prefix}code: #{$red};
--#{$prefix}-code-background: #{$background}; --#{$prefix}code-background: #{$background};
--#{$prefix}-pre: #{$text}; --#{$prefix}pre: #{$text};
--#{$prefix}-pre-background: #{$background}; --#{$prefix}pre-background: #{$background};
--#{$prefix}-link: #{$blue}; --#{$prefix}link: #{$blue};
--#{$prefix}-link-invert: #{findCSSVarColorInvert($link)}; --#{$prefix}link-invert: #{findCSSVarColorInvert($link)};
--#{$prefix}-link-light: #{findCSSVarLightColor($link)}; --#{$prefix}link-light: #{findCSSVarLightColor($link)};
--#{$prefix}-link-dark: #{findCSSVarDarkColor($link)}; --#{$prefix}link-dark: #{findCSSVarDarkColor($link)};
--#{$prefix}-link-visited: #{$purple}; --#{$prefix}link-visited: #{$purple};
--#{$prefix}-link-hover: #{$grey-darker}; --#{$prefix}link-hover: #{$grey-darker};
--#{$prefix}-link-hover-border: #{$grey-light}; --#{$prefix}link-hover-border: #{$grey-light};
--#{$prefix}-link-focus: #{$grey-darker}; --#{$prefix}link-focus: #{$grey-darker};
--#{$prefix}-link-focus-border: #{$blue}; --#{$prefix}link-focus-border: #{$blue};
--#{$prefix}-link-active: #{$grey-darker}; --#{$prefix}link-active: #{$grey-darker};
--#{$prefix}-link-active-border: #{$grey-dark}; --#{$prefix}link-active-border: #{$grey-dark};
@each $name, $color in $cssvar-colors { @each $name, $color in $cssvar-colors {
@include cssvar($name, $color); @include cssvar($name, $color);
} }
} }
$white: var(--#{$prefix}-white); $white: var(--#{$prefix}white);
$black: var(--#{$prefix}-black); $black: var(--#{$prefix}black);
$black-transparent: var(--#{$prefix}-black-transparent); $black-transparent: var(--#{$prefix}black-transparent);
$scheme-main: var(--#{$prefix}-scheme-main); $scheme-main: var(--#{$prefix}scheme-main);
$scheme-main-bis: var(--#{$prefix}-scheme-main-bis); $scheme-main-bis: var(--#{$prefix}scheme-main-bis);
$scheme-main-ter: var(--#{$prefix}-scheme-main-ter); $scheme-main-ter: var(--#{$prefix}scheme-main-ter);
$scheme-invert: var(--#{$prefix}-scheme-invert); $scheme-invert: var(--#{$prefix}scheme-invert);
$scheme-invert-bis: var(--#{$prefix}-scheme-invert-bis); $scheme-invert-bis: var(--#{$prefix}scheme-invert-bis);
$scheme-invert-ter: var(--#{$prefix}-scheme-invert-ter); $scheme-invert-ter: var(--#{$prefix}scheme-invert-ter);
$background: var(--#{$prefix}-background); $background: var(--#{$prefix}background);
$border: var(--#{$prefix}-border); $border: var(--#{$prefix}border);
$border-hover: var(--#{$prefix}-border-hover); $border-hover: var(--#{$prefix}border-hover);
$border-light: var(--#{$prefix}-border-light); $border-light: var(--#{$prefix}border-light);
$border-light-hover: var(--#{$prefix}-border-light-hover); $border-light-hover: var(--#{$prefix}border-light-hover);
$text: var(--#{$prefix}-text); $text: var(--#{$prefix}text);
$text-invert: var(--#{$prefix}-text-invert); $text-invert: var(--#{$prefix}text-invert);
$text-light: var(--#{$prefix}-text-light); $text-light: var(--#{$prefix}text-light);
$text-strong: var(--#{$prefix}-text-strong); $text-strong: var(--#{$prefix}text-strong);
$code: var(--#{$prefix}-code); $code: var(--#{$prefix}code);
$code-background: var(--#{$prefix}-code-background); $code-background: var(--#{$prefix}code-background);
$pre: var(--#{$prefix}-pre); $pre: var(--#{$prefix}pre);
$pre-background: var(--#{$prefix}-pre-background); $pre-background: var(--#{$prefix}pre-background);
$link: var(--#{$prefix}-link); $link: var(--#{$prefix}link);
$link-invert: var(--#{$prefix}-link-invert); $link-invert: var(--#{$prefix}link-invert);
$link-light: var(--#{$prefix}-link-light); $link-light: var(--#{$prefix}link-light);
$link-dark: var(--#{$prefix}-link-dark); $link-dark: var(--#{$prefix}link-dark);
$link-visited: var(--#{$prefix}-link-visited); $link-visited: var(--#{$prefix}link-visited);
$link-hover: var(--#{$prefix}-link-hover); $link-hover: var(--#{$prefix}link-hover);
$link-hover-border: var(--#{$prefix}-link-hover-border); $link-hover-border: var(--#{$prefix}link-hover-border);
$link-focus: var(--#{$prefix}-link-focus); $link-focus: var(--#{$prefix}link-focus);
$link-focus-border: var(--#{$prefix}-link-focus-border); $link-focus-border: var(--#{$prefix}link-focus-border);
$link-active: var(--#{$prefix}-link-active); $link-active: var(--#{$prefix}link-active);
$link-active-border: var(--#{$prefix}-link-active-border); $link-active-border: var(--#{$prefix}link-active-border);
html { html {
background-color: $scheme-main; background-color: $scheme-main;

390
docs/bulma-dark.sass
View File

@@ -1,6 +1,5 @@
@import "../sass/utilities/initial-variables.sass" @import "../sass/utilities/initial-variables.sass"
@media (prefers-color-scheme: light) @media (prefers-color-scheme: light)
.bd-scheme-dark .bd-scheme-dark
display: none display: none
@@ -14,7 +13,7 @@
$scheme-invert-bis: $white-bis $scheme-invert-bis: $white-bis
$scheme-invert-ter: $white-ter $scheme-invert-ter: $white-ter
$background: $black-ter $background: $black-ter
$border: lime $border: $grey-darker
$border-hover: $grey-dark $border-hover: $grey-dark
$border-light: $grey-darker $border-light: $grey-darker
$border-light-hover: $grey-dark $border-light-hover: $grey-dark
@@ -23,6 +22,11 @@
$text-invert: $grey-darker $text-invert: $grey-darker
$text-light: $grey $text-light: $grey
$text-strong: $white $text-strong: $white
// Code colors
$code: $red
$code-background: $background
$pre: $text
$pre-background: $background
// Link colors // Link colors
$link-hover: $white $link-hover: $white
$link-hover-border: $grey-dark $link-hover-border: $grey-dark
@@ -33,82 +37,364 @@
.bd-scheme-light .bd-scheme-light
display: none display: none
\:root \:root
--#{$prefix}-scheme-main: #{$scheme-main} --#{$prefix}scheme-main: #{$scheme-main}
--#{$prefix}-scheme-main-bis: #{$scheme-main-bis} --#{$prefix}scheme-main-bis: #{$scheme-main-bis}
--#{$prefix}-scheme-main-ter: #{$scheme-main-ter} --#{$prefix}scheme-main-ter: #{$scheme-main-ter}
--#{$prefix}-scheme-invert: #{$scheme-invert} --#{$prefix}scheme-invert: #{$scheme-invert}
--#{$prefix}-scheme-invert-bis: #{$scheme-invert-bis} --#{$prefix}scheme-invert-bis: #{$scheme-invert-bis}
--#{$prefix}-scheme-invert-ter: #{$scheme-invert-ter} --#{$prefix}scheme-invert-ter: #{$scheme-invert-ter}
--#{$prefix}-background: #{$background} --#{$prefix}background: #{$background}
--#{$prefix}-border: #{$border} --#{$prefix}border: #{$border}
--#{$prefix}-border-hover: #{$border-hover} --#{$prefix}border-hover: #{$border-hover}
--#{$prefix}-border-light: #{$border-light} --#{$prefix}border-light: #{$border-light}
--#{$prefix}-border-light-hover: #{$border-light-hover} --#{$prefix}border-light-hover: #{$border-light-hover}
--#{$prefix}-text: #{$text} --#{$prefix}text: #{$text}
--#{$prefix}-text-invert: #{$text-invert} --#{$prefix}text-invert: #{$text-invert}
--#{$prefix}-text-light: #{$text-light} --#{$prefix}text-light: #{$text-light}
--#{$prefix}-text-strong: #{$text-strong} --#{$prefix}text-strong: #{$text-strong}
--#{$prefix}-code: #{$code} --#{$prefix}code: #{$code}
--#{$prefix}-code-background: #{$code-background} --#{$prefix}code-background: #{$code-background}
--#{$prefix}-pre: #{$pre} --#{$prefix}pre: #{$pre}
--#{$prefix}-pre-background: #{$pre-background} --#{$prefix}pre-background: #{$pre-background}
--#{$prefix}-link: #{$link} --#{$prefix}link: #{$link}
--#{$prefix}-link-invert: #{$link-invert} --#{$prefix}link-invert: #{$link-invert}
--#{$prefix}-link-light: #{$link-light} --#{$prefix}link-light: #{$link-light}
--#{$prefix}-link-dark: #{$link-dark} --#{$prefix}link-dark: #{$link-dark}
--#{$prefix}-link-visited: #{$link-visited} --#{$prefix}link-visited: #{$link-visited}
--#{$prefix}-link-hover: #{$link-hover} --#{$prefix}link-hover: #{$link-hover}
--#{$prefix}-link-hover-border: #{$link-hover-border} --#{$prefix}link-hover-border: #{$link-hover-border}
--#{$prefix}-link-focus: #{$link-focus} --#{$prefix}link-focus: #{$link-focus}
--#{$prefix}-link-focus-border: #{$link-focus-border} --#{$prefix}link-focus-border: #{$link-focus-border}
--#{$prefix}-link-active: #{$link-active} --#{$prefix}link-active: #{$link-active}
--#{$prefix}-link-active-border: #{$link-active-border} --#{$prefix}link-active-border: #{$link-active-border}
.bd-navbar .bd-navbar
background-color: var(--#{$prefix}-scheme-main-bis) background-color: $scheme-main-bis
&.has-shadow &.has-shadow
box-shadow: none box-shadow: none
.navbar-burger
color: $text
.navbar-item,
.navbar-link
color: $text
a.navbar-item,
.navbar-link
&:focus,
&:focus-within,
&:hover,
&.is-active
background-color: $scheme-main-bis
color: $link
.navbar-divider
background-color: $background
+until($navbar-breakpoint)
.navbar-menu
background-color: $scheme-main
box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
+from($navbar-breakpoint)
.navbar-dropdown
background-color: $scheme-main-bis
border-top-color: $border
box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
a.navbar-item
&:focus,
&:hover
background-color: $background
color: $scheme-invert
&.is-active
background-color: $background
color: $white
a.navbar-item,
.navbar-link
&.is-active
color: $white
&.is-active:not(:focus)
background-color: $background
.navbar-item.has-dropdown
&:focus,
&:hover,
&.is-active
.navbar-link
background-color: $background
.card
background-color: $scheme-main-bis
box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
.card-header
box-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1)
.dropdown-content
background-color: $scheme-main-bis
box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
.media .media,
.media + .media
border-top-color: rgba($border, 0.5)
.pagination-previous,
.pagination-next,
.pagination-link
&:active
box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2)
.panel
background-color: $scheme-main-bis
box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
.box
box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
a.box
&:hover,
&:focus
box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link
&:active
box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
html html
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
body body
color: var(--#{$prefix}-text) color: var(--#{$prefix}text)
a a
color: var(--#{$prefix}-link) color: var(--#{$prefix}link)
&:hover &:hover
color: var(--#{$prefix}-link-hover) color: var(--#{$prefix}link-hover)
code code
background-color: var(--#{$prefix}-code-background) background-color: var(--#{$prefix}code-background)
color: var(--#{$prefix}-code) color: var(--#{$prefix}code)
hr hr
background-color: var(--#{$prefix}-background) background-color: var(--#{$prefix}background)
strong strong
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
pre pre
background-color: var(--#{$prefix}-pre-background) background-color: var(--#{$prefix}pre-background)
color: var(--#{$prefix}-pre) color: var(--#{$prefix}pre)
table table
th th
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
// Components
.breadcrumb
a
color: var(--#{$prefix}link)
&:hover
color: var(--#{$prefix}link-hover)
li
&.is-active
a
color: var(--#{$prefix}text-strong)
& + li::before
color: var(--#{$prefix}border-hover)
.card
// background-color: var(--#{$prefix}scheme-main)
color: var(--#{$prefix}text)
.card-header-title
color: var(--#{$prefix}text-strong)
.card-footer
border-top-color: var(--#{$prefix}border-light)
.card-footer-item
&:not(:last-child)
border-right-color: var(--#{$prefix}border-light)
.dropdown-content
// background-color: var(--#{$prefix}scheme-main)
.dropdown-item
color: var(--#{$prefix}text)
a.dropdown-item,
button.dropdown-item
&:hover
background-color: var(--#{$prefix}background)
color: var(--#{$prefix}scheme-invert)
&.is-active
background-color: var(--#{$prefix}link)
color: var(--#{$prefix}link-invert)
.dropdown-divider
background-color: var(--#{$prefix}border-light)
.menu-list
a
color: var(--#{$prefix}text)
&:hover
background-color: var(--#{$prefix}background)
color: var(--#{$prefix}text-strong)
&.is-active
background-color: var(--#{$prefix}link)
color: var(--#{$prefix}link-invert)
li
ul
border-left-color: var(--#{$prefix}border)
.menu-label
color: var(--#{$prefix}text-light)
// .message
// background-color: var(--#{$prefix}background)
// .message-header
// background-color: var(--#{$prefix}text)
// color: var(--#{$prefix}text-invert)
// .message-body
// border-color: var(--#{$prefix}border)
// color: var(--#{$prefix}text)
// code,
// pre
// background-color: var(--#{$prefix}scheme-main)
.modal-card-head,
.modal-card-foot
background-color: var(--#{$prefix}background)
.modal-card-head
border-bottom-color: var(--#{$prefix}border)
.modal-card-title
color: var(--#{$prefix}text-strong)
.modal-card-foot
border-top-color: var(--#{$prefix}border)
.modal-card-body
background-color: var(--#{$prefix}scheme-main)
// .navbar
// background-color: var(--#{$prefix}scheme-main)
// .navbar-burger
// color: var(--#{$prefix}text)
// .navbar-item,
// .navbar-link
// color: var(--#{$prefix}text)
// a.navbar-item,
// .navbar-link
// cursor: pointer
// &:focus,
// &:focus-within,
// &:hover,
// &.is-active
// background-color: var(--#{$prefix}scheme-main-bis)
// color: var(--#{$prefix}link)
.pagination-previous,
.pagination-next,
.pagination-link
border-color: var(--#{$prefix}border)
color: var(--#{$prefix}text-strong)
&:hover
border-color: var(--#{$prefix}link-hover-border)
color: var(--#{$prefix}link-hover)
&:focus
border-color: var(--#{$prefix}link-focus-border)
&[disabled]
background-color: var(--#{$prefix}border)
border-color: var(--#{$prefix}border)
color: var(--#{$prefix}text-light)
.pagination-link
&.is-current
background-color: var(--#{$prefix}link)
border-color: var(--#{$prefix}link)
color: var(--#{$prefix}link-invert)
.pagination-ellipsis
color: var(--#{$prefix}border-hover)
.panel-tabs,
.panel-block
&:not(:last-child)
border-bottom-color: var(--#{$prefix}border-light)
.panel-heading
background-color: var(--#{$prefix}border-light)
color: var(--#{$prefix}text-strong)
.panel-tabs
a
border-bottom-color: var(--#{$prefix}border)
&.is-active
border-bottom-color: var(--#{$prefix}link-active-border)
color: var(--#{$prefix}link-active)
.panel-list
a
color: var(--#{$prefix}text)
&:hover
color: var(--#{$prefix}link)
.panel-block
color: var(--#{$prefix}text-strong)
&.is-active
border-left-color: var(--#{$prefix}link)
color: var(--#{$prefix}link-active)
.panel-icon
color: var(--#{$prefix}link)
a.panel-block,
label.panel-block
&:hover
background-color: var(--#{$prefix}background)
.panel-icon
color: var(--#{$prefix}text-light)
.tabs
a
border-bottom-color: var(--#{$prefix}border)
color: var(--#{$prefix}text)
&:hover
border-bottom-color: var(--#{$prefix}text-strong)
color: var(--#{$prefix}text-strong)
li
&.is-active
a
border-bottom-color: var(--#{$prefix}link)
color: var(--#{$prefix}link)
ul
border-bottom-color: var(--#{$prefix}border)
&.is-boxed
a
&:hover
background-color: var(--#{$prefix}background)
border-bottom-color: var(--#{$prefix}border)
li
&.is-active
a
background-color: var(--#{$prefix}scheme-main)
border-color: var(--#{$prefix}border)
&.is-toggle
a
border-color: var(--#{$prefix}border)
&:hover
background-color: var(--#{$prefix}background)
border-color: var(--#{$prefix}border-hover)
li
&.is-active
a
background-color: var(--#{$prefix}link)
border-color: var(--#{$prefix}link)
color: var(--#{$prefix}link-invert)
// Elements
.box
background-color: var(--#{$prefix}scheme-main)
color: var(--#{$prefix}text)
.title .title
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
.subtitle .subtitle
color: var(--#{$prefix}-text) color: var(--#{$prefix}text)
strong strong
color: var(--#{$prefix}-text-strong) color: var(--#{$prefix}text-strong)
.footer .footer
background-color: var(--#{$prefix}-scheme-main-bis) background-color: var(--#{$prefix}scheme-main-bis)
.media .media,
.media + .media
border-top-color: rgba(var(--#{$prefix}-border), 0.5)

4
docs/bulma-docs.sass
View File

@@ -39,7 +39,7 @@ $sidebar-width: 10.5rem
// //
// 3. Assign CSS vars to elements/components // 3. Assign CSS vars to elements/components
// html // html
// background-color: var(--#{$prefix}-scheme-main) // background-color: var(--#{$prefix}scheme-main)
// //
%center %center
@@ -48,7 +48,7 @@ $sidebar-width: 10.5rem
justify-content: center justify-content: center
%bd-box %bd-box
background-color: var(--#{$prefix}-scheme-main) background-color: var(--#{$prefix}scheme-main)
border-radius: $radius-large border-radius: $radius-large
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05) box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
display: block display: block

689
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff