Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 20:54:30 -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

230
sass/components/navbar.scss
View File

@@ -1,48 +1,48 @@
@import "../utilities/mixins";
$navbar-background-color: $scheme-main !default;
$navbar-background-color: getVar("scheme-main") !default;
$navbar-box-shadow-size: 0 2px 0 0 !default;
$navbar-box-shadow-color: $background !default;
$navbar-box-shadow-color: getVar("background") !default;
$navbar-height: 3.25rem !default;
$navbar-padding-vertical: 1rem !default;
$navbar-padding-horizontal: 2rem !default;
$navbar-z: 30 !default;
$navbar-fixed-z: 30 !default;
$navbar-item-color: $text !default;
$navbar-item-hover-color: $link !default;
$navbar-item-hover-background-color: $scheme-main-bis !default;
$navbar-item-active-color: $scheme-invert !default;
$navbar-item-color: getVar("text") !default;
$navbar-item-hover-color: getVar("link") !default;
$navbar-item-hover-background-color: getVar("scheme-main-bis") !default;
$navbar-item-active-color: getVar("scheme-invert") !default;
$navbar-item-active-background-color: transparent !default;
$navbar-item-img-max-height: 1.75rem !default;
$navbar-burger-color: $navbar-item-color !default;
$navbar-burger-color: getVar("navbar-item-color") !default;
$navbar-tab-hover-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: $link !default;
$navbar-tab-active-color: $link !default;
$navbar-tab-hover-border-bottom-color: getVar("link") !default;
$navbar-tab-active-color: getVar("link") !default;
$navbar-tab-active-background-color: transparent !default;
$navbar-tab-active-border-bottom-color: $link !default;
$navbar-tab-active-border-bottom-color: getVar("link") !default;
$navbar-tab-active-border-bottom-style: solid !default;
$navbar-tab-active-border-bottom-width: 3px !default;
$navbar-dropdown-background-color: $scheme-main !default;
$navbar-dropdown-border-top: 2px solid $border !default;
$navbar-dropdown-background-color: getVar("scheme-main") !default;
$navbar-dropdown-border-top: 2px solid getVar("border") !default;
$navbar-dropdown-offset: -4px !default;
$navbar-dropdown-arrow: $link !default;
$navbar-dropdown-radius: $radius-large !default;
$navbar-dropdown-arrow: getVar("link") !default;
$navbar-dropdown-radius: getVar("radius-large") !default;
$navbar-dropdown-z: 20 !default;
$navbar-dropdown-boxed-radius: $radius-large !default;
$navbar-dropdown-boxed-radius: getVar("radius-large") !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1),
0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default;
$navbar-dropdown-item-hover-color: $scheme-invert !default;
$navbar-dropdown-item-hover-background-color: $background !default;
$navbar-dropdown-item-active-color: $link !default;
$navbar-dropdown-item-active-background-color: $background !default;
$navbar-dropdown-item-hover-color: getVar("scheme-invert") !default;
$navbar-dropdown-item-hover-background-color: getVar("background") !default;
$navbar-dropdown-item-active-color: getVar("link") !default;
$navbar-dropdown-item-active-background-color: getVar("background") !default;
$navbar-divider-background-color: $background !default;
$navbar-divider-background-color: getVar("background") !default;
$navbar-divider-height: 2px !default;
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
@@ -51,18 +51,62 @@ $navbar-breakpoint: $desktop !default;
$navbar-colors: $colors !default;
:root {
@include register-vars(
(
navbar-background-color: #{$navbar-background-color},
navbar-box-shadow-size: #{$navbar-box-shadow-size},
navbar-box-shadow-color: #{$navbar-box-shadow-color},
navbar-height: #{$navbar-height},
navbar-padding-vertical: #{$navbar-padding-vertical},
navbar-padding-horizontal: #{$navbar-padding-horizontal},
navbar-z: #{$navbar-z},
navbar-fixed-z: #{$navbar-fixed-z},
navbar-item-color: #{$navbar-item-color},
navbar-item-hover-color: #{$navbar-item-hover-color},
navbar-item-hover-background-color: #{$navbar-item-hover-background-color},
navbar-item-active-color: #{$navbar-item-active-color},
navbar-item-active-background-color: #{$navbar-item-active-background-color},
navbar-item-img-max-height: #{$navbar-item-img-max-height},
navbar-burger-color: #{$navbar-burger-color},
navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color},
navbar-tab-hover-border-bottom-color: #{$navbar-tab-hover-border-bottom-color},
navbar-tab-active-color: #{$navbar-tab-active-color},
navbar-tab-active-background-color: #{$navbar-tab-active-background-color},
navbar-tab-active-border-bottom-color: #{$navbar-tab-active-border-bottom-color},
navbar-tab-active-border-bottom-style: #{$navbar-tab-active-border-bottom-style},
navbar-tab-active-border-bottom-width: #{$navbar-tab-active-border-bottom-width},
navbar-dropdown-background-color: #{$navbar-dropdown-background-color},
navbar-dropdown-border-top: #{$navbar-dropdown-border-top},
navbar-dropdown-offset: #{$navbar-dropdown-offset},
navbar-dropdown-arrow: #{$navbar-dropdown-arrow},
navbar-dropdown-radius: #{$navbar-dropdown-radius},
navbar-dropdown-z: #{$navbar-dropdown-z},
navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius},
navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow},
navbar-dropdown-item-hover-color: #{$navbar-dropdown-item-hover-color},
navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color},
navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color},
navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color},
navbar-divider-background-color: #{$navbar-divider-background-color},
navbar-divider-height: #{$navbar-divider-height},
navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size},
)
);
}
@mixin navbar-fixed {
left: 0;
position: fixed;
right: 0;
z-index: $navbar-fixed-z;
z-index: getVar("navbar-fixed-z");
}
.#{$class-prefix}navbar {
background-color: $navbar-background-color;
min-height: $navbar-height;
background-color: getVar("navbar-background-color");
min-height: getVar("navbar-height");
position: relative;
z-index: $navbar-z;
z-index: getVar("navbar-z");
@each $name, $pair in $navbar-colors {
$color: nth($pair, 1);
@@ -149,12 +193,13 @@ $navbar-colors: $colors !default;
& > .#{$class-prefix}container {
align-items: stretch;
display: flex;
min-height: $navbar-height;
min-height: getVar("navbar-height");
width: 100%;
}
&.has-shadow {
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color;
box-shadow: getVar("navbar-box-shadow-size")
getVar("navbar-box-shadow-color");
}
&.is-fixed-bottom,
@@ -166,7 +211,8 @@ $navbar-colors: $colors !default;
bottom: 0;
&.has-shadow {
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color;
box-shadow: getVar("navbar-bottom-box-shadow-size")
getVar("navbar-box-shadow-color");
}
}
@@ -178,11 +224,11 @@ $navbar-colors: $colors !default;
html,
body {
&.has-navbar-fixed-top {
padding-top: $navbar-height;
padding-top: getVar("navbar-height");
}
&.has-navbar-fixed-bottom {
padding-bottom: $navbar-height;
padding-bottom: getVar("navbar-height");
}
}
@@ -191,7 +237,7 @@ body {
align-items: stretch;
display: flex;
flex-shrink: 0;
min-height: $navbar-height;
min-height: getVar("navbar-height");
}
.#{$class-prefix}navbar-brand {
@@ -214,9 +260,9 @@ body {
.#{$class-prefix}navbar-burger {
@extend %reset;
color: $navbar-burger-color;
color: getVar("navbar-burger-color");
@include hamburger($navbar-height);
@include hamburger(getVar("navbar-height"));
@include ltr-property("margin", auto, false);
}
@@ -226,7 +272,7 @@ body {
.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
color: $navbar-item-color;
color: getVar("navbar-item-color");
display: block;
line-height: 1.5;
padding: 0.5rem 0.75rem;
@@ -248,8 +294,8 @@ a.#{$class-prefix}navbar-item,
&:focus-within,
&:hover,
&.is-active {
background-color: $navbar-item-hover-background-color;
color: $navbar-item-hover-color;
background-color: getVar("navbar-item-hover-background-color");
color: getVar("navbar-item-hover-color");
}
}
@@ -258,7 +304,7 @@ a.#{$class-prefix}navbar-item,
flex-shrink: 0;
img {
max-height: $navbar-item-img-max-height;
max-height: getVar("navbar-item-img-max-height");
}
&.has-dropdown {
@@ -272,22 +318,24 @@ a.#{$class-prefix}navbar-item,
&.is-tab {
border-bottom: 1px solid transparent;
min-height: $navbar-height;
min-height: getVar("navbar-height");
padding-bottom: calc(0.5rem - 1px);
&:focus,
&:hover {
background-color: $navbar-tab-hover-background-color;
border-bottom-color: $navbar-tab-hover-border-bottom-color;
background-color: getVar("navbar-tab-hover-background-color");
border-bottom-color: getVar("navbar-tab-hover-border-bottom-color");
}
&.is-active {
background-color: $navbar-tab-active-background-color;
border-bottom-color: $navbar-tab-active-border-bottom-color;
border-bottom-style: $navbar-tab-active-border-bottom-style;
border-bottom-width: $navbar-tab-active-border-bottom-width;
color: $navbar-tab-active-color;
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width});
background-color: getVar("navbar-tab-active-background-color");
border-bottom-color: getVar("navbar-tab-active-border-bottom-color");
border-bottom-style: getVar("navbar-tab-active-border-bottom-style");
border-bottom-width: getVar("navbar-tab-active-border-bottom-width");
color: getVar("navbar-tab-active-color");
padding-bottom: calc(
0.5rem - #{getVar("navbar-tab-active-border-bottom-width")}
);
}
}
}
@@ -302,10 +350,8 @@ a.#{$class-prefix}navbar-item,
&::after {
@extend %arrow;
border-color: $navbar-dropdown-arrow;
border-color: getVar("navbar-dropdown-arrow");
margin-top: -0.375em;
@include ltr-position(1.125em);
}
}
@@ -322,10 +368,10 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-divider {
background-color: $navbar-divider-background-color;
background-color: getVar("navbar-divider-background-color");
border: none;
display: none;
height: $navbar-divider-height;
height: getVar("navbar-divider-height");
margin: 0.5rem 0;
}
@@ -349,7 +395,7 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-menu {
background-color: $navbar-background-color;
background-color: getVar("navbar-background-color");
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
padding: 0.5rem 0;
@@ -382,7 +428,7 @@ a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-menu {
@include overflow-touch;
max-height: calc(100vh - #{$navbar-height});
max-height: calc(100vh - #{getVar("navbar-height")});
overflow: auto;
}
}
@@ -391,11 +437,11 @@ a.#{$class-prefix}navbar-item,
html,
body {
&.has-navbar-fixed-top-touch {
padding-top: $navbar-height;
padding-top: getVar("navbar-height");
}
&.has-navbar-fixed-bottom-touch {
padding-bottom: $navbar-height;
padding-bottom: getVar("navbar-height");
}
}
}
@@ -410,10 +456,11 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar {
min-height: $navbar-height;
min-height: getVar("navbar-height");
&.is-spaced {
padding: $navbar-padding-vertical $navbar-padding-horizontal;
padding: getVar("navbar-padding-vertical")
getVar("navbar-padding-horizontal");
.#{$class-prefix}navbar-start,
.#{$class-prefix}navbar-end {
@@ -422,7 +469,7 @@ a.#{$class-prefix}navbar-item,
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
border-radius: $radius;
border-radius: getVar("radius");
}
}
@@ -451,13 +498,17 @@ a.#{$class-prefix}navbar-item,
a.#{$class-prefix}navbar-item {
&:focus,
&:hover {
background-color: $navbar-dropdown-item-hover-background-color;
color: $navbar-dropdown-item-hover-color;
background-color: getVar(
"navbar-dropdown-item-hover-background-color"
);
color: getVar("navbar-dropdown-item-hover-color");
}
&.is-active {
background-color: $navbar-dropdown-item-active-background-color;
color: $navbar-dropdown-item-active-color;
background-color: getVar(
"navbar-dropdown-item-active-background-color"
);
color: getVar("navbar-dropdown-item-active-color");
}
}
}
@@ -485,8 +536,9 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-dropdown {
border-bottom: $navbar-dropdown-border-top;
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
border-bottom: getVar("navbar-dropdown-border-top");
border-radius: getVar("navbar-dropdown-radius")
getVar("navbar-dropdown-radius") 0 0;
border-top: none;
bottom: 100%;
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1);
@@ -529,20 +581,18 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-dropdown {
background-color: $navbar-dropdown-background-color;
border-bottom-left-radius: $navbar-dropdown-radius;
border-bottom-right-radius: $navbar-dropdown-radius;
border-top: $navbar-dropdown-border-top;
background-color: getVar("navbar-dropdown-background-color");
border-bottom-left-radius: getVar("navbar-dropdown-radius");
border-bottom-right-radius: getVar("navbar-dropdown-radius");
border-top: getVar("navbar-dropdown-border-top");
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1);
display: none;
font-size: 0.875rem;
@include ltr-position(0, false);
min-width: 100%;
position: absolute;
top: 100%;
z-index: $navbar-dropdown-z;
z-index: getVar("navbar-dropdown-z");
.#{$class-prefix}navbar-item {
padding: 0.375rem 1rem;
@@ -554,27 +604,29 @@ a.#{$class-prefix}navbar-item,
&:focus,
&:hover {
background-color: $navbar-dropdown-item-hover-background-color;
color: $navbar-dropdown-item-hover-color;
background-color: getVar("navbar-dropdown-item-hover-background-color");
color: getVar("navbar-dropdown-item-hover-color");
}
&.is-active {
background-color: $navbar-dropdown-item-active-background-color;
color: $navbar-dropdown-item-active-color;
background-color: getVar(
"navbar-dropdown-item-active-background-color"
);
color: getVar("navbar-dropdown-item-active-color");
}
}
.#{$class-prefix}navbar.is-spaced &,
&.is-boxed {
border-radius: $navbar-dropdown-boxed-radius;
border-radius: getVar("navbar-dropdown-boxed-radius");
border-top: none;
box-shadow: $navbar-dropdown-boxed-shadow;
box-shadow: getVar("navbar-dropdown-boxed-shadow");
display: block;
opacity: 0;
pointer-events: none;
top: calc(100% + (#{$navbar-dropdown-offset}));
top: calc(100% + (#{getVar("navbar-dropdown-offset")}));
transform: translateY(-5px);
transition-duration: $speed;
transition-duration: getVar("speed");
transition-property: opacity, transform;
}
@@ -622,19 +674,25 @@ a.#{$class-prefix}navbar-item,
html,
body {
&.has-navbar-fixed-top-desktop {
padding-top: $navbar-height;
padding-top: getVar("navbar-height");
}
&.has-navbar-fixed-bottom-desktop {
padding-bottom: $navbar-height;
padding-bottom: getVar("navbar-height");
}
&.has-spaced-navbar-fixed-top {
padding-top: $navbar-height + $navbar-padding-vertical * 2;
padding-top: calc(
#{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} *
2)
);
}
&.has-spaced-navbar-fixed-bottom {
padding-bottom: $navbar-height + $navbar-padding-vertical * 2;
padding-bottom: calc(
#{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} *
2)
);
}
}
@@ -642,11 +700,11 @@ a.#{$class-prefix}navbar-item,
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
&.is-active {
color: $navbar-item-active-color;
color: getVar("navbar-item-active-color");
}
&.is-active:not(:focus):not(:hover) {
background-color: $navbar-item-active-background-color;
background-color: getVar("navbar-item-active-background-color");
}
}
@@ -655,7 +713,7 @@ a.#{$class-prefix}navbar-item,
&:hover,
&.is-active {
.#{$class-prefix}navbar-link {
background-color: $navbar-item-hover-background-color;
background-color: getVar("navbar-item-hover-background-color");
}
}
}
@@ -665,6 +723,6 @@ a.#{$class-prefix}navbar-item,
.#{$class-prefix}hero {
&.is-fullheight-with-navbar {
min-height: calc(100vh - #{$navbar-height});
min-height: calc(100vh - #{getVar("navbar-height")});
}
}