mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Init themes
This commit is contained in:
Jeremy Thomas
parent
891fb0677e
commit
ac043156e1
1
bulma.sass
vendored
1
bulma.sass
vendored
@ -8,3 +8,4 @@
|
||||
@import "sass/grid/_all"
|
||||
@import "sass/helpers/_all"
|
||||
@import "sass/layout/_all"
|
||||
@import "sass/themes/default"
|
||||
|
||||
191
css/bulma.css
vendored
191
css/bulma.css
vendored
@ -1,12 +1,5 @@
|
||||
/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
|
||||
@-webkit-keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
/* Bulma Utilities */
|
||||
@keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@ -129,8 +122,7 @@
|
||||
}
|
||||
|
||||
.button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
|
||||
-webkit-animation: spinAround 500ms infinite linear;
|
||||
animation: spinAround 500ms infinite linear;
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
@ -229,6 +221,7 @@ fieldset[disabled] .pagination-ellipsis {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Bulma Base */
|
||||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
||||
html,
|
||||
body,
|
||||
@ -320,10 +313,7 @@ html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
article,
|
||||
@ -448,6 +438,7 @@ table th {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
/* Bulma Elements */
|
||||
.box {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
@ -2566,14 +2557,10 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
.progress:indeterminate {
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-duration: 1.5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-name: moveIndeterminate;
|
||||
animation-name: moveIndeterminate;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: moveIndeterminate;
|
||||
animation-timing-function: linear;
|
||||
background-color: #ededed;
|
||||
background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
|
||||
background-position: top left;
|
||||
@ -2601,15 +2588,6 @@ fieldset[disabled] .button {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
@-webkit-keyframes moveIndeterminate {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
to {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveIndeterminate {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
@ -3061,6 +3039,8 @@ a.tag:hover {
|
||||
|
||||
.title,
|
||||
.subtitle {
|
||||
--title-sub-size: 0.75em;
|
||||
--title-sup-size: 0.75em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@ -3073,12 +3053,12 @@ a.tag:hover {
|
||||
|
||||
.title sub,
|
||||
.subtitle sub {
|
||||
font-size: 0.75em;
|
||||
font-size: var(--title-sub-size);
|
||||
}
|
||||
|
||||
.title sup,
|
||||
.subtitle sup {
|
||||
font-size: 0.75em;
|
||||
font-size: var(--title-sup-size);
|
||||
}
|
||||
|
||||
.title .tag,
|
||||
@ -3087,15 +3067,21 @@ a.tag:hover {
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #363636;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.125;
|
||||
--title-color: var(--text-strong, #363636);
|
||||
color: var(--title-color);
|
||||
--title-size: var(--size-3, 2rem);
|
||||
--title-weight: var(--weight-semibold, 600);
|
||||
--title-line-height: 1.125;
|
||||
--title-strong-color: inherit;
|
||||
--title-strong-weight: inherit;
|
||||
font-size: var(--title-size);
|
||||
font-weight: var(--title-weight);
|
||||
line-height: var(--title-line-height);
|
||||
}
|
||||
|
||||
.title strong {
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
color: var(--title-strong-color);
|
||||
font-weight: var(--title-strong-weight);
|
||||
}
|
||||
|
||||
.title + .highlight {
|
||||
@ -3135,15 +3121,15 @@ a.tag:hover {
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #4a4a4a;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
color: var(--text, #4a4a4a);
|
||||
font-size: var(--size-5, 1.25rem);
|
||||
font-weight: var(--weight-normal, 400);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.subtitle strong {
|
||||
color: #363636;
|
||||
font-weight: 600;
|
||||
color: var(--text-strong, #363636);
|
||||
font-weight: var(--weight-semibold, 600);
|
||||
}
|
||||
|
||||
.subtitle:not(.is-spaced) + .title {
|
||||
@ -3213,6 +3199,7 @@ a.tag:hover {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Bulma Form */
|
||||
.input, .textarea, .select select {
|
||||
background-color: white;
|
||||
border-color: #dbdbdb;
|
||||
@ -4495,6 +4482,7 @@ fieldset[disabled] .select select:hover {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Bulma Components */
|
||||
.breadcrumb {
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
@ -4592,6 +4580,8 @@ fieldset[disabled] .select select:hover {
|
||||
color: #4a4a4a;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -6921,6 +6911,7 @@ label.panel-block:hover {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Bulma Grid */
|
||||
.column {
|
||||
display: block;
|
||||
flex-basis: 0;
|
||||
@ -8720,8 +8711,6 @@ label.panel-block:hover {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-height: -webkit-min-content;
|
||||
min-height: -moz-min-content;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
@ -8809,6 +8798,7 @@ label.panel-block:hover {
|
||||
}
|
||||
}
|
||||
|
||||
/* Bulma Helpers */
|
||||
.has-text-white {
|
||||
color: white !important;
|
||||
}
|
||||
@ -10424,6 +10414,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
}
|
||||
}
|
||||
|
||||
/* Bulma Layout */
|
||||
.hero {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
@ -11328,4 +11319,112 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
background-color: #fafafa;
|
||||
padding: 3rem 1.5rem 6rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black: #0a0a0a;
|
||||
--black-bis: #121212;
|
||||
--black-ter: #242424;
|
||||
--grey-darker: #363636;
|
||||
--grey-dark: #4a4a4a;
|
||||
--grey: #7a7a7a;
|
||||
--grey-light: #b5b5b5;
|
||||
--grey-lighter: #dbdbdb;
|
||||
--grey-lightest: #ededed;
|
||||
--white-ter: whitesmoke;
|
||||
--white-bis: #fafafa;
|
||||
--white: white;
|
||||
--orange: #ff470f;
|
||||
--yellow: #ffdd57;
|
||||
--green: #48c774;
|
||||
--turquoise: #00d1b2;
|
||||
--cyan: #3298dc;
|
||||
--blue: #3273dc;
|
||||
--purple: #b86bff;
|
||||
--red: #f14668;
|
||||
--family-sans-serif: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
--family-monospace: monospace;
|
||||
--render-mode: optimizeLegibility;
|
||||
--size-1: 3rem;
|
||||
--size-2: 2.5rem;
|
||||
--size-3: 2rem;
|
||||
--size-4: 1.5rem;
|
||||
--size-5: 1.25rem;
|
||||
--size-6: 1rem;
|
||||
--size-7: 0.75rem;
|
||||
--weight-light: 300;
|
||||
--weight-normal: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
--block-spacing: 1.5rem;
|
||||
--easing: ease-out;
|
||||
--radius-small: 2px;
|
||||
--radius: 4px;
|
||||
--radius-large: 6px;
|
||||
--radius-rounded: 290486px;
|
||||
--speed: 86ms;
|
||||
--primary: var(--turquoise);
|
||||
--info: var(--cyan);
|
||||
--success: var(--green);
|
||||
--warning: var(--yellow);
|
||||
--danger: var(--red);
|
||||
--light: var(--white-ter);
|
||||
--dark: var(--grey-darker);
|
||||
--orange-invert: #fff;
|
||||
--yellow-invert: rgba(0, 0, 0, 0.7);
|
||||
--green-invert: #fff;
|
||||
--turquoise-invert: #fff;
|
||||
--cyan-invert: #fff;
|
||||
--blue-invert: #fff;
|
||||
--purple-invert: #fff;
|
||||
--red-invert: #fff;
|
||||
--primary-invert: #fff;
|
||||
--primary-light: findLightColor($primary);
|
||||
--primary-dark: findDarkColor($primary);
|
||||
--info-invert: #fff;
|
||||
--info-light: findLightColor($info);
|
||||
--info-dark: findDarkColor($info);
|
||||
--success-invert: #fff;
|
||||
--success-light: findLightColor($success);
|
||||
--success-dark: findDarkColor($success);
|
||||
--warning-invert: rgba(0, 0, 0, 0.7);
|
||||
--warning-light: findLightColor($warning);
|
||||
--warning-dark: findDarkColor($warning);
|
||||
--danger-invert: #fff;
|
||||
--danger-light: findLightColor($danger);
|
||||
--danger-dark: findDarkColor($danger);
|
||||
--light-invert: rgba(0, 0, 0, 0.7);
|
||||
--dark-invert: #fff;
|
||||
--scheme-main: var(--white);
|
||||
--scheme-main-bis: var(--white-bis);
|
||||
--scheme-main-ter: var(--white-ter);
|
||||
--scheme-invert: var(--black);
|
||||
--scheme-invert-bis: var(--black-bis);
|
||||
--scheme-invert-ter: var(--black-ter);
|
||||
--background: var(--white-ter);
|
||||
--border: var(--grey-lighter);
|
||||
--border-hover: var(--grey-light);
|
||||
--border-light: var(--grey-lightest);
|
||||
--border-light-hover: var(--grey-light);
|
||||
--text: var(--grey-dark);
|
||||
--text-invert: #fff;
|
||||
--text-light: var(--grey);
|
||||
--text-strong: var(--grey-darker);
|
||||
--code: var(--red);
|
||||
--code-background: var(--background);
|
||||
--pre: var(--text);
|
||||
--pre-background: var(--background);
|
||||
--link: var(--blue);
|
||||
--link-invert: #fff;
|
||||
--link-light: findLightColor($link);
|
||||
--link-dark: findDarkColor($link);
|
||||
--link-visited: var(--purple);
|
||||
--link-hover: var(--grey-darker);
|
||||
--link-hover-border: var(--grey-light);
|
||||
--link-focus: var(--grey-darker);
|
||||
--link-focus-border: var(--blue);
|
||||
--link-active: var(--grey-darker);
|
||||
--link-active-border: var(--grey-dark);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bulma.css.map */
|
||||
File diff suppressed because one or more lines are too long
@ -1,46 +1,69 @@
|
||||
$title-color: $text-strong !default
|
||||
$title-color: var(--text-strong, #{$text-strong}) !default
|
||||
$title-family: false !default
|
||||
$title-size: $size-3 !default
|
||||
$title-weight: $weight-semibold !default
|
||||
$title-size: var(--size-3, #{$size-3}) !default
|
||||
$title-weight: var(--weight-semibold, #{$weight-semibold}) !default
|
||||
$title-line-height: 1.125 !default
|
||||
$title-strong-color: inherit !default
|
||||
$title-strong-weight: inherit !default
|
||||
$title-sub-size: 0.75em !default
|
||||
$title-sup-size: 0.75em !default
|
||||
|
||||
$subtitle-color: $text !default
|
||||
$subtitle-color: var(--text, #{$text}) !default
|
||||
$subtitle-family: false !default
|
||||
$subtitle-size: $size-5 !default
|
||||
$subtitle-weight: $weight-normal !default
|
||||
$subtitle-size: var(--size-5, #{$size-5}) !default
|
||||
$subtitle-weight: var(--weight-normal, #{$weight-normal}) !default
|
||||
$subtitle-line-height: 1.25 !default
|
||||
$subtitle-strong-color: $text-strong !default
|
||||
$subtitle-strong-weight: $weight-semibold !default
|
||||
$subtitle-strong-color: var(--text-strong, #{$text-strong}) !default
|
||||
$subtitle-strong-weight: var(--weight-semibold, #{$weight-semibold}) !default
|
||||
$subtitle-negative-margin: -1.25rem !default
|
||||
|
||||
.title,
|
||||
.subtitle
|
||||
--title-sub-size: #{$title-sub-size}
|
||||
--title-sup-size: #{$title-sup-size}
|
||||
@extend %block
|
||||
word-break: break-word
|
||||
em,
|
||||
span
|
||||
font-weight: inherit
|
||||
sub
|
||||
font-size: $title-sub-size
|
||||
font-size: var(--title-sub-size)
|
||||
sup
|
||||
font-size: $title-sup-size
|
||||
font-size: var(--title-sup-size)
|
||||
.tag
|
||||
vertical-align: middle
|
||||
|
||||
.title
|
||||
color: $title-color
|
||||
// Approach A
|
||||
// CSS Variable takes precedence, if theme is included
|
||||
// --title-color: var(--text-strong, #{$title-color})
|
||||
// color: var(--title-color)
|
||||
|
||||
// Approach B
|
||||
// Sass Variable takes precedence
|
||||
// Problem: --title-color is always set, so the fallback is never used
|
||||
// --title-color: #{$title-color}
|
||||
// color: var(--title-color, var(--text-strong))
|
||||
|
||||
// Approach C
|
||||
// Sass variable references a CSS variable
|
||||
// $title-color: var(--text-strong)
|
||||
--title-color: #{$title-color}
|
||||
color: var(--title-color)
|
||||
|
||||
--title-size: #{$title-size}
|
||||
--title-weight: #{$title-weight}
|
||||
--title-line-height: #{$title-line-height}
|
||||
--title-strong-color: #{$title-strong-color}
|
||||
--title-strong-weight: #{$title-strong-weight}
|
||||
@if $title-family
|
||||
font-family: $title-family
|
||||
font-size: $title-size
|
||||
font-weight: $title-weight
|
||||
line-height: $title-line-height
|
||||
font-size: var(--title-size)
|
||||
font-weight: var(--title-weight)
|
||||
line-height: var(--title-line-height)
|
||||
strong
|
||||
color: $title-strong-color
|
||||
font-weight: $title-strong-weight
|
||||
color: var(--title-strong-color)
|
||||
font-weight: var(--title-strong-weight)
|
||||
& + .highlight
|
||||
margin-top: -0.75rem
|
||||
&:not(.is-spaced) + .subtitle
|
||||
|
||||
107
sass/themes/default.sass
Normal file
107
sass/themes/default.sass
Normal file
@ -0,0 +1,107 @@
|
||||
\:root
|
||||
// Initial variables
|
||||
--black: #{$black}
|
||||
--black-bis: #{$black-bis}
|
||||
--black-ter: #{$black-ter}
|
||||
--grey-darker: #{$grey-darker}
|
||||
--grey-dark: #{$grey-dark}
|
||||
--grey: #{$grey}
|
||||
--grey-light: #{$grey-light}
|
||||
--grey-lighter: #{$grey-lighter}
|
||||
--grey-lightest: #{$grey-lightest}
|
||||
--white-ter: #{$white-ter}
|
||||
--white-bis: #{$white-bis}
|
||||
--white: #{$white}
|
||||
--orange: #{$orange}
|
||||
--yellow: #{$yellow}
|
||||
--green: #{$green}
|
||||
--turquoise: #{$turquoise}
|
||||
--cyan: #{$cyan}
|
||||
--blue: #{$blue}
|
||||
--purple: #{$purple}
|
||||
--red: #{$red}
|
||||
--family-sans-serif: #{$family-sans-serif}
|
||||
--family-monospace: #{$family-monospace}
|
||||
--render-mode: #{$render-mode}
|
||||
--size-1: #{$size-1}
|
||||
--size-2: #{$size-2}
|
||||
--size-3: #{$size-3}
|
||||
--size-4: #{$size-4}
|
||||
--size-5: #{$size-5}
|
||||
--size-6: #{$size-6}
|
||||
--size-7: #{$size-7}
|
||||
--weight-light: #{$weight-light}
|
||||
--weight-normal: #{$weight-normal}
|
||||
--weight-medium: #{$weight-medium}
|
||||
--weight-semibold: #{$weight-semibold}
|
||||
--weight-bold: #{$weight-bold}
|
||||
--block-spacing: #{$block-spacing}
|
||||
--easing: #{$easing}
|
||||
--radius-small: #{$radius-small}
|
||||
--radius: #{$radius}
|
||||
--radius-large: #{$radius-large}
|
||||
--radius-rounded: #{$radius-rounded}
|
||||
--speed: #{$speed}
|
||||
// Derived variables
|
||||
--primary: var(--turquoise)
|
||||
--info: var(--cyan)
|
||||
--success: var(--green)
|
||||
--warning: var(--yellow)
|
||||
--danger: var(--red)
|
||||
--light: var(--white-ter)
|
||||
--dark: var(--grey-darker)
|
||||
--orange-invert: #{findColorInvert($orange)}
|
||||
--yellow-invert: #{findColorInvert($yellow)}
|
||||
--green-invert: #{findColorInvert($green)}
|
||||
--turquoise-invert: #{findColorInvert($turquoise)}
|
||||
--cyan-invert: #{findColorInvert($cyan)}
|
||||
--blue-invert: #{findColorInvert($blue)}
|
||||
--purple-invert: #{findColorInvert($purple)}
|
||||
--red-invert: #{findColorInvert($red)}
|
||||
--primary-invert: #{findColorInvert($primary)}
|
||||
--primary-light: findLightColor($primary)
|
||||
--primary-dark: findDarkColor($primary)
|
||||
--info-invert: #{findColorInvert($info)}
|
||||
--info-light: findLightColor($info)
|
||||
--info-dark: findDarkColor($info)
|
||||
--success-invert: #{findColorInvert($success)}
|
||||
--success-light: findLightColor($success)
|
||||
--success-dark: findDarkColor($success)
|
||||
--warning-invert: #{findColorInvert($warning)}
|
||||
--warning-light: findLightColor($warning)
|
||||
--warning-dark: findDarkColor($warning)
|
||||
--danger-invert: #{findColorInvert($danger)}
|
||||
--danger-light: findLightColor($danger)
|
||||
--danger-dark: findDarkColor($danger)
|
||||
--light-invert: #{findColorInvert($light)}
|
||||
--dark-invert: #{findColorInvert($dark)}
|
||||
--scheme-main: var(--white)
|
||||
--scheme-main-bis: var(--white-bis)
|
||||
--scheme-main-ter: var(--white-ter)
|
||||
--scheme-invert: var(--black)
|
||||
--scheme-invert-bis: var(--black-bis)
|
||||
--scheme-invert-ter: var(--black-ter)
|
||||
--background: var(--white-ter)
|
||||
--border: var(--grey-lighter)
|
||||
--border-hover: var(--grey-light)
|
||||
--border-light: var(--grey-lightest)
|
||||
--border-light-hover: var(--grey-light)
|
||||
--text: var(--grey-dark)
|
||||
--text-invert: #{findColorInvert($text)}
|
||||
--text-light: var(--grey)
|
||||
--text-strong: var(--grey-darker)
|
||||
--code: var(--red)
|
||||
--code-background: var(--background)
|
||||
--pre: var(--text)
|
||||
--pre-background: var(--background)
|
||||
--link: var(--blue)
|
||||
--link-invert: #{findColorInvert($link)}
|
||||
--link-light: findLightColor($link)
|
||||
--link-dark: findDarkColor($link)
|
||||
--link-visited: var(--purple)
|
||||
--link-hover: var(--grey-darker)
|
||||
--link-hover-border: var(--grey-light)
|
||||
--link-focus: var(--grey-darker)
|
||||
--link-focus-border: var(--blue)
|
||||
--link-active: var(--grey-darker)
|
||||
--link-active-border: var(--grey-dark)
|
||||
Loading…
Reference in New Issue
Block a user