mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
245
docs/bulma-docs.scss
Normal file
245
docs/bulma-docs.scss
Normal file
@@ -0,0 +1,245 @@
|
||||
@charset "utf-8";
|
||||
|
||||
$bootstrap: #6f5499;
|
||||
$github: #333333;
|
||||
$twitter: #55acee;
|
||||
$patreon: #f96854;
|
||||
$patreon-blue: #052d49;
|
||||
$fortyfour: #5f45bb;
|
||||
$amazon: #ffd863;
|
||||
$bleeding-green: #abf47c;
|
||||
$bleeding-red: #ca1f26;
|
||||
$rss: #f26522;
|
||||
$algolia: #3c4fe0;
|
||||
|
||||
$star: #ffd257;
|
||||
$purple: #b86bff;
|
||||
|
||||
$mauve: #8a4d76;
|
||||
$pink: #fa7c91;
|
||||
$rose: #ea4aaa;
|
||||
$brown: #757763;
|
||||
$beige-light: #d0d1cd;
|
||||
$beige-lighter: #eff0eb;
|
||||
$sass: #bf4080;
|
||||
|
||||
$carbon-width: 300px;
|
||||
$carbon-height: 100px;
|
||||
$carbon-line-height: 20px;
|
||||
$carbon-min-lines: 6;
|
||||
$carbon-poweredby-height: 20px;
|
||||
$carbon-min-height: ($carbon-line-height * $carbon-min-lines) +
|
||||
$carbon-poweredby-height;
|
||||
|
||||
$main-spacing: 3rem;
|
||||
$intro-width: 1080px;
|
||||
$sidebar-width: 10.5rem;
|
||||
|
||||
$radius: 0.375em;
|
||||
|
||||
$bd-edge-width: 11.25rem;
|
||||
$bd-edge-offset: 2rem;
|
||||
|
||||
@import '../sass/utilities/initial-variables';
|
||||
@import '../sass/utilities/functions';
|
||||
|
||||
$custom-colors: (
|
||||
'expo': (
|
||||
$star,
|
||||
$white,
|
||||
findLightColor($star),
|
||||
findDarkColor($star),
|
||||
),
|
||||
'love': (
|
||||
$red,
|
||||
$white,
|
||||
findLightColor($red),
|
||||
findDarkColor($red),
|
||||
),
|
||||
'patreon': (
|
||||
$patreon,
|
||||
$white,
|
||||
findLightColor($patreon),
|
||||
findDarkColor($patreon),
|
||||
),
|
||||
'rss': (
|
||||
$rss,
|
||||
$white,
|
||||
findLightColor($rss),
|
||||
findDarkColor($rss),
|
||||
),
|
||||
'bleeding': (
|
||||
$bleeding-green,
|
||||
findColorInvert($bleeding-green),
|
||||
findLightColor($bleeding-green),
|
||||
findDarkColor($bleeding-green),
|
||||
),
|
||||
'sass': (
|
||||
$sass,
|
||||
$white,
|
||||
findLightColor($sass),
|
||||
findDarkColor($sass),
|
||||
),
|
||||
'amazon': (
|
||||
$amazon,
|
||||
findColorInvert($amazon),
|
||||
findLightColor($amazon),
|
||||
findDarkColor($amazon),
|
||||
),
|
||||
'sponsor': (
|
||||
$rose,
|
||||
$white,
|
||||
findLightColor($rose),
|
||||
findDarkColor($rose),
|
||||
),
|
||||
'twitter': (
|
||||
$twitter,
|
||||
$white,
|
||||
findLightColor($twitter),
|
||||
findDarkColor($twitter),
|
||||
),
|
||||
'videos': (
|
||||
$green,
|
||||
$white,
|
||||
findLightColor($green),
|
||||
findDarkColor($green),
|
||||
),
|
||||
'extensions': (
|
||||
$cyan,
|
||||
$white,
|
||||
findLightColor($cyan),
|
||||
findDarkColor($cyan),
|
||||
),
|
||||
'bootstrap': (
|
||||
$bootstrap,
|
||||
$white,
|
||||
findLightColor($bootstrap),
|
||||
findDarkColor($bootstrap),
|
||||
),
|
||||
);
|
||||
|
||||
@import '../sass/utilities/derived-variables';
|
||||
|
||||
$navbar-breakpoint: $tablet;
|
||||
|
||||
@import '../bulma';
|
||||
|
||||
%center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin selection($current-selector: false) {
|
||||
@if $current-selector {
|
||||
&::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
&::selection {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
::selection {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%reset {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: currentColor;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
%bd-box {
|
||||
background-color: $white;
|
||||
border-radius: $radius-large;
|
||||
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05);
|
||||
display: block;
|
||||
}
|
||||
|
||||
%link-before-background {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@include overlay;
|
||||
background-color: $scheme-main-bis;
|
||||
border-radius: $radius-large;
|
||||
content: '';
|
||||
display: block;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale(1.1);
|
||||
transform-origin: center;
|
||||
transition-duration: $speed * 2;
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './_sass/base/css-vars';
|
||||
@import './_sass/base/custom';
|
||||
@import './_sass/base/helpers';
|
||||
|
||||
@import './_sass/components/anchors';
|
||||
@import './_sass/components/options';
|
||||
@import './_sass/components/banner';
|
||||
@import './_sass/components/call';
|
||||
@import './_sass/components/carbon';
|
||||
@import './_sass/components/categories';
|
||||
@import './_sass/components/code';
|
||||
@import './_sass/components/content';
|
||||
@import './_sass/components/hero';
|
||||
@import './_sass/components/highlight';
|
||||
@import './_sass/components/klmn';
|
||||
@import './_sass/components/navbar';
|
||||
@import './_sass/components/notification';
|
||||
@import './_sass/components/pagination';
|
||||
@import './_sass/components/features';
|
||||
@import './_sass/components/links';
|
||||
@import './_sass/components/screenshots';
|
||||
@import './_sass/components/drawing';
|
||||
@import './_sass/components/variables';
|
||||
@import './_sass/components/book';
|
||||
@import './_sass/components/native';
|
||||
|
||||
@import './_sass/pages/index';
|
||||
@import './_sass/pages/docs';
|
||||
@import './_sass/pages/videos';
|
||||
@import './_sass/pages/love';
|
||||
@import './_sass/pages/expo';
|
||||
@import './_sass/pages/backers';
|
||||
@import './_sass/pages/blog';
|
||||
@import './_sass/pages/single';
|
||||
@import './_sass/pages/extensions';
|
||||
@import './_sass/pages/made-with-bulma';
|
||||
@import './_sass/pages/bootstrap';
|
||||
|
||||
@import './_sass/index/hello';
|
||||
@import './_sass/index/focus';
|
||||
@import './_sass/index/focus-animations';
|
||||
@import './_sass/index/best';
|
||||
@import './_sass/index/sponsors';
|
||||
@import './_sass/index/heading';
|
||||
@import './_sass/index/columns';
|
||||
@import './_sass/index/custom';
|
||||
|
||||
@import './_sass/global/support';
|
||||
@import './_sass/global/newsletter';
|
||||
@import './_sass/global/cc';
|
||||
Reference in New Issue
Block a user