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

Add CSS class name prefix

Browse Source
This commit is contained in:
Jeremy Thomas
2022-11-23 22:53:56 +00:00
parent f75e9fcec2
commit 7de49012b7
50 changed files with 20999 additions and 9088 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
sass/components/navbar.scss
View File

@@ -34,7 +34,8 @@ $navbar-dropdown-radius: $radius-large !default;
$navbar-dropdown-z: 20 !default;
$navbar-dropdown-boxed-radius: $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-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;
@@ -57,7 +58,7 @@ $navbar-colors: $colors !default;
z-index: $navbar-fixed-z;
}
.navbar {
.#{$class-prefix}navbar {
background-color: $navbar-background-color;
min-height: $navbar-height;
position: relative;
@@ -71,14 +72,14 @@ $navbar-colors: $colors !default;
background-color: $color;
color: $color-invert;
.navbar-brand {
& > .navbar-item,
.navbar-link {
.#{$class-prefix}navbar-brand {
& > .#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
color: $color-invert;
}
& > a.navbar-item,
.navbar-link {
& > a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
&:focus,
&:hover,
&.is-active {
@@ -87,27 +88,27 @@ $navbar-colors: $colors !default;
}
}
.navbar-link {
.#{$class-prefix}navbar-link {
&::after {
border-color: $color-invert;
}
}
}
.navbar-burger {
.#{$class-prefix}navbar-burger {
color: $color-invert;
}
@include from($navbar-breakpoint) {
.navbar-start,
.navbar-end {
& > .navbar-item,
.navbar-link {
.#{$class-prefix}navbar-start,
.#{$class-prefix}navbar-end {
& > .#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
color: $color-invert;
}
& > a.navbar-item,
.navbar-link {
& > a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
&:focus,
&:hover,
&.is-active {
@@ -116,22 +117,25 @@ $navbar-colors: $colors !default;
}
}
.navbar-link {
.#{$class-prefix}navbar-link {
&::after {
border-color: $color-invert;
}
}
}
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link {
.#{$class-prefix}navbar-item.has-dropdown:focus
.#{$class-prefix}navbar-link,
.#{$class-prefix}navbar-item.has-dropdown:hover
.#{$class-prefix}navbar-link,
.#{$class-prefix}navbar-item.has-dropdown.is-active
.#{$class-prefix}navbar-link {
background-color: bulmaDarken($color, 5%);
color: $color-invert;
}
.navbar-dropdown {
a.navbar-item {
.#{$class-prefix}navbar-dropdown {
a.#{$class-prefix}navbar-item {
&.is-active {
background-color: $color;
color: $color-invert;
@@ -142,7 +146,7 @@ $navbar-colors: $colors !default;
}
}
& > .container {
& > .#{$class-prefix}container {
align-items: stretch;
display: flex;
min-height: $navbar-height;
@@ -182,16 +186,16 @@ body {
}
}
.navbar-brand,
.navbar-tabs {
.#{$class-prefix}navbar-brand,
.#{$class-prefix}navbar-tabs {
align-items: stretch;
display: flex;
flex-shrink: 0;
min-height: $navbar-height;
}
.navbar-brand {
a.navbar-item {
.#{$class-prefix}navbar-brand {
a.#{$class-prefix}navbar-item {
&:focus,
&:hover {
background-color: transparent;
@@ -199,7 +203,7 @@ body {
}
}
.navbar-tabs {
.#{$class-prefix}navbar-tabs {
@include overflow-touch;
max-width: 100vw;
@@ -207,7 +211,7 @@ body {
overflow-y: hidden;
}
.navbar-burger {
.#{$class-prefix}navbar-burger {
@extend %reset;
color: $navbar-burger-color;
@@ -216,19 +220,19 @@ body {
@include ltr-property("margin", auto, false);
}
.navbar-menu {
.#{$class-prefix}navbar-menu {
display: none;
}
.navbar-item,
.navbar-link {
.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
color: $navbar-item-color;
display: block;
line-height: 1.5;
padding: 0.5rem 0.75rem;
position: relative;
.icon {
.#{$class-prefix}icon {
&:only-child {
margin-left: -0.25rem;
margin-right: -0.25rem;
@@ -236,8 +240,8 @@ body {
}
}
a.navbar-item,
.navbar-link {
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
cursor: pointer;
&:focus,
@@ -249,7 +253,7 @@ a.navbar-item,
}
}
.navbar-item {
.#{$class-prefix}navbar-item {
flex-grow: 0;
flex-shrink: 0;
@@ -288,12 +292,12 @@ a.navbar-item,
}
}
.navbar-content {
.#{$class-prefix}navbar-content {
flex-grow: 1;
flex-shrink: 1;
}
.navbar-link:not(.is-arrowless) {
.#{$class-prefix}navbar-link:not(.is-arrowless) {
@include ltr-property("padding", 2.5em);
&::after {
@@ -306,18 +310,18 @@ a.navbar-item,
}
}
.navbar-dropdown {
.#{$class-prefix}navbar-dropdown {
font-size: 0.875rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
.navbar-item {
.#{$class-prefix}navbar-item {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
.navbar-divider {
.#{$class-prefix}navbar-divider {
background-color: $navbar-divider-background-color;
border: none;
display: none;
@@ -326,25 +330,25 @@ a.navbar-item,
}
@include until($navbar-breakpoint) {
.navbar > .container {
.#{$class-prefix}navbar > .#{$class-prefix}container {
display: block;
}
.navbar-brand,
.navbar-tabs {
.navbar-item {
.#{$class-prefix}navbar-brand,
.#{$class-prefix}navbar-tabs {
.#{$class-prefix}navbar-item {
align-items: center;
display: flex;
}
}
.navbar-link {
.#{$class-prefix}navbar-link {
&::after {
display: none;
}
}
.navbar-menu {
.#{$class-prefix}navbar-menu {
background-color: $navbar-background-color;
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
padding: 0.5rem 0;
@@ -355,7 +359,7 @@ a.navbar-item,
}
// Fixed navbar
.navbar {
.#{$class-prefix}navbar {
&.is-fixed-bottom-touch,
&.is-fixed-top-touch {
@include navbar-fixed;
@@ -375,7 +379,7 @@ a.navbar-item,
&.is-fixed-top,
&.is-fixed-top-touch {
.navbar-menu {
.#{$class-prefix}navbar-menu {
@include overflow-touch;
max-height: calc(100vh - #{$navbar-height});
@@ -396,36 +400,35 @@ a.navbar-item,
}
}
@include from($navbar-breakpoint) {
.navbar,
.navbar-menu,
.navbar-start,
.navbar-end {
.#{$class-prefix}navbar,
.#{$class-prefix}navbar-menu,
.#{$class-prefix}navbar-start,
.#{$class-prefix}navbar-end {
align-items: stretch;
display: flex;
}
.navbar {
.#{$class-prefix}navbar {
min-height: $navbar-height;
&.is-spaced {
padding: $navbar-padding-vertical $navbar-padding-horizontal;
.navbar-start,
.navbar-end {
.#{$class-prefix}navbar-start,
.#{$class-prefix}navbar-end {
align-items: center;
}
a.navbar-item,
.navbar-link {
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
border-radius: $radius;
}
}
&.is-transparent {
a.navbar-item,
.navbar-link {
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
&:focus,
&:hover,
&.is-active {
@@ -433,19 +436,19 @@ a.navbar-item,
}
}
.navbar-item.has-dropdown {
.#{$class-prefix}navbar-item.has-dropdown {
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover {
.navbar-link {
.#{$class-prefix}navbar-link {
background-color: transparent !important;
}
}
}
.navbar-dropdown {
a.navbar-item {
.#{$class-prefix}navbar-dropdown {
a.#{$class-prefix}navbar-item {
&:focus,
&:hover {
background-color: $navbar-dropdown-item-hover-background-color;
@@ -461,27 +464,27 @@ a.navbar-item,
}
}
.navbar-burger {
.#{$class-prefix}navbar-burger {
display: none;
}
.navbar-item,
.navbar-link {
.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
align-items: center;
display: flex;
}
.navbar-item {
.#{$class-prefix}navbar-item {
&.has-dropdown {
align-items: stretch;
}
&.has-dropdown-up {
.navbar-link::after {
.#{$class-prefix}navbar-link::after {
transform: rotate(135deg) translate(0.25em, -0.25em);
}
.navbar-dropdown {
.#{$class-prefix}navbar-dropdown {
border-bottom: $navbar-dropdown-border-top;
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
border-top: none;
@@ -495,10 +498,10 @@ a.navbar-item,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover {
.navbar-dropdown {
.#{$class-prefix}navbar-dropdown {
display: block;
.navbar.is-spaced &,
.#{$class-prefix}navbar.is-spaced &,
&.is-boxed {
opacity: 1;
pointer-events: auto;
@@ -508,24 +511,24 @@ a.navbar-item,
}
}
.navbar-menu {
.#{$class-prefix}navbar-menu {
flex-grow: 1;
flex-shrink: 0;
}
.navbar-start {
.#{$class-prefix}navbar-start {
justify-content: flex-start;
@include ltr-property("margin", auto);
}
.navbar-end {
.#{$class-prefix}navbar-end {
justify-content: flex-end;
@include ltr-property("margin", auto, false);
}
.navbar-dropdown {
.#{$class-prefix}navbar-dropdown {
background-color: $navbar-dropdown-background-color;
border-bottom-left-radius: $navbar-dropdown-radius;
border-bottom-right-radius: $navbar-dropdown-radius;
@@ -541,12 +544,12 @@ a.navbar-item,
top: 100%;
z-index: $navbar-dropdown-z;
.navbar-item {
.#{$class-prefix}navbar-item {
padding: 0.375rem 1rem;
white-space: nowrap;
}
a.navbar-item {
a.#{$class-prefix}navbar-item {
@include ltr-property("padding", 3rem);
&:focus,
@@ -561,7 +564,7 @@ a.navbar-item,
}
}
.navbar.is-spaced &,
.#{$class-prefix}navbar.is-spaced &,
&.is-boxed {
border-radius: $navbar-dropdown-boxed-radius;
border-top: none;
@@ -581,23 +584,23 @@ a.navbar-item,
}
}
.navbar-divider {
.#{$class-prefix}navbar-divider {
display: block;
}
.navbar > .container,
.container > .navbar {
.navbar-brand {
.#{$class-prefix}navbar > .#{$class-prefix}container,
.#{$class-prefix}container > .#{$class-prefix}navbar {
.#{$class-prefix}navbar-brand {
@include ltr-property("margin", -0.75rem, false);
}
.navbar-menu {
.#{$class-prefix}navbar-menu {
@include ltr-property("margin", -0.75rem);
}
}
// Fixed navbar
.navbar {
.#{$class-prefix}navbar {
&.is-fixed-bottom-desktop,
&.is-fixed-top-desktop {
@include navbar-fixed;
@@ -636,8 +639,8 @@ a.navbar-item,
}
// Hover/Active states
a.navbar-item,
.navbar-link {
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
&.is-active {
color: $navbar-item-active-color;
}
@@ -647,21 +650,20 @@ a.navbar-item,
}
}
.navbar-item.has-dropdown {
.#{$class-prefix}navbar-item.has-dropdown {
&:focus,
&:hover,
&.is-active {
.navbar-link {
.#{$class-prefix}navbar-link {
background-color: $navbar-item-hover-background-color;
}
}
}
}
// Combination
.hero {
.#{$class-prefix}hero {
&.is-fullheight-with-navbar {
min-height: calc(100vh - #{$navbar-height});
}