Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 04:14:29 -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

6
docs/_sass/book.sass
View File

@@ -45,7 +45,7 @@ $book-beige: #FFEDD7
.bd-book-content
@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
padding: 3rem
@@ -98,7 +98,7 @@ $book-beige: #FFEDD7
.bd-book-modal-background
+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-background,
@@ -153,7 +153,7 @@ $book-beige: #FFEDD7
.bd-book-inline-cover
display: none
.bd-book-modal-column
background-color: var(--#{$prefix}-scheme-main)
background-color: var(--#{$prefix}scheme-main)
position: relative
&.bd-is-cover
align-items: center

6
docs/_sass/bootstrap.sass
View File

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

14
docs/_sass/bsa.sass
View File

@@ -8,7 +8,7 @@
.default-ad
background-color: rgba(black, 0.3)
border-radius: 2px
color: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
background-color: var(--#{$prefix}scheme-main)
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)
color: var(--#{$prefix}-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(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
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
display: block
.default-image
@@ -46,7 +46,7 @@
height: 40px
width: 40px
.default-title
color: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
display: inline
font-weight: $weight-bold
&::after

2
docs/_sass/callout.sass
View File

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

13
docs/_sass/example.sass
View File

@@ -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(var(--#{$prefix}-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: var(--#{$prefix}-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

4
docs/_sass/expo.sass
View File

@@ -1,5 +1,5 @@
.bd-expo
background-color: var(--#{$prefix}-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: var(--#{$prefix}-scheme-invert)
background-color: var(--#{$prefix}scheme-invert)
opacity: 0
transition: opacity 200ms $easing

22
docs/_sass/footer.sass
View File

@@ -1,5 +1,5 @@
.bd-footer-title
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-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 var(--#{$prefix}-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: var(--#{$prefix}-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(var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
.bd-footer-link-title
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
+mobile
flex-wrap: wrap
margin-top: 1rem

16
docs/_sass/global.sass
View File

@@ -16,10 +16,10 @@ svg
strong
color: currentColor
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
&:hover
border-bottom-color: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}-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: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
&:active
opacity: 0.8
.carbon-text
display: block
color: var(--#{$prefix}-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: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
.carbon-poweredby
bottom: 0
color: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
display: inline
font-size: $size-small
line-height: $carbon-poweredby-height

8
docs/_sass/header.sass
View File

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

2
docs/_sass/highlight.sass
View File

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

36
docs/_sass/index.sass
View File

@@ -11,14 +11,14 @@
&:hover
color: $blue
strong
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
strong
font-weight: $weight-semibold
.title
strong
color: $primary
.subtitle
color: var(--#{$prefix}-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: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
.bd-index-custom-example
padding: 1rem
@@ -77,28 +77,28 @@
.button
&.is-primary
background-color: $mauve
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
color: var(--#{$prefix}scheme-main)
// Fullscreen
.bd-index-fullscreen
.tabs
a
color: var(--#{$prefix}-border-hover) !important
color: var(--#{$prefix}border-hover) !important
// Columns
@@ -161,13 +161,13 @@
transition-duration: $speed * 2
transition-property: color
.subtitle
color: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
position: relative
strong
color: currentColor
&::before
+overlay
background-color: var(--#{$prefix}-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: var(--#{$prefix}-text)
color: var(--#{$prefix}text)
&:nth-child(1):hover
.title
color: $orange
@@ -191,10 +191,10 @@
color: $success
&:nth-child(3):hover
.title
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
&:nth-child(4):hover
.title
color: var(--#{$prefix}-scheme-invert)
color: var(--#{$prefix}scheme-invert)
.bd-focus-icon
position: relative
@@ -292,7 +292,7 @@
color: $black-ter
&.is-success,
&.is-error
color: var(--#{$prefix}-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: var(--#{$prefix}-scheme-invert-ter)
color: var(--#{$prefix}scheme-invert-ter)
\::selection
background: $yellow
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
font-size: $size-small
margin-top: 40px
text-align: center
a
color: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
&:hover
text-decoration: underline
span

4
docs/_sass/klmn.sass
View File

@@ -12,7 +12,7 @@
margin: 0.25rem auto 0.25rem 0
.bd-klmn-gap
background-color: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
color: var(--#{$prefix}scheme-main)
.bd-klmn-columns:last-child
.bd-notification

8
docs/_sass/love.sass
View File

@@ -1,5 +1,5 @@
.bd-testimonials
background-color: var(--#{$prefix}-background)
background-color: var(--#{$prefix}background)
.bd-testimonial
align-items: flex-start
@@ -7,7 +7,7 @@
justify-content: center
.bd-testimonial-tweet
background-color: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
color: var(--#{$prefix}scheme-main)
@keyframes rainbow
0%
@@ -111,7 +111,7 @@
margin-left: 1.5rem
.bd-shoutout
background-color: var(--#{$prefix}-background)
background-color: var(--#{$prefix}background)
padding: 2rem
text-align: center
&:not(:last-child)

40
docs/_sass/main.sass
View File

@@ -5,7 +5,7 @@
.bd-figure
+block
align-items: center
border: 2px solid var(--#{$prefix}-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: var(--#{$prefix}-scheme-main-ter)
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
strong
color: currentColor
#meta
@@ -87,12 +87,12 @@
overflow: visible
ul,
a
border-bottom-color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
&.is-current
a
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
a
color: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
&:hover
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
.bd-category
a
&:hover
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
position: relative
&.is-active
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
.bd-mini-tag
margin-left: 0.5em
@@ -201,7 +201,7 @@
top: 0
.bd-anchors-title
color: var(--#{$prefix}-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: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
+touch
.bd-lead,
@@ -229,7 +229,7 @@
.bd-duo
display: flex
.bd-lead
background-color: var(--#{$prefix}-scheme-main)
background-color: var(--#{$prefix}scheme-main)
overflow: hidden
flex-grow: 1
flex-shrink: 1

4
docs/_sass/native.sass
View File

@@ -30,7 +30,7 @@
text-decoration: none
&:hover
.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)
.native-img
@@ -62,7 +62,7 @@
.native-cta
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-shrink: 0
font-weight: $weight-semibold

12
docs/_sass/patreon.sass
View File

@@ -4,7 +4,7 @@
.bd-side-sponsor-label,
.bd-banner-label
color: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
color: var(--#{$prefix}scheme-main)
// &.is-fortyfour
// background-color: var(--#{$prefix}-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: var(--#{$prefix}-link)
color: var(--#{$prefix}-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: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
font-size: 1.25em
font-weight: $weight-semibold
line-height: 1.25

28
docs/_sass/specific.sass
View File

@@ -58,7 +58,7 @@
.bd-link
border-radius: $radius-large
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
a
color: currentColor
&:hover
color: var(--#{$prefix}-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: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
&:hover
text-decoration: underline
.bd-feature-title
color: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
a
border-bottom: 1px solid transparent
color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-background)
background-color: var(--#{$prefix}background)
border-radius: $radius
color: var(--#{$prefix}-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(var(--#{$prefix}-scheme-invert), 0.2)
background-color: rgba(var(--#{$prefix}scheme-invert), 0.2)
border-radius: $radius
color: var(--#{$prefix}-scheme-main)
color: var(--#{$prefix}scheme-main)
pre code
background-color: transparent
// Colors

10
docs/_sass/sponsors.sass
View File

@@ -29,13 +29,13 @@
min-height: 80px
text-align: center
&.is-text
color: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
font-size: 0.75em
line-height: 1.25
min-height: 0
.bd-partnrs
background-color: var(--#{$prefix}-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: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
font-size: 0.875rem
margin-bottom: 1rem
@@ -57,11 +57,11 @@
.bd-minis-link
@extend %center
color: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
.icon
margin-right: 0.25em
strong
color: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
margin-left: 0.25em
.bd-minis-list

12
docs/_sass/twitter.sass
View File

@@ -1,14 +1,14 @@
// $tw-black: #1c2022
$tw-black: var(--#{$prefix}-text-strong)
$tw-black: var(--#{$prefix}text-strong)
$tw-blue: #2b7bb9
$tw-grey: #697882
$tw-border: #e1e8ed
.bd-tws-home
background-color: var(--#{$prefix}-scheme-main-bis)
background-color: var(--#{$prefix}scheme-main-bis)
.bd-tw
background-color: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-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: var(--#{$prefix}-scheme-main)
background-color: var(--#{$prefix}scheme-main)
border: 1px solid $tw-border
border-radius: 5px
color: $tw-grey