Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix components tests

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-06 00:47:43 +00:00
parent a03da2b801
commit 8508af010a
16 changed files with 2353 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
sass/components/panel.scss
View File

@@ -1,42 +1,72 @@
@import "../utilities/mixins";
$panel-margin: $block-spacing !default;
$panel-item-border: 1px solid $border-light !default;
$panel-radius: $radius-large !default;
$panel-shadow: $shadow !default;
$panel-margin: getVar("block-spacing") !default;
$panel-item-border: 1px solid getVar("border-light") !default;
$panel-radius: getVar("radius-large") !default;
$panel-shadow: getVar("shadow") !default;
$panel-heading-background-color: $border-light !default;
$panel-heading-color: $text-strong !default;
$panel-heading-background-color: getVar("border-light") !default;
$panel-heading-color: getVar("text-strong") !default;
$panel-heading-line-height: 1.25 !default;
$panel-heading-padding: 0.75em 1em !default;
$panel-heading-radius: $radius !default;
$panel-heading-radius: getVar("radius") !default;
$panel-heading-size: 1.25em !default;
$panel-heading-weight: $weight-bold !default;
$panel-heading-weight: getVar("weight-bold") !default;
$panel-tabs-font-size: 0.875em !default;
$panel-tab-border-bottom: 1px solid $border !default;
$panel-tab-active-border-bottom-color: $link-active-border !default;
$panel-tab-active-color: $link-active !default;
$panel-tab-border-bottom: 1px solid getVar("border") !default;
$panel-tab-active-border-bottom-color: getVar("link-active-border") !default;
$panel-tab-active-color: getVar("link-active") !default;
$panel-list-item-color: $text !default;
$panel-list-item-hover-color: $link !default;
$panel-list-item-color: getVar("text") !default;
$panel-list-item-hover-color: getVar("link") !default;
$panel-block-color: $text-strong !default;
$panel-block-hover-background-color: $background !default;
$panel-block-active-border-left-color: $link !default;
$panel-block-active-color: $link-active !default;
$panel-block-active-icon-color: $link !default;
$panel-block-color: getVar("text-strong") !default;
$panel-block-hover-background-color: getVar("background") !default;
$panel-block-active-border-left-color: getVar("link") !default;
$panel-block-active-color: getVar("link-active") !default;
$panel-block-active-icon-color: getVar("link") !default;
$panel-icon-color: $text-light !default;
$panel-icon-color: getVar("text-light") !default;
$panel-colors: $colors !default;
:root {
@include register-vars(
(
panel-margin: #{$panel-margin},
panel-item-border: #{$panel-item-border},
panel-radius: #{$panel-radius},
panel-shadow: #{$panel-shadow},
panel-heading-background-color: #{$panel-heading-background-color},
panel-heading-color: #{$panel-heading-color},
panel-heading-line-height: #{$panel-heading-line-height},
panel-heading-padding: #{$panel-heading-padding},
panel-heading-radius: #{$panel-heading-radius},
panel-heading-size: #{$panel-heading-size},
panel-heading-weight: #{$panel-heading-weight},
panel-tabs-font-size: #{$panel-tabs-font-size},
panel-tab-border-bottom: #{$panel-tab-border-bottom},
panel-tab-active-border-bottom-color: #{$panel-tab-active-border-bottom-color},
panel-tab-active-color: #{$panel-tab-active-color},
panel-list-item-color: #{$panel-list-item-color},
panel-list-item-hover-color: #{$panel-list-item-hover-color},
panel-block-color: #{$panel-block-color},
panel-block-hover-background-color: #{$panel-block-hover-background-color},
panel-block-active-border-left-color: #{$panel-block-active-border-left-color},
panel-block-active-color: #{$panel-block-active-color},
panel-block-active-icon-color: #{$panel-block-active-icon-color},
panel-icon-color: #{$panel-icon-color},
)
);
}
.#{$class-prefix}panel {
border-radius: $panel-radius;
box-shadow: $panel-shadow;
font-size: $size-normal;
border-radius: getVar("panel-radius");
box-shadow: getVar("panel-shadow");
font-size: getVar("size-normal");
&:not(:last-child) {
margin-bottom: $panel-margin;
margin-bottom: getVar("panel-margin");
}
// Colors
@@ -64,52 +94,52 @@ $panel-colors: $colors !default;
.#{$class-prefix}panel-tabs,
.#{$class-prefix}panel-block {
&:not(:last-child) {
border-bottom: $panel-item-border;
border-bottom: getVar("panel-item-border");
}
}
.#{$class-prefix}panel-heading {
background-color: $panel-heading-background-color;
background-color: getVar("panel-heading-background-color");
border-radius: $panel-radius $panel-radius 0 0;
color: $panel-heading-color;
font-size: $panel-heading-size;
font-weight: $panel-heading-weight;
line-height: $panel-heading-line-height;
padding: $panel-heading-padding;
color: getVar("panel-heading-color");
font-size: getVar("panel-heading-size");
font-weight: getVar("panel-heading-weight");
line-height: getVar("panel-heading-line-height");
padding: getVar("panel-heading-padding");
}
.#{$class-prefix}panel-tabs {
align-items: flex-end;
display: flex;
font-size: $panel-tabs-font-size;
font-size: getVar("panel-tabs-font-size");
justify-content: center;
a {
border-bottom: $panel-tab-border-bottom;
border-bottom: getVar("panel-tab-border-bottom");
margin-bottom: -1px;
padding: 0.5em;
// Modifiers
&.is-active {
border-bottom-color: $panel-tab-active-border-bottom-color;
color: $panel-tab-active-color;
border-bottom-color: getVar("panel-tab-active-border-bottom-color");
color: getVar("panel-tab-active-color");
}
}
}
.#{$class-prefix}panel-list {
a {
color: $panel-list-item-color;
color: getVar("panel-list-item-color");
&:hover {
color: $panel-list-item-hover-color;
color: getVar("panel-list-item-hover-color");
}
}
}
.#{$class-prefix}panel-block {
align-items: center;
color: $panel-block-color;
color: getVar("panel-block-color");
display: flex;
justify-content: flex-start;
padding: 0.5em 0.75em;
@@ -129,17 +159,17 @@ $panel-colors: $colors !default;
}
&.is-active {
border-left-color: $panel-block-active-border-left-color;
color: $panel-block-active-color;
border-left-color: getVar("panel-block-active-border-left-color");
color: getVar("panel-block-active-color");
.#{$class-prefix}panel-icon {
color: $panel-block-active-icon-color;
color: getVar("panel-block-active-icon-color");
}
}
&:last-child {
border-bottom-left-radius: $panel-radius;
border-bottom-right-radius: $panel-radius;
border-bottom-left-radius: getVar("panel-radius");
border-bottom-right-radius: getVar("panel-radius");
}
}
@@ -148,14 +178,14 @@ label.#{$class-prefix}panel-block {
cursor: pointer;
&:hover {
background-color: $panel-block-hover-background-color;
background-color: getVar("panel-block-hover-background-color");
}
}
.#{$class-prefix}panel-icon {
@include fa(14px, 1em);
color: $panel-icon-color;
color: getVar("panel-icon-color");
@include ltr-property("margin", 0.75em);