mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 04:14:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
16
docs/_sass/global/_index.scss
Normal file
16
docs/_sass/global/_index.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
@forward "anim";
|
||||
@forward "brand";
|
||||
@forward "feature";
|
||||
@forward "header";
|
||||
@forward "native";
|
||||
@forward "nav";
|
||||
|
||||
.bd-hr {
|
||||
height: 0.25rem;
|
||||
margin: 1em auto;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--theme-color, #{cv.getVar("primary")});
|
||||
width: 4em;
|
||||
}
|
||||
133
docs/_sass/global/anim.scss
Normal file
133
docs/_sass/global/anim.scss
Normal file
@@ -0,0 +1,133 @@
|
||||
@keyframes anim-rise-up {
|
||||
from {
|
||||
transform: rotateX(110deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-pivot-up {
|
||||
from {
|
||||
transform: rotateX(-110deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-slide-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-grow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(80%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-slow-intro {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.86);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-bounce-jelly {
|
||||
from {
|
||||
transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
3.4% {
|
||||
transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.81% {
|
||||
transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
10.21% {
|
||||
transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
13.61% {
|
||||
transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
17.52% {
|
||||
transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
21.32% {
|
||||
transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.23% {
|
||||
transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.03% {
|
||||
transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
36.74% {
|
||||
transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
44.44% {
|
||||
transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
59.86% {
|
||||
transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 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);
|
||||
}
|
||||
to {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
10
docs/_sass/global/brand.scss
Normal file
10
docs/_sass/global/brand.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
$w: 640px;
|
||||
$h: 160px;
|
||||
|
||||
.bulma-logo {
|
||||
--f: 0.25;
|
||||
display: inline-flex;
|
||||
height: calc(var(--f) * #{$h});
|
||||
vertical-align: top;
|
||||
width: calc(var(--f) * #{$w});
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
.cpck-window {
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 1em rgba(black, 0.1);
|
||||
padding: 1em 1.5em;
|
||||
position: fixed;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.cpck-invisible {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cpck-link {
|
||||
border-bottom: 1px solid $link;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $link-light;
|
||||
}
|
||||
}
|
||||
|
||||
.cpck-compliance {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.cpck-btn {
|
||||
border: 2px solid $success;
|
||||
border-radius: $radius;
|
||||
color: $success;
|
||||
display: inline-block;
|
||||
font-weight: $weight-bold;
|
||||
padding: 0.5em 1em;
|
||||
vertical-align: top;
|
||||
|
||||
span {
|
||||
margin-left: -0.125em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $success-light;
|
||||
color: $success-dark;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($success-light, 5%);
|
||||
border-color: $success-dark;
|
||||
color: darken($success-dark, 5%);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.cpck-window {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.cpck-window {
|
||||
border-radius: $radius;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
131
docs/_sass/global/feature.scss
Normal file
131
docs/_sass/global/feature.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
$gap: 2rem;
|
||||
$width: 20rem;
|
||||
|
||||
.bd-features {
|
||||
--gap: #{$gap};
|
||||
--width: #{$width};
|
||||
|
||||
align-items: center;
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
hsla(
|
||||
var(--bulma-scheme-h),
|
||||
var(--bulma-scheme-s),
|
||||
var(--bulma-scheme-main-l),
|
||||
1
|
||||
)
|
||||
0%,
|
||||
hsla(
|
||||
var(--bulma-scheme-h),
|
||||
var(--bulma-scheme-s),
|
||||
var(--bulma-scheme-main-l),
|
||||
0
|
||||
)
|
||||
100%
|
||||
);
|
||||
padding: var(--gap);
|
||||
position: relative;
|
||||
container-type: inline-size;
|
||||
container-name: home-features;
|
||||
}
|
||||
|
||||
.bd-features-grid {
|
||||
display: grid;
|
||||
gap: var(--gap);
|
||||
grid-template-columns: 1fr;
|
||||
justify-content: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
@container home-features (min-width: #{(2 * $width + 1 * $gap)}) {
|
||||
.bd-features-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@container home-features (min-width: #{(4 * $width + 3 * $gap)}) {
|
||||
.bd-features-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: #{(4 * $width + 10 * $gap)}) {
|
||||
.bd-features {
|
||||
padding: calc(2 * var(--gap));
|
||||
}
|
||||
}
|
||||
|
||||
.bd-feature {
|
||||
--h: 348;
|
||||
--s: 86%;
|
||||
--l: 61%;
|
||||
--a: 0.1;
|
||||
--bg: var(--grad-red);
|
||||
--bd-width: 0.125em;
|
||||
--radius: 0.75em;
|
||||
--p: 1em;
|
||||
--icon: #{cv.getVar("danger")};
|
||||
background: var(--bg);
|
||||
border-radius: calc(var(--bd-width) + var(--radius));
|
||||
box-shadow:
|
||||
0px 0.5em 1em 0px hsla(var(--h), var(--s), var(--l), var(--a)),
|
||||
0px 1em 2em 0px hsla(var(--h), var(--s), var(--l), var(--a));
|
||||
padding: var(--bd-width);
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: box-shadow, transform;
|
||||
|
||||
&:hover {
|
||||
--a: 0.05;
|
||||
box-shadow:
|
||||
0px 1em 2em 0px hsla(var(--h), var(--s), var(--l), var(--a)),
|
||||
0px 2em 4em 0px hsla(var(--h), var(--s), var(--l), var(--a));
|
||||
transform: translateY(-1em);
|
||||
}
|
||||
|
||||
&.is-modern {
|
||||
--h: 220;
|
||||
--bg: var(--grad-blue);
|
||||
--icon: #{cv.getVar("info-50")};
|
||||
}
|
||||
|
||||
&.is-easy {
|
||||
--h: 160;
|
||||
--bg: var(--grad-green);
|
||||
--icon: #{cv.getVar("success")};
|
||||
}
|
||||
|
||||
&.is-free {
|
||||
--h: 348;
|
||||
--s: 6%;
|
||||
--bg: var(--grad-grey);
|
||||
--icon: #{cv.getVar("text")};
|
||||
}
|
||||
}
|
||||
|
||||
.bd-feature-body {
|
||||
align-items: center;
|
||||
background-color: cv.getVar("scheme-main");
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
column-gap: var(--p);
|
||||
grid-template-columns: auto 1fr;
|
||||
padding: var(--p) calc(var(--p) * 1.25);
|
||||
|
||||
.icon {
|
||||
color: var(--icon);
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-feature-title {
|
||||
color: cv.getVar("text-strong");
|
||||
font-size: 1.25em;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
}
|
||||
|
||||
.bd-feature-subtitle {
|
||||
color: cv.getVar("text-weak");
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,302 +0,0 @@
|
||||
.bd-footer-title {
|
||||
color: $text-light;
|
||||
font-size: $size-5;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 0.5rem;
|
||||
transition-duration: $speed;
|
||||
transition-property: color;
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
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;
|
||||
}
|
||||
|
||||
@include 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;
|
||||
|
||||
@include 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;
|
||||
|
||||
@include mobile {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include 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;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
|
||||
em {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include 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;
|
||||
}
|
||||
156
docs/_sass/global/header.scss
Normal file
156
docs/_sass/global/header.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
@use "../utils";
|
||||
|
||||
.bd-header {
|
||||
--px: 2rem;
|
||||
--py: 2rem;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
gap: 0;
|
||||
padding: var(--py) var(--px);
|
||||
position: relative;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-image;
|
||||
}
|
||||
|
||||
$d: 2.5rem;
|
||||
|
||||
.bd-header-control {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.bd-cycle {
|
||||
--h: #{cv.getVar("sun-h")};
|
||||
--s: #{cv.getVar("sun-s")};
|
||||
--l: #{cv.getVar("sun-l")};
|
||||
|
||||
border-radius: 0.5em;
|
||||
color: hsl(var(--h), var(--s), var(--l));
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: $d;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition-property: background-color;
|
||||
width: $d;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(var(--h), var(--s), var(--l), 0.1);
|
||||
}
|
||||
|
||||
&.is-moon {
|
||||
--h: #{cv.getVar("moon-h")};
|
||||
--s: #{cv.getVar("moon-s")};
|
||||
--l: #{cv.getVar("moon-l")};
|
||||
|
||||
.bd-cycles {
|
||||
transform: translate3d(0, -1 * $d, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-cycles {
|
||||
display: flex;
|
||||
height: $d * 2;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: transform;
|
||||
width: $d;
|
||||
}
|
||||
|
||||
.bd-cycle-sun,
|
||||
.bd-cycle-moon {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: $d;
|
||||
justify-content: center;
|
||||
transition: none;
|
||||
width: $d;
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-cycle-sun {
|
||||
&.is-active {
|
||||
color: var(--sun);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-cycle-moon {
|
||||
&.is-active {
|
||||
color: var(--moon);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-header-search {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
position: relative;
|
||||
|
||||
.input {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.bd-nav-item {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.until(utils.$header-bp) {
|
||||
.bd-header {
|
||||
justify-content: center;
|
||||
|
||||
.bd-nav-themes {
|
||||
margin-inline-end: auto;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.bulma-logo {
|
||||
margin-inline-end: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-header-control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from(utils.$header-bp) {
|
||||
.bd-header {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.bd-nav-item.is-love {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from(utils.$header-bp + 150px) {
|
||||
.bd-header {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bd-nav-item.is-love {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from(utils.$header-bp + 300px) {
|
||||
.bd-header {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
141
docs/_sass/global/native.scss
Normal file
141
docs/_sass/global/native.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-native {
|
||||
background-color: cv.getVar("background");
|
||||
padding: var(--bulma-block-spacing);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.native-js {
|
||||
border-radius: 0;
|
||||
display: none;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
|
||||
&::before {
|
||||
@include mx.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 cv.getVar("shadow");
|
||||
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 cv.getVar("shadow");
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
height: auto;
|
||||
padding: 0.5em 1em;
|
||||
transition-duration: calc(var(--bulma-duration) * 2);
|
||||
transition-property: box-shadow, transform;
|
||||
will-change: box-shadow, transform;
|
||||
}
|
||||
|
||||
$native-bp: 600px;
|
||||
|
||||
@include mx.until($native-bp) {
|
||||
.native-flex {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.native-main {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.native-details {
|
||||
margin: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from($native-bp) {
|
||||
.native-flex {
|
||||
display: flex;
|
||||
padding: 4em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.native-main {
|
||||
display: flex;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.native-details {
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
.native-js {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
263
docs/_sass/global/nav.scss
Normal file
263
docs/_sass/global/nav.scss
Normal file
@@ -0,0 +1,263 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
@use "../utils";
|
||||
|
||||
.bd-nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.bd-nav-icons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-nav-item {
|
||||
--h: #{cv.getVar("primary-h")};
|
||||
--s: #{cv.getVar("primary-s")};
|
||||
--l: #{cv.getVar("primary-l")};
|
||||
|
||||
align-items: center;
|
||||
// background-color: hsla(var(--h), 0%, var(--bulma-scheme-main-l), 0.5);
|
||||
border-radius: 0.5em;
|
||||
color: cv.getVar("text-strong");
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
padding: 0.5em 0.75em;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(var(--h), var(--s), var(--l), 0.1);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: hsla(var(--h), var(--s), var(--l), 0.2);
|
||||
}
|
||||
|
||||
&.is-icon {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
&.is-made-with-bulma,
|
||||
&.is-expo {
|
||||
--h: #{cv.getVar("warning-h")};
|
||||
--s: #{cv.getVar("warning-s")};
|
||||
--l: #{cv.getVar("warning-l")};
|
||||
}
|
||||
|
||||
&.is-extensions {
|
||||
--h: #{cv.getVar("info-h")};
|
||||
--s: #{cv.getVar("info-s")};
|
||||
--l: #{cv.getVar("info-l")};
|
||||
}
|
||||
|
||||
&.is-system,
|
||||
&.is-docs {
|
||||
--h: #{cv.getVar("success-h")};
|
||||
--s: #{cv.getVar("success-s")};
|
||||
--l: #{cv.getVar("success-l")};
|
||||
}
|
||||
|
||||
&.is-love {
|
||||
--h: #{cv.getVar("danger-h")};
|
||||
--s: #{cv.getVar("danger-s")};
|
||||
--l: #{cv.getVar("danger-l")};
|
||||
}
|
||||
|
||||
&.is-github {
|
||||
--h: #{cv.getVar("github-h")};
|
||||
--s: #{cv.getVar("github-s")};
|
||||
--l: #{cv.getVar("github-l")};
|
||||
}
|
||||
|
||||
&.is-twitter {
|
||||
--h: #{cv.getVar("twitter-h")};
|
||||
--s: #{cv.getVar("twitter-s")};
|
||||
--l: #{cv.getVar("twitter-l")};
|
||||
}
|
||||
|
||||
&.is-backers,
|
||||
&.is-sponsor {
|
||||
--h: #{cv.getVar("patreon-h")};
|
||||
--s: #{cv.getVar("patreon-s")};
|
||||
--l: #{cv.getVar("patreon-l")};
|
||||
}
|
||||
|
||||
&.is-code {
|
||||
--h: #{cv.getVar("link-h")};
|
||||
--s: #{cv.getVar("link-s")};
|
||||
--l: #{cv.getVar("link-l")};
|
||||
}
|
||||
|
||||
&.is-search,
|
||||
&.is-search-desktop {
|
||||
--h: #{cv.getVar("link-h")};
|
||||
--s: #{cv.getVar("link-s")};
|
||||
--l: #{cv.getVar("link-l")};
|
||||
}
|
||||
|
||||
&.is-blog {
|
||||
--h: #{cv.getVar("rss-h")};
|
||||
--s: #{cv.getVar("rss-s")};
|
||||
--l: #{cv.getVar("rss-l")};
|
||||
}
|
||||
|
||||
&.is-sun {
|
||||
--h: #{cv.getVar("sun-h")};
|
||||
--s: #{cv.getVar("sun-s")};
|
||||
--l: #{cv.getVar("sun-l")};
|
||||
}
|
||||
|
||||
&.is-moon,
|
||||
&.is-bootstrap {
|
||||
--h: #{cv.getVar("moon-h")};
|
||||
--s: #{cv.getVar("moon-s")};
|
||||
--l: #{cv.getVar("moon-l")};
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: hsl(var(--h), var(--s), var(--l));
|
||||
}
|
||||
}
|
||||
|
||||
.bd-nav-item-name {
|
||||
color: inherit;
|
||||
font-weight: cv.getVar("weight-medium");
|
||||
line-height: 1.25;
|
||||
padding-top: 0.125em;
|
||||
}
|
||||
|
||||
.bd-nav-search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-nav-themes {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-nav-menu {
|
||||
background-color: cv.getVar("scheme-main");
|
||||
border-color: cv.getVar("border");
|
||||
border-radius: 1em;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: cv.getVar("shadow");
|
||||
opacity: 0;
|
||||
padding: 1em;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
transform: scale(0.98) translate(0em, -0.5em);
|
||||
transform-origin: right top;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: opacity, transform;
|
||||
visibility: hidden;
|
||||
width: 17em;
|
||||
z-index: 30;
|
||||
|
||||
&.is-cycles {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.bd-nav-item {
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
margin-left: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-nav-item.is-ellipsis:focus-visible + &,
|
||||
&:focus-within,
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.is-search {
|
||||
width: 16em;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.until(utils.$header-bp) {
|
||||
.bd-nav {
|
||||
align-items: stretch;
|
||||
background-color: cv.getVar("scheme-main");
|
||||
border-color: cv.getVar("border");
|
||||
border-radius: 1em;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-shadow: cv.getVar("shadow");
|
||||
flex-direction: column;
|
||||
opacity: 0;
|
||||
padding: 1em;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 4.5rem;
|
||||
transform: scale(0.98) translate(0em, -0.5em);
|
||||
transform-origin: right top;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: opacity, transform;
|
||||
visibility: hidden;
|
||||
z-index: 5;
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-nav-icons {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.bd-nav-item {
|
||||
padding-right: 3em;
|
||||
|
||||
&.is-ellipsis,
|
||||
&.is-search-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-nav-desktop-download {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-nav-menu.is-cycles {
|
||||
left: 0;
|
||||
transform-origin: left top;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from(utils.$header-bp) {
|
||||
.bd-nav {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-nav-burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-nav-burger,
|
||||
.bd-nav-mobile-download,
|
||||
.bd-nav-item.is-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-nav-menu.is-more {
|
||||
left: 5rem;
|
||||
transform-origin: left top;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,184 +0,0 @@
|
||||
@use "sass:math";
|
||||
|
||||
:root {
|
||||
--newsletter-strip-size: 16px;
|
||||
--newsletter-border-size: #{$block-spacing};
|
||||
}
|
||||
|
||||
#newsletter {
|
||||
background: $scheme-main-bis;
|
||||
padding: var(--newsletter-border-size);
|
||||
padding-top: 0;
|
||||
|
||||
.bd-drawing {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-newsletter-heading {
|
||||
> .icon {
|
||||
font-size: $title-size;
|
||||
height: 1.125em;
|
||||
width: 1.125em;
|
||||
}
|
||||
|
||||
.title,
|
||||
.subtitle {
|
||||
font-weight: $weight-normal;
|
||||
|
||||
strong {
|
||||
color: inherit;
|
||||
font-weight: $weight-semibold;
|
||||
}
|
||||
|
||||
small {
|
||||
color: $text-light;
|
||||
display: block;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
.bd-fat-button {
|
||||
font-weight: $weight-normal;
|
||||
|
||||
strong {
|
||||
font-weight: $weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-newsletter-fields {
|
||||
display: grid;
|
||||
grid-gap: math.div($block-spacing, 2);
|
||||
grid-template-columns: minmax(20em, 1fr) auto;
|
||||
}
|
||||
|
||||
.bd-newsletter-box {
|
||||
background-color: $scheme-main;
|
||||
background-image: url("/images/hab/newsletter-strip.png");
|
||||
background-repeat: repeat-x;
|
||||
background-size: 96px var(--newsletter-strip-size);
|
||||
border-radius: 1.5em;
|
||||
box-shadow: 0 0 0 1px $scheme-main-ter;
|
||||
|
||||
.icon {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
form .input {
|
||||
&:not(:focus):not(:hover) {
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.bd-newsletter-box {
|
||||
padding-top: calc(#{$block-spacing} + var(--newsletter-strip-size));
|
||||
}
|
||||
|
||||
.bd-newsletter-fields {
|
||||
grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.bd-newsletter-heading {
|
||||
margin-bottom: var(--bd-index-vertical);
|
||||
|
||||
.icon {
|
||||
float: left;
|
||||
margin-right: math.div($block-spacing, 2);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: (math.div($block-spacing, 2)) 0 !important;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: $block-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-newsletter-box {
|
||||
padding-top: calc(var(--bd-index-vertical) + var(--newsletter-strip-size));
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-newsletter-heading {
|
||||
display: grid;
|
||||
// prettier-ignore
|
||||
grid-template-columns:
|
||||
($block-spacing * 2)
|
||||
($block-spacing * 2)
|
||||
1fr
|
||||
1fr
|
||||
($block-spacing * 2)
|
||||
($block-spacing * 2);
|
||||
|
||||
> .icon {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 3;
|
||||
max-width: 9em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
grid-column: 4;
|
||||
max-width: 10em;
|
||||
}
|
||||
|
||||
form {
|
||||
grid-column: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include widescreen {
|
||||
:root {
|
||||
--newsletter-border-size: #{math.div($bd-edge-width, 2)};
|
||||
}
|
||||
|
||||
#newsletter {
|
||||
.bd-drawing {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-newsletter-heading {
|
||||
// prettier-ignore
|
||||
grid-template-columns:
|
||||
($block-spacing * 3)
|
||||
($block-spacing * 3)
|
||||
1fr
|
||||
1fr
|
||||
($block-spacing * 3)
|
||||
($block-spacing * 3);
|
||||
}
|
||||
|
||||
.bd-newsletter-box {
|
||||
box-shadow: 0 1em 2em rgba(black, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@include from(1780px) {
|
||||
.bd-newsletter-heading {
|
||||
// prettier-ignore
|
||||
grid-template-columns:
|
||||
minmax(#{$block-spacing * 2}, 1fr)
|
||||
($block-spacing * 3)
|
||||
calc(var(--container-width) / 2)
|
||||
calc(var(--container-width) / 2)
|
||||
($block-spacing * 3)
|
||||
minmax(#{$block-spacing * 2}, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -1,309 +0,0 @@
|
||||
.bd-footer-title {
|
||||
color: $text-light;
|
||||
font-size: $size-5;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 0.5rem;
|
||||
transition-duration: $speed;
|
||||
transition-property: color;
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
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: $block-spacing;
|
||||
}
|
||||
|
||||
%bd-footer-box {
|
||||
@extend %bd-box;
|
||||
|
||||
text-align: center;
|
||||
|
||||
.bd-footer-title {
|
||||
font-size: $size-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Support
|
||||
|
||||
.bd-footer-support {
|
||||
@extend %bd-footer-box;
|
||||
|
||||
background-color: $scheme-main-bis;
|
||||
box-shadow: none;
|
||||
padding: 3rem;
|
||||
|
||||
.bd-footer-title {
|
||||
margin-bottom: $block-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
@extend %center;
|
||||
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.bd-footer-donation {
|
||||
padding: 0.75rem $block-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.bd-footer-support {
|
||||
padding-bottom: 6rem;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@include 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;
|
||||
|
||||
@include mobile {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include 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;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
|
||||
em {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include 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;
|
||||
}
|
||||
Reference in New Issue
Block a user