@include smaller-than($l) {
header .grid {
grid-template-columns: 1fr;
+ grid-row-gap: 0;
}
}
header {
position: relative;
display: block;
- z-index: 2;
+ z-index: 6;
top: 0;
background-color: $primary-dark;
color: #fff;
padding: 0 $-xs;
position: absolute;
right: $-m;
- top: 8px;
+ top: 13px;
line-height: 1;
cursor: pointer;
user-select: none;
svg {
margin: 0;
+ bottom: -2px;
}
}
}
}
+.tri-layout-mobile-tabs {
+ position: sticky;
+ top: 0;
+ z-index: 5;
+ background-color: #FFF;
+ border-bottom: 1px solid #DDD;
+ box-shadow: $bs-card;
+}
+.tri-layout-mobile-tab {
+ text-align: center;
+ border-bottom: 3px solid #BBB;
+ cursor: pointer;
+ &:first-child {
+ border-right: 1px solid #DDD;
+ }
+ &.active {
+ border-bottom-color: currentColor;
+ }
+}
+
.breadcrumbs {
display: flex;
flex-direction: row;
}
}
+@include smaller-than($l) {
+ .breadcrumbs .icon-list-item {
+ padding: $-xs;
+ > span + span {
+ display: none;
+ }
+ > span:first-child {
+ margin-right: 0;
+ }
+ }
+}
+
.breadcrumb-listing {
position: relative;
.breadcrumb-listing-toggle {
}
}
+@include smaller-than($m) {
+ .breadcrumb-listing-dropdown {
+ position: fixed;
+ right: auto;
+ left: $-m;
+ }
+ .breadcrumb-listing-dropdown .breadcrumb-listing-entity-list {
+ max-height: 240px;
+ }
+}
+
.faded {
a, button, span, span > div {
color: #666;
padding: $-s;
}
-.toolbar {
- position: relative;
- > .grid > div {
- opacity: 0.8;
- transition: opacity ease-in-out 120ms;
- &:hover {
- opacity: 1;
- }
- }
- .text-button {
- color: #666;
- fill: #666;
- }
-}
-
.action-buttons .text-button {
display: inline-block;
padding: $-xs $-s;