$navbar-background-color: #000; $navbar-item-color: eee; $navbar-item-hover-color: #000;
@import “bulma”;
body {
>nav { @extend .navbar; li { display: flex; * { @extend .navbar-item; display: flex; width: 100%; } // For some reason these need overridden on GitHub Pages; I think // it's an issue with whatever SASS compiler it uses. * { * { padding: 0px; } } *:hover { * { color: $navbar-item-hover-color; } } } .navbar-menu { @extend .is-active; } .navbar-brand { font-weight: bolder; li { @extend .title; margin: 0px !important; padding-top: 0px; padding-bottom: 0px; } img { max-height: 48px; } } } >header, >main, >footer { @extend .section; } >header { h1 { @extend .title; @extend .is-1; } p { @extend .subtitle; @extend .is-3; } } >footer { @extend .content; }
}
.cards {
@extend .columns; @extend .is-multiline; @extend .is-8; > * { @extend .column; @extend .is-half-tablet; @extend .is-one-third-desktop; @extend .is-one-quarter-widescreen; @extend .is-one-fifth-fullhd; @extend .card; display: flex; flex-direction: column; padding: 0; margin: calc(#{$gap} / 2); @media (min-width: $tablet) { width: calc(50% - #{$gap}); } @media (min-width: $desktop) { width: calc(33.3333% - #{$gap}); } @media (min-width: $widescreen) { width: calc(25% - #{$gap}); } @media (min-width: $fullhd) { width: calc(20% - #{$gap}); } >header { flex: 1; @extend .card-content; >h2 { @extend .title; @extend .is-full; >.tag { position: absolute; top: 0.5em; right: 0.5em; } } >p { @extend .subtitle; } } >section { @extend .card-content; @extend .py-0; @extend .my-0; @extend .level; @extend .is-mobile; flex: none; align-items: first baseline; >* { @extend .level-right; @extend .my-0; vertical-align: top; flex-shrink: 1; * { text-align: right; } } >h3 { @extend .level-left; @extend .title; @extend .is-6; @extend .my-0; @extend .mr-2; flex-shrink: 0; } } >footer { @extend .card-footer; flex: none; >* { @extend .card-footer-item; } } }
}
.has-addons {
flex-wrap: wrap; .help { flex-basis: 100%; }
}
.feather-icon {
@extend .icon; margin-right: 0 !important; >svg { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
}
.tile {
flex-grow: 0;
}
.tile.is-main {
flex-grow: 1;
}
.help {
border-radius: 4px; padding: calc(0.5em - 1px) 1em calc(0.5em - 1px) 1em;
}
.help.is-warning {
color: #000000; background-color: #ffdd57; border-radius: 4px;
}
.help.is-danger {
color: #ffffff; background-color: #f14668; border-radius: 4px;
}