225 lines
4.7 KiB
SCSS
225 lines
4.7 KiB
SCSS
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Breadcrumb component
|
|
*
|
|
* Overrides for breadcrumb bootstrap component
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
// Base
|
|
.breadcrumb {
|
|
padding: 0;
|
|
}
|
|
|
|
// Breadcrumb item
|
|
.breadcrumb-item {
|
|
padding: $breadcrumb-padding-y 0;
|
|
color: inherit;
|
|
|
|
// Icons
|
|
i {
|
|
font-size: $font-size-sm;
|
|
}
|
|
}
|
|
|
|
// Linked items
|
|
a.breadcrumb-item {
|
|
display: inline-block;
|
|
color: inherit;
|
|
@include transition(opacity ease-in-out $component-transition-timer);
|
|
|
|
// Hover state
|
|
&:hover,
|
|
&:focus,
|
|
.show > & {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
// Transparent breadcrumb
|
|
.page-header-content {
|
|
|
|
// Breadcrumb
|
|
> .breadcrumb {
|
|
padding-top: 0;
|
|
padding-bottom: ($breadcrumb-padding-y * 2);
|
|
|
|
&:first-child {
|
|
padding-bottom: 0;
|
|
padding-top: ($breadcrumb-padding-y * 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Divider styles
|
|
//
|
|
|
|
// Dash
|
|
.breadcrumb-dash > .breadcrumb-item + .breadcrumb-item:before {
|
|
content: '\2013\00a0';
|
|
}
|
|
|
|
// Arrow
|
|
.breadcrumb-arrow > .breadcrumb-item + .breadcrumb-item:before {
|
|
@if $direction == "LTR" {
|
|
content: '\2192\00a0';
|
|
}
|
|
@else {
|
|
content: '\2190\00a0';
|
|
}
|
|
}
|
|
|
|
// Arrows
|
|
.breadcrumb-arrows > .breadcrumb-item + .breadcrumb-item:before {
|
|
content: '\00bb\00a0';
|
|
}
|
|
|
|
// Caret
|
|
.breadcrumb-caret > .breadcrumb-item + .breadcrumb-item:before {
|
|
content: '\203A\00a0';
|
|
}
|
|
|
|
|
|
//
|
|
// Breadcrumb line
|
|
//
|
|
|
|
// Base
|
|
.breadcrumb-line {
|
|
position: relative;
|
|
padding-left: $breadcrumb-line-padding-x;
|
|
padding-right: $breadcrumb-line-padding-x;
|
|
border-top: $breadcrumb-line-border-width solid transparent;
|
|
border-bottom: $breadcrumb-line-border-width solid transparent;
|
|
|
|
// Inside page header (all levels)
|
|
&:not(.breadcrumb-line-component):first-child {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
// After page header content
|
|
&:last-child {
|
|
margin-bottom: $spacer;
|
|
|
|
// Remove bottom margin if inside colored header
|
|
.page-header-light &,
|
|
.page-header-dark & {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Light line
|
|
.breadcrumb-line-light {
|
|
background-color: $breadcrumb-line-light-bg;
|
|
border-color: $breadcrumb-line-light-border-color;
|
|
color: $body-color;
|
|
|
|
// Remove bottom border in light header
|
|
&:not(.breadcrumb-line-component):last-child {
|
|
.page-header-light & {
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
|
|
// Remove borders in dark header
|
|
.page-header-dark &:not(.breadcrumb-line-component) {
|
|
border-top-width: 0;
|
|
|
|
// Remove bottom border if before title
|
|
&:first-child {
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
|
|
// Borders in line component
|
|
&.breadcrumb-line-component {
|
|
border-color: $breadcrumb-line-light-border-color;
|
|
}
|
|
}
|
|
|
|
// Dark line
|
|
.breadcrumb-line-dark {
|
|
background-color: $breadcrumb-line-dark-bg;
|
|
border-color: transparent;
|
|
color: $white;
|
|
|
|
// Remove bottom border in dark header
|
|
&:not(.breadcrumb-line-component):last-child {
|
|
.page-header-dark & {
|
|
border-bottom-width: 0;
|
|
}
|
|
}
|
|
|
|
// Active state
|
|
.breadcrumb-item {
|
|
&.active {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// In dark page header
|
|
.page-header-dark & {
|
|
border-color: $breadcrumb-line-dark-border-color;
|
|
}
|
|
}
|
|
|
|
// As a component
|
|
.breadcrumb-line-component {
|
|
border: $breadcrumb-line-border-width solid transparent;
|
|
@include border-radius($border-radius);
|
|
|
|
// Inside page header
|
|
.page-header & {
|
|
margin-left: $page-header-padding-x;
|
|
margin-right: $page-header-padding-x;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Breadrumb elements
|
|
//
|
|
|
|
// Base
|
|
.breadcrumb-elements-item {
|
|
padding: $breadcrumb-padding-y 0;
|
|
|
|
// Spacing between items
|
|
+ .breadcrumb-elements-item {
|
|
margin-left: map-get($spacers, 3);
|
|
}
|
|
}
|
|
|
|
// Links
|
|
a.breadcrumb-elements-item {
|
|
@extend a.breadcrumb-item;
|
|
}
|
|
|
|
|
|
|
|
// Layout specific additions
|
|
// ------------------------------
|
|
|
|
//
|
|
// # Layout 5
|
|
//
|
|
|
|
@if $layout == 'layout_5' {
|
|
|
|
// Breadcrumb line has extra horizontal spacing that
|
|
// matches page content spacing
|
|
.breadcrumb-line:not(.breadcrumb-line-component) {
|
|
@include media-breakpoint-up(md) {
|
|
padding-left: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
|
padding-right: ($page-container-padding-x / 2) + ($content-container-padding-x * 2);
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
padding-left: $page-container-padding-x + ($content-container-padding-x * 2);
|
|
padding-right: $page-container-padding-x + ($content-container-padding-x * 2);
|
|
}
|
|
}
|
|
}
|