library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add more button variables

Browse Source
This commit is contained in:
Jeremy Thomas 2023-02-03 12:25:54 +00:00
parent 3c7d60b802
commit c5312c4696
5 changed files with 180 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.gitignore vendored
View File

@ -27,5 +27,6 @@ test.scss
/dev
/icons
/styles/node_modules
/test
/versions
_site

2
docs/bulma.scss vendored
View File

@ -1,3 +1,3 @@
@charset "utf-8";
@import "../bulma";
// @import "../sass/themes/dark";
@import "../sass/themes/dark";

157
docs/css/bulma.css vendored
View File

@ -539,6 +539,7 @@ a.box:active {
--bulma-button-color: var(--bulma-text-strong);
--bulma-button-background-color: var(--bulma-scheme-main);
--bulma-button-family: false;
--bulma-button-weight: var(--bulma-weight-medium);
--bulma-button-border-color: var(--bulma-border);
--bulma-button-border-width: var(--bulma-control-border-width);
--bulma-button-padding-vertical: calc( 0.5em - var(--bulma-button-border-width));
@ -586,6 +587,7 @@ a.box:active {
border-width: var(--bulma-button-border-width);
color: var(--bulma-button-color);
cursor: pointer;
font-weight: var(--bulma-button-weight);
justify-content: center;
padding-bottom: var(--bulma-button-padding-vertical);
padding-left: var(--bulma-button-padding-horizontal);
@ -5651,6 +5653,9 @@ button.dropdown-item.is-active {
--bulma-message-body-pre-background-color: var(--bulma-scheme-main);
--bulma-message-body-pre-code-background-color: transparent;
--bulma-message-header-body-border-width: 0;
--bulma-message-status-background-l: 8%;
--bulma-message-status-color-l: 70%;
--bulma-message-status-header-background-l: 20%;
}
.message {
@ -5681,151 +5686,179 @@ button.dropdown-item.is-active {
}
.message.is-white {
background-color: white;
--base-s: var(--bulma-white-s);
--base-l: var(--bulma-white-l);
background: none;
}
.message.is-white .message-header {
background-color: white;
color: #0a0a0a;
background-color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-white-invert);
}
.message.is-white .message-body {
border-color: white;
background-color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-white-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-black {
background-color: #fafafa;
--base-s: var(--bulma-black-s);
--base-l: var(--bulma-black-l);
background: none;
}
.message.is-black .message-header {
background-color: #0a0a0a;
color: white;
background-color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-black-invert);
}
.message.is-black .message-body {
border-color: #0a0a0a;
background-color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-black-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-light {
background-color: #fafafa;
--base-s: var(--bulma-light-s);
--base-l: var(--bulma-light-l);
background: none;
}
.message.is-light .message-header {
background-color: whitesmoke;
color: rgba(0, 0, 0, 0.7);
background-color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-light-invert);
}
.message.is-light .message-body {
border-color: whitesmoke;
background-color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-light-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-dark {
background-color: #fafafa;
--base-s: var(--bulma-dark-s);
--base-l: var(--bulma-dark-l);
background: none;
}
.message.is-dark .message-header {
background-color: #363636;
color: #fff;
background-color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-dark-invert);
}
.message.is-dark .message-body {
border-color: #363636;
background-color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-dark-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-primary {
background-color: #ebfffc;
--base-s: var(--bulma-primary-s);
--base-l: var(--bulma-primary-l);
background: none;
}
.message.is-primary .message-header {
background-color: #00d1b2;
color: #fff;
background-color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-primary-invert);
}
.message.is-primary .message-body {
border-color: #00d1b2;
color: #00947e;
background-color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-primary-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-link {
background-color: #f7f8fd;
--base-s: var(--bulma-link-s);
--base-l: var(--bulma-link-l);
background: none;
}
.message.is-link .message-header {
background-color: #3c57d3;
color: #fff;
background-color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-link-invert);
}
.message.is-link .message-body {
border-color: #3c57d3;
background-color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-link-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-info {
background-color: #ebf9fe;
--base-s: var(--bulma-info-s);
--base-l: var(--bulma-info-l);
background: none;
}
.message.is-info .message-header {
background-color: #18b4f7;
color: #fff;
background-color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-info-invert);
}
.message.is-info .message-body {
border-color: #18b4f7;
color: #0677a7;
background-color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-info-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-success {
background-color: #effbf4;
--base-s: var(--bulma-success-s);
--base-l: var(--bulma-success-l);
background: none;
}
.message.is-success .message-header {
background-color: #3fcf82;
color: #fff;
background-color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-success-invert);
}
.message.is-success .message-body {
border-color: #3fcf82;
color: #1e7647;
background-color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-success-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-warning {
background-color: #fff9eb;
--base-s: var(--bulma-warning-s);
--base-l: var(--bulma-warning-l);
background: none;
}
.message.is-warning .message-header {
background-color: #ffb60a;
color: var(--bulma-white);
background-color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-warning-invert);
}
.message.is-warning .message-body {
border-color: #ffb60a;
color: #946800;
background-color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-warning-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-danger {
background-color: #feedec;
--base-s: var(--bulma-danger-s);
--base-l: var(--bulma-danger-l);
background: none;
}
.message.is-danger .message-header {
background-color: #f15146;
color: #fff;
background-color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-danger-invert);
}
.message.is-danger .message-body {
border-color: #f15146;
color: #c71b0f;
background-color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-danger-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message.is-text {
background-color: #f9fafb;
--base-s: var(--bulma-text-s);
--base-l: var(--bulma-text-l);
background: none;
}
.message.is-text .message-header {
background-color: #404654;
color: #fff;
background-color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-header-background-l));
color: var(--bulma-text-invert);
}
.message.is-text .message-body {
border-color: #404654;
background-color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-background-l));
color: hsl(var(--bulma-text-h), var(--base-s), var(--bulma-message-status-color-l));
}
.message-header {
@ -13113,3 +13146,29 @@ a.has-text-text:hover, a.has-text-text:focus {
)
);*/
}
[data-theme="dark"],
.theme-dark {
--bulma-scheme-main: #121212;
--bulma-scheme-main-bis: #242424;
--bulma-scheme-main-ter: #363636;
--bulma-scheme-invert: white;
--bulma-scheme-invert-bis: #fafafa;
--bulma-scheme-invert-ter: whitesmoke;
--bulma-background: #242424;
--bulma-border: #363636;
--bulma-border-hover: #4a4a4a;
--bulma-border-light: #363636;
--bulma-border-light-hover: #4a4a4a;
--bulma-text: #b5b5b5;
--bulma-text-invert: #363636;
--bulma-text-light: #7a7a7a;
--bulma-text-strong: white;
--bulma-link-hover: white;
--bulma-link-hover-border: #4a4a4a;
--bulma-link-focus: white;
--bulma-link-focus-border: #3c57d3;
--bulma-link-active: white;
--bulma-link-active-border: #b5b5b5;
--bulma-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.2), 0 0px 0 1px rgba(255, 255, 255, 0.04);
}

91
sass/components/message.scss
View File

@ -39,6 +39,9 @@ $message-colors: $colors !default;
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},
message-status-background-l: 8%,
message-status-color-l: 70%,
message-status-header-background-l: 20%,
)
);
}
@ -75,44 +78,76 @@ $message-colors: $colors !default;
// Colors
// TODO
@each $name, $components in $message-colors {
$color: nth($components, 1);
$color-invert: nth($components, 2);
$color-light: null;
$color-dark: null;
@if length($components) >= 3 {
$color-light: nth($components, 3);
@if length($components) >= 4 {
$color-dark: nth($components, 4);
} @else {
$color-luminance: colorLuminance($color);
$darken-percentage: $color-luminance * 70%;
$desaturate-percentage: $color-luminance * 30%;
$color-dark: desaturate(
darken($color, $darken-percentage),
$desaturate-percentage
);
}
} @else {
$color-lightning: max(100% - lightness($color) - 2%, 0%);
$color-light: lighten($color, $color-lightning);
}
$base-h: getVar($name, "", "-h");
$base-s: getVar($name, "", "-s");
$base-l: getVar($name, "", "-l");
$invert: getVar($name, "", "-invert");
$base: hsl($base-h, var(--s), var(--l));
&.is-#{$name} {
background-color: $color-light;
--base-s: #{$base-s};
--base-l: #{$base-l};
background: none;
.#{$class-prefix}message-header {
background-color: $color;
color: $color-invert;
background-color: hsl(
$base-h,
var(--base-s),
var(--bulma-message-status-header-background-l)
);
color: $invert;
}
.#{$class-prefix}message-body {
border-color: $color;
color: $color-dark;
background-color: hsl(
$base-h,
var(--base-s),
var(--bulma-message-status-background-l)
);
color: hsl($base-h, var(--base-s), var(--bulma-message-status-color-l));
}
}
}
// @each $name, $components in $message-colors {
// $color: nth($components, 1);
// $color-invert: nth($components, 2);
// $color-light: null;
// $color-dark: null;
// @if length($components) >= 3 {
// $color-light: nth($components, 3);
// @if length($components) >= 4 {
// $color-dark: nth($components, 4);
// } @else {
// $color-luminance: colorLuminance($color);
// $darken-percentage: $color-luminance * 70%;
// $desaturate-percentage: $color-luminance * 30%;
// $color-dark: desaturate(
// darken($color, $darken-percentage),
// $desaturate-percentage
// );
// }
// } @else {
// $color-lightning: max(100% - lightness($color) - 2%, 0%);
// $color-light: lighten($color, $color-lightning);
// }
// &.is-#{$name} {
// background-color: $color-light;
// .#{$class-prefix}message-header {
// background-color: $color;
// color: $color-invert;
// }
// .#{$class-prefix}message-body {
// border-color: $color;
// color: $color-dark;
// }
// }
// }
}
.#{$class-prefix}message-header {

12
sass/elements/button.scss
View File

@ -4,6 +4,7 @@
$button-color: getVar("text-strong") !default;
$button-background-color: getVar("scheme-main") !default;
$button-family: false !default;
$button-weight: getVar("weight-medium") !default;
$button-border-color: getVar("border") !default;
$button-border-width: getVar("control-border-width") !default;
@ -101,6 +102,7 @@ $button-responsive-sizes: (
button-color: #{$button-color},
button-background-color: #{$button-background-color},
button-family: #{$button-family},
button-weight: #{$button-weight},
button-border-color: #{$button-border-color},
button-border-width: #{$button-border-width},
button-padding-vertical: #{$button-padding-vertical},
@ -153,11 +155,7 @@ $button-responsive-sizes: (
border-width: getVar("button-border-width");
color: getVar("button-color");
cursor: pointer;
@if $button-family {
font-family: getVar("button-family");
}
font-weight: getVar("button-weight");
justify-content: center;
padding-bottom: getVar("button-padding-vertical");
padding-left: getVar("button-padding-horizontal");
@ -166,6 +164,10 @@ $button-responsive-sizes: (
text-align: center;
white-space: nowrap;
@if $button-family {
font-family: getVar("button-family");
}
strong {
color: inherit;
}