MDL-75157 theme: Divider and custom bottom border in tertiary navigation

This commit is contained in:
Mihail Geshoski
2022-10-18 00:42:45 +08:00
parent 3bc792b9b8
commit c9af6ad02f
4 changed files with 93 additions and 3 deletions
@@ -1,11 +1,37 @@
.tertiary-navigation {
padding-top: 10px;
.navitem {
&.full-width-bottom-border {
width: calc(100% + 1rem + 30px);
margin-left: calc(-0.5rem - 15px);
margin-right: calc(-0.5rem - 15px);
border-bottom: 1px solid $gray-300;
margin-bottom: 25px;
@include media-breakpoint-down(sm) {
width: calc(100% + 1rem);
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.row {
margin: 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
.navitem,
.navitem-divider {
display: flex;
margin-bottom: 25px;
}
.navitem-divider {
width: 1px;
background-color: $gray-300;
}
& > a.btn,
& > div.urlselect {
margin-bottom: 25px;
@@ -22,6 +48,11 @@
font-weight: bold;
}
}
.navitem:not(:last-child),
.navitem-divider:not(:last-child) {
margin-right: 20px;
}
}
@media print {
+23 -1
View File
@@ -21741,9 +21741,28 @@ div.editor_atto_toolbar button .icon {
.tertiary-navigation {
padding-top: 10px; }
.tertiary-navigation .navitem {
.tertiary-navigation.full-width-bottom-border {
width: calc(100% + 1rem + 30px);
margin-left: calc(-0.5rem - 15px);
margin-right: calc(-0.5rem - 15px);
border-bottom: 1px solid #dee2e6;
margin-bottom: 25px; }
@media (max-width: 767.98px) {
.tertiary-navigation.full-width-bottom-border {
width: calc(100% + 1rem);
margin-left: -0.5rem;
margin-right: -0.5rem; } }
.tertiary-navigation.full-width-bottom-border .row {
margin: 0;
padding-left: 0.5rem;
padding-right: 0.5rem; }
.tertiary-navigation .navitem,
.tertiary-navigation .navitem-divider {
display: flex;
margin-bottom: 25px; }
.tertiary-navigation .navitem-divider {
width: 1px;
background-color: #dee2e6; }
.tertiary-navigation > a.btn,
.tertiary-navigation > div.urlselect {
margin-bottom: 25px; }
@@ -21753,6 +21772,9 @@ div.editor_atto_toolbar button .icon {
padding: 0;
font-size: 1.4rem;
font-weight: bold; }
.tertiary-navigation .navitem:not(:last-child),
.tertiary-navigation .navitem-divider:not(:last-child) {
margin-right: 20px; }
@media print {
.tertiary-navigation {
+15
View File
@@ -17,3 +17,18 @@ img.userpicture {
font-weight: bold;
}
}
.tertiary-navigation {
&.full-width-bottom-border {
width: calc(100% + 2.5rem);
margin-left: -1.25rem;
margin-right: -1.25rem;
@include media-breakpoint-down(sm) {
width: calc(100% + 2rem);
margin-left: -1rem;
margin-right: -1rem;
}
}
}
+23 -1
View File
@@ -21687,9 +21687,28 @@ div.editor_atto_toolbar button .icon {
.tertiary-navigation {
padding-top: 10px; }
.tertiary-navigation .navitem {
.tertiary-navigation.full-width-bottom-border {
width: calc(100% + 1rem + 30px);
margin-left: calc(-0.5rem - 15px);
margin-right: calc(-0.5rem - 15px);
border-bottom: 1px solid #dee2e6;
margin-bottom: 25px; }
@media (max-width: 767.98px) {
.tertiary-navigation.full-width-bottom-border {
width: calc(100% + 1rem);
margin-left: -0.5rem;
margin-right: -0.5rem; } }
.tertiary-navigation.full-width-bottom-border .row {
margin: 0;
padding-left: 0.5rem;
padding-right: 0.5rem; }
.tertiary-navigation .navitem,
.tertiary-navigation .navitem-divider {
display: flex;
margin-bottom: 25px; }
.tertiary-navigation .navitem-divider {
width: 1px;
background-color: #dee2e6; }
.tertiary-navigation > a.btn,
.tertiary-navigation > div.urlselect {
margin-bottom: 25px; }
@@ -21699,6 +21718,9 @@ div.editor_atto_toolbar button .icon {
padding: 0;
font-size: 1.4rem;
font-weight: bold; }
.tertiary-navigation .navitem:not(:last-child),
.tertiary-navigation .navitem-divider:not(:last-child) {
margin-right: 20px; }
@media print {
.tertiary-navigation {