mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
22
docs/_sass/docs/_index.scss
Normal file
22
docs/_sass/docs/_index.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
@forward "anchor";
|
||||
@forward "backers";
|
||||
@forward "brand";
|
||||
@forward "call";
|
||||
@forward "code";
|
||||
@forward "docs";
|
||||
@forward "drawing";
|
||||
@forward "example";
|
||||
@forward "examples";
|
||||
@forward "expo";
|
||||
@forward "hero";
|
||||
@forward "highlight";
|
||||
@forward "klmn";
|
||||
@forward "link";
|
||||
@forward "menu";
|
||||
@forward "notification";
|
||||
@forward "options";
|
||||
@forward "pagination";
|
||||
@forward "pills";
|
||||
@forward "skrin";
|
||||
@forward "tw";
|
||||
@forward "vars-table";
|
||||
16
docs/_sass/docs/anchor.scss
Normal file
16
docs/_sass/docs/anchor.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.bd-anchor-title {
|
||||
--p: 0rem;
|
||||
padding-top: var(--p);
|
||||
position: relative;
|
||||
|
||||
&:not(:first-child) {
|
||||
--p: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-anchor-link {
|
||||
position: absolute;
|
||||
color: var(--theme-color);
|
||||
right: calc(100% + 0.2875em);
|
||||
top: var(--p);
|
||||
}
|
||||
195
docs/_sass/docs/backers.scss
Normal file
195
docs/_sass/docs/backers.scss
Normal file
@@ -0,0 +1,195 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/extends";
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-backers {
|
||||
--spacing: 1.5rem;
|
||||
padding-bottom: var(--spacing);
|
||||
padding-top: var(--spacing);
|
||||
}
|
||||
|
||||
.bd-backers-platforms {
|
||||
@extend %bd-backers-section;
|
||||
--spacing: 1.5rem;
|
||||
padding: var(--spacing);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-backers-platform {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.bd-backers-platform-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: cv.getVar("radius-large");
|
||||
padding: var(--spacing);
|
||||
transition-duration: calc(#{cv.getVar("duration")} * 2);
|
||||
transition-property: box-shadow;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px var(--color);
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-is-patreon {
|
||||
--color: var(--patreon);
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
&.bd-is-github {
|
||||
--color: var(--github);
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.bd-fat-button {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-backers-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
h2 {
|
||||
background-color: var(--sponsor-light);
|
||||
border-radius: cv.getVar("radius-large");
|
||||
color: var(--sponsor);
|
||||
font-size: 1em;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-backers-group {
|
||||
@extend %bd-backers-section;
|
||||
padding: var(--spacing);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-backers-list {
|
||||
display: grid;
|
||||
grid-gap: 1em;
|
||||
|
||||
&.bd-is-patreon {
|
||||
grid-column: 2;
|
||||
|
||||
.icon-text {
|
||||
color: cv.getVar("text-weak");
|
||||
font-size: 0.75em;
|
||||
|
||||
&.bd-is-twitter {
|
||||
color: var(--twitter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-is-github {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tier {
|
||||
align-items: center;
|
||||
border-bottom: 2px solid cv.getVar("scheme-main-bis");
|
||||
display: grid;
|
||||
grid-gap: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.bd-tier-amount {
|
||||
color: cv.getVar("text-strong");
|
||||
font-size: 1.5em;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
}
|
||||
|
||||
.bd-tier-frequency {
|
||||
color: cv.getVar("text-weak");
|
||||
}
|
||||
|
||||
.bd-tiers-info {
|
||||
--spacing: 1.5em;
|
||||
background-color: cv.getVar("scheme-main-bis");
|
||||
color: cv.getVar("text-weak");
|
||||
grid-gap: var(--spacing);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: var(--spacing);
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tiers-info-question {
|
||||
justify-self: flex-end;
|
||||
max-width: 15em;
|
||||
}
|
||||
|
||||
.bd-tiers-info-answer {
|
||||
max-width: 25em;
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
.bd-backers-platform.bd-is-github {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
%bd-backers-section {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
1fr calc(var(--container-width) / 2) calc(var(--container-width) / 2)
|
||||
1fr;
|
||||
}
|
||||
|
||||
.bd-backers {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
transparent calc(50% - 2px),
|
||||
var(--sponsor-light) calc(50%),
|
||||
transparent calc(50% + 2px)
|
||||
);
|
||||
}
|
||||
|
||||
.bd-tier {
|
||||
grid-template-columns: 10em 8em 1fr;
|
||||
}
|
||||
|
||||
.bd-tier-amount {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bd-tiers-info {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.bd-tiers-info-question {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
.bd-backers,
|
||||
.bd-tiers {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.bd-tiers-info {
|
||||
--spacing: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
.bd-backers,
|
||||
.bd-tiers {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
139
docs/_sass/docs/brand.scss
Normal file
139
docs/_sass/docs/brand.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-brand {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.bd-logos {
|
||||
--size: 15rem;
|
||||
|
||||
> * {
|
||||
align-items: center;
|
||||
border-radius: 2em;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-logos-label {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
%bd-logos-tile {
|
||||
grid-column: span 2;
|
||||
justify-content: center;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
}
|
||||
|
||||
.bd-logos-color {
|
||||
@extend %bd-logos-tile;
|
||||
}
|
||||
|
||||
.bd-logos-codes {
|
||||
align-items: stretch !important;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.bd-logos-code {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
grid-column: span 2;
|
||||
|
||||
p:first-child {
|
||||
color: var(--bulma-text-light);
|
||||
}
|
||||
|
||||
p:nth-child(2) {
|
||||
flex-grow: 1;
|
||||
margin-right: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
}
|
||||
}
|
||||
|
||||
.bd-logos-item {
|
||||
@extend %bd-logos-tile;
|
||||
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
&.is-transparent {
|
||||
background-color: var(--bulma-text-80);
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
hsla(0, 0%, 100%, 0.4) 0,
|
||||
hsla(0, 0%, 100%, 0.4) 20px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
hsla(0, 0%, 100%, 0.4) 0,
|
||||
hsla(0, 0%, 100%, 0.4) 20px
|
||||
);
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bd-logos-download {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-logos-download {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 2em;
|
||||
opacity: 0;
|
||||
transition-duration: var(--bulma-duration);
|
||||
transition-property: opacity;
|
||||
|
||||
.title {
|
||||
color: var(--bulma-link-invert) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.touch {
|
||||
.bd-logos {
|
||||
> * {
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-logos-label {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.desktop {
|
||||
.bd-logos {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(7, calc(var(--size) / 2));
|
||||
grid-template-rows: repeat(4, var(--size));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 936px;
|
||||
|
||||
> * {
|
||||
align-items: center;
|
||||
border-radius: 2em;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
docs/_sass/docs/call.scss
Normal file
51
docs/_sass/docs/call.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.bd-call {
|
||||
--background-color: hsl(
|
||||
var(--theme-h),
|
||||
var(--theme-s),
|
||||
var(--bulma-scheme-main-ter-l)
|
||||
);
|
||||
--color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
|
||||
--color-dark: hsl(var(--theme-h), var(--theme-s), var(--bulma-text-strong-l));
|
||||
--margin: 1.5rem;
|
||||
--spacing: 1em;
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: var(--font-size);
|
||||
justify-content: center;
|
||||
margin: var(--margin);
|
||||
}
|
||||
|
||||
.bd-call-body {
|
||||
align-items: center;
|
||||
background-color: var(--background-color);
|
||||
border-radius: var(--bulma-radius-large);
|
||||
color: var(--color-dark);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: var(--spacing);
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
|
||||
strong {
|
||||
color: var(--color-dark);
|
||||
font-weight: var(--bulma-weight-semibold);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-call-text {
|
||||
margin: 0 var(--spacing);
|
||||
}
|
||||
|
||||
.bd-call-button {
|
||||
.button {
|
||||
--bulma-button-border-width: 0px;
|
||||
background-color: var(--color);
|
||||
color: var(--background-color);
|
||||
box-shadow: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
210
docs/_sass/docs/code.scss
Normal file
210
docs/_sass/docs/code.scss
Normal file
@@ -0,0 +1,210 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/extends";
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-example {
|
||||
@extend %block;
|
||||
}
|
||||
|
||||
.bd-copy,
|
||||
.bd-show {
|
||||
background-color: var(--theme-color);
|
||||
border: none;
|
||||
border-radius: 0.5em !important;
|
||||
color: var(--hl-background);
|
||||
font-size: 1em;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-copy {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0.75em;
|
||||
top: 0.75em;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: opacity;
|
||||
|
||||
.highlight:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-show {
|
||||
bottom: -1.25em;
|
||||
height: 2.5em;
|
||||
left: calc(50% - 4.5em);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 9em;
|
||||
gap: 0.25em;
|
||||
z-index: 1;
|
||||
|
||||
.icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-inline {
|
||||
display: inline-block;
|
||||
margin-bottom: -0.25em;
|
||||
vertical-align: bottom;
|
||||
|
||||
.highlight pre {
|
||||
padding: 0.5em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
.button.bd-copy {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet {
|
||||
@extend %block;
|
||||
--snippet-spacing: calc(#{cv.getVar("block-spacing")} * 1.25);
|
||||
|
||||
font-size: 1rem;
|
||||
grid-gap: calc(2 * var(--snippet-spacing));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-snippet-title {
|
||||
display: flex;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.bd-snippet-tag {
|
||||
align-items: center;
|
||||
background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.1);
|
||||
border-radius: 0.5em;
|
||||
color: var(--theme-color);
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
height: calc(#{cv.getVar("block-spacing")} * 1.25);
|
||||
padding: 0 1em;
|
||||
vertical-align: top;
|
||||
|
||||
&.bd-is-html {
|
||||
background: var(--hl-background);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-preview,
|
||||
.bd-snippet-code {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-snippet-preview {
|
||||
padding-bottom: var(--snippet-spacing);
|
||||
padding-top: var(--snippet-spacing);
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.bd-is-mwb {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-code {
|
||||
font-size: 0.875em;
|
||||
// overflow: auto;
|
||||
// padding-top: var(--snippet-spacing);
|
||||
|
||||
.highlight {
|
||||
border-top-left-radius: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&.bd-is-hovering {
|
||||
&::before {
|
||||
background: var(--theme-color);
|
||||
color: var(--hl-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fullwidth
|
||||
|
||||
.bd-snippet.bd-is-fullwidth {
|
||||
margin-left: calc(-1 * var(--docs-outer));
|
||||
margin-right: calc(-1 * var(--docs-outer));
|
||||
|
||||
.bd-snippet-title {
|
||||
margin-left: var(--docs-outer);
|
||||
}
|
||||
}
|
||||
|
||||
// Clipped
|
||||
|
||||
.bd-snippet.bd-is-clipped {
|
||||
.bd-snippet-code {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-code.bd-is-more {
|
||||
.highlight:not(:last-child) {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-code.bd-is-more.bd-is-more-clipped {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.highlight {
|
||||
height: calc(8 * var(--snippet-spacing));
|
||||
overflow: hidden;
|
||||
|
||||
pre {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bd-show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(0deg, var(--hl-background), transparent);
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.fullhd {
|
||||
.bd-snippet.bd-is-vertical {
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
grid-template-columns: calc(50% - var(--snippet-spacing)) calc(
|
||||
50% - var(--snippet-spacing)
|
||||
);
|
||||
}
|
||||
|
||||
.bd-snippet.bd-is-size-1-2 {
|
||||
grid-template-columns: calc(33% - var(--snippet-spacing)) calc(
|
||||
67% - var(--snippet-spacing)
|
||||
);
|
||||
}
|
||||
|
||||
.bd-snippet-preview {
|
||||
padding-bottom: var(--snippet-spacing);
|
||||
}
|
||||
}
|
||||
177
docs/_sass/docs/docs.scss
Normal file
177
docs/_sass/docs/docs.scss
Normal file
@@ -0,0 +1,177 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-docs {
|
||||
--p: 2rem;
|
||||
--scale: 1;
|
||||
--menu-width: 16rem;
|
||||
--menu-border: 2px;
|
||||
border-top: 1px solid transparent;
|
||||
border-top-color: hsl(
|
||||
cv.getVar("scheme-h"),
|
||||
cv.getVar("scheme-s"),
|
||||
calc(#{cv.getVar("scheme-main-l")} + var(--border-offset))
|
||||
);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-docs-overlay {
|
||||
@include mx.overlay;
|
||||
background-color: rgba(black, 0.8);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.bd-docs-menu {
|
||||
background-color: hsl(
|
||||
cv.getVar("scheme-h"),
|
||||
cv.getVar("scheme-s"),
|
||||
calc(#{cv.getVar("scheme-main-l")} + var(--background-offset))
|
||||
);
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.bd-docs-lead {
|
||||
// container-name: docs-lead;
|
||||
// container-type: inline-size;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--p);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bd-docs-button {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"button-border-width": 0px,
|
||||
)
|
||||
);
|
||||
|
||||
background-color: cv.getVar("scheme-main-ter");
|
||||
box-shadow: none;
|
||||
color: cv.getVar("text-weak");
|
||||
padding: 0 !important;
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
margin-left: -1.5rem;
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.bd-docs-content {
|
||||
font-size: calc(1em * var(--scale));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
.bd-docs {
|
||||
padding: var(--p);
|
||||
|
||||
&.is-active {
|
||||
.bd-docs-overlay {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bd-docs-menu {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs-menu {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
position: absolute;
|
||||
width: var(--menu-width);
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: transform;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
.bd-docs {
|
||||
--p: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 16em 1fr;
|
||||
}
|
||||
|
||||
.bd-docs-button,
|
||||
.bd-docs-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-docs-lead {
|
||||
padding: calc(2 * var(--p));
|
||||
}
|
||||
|
||||
.bd-docs.is-fullwidth {
|
||||
display: block;
|
||||
padding: var(--p);
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: padding-left;
|
||||
|
||||
.bd-docs-button {
|
||||
display: block;
|
||||
margin: 0;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 1.5rem;
|
||||
margin-bottom: -2.5em; // equivalent to height
|
||||
margin-left: calc(-0.5 * var(--p));
|
||||
margin-top: calc(-0.5 * var(--p));
|
||||
|
||||
.fa-solid {
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: transform;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs-lead {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bd-docs-menu {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
right: calc(100% - var(--menu-border));
|
||||
position: fixed;
|
||||
padding-right: 10px;
|
||||
width: calc(var(--menu-width) + var(--menu-border));
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: transform;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
z-index: 10;
|
||||
|
||||
.bd-menu {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: cv.getVar("shadow");
|
||||
transform: translateX(var(--menu-width));
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
padding-left: calc(var(--menu-width) + var(--p));
|
||||
|
||||
.bd-docs-button .fa-solid {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.bd-docs-menu {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from(1400px) {
|
||||
.bd-docs {
|
||||
--scale: 1.125;
|
||||
}
|
||||
}
|
||||
61
docs/_sass/docs/drawing.scss
Normal file
61
docs/_sass/docs/drawing.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-has-drawing {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-drawing {
|
||||
--base: 1.25px;
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
height: calc(var(--base) * var(--height));
|
||||
width: calc(var(--base) * var(--width));
|
||||
|
||||
svg {
|
||||
height: calc(var(--base) * var(--height));
|
||||
width: calc(var(--base) * var(--width));
|
||||
}
|
||||
|
||||
&.bd-is-try-it-out {
|
||||
bottom: 100%;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
&.bd-is-love-letters {
|
||||
bottom: 110%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
&.bd-is-crazy {
|
||||
right: 40%;
|
||||
top: 110%;
|
||||
}
|
||||
|
||||
&.bd-is-customize {
|
||||
right: -10%;
|
||||
top: 105%;
|
||||
}
|
||||
|
||||
&.bd-is-opinion-free {
|
||||
right: 100%;
|
||||
top: 110%;
|
||||
}
|
||||
|
||||
&.bd-is-join-us {
|
||||
left: 120%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.bd-is-spam-free {
|
||||
bottom: 100%;
|
||||
right: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
.bd-drawing {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
5
docs/_sass/docs/example.scss
Normal file
5
docs/_sass/docs/example.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@use "sass/utilities/extends";
|
||||
|
||||
.bd-example {
|
||||
@extend %block;
|
||||
}
|
||||
190
docs/_sass/docs/examples.scss
Normal file
190
docs/_sass/docs/examples.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
@use "sass/utilities/extends";
|
||||
@use "sass/utilities/controls";
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bulma-arrow-mixin {
|
||||
@include mx.arrow(purple);
|
||||
}
|
||||
|
||||
.bulma-burger-mixin {
|
||||
@include mx.burger(2.5rem);
|
||||
}
|
||||
|
||||
.bulma-delete-mixin {
|
||||
@include mx.delete;
|
||||
}
|
||||
|
||||
.bulma-loader-mixin {
|
||||
@include mx.loader;
|
||||
}
|
||||
|
||||
.bulma-block-mixin {
|
||||
@include mx.block(1rem);
|
||||
}
|
||||
|
||||
.bulma-fa-mixin {
|
||||
@include mx.fa(1rem, 2rem);
|
||||
background-color: lavender;
|
||||
}
|
||||
|
||||
.bulma-overlay-mixin-parent {
|
||||
background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320);
|
||||
background-size: cover;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
height: 11.25rem;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.bulma-overlay-mixin {
|
||||
@include mx.overlay(1.5rem);
|
||||
background-color: darkorange;
|
||||
border-radius: 0.25em;
|
||||
color: white;
|
||||
opacity: 0.9;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.bulma-placeholder-mixin {
|
||||
@include mx.placeholder {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
border-color: hsl(195deg, 53%, 79%);
|
||||
|
||||
&:hover {
|
||||
border-color: hsl(195deg, 83%, 66%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: hsl(195deg, 100%, 56%) !important;
|
||||
box-shadow: 0 0 0 0.125em hsla(195deg, 100%, 56%, 0.25) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bulma-clearfix-mixin {
|
||||
@include mx.clearfix;
|
||||
|
||||
img {
|
||||
border-radius: 0.25em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.bulma-center-mixin-parent {
|
||||
background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
|
||||
background-size: cover;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
height: 11.25rem;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.bulma-center-mixin {
|
||||
@include mx.center(96px);
|
||||
border-radius: 8px;
|
||||
height: 96px;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.bulma-reset-mixin {
|
||||
@include mx.reset;
|
||||
}
|
||||
|
||||
.bulma-unselectable-mixin {
|
||||
@include mx.unselectable;
|
||||
}
|
||||
|
||||
.bulma-ltr-rtl-mixin {
|
||||
background-color: lightgreen;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid seagreen;
|
||||
margin-right: -1px;
|
||||
|
||||
&:first-child {
|
||||
@include mx.ltr {
|
||||
border-bottom-left-radius: 0.5em;
|
||||
border-top-left-radius: 0.5em;
|
||||
}
|
||||
|
||||
@include mx.rtl {
|
||||
border-bottom-right-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include mx.ltr {
|
||||
border-bottom-right-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em;
|
||||
}
|
||||
|
||||
@include mx.rtl {
|
||||
border-bottom-left-radius: 0.5em;
|
||||
border-top-left-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bulma-ltr-position-mixin-parent {
|
||||
background-color: beige;
|
||||
border-radius: 0.5em;
|
||||
padding: 1rem;
|
||||
padding-left: 5rem;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bulma-ltr-position-mixin {
|
||||
@include mx.ltr-position(1rem, false);
|
||||
border-radius: 0.25em;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.bulma-ltr-property-mixin-parent {
|
||||
align-items: flex-start;
|
||||
background-color: midnightblue;
|
||||
border-radius: 0.5em;
|
||||
color: lightskyblue;
|
||||
display: flex;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bulma-ltr-property-mixin {
|
||||
@include mx.ltr-property("margin", 1rem, false);
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.bulma-control-mixin {
|
||||
@include controls.control;
|
||||
background: deeppink;
|
||||
color: white;
|
||||
|
||||
&.is-small {
|
||||
@include controls.control-small;
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
@include controls.control-medium;
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
@include controls.control-large;
|
||||
}
|
||||
}
|
||||
|
||||
.bulma-control-extend {
|
||||
@include controls.control;
|
||||
background: mediumblue;
|
||||
color: white;
|
||||
}
|
||||
46
docs/_sass/docs/expo.scss
Normal file
46
docs/_sass/docs/expo.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
$website-gap: 0px;
|
||||
$website-width: 672px;
|
||||
|
||||
.bd-websites {
|
||||
--gap: #{$website-gap};
|
||||
--width: #{$website-width};
|
||||
--spacing: 1.5rem;
|
||||
display: grid;
|
||||
grid-gap: var(--gap);
|
||||
grid-template-columns: 1fr;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: calc(
|
||||
calc(2 * calc(var(--width) + var(--spacing)) + calc(3 * var(--gap)))
|
||||
);
|
||||
padding-left: var(--spacing);
|
||||
padding-right: var(--spacing);
|
||||
}
|
||||
|
||||
.bd-website {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: calc(2 * var(--width));
|
||||
padding-bottom: var(--spacing);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--expo-light);
|
||||
|
||||
.title {
|
||||
color: var(--expo-dark);
|
||||
}
|
||||
|
||||
.bd-website-date {
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-is-highlighted {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
102
docs/_sass/docs/hero.scss
Normal file
102
docs/_sass/docs/hero.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-hero {
|
||||
--scale: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--scale) * 1.5rem);
|
||||
padding: calc(var(--scale) * 3rem);
|
||||
text-align: center;
|
||||
|
||||
&.is-docs {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
.bd-hero-body {
|
||||
flex-basis: 20em;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-hr {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.bd-hero-title {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.bd-hero-prints {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.bd-hero.is-docs {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-hero-title {
|
||||
color: hsl(
|
||||
cv.getVar("text-h"),
|
||||
cv.getVar("text-s"),
|
||||
cv.getVar("text-title-l")
|
||||
);
|
||||
font-size: calc(var(--scale) * 3rem);
|
||||
font-weight: cv.getVar("weight-extrabold");
|
||||
line-height: 1.125;
|
||||
word-break: break-word;
|
||||
|
||||
a {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-hero-subtitle {
|
||||
color: cv.getVar("text-weak");
|
||||
font-size: calc(var(--scale) * 1.25em);
|
||||
}
|
||||
|
||||
.bd-hero-prints {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.bd-hero-print {
|
||||
opacity: 0.5;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: opacity;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
.bd-hero {
|
||||
--scale: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-carbon {
|
||||
&,
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> div {
|
||||
height: 280px;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
267
docs/_sass/docs/highlight.scss
Normal file
267
docs/_sass/docs/highlight.scss
Normal file
@@ -0,0 +1,267 @@
|
||||
.highlight {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
background-color: var(--hl-gray-09);
|
||||
border-radius: var(--hl-radius);
|
||||
color: var(--hl-gray-03);
|
||||
font-size: 0.875em;
|
||||
position: relative;
|
||||
|
||||
&.bd-is-hovering {
|
||||
box-shadow: inset 0 0 0 2px var(--hl-orange);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: transparent;
|
||||
color: currentColor;
|
||||
font-size: 1em;
|
||||
line-height: 1.375;
|
||||
margin: 0 !important;
|
||||
padding: 1.25em 1.5em;
|
||||
white-space: pre;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.c {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.err,
|
||||
.g {
|
||||
color: var(--hl-gray-03);
|
||||
}
|
||||
|
||||
.k {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.l {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.n {
|
||||
color: var(--hl-gray-03);
|
||||
}
|
||||
|
||||
.o {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.x {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.p {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.cm {
|
||||
color: var(--hl-gray-01);
|
||||
}
|
||||
|
||||
.cp {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.cs {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.gd {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.ge {
|
||||
color: var(--hl-gray-05);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.gr {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
.gh {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.gi {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.go,
|
||||
.gp {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.gs {
|
||||
color: var(--hl-gray-05);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gu {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.gt {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.kc {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.kd {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.kn,
|
||||
.kp {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.kr {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.kt {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
.ld {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.m,
|
||||
.s {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.na {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.nb {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
.nc {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.no {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.nd {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.ni,
|
||||
.ne {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.nf {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.nl,
|
||||
.nn,
|
||||
.nx,
|
||||
.py {
|
||||
color: var(--hl-rose);
|
||||
}
|
||||
|
||||
.nt,
|
||||
.nv {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.ow {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.w {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.mf,
|
||||
.mh,
|
||||
.mi,
|
||||
.mo {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.sb {
|
||||
color: var(--hl-gray-01);
|
||||
}
|
||||
|
||||
.sc {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.sd {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.s2 {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.se {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.sh {
|
||||
color: var(--hl-gray-05);
|
||||
}
|
||||
|
||||
.si,
|
||||
.sx {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.sr {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
.s1,
|
||||
.ss {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.bp,
|
||||
.vc,
|
||||
.vg,
|
||||
.vi {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.il {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
49
docs/_sass/docs/klmn.scss
Normal file
49
docs/_sass/docs/klmn.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
.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-value,
|
||||
.bd-klmn-gap {
|
||||
background-color: var(--hl-gray-09);
|
||||
border-radius: cv.getVar("radius");
|
||||
color: var(--hl-orange);
|
||||
font-family: cv.getVar("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: var(--hl-orange);
|
||||
color: var(--hl-gray-09);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-klmn-value {
|
||||
background-color: var(--hl-orange);
|
||||
color: var(--hl-gray-09);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.bd-klmn-columns:last-child {
|
||||
.bd-notification {
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
111
docs/_sass/docs/link.scss
Normal file
111
docs/_sass/docs/link.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
.bd-links {
|
||||
display: grid;
|
||||
gap: cv.getVar("block-spacing");
|
||||
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
|
||||
}
|
||||
|
||||
.bd-link-heading,
|
||||
.bd-links {
|
||||
--h: var(--theme-h);
|
||||
--s: var(--theme-s);
|
||||
--l: 60%;
|
||||
--a: 0.1;
|
||||
--color: var(--theme-color);
|
||||
|
||||
&.is-start {
|
||||
--h: #{cv.getVar("start-h")};
|
||||
--s: #{cv.getVar("start-s")};
|
||||
}
|
||||
|
||||
&.is-features,
|
||||
&.is-special {
|
||||
--h: #{cv.getVar("danger-h")};
|
||||
--s: #{cv.getVar("danger-s")};
|
||||
}
|
||||
|
||||
&.is-sass {
|
||||
--h: #{cv.getVar("sass-h")};
|
||||
--s: #{cv.getVar("sass-s")};
|
||||
}
|
||||
|
||||
&.is-customize {
|
||||
--h: #{cv.getVar("info-h")};
|
||||
--s: #{cv.getVar("info-s")};
|
||||
}
|
||||
|
||||
&.is-helpers {
|
||||
--h: #{cv.getVar("success-h")};
|
||||
--s: #{cv.getVar("success-s")};
|
||||
}
|
||||
}
|
||||
|
||||
.bd-link {
|
||||
background-color: cv.getVar("scheme-main");
|
||||
box-shadow: cv.getVar("shadow");
|
||||
border-radius: cv.getVar("radius-large");
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: cv.getVar("border");
|
||||
color: cv.getVar("text-weak");
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
padding: 1.125em 1.5em 1.5em;
|
||||
box-shadow: 0px 0.25em 0.5em 0px hsla(var(--h), var(--s), var(--l), var(--a));
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: border-color, box-shadow, transform;
|
||||
|
||||
&:hover {
|
||||
--a: 0.05;
|
||||
border-color: var(--color);
|
||||
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(-0.5em);
|
||||
}
|
||||
|
||||
&:active {
|
||||
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));
|
||||
transform: translateY(-0.25em);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-link-heading {
|
||||
align-items: center;
|
||||
color: var(--color);
|
||||
display: flex;
|
||||
font-size: 1.25em;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.bd-link-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.bd-link-icon {
|
||||
color: var(--color);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
height: 1.5em;
|
||||
margin-right: 0.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.bd-link-title {
|
||||
color: cv.getVar("text-strong");
|
||||
display: block;
|
||||
font-size: 1.125em;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bd-link-subtitle {
|
||||
min-height: 4.5em;
|
||||
padding-right: 3em;
|
||||
}
|
||||
172
docs/_sass/docs/menu.scss
Normal file
172
docs/_sass/docs/menu.scss
Normal file
@@ -0,0 +1,172 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/extends";
|
||||
|
||||
.bd-menu {
|
||||
--offset: 1em;
|
||||
--total: 2.25em; // This value ensures vertical alignment
|
||||
padding: 1em 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-menu-section {
|
||||
--color: hsl(var(--h), var(--s), var(--l));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.is-start {
|
||||
--h: #{cv.getVar("start-h")};
|
||||
--s: #{cv.getVar("start-s")};
|
||||
--l: #{cv.getVar("start-l")};
|
||||
}
|
||||
|
||||
&.is-features,
|
||||
&.is-special {
|
||||
--h: #{cv.getVar("danger-h")};
|
||||
--s: #{cv.getVar("danger-s")};
|
||||
--l: #{cv.getVar("danger-l")};
|
||||
}
|
||||
|
||||
&.is-sass {
|
||||
--h: #{cv.getVar("sass-h")};
|
||||
--s: #{cv.getVar("sass-s")};
|
||||
--s: 60%;
|
||||
--l: #{cv.getVar("sass-l")};
|
||||
--l: 60%;
|
||||
}
|
||||
|
||||
&.is-custom,
|
||||
&.is-customize {
|
||||
--h: #{cv.getVar("info-h")};
|
||||
--s: #{cv.getVar("info-s")};
|
||||
--l: 50%;
|
||||
}
|
||||
|
||||
&.is-library {
|
||||
--h: #{cv.getVar("primary-h")};
|
||||
--s: #{cv.getVar("primary-s")};
|
||||
--s: 100%;
|
||||
--l: #{cv.getVar("primary-l")};
|
||||
--l: 40%;
|
||||
}
|
||||
|
||||
&.is-utilities {
|
||||
--h: #{cv.getVar("link-h")};
|
||||
--s: #{cv.getVar("link-s")};
|
||||
--l: #{cv.getVar("link-l")};
|
||||
--l: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-menu-heading {
|
||||
@extend %reset;
|
||||
|
||||
align-items: center;
|
||||
border-radius: 0.5em;
|
||||
color: var(--color);
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
line-height: 1.25;
|
||||
padding: 0.625em 0.5em;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: background-color, color;
|
||||
|
||||
// &:hover {
|
||||
// background-color: hsla(var(--h), var(--s), var(--l), 0.1);
|
||||
// }
|
||||
|
||||
.icon {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: inherit;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
}
|
||||
}
|
||||
|
||||
.bd-menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: cv.getVar("weight-medium");
|
||||
// max-height: 0;
|
||||
overflow: hidden;
|
||||
padding-left: calc(var(--total) - var(--offset));
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: max-height;
|
||||
|
||||
// &.is-open {
|
||||
// max-height: calc(var(--size) * 1.75rem);
|
||||
// }
|
||||
}
|
||||
|
||||
.bd-menu-library-list {
|
||||
--sublist-size: 0;
|
||||
|
||||
// &.is-open {
|
||||
// max-height: calc(calc(var(--size) + var(--sublist-size)) * 1.75rem);
|
||||
// }
|
||||
}
|
||||
|
||||
.bd-menu-sublist {
|
||||
font-weight: cv.getVar("weight-normal");
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding-left: calc(var(--total) - var(--offset));
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: max-height;
|
||||
|
||||
&.is-open {
|
||||
max-height: calc(var(--sublist-size) * 1.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-menu-link {
|
||||
align-items: center;
|
||||
border-radius: 0.5em;
|
||||
color: cv.getVar("text");
|
||||
display: flex;
|
||||
font-weight: inherit;
|
||||
padding: 0.25em var(--offset);
|
||||
transition-property: background-color, color;
|
||||
|
||||
&.is-clicked {
|
||||
.icon {
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: transform;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--color);
|
||||
margin-inline-start: auto;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(
|
||||
cv.getVar("text-h"),
|
||||
cv.getVar("text-s"),
|
||||
cv.getVar("text-l"),
|
||||
0.1
|
||||
);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: hsla(var(--h), var(--s), var(--l), 0.1);
|
||||
color: hsl(var(--h), var(--s), var(--l));
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-menu-link-name {
|
||||
font-size: 0.875em;
|
||||
font-weight: inherit;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
66
docs/_sass/docs/notification.scss
Normal file
66
docs/_sass/docs/notification.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/derived-variables" as dv;
|
||||
|
||||
.bd-notification {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"notification-h": #{cv.getVar("scheme-h")},
|
||||
"notification-s": #{cv.getVar("scheme-s")},
|
||||
"notification-background-l": #{cv.getVar("background-l")},
|
||||
"notification-color-l": #{cv.getVar("text-l")},
|
||||
)
|
||||
);
|
||||
|
||||
background-color: hsl(
|
||||
cv.getVar("notification-h"),
|
||||
cv.getVar("notification-s"),
|
||||
cv.getVar("notification-background-l")
|
||||
);
|
||||
border-radius: cv.getVar("radius");
|
||||
color: hsl(
|
||||
cv.getVar("notification-h"),
|
||||
cv.getVar("notification-s"),
|
||||
cv.getVar("notification-color-l")
|
||||
);
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
padding: 1.25rem 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.title,
|
||||
.subtitle,
|
||||
.content,
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
background-color: hsla(
|
||||
cv.getVar("scheme-h"),
|
||||
cv.getVar("scheme-s"),
|
||||
cv.getVar("scheme-invert-l"),
|
||||
0.2
|
||||
);
|
||||
border-radius: cv.getVar("radius");
|
||||
color: cv.getVar("scheme-main");
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $pair in dv.$colors {
|
||||
&.is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"notification-h": #{cv.getVar($name, "", "-h")},
|
||||
"notification-s": #{cv.getVar($name, "", "-s")},
|
||||
"notification-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"notification-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
151
docs/_sass/docs/options.scss
Normal file
151
docs/_sass/docs/options.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/extends";
|
||||
@use "sass/utilities/initial-variables" as iv;
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-options {
|
||||
@extend %block;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.bd-option {
|
||||
--bulma-link-text: var(--theme-color);
|
||||
|
||||
.media-content {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-option-or {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
background-color: cv.getVar("scheme-main-ter");
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
p {
|
||||
align-items: center;
|
||||
background-color: cv.getVar("scheme-main-ter");
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
display: flex;
|
||||
font-size: 0.75em;
|
||||
font-weight: cv.getVar("weight-semibold");
|
||||
height: 3.5rem;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
width: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-option-item {
|
||||
border-top: 2px solid cv.getVar("scheme-main-ter");
|
||||
margin-top: cv.getVar("block-spacing");
|
||||
padding-top: cv.getVar("block-spacing");
|
||||
|
||||
.bd-fat-button.is-pulled-right {
|
||||
font-size: 0.75em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bd-fat-button.is-primary {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.until(iv.$widescreen) {
|
||||
.bd-options {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.bd-option-or {
|
||||
margin: cv.getVar("block-spacing") 0;
|
||||
|
||||
&::before {
|
||||
height: 2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: calc(50% - 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
.bd-options {
|
||||
grid-template-columns: calc(50% - 4rem) 8rem calc(50% - 4rem);
|
||||
}
|
||||
|
||||
.bd-option-or {
|
||||
&::before {
|
||||
bottom: 0;
|
||||
left: calc(50% - 1px);
|
||||
top: 0;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tabs {
|
||||
@extend %block;
|
||||
|
||||
.highlight pre {
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tabs-nav {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
@extend %reset;
|
||||
background-color: cv.getVar("scheme-main-ter");
|
||||
border-radius: 0.375em 0.375em 0 0;
|
||||
color: cv.getVar("text-weak");
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
font-family: cv.getVar("family-monospace");
|
||||
font-size: 0.75em;
|
||||
padding: 0.5em 0.75em;
|
||||
|
||||
&:not(.bd-is-active) {
|
||||
&:hover {
|
||||
color: var(--hl-background);
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-is-active {
|
||||
background-color: var(--hl-background);
|
||||
color: var(--hl-color);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tabs-item {
|
||||
display: none;
|
||||
|
||||
.highlight {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&.bd-is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
72
docs/_sass/docs/pagination.scss
Normal file
72
docs/_sass/docs/pagination.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
.bd-pagination {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
|
||||
.bd-pagination-links,
|
||||
.bd-pagination-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bd-pagination-body {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--container-width-desktop);
|
||||
}
|
||||
|
||||
.bd-pagination-button {
|
||||
align-items: center;
|
||||
background-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.1);
|
||||
color: hsl(
|
||||
var(--theme-h),
|
||||
var(--theme-s),
|
||||
min(var(--theme-l), var(--bulma-text-l))
|
||||
);
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
padding: 0.75em 1em;
|
||||
border-radius: 0.5em;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.2);
|
||||
}
|
||||
|
||||
i {
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
em {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-size: 0.875em;
|
||||
font-weight: 400;
|
||||
opacity: 0.5;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-pagination-prev {
|
||||
padding-inline-end: 1.25em;
|
||||
|
||||
span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-pagination-next {
|
||||
margin-left: auto;
|
||||
padding-inline-start: 1.25em;
|
||||
}
|
||||
59
docs/_sass/docs/pills.scss
Normal file
59
docs/_sass/docs/pills.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@use "sass/utilities/extends";
|
||||
|
||||
.bd-pills {
|
||||
@extend %block;
|
||||
align-items: center;
|
||||
color: var(--bulma-text-weak);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bd-pill-label {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.bd-pills-body {
|
||||
background: var(--bulma-background);
|
||||
align-items: center;
|
||||
border-radius: 0.5em;
|
||||
display: flex;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.bd-pill-button {
|
||||
@extend %reset;
|
||||
border-radius: 0.25em;
|
||||
color: var(--bulma-text);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
padding: 0.5em 0.75em;
|
||||
position: relative;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: color, background-color;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bulma-scheme-main);
|
||||
color: var(--bulma-text-strong);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--bulma-scheme-main);
|
||||
box-shadow:
|
||||
0 0 0 1px
|
||||
hsla(
|
||||
var(--bulma-shadow-h),
|
||||
var(--bulma-shadow-s),
|
||||
var(--bulma-shadow-l),
|
||||
0.02
|
||||
),
|
||||
0 0.125em 0.25em
|
||||
hsla(
|
||||
var(--bulma-shadow-h),
|
||||
var(--bulma-shadow-s),
|
||||
var(--bulma-shadow-l),
|
||||
0.1
|
||||
);
|
||||
color: var(--bulma-text-strong);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
28
docs/_sass/docs/skrin.scss
Normal file
28
docs/_sass/docs/skrin.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
.bd-skrin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
background-color: cv.getVar("background");
|
||||
border-radius: cv.getVar("radius-large");
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
// box-shadow: 0 0 0 0.25rem cv.getVar("border");
|
||||
border-radius: cv.getVar("radius-medium");
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: cv.getVar("text-weak");
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
190
docs/_sass/docs/tw.scss
Normal file
190
docs/_sass/docs/tw.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
|
||||
.bd-tws {
|
||||
--tws-spacing: #{var(--bulma-block-spacing)};
|
||||
--column-min-width: 100%;
|
||||
padding: 0 var(--tws-spacing) var(--tws-spacing);
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
.bd-tws {
|
||||
--column-min-width: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.widescreen {
|
||||
.bd-tws {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tws-list {
|
||||
display: grid;
|
||||
grid-gap: var(--tws-spacing);
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width), 1fr));
|
||||
}
|
||||
|
||||
.bd-tw {
|
||||
background-color: var(--bulma-scheme-main-bis);
|
||||
border-radius: var(--bulma-radius-large);
|
||||
flex-shrink: 0;
|
||||
font-size: 1em;
|
||||
padding: 1.25em;
|
||||
text-align: left;
|
||||
|
||||
&.bd-is-white {
|
||||
background-color: var(--bulma-scheme-main);
|
||||
}
|
||||
|
||||
> .mb-4 {
|
||||
float: right;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-header {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.bd-tw-author {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover {
|
||||
.bd-tw-fullname {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-avatar {
|
||||
flex-shrink: 0;
|
||||
height: 2.25em;
|
||||
margin-right: 0.5em;
|
||||
width: 2.25em;
|
||||
|
||||
img {
|
||||
border-radius: var(--bulma-radius-rounded);
|
||||
display: block;
|
||||
height: 2.25em;
|
||||
width: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-fullname {
|
||||
color: var(--bulma-text-strong);
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
font-weight: var(--bulma-weight-bold);
|
||||
}
|
||||
|
||||
.bd-tw-username {
|
||||
color: var(--bulma-text-weak);
|
||||
display: block;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.bd-tw-content {
|
||||
color: var(--bulma-text-strong);
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
margin-top: 1em;
|
||||
|
||||
a {
|
||||
color: var(--bulma-link);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-date {
|
||||
font-size: 0.875em;
|
||||
line-height: 1.4;
|
||||
margin-top: 0.25em;
|
||||
|
||||
a {
|
||||
color: var(--bulma-text-weak);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.bd-tw-action {
|
||||
margin-right: 1.25em;
|
||||
}
|
||||
|
||||
.bd-tw-action-link {
|
||||
align-items: center;
|
||||
color: var(--bulma-text);
|
||||
display: flex;
|
||||
height: 1.25em;
|
||||
min-width: 1.25em;
|
||||
}
|
||||
|
||||
.bd-tw-icon {
|
||||
background-size: contain;
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.bd-tw-action-stat {
|
||||
color: currentColor;
|
||||
font-size: 0.875em;
|
||||
margin-left: 0.5em;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.bd-tw-action.is-reply {
|
||||
.bd-tw-icon {
|
||||
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);
|
||||
}
|
||||
|
||||
.bd-tw-action-link:hover {
|
||||
color: var(--info);
|
||||
|
||||
.bd-tw-icon {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-action.is-retweet {
|
||||
.bd-tw-icon {
|
||||
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);
|
||||
}
|
||||
|
||||
.bd-tw-action-link:hover {
|
||||
color: var(--success);
|
||||
|
||||
.bd-tw-icon {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-tw-action.is-heart {
|
||||
.bd-tw-icon {
|
||||
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);
|
||||
}
|
||||
|
||||
.bd-tw-action-link:hover {
|
||||
color: var(--danger);
|
||||
|
||||
.bd-tw-icon {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
51
docs/_sass/docs/vars-table.scss
Normal file
51
docs/_sass/docs/vars-table.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.bd-vars-table {
|
||||
--py: 0.5rem;
|
||||
--px: 1rem;
|
||||
background-color: var(--hl-gray-09);
|
||||
border-radius: var(--hl-radius);
|
||||
color: var(--hl-gray-01);
|
||||
padding-bottom: calc(2 * var(--py));
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: var(--py) var(--px);
|
||||
}
|
||||
|
||||
th {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
padding: calc(4 * var(--py)) calc(2 * var(--px));
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-top: 1px solid var(--hl-gray-07);
|
||||
}
|
||||
|
||||
td {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: none;
|
||||
|
||||
pre {
|
||||
padding: var(--py) var(--px);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-copy {
|
||||
font-size: 0.75rem;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user