library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move CSS variables to message scope

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-15 09:36:21 +01:00
parent 0e4eda2d81
commit eef8f5577f
9 changed files with 120 additions and 11466 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11331
css/bulma-rtl.css
View File

File diff suppressed because it is too large Load Diff

1
css/bulma-rtl.css.map
View File

File diff suppressed because one or more lines are too long

1
css/bulma-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

81
css/bulma.css vendored
View File

@ -1,5 +1,13 @@
/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */
@-webkit-keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg);
@ -122,6 +130,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;
border: 2px solid #dbdbdb;
border-radius: 290486px;
@ -313,6 +322,9 @@ 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%;
}
@ -2564,9 +2576,13 @@ 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;
background-color: var(--grey-lightest, #ededed);
background-image: linear-gradient(to right, var(--grey-dark, #4a4a4a) 30%, var(--grey-lightest, #ededed) 30%);
@ -2595,6 +2611,15 @@ 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;
@ -4977,9 +5002,12 @@ button.dropdown-item.is-active {
}
.message {
background-color: var(--white-ter, whitesmoke);
border-radius: 4px;
font-size: 1rem;
--message-font-size: var(--size-normal, 1rem);
--message-radius: var(--radius, 4px);
--message-background-color: var(--background, var(--white-ter, whitesmoke));
background-color: var(--message-background-color);
border-radius: var(--message-radius);
font-size: var(--message-font-size);
}
.message strong {
@ -4992,15 +5020,15 @@ button.dropdown-item.is-active {
}
.message.is-small {
font-size: 0.75rem;
--message-font-size: var(--size-small, 0.75rem);
}
.message.is-medium {
font-size: 1.25rem;
--message-font-size: var(--size-medium, 1.25rem);
}
.message.is-large {
font-size: 1.5rem;
--message-font-size: var(--size-large, 1.5rem);
}
.message.is-white {
@ -5144,15 +5172,19 @@ button.dropdown-item.is-active {
}
.message-header {
--message-header-background-color: var(--text, var(--grey-dark, #4a4a4a));
--message-header-color: var(--text-invert, var(--grey-dark, #4a4a4a));
--message-header-weight: var(--weight-bold, 700);
--message-header-padding: 0.75em 1em;
align-items: center;
background-color: var(--grey-dark, #4a4a4a);
border-radius: 4px 4px 0 0;
color: var(--grey-dark, #4a4a4a);
background-color: var(--message-header-background-color);
border-radius: var(--radius, 4px) var(--radius, 4px) 0 0;
color: var(--message-header-color);
display: flex;
font-weight: 700;
font-weight: var(--message-header-weight);
justify-content: space-between;
line-height: 1.25;
padding: 0.75em 1em;
padding: var(--message-header-padding);
position: relative;
}
@ -5163,27 +5195,35 @@ button.dropdown-item.is-active {
}
.message-header + .message-body {
border-width: 0;
border-width: var(--message-header-body-border-width);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.message-body {
border-color: var(--grey-lighter, #dbdbdb);
border-radius: 4px;
--message-body-border-color: var(--border, var(--grey-lighter, #dbdbdb));
--message-body-radius: var(--radius, 4px);
--message-body-border-width: 0 0 0 4px;
--message-body-color: var(--text, var(--grey-dark, #4a4a4a));
--message-body-padding: 1.25em 1.5em;
--message-body-pre-background-color: var(--scheme-main, var(--white, white));
--message-body-pre-code-background-color: transparent;
--message-header-body-border-width: 0;
border-color: var(--message-body-border-color);
border-radius: var(--message-body-radius);
border-style: solid;
border-width: 0 0 0 4px;
color: var(--grey-dark, #4a4a4a);
padding: 1.25em 1.5em;
border-width: var(--message-body-border-width);
color: var(--message-body-color);
padding: var(--message-body-padding);
}
.message-body code,
.message-body pre {
background-color: var(--white, white);
background-color: var(--message-body-pre-background-color);
}
.message-body pre code {
background-color: transparent;
background-color: var(--message-body-pre-code-background-color);
}
.modal {
@ -8729,6 +8769,8 @@ 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;
}
@ -11365,5 +11407,4 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
--link-active: var(--grey-darker, #363636);
--link-active-border: var(--grey-dark, #4a4a4a);
}
/*# sourceMappingURL=bulma.css.map */

70
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -43,7 +43,7 @@
"rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css",
"rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css",
"rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css",
"deploy": "npm run clean && npm run build && npm run rtl",
"deploy": "npm run clean && npm run build",
"start": "npm run build-sass -- --watch"
},
"files": [

85
sass/components/message.sass
View File

@ -1,29 +1,46 @@
$message-background-color: $background !default
$message-radius: $radius !default
$message-background-color: var(--background, #{$background}) !default
$message-font-size: var(--size-normal, #{$size-normal}) !default
$message-radius: var(--radius, #{$radius}) !default
$message-header-background-color: $text !default
$message-header-color: $text-invert !default
$message-header-weight: $weight-bold !default
$message-header-background-color: var(--text, #{$text}) !default
$message-header-color: var(--text-invert, #{$text-invert}) !default
$message-header-weight: var(--weight-bold, #{$weight-bold}) !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default
$message-header-radius: var(--radius, #{$radius}) !default
$message-body-border-color: $border !default
$message-body-border-color: var(--border, #{$border}) !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: $text !default
$message-body-color: var(--text, #{$text}) !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
$message-body-radius: var(--radius, #{$radius}) !default
$message-body-pre-background-color: $scheme-main !default
$message-body-pre-background-color: var(--scheme-main, #{$scheme-main}) !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
$message-colors: $colors !default
.message
--message-background-color: #{$message-background-color}
--message-font-size: #{$message-font-size}
--message-radius: #{$message-radius}
--message-header-background-color: #{$message-header-background-color}
--message-header-color: #{$message-header-color}
--message-header-weight: #{$message-header-weight}
--message-header-padding: #{$message-header-padding}
--message-body-border-color: #{$message-body-border-color}
--message-body-radius: #{$message-body-radius}
--message-body-border-width: #{$message-body-border-width}
--message-body-color: #{$message-body-color}
--message-body-padding: #{$message-body-padding}
--message-body-pre-background-color: #{$message-body-pre-background-color}
--message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
--message-header-body-border-width: #{$message-header-body-border-width}
@extend %block
background-color: $message-background-color
border-radius: $message-radius
font-size: $size-normal
background-color: var(--message-background-color)
border-radius: var(--message-radius)
font-size: var(--message-font-size)
strong
color: currentColor
a:not(.button):not(.tag):not(.dropdown-item)
@ -31,11 +48,11 @@ $message-colors: $colors !default
text-decoration: underline
// Sizes
&.is-small
font-size: $size-small
--message-font-size: var(--size-small, #{$size-small})
&.is-medium
font-size: $size-medium
--message-font-size: var(--size-medium, #{$size-medium})
&.is-large
font-size: $size-large
--message-font-size: var(--size-large, #{$size-large})
// Colors
@each $name, $components in $message-colors
$color: nth($components, 1)
@ -60,43 +77,41 @@ $message-colors: $colors !default
$color-light: $color
&.is-#{$name}
background-color: var(--#{$name}-light, #{$color-light})
.message-header
background-color: var(--#{$name}, #{$color})
color: var(--#{$name}-invert, #{$color-invert})
.message-body
border-color: var(--#{$name}, #{$color})
color: var(--#{$name}-dark, #{$color-dark})
--message-background-color: var(--#{$name}-light, #{$color-light})
--message-header-background-color: var(--#{$name}, #{$color})
--message-header-color: var(--#{$name}-invert, #{$color-invert})
--message-body-border-color: var(--#{$name}, #{$color})
--message-body-color: var(--#{$name}-dark, #{$color-dark})
.message-header
align-items: center
background-color: $message-header-background-color
background-color: var(--message-header-background-color)
border-radius: $message-header-radius $message-header-radius 0 0
color: $message-header-color
color: var(--message-header-color)
display: flex
font-weight: $message-header-weight
font-weight: var(--message-header-weight)
justify-content: space-between
line-height: 1.25
padding: $message-header-padding
padding: var(--message-header-padding)
position: relative
.delete
flex-grow: 0
flex-shrink: 0
+ltr-property("margin", 0.75em, false)
& + .message-body
border-width: $message-header-body-border-width
border-width: var(--message-header-body-border-width)
border-top-left-radius: 0
border-top-right-radius: 0
.message-body
border-color: $message-body-border-color
border-radius: $message-body-radius
border-color: var(--message-body-border-color)
border-radius: var(--message-body-radius)
border-style: solid
border-width: $message-body-border-width
color: $message-body-color
padding: $message-body-padding
border-width: var(--message-body-border-width)
color: var(--message-body-color)
padding: var(--message-body-padding)
code,
pre
background-color: $message-body-pre-background-color
background-color: var(--message-body-pre-background-color)
pre code
background-color: $message-body-pre-code-background-color
background-color: var(--message-body-pre-code-background-color)

1
sass/utilities/functions.sass
View File

@ -118,7 +118,6 @@
@function bulmaRgba($color, $alpha)
@if type-of($color) != 'color'
@debug $color
@return $color
@return rgba($color, $alpha)