Compare commits
4 commits
main
...
docs-cssva
| Author | SHA1 | Date | |
|---|---|---|---|
|
1f693c0a10 | ||
|
|
9209d1fe42 | ||
|
|
6b09dcfcf0 | ||
|
|
867a306fc3 |
24 changed files with 1649 additions and 645 deletions
|
|
@ -2,7 +2,8 @@
|
|||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
<img class="bd-scheme-light" src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
<img class="bd-scheme-dark" src="{{ site.url }}/images/bulma-logo-light.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
|
||||
{% for link_id in site.data.links.navbar %}
|
||||
{% 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 }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ $book-beige: #FFEDD7
|
|||
|
||||
.bd-book-content
|
||||
@extend %bd-box
|
||||
box-shadow: 0 3rem 3rem -1rem rgba($scheme-invert, 0.2)
|
||||
box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}scheme-invert), 0.2)
|
||||
max-width: 520px
|
||||
padding: 3rem
|
||||
|
||||
|
|
@ -98,7 +98,7 @@ $book-beige: #FFEDD7
|
|||
|
||||
.bd-book-modal-background
|
||||
+overlay
|
||||
background-color: rgba($scheme-invert, 0.86)
|
||||
background-color: rgba(var(--#{$prefix}scheme-invert), 0.86)
|
||||
|
||||
.bd-book-modal
|
||||
.bd-book-modal-background,
|
||||
|
|
@ -153,7 +153,7 @@ $book-beige: #FFEDD7
|
|||
.bd-book-inline-cover
|
||||
display: none
|
||||
.bd-book-modal-column
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
position: relative
|
||||
&.bd-is-cover
|
||||
align-items: center
|
||||
|
|
|
|||
|
|
@ -70,11 +70,11 @@ $bootstrap-invert: #fff
|
|||
&:hover
|
||||
text-decoration: underline
|
||||
.bd-is-empty
|
||||
background-color: $background
|
||||
color: $text-light
|
||||
background-color: var(--#{$prefix}background)
|
||||
color: var(--#{$prefix}text-light)
|
||||
.bd-is-unique
|
||||
background-color: rgba($green, 0.25)
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
font-weight: $weight-bold
|
||||
|
||||
.bd-bootstrap-comparison-header
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
.default-ad
|
||||
background-color: rgba(black, 0.3)
|
||||
border-radius: 2px
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
display: inline-block
|
||||
font-size: 10px
|
||||
font-weight: bold
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
& > a
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)
|
||||
color: $text
|
||||
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)
|
||||
display: block
|
||||
line-height: 1.375
|
||||
margin-top: 15px
|
||||
|
|
@ -29,9 +29,9 @@
|
|||
position: relative
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px $link
|
||||
box-shadow: 0 2px 3px rgba(var(--#{$prefix}scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}link)
|
||||
&:active
|
||||
box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
|
||||
box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}link)
|
||||
span
|
||||
display: block
|
||||
.default-image
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
height: 40px
|
||||
width: 40px
|
||||
.default-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
display: inline
|
||||
font-weight: $weight-bold
|
||||
&::after
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.bd-callout
|
||||
+block
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}background)
|
||||
border-radius: $radius
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||
position: relative
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.bd-example,
|
||||
.bd-structure,
|
||||
.bd-snippet
|
||||
border: 2px solid $background
|
||||
border: 2px solid var(--#{$prefix}background)
|
||||
position: relative
|
||||
&::before
|
||||
background: $yellow
|
||||
|
|
@ -164,7 +164,7 @@ $structure-invert: $danger-invert
|
|||
position: relative
|
||||
&::before
|
||||
+overlay
|
||||
background: rgba($scheme-invert, 0.7)
|
||||
background: rgba(var(--#{$prefix}scheme-invert), 0.7)
|
||||
background: $background
|
||||
border: 1px solid $border
|
||||
content: ""
|
||||
|
|
@ -193,7 +193,7 @@ $structure-invert: $danger-invert
|
|||
.bd-expand
|
||||
background: none
|
||||
border: none
|
||||
color: $text
|
||||
color: var(--#{$prefix}text)
|
||||
cursor: pointer
|
||||
font-size: 0.625rem
|
||||
outline: none
|
||||
|
|
@ -213,20 +213,23 @@ $structure-invert: $danger-invert
|
|||
.bd-show
|
||||
+overlay
|
||||
align-items: center
|
||||
background-color: rgba($background, 0.7)
|
||||
background-color: var(--#{$prefix}background)
|
||||
border: none
|
||||
color: rgba(#000, 0.5)
|
||||
color: var(--#{$prefix}scheme-invert)
|
||||
cursor: pointer
|
||||
display: none
|
||||
font-size: $size-small
|
||||
justify-content: center
|
||||
opacity: 0.8
|
||||
width: 100%
|
||||
strong
|
||||
color: currentColor
|
||||
font-weight: $weight-semibold
|
||||
opacity: 1
|
||||
&:hover
|
||||
background-color: rgba($yellow, 0.8)
|
||||
color: rgba(#000, 0.7)
|
||||
opacity: 1
|
||||
+tablet
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.bd-expo
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
padding: 1.5rem
|
||||
|
||||
.bd-website
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
transition: opacity 200ms $easing
|
||||
|
||||
.bd-website-overlay
|
||||
background-color: $scheme-invert
|
||||
background-color: var(--#{$prefix}scheme-invert)
|
||||
opacity: 0
|
||||
transition: opacity 200ms $easing
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.bd-footer-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
font-size: 1.25rem
|
||||
line-height: 1.25
|
||||
margin-bottom: 0.5rem
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
font-weight: $weight-semibold
|
||||
|
||||
.bd-footer-subtitle
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
margin-top: -0.5rem
|
||||
transition-duration: $speed
|
||||
transition-property: color
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
width: 100%
|
||||
|
||||
.bd-footer-tsp
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
margin-top: 1.5rem
|
||||
|
||||
%bd-footer-box
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
.bd-footer-support
|
||||
@extend %bd-footer-box
|
||||
border-top: 2px solid $scheme-main-ter
|
||||
border-top: 2px solid var(--#{$prefix}scheme-main-ter)
|
||||
box-shadow: none
|
||||
padding: 3rem
|
||||
.bd-footer-title
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
padding: 0.75rem 1.5rem
|
||||
|
||||
.bd-footer-donation-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
margin-bottom: 0.5rem
|
||||
strong
|
||||
color: currentColor
|
||||
|
|
@ -103,11 +103,11 @@ $star-figure-height: 156px
|
|||
+tablet
|
||||
width: calc(33.3333% - 2rem)
|
||||
&:hover
|
||||
box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1)
|
||||
box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}scheme-invert), 0.1)
|
||||
transform: translateY(-0.5rem)
|
||||
.bd-footer-title,
|
||||
.bd-footer-subtitle
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
&.bd-is-expo,
|
||||
&.bd-is-love
|
||||
padding-bottom: $star-figure-height
|
||||
|
|
@ -144,10 +144,10 @@ $star-figure-height: 156px
|
|||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
|
||||
.bd-footer-link-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
font-size: 1.25rem
|
||||
font-weight: $weight-semibold
|
||||
&:not(:first-child)
|
||||
|
|
@ -158,7 +158,7 @@ $star-figure-height: 156px
|
|||
&.bd-is-more
|
||||
font-size: 0.875rem
|
||||
a:not(:hover)
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
&.bd-has-subtitle
|
||||
a
|
||||
align-items: center
|
||||
|
|
@ -174,7 +174,7 @@ $star-figure-height: 156px
|
|||
font-style: normal
|
||||
&:not(:hover)
|
||||
em
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
+mobile
|
||||
flex-wrap: wrap
|
||||
margin-top: 1rem
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@ svg
|
|||
strong
|
||||
color: currentColor
|
||||
a
|
||||
border-bottom: 1px solid rgba($scheme-main, 0.5)
|
||||
border-bottom: 1px solid rgba(var(--#{$prefix}scheme-main), 0.5)
|
||||
padding-bottom: 2px
|
||||
&:hover
|
||||
border-bottom-color: $scheme-main
|
||||
border-bottom-color: var(--#{$prefix}scheme-main)
|
||||
span
|
||||
margin: 0 0.25em
|
||||
opacity: 0.5
|
||||
|
|
@ -99,8 +99,8 @@ $carbon-poweredby-height: 20px
|
|||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
background-color: $scheme-main
|
||||
box-shadow: 0 0 0 $carbon-shadow-size $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}scheme-main)
|
||||
+tablet
|
||||
width: $carbon-width
|
||||
|
||||
|
|
@ -138,20 +138,20 @@ $carbon-poweredby-height: 20px
|
|||
width: $carbon-image-width
|
||||
&:hover
|
||||
& + .carbon-text
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
&:active
|
||||
opacity: 0.8
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
line-height: 20px
|
||||
min-height: $carbon-height
|
||||
padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
display: inline
|
||||
font-size: $size-small
|
||||
line-height: $carbon-poweredby-height
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
&:hover
|
||||
background: $github
|
||||
border-color: $github
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
|
||||
.bd-tw-button
|
||||
background-color: $twitter
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
border-color: transparent !important
|
||||
&:hover
|
||||
background-color: darken($twitter, 2.5%)
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: darken($twitter, 5%)
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
|
||||
#moreDropdown
|
||||
.navbar-item
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.highlight
|
||||
background-color: $pre-background
|
||||
background-color: var(--#{$prefix}pre-background)
|
||||
border-radius: $radius-large
|
||||
color: #586e75
|
||||
pre
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
&:hover
|
||||
color: $blue
|
||||
strong
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
.title
|
||||
strong
|
||||
color: $primary
|
||||
.subtitle
|
||||
color: $border-hover !important
|
||||
color: var(--#{$prefix}border-hover) !important
|
||||
strong
|
||||
color: currentColor
|
||||
&:not(:last-child)
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
margin-right: auto
|
||||
|
||||
.bd-index-custom-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
|
||||
.bd-index-custom-example
|
||||
padding: 1rem
|
||||
|
|
@ -77,28 +77,28 @@
|
|||
.button
|
||||
&.is-primary
|
||||
background-color: $mauve
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
&:hover
|
||||
background-color: darken($mauve, 2.5%)
|
||||
&:active
|
||||
background-color: darken($mauve, 5%)
|
||||
&.is-link
|
||||
background-color: $pink
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
&:hover
|
||||
background-color: darken($pink, 2.5%)
|
||||
&:active
|
||||
background-color: darken($pink, 5%)
|
||||
+selection
|
||||
background-color: $pink
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
|
||||
// Fullscreen
|
||||
|
||||
.bd-index-fullscreen
|
||||
.tabs
|
||||
a
|
||||
color: $border-hover !important
|
||||
color: var(--#{$prefix}border-hover) !important
|
||||
|
||||
// Columns
|
||||
|
||||
|
|
@ -161,13 +161,13 @@
|
|||
transition-duration: $speed * 2
|
||||
transition-property: color
|
||||
.subtitle
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
position: relative
|
||||
strong
|
||||
color: currentColor
|
||||
&::before
|
||||
+overlay
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
border-radius: $radius-large
|
||||
content: ""
|
||||
display: block
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
opacity: 1
|
||||
transform: scale(1)
|
||||
.subtitle
|
||||
color: $text
|
||||
color: var(--#{$prefix}text)
|
||||
&:nth-child(1):hover
|
||||
.title
|
||||
color: $orange
|
||||
|
|
@ -191,10 +191,10 @@
|
|||
color: $success
|
||||
&:nth-child(3):hover
|
||||
.title
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
&:nth-child(4):hover
|
||||
.title
|
||||
color: $scheme-invert
|
||||
color: var(--#{$prefix}scheme-invert)
|
||||
|
||||
.bd-focus-icon
|
||||
position: relative
|
||||
|
|
@ -292,7 +292,7 @@
|
|||
color: $black-ter
|
||||
&.is-success,
|
||||
&.is-error
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
pointer-events: none
|
||||
text-decoration: none
|
||||
&.is-success
|
||||
|
|
@ -301,10 +301,10 @@
|
|||
background-color: $red
|
||||
\::-moz-selection
|
||||
background: $yellow
|
||||
color: $scheme-invert-ter
|
||||
color: var(--#{$prefix}scheme-invert-ter)
|
||||
\::selection
|
||||
background: $yellow
|
||||
color: $scheme-invert-ter
|
||||
color: var(--#{$prefix}scheme-invert-ter)
|
||||
|
||||
.intro-buttons
|
||||
margin-top: 1.5rem
|
||||
|
|
@ -313,7 +313,7 @@
|
|||
padding-right: 1.375em
|
||||
|
||||
.intro-video
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 640px
|
||||
|
|
@ -384,12 +384,12 @@
|
|||
width: 100%
|
||||
|
||||
.intro-author
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
font-size: $size-small
|
||||
margin-top: 40px
|
||||
text-align: center
|
||||
a
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
span
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin: 0.25rem auto 0.25rem 0
|
||||
|
||||
.bd-klmn-gap
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}background)
|
||||
border-radius: $radius
|
||||
color: $red
|
||||
font-family: $family-monospace
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
white-space: nowrap
|
||||
&.bd-is-selected
|
||||
background-color: $green
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
|
||||
.bd-klmn-columns:last-child
|
||||
.bd-notification
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.bd-testimonials
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}background)
|
||||
|
||||
.bd-testimonial
|
||||
align-items: flex-start
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
justify-content: center
|
||||
|
||||
.bd-testimonial-tweet
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
|
||||
.bd-more-loves
|
||||
align-items: center
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
.hero.bd-is-love
|
||||
.title,
|
||||
.subtitle
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
|
||||
@keyframes rainbow
|
||||
0%
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
margin-left: 1.5rem
|
||||
|
||||
.bd-shoutout
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}background)
|
||||
padding: 2rem
|
||||
text-align: center
|
||||
&:not(:last-child)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.bd-figure
|
||||
+block
|
||||
align-items: center
|
||||
border: 2px solid $scheme-main-ter
|
||||
border: 2px solid var(--#{$prefix}scheme-main-ter)
|
||||
border-radius: $radius
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
margin: 1em
|
||||
figcaption
|
||||
align-self: stretch
|
||||
background-color: $scheme-main-ter
|
||||
color: $text-light
|
||||
background-color: var(--#{$prefix}scheme-main-ter)
|
||||
color: var(--#{$prefix}text-light)
|
||||
font-size: $size-small
|
||||
padding: 1em
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
.bd-prev-next
|
||||
align-items: flex-start
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
display: none
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
width: 1.5rem
|
||||
a
|
||||
&:hover
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}background)
|
||||
|
||||
.bd-prev-next-bis
|
||||
border-top: 2px solid $background
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
.bd-header
|
||||
margin-bottom: $main-spacing
|
||||
.subtitle
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
strong
|
||||
color: currentColor
|
||||
#meta
|
||||
|
|
@ -87,12 +87,12 @@
|
|||
overflow: visible
|
||||
ul,
|
||||
a
|
||||
border-bottom-color: $scheme-main-ter
|
||||
border-bottom-color: var(--#{$prefix}scheme-main-ter)
|
||||
border-bottom-width: 2px
|
||||
a
|
||||
margin-bottom: -2px
|
||||
li:not(.is-active) a:hover
|
||||
border-bottom-color: $border
|
||||
border-bottom-color: var(--#{$prefix}border)
|
||||
ul
|
||||
flex-wrap: wrap
|
||||
max-width: 100%
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
|
||||
.bd-side,
|
||||
.bd-side-background
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
|
||||
.bd-side
|
||||
position: relative
|
||||
|
|
@ -128,19 +128,19 @@
|
|||
margin-bottom: 0.5em
|
||||
&.is-past
|
||||
a
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
&.is-current
|
||||
a
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
a
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
|
||||
.bd-category
|
||||
a
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
&.is-active
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
.bd-category-toggle
|
||||
+overlay
|
||||
align-items: center
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
.icon
|
||||
|
|
@ -174,10 +174,10 @@
|
|||
vertical-align: text-bottom
|
||||
|
||||
.bd-category-name
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
position: relative
|
||||
&.is-active
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
.bd-mini-tag
|
||||
margin-left: 0.5em
|
||||
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
top: 0
|
||||
|
||||
.bd-anchors-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
font-size: 0.875rem
|
||||
font-weight: $weight-semibold
|
||||
margin-bottom: 0.5rem
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
&:last-child
|
||||
margin-top: 1em
|
||||
a
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
+touch
|
||||
.bd-lead,
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
.bd-duo
|
||||
display: flex
|
||||
.bd-lead
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
overflow: hidden
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
text-decoration: none
|
||||
&:hover
|
||||
.native-cta
|
||||
box-shadow: 0 1rem 2rem 0 rgba($scheme-invert, 0.1)
|
||||
box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}scheme-invert), 0.1)
|
||||
transform: translateY(-0.25rem)
|
||||
|
||||
.native-img
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.native-cta
|
||||
border: none
|
||||
box-shadow: 0 0.5rem 1rem 0 rgba($scheme-invert, 0.2)
|
||||
box-shadow: 0 0.5rem 1rem 0 rgba(var(--#{$prefix}scheme-invert), 0.2)
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
font-weight: $weight-semibold
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.bd-side-sponsor-label,
|
||||
.bd-banner-label
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
font-size: 0.75rem
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
|
|
@ -31,17 +31,17 @@
|
|||
margin-bottom: 0.25em
|
||||
&.is-patreon
|
||||
background-color: $patreon-blue
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
// &.is-fortyfour
|
||||
// background-color: $scheme-main
|
||||
// background-color: var(--#{$prefix}scheme-main)
|
||||
// border: 2px solid $background
|
||||
.button
|
||||
transform-origin: center
|
||||
transition-duration: $speed
|
||||
transition-property: transform
|
||||
&:hover
|
||||
border-color: $link
|
||||
color: $link
|
||||
border-color: var(--#{$prefix}link)
|
||||
color: var(--#{$prefix}link)
|
||||
.bd-banner-title
|
||||
color: currentColor
|
||||
.button
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
opacity: 0.5
|
||||
|
||||
.bd-banner-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
font-size: 1.25em
|
||||
font-weight: $weight-semibold
|
||||
line-height: 1.25
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
.bd-link
|
||||
border-radius: $radius-large
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
display: block
|
||||
font-size: $size-5
|
||||
padding: 1rem 3rem 1.5rem 5rem
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
strong
|
||||
font-weight: $weight-semibold
|
||||
&:hover
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
|
||||
.bd-link-surtitle
|
||||
float: right
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
min-width: 1.5em
|
||||
|
||||
.bd-link-counter
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
display: block
|
||||
counter-increment: bd-links
|
||||
font-weight: $weight-normal
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
width: 50%
|
||||
|
||||
.bd-link-name
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
font-size: $size-4
|
||||
font-weight: $weight-semibold
|
||||
|
||||
|
|
@ -139,11 +139,11 @@
|
|||
min-width: calc(33.3333% - 3rem)
|
||||
|
||||
.bd-doc-title
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link
|
||||
color: var(--#{$prefix}link)
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
|
|
@ -227,15 +227,15 @@
|
|||
background-color: darken($rss, 10%)
|
||||
|
||||
.bd-view-all-versions
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.bd-feature-title
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
a
|
||||
border-bottom: 1px solid transparent
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
&:hover
|
||||
border-bottom-color: $primary
|
||||
|
||||
|
|
@ -273,14 +273,14 @@
|
|||
font-size: 1.25em
|
||||
vertical-align: middle
|
||||
|
||||
$notification-background-color: $background !default
|
||||
$notification-background-color: var(--#{$prefix}background) !default
|
||||
$notification-radius: $radius !default
|
||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
|
||||
.bd-notification
|
||||
background-color: $background
|
||||
background-color: var(--#{$prefix}background)
|
||||
border-radius: $radius
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
font-weight: $weight-semibold
|
||||
padding: 1.25rem 0
|
||||
position: relative
|
||||
|
|
@ -292,9 +292,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
|||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background-color: rgba($scheme-invert, 0.2)
|
||||
background-color: rgba(var(--#{$prefix}scheme-invert), 0.2)
|
||||
border-radius: $radius
|
||||
color: $scheme-main
|
||||
color: var(--#{$prefix}scheme-main)
|
||||
pre code
|
||||
background-color: transparent
|
||||
// Colors
|
||||
|
|
|
|||
|
|
@ -29,13 +29,13 @@
|
|||
min-height: 80px
|
||||
text-align: center
|
||||
&.is-text
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
font-size: 0.75em
|
||||
line-height: 1.25
|
||||
min-height: 0
|
||||
|
||||
.bd-partnrs
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
#carbonads
|
||||
.carbon-text
|
||||
padding-bottom: 0
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
display: none
|
||||
|
||||
.bd-partner-title
|
||||
color: $border-hover
|
||||
color: var(--#{$prefix}border-hover)
|
||||
font-size: 0.875rem
|
||||
margin-bottom: 1rem
|
||||
|
||||
|
|
@ -57,11 +57,11 @@
|
|||
|
||||
.bd-minis-link
|
||||
@extend %center
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
.icon
|
||||
margin-right: 0.25em
|
||||
strong
|
||||
color: $text-light
|
||||
color: var(--#{$prefix}text-light)
|
||||
margin-left: 0.25em
|
||||
|
||||
.bd-minis-list
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
// $tw-black: #1c2022
|
||||
$tw-black: $text-strong
|
||||
$tw-black: var(--#{$prefix}text-strong)
|
||||
$tw-blue: #2b7bb9
|
||||
$tw-grey: #697882
|
||||
$tw-border: #e1e8ed
|
||||
|
||||
.bd-tws-home
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
|
||||
.bd-tw
|
||||
background-color: $scheme-main-bis
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
border-radius: $radius-large
|
||||
color: $tw-grey
|
||||
flex-shrink: 0
|
||||
|
|
@ -18,7 +18,7 @@ $tw-border: #e1e8ed
|
|||
padding: 20px
|
||||
text-align: left
|
||||
&.bd-is-white
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
|
||||
.bd-tw-header
|
||||
align-items: stretch
|
||||
|
|
@ -45,7 +45,7 @@ $tw-border: #e1e8ed
|
|||
width: 36px
|
||||
|
||||
.bd-tw-fullname
|
||||
color: $text-strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
display: block
|
||||
font-size: 16px
|
||||
font-weight: 700
|
||||
|
|
@ -163,7 +163,7 @@ $tw-border: #e1e8ed
|
|||
min-height: 632px
|
||||
|
||||
.twitter-tweet:not(.twitter-tweet-rendered)
|
||||
background-color: $scheme-main
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
border: 1px solid $tw-border
|
||||
border-radius: 5px
|
||||
color: $tw-grey
|
||||
|
|
|
|||
96
docs/bulma-cssvar.sass
Normal file
96
docs/bulma-cssvar.sass
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
$prefix: "bulma-"
|
||||
|
||||
@function findCSSVarColorInvert($color)
|
||||
@if colorLuminance($color) > 0.55
|
||||
@return var(--#{$prefix}black-transparent)
|
||||
@else
|
||||
@return var(--#{$prefix}white)
|
||||
|
||||
@function findCSSVarLightColor($color)
|
||||
@if type-of($color) == "color"
|
||||
$l: 96%
|
||||
@if lightness($color) > 96%
|
||||
$l: lightness($color)
|
||||
@return change-color($color, $lightness: $l)
|
||||
@return var(--#{$prefix}background)
|
||||
|
||||
@function findCSSVarDarkColor($color)
|
||||
@if type-of($color) == "color"
|
||||
$base-l: 29%
|
||||
$luminance: colorLuminance($color)
|
||||
$luminance-delta: 0.53 - $luminance
|
||||
$target-l: round($base-l + $luminance-delta * 53)
|
||||
@return change-color($color, $lightness: max($base-l, $target-l))
|
||||
@return var(--#{$prefix}text-strong)
|
||||
|
||||
$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger)
|
||||
|
||||
@function getCssVariable($color, $name)
|
||||
$hue: hue($color)
|
||||
$saturation: saturation($color)
|
||||
$lightness: lightness($color)
|
||||
$alpha: alpha($color)
|
||||
@return $hue, $saturation, $lightness
|
||||
|
||||
=cssvar($name, $color)
|
||||
$hue: hue($color)
|
||||
$saturation: saturation($color)
|
||||
$lightness: lightness($color)
|
||||
$base: "#{$prefix}#{$name}"
|
||||
--#{$base}-h: #{$hue}
|
||||
--#{$base}-s: #{$saturation}
|
||||
--#{$base}-l: #{$lightness}
|
||||
--#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
|
||||
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
|
||||
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
|
||||
$color-invert: findCSSVarColorInvert($color)
|
||||
--#{$base}-invert: #{$color-invert}
|
||||
$color-light: findCSSVarLightColor($color)
|
||||
--#{$base}-light: #{$color-light}
|
||||
--#{$base}-light-hover: #{darken($color-light, 5%)}
|
||||
--#{$base}-light-active: #{darken($color-light, 10%)}
|
||||
$color-dark: findCSSVarDarkColor($color)
|
||||
--#{$base}-dark: #{$color-dark}
|
||||
--#{$base}-dark-hover: #{darken($color-dark, 5%)}
|
||||
--#{$base}-dark-active: #{darken($color-dark, 10%)}
|
||||
|
||||
\:root
|
||||
--#{$prefix}white: #{$white}
|
||||
--#{$prefix}black: #{$black}
|
||||
--#{$prefix}black-transparent: #{rgba(#000, 0.7)}
|
||||
@each $name, $color in $cssvar-colors
|
||||
+cssvar($name, $color)
|
||||
|
||||
// $white: var(--#{$prefix}white)
|
||||
// $black: var(--#{$prefix}black)
|
||||
// $black-transparent: var(--#{$prefix}black-transparent)
|
||||
// $scheme-main: var(--#{$prefix}scheme-main)
|
||||
// $scheme-main-bis: var(--#{$prefix}scheme-main-bis)
|
||||
// $scheme-main-ter: var(--#{$prefix}scheme-main-ter)
|
||||
// $scheme-invert: var(--#{$prefix}scheme-invert)
|
||||
// $scheme-invert-bis: var(--#{$prefix}scheme-invert-bis)
|
||||
// $scheme-invert-ter: var(--#{$prefix}scheme-invert-ter)
|
||||
// $background: var(--#{$prefix}background)
|
||||
// $border: var(--#{$prefix}border)
|
||||
// $border-hover: var(--#{$prefix}border-hover)
|
||||
// $border-light: var(--#{$prefix}border-light)
|
||||
// $border-light-hover: var(--#{$prefix}border-light-hover)
|
||||
// $text: var(--#{$prefix}text)
|
||||
// $text-invert: var(--#{$prefix}text-invert)
|
||||
// $text-light: var(--#{$prefix}text-light)
|
||||
// $text-strong: var(--#{$prefix}text-strong)
|
||||
// $code: var(--#{$prefix}code)
|
||||
// $code-background: var(--#{$prefix}code-background)
|
||||
// $pre: var(--#{$prefix}pre)
|
||||
// $pre-background: var(--#{$prefix}pre-background)
|
||||
// $link: var(--#{$prefix}link)
|
||||
// $link-invert: var(--#{$prefix}link-invert)
|
||||
// $link-light: var(--#{$prefix}link-light)
|
||||
// $link-dark: var(--#{$prefix}link-dark)
|
||||
// $link-visited: var(--#{$prefix}link-visited)
|
||||
// $link-hover: var(--#{$prefix}link-hover)
|
||||
// $link-hover-border: var(--#{$prefix}link-hover-border)
|
||||
// $link-focus: var(--#{$prefix}link-focus)
|
||||
// $link-focus-border: var(--#{$prefix}link-focus-border)
|
||||
// $link-active: var(--#{$prefix}link-active)
|
||||
// $link-active-border: var(--#{$prefix}link-active-border)
|
||||
|
|
@ -1,41 +1,513 @@
|
|||
@import ../sass/utilities/initial-variables.sass
|
||||
@import "../sass/utilities/initial-variables.sass"
|
||||
|
||||
// General colors
|
||||
@media (prefers-color-scheme: light)
|
||||
.bd-scheme-dark
|
||||
display: none
|
||||
|
||||
$scheme-main: $black
|
||||
$scheme-main-bis: $black-bis
|
||||
$scheme-main-ter: $black-ter
|
||||
$scheme-invert: $white
|
||||
$scheme-invert-bis: $white-bis
|
||||
$scheme-invert-ter: $white-ter
|
||||
@media (prefers-color-scheme: dark)
|
||||
// General colors
|
||||
$scheme-main: $black
|
||||
$scheme-main-bis: $black-bis
|
||||
$scheme-main-ter: $black-ter
|
||||
$scheme-invert: $white
|
||||
$scheme-invert-bis: $white-bis
|
||||
$scheme-invert-ter: $white-ter
|
||||
$background: $black-ter
|
||||
$border: $grey-darker
|
||||
$border-hover: $grey-dark
|
||||
$border-light: $grey-darker
|
||||
$border-light-hover: $grey-dark
|
||||
// Text colors
|
||||
$text: $grey-light
|
||||
$text-invert: $grey-darker
|
||||
$text-light: $grey
|
||||
$text-strong: $white
|
||||
// Code colors
|
||||
$code: $red
|
||||
$code-background: $background
|
||||
$pre: $text
|
||||
$pre-background: $background
|
||||
// Link colors
|
||||
$link-hover: $white
|
||||
$link-hover-border: $grey-dark
|
||||
$link-focus: $white
|
||||
$link-focus-border: $blue
|
||||
$link-active: $white
|
||||
$link-active-border: $grey-light
|
||||
.bd-scheme-light
|
||||
display: none
|
||||
\:root
|
||||
--#{$prefix}scheme-main: #{$scheme-main}
|
||||
--#{$prefix}scheme-main-bis: #{$scheme-main-bis}
|
||||
--#{$prefix}scheme-main-ter: #{$scheme-main-ter}
|
||||
--#{$prefix}scheme-invert: #{$scheme-invert}
|
||||
--#{$prefix}scheme-invert-bis: #{$scheme-invert-bis}
|
||||
--#{$prefix}scheme-invert-ter: #{$scheme-invert-ter}
|
||||
--#{$prefix}background: #{$background}
|
||||
--#{$prefix}border: #{$border}
|
||||
--#{$prefix}border-hover: #{$border-hover}
|
||||
--#{$prefix}border-light: #{$border-light}
|
||||
--#{$prefix}border-light-hover: #{$border-light-hover}
|
||||
--#{$prefix}text: #{$text}
|
||||
--#{$prefix}text-invert: #{$text-invert}
|
||||
--#{$prefix}text-light: #{$text-light}
|
||||
--#{$prefix}text-strong: #{$text-strong}
|
||||
--#{$prefix}code: #{$code}
|
||||
--#{$prefix}code-background: #{$code-background}
|
||||
--#{$prefix}pre: #{$pre}
|
||||
--#{$prefix}pre-background: #{$pre-background}
|
||||
--#{$prefix}link: #{$link}
|
||||
--#{$prefix}link-invert: #{$link-invert}
|
||||
--#{$prefix}link-light: #{$link-light}
|
||||
--#{$prefix}link-dark: #{$link-dark}
|
||||
--#{$prefix}link-visited: #{$link-visited}
|
||||
--#{$prefix}link-hover: #{$link-hover}
|
||||
--#{$prefix}link-hover-border: #{$link-hover-border}
|
||||
--#{$prefix}link-focus: #{$link-focus}
|
||||
--#{$prefix}link-focus-border: #{$link-focus-border}
|
||||
--#{$prefix}link-active: #{$link-active}
|
||||
--#{$prefix}link-active-border: #{$link-active-border}
|
||||
.bd-navbar
|
||||
background-color: $scheme-main-bis
|
||||
&.has-shadow
|
||||
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
|
||||
.delete
|
||||
background-color: rgba($scheme-invert, 0.2)
|
||||
&::before,
|
||||
&::after
|
||||
background-color: $scheme-main
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: rgba($scheme-invert, 0.3)
|
||||
&:active
|
||||
background-color: rgba($scheme-invert, 0.4)
|
||||
.notification
|
||||
background-color: $background
|
||||
.progress
|
||||
&::-webkit-progress-bar
|
||||
background-color: $border-light
|
||||
&::-webkit-progress-value
|
||||
background-color: $text
|
||||
&::-moz-progress-bar
|
||||
background-color: $text
|
||||
&::-ms-fill
|
||||
background-color: $text
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
&:indeterminate
|
||||
background-image: linear-gradient(to right, $color 30%, $border-light 30%)
|
||||
&:indeterminate
|
||||
background-color: $border-light
|
||||
background-image: linear-gradient(to right, $text 30%, $border-light 30%)
|
||||
|
||||
$background: $black-ter
|
||||
html
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
|
||||
$border: $grey-darker
|
||||
$border-hover: $grey-dark
|
||||
$border-light: $grey-darker
|
||||
$border-light-hover: $grey-dark
|
||||
body
|
||||
color: var(--#{$prefix}text)
|
||||
|
||||
// Text colors
|
||||
a
|
||||
color: var(--#{$prefix}link)
|
||||
|
||||
$text: $grey-light
|
||||
$text-invert: $grey-darker
|
||||
$text-light: $grey
|
||||
$text-strong: $white
|
||||
&:hover
|
||||
color: var(--#{$prefix}link-hover)
|
||||
|
||||
// Link colors
|
||||
code
|
||||
background-color: var(--#{$prefix}code-background)
|
||||
color: var(--#{$prefix}code)
|
||||
|
||||
$link-hover: $white
|
||||
$link-hover-border: $grey-dark
|
||||
hr
|
||||
background-color: var(--#{$prefix}background)
|
||||
|
||||
$link-focus: $white
|
||||
$link-focus-border: $blue
|
||||
strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
$link-active: $white
|
||||
$link-active-border: $grey-light
|
||||
pre
|
||||
background-color: var(--#{$prefix}pre-background)
|
||||
color: var(--#{$prefix}pre)
|
||||
|
||||
.bd-navbar
|
||||
background-color: $scheme-main-bis
|
||||
table
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
&.has-shadow
|
||||
box-shadow: none
|
||||
// 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)
|
||||
|
||||
.content
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
color: var(--#{$prefix}text-strong)
|
||||
blockquote
|
||||
background-color: var(--#{$prefix}background)
|
||||
border-left-color: var(--#{$prefix}border)
|
||||
table
|
||||
td,
|
||||
th
|
||||
border-color: var(--#{$prefix}border)
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
thead
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
.table
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
color: var(--#{$prefix}text-strong)
|
||||
td,
|
||||
th
|
||||
border-color: var(--#{$prefix}border)
|
||||
&.is-selected
|
||||
background-color: var(--#{$prefix}primary)
|
||||
color: var(--#{$prefix}primary-invert)
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
tr
|
||||
&.is-selected
|
||||
background-color: var(--#{$prefix}primary)
|
||||
color: var(--#{$prefix}primary-invert)
|
||||
td,
|
||||
th
|
||||
border-color: var(--#{$prefix}primary-invert)
|
||||
thead
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
tfoot
|
||||
td,
|
||||
th
|
||||
color: var(--#{$prefix}text-strong)
|
||||
&.is-hoverable
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:hover
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
&:nth-child(even)
|
||||
background-color: var(--#{$prefix}scheme-main-ter)
|
||||
&.is-striped
|
||||
tbody
|
||||
tr:not(.is-selected)
|
||||
&:nth-child(even)
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
|
||||
.tag:not(body)
|
||||
background-color: var(--tag-background-color) !important
|
||||
color: var(--tag-color) !important
|
||||
--tag-background-color: var(--#{$prefix}background)
|
||||
--tag-color: var(--#{$prefix}text)
|
||||
@each $name, $color in $cssvar-colors
|
||||
$base: "#{$prefix}#{$name}"
|
||||
&.is-#{$name}
|
||||
--tag-background-color: var(--#{$base})
|
||||
--tag-color: var(--#{$base}-invert)
|
||||
&.is-light
|
||||
--tag-background-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 7%)
|
||||
--tag-color: var(--#{$base})
|
||||
|
||||
.title
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
.subtitle
|
||||
color: var(--#{$prefix}text)
|
||||
strong
|
||||
color: var(--#{$prefix}text-strong)
|
||||
|
||||
.footer
|
||||
background-color: var(--#{$prefix}scheme-main-bis)
|
||||
|
|
|
|||
|
|
@ -24,8 +24,23 @@ $main-spacing: 3rem
|
|||
$intro-width: 1080px
|
||||
$sidebar-width: 10.5rem
|
||||
|
||||
// @import "./bulma-dark"
|
||||
@import "../bulma"
|
||||
@import "./bulma-cssvar.sass"
|
||||
@import "./bulma-dark"
|
||||
|
||||
// Dark mode steps
|
||||
//
|
||||
// 1. Swap values
|
||||
// $scheme-main: $black
|
||||
//
|
||||
// 2. Assign updated CSS vars to :root
|
||||
// :root
|
||||
// --bulma-scheme-main: #{$scheme-main}
|
||||
//
|
||||
// 3. Assign CSS vars to elements/components
|
||||
// html
|
||||
// background-color: var(--#{$prefix}scheme-main)
|
||||
//
|
||||
|
||||
%center
|
||||
align-items: center
|
||||
|
|
@ -33,7 +48,7 @@ $sidebar-width: 10.5rem
|
|||
justify-content: center
|
||||
|
||||
%bd-box
|
||||
background-color: $white
|
||||
background-color: var(--#{$prefix}scheme-main)
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
|
||||
display: block
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue