mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 12:24:28 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
165
docs/_sass/old/book.sass
Normal file
165
docs/_sass/old/book.sass
Normal file
@@ -0,0 +1,165 @@
|
||||
$book-beige: #FFEDD7
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
to
|
||||
opacity: 1
|
||||
|
||||
@keyframes zoomIn
|
||||
from
|
||||
transform: scale(0.8)
|
||||
to
|
||||
transform: scale(1)
|
||||
|
||||
.bd-book-banner
|
||||
background-color: $primary
|
||||
position: relative
|
||||
|
||||
.bd-book-pattern,
|
||||
.bd-book-modal-column.bd-is-cover
|
||||
background-image: url("/images/hab/lightpaperfibers_@2X.png")
|
||||
background-repeat: repeat
|
||||
background-size: 250px 150px
|
||||
&::before
|
||||
+overlay
|
||||
background-color: rgba($book-beige, 0.1)
|
||||
content: ""
|
||||
display: block
|
||||
|
||||
.bd-book-pattern
|
||||
+overlay
|
||||
|
||||
.bd-book-header
|
||||
position: relative
|
||||
|
||||
.bd-book-cover
|
||||
padding-top: 0.75rem
|
||||
position: relative
|
||||
text-align: center
|
||||
a
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
img
|
||||
display: block
|
||||
|
||||
.bd-book-content
|
||||
@extend %bd-box
|
||||
box-shadow: 0 3rem 3rem -1rem rgba($scheme-invert, 0.2)
|
||||
max-width: 520px
|
||||
padding: 3rem
|
||||
|
||||
.bd-book-description
|
||||
max-width: 340px
|
||||
|
||||
.bd-book-tags
|
||||
margin-bottom: 1.5rem
|
||||
.tags
|
||||
.tag
|
||||
margin-right: 1px
|
||||
|
||||
.bd-book-buttons
|
||||
.button
|
||||
height: auto
|
||||
padding-bottom: calc(1em - 1px)
|
||||
padding-top: calc(0.5em - 1px)
|
||||
& > span
|
||||
font-size: 0.875em
|
||||
& > em
|
||||
display: block
|
||||
font-size: 0.5em
|
||||
font-style: normal
|
||||
line-height: 1em
|
||||
margin-bottom: 0.5em
|
||||
opacity: 0.5
|
||||
img
|
||||
display: block
|
||||
max-height: 24px
|
||||
&.bd-is-bleeding
|
||||
background-color: $bleeding-green
|
||||
border-color: transparent
|
||||
&:hover
|
||||
background-color: darken($bleeding-green, 5%)
|
||||
&.bd-is-amazon
|
||||
background-color: $amazon
|
||||
border-color: transparent
|
||||
&:hover
|
||||
background-color: darken($amazon, 5%)
|
||||
img
|
||||
margin-bottom: -11px
|
||||
|
||||
.bd-book-columns
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 1080px
|
||||
|
||||
.bd-book-modal-background
|
||||
+overlay
|
||||
background-color: rgba($scheme-invert, 0.86)
|
||||
|
||||
.bd-book-modal
|
||||
.bd-book-modal-background,
|
||||
.modal-content
|
||||
animation-duration: 250ms
|
||||
animation-easing-function: ease-out
|
||||
animation-fill-mode: both
|
||||
.bd-book-modal-background
|
||||
animation-name: fadeIn
|
||||
.modal-content
|
||||
animation-name: zoomIn
|
||||
transform-origin: center
|
||||
.bd-book-modal-cover
|
||||
padding: 2rem
|
||||
position: relative
|
||||
|
||||
.bd-book-modal-columns
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
+mobile
|
||||
.bd-book-columns
|
||||
flex-direction: column
|
||||
.bd-book-buttons
|
||||
.button
|
||||
width: 100%
|
||||
&:not(:last-child)
|
||||
margin-right: 0
|
||||
margin-bottom: 1rem
|
||||
.bd-book-modal
|
||||
.bd-book-content
|
||||
padding: 2rem
|
||||
.bd-book-modal-column.bd-is-cover
|
||||
display: none
|
||||
|
||||
+tablet
|
||||
.bd-book-columns
|
||||
justify-content: space-around
|
||||
.bd-book-header
|
||||
.tag
|
||||
position: absolute
|
||||
right: calc(100% + 1.25rem)
|
||||
top: 0.5rem
|
||||
.bd-book-buttons
|
||||
.button
|
||||
width: calc(50% - 0.5rem)
|
||||
// Modal
|
||||
.bd-book-modal
|
||||
.modal-content
|
||||
width: 960px
|
||||
.bd-book-inline-cover
|
||||
display: none
|
||||
.bd-book-modal-column
|
||||
background-color: $scheme-main
|
||||
position: relative
|
||||
&.bd-is-cover
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: 2rem
|
||||
&.bd-is-content
|
||||
.bd-book-content
|
||||
box-shadow: none
|
||||
81
docs/_sass/old/bootstrap.sass
Normal file
81
docs/_sass/old/bootstrap.sass
Normal file
@@ -0,0 +1,81 @@
|
||||
$bootstrap: #6f5499
|
||||
$bootstrap-invert: #fff
|
||||
|
||||
.bd-bootstrap-table
|
||||
margin: 3rem 0
|
||||
|
||||
.bd-pros-heading
|
||||
padding: 0 2rem
|
||||
text-align: center
|
||||
|
||||
.bd-pros-icon
|
||||
margin-bottom: 3rem
|
||||
text-align: center
|
||||
svg
|
||||
height: 3rem
|
||||
width: auto
|
||||
|
||||
.bd-pros-list
|
||||
margin: 0 auto
|
||||
max-width: 540px
|
||||
|
||||
.bd-pro
|
||||
.icon
|
||||
position: relative
|
||||
top: -1px
|
||||
.title
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.bd-pro + .pro
|
||||
margin-top: 2rem
|
||||
padding-top: 2rem
|
||||
|
||||
.bd-pro-content
|
||||
p:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.bd-pro.bd-is-bulma
|
||||
.icon
|
||||
color: $primary
|
||||
|
||||
.bd-pro.bd-is-bootstrap
|
||||
.icon
|
||||
color: $bootstrap
|
||||
|
||||
.bd-bootstrap-comparison
|
||||
margin: 0 auto
|
||||
max-width: 42rem
|
||||
.table
|
||||
color: $red
|
||||
thead,
|
||||
tfoot
|
||||
th
|
||||
font-size: 1.5rem
|
||||
text-align: center
|
||||
svg
|
||||
height: 1.5rem
|
||||
margin-right: 1rem
|
||||
position: relative
|
||||
top: 0.25rem
|
||||
width: auto
|
||||
tbody
|
||||
th
|
||||
font-size: 1.25rem
|
||||
text-align: center
|
||||
td
|
||||
font-family: $family-monospace
|
||||
width: 50%
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
.bd-is-empty
|
||||
background-color: $background
|
||||
color: $text-light
|
||||
.bd-is-unique
|
||||
background-color: rgba($green, 0.25)
|
||||
color: $text-strong
|
||||
font-weight: $weight-bold
|
||||
|
||||
.bd-bootstrap-comparison-header
|
||||
margin-bottom: 3rem
|
||||
74
docs/_sass/old/bsa.sass
Normal file
74
docs/_sass/old/bsa.sass
Normal file
@@ -0,0 +1,74 @@
|
||||
.bsa
|
||||
padding: 2rem
|
||||
|
||||
.bsa-cpc
|
||||
min-height: 1px
|
||||
|
||||
#_default_
|
||||
.default-ad
|
||||
background-color: rgba(black, 0.3)
|
||||
border-radius: 2px
|
||||
color: $scheme-main
|
||||
display: inline-block
|
||||
font-size: 10px
|
||||
font-weight: bold
|
||||
padding: 0 4px
|
||||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
& > a
|
||||
background-color: $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
|
||||
display: block
|
||||
line-height: 1.375
|
||||
margin-top: 15px
|
||||
min-height: 70px
|
||||
padding: 15px
|
||||
padding-left: 70px
|
||||
position: relative
|
||||
&:hover,
|
||||
&:focus
|
||||
box-shadow: 0 2px 3px 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
|
||||
span
|
||||
display: block
|
||||
.default-image
|
||||
display: block
|
||||
left: 15px
|
||||
height: 40px
|
||||
position: absolute
|
||||
top: 15px
|
||||
width: 40px
|
||||
img
|
||||
display: block
|
||||
height: 40px
|
||||
width: 40px
|
||||
.default-title
|
||||
color: $text-strong
|
||||
display: inline
|
||||
font-weight: $weight-bold
|
||||
&::after
|
||||
content: " — "
|
||||
.default-description
|
||||
display: inline
|
||||
|
||||
+tablet
|
||||
.bsa
|
||||
.columns
|
||||
min-height: 120px
|
||||
#_default_
|
||||
display: flex
|
||||
justify-content: center
|
||||
position: relative
|
||||
.default-ad
|
||||
left: 100%
|
||||
margin-left: 2rem
|
||||
position: absolute
|
||||
top: 0
|
||||
& > a
|
||||
margin: 0
|
||||
width: calc(50% - 1rem)
|
||||
&:not(:nth-child(2))
|
||||
margin-left: 2rem
|
||||
13
docs/_sass/old/callout.sass
Normal file
13
docs/_sass/old/callout.sass
Normal file
@@ -0,0 +1,13 @@
|
||||
.bd-callout
|
||||
+block
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||
position: relative
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
256
docs/_sass/old/example.sass
Normal file
256
docs/_sass/old/example.sass
Normal file
@@ -0,0 +1,256 @@
|
||||
.bd-example,
|
||||
.bd-structure,
|
||||
.bd-snippet
|
||||
border: 2px solid $background
|
||||
position: relative
|
||||
&::before
|
||||
background: $yellow
|
||||
border-radius: $radius-small $radius-small 0 0
|
||||
bottom: 100%
|
||||
color: $yellow-invert
|
||||
content: "Example"
|
||||
display: inline-block
|
||||
font-size: 7px
|
||||
font-weight: bold
|
||||
left: -1px
|
||||
letter-spacing: 1px
|
||||
margin-left: -1px
|
||||
padding: 3px 5px
|
||||
position: absolute
|
||||
text-transform: uppercase
|
||||
vertical-align: top
|
||||
+tablet
|
||||
&.is-fullwidth
|
||||
border-left: none
|
||||
border-right: none
|
||||
padding: 0
|
||||
|
||||
.bd-example,
|
||||
.bd-structure
|
||||
padding: 1.5rem
|
||||
&:not(:first-child)
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.bd-example
|
||||
&.bd-is-clipped
|
||||
border-top-right-radius: $radius-large
|
||||
& + .highlight
|
||||
border: 1px solid $yellow
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -1.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
// Snippet
|
||||
.bd-snippet
|
||||
+block
|
||||
margin-top: 2rem
|
||||
position: relative
|
||||
&::before
|
||||
content: "Snippet"
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
.bd-snippet-preview
|
||||
padding: 1.5rem
|
||||
|
||||
.bd-snippet-code.bd-is-more.bd-is-more-clipped
|
||||
.highlight
|
||||
height: 2em
|
||||
overflow: hidden
|
||||
pre
|
||||
overflow: hidden
|
||||
.bd-show
|
||||
display: flex
|
||||
|
||||
.bd-snippet.bd-is-horizontal
|
||||
border-radius: $radius-large
|
||||
border-top-left-radius: 0
|
||||
.bd-snippet-code
|
||||
.highlight
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
&.bd-is-more.bd-is-more-clipped
|
||||
.highlight
|
||||
pre
|
||||
padding-top: 0.325rem
|
||||
|
||||
.bd-snippet.bd-is-clipped
|
||||
.bd-snippet-code
|
||||
overflow: auto
|
||||
|
||||
.bd-snippet.bd-is-fullwidth
|
||||
border-radius: 0
|
||||
border-width: 1px 0
|
||||
|
||||
+desktop
|
||||
.bd-snippet.bd-is-vertical
|
||||
align-items: stretch
|
||||
border-radius: $radius-large
|
||||
border-top-left-radius: 0
|
||||
display: flex
|
||||
justify-content: center
|
||||
.bd-snippet-preview,
|
||||
.bd-snippet-code
|
||||
width: 50%
|
||||
.bd-snippet-code
|
||||
&,
|
||||
.highlight,
|
||||
.highlight pre
|
||||
align-items: stretch
|
||||
border-radius: 0 $radius-large $radius-large 0
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.highlight,
|
||||
.highlight pre,
|
||||
.highlight .language-html
|
||||
flex-grow: 1
|
||||
.highlight pre
|
||||
white-space: pre
|
||||
&.bd-is-one-fifth
|
||||
.bd-snippet-preview
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: calc(128px + 3rem)
|
||||
.bd-snippet-code
|
||||
width: calc(100% - 128px - 3rem)
|
||||
&.bd-is-two-fifths
|
||||
.bd-snippet-preview
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: calc(256px + 3rem)
|
||||
.bd-snippet-code
|
||||
width: calc(100% - 256px - 3rem)
|
||||
&.bd-is-one-third
|
||||
.bd-snippet-preview
|
||||
width: 33.3333%
|
||||
.bd-snippet-code
|
||||
width: 66.6666%
|
||||
|
||||
// Highlight
|
||||
.highlight.bd-is-hovering
|
||||
border-radius: 2px
|
||||
box-shadow: 0 0 0 2px $yellow
|
||||
|
||||
.highlight pre
|
||||
max-height: 320px
|
||||
margin-bottom: 0 !important
|
||||
|
||||
.bd-highlight-full,
|
||||
#navbarJsExample
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
.highlight pre
|
||||
max-height: none
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
|
||||
.bd-structure
|
||||
border-color: $structure
|
||||
border-radius: $radius
|
||||
padding: 1.5rem
|
||||
&::before
|
||||
background: $structure
|
||||
color: $structure-invert
|
||||
content: "Structure"
|
||||
|
||||
.bd-structure-item
|
||||
position: relative
|
||||
&::before
|
||||
+overlay
|
||||
background: rgba($scheme-invert, 0.7)
|
||||
background: $background
|
||||
border: 1px solid $border
|
||||
content: ""
|
||||
display: block
|
||||
z-index: 1
|
||||
&::after
|
||||
+overlay
|
||||
align-items: center
|
||||
content: attr(title)
|
||||
display: flex
|
||||
font-family: $family-monospace
|
||||
font-size: 11px
|
||||
justify-content: center
|
||||
padding: 3px 5px
|
||||
z-index: 2
|
||||
&.bd-is-structure-container
|
||||
padding: 1.5rem 0.75rem 0.75rem
|
||||
&::after
|
||||
align-items: flex-start
|
||||
justify-content: flex-start
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
.highlight
|
||||
position: relative
|
||||
.bd-copy,
|
||||
.bd-expand
|
||||
background: none
|
||||
border: none
|
||||
color: $text
|
||||
cursor: pointer
|
||||
font-size: 0.625rem
|
||||
outline: none
|
||||
padding-bottom: 0
|
||||
padding-top: 0
|
||||
position: absolute
|
||||
right: 0.25rem
|
||||
top: 0.25rem
|
||||
&:hover
|
||||
background-color: $yellow
|
||||
color: $yellow-invert
|
||||
&:focus,
|
||||
&:active
|
||||
box-shadow: none
|
||||
.bd-expand
|
||||
right: 45px
|
||||
.bd-show
|
||||
+overlay
|
||||
align-items: center
|
||||
background-color: rgba($background, 0.7)
|
||||
border: none
|
||||
color: rgba(#000, 0.5)
|
||||
cursor: pointer
|
||||
display: none
|
||||
font-size: $size-small
|
||||
justify-content: center
|
||||
width: 100%
|
||||
strong
|
||||
color: currentColor
|
||||
font-weight: $weight-semibold
|
||||
&:hover
|
||||
background-color: rgba($yellow, 0.8)
|
||||
color: rgba(#000, 0.7)
|
||||
+tablet
|
||||
pre
|
||||
white-space: pre-wrap
|
||||
|
||||
+tablet
|
||||
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
& + .highlight
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
|
||||
.section.is-fullwidth
|
||||
padding: 0 !important
|
||||
.bd-snippet
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
.bd-example
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
padding: 0
|
||||
& + .highlight
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
56
docs/_sass/old/expo.sass
Normal file
56
docs/_sass/old/expo.sass
Normal file
@@ -0,0 +1,56 @@
|
||||
.bd-expo
|
||||
background-color: $scheme-main
|
||||
padding: 1.5rem
|
||||
|
||||
.bd-website
|
||||
display: block
|
||||
position: relative
|
||||
text-align: center
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
.bd-website-image
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: 1.5rem
|
||||
position: relative
|
||||
&:hover
|
||||
.bd-website-shadow
|
||||
opacity: 0
|
||||
.bd-website-overlay
|
||||
opacity: 0.25
|
||||
.b-lazy
|
||||
opacity: 0
|
||||
transition: opacity 500ms $easing
|
||||
.b-loaded
|
||||
opacity: 1
|
||||
|
||||
.bd-website-shadow
|
||||
border: 1px solid rgba(#000, 0.04)
|
||||
transition: opacity 200ms $easing
|
||||
|
||||
.bd-website-overlay
|
||||
background-color: $scheme-invert
|
||||
opacity: 0
|
||||
transition: opacity 200ms $easing
|
||||
|
||||
+mobile
|
||||
.bd-website:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+tablet
|
||||
.bd-expo
|
||||
padding-bottom: 3rem
|
||||
padding-top: 3rem
|
||||
.bd-websites
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
.bd-website
|
||||
margin-bottom: 3rem
|
||||
width: calc(50% - 3rem)
|
||||
&.bd-is-highlighted
|
||||
width: 100%
|
||||
.bd-website-image
|
||||
margin-bottom: 3rem
|
||||
249
docs/_sass/old/focus.sass
Normal file
249
docs/_sass/old/focus.sass
Normal file
@@ -0,0 +1,249 @@
|
||||
@keyframes bdGrow
|
||||
from
|
||||
transform: scale(0)
|
||||
to
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes bdSlideDown
|
||||
from
|
||||
opacity: 0
|
||||
transform: translateY(-1rem)
|
||||
to
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes bdSlideUp
|
||||
from
|
||||
opacity: 0
|
||||
transform: translateY(1rem)
|
||||
to
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1)
|
||||
$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86)
|
||||
$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
|
||||
$duration: 500ms
|
||||
$delay: 250ms
|
||||
$wait: 500ms
|
||||
|
||||
$focus-delay: 1s
|
||||
|
||||
%bd-focus-animation
|
||||
animation-duration: $duration
|
||||
animation-fill-mode: both
|
||||
animation-timing-function: $cubic-less-dramatic
|
||||
transform-origin: center center
|
||||
|
||||
$delay-subtitle: $delay / 2
|
||||
|
||||
// Intro
|
||||
.intro-title
|
||||
@extend %bd-focus-animation
|
||||
animation-name: bdSlideDown
|
||||
|
||||
.intro-ghbtns,
|
||||
.intro-author
|
||||
@extend %bd-focus-animation
|
||||
animation-delay: $focus-delay
|
||||
animation-duration: $duration * 2
|
||||
animation-name: bdFadeIn
|
||||
|
||||
.intro-npm
|
||||
@extend %bd-focus-animation
|
||||
animation-delay: $delay
|
||||
animation-name: bdSlowIn
|
||||
|
||||
.intro-buttons .button
|
||||
@extend %bd-focus-animation
|
||||
animation-name: bdSlowIn
|
||||
&:first-child
|
||||
animation-delay: $delay * 2
|
||||
&:last-child
|
||||
animation-delay: $delay * 3
|
||||
|
||||
// Titles
|
||||
.bd-focus-item
|
||||
.title
|
||||
@extend %bd-focus-animation
|
||||
animation-name: bdSlideDown
|
||||
.subtitle
|
||||
@extend %bd-focus-animation
|
||||
animation-name: bdSlideUp
|
||||
&:nth-child(1)
|
||||
.title
|
||||
animation-delay: $focus-delay
|
||||
.subtitle
|
||||
animation-delay: $focus-delay + $delay-subtitle
|
||||
&:nth-child(2)
|
||||
.title
|
||||
animation-delay: $focus-delay + $wait
|
||||
.subtitle
|
||||
animation-delay: $focus-delay + $wait + $delay-subtitle
|
||||
&:nth-child(3)
|
||||
.title
|
||||
animation-delay: $focus-delay + ($wait * 2)
|
||||
.subtitle
|
||||
animation-delay: $focus-delay + ($wait * 2) + $delay-subtitle
|
||||
&:nth-child(4)
|
||||
.title
|
||||
animation-delay: $focus-delay + ($wait * 3)
|
||||
.subtitle
|
||||
animation-delay: $focus-delay + ($wait * 3) + $delay-subtitle
|
||||
|
||||
// Devices
|
||||
%bd-focus-animation-device
|
||||
@extend %bd-focus-animation
|
||||
animation-name: bdGrow
|
||||
transform-origin: bottom center
|
||||
|
||||
.bd-focus-mobile
|
||||
@extend %bd-focus-animation-device
|
||||
animation-delay: $focus-delay
|
||||
|
||||
.bd-focus-tablet
|
||||
@extend %bd-focus-animation-device
|
||||
animation-delay: $focus-delay + $delay
|
||||
|
||||
.bd-focus-desktop
|
||||
@extend %bd-focus-animation-device
|
||||
animation-delay: $focus-delay + ($delay * 2)
|
||||
|
||||
// Cubes
|
||||
$cube-factor: 10px
|
||||
|
||||
@keyframes bdCube1
|
||||
0%
|
||||
transform: translate3d(0, (-5 * $cube-factor), 0)
|
||||
opacity: 0
|
||||
25%, 100%
|
||||
transform: translate3d(0, 0, 0)
|
||||
opacity: 1
|
||||
|
||||
@keyframes bdCube2
|
||||
0%
|
||||
transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
|
||||
opacity: 0
|
||||
25%, 100%
|
||||
transform: translate3d(0, 0, 0)
|
||||
opacity: 1
|
||||
|
||||
@keyframes bdCube3
|
||||
0%
|
||||
transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
|
||||
opacity: 0
|
||||
25%, 100%
|
||||
transform: translate3d(0, 0, 0)
|
||||
opacity: 1
|
||||
|
||||
%bd-focus-animation-cube
|
||||
@extend %bd-focus-animation
|
||||
animation-direction: alternate
|
||||
animation-duration: $duration * 4
|
||||
animation-iteration-count: infinite
|
||||
|
||||
.bd-focus-cube-1
|
||||
@extend %bd-focus-animation-cube
|
||||
animation-delay: $focus-delay + $wait
|
||||
animation-name: bdCube1
|
||||
|
||||
.bd-focus-cube-2
|
||||
@extend %bd-focus-animation-cube
|
||||
animation-name: bdCube2
|
||||
animation-delay: $focus-delay + $wait + $delay
|
||||
|
||||
.bd-focus-cube-3
|
||||
@extend %bd-focus-animation-cube
|
||||
animation-name: bdCube3
|
||||
animation-delay: $focus-delay + $wait + ($delay * 2)
|
||||
|
||||
@keyframes bdFadeIn
|
||||
from
|
||||
opacity: 0
|
||||
to
|
||||
opacity: 1
|
||||
|
||||
@keyframes bdSlowIn
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0.9)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes bdScaleIn
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
.bd-focus-css3
|
||||
@extend %bd-focus-animation
|
||||
animation-delay: $focus-delay + ($wait * 2)
|
||||
animation-name: bdScaleIn
|
||||
|
||||
.bd-focus-github
|
||||
@extend %bd-focus-animation
|
||||
animation-delay: $focus-delay + ($wait * 3)
|
||||
animation-duration: $duration * 3
|
||||
animation-name: bdJellyPop
|
||||
|
||||
@keyframes bdJellyPop
|
||||
0%
|
||||
opacity: 0
|
||||
transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
3.4%
|
||||
opacity: 1
|
||||
transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
4.7%
|
||||
transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
6.81%
|
||||
transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
9.41%
|
||||
transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
10.21%
|
||||
transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
13.61%
|
||||
transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
14.11%
|
||||
transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
17.52%
|
||||
transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
18.72%
|
||||
transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
21.32%
|
||||
transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
24.32%
|
||||
transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
25.23%
|
||||
transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
29.03%
|
||||
transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
29.93%
|
||||
transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
35.54%
|
||||
transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
36.74%
|
||||
transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
41.04%
|
||||
transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
44.44%
|
||||
transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
52.15%
|
||||
transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
59.86%
|
||||
transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
63.26%
|
||||
transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
75.28%
|
||||
transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
85.49%
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
90.69%
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
||||
200
docs/_sass/old/footer.sass
Normal file
200
docs/_sass/old/footer.sass
Normal file
@@ -0,0 +1,200 @@
|
||||
.bd-footer-title
|
||||
color: $text-strong
|
||||
font-size: 1.25rem
|
||||
line-height: 1.25
|
||||
margin-bottom: 0.5rem
|
||||
transition-duration: $speed
|
||||
transition-property: color
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.bd-footer-subtitle
|
||||
color: $border-hover
|
||||
margin-top: -0.5rem
|
||||
transition-duration: $speed
|
||||
transition-property: color
|
||||
|
||||
.bd-footer-iframe
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
margin-bottom: -10px
|
||||
min-height: 30px
|
||||
iframe
|
||||
height: 30px
|
||||
margin-bottom: 10px
|
||||
.fb-like
|
||||
margin-left: 10px
|
||||
&.is-github
|
||||
iframe
|
||||
width: 100%
|
||||
|
||||
.bd-footer-tsp
|
||||
color: $border-hover
|
||||
margin-top: 1.5rem
|
||||
|
||||
%bd-footer-box
|
||||
@extend %bd-box
|
||||
text-align: center
|
||||
.bd-footer-title
|
||||
font-size: 1.5rem
|
||||
|
||||
// Support
|
||||
|
||||
.bd-footer-support
|
||||
@extend %bd-footer-box
|
||||
border-top: 2px solid $scheme-main-ter
|
||||
box-shadow: none
|
||||
padding: 3rem
|
||||
.bd-footer-title
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.bd-footer-donations
|
||||
justify-content: center
|
||||
|
||||
.bd-footer-donation
|
||||
flex: none
|
||||
|
||||
.bd-footer-donation-items
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
.bd-footer-sponsor
|
||||
width: 12rem
|
||||
|
||||
.bd-footer-sponsor a
|
||||
@extend %center
|
||||
height: 70px
|
||||
|
||||
+tablet
|
||||
.bd-footer-donation
|
||||
padding: 0.75rem 1.5rem
|
||||
|
||||
.bd-footer-donation-title
|
||||
color: $border-hover
|
||||
margin-bottom: 0.5rem
|
||||
strong
|
||||
color: currentColor
|
||||
|
||||
.bd-footer-donation-action
|
||||
@extend %center
|
||||
height: 70px
|
||||
.bd-github-button
|
||||
margin-right: 0.5rem
|
||||
.bd-github-button,
|
||||
.bd-patreon-button
|
||||
flex-shrink: 0
|
||||
.paypal-form
|
||||
height: 30px
|
||||
img
|
||||
display: block
|
||||
|
||||
// Stars
|
||||
|
||||
$star-figure-height: 156px
|
||||
|
||||
.bd-footer-stars
|
||||
margin-top: 2.5rem
|
||||
+tablet
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
||||
.bd-footer-star
|
||||
@extend %bd-footer-box
|
||||
transition-duration: $speed
|
||||
transition-property: box-shadow, transform
|
||||
will-change: box-shadow, transform
|
||||
+mobile
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
+tablet
|
||||
width: calc(33.3333% - 2rem)
|
||||
&:hover
|
||||
box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1)
|
||||
transform: translateY(-0.5rem)
|
||||
.bd-footer-title,
|
||||
.bd-footer-subtitle
|
||||
color: $link
|
||||
&.bd-is-expo,
|
||||
&.bd-is-love
|
||||
padding-bottom: $star-figure-height
|
||||
.bd-footer-title
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
.icon
|
||||
margin-right: 0.25em
|
||||
&.bd-is-expo
|
||||
background-image: url("/images/footer/expo-examples.png")
|
||||
background-repeat: repeat-x
|
||||
background-position: bottom center
|
||||
background-size: 352px $star-figure-height
|
||||
&.bd-is-love
|
||||
background-image: url("/images/footer/love.png")
|
||||
background-repeat: no-repeat
|
||||
background-position: bottom center
|
||||
background-size: 440px 180px
|
||||
|
||||
.bd-footer-star-header
|
||||
padding: 1.5rem
|
||||
|
||||
.bd-footer-star-figure
|
||||
@extend %center
|
||||
height: $star-figure-height
|
||||
margin-top: -1rem
|
||||
|
||||
// Links
|
||||
|
||||
.bd-footer-links
|
||||
margin-top: 6rem
|
||||
padding-bottom: 6rem
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link
|
||||
|
||||
.bd-footer-link-title
|
||||
color: $text-strong
|
||||
font-size: 1.25rem
|
||||
font-weight: $weight-semibold
|
||||
&:not(:first-child)
|
||||
margin-top: 1.5em
|
||||
|
||||
.bd-footer-link
|
||||
margin-top: 0.5rem
|
||||
&.bd-is-more
|
||||
font-size: 0.875rem
|
||||
a:not(:hover)
|
||||
color: $border-hover
|
||||
&.bd-has-subtitle
|
||||
a
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
strong
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
font-weight: unset
|
||||
em
|
||||
display: block
|
||||
font-size: 0.875rem
|
||||
font-style: normal
|
||||
&:not(:hover)
|
||||
em
|
||||
color: $border-hover
|
||||
+mobile
|
||||
flex-wrap: wrap
|
||||
margin-top: 1rem
|
||||
em
|
||||
width: 100%
|
||||
+tablet
|
||||
em
|
||||
margin-left: 1rem
|
||||
text-align: right
|
||||
|
||||
.bd-footer-link-icon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin-right: 0.5em
|
||||
text-align: center
|
||||
width: 1em
|
||||
184
docs/_sass/old/global.sass
Normal file
184
docs/_sass/old/global.sass
Normal file
@@ -0,0 +1,184 @@
|
||||
svg
|
||||
max-height: 100%
|
||||
max-width: 100%
|
||||
|
||||
.bd-notice
|
||||
background-color: $primary
|
||||
color: $primary-invert
|
||||
padding: 1em
|
||||
text-align: center
|
||||
|
||||
.bd-notice-body
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
a,
|
||||
strong
|
||||
color: currentColor
|
||||
a
|
||||
border-bottom: 1px solid rgba($scheme-main, 0.5)
|
||||
padding-bottom: 2px
|
||||
&:hover
|
||||
border-bottom-color: $scheme-main
|
||||
span
|
||||
margin: 0 0.25em
|
||||
opacity: 0.5
|
||||
|
||||
+mobile
|
||||
.bd-notice
|
||||
font-size: 0.75rem
|
||||
.bd-notice-body
|
||||
flex-wrap: wrap
|
||||
p:first-child
|
||||
width: 100%
|
||||
|
||||
+tablet
|
||||
.bd-notice-body
|
||||
p:first-child
|
||||
margin-right: 1em
|
||||
|
||||
$github-pink: #ea4aaa
|
||||
.bd-github-button
|
||||
background-color: $github-pink
|
||||
// background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%)
|
||||
border-color: $github-pink !important
|
||||
// color: #24292e
|
||||
color: #fff
|
||||
font-size: 0.875rem
|
||||
height: auto
|
||||
padding: calc(0.5em - 1px) 1em
|
||||
position: relative
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
margin-top: -2px
|
||||
.icon
|
||||
color: inherit
|
||||
.tag
|
||||
font-size: 0.5rem
|
||||
font-style: normal
|
||||
margin: -1px -8px 0 7px
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: darken($github-pink, 5%)
|
||||
&:active
|
||||
background-color: darken($github-pink, 10%)
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active
|
||||
color: #fff
|
||||
// background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%)
|
||||
// background-position: -.5em
|
||||
// border-color: #1b1f2359
|
||||
|
||||
.bd-patreon-button
|
||||
display: inline-block
|
||||
position: relative
|
||||
vertical-align: top
|
||||
img
|
||||
border-radius: $radius
|
||||
display: block
|
||||
max-height: none !important
|
||||
&:hover
|
||||
&::after
|
||||
+overlay
|
||||
background-color: rgba(#000, 0.05)
|
||||
border-radius: $radius
|
||||
content: ""
|
||||
display: block
|
||||
|
||||
$carbon-spacing: 1rem
|
||||
$carbon-shadow-size: 0.75rem
|
||||
$carbon-image-height: 100px
|
||||
$carbon-image-width: 130px
|
||||
$carbon-poweredby-height: 20px
|
||||
|
||||
#carboncontainer
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: $carbon-width
|
||||
min-height: $carbon-height + $carbon-poweredby-height
|
||||
min-width: 280px
|
||||
|
||||
#carbon
|
||||
flex-grow: 1
|
||||
min-height: $carbon-height
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
background-color: $scheme-main
|
||||
box-shadow: 0 0 0 $carbon-shadow-size $scheme-main
|
||||
+tablet
|
||||
width: $carbon-width
|
||||
|
||||
#carbonads
|
||||
font-size: 14px
|
||||
text-align: left
|
||||
a,
|
||||
span
|
||||
display: block
|
||||
.carbon-wrap
|
||||
min-height: $carbon-height
|
||||
position: relative
|
||||
&:hover
|
||||
.carbon-img::after
|
||||
background-color: rgba(#000, 0.05)
|
||||
content: ""
|
||||
display: block
|
||||
height: $carbon-height
|
||||
left: 0
|
||||
position: absolute
|
||||
right: $carbon-spacing
|
||||
top: 0
|
||||
.carbon-img
|
||||
bottom: 0
|
||||
float: left
|
||||
left: 0
|
||||
min-height: $carbon-height
|
||||
padding: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
width: calc(#{$carbon-image-width} + #{$carbon-spacing})
|
||||
img
|
||||
display: block
|
||||
height: $carbon-image-height
|
||||
width: $carbon-image-width
|
||||
&:hover
|
||||
& + .carbon-text
|
||||
color: $link
|
||||
&:active
|
||||
opacity: 0.8
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
line-height: 20px
|
||||
min-height: $carbon-height
|
||||
padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
|
||||
&:hover
|
||||
color: $link
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $border-hover
|
||||
display: inline
|
||||
font-size: $size-small
|
||||
line-height: $carbon-poweredby-height
|
||||
position: absolute
|
||||
right: 0
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
+until($fullhd)
|
||||
.bd-navbar-icon
|
||||
display: none
|
||||
|
||||
+until($widescreen)
|
||||
.bd-navbar .bd-navbar-item-backers
|
||||
display: none
|
||||
|
||||
+widescreen
|
||||
#moreDropdown
|
||||
.navbar-item:first-child,
|
||||
.navbar-divider:nth-child(2)
|
||||
display: none
|
||||
51
docs/_sass/old/header.sass
Normal file
51
docs/_sass/old/header.sass
Normal file
@@ -0,0 +1,51 @@
|
||||
#github
|
||||
color: $github
|
||||
border-color: $github
|
||||
&:hover
|
||||
background: $github
|
||||
border-color: $github
|
||||
color: $scheme-main
|
||||
|
||||
.bd-tw-button
|
||||
background-color: $twitter
|
||||
color: $scheme-main
|
||||
border-color: transparent !important
|
||||
&:hover
|
||||
background-color: darken($twitter, 2.5%)
|
||||
color: $scheme-main
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: darken($twitter, 5%)
|
||||
color: $scheme-main
|
||||
|
||||
#moreDropdown
|
||||
.navbar-item
|
||||
padding-left: 3em
|
||||
position: relative
|
||||
.icon
|
||||
left: 1rem
|
||||
position: absolute
|
||||
text-align: center
|
||||
top: 0.375rem
|
||||
width: 1em
|
||||
|
||||
#moreDropdownBootstrap
|
||||
.icon
|
||||
color: $bootstrap
|
||||
|
||||
#moreDropdownPatreon
|
||||
.icon
|
||||
color: $patreon
|
||||
|
||||
+desktop
|
||||
#blogDropdown
|
||||
width: 17rem
|
||||
.navbar-item
|
||||
white-space: normal
|
||||
#moreDropdown
|
||||
width: 14rem
|
||||
.navbar-item
|
||||
padding-right: 1rem
|
||||
white-space: normal
|
||||
.level
|
||||
flex-grow: 1
|
||||
140
docs/_sass/old/highlight.sass
Normal file
140
docs/_sass/old/highlight.sass
Normal file
@@ -0,0 +1,140 @@
|
||||
.highlight
|
||||
background-color: $pre-background
|
||||
border-radius: $radius-large
|
||||
color: #586e75
|
||||
pre
|
||||
background-color: transparent
|
||||
font-size: 0.875em
|
||||
line-height: 1.375
|
||||
.c
|
||||
color: #93a1a1
|
||||
.err,
|
||||
.g
|
||||
color: #586e75
|
||||
.k
|
||||
color: #859900
|
||||
.l,
|
||||
.n
|
||||
color: #586e75
|
||||
.o
|
||||
color: #859900
|
||||
.x
|
||||
color: #cb4b16
|
||||
.p
|
||||
color: #586e75
|
||||
.cm
|
||||
color: #93a1a1
|
||||
.cp
|
||||
color: #859900
|
||||
.c1
|
||||
color: #93a1a1
|
||||
.cs
|
||||
color: #859900
|
||||
.gd
|
||||
color: #2aa198
|
||||
.ge
|
||||
color: #586e75
|
||||
font-style: italic
|
||||
.gr
|
||||
color: #dc322f
|
||||
.gh
|
||||
color: #cb4b16
|
||||
.gi
|
||||
color: #859900
|
||||
.go,
|
||||
.gp
|
||||
color: #586e75
|
||||
.gs
|
||||
color: #586e75
|
||||
font-weight: bold
|
||||
.gu
|
||||
color: #cb4b16
|
||||
.gt
|
||||
color: #586e75
|
||||
.kc
|
||||
color: #cb4b16
|
||||
.kd
|
||||
color: #268bd2
|
||||
.kn,
|
||||
.kp
|
||||
color: #859900
|
||||
.kr
|
||||
color: #268bd2
|
||||
.kt
|
||||
color: #dc322f
|
||||
.ld
|
||||
color: #586e75
|
||||
.m,
|
||||
.s
|
||||
color: #2aa198
|
||||
.na
|
||||
color: #B58900
|
||||
.nb
|
||||
color: #586e75
|
||||
.nc
|
||||
color: #268bd2
|
||||
.no
|
||||
color: #cb4b16
|
||||
.nd
|
||||
color: #268bd2
|
||||
.ni,
|
||||
.ne
|
||||
color: #cb4b16
|
||||
.nf
|
||||
color: #268bd2
|
||||
.nl,
|
||||
.nn,
|
||||
.nx,
|
||||
.py
|
||||
color: #586e75
|
||||
.nt,
|
||||
.nv
|
||||
color: #268bd2
|
||||
.ow
|
||||
color: #859900
|
||||
.w
|
||||
color: #586e75
|
||||
.mf,
|
||||
.mh,
|
||||
.mi,
|
||||
.mo
|
||||
color: #2aa198
|
||||
.sb
|
||||
color: #93a1a1
|
||||
.sc
|
||||
color: #2aa198
|
||||
.sd
|
||||
color: #586e75
|
||||
.s2
|
||||
color: #2aa198
|
||||
.se
|
||||
color: #cb4b16
|
||||
.sh
|
||||
color: #586e75
|
||||
.si,
|
||||
.sx
|
||||
color: #2aa198
|
||||
.sr
|
||||
color: #dc322f
|
||||
.s1,
|
||||
.ss
|
||||
color: #2aa198
|
||||
.bp,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi
|
||||
color: #268bd2
|
||||
.il
|
||||
color: #2aa198
|
||||
|
||||
.content .highlight
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
text-align: left
|
||||
&:not(:first-child)
|
||||
margin-top: 1em
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1em
|
||||
|
||||
.content li .highlight
|
||||
margin-top: 0.5em
|
||||
432
docs/_sass/old/index.sass
Normal file
432
docs/_sass/old/index.sass
Normal file
@@ -0,0 +1,432 @@
|
||||
// Index common
|
||||
|
||||
+mobile
|
||||
.bd-index-buttons
|
||||
margin-top: 3rem
|
||||
|
||||
+tablet
|
||||
.bd-index-buttons
|
||||
margin-top: 6rem
|
||||
|
||||
.bd-index-header
|
||||
text-align: center
|
||||
a,
|
||||
strong
|
||||
transition-duration: $speed
|
||||
transition-property: color
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $blue
|
||||
strong
|
||||
color: $link
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
.title
|
||||
strong
|
||||
color: $primary
|
||||
.subtitle
|
||||
color: $border-hover !important
|
||||
strong
|
||||
color: currentColor
|
||||
&:not(:last-child)
|
||||
margin-bottom: 3rem
|
||||
&.bd-is-left
|
||||
text-align: left
|
||||
|
||||
// JS
|
||||
|
||||
.bd-index-js-tweet
|
||||
.bd-tw
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
// Customize
|
||||
|
||||
.bd-index-custom-tweet
|
||||
.bd-tw
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
.bd-index-custom-title
|
||||
color: $border-hover
|
||||
|
||||
.bd-index-custom-example
|
||||
padding: 1rem
|
||||
.subtitle
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.bd-index-custom.bd-is-after
|
||||
color: $brown
|
||||
font-family: "Nunito", serif
|
||||
margin-top: 0.5rem
|
||||
a
|
||||
color: $pink
|
||||
&:hover
|
||||
color: #363636
|
||||
.subtitle
|
||||
color: $brown
|
||||
.input,
|
||||
.select select
|
||||
background-color: $beige-lighter
|
||||
border-color: transparent
|
||||
border-width: 2px
|
||||
box-shadow: none
|
||||
font-family: "Nunito", serif
|
||||
&:hover
|
||||
border-color: $beige-light
|
||||
&:focus
|
||||
border-color: $pink
|
||||
box-shadow: 0 0 0 0.125em rgba($pink, 0.25)
|
||||
.select
|
||||
&:not(.is-multiple):not(:hover)
|
||||
&::after
|
||||
border-color: $pink
|
||||
.button
|
||||
&.is-primary
|
||||
background-color: $mauve
|
||||
color: $scheme-main
|
||||
&:hover
|
||||
background-color: darken($mauve, 2.5%)
|
||||
&:active
|
||||
background-color: darken($mauve, 5%)
|
||||
&.is-link
|
||||
background-color: $pink
|
||||
color: $scheme-main
|
||||
&:hover
|
||||
background-color: darken($pink, 2.5%)
|
||||
&:active
|
||||
background-color: darken($pink, 5%)
|
||||
+selection
|
||||
background-color: $pink
|
||||
color: $scheme-main
|
||||
|
||||
// Fullscreen
|
||||
|
||||
.bd-index-fullscreen
|
||||
.tabs
|
||||
a
|
||||
color: $border-hover !important
|
||||
|
||||
// Columns
|
||||
|
||||
#grid
|
||||
.notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
.bd-columns-tools
|
||||
margin-top: 3rem
|
||||
|
||||
.bd-columns-tool
|
||||
@extend %center
|
||||
&.bd-is-try
|
||||
.buttons
|
||||
justify-content: center
|
||||
.button
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
|
||||
#markup
|
||||
width: 100%
|
||||
.highlight pre
|
||||
max-height: none
|
||||
|
||||
#message
|
||||
display: none
|
||||
margin-top: 3rem
|
||||
|
||||
+mobile
|
||||
.bd-columns-tool
|
||||
&.bd-is-markup
|
||||
margin-top: 3rem
|
||||
|
||||
+tablet
|
||||
.bd-columns-tools
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
.bd-columns-tool
|
||||
width: 50%
|
||||
&.bd-is-try
|
||||
padding-top: 60px
|
||||
|
||||
// Focus
|
||||
|
||||
.bd-focus
|
||||
margin: 6rem auto 0
|
||||
max-width: $intro-width
|
||||
|
||||
.bd-focus-item
|
||||
@extend %link-before-background
|
||||
border-radius: $radius-large
|
||||
padding-top: 1.25rem
|
||||
position: relative
|
||||
.title a,
|
||||
.subtitle
|
||||
transition-duration: $speed * 2
|
||||
transition-property: color
|
||||
.title
|
||||
position: relative
|
||||
transition-duration: $speed * 2
|
||||
transition-property: color
|
||||
.subtitle
|
||||
color: $border-hover
|
||||
position: relative
|
||||
strong
|
||||
color: currentColor
|
||||
.subtitle
|
||||
color: $text
|
||||
&:nth-child(1):hover
|
||||
.title
|
||||
color: $orange
|
||||
&:nth-child(2):hover
|
||||
.title
|
||||
color: $success
|
||||
&:nth-child(3):hover
|
||||
.title
|
||||
color: $link
|
||||
&:nth-child(4):hover
|
||||
.title
|
||||
color: $scheme-invert
|
||||
|
||||
.bd-focus-icon
|
||||
position: relative
|
||||
|
||||
.bd-focus-mobile
|
||||
color: $purple
|
||||
margin-right: -20px
|
||||
|
||||
.bd-focus-tablet
|
||||
color: $red
|
||||
|
||||
.bd-focus-desktop
|
||||
color: $orange
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
.bd-focus-cubes
|
||||
position: relative
|
||||
height: 3rem
|
||||
margin: 0 auto
|
||||
top: -0.5rem
|
||||
width: 3rem
|
||||
|
||||
.bd-focus-cube
|
||||
color: $green
|
||||
position: absolute
|
||||
|
||||
.bd-focus-cube-1
|
||||
left: 0
|
||||
top: 0
|
||||
|
||||
.bd-focus-cube-2
|
||||
left: -1rem
|
||||
top: 23px
|
||||
|
||||
.bd-focus-cube-3
|
||||
left: 1rem
|
||||
top: 23px
|
||||
|
||||
.bd-focus-css3
|
||||
color: $blue
|
||||
|
||||
.bd-focus-github
|
||||
color: $github
|
||||
|
||||
// Intro
|
||||
|
||||
.intro-content
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 640px
|
||||
|
||||
.intro-title
|
||||
font-weight: $weight-normal
|
||||
line-height: 1.375
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.intro-ghbtns
|
||||
margin-bottom: 16px
|
||||
min-height: 30px
|
||||
iframe,
|
||||
a,
|
||||
img
|
||||
height: 30px
|
||||
a
|
||||
display: inline-block
|
||||
min-width: 100px
|
||||
vertical-align: top
|
||||
img
|
||||
display: block
|
||||
|
||||
.intro-npm
|
||||
background: $black-ter
|
||||
border-radius: $radius
|
||||
color: $white
|
||||
display: flex
|
||||
font-size: 15px
|
||||
justify-content: space-between
|
||||
line-height: 20px
|
||||
padding: 15px 25px
|
||||
position: relative
|
||||
code
|
||||
font-size: inherit
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
-webkit-font-smoothing: antialiased
|
||||
.intro-npm-copy
|
||||
border-radius: $radius
|
||||
color: $yellow
|
||||
cursor: pointer
|
||||
margin: -2px -7px -3px
|
||||
padding: 2px 7px 3px
|
||||
&:hover
|
||||
background-color: $yellow
|
||||
color: $black-ter
|
||||
&.is-success,
|
||||
&.is-error
|
||||
color: $scheme-main
|
||||
pointer-events: none
|
||||
text-decoration: none
|
||||
&.is-success
|
||||
background-color: $green
|
||||
&.is-error
|
||||
background-color: $red
|
||||
\::-moz-selection
|
||||
background: $yellow
|
||||
color: $scheme-invert-ter
|
||||
\::selection
|
||||
background: $yellow
|
||||
color: $scheme-invert-ter
|
||||
|
||||
.intro-buttons
|
||||
margin-top: 1.5rem
|
||||
.button
|
||||
padding-left: 1.375em
|
||||
padding-right: 1.375em
|
||||
|
||||
.intro-video
|
||||
background-color: $scheme-main
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 640px
|
||||
position: relative
|
||||
&.has-loaded
|
||||
.intro-spinner
|
||||
display: none
|
||||
.intro-iframe
|
||||
opacity: 1
|
||||
|
||||
@keyframes introSpinner
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(1.14)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
.intro-spinner,
|
||||
.intro-shadow
|
||||
animation-duration: 500ms
|
||||
animation-easing-function: ease-out
|
||||
animation-fill-mode: both
|
||||
transform-origin: center
|
||||
|
||||
.intro-spinner
|
||||
+overlay
|
||||
animation-name: introSpinner
|
||||
&::before
|
||||
+loader
|
||||
border-bottom-color: $primary
|
||||
border-left-color: $primary
|
||||
height: 1.5em
|
||||
left: calc(50% - 0.75em)
|
||||
position: absolute
|
||||
top: calc(50% - 0.75em)
|
||||
width: 1.5em
|
||||
|
||||
@keyframes introShadow
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0.86)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
.intro-shadow
|
||||
+overlay
|
||||
background-color: #776e70
|
||||
background-position: center center
|
||||
background-repeat: no-repeat
|
||||
background-size: cover
|
||||
box-shadow: 0 1.5rem 3rem rgba(#000, 0.2)
|
||||
animation-name: introShadow
|
||||
|
||||
.intro-iframe
|
||||
opacity: 0
|
||||
// padding-top: 52.8125%
|
||||
padding-top: 56.25%
|
||||
position: relative
|
||||
transition-duration: 500ms
|
||||
transition-property: opacity
|
||||
iframe
|
||||
height: 100%
|
||||
left: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 100%
|
||||
|
||||
.intro-author
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
margin-top: 40px
|
||||
text-align: center
|
||||
a
|
||||
color: $text-strong
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
span
|
||||
opacity: 0.5
|
||||
transition: 100ms opacity
|
||||
&:hover
|
||||
opacity: 1
|
||||
|
||||
.intro-carbon
|
||||
margin-top: 1.5rem
|
||||
|
||||
+mobile
|
||||
.intro-buttons
|
||||
.button
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-light
|
||||
margin-top: 0.5rem
|
||||
|
||||
+tablet
|
||||
.intro-title
|
||||
font-size: 2.25rem
|
||||
.intro-buttons
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
||||
+touch
|
||||
.intro-column.is-video
|
||||
margin-top: 3rem
|
||||
|
||||
+desktop
|
||||
.intro-columns
|
||||
display: flex
|
||||
justify-content: center
|
||||
.intro-column
|
||||
width: calc(50% - 1.5rem)
|
||||
&.is-content
|
||||
margin-right: 1.5rem
|
||||
&.is-video
|
||||
margin-left: 1.5rem
|
||||
.intro-content
|
||||
max-width: 440px
|
||||
.intro-title
|
||||
margin-top: -11px
|
||||
&:not(:last-child)
|
||||
margin-bottom: 10px
|
||||
32
docs/_sass/old/klmn.sass
Normal file
32
docs/_sass/old/klmn.sass
Normal file
@@ -0,0 +1,32 @@
|
||||
.bd-klmn
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.bd-klmn-gaps
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
margin-bottom: 1.25rem
|
||||
|
||||
.bd-klmn-label
|
||||
margin: 0.25rem auto 0.25rem 0
|
||||
|
||||
.bd-klmn-gap
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
color: $red
|
||||
font-family: $family-monospace
|
||||
font-size: 0.75rem
|
||||
margin: 0.25rem 0 0.25rem 0.5rem
|
||||
padding: 0.375em 0.75em
|
||||
text-align: center
|
||||
vertical-align: middle !important
|
||||
white-space: nowrap
|
||||
&.bd-is-selected
|
||||
background-color: $green
|
||||
color: $scheme-main
|
||||
|
||||
.bd-klmn-columns:last-child
|
||||
.bd-notification
|
||||
font-size: 0.75rem
|
||||
white-space: nowrap
|
||||
127
docs/_sass/old/love.sass
Normal file
127
docs/_sass/old/love.sass
Normal file
@@ -0,0 +1,127 @@
|
||||
.bd-testimonials
|
||||
background-color: $background
|
||||
|
||||
.bd-testimonial
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
.bd-testimonial-tweet
|
||||
background-color: $scheme-main
|
||||
|
||||
.bd-more-loves
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-top: 1.5rem
|
||||
text-align: center
|
||||
.button
|
||||
height: auto
|
||||
padding: 0.75em 1.5em
|
||||
span
|
||||
transform-origin: center center
|
||||
transition: transform $speed $easing
|
||||
&:hover
|
||||
span
|
||||
transform: scale(1.04)
|
||||
|
||||
+mobile
|
||||
.bd-testimonials
|
||||
padding: 1.5rem
|
||||
.bd-testimonial
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+tablet
|
||||
.bd-testimonials
|
||||
padding: 3rem
|
||||
.bd-testimonial + .bd-testimonial
|
||||
margin-top: 1.5rem
|
||||
|
||||
+desktop
|
||||
.bd-testimonials
|
||||
min-height: 595px
|
||||
|
||||
+widescreen
|
||||
.bd-testimonials
|
||||
min-height: 653px
|
||||
|
||||
+fullhd
|
||||
.bd-testimonials
|
||||
min-height: 632px
|
||||
|
||||
.bd-rainbow
|
||||
animation: rainbow 8s ease infinite
|
||||
background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
|
||||
background-size: 800% 800%
|
||||
|
||||
.hero.bd-is-love
|
||||
.title,
|
||||
.subtitle
|
||||
color: $scheme-main
|
||||
|
||||
@keyframes rainbow
|
||||
0%
|
||||
background-position: 1% 80%
|
||||
50%
|
||||
background-position: 99% 20%
|
||||
100%
|
||||
background-position: 1% 80%
|
||||
|
||||
.bd-hug
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
+mobile
|
||||
.bd-hug
|
||||
margin: 1.5rem
|
||||
.bd-embrace
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: 1.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
.bd-embrace-button
|
||||
margin-top: 0.75rem
|
||||
|
||||
+tablet
|
||||
.bd-embrace
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
&:not(:first-child)
|
||||
margin-top: 3rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 3rem
|
||||
.bd-embrace-button
|
||||
margin-left: 1.5rem
|
||||
.bd-hugs
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
padding-bottom: 3rem
|
||||
.bd-hug
|
||||
margin-top: 1.5rem
|
||||
width: calc(33.3333% - 1rem)
|
||||
&:nth-child(1),
|
||||
&:nth-child(2),
|
||||
&:nth-child(3)
|
||||
margin-top: 0
|
||||
&:nth-child(3n-1),
|
||||
&:nth-child(3n)
|
||||
margin-left: 1.5rem
|
||||
|
||||
.bd-shoutout
|
||||
background-color: $background
|
||||
padding: 2rem
|
||||
text-align: center
|
||||
&:not(:last-child)
|
||||
margin-bottom: 3rem
|
||||
|
||||
.bd-shoutout-text
|
||||
&.title
|
||||
opacity: 0.8
|
||||
&.subtitle
|
||||
opacity: 0.5
|
||||
|
||||
.bd-shoutout-button
|
||||
margin-top: -0.75rem
|
||||
0
docs/_sass/old/main.sass
Normal file
0
docs/_sass/old/main.sass
Normal file
99
docs/_sass/old/native.sass
Normal file
99
docs/_sass/old/native.sass
Normal file
@@ -0,0 +1,99 @@
|
||||
.native-js
|
||||
display: none
|
||||
font-size: 1rem
|
||||
opacity: 0
|
||||
position: relative
|
||||
visibility: hidden
|
||||
&::before
|
||||
+overlay
|
||||
background-color: #000
|
||||
bottom: 0
|
||||
content: ""
|
||||
display: block
|
||||
left: 0
|
||||
opacity: 0.02
|
||||
pointer-events: none
|
||||
right: 0
|
||||
top: 0
|
||||
|
||||
.native-show
|
||||
display: block
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
|
||||
.native-flex
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: 2em
|
||||
position: relative
|
||||
text-decoration: none
|
||||
&:hover
|
||||
.native-cta
|
||||
box-shadow: 0 1rem 2rem 0 rgba($scheme-invert, 0.1)
|
||||
transform: translateY(-0.25rem)
|
||||
|
||||
.native-img
|
||||
border-radius: 3px
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
height: 50px
|
||||
width: 125px
|
||||
|
||||
.native-details
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
|
||||
.native-main
|
||||
align-items: center
|
||||
flex-grow: 0
|
||||
flex-shrink: 1
|
||||
max-width: 640px
|
||||
|
||||
.native-company
|
||||
display: block
|
||||
font-size: 0.625em
|
||||
letter-spacing: 2px
|
||||
margin-bottom: 4px
|
||||
text-transform: uppercase
|
||||
|
||||
.native-desc
|
||||
display: block
|
||||
|
||||
.native-cta
|
||||
border: none
|
||||
box-shadow: 0 0.5rem 1rem 0 rgba($scheme-invert, 0.2)
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
font-weight: $weight-semibold
|
||||
height: auto
|
||||
padding: 0.5em 1em
|
||||
transition-duration: $speed * 2
|
||||
transition-property: box-shadow, transform
|
||||
will-change: box-shadow, transform
|
||||
|
||||
$native-bp: 600px
|
||||
|
||||
+until($native-bp)
|
||||
.native-flex
|
||||
display: block
|
||||
text-align: center
|
||||
.native-main
|
||||
margin-bottom: 2em
|
||||
.native-details
|
||||
margin: 1em
|
||||
|
||||
+from($native-bp)
|
||||
.native-flex
|
||||
display: flex
|
||||
padding: 4em
|
||||
text-align: left
|
||||
.native-main
|
||||
display: flex
|
||||
margin-right: 2em
|
||||
.native-details
|
||||
margin-left: 2em
|
||||
|
||||
+widescreen
|
||||
.native-js
|
||||
font-size: 1.25rem
|
||||
21
docs/_sass/old/override.sass
Normal file
21
docs/_sass/old/override.sass
Normal file
@@ -0,0 +1,21 @@
|
||||
.content
|
||||
.bd-spaced
|
||||
li + li
|
||||
margin-top: 1em
|
||||
.highlighter-rouge
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
body.page-grid .column > .notification
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
text-align: center
|
||||
|
||||
a.navbar-item
|
||||
& > .icon:not(:last-child)
|
||||
margin-left: -0.25em
|
||||
margin-right: 0.25em
|
||||
|
||||
+tablet
|
||||
.header-item .button + .button
|
||||
margin-left: 0.75rem
|
||||
95
docs/_sass/old/patreon.sass
Normal file
95
docs/_sass/old/patreon.sass
Normal file
@@ -0,0 +1,95 @@
|
||||
.bd-side-sponsrs
|
||||
margin-top: 3rem
|
||||
text-align: center
|
||||
|
||||
.bd-side-sponsor-label,
|
||||
.bd-banner-label
|
||||
color: $border-hover
|
||||
font-size: 0.75rem
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
.bd-side-sponsor
|
||||
@extend %block
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 30px
|
||||
justify-content: center
|
||||
vertical-align: top
|
||||
img
|
||||
display: block
|
||||
max-height: 100%
|
||||
width: auto
|
||||
|
||||
.bd-banner
|
||||
border-radius: $radius-large
|
||||
display: block
|
||||
margin-top: 3rem
|
||||
padding-bottom: 1.5rem
|
||||
position: relative
|
||||
text-align: center
|
||||
transition-duration: $speed
|
||||
transition-property: border-color, color
|
||||
strong
|
||||
color: currentColor
|
||||
.tag
|
||||
margin-bottom: 0.25em
|
||||
&.is-patreon
|
||||
background-color: $patreon-blue
|
||||
color: $scheme-main
|
||||
// &.is-fortyfour
|
||||
// background-color: $scheme-main
|
||||
// border: 2px solid $background
|
||||
.button
|
||||
transform-origin: center
|
||||
transition-duration: $speed
|
||||
transition-property: transform
|
||||
&:hover
|
||||
border-color: $link
|
||||
color: $link
|
||||
.bd-banner-title
|
||||
color: currentColor
|
||||
.button
|
||||
transform: scale(1.05)
|
||||
|
||||
.bd-banner-background
|
||||
+overlay
|
||||
background-image: url("/images/fortyfour-background.jpg")
|
||||
background-position: center center
|
||||
background-size: cover
|
||||
opacity: 0.5
|
||||
|
||||
.bd-banner-title
|
||||
color: $text-strong
|
||||
font-size: 1.25em
|
||||
font-weight: $weight-semibold
|
||||
line-height: 1.25
|
||||
margin-bottom: 0.25em
|
||||
|
||||
.bd-banner-text
|
||||
display: none
|
||||
font-size: 0.875em
|
||||
line-height: 1.25
|
||||
margin-bottom: 0.5rem
|
||||
position: relative
|
||||
|
||||
.bd-banner-image
|
||||
height: 176px
|
||||
margin-bottom: 1rem
|
||||
margin-top: 1rem
|
||||
img
|
||||
display: inline-block
|
||||
// left: -8px
|
||||
// position: relative
|
||||
vertical-align: top
|
||||
|
||||
.bd-banner-button
|
||||
display: inline-block
|
||||
flex-shrink: 0
|
||||
height: 34px
|
||||
position: relative
|
||||
width: 145px
|
||||
img
|
||||
max-height: 100%
|
||||
|
||||
.hero.bd-is-patreon
|
||||
background-color: $patreon
|
||||
343
docs/_sass/old/specific.sass
Normal file
343
docs/_sass/old/specific.sass
Normal file
@@ -0,0 +1,343 @@
|
||||
.bd-spacing-table
|
||||
&:hover
|
||||
color: $border
|
||||
code
|
||||
background: none
|
||||
color: $border
|
||||
.bd-current-row
|
||||
background-color: $background
|
||||
&:first-child
|
||||
background-color: $danger-light
|
||||
color: $text-strong
|
||||
code
|
||||
background-color: $danger
|
||||
color: $danger-invert
|
||||
&.bd-current-column
|
||||
background-color: $primary-light
|
||||
color: $text-strong
|
||||
code
|
||||
background-color: $primary
|
||||
color: $primary-invert
|
||||
.bd-current-column
|
||||
background-color: $background
|
||||
.bd-current-value
|
||||
background-color: $danger-light
|
||||
code
|
||||
background-color: $danger
|
||||
color: $danger-invert
|
||||
|
||||
+selection
|
||||
background-color: $primary
|
||||
color: $primary-invert
|
||||
|
||||
.bd-post-container
|
||||
margin: 0 auto
|
||||
max-width: 56rem
|
||||
|
||||
.bd-post-fullwidth
|
||||
text-align: center
|
||||
|
||||
+from(60rem)
|
||||
.bd-post-fullwidth
|
||||
margin-left: calc(28rem - 50vw)
|
||||
margin-right: calc(28rem - 50vw)
|
||||
|
||||
.bd-post
|
||||
.table
|
||||
font-size: 1rem
|
||||
.bd-anchor-title
|
||||
margin-top: 0 !important
|
||||
|
||||
.bd-has-drawing
|
||||
position: relative
|
||||
|
||||
.bd-drawing
|
||||
display: none
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
&.bd-is-try-it-out
|
||||
bottom: 100%
|
||||
right: 100%
|
||||
&.bd-is-love-letters
|
||||
bottom: 110%
|
||||
right: 10%
|
||||
&.bd-is-crazy
|
||||
left: -10%
|
||||
top: 110%
|
||||
&.bd-is-customize
|
||||
right: -10%
|
||||
top: 105%
|
||||
&.bd-is-opinion-free
|
||||
right: 100%
|
||||
top: 110%
|
||||
&.bd-is-join-us
|
||||
bottom: 80%
|
||||
left: 100%
|
||||
&.bd-is-spam-free
|
||||
bottom: 100%
|
||||
right: 90%
|
||||
|
||||
+tablet
|
||||
.bd-drawing
|
||||
display: inline
|
||||
|
||||
.bd-links
|
||||
counter-reset: bd-links
|
||||
|
||||
.bd-link
|
||||
border-radius: $radius-large
|
||||
color: $text-light
|
||||
display: block
|
||||
font-size: $size-5
|
||||
padding: 1rem 3rem 1.5rem 5rem
|
||||
position: relative
|
||||
transition-duration: $speed
|
||||
transition-property: background-color, color
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
&:hover
|
||||
background-color: $scheme-main-bis
|
||||
|
||||
.bd-link-surtitle
|
||||
float: right
|
||||
font-size: 0.75em
|
||||
margin-bottom: 1em
|
||||
margin-left: 2em
|
||||
opacity: 0.5
|
||||
padding-top: 0.25em
|
||||
|
||||
.bd-link-name
|
||||
line-height: 1.25
|
||||
margin-bottom: 0.25em
|
||||
position: relative
|
||||
|
||||
.bd-link-figure
|
||||
position: absolute
|
||||
right: calc(100% + 0.75em)
|
||||
text-align: center
|
||||
top: 0
|
||||
min-width: 1.5em
|
||||
|
||||
.bd-link-counter
|
||||
color: $link
|
||||
display: block
|
||||
counter-increment: bd-links
|
||||
font-weight: $weight-normal
|
||||
&::before
|
||||
content: counter(bd-links)
|
||||
|
||||
.bd-link-icon
|
||||
display: block
|
||||
font-size: 2rem
|
||||
width: 1.5em
|
||||
|
||||
.bd-link-more
|
||||
font-size: 0.75em
|
||||
opacity: 0.5
|
||||
|
||||
+mobile
|
||||
.bd-links
|
||||
margin-left: -1.5rem
|
||||
margin-right: -1.5rem
|
||||
.bd-link
|
||||
border-radius: 0
|
||||
padding-right: 1.5rem
|
||||
|
||||
+desktop
|
||||
.bd-links
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
.bd-link
|
||||
width: 50%
|
||||
|
||||
.bd-link-name
|
||||
color: $text-strong
|
||||
font-size: $size-4
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.bd-docs
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
|
||||
.bd-doc
|
||||
margin: 0 3rem 1.5rem 0
|
||||
+mobile
|
||||
min-width: calc(50% - 3rem)
|
||||
+tablet
|
||||
min-width: calc(33.3333% - 3rem)
|
||||
|
||||
.bd-doc-title
|
||||
color: $text-strong
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
.bd-boxes
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
|
||||
.bd-box
|
||||
border: 4px solid $background
|
||||
border-radius: $radius
|
||||
|
||||
.bd-box-header
|
||||
text-align: center
|
||||
|
||||
.bd-typo
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: $main-spacing
|
||||
|
||||
.bd-has-text-rss
|
||||
color: $rss
|
||||
|
||||
.has-text-star
|
||||
color: $star
|
||||
|
||||
// $navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
|
||||
|
||||
// @each $name, $color in $navbar-items
|
||||
// .bd-navbar-item-#{$name}
|
||||
// .icon
|
||||
// color: $color
|
||||
// &:hover
|
||||
// background-color: $color !important
|
||||
// color: #fff !important
|
||||
// .icon
|
||||
// color: currentColor !important
|
||||
|
||||
// .bd-navbar-item-expo
|
||||
// &:hover
|
||||
// color: #8F6900 !important
|
||||
// .icon
|
||||
// color: #F4B300 !important
|
||||
|
||||
.bd-special-shadow
|
||||
background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
|
||||
height: 8px
|
||||
left: 0
|
||||
opacity: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 100%
|
||||
transform: scaleY(0)
|
||||
transform-origin: center top
|
||||
|
||||
+touch
|
||||
.bd-is-clipped-touch
|
||||
overflow: hidden !important
|
||||
|
||||
#images
|
||||
tr
|
||||
td:nth-child(2)
|
||||
width: 320px
|
||||
|
||||
.bd-color
|
||||
border-radius: 2px
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
|
||||
display: inline-block
|
||||
float: left
|
||||
height: 24px
|
||||
margin-right: 8px
|
||||
width: 24px
|
||||
|
||||
.button.bd-is-rss
|
||||
background-color: $rss
|
||||
border-color: transparent
|
||||
color: #fff
|
||||
&:hover
|
||||
background-color: darken($rss, 5%)
|
||||
&:active
|
||||
background-color: darken($rss, 10%)
|
||||
|
||||
.bd-view-all-versions
|
||||
color: $text-light
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.bd-feature-title
|
||||
color: $text-light
|
||||
a
|
||||
border-bottom: 1px solid transparent
|
||||
color: $text-strong
|
||||
&:hover
|
||||
border-bottom-color: $primary
|
||||
|
||||
.bd-anchor-title
|
||||
padding-top: 1.5rem
|
||||
position: relative
|
||||
+until($widescreen)
|
||||
padding-left: 2rem
|
||||
|
||||
.bd-anchor-link
|
||||
position: absolute
|
||||
right: calc(100% + 1rem)
|
||||
top: 1.5rem
|
||||
+until($widescreen)
|
||||
left: 0
|
||||
right: auto
|
||||
|
||||
.has-text-orange
|
||||
color: $orange !important
|
||||
|
||||
.has-text-purple
|
||||
color: $purple !important
|
||||
|
||||
.has-text-bootstrap
|
||||
color: $bootstrap !important
|
||||
|
||||
.has-text-patreon
|
||||
color: $patreon !important
|
||||
|
||||
.bd-emoji
|
||||
margin-right: 0.5em
|
||||
margin-top: 2px
|
||||
|
||||
.bd-emoji-bis
|
||||
font-size: 1.25em
|
||||
vertical-align: middle
|
||||
|
||||
$notification-background-color: $background !default
|
||||
$notification-radius: $radius !default
|
||||
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
|
||||
.bd-notification
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
color: $text-light
|
||||
font-weight: $weight-semibold
|
||||
padding: 1.25rem 0
|
||||
position: relative
|
||||
text-align: center
|
||||
.title,
|
||||
.subtitle,
|
||||
.content,
|
||||
strong
|
||||
color: currentColor
|
||||
code,
|
||||
pre
|
||||
background-color: rgba($scheme-invert, 0.2)
|
||||
border-radius: $radius
|
||||
color: $scheme-main
|
||||
pre code
|
||||
background-color: transparent
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
|
||||
.bd-icon-size .icon
|
||||
background-color: $yellow
|
||||
|
||||
.bd-mwb-table
|
||||
td
|
||||
vertical-align: middle
|
||||
img
|
||||
vertical-align: middle
|
||||
130
docs/_sass/old/sponsors.sass
Normal file
130
docs/_sass/old/sponsors.sass
Normal file
@@ -0,0 +1,130 @@
|
||||
.bd-sponsors
|
||||
align-items: center
|
||||
display: flex
|
||||
a
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-right: 3rem
|
||||
width: 150px
|
||||
|
||||
.bd-partnrs-list
|
||||
margin: -3rem 0 3rem
|
||||
|
||||
$bd-partner-width: 12rem
|
||||
|
||||
.bd-partner-sponsors
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
justify-content: space-around
|
||||
justify-content: center
|
||||
margin: 0 auto
|
||||
// max-width: (8 * $bd-partner-width)
|
||||
|
||||
.bd-partner-sponsor
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
margin: 0.25rem 1rem
|
||||
// min-height: $carbon-height + $carbon-poweredby-height
|
||||
min-height: 80px
|
||||
text-align: center
|
||||
&.is-text
|
||||
color: $text-light
|
||||
// font-size: 0.875em
|
||||
line-height: 1.25
|
||||
// min-height: 0
|
||||
.bd-sponsor-item
|
||||
display: inline
|
||||
.bd-sponsor-item:before
|
||||
display: none
|
||||
|
||||
.bd-sponsor-item
|
||||
@extend %link-before-background
|
||||
@extend %center
|
||||
flex-grow: 1
|
||||
position: relative
|
||||
strong,
|
||||
img
|
||||
position: relative
|
||||
|
||||
.bd-partnrs
|
||||
background-color: $scheme-main-bis
|
||||
#carbonads
|
||||
.carbon-text
|
||||
padding-bottom: 0
|
||||
.carbon-poweredby
|
||||
display: none
|
||||
|
||||
.bd-partner-title
|
||||
color: $border-hover
|
||||
font-size: 0.875rem
|
||||
margin-bottom: 1rem
|
||||
|
||||
.bd-minis
|
||||
margin-top: 1rem
|
||||
text-align: center
|
||||
|
||||
.bd-minis-title
|
||||
@extend .bd-partner-title
|
||||
@extend %center
|
||||
|
||||
.bd-minis-link
|
||||
@extend %center
|
||||
color: $text-light
|
||||
.icon
|
||||
margin-right: 0.25em
|
||||
strong
|
||||
color: $text-light
|
||||
margin-left: 0.25em
|
||||
|
||||
.bd-minis-list
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
margin: -1rem
|
||||
|
||||
.bd-mini
|
||||
@extend %center
|
||||
box-shadow: 0 5px 10px rgba(black, 0.1)
|
||||
margin: 1rem
|
||||
img
|
||||
display: block
|
||||
|
||||
$bd-partnrs-3: 1040px
|
||||
$bd-partnrs-4: 1130px
|
||||
|
||||
+mobile
|
||||
.bd-minis-list
|
||||
flex-direction: column
|
||||
|
||||
+tablet
|
||||
.bd-partnrs-list
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
.bd-partner
|
||||
&.bd-is-sponsor
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
&.bd-is-carbon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin-left: 1rem
|
||||
width: $carbon-width
|
||||
.bd-partner-sponsor
|
||||
width: $bd-partner-width
|
||||
|
||||
+widescreen
|
||||
// .bd-partnrs
|
||||
// .container
|
||||
// max-width: 1536px
|
||||
.bd-partner
|
||||
&.bd-is-carbon
|
||||
margin-left: 3rem
|
||||
.bd-partner-sponsors
|
||||
min-height: $carbon-height + $carbon-poweredby-height
|
||||
187
docs/_sass/old/twitter.sass
Normal file
187
docs/_sass/old/twitter.sass
Normal file
@@ -0,0 +1,187 @@
|
||||
// $tw-black: #1c2022
|
||||
$tw-black: $text-strong
|
||||
$tw-blue: #2b7bb9
|
||||
$tw-grey: #697882
|
||||
$tw-border: #e1e8ed
|
||||
|
||||
.bd-tws-home
|
||||
background-color: $scheme-main-bis
|
||||
|
||||
.bd-tw
|
||||
background-color: $scheme-main-bis
|
||||
border-radius: $radius-large
|
||||
color: $tw-grey
|
||||
flex-shrink: 0
|
||||
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
|
||||
font-size: 16px
|
||||
max-width: 420px
|
||||
padding: 20px
|
||||
text-align: left
|
||||
&.bd-is-white
|
||||
background-color: $scheme-main
|
||||
|
||||
.bd-tw-header
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
|
||||
.bd-tw-author
|
||||
align-items: center
|
||||
color: $tw-black
|
||||
display: flex
|
||||
line-height: 1.2
|
||||
&:hover
|
||||
color: $tw-blue
|
||||
|
||||
.bd-tw-avatar
|
||||
flex-shrink: 0
|
||||
height: 36px
|
||||
margin-right: 9px
|
||||
width: 36px
|
||||
img
|
||||
border-radius: 290486px
|
||||
display: block
|
||||
height: 36px
|
||||
width: 36px
|
||||
|
||||
.bd-tw-fullname
|
||||
color: $text-strong
|
||||
display: block
|
||||
font-size: 16px
|
||||
font-weight: 700
|
||||
|
||||
.bd-tw-username
|
||||
color: $tw-grey
|
||||
display: block
|
||||
font-size: 14px
|
||||
|
||||
.bd-tw-content
|
||||
color: $tw-black
|
||||
font-size: 16px
|
||||
line-height: 1.4
|
||||
margin-top: 14px
|
||||
a
|
||||
color: $tw-blue
|
||||
.Emoji
|
||||
height: 1.25em
|
||||
padding: 0 .05em 0 .1em
|
||||
vertical-align: -.2em
|
||||
width: 1.25em
|
||||
|
||||
.bd-tw-date
|
||||
font-size: 14px
|
||||
line-height: 1.4
|
||||
margin-top: 3.2px
|
||||
a
|
||||
color: $tw-grey
|
||||
&:hover
|
||||
color: $tw-blue
|
||||
|
||||
.Tweet-actions
|
||||
align-items: center
|
||||
display: flex
|
||||
margin-top: 8.4px
|
||||
|
||||
.Tweet-action
|
||||
margin-right: 1.25rem
|
||||
|
||||
.TweetAction
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 24px
|
||||
min-width: 24px
|
||||
&:hover
|
||||
.Icon--replyEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%231DA1F2%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E)
|
||||
.Icon--retweetEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2317BF63%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E)
|
||||
.Icon--heartEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E0245E%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
.Tweet-action--retweet:hover
|
||||
.TweetAction-stat
|
||||
color: #17BF63
|
||||
|
||||
.Tweet-action--heart:hover
|
||||
.TweetAction-stat
|
||||
color: #E0245E
|
||||
|
||||
.TweetAction-icon
|
||||
background-size: contain
|
||||
height: 20px
|
||||
width: 20px
|
||||
|
||||
.TweetAction-stat
|
||||
color: $tw-grey
|
||||
font-size: 14px
|
||||
margin-left: 5px
|
||||
margin-top: 1px
|
||||
|
||||
.Icon--replyEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
.Icon--retweetEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
.Icon--heartEdge
|
||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E)
|
||||
|
||||
+mobile
|
||||
.bd-tws-home
|
||||
padding: 1.5rem
|
||||
.bd-tw:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+tablet
|
||||
.bd-tws-home
|
||||
padding: 3rem
|
||||
.bd-tw + .bd-tw
|
||||
margin-top: 1.5rem
|
||||
|
||||
+until($desktop)
|
||||
.bd-tws-love
|
||||
.bd-tw:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+desktop
|
||||
.bd-tws-home
|
||||
min-height: 595px
|
||||
.bd-tws-love
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
margin: -0.75rem
|
||||
.bd-tw
|
||||
margin: 0.75rem
|
||||
width: calc(33.3333% - 1.5rem)
|
||||
|
||||
+widescreen
|
||||
.bd-tws-home
|
||||
min-height: 653px
|
||||
|
||||
+fullhd
|
||||
.bd-tws-home
|
||||
min-height: 632px
|
||||
|
||||
.twitter-tweet:not(.twitter-tweet-rendered)
|
||||
background-color: $scheme-main
|
||||
border: 1px solid $tw-border
|
||||
border-radius: 5px
|
||||
color: $tw-grey
|
||||
font-size: 14px
|
||||
padding: 20px 20px 11.6px
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
p
|
||||
color: $tw-black
|
||||
font-size: 16px
|
||||
margin-bottom: 3.2px
|
||||
a
|
||||
color: $tw-blue
|
||||
|
||||
.twitter-tweet-rendered
|
||||
border: none
|
||||
border-radius: 0
|
||||
margin: 0 !important
|
||||
padding: 0 !important
|
||||
Reference in New Issue
Block a user