library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Only use derived variables

Browse Source
This commit is contained in:
Jeremy Thomas 2019-10-13 16:11:19 +01:00
parent 0f988eadd9
commit ac0399d971
23 changed files with 83 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_data/meta.json
View File

@ -10,5 +10,7 @@
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/", "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
"book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/", "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
"book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf", "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
"scrimba_url": "https://scrimba.com/g/gbulma" "scrimba_url": "https://scrimba.com/g/gbulma",
"patreon_url": "https://www.patreon.com/jgthms",
"sponsorship_url": "https://github.com/users/jgthms/sponsorship"
} }

2
docs/_includes/elements/github.html
View File

@ -1,4 +1,4 @@
<a class="button bd-github-button" href="https://github.com/users/jgthms/sponsorship" target="_blank"> <a class="button bd-github-button" href="{{ site.data.meta.sponsorship_url }}" target="_blank">
<span class="icon"> <span class="icon">
<i class="fas fa-heart"></i> <i class="fas fa-heart"></i>
</span> </span>

2
docs/_includes/elements/patreon.html
View File

@ -1,4 +1,4 @@
<a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank"> <a class="bd-patreon-button" href="{{ site.data.meta.patreon_url }}" target="_blank">
{% {%
include elements/responsive-image.html include elements/responsive-image.html
path="become-a-patron" path="become-a-patron"

4
docs/_includes/index/partnrs.html
View File

@ -1,7 +1,7 @@
<section class="bd-partnrs-list"> <section class="bd-partnrs-list">
<div class="bd-partner bd-is-sponsor"> <div class="bd-partner bd-is-sponsor">
<p class="bd-partner-title has-text-centered"> <p class="bd-partner-title has-text-centered">
Bulma is thankful to its <a href="https://www.patreon.com/jgthms" target="_blank">Patreon sponsors</a> Bulma is thankful to its <a href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and <a href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
</p> </p>
<div class="bd-partner-sponsors"> <div class="bd-partner-sponsors">
@ -25,7 +25,7 @@
</div> </div>
<p class="has-text-centered" style="margin-top: 1.5rem;"> <p class="has-text-centered" style="margin-top: 1.5rem;">
<a class="button is-primary is-medium" href="https://www.patreon.com/jgthms" target="_blank"> <a class="button is-primary is-medium" href="{{ site.data.meta.sponsorship_url }}" target="_blank">
Become a sponsor Become a sponsor
</a> </a>
</p> </p>

6
docs/_sass/book.sass
View File

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

10
docs/_sass/bsa.sass
View File

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

2
docs/_sass/example.sass
View File

@ -164,7 +164,7 @@ $structure-invert: $danger-invert
position: relative position: relative
&::before &::before
+overlay +overlay
background: rgba($black, 0.7) background: rgba($scheme-invert, 0.7)
background: $background background: $background
border: 1px solid $border border: 1px solid $border
content: "" content: ""

4
docs/_sass/expo.sass
View File

@ -1,5 +1,5 @@
.bd-expo .bd-expo
background-color: $white background-color: $scheme-main
padding: 1.5rem padding: 1.5rem
.bd-website .bd-website
@ -31,7 +31,7 @@
transition: opacity 200ms $easing transition: opacity 200ms $easing
.bd-website-overlay .bd-website-overlay
background-color: $black background-color: $scheme-invert
opacity: 0 opacity: 0
transition: opacity 200ms $easing transition: opacity 200ms $easing

14
docs/_sass/footer.sass
View File

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

10
docs/_sass/global.sass
View File

@ -16,10 +16,10 @@ svg
strong strong
color: currentColor color: currentColor
a a
border-bottom: 1px solid rgba($white, 0.5) border-bottom: 1px solid rgba($scheme-main, 0.5)
padding-bottom: 2px padding-bottom: 2px
&:hover &:hover
border-bottom-color: $white border-bottom-color: $scheme-main
span span
margin: 0 0.25em margin: 0 0.25em
opacity: 0.5 opacity: 0.5
@ -99,8 +99,8 @@ $carbon-poweredby-height: 20px
padding: 0 padding: 0
position: relative position: relative
&:hover &:hover
background-color: $white background-color: $scheme-main
box-shadow: 0 0 0 $carbon-shadow-size $white box-shadow: 0 0 0 $carbon-shadow-size $scheme-main
+tablet +tablet
width: $carbon-width width: $carbon-width
@ -151,7 +151,7 @@ $carbon-poweredby-height: 20px
color: $link color: $link
.carbon-poweredby .carbon-poweredby
bottom: 0 bottom: 0
color: $grey-light color: $border-hover
display: inline display: inline
font-size: $size-small font-size: $size-small
line-height: $carbon-poweredby-height line-height: $carbon-poweredby-height

8
docs/_sass/header.sass
View File

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

26
docs/_sass/index.sass
View File

@ -18,7 +18,7 @@
strong strong
color: $primary color: $primary
.subtitle .subtitle
color: $grey-light !important color: $border-hover !important
strong strong
color: currentColor color: currentColor
&:not(:last-child) &:not(:last-child)
@ -41,7 +41,7 @@
margin-right: auto margin-right: auto
.bd-index-custom-title .bd-index-custom-title
color: $grey-light color: $border-hover
.bd-index-custom-example .bd-index-custom-example
padding: 1rem padding: 1rem
@ -77,28 +77,28 @@
.button .button
&.is-primary &.is-primary
background-color: $mauve background-color: $mauve
color: $white color: $scheme-main
&:hover &:hover
background-color: darken($mauve, 2.5%) background-color: darken($mauve, 2.5%)
&:active &:active
background-color: darken($mauve, 5%) background-color: darken($mauve, 5%)
&.is-link &.is-link
background-color: $pink background-color: $pink
color: $white color: $scheme-main
&:hover &:hover
background-color: darken($pink, 2.5%) background-color: darken($pink, 2.5%)
&:active &:active
background-color: darken($pink, 5%) background-color: darken($pink, 5%)
+selection +selection
background-color: $pink background-color: $pink
color: $white color: $scheme-main
// Fullscreen // Fullscreen
.bd-index-fullscreen .bd-index-fullscreen
.tabs .tabs
a a
color: $grey-light !important color: $border-hover !important
// Columns // Columns
@ -161,13 +161,13 @@
transition-duration: $speed * 2 transition-duration: $speed * 2
transition-property: color transition-property: color
.subtitle .subtitle
color: $grey-light color: $border-hover
position: relative position: relative
strong strong
color: currentColor color: currentColor
&::before &::before
+overlay +overlay
background-color: $white-bis background-color: $scheme-main-bis
border-radius: $radius-large border-radius: $radius-large
content: "" content: ""
display: block display: block
@ -194,7 +194,7 @@
color: $link color: $link
&:nth-child(4):hover &:nth-child(4):hover
.title .title
color: $black color: $scheme-invert
.bd-focus-icon .bd-focus-icon
position: relative position: relative
@ -292,7 +292,7 @@
color: $black-ter color: $black-ter
&.is-success, &.is-success,
&.is-error &.is-error
color: $white color: $scheme-main
pointer-events: none pointer-events: none
text-decoration: none text-decoration: none
&.is-success &.is-success
@ -301,10 +301,10 @@
background-color: $red background-color: $red
\::-moz-selection \::-moz-selection
background: $yellow background: $yellow
color: $black-ter color: $scheme-invert-ter
\::selection \::selection
background: $yellow background: $yellow
color: $black-ter color: $scheme-invert-ter
.intro-buttons .intro-buttons
margin-top: 1.5rem margin-top: 1.5rem
@ -313,7 +313,7 @@
padding-right: 1.375em padding-right: 1.375em
.intro-video .intro-video
background-color: $white background-color: $scheme-main
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
max-width: 640px max-width: 640px

2
docs/_sass/klmn.sass
View File

@ -24,7 +24,7 @@
white-space: nowrap white-space: nowrap
&.bd-is-selected &.bd-is-selected
background-color: $green background-color: $green
color: $white color: $scheme-main
.bd-klmn-columns:last-child .bd-klmn-columns:last-child
.bd-notification .bd-notification

4
docs/_sass/love.sass
View File

@ -7,7 +7,7 @@
justify-content: center justify-content: center
.bd-testimonial-tweet .bd-testimonial-tweet
background-color: $white background-color: $scheme-main
.bd-more-loves .bd-more-loves
align-items: center align-items: center
@ -57,7 +57,7 @@
.hero.bd-is-love .hero.bd-is-love
.title, .title,
.subtitle .subtitle
color: $white color: $scheme-main
@keyframes rainbow @keyframes rainbow
0% 0%

18
docs/_sass/main.sass
View File

@ -5,7 +5,7 @@
.bd-figure .bd-figure
+block +block
align-items: center align-items: center
border: 2px solid $white-ter border: 2px solid $scheme-main-ter
border-radius: $radius border-radius: $radius
display: flex display: flex
flex-direction: column flex-direction: column
@ -14,7 +14,7 @@
margin: 1em margin: 1em
figcaption figcaption
align-self: stretch align-self: stretch
background-color: $white-ter background-color: $scheme-main-ter
color: $text-light color: $text-light
font-size: $size-small font-size: $size-small
padding: 1em padding: 1em
@ -33,7 +33,7 @@
.bd-prev-next .bd-prev-next
align-items: flex-start align-items: flex-start
color: $grey-light color: $border-hover
display: none display: none
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
@ -87,7 +87,7 @@
overflow: visible overflow: visible
ul, ul,
a a
border-bottom-color: $white-ter border-bottom-color: $scheme-main-ter
border-bottom-width: 2px border-bottom-width: 2px
a a
margin-bottom: -2px margin-bottom: -2px
@ -109,7 +109,7 @@
.bd-side, .bd-side,
.bd-side-background .bd-side-background
background-color: $white-bis background-color: $scheme-main-bis
.bd-side .bd-side
position: relative position: relative
@ -128,7 +128,7 @@
margin-bottom: 0.5em margin-bottom: 0.5em
&.is-past &.is-past
a a
color: $grey-light color: $border-hover
&.is-current &.is-current
a a
color: $link color: $link
@ -156,7 +156,7 @@
.bd-category-toggle .bd-category-toggle
+overlay +overlay
align-items: center align-items: center
color: $grey-light color: $border-hover
display: flex display: flex
justify-content: flex-end justify-content: flex-end
.icon .icon
@ -201,7 +201,7 @@
top: 0 top: 0
.bd-anchors-title .bd-anchors-title
color: $grey-light color: $border-hover
font-size: 0.875rem font-size: 0.875rem
font-weight: $weight-semibold font-weight: $weight-semibold
margin-bottom: 0.5rem margin-bottom: 0.5rem
@ -229,7 +229,7 @@
.bd-duo .bd-duo
display: flex display: flex
.bd-lead .bd-lead
background-color: $white background-color: $scheme-main
overflow: hidden overflow: hidden
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1

4
docs/_sass/native.sass
View File

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

6
docs/_sass/patreon.sass
View File

@ -4,7 +4,7 @@
.bd-side-sponsor-label, .bd-side-sponsor-label,
.bd-banner-label .bd-banner-label
color: $grey-light color: $border-hover
font-size: 0.75rem font-size: 0.75rem
margin-bottom: 0.75rem margin-bottom: 0.75rem
@ -31,9 +31,9 @@
margin-bottom: 0.25em margin-bottom: 0.25em
&.is-patreon &.is-patreon
background-color: $patreon-blue background-color: $patreon-blue
color: $white color: $scheme-main
// &.is-fortyfour // &.is-fortyfour
// background-color: $white // background-color: $scheme-main
// border: 2px solid $background // border: 2px solid $background
.button .button
transform-origin: center transform-origin: center

6
docs/_sass/specific.sass
View File

@ -56,7 +56,7 @@
strong strong
font-weight: $weight-semibold font-weight: $weight-semibold
&:hover &:hover
background-color: $white-bis background-color: $scheme-main-bis
.bd-link-surtitle .bd-link-surtitle
float: right float: right
@ -280,9 +280,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
color: currentColor color: currentColor
code, code,
pre pre
background-color: rgba($black, 0.2) background-color: rgba($scheme-invert, 0.2)
border-radius: $radius border-radius: $radius
color: $white color: $scheme-main
pre code pre code
background-color: transparent background-color: transparent
// Colors // Colors

8
docs/_sass/sponsors.sass
View File

@ -35,7 +35,7 @@
min-height: 0 min-height: 0
.bd-partnrs .bd-partnrs
background-color: $white-bis background-color: $scheme-main-bis
#carbonads #carbonads
.carbon-text .carbon-text
padding-bottom: 0 padding-bottom: 0
@ -43,7 +43,7 @@
display: none display: none
.bd-partner-title .bd-partner-title
color: $grey-light color: $border-hover
font-size: 0.875rem font-size: 0.875rem
margin-bottom: 1rem margin-bottom: 1rem
@ -57,11 +57,11 @@
.bd-minis-link .bd-minis-link
@extend %center @extend %center
color: $grey color: $text-light
.icon .icon
margin-right: 0.25em margin-right: 0.25em
strong strong
color: $grey color: $text-light
margin-left: 0.25em margin-left: 0.25em
.bd-minis-list .bd-minis-list

11
docs/_sass/twitter.sass
View File

@ -1,13 +1,14 @@
$tw-black: #1c2022 // $tw-black: #1c2022
$tw-black: $text-strong
$tw-blue: #2b7bb9 $tw-blue: #2b7bb9
$tw-grey: #697882 $tw-grey: #697882
$tw-border: #e1e8ed $tw-border: #e1e8ed
.bd-tws-home .bd-tws-home
background-color: $white-bis background-color: $scheme-main-bis
.bd-tw .bd-tw
background-color: $white-bis background-color: $scheme-main-bis
border-radius: $radius-large border-radius: $radius-large
color: $tw-grey color: $tw-grey
flex-shrink: 0 flex-shrink: 0
@ -17,7 +18,7 @@ $tw-border: #e1e8ed
padding: 20px padding: 20px
text-align: left text-align: left
&.bd-is-white &.bd-is-white
background-color: $white background-color: $scheme-main
.bd-tw-header .bd-tw-header
align-items: stretch align-items: stretch
@ -162,7 +163,7 @@ $tw-border: #e1e8ed
min-height: 632px min-height: 632px
.twitter-tweet:not(.twitter-tweet-rendered) .twitter-tweet:not(.twitter-tweet-rendered)
background-color: $white background-color: $scheme-main
border: 1px solid $tw-border border: 1px solid $tw-border
border-radius: 5px border-radius: 5px
color: $tw-grey color: $tw-grey

1
docs/bulma-docs.sass
View File

@ -24,6 +24,7 @@ $main-spacing: 3rem
$intro-width: 1080px $intro-width: 1080px
$sidebar-width: 10.5rem $sidebar-width: 10.5rem
// @import "./bulma-dark.scss"
@import "../bulma" @import "../bulma"
%center %center

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

@ -13554,7 +13554,7 @@ svg {
.bd-tw-author { .bd-tw-author {
align-items: center; align-items: center;
color: #1c2022; color: #363636;
display: flex; display: flex;
line-height: 1.2; line-height: 1.2;
} }
@ -13591,7 +13591,7 @@ svg {
} }
.bd-tw-content { .bd-tw-content {
color: #1c2022; color: #363636;
font-size: 16px; font-size: 16px;
line-height: 1.4; line-height: 1.4;
margin-top: 14px; margin-top: 14px;
@ -13753,7 +13753,7 @@ svg {
} }
.twitter-tweet:not(.twitter-tweet-rendered) p { .twitter-tweet:not(.twitter-tweet-rendered) p {
color: #1c2022; color: #363636;
font-size: 16px; font-size: 16px;
margin-bottom: 3.2px; margin-bottom: 3.2px;
} }

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long