Update: fix dropdown text wrap
This commit is contained in:
parent
34e2128a39
commit
0f43723250
2 changed files with 23 additions and 9 deletions
|
@ -102,7 +102,7 @@
|
|||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.icon + .icon {
|
||||
.icon+.icon {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
|
@ -111,9 +111,14 @@
|
|||
margin-right: 4px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dropdown-item .icon-text {
|
||||
text-wrap: wrap;
|
||||
word-break: break-word;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
span.icon-text::after {
|
||||
|
@ -151,8 +156,8 @@ span.icon-text::after {
|
|||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.navbar-toggler{
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
.navbar-toggler {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
.dropdown-menu.scrollable-y {
|
||||
|
@ -168,7 +173,7 @@ color: var(--md-sys-color-on-surface-variant);
|
|||
|
||||
.scrollable-y::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
width: 0.7rem;
|
||||
width: 0.7rem;
|
||||
}
|
||||
|
||||
.scrollable-y::-webkit-scrollbar-track {
|
||||
|
@ -176,7 +181,7 @@ color: var(--md-sys-color-on-surface-variant);
|
|||
}
|
||||
|
||||
.scrollable-y::-webkit-scrollbar-thumb {
|
||||
border-radius: 2rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border: 3px solid var(--md-sys-color-surface-5);
|
||||
}
|
||||
|
@ -262,4 +267,13 @@ color: var(--md-sys-color-on-surface-variant);
|
|||
.dropdown-item.active.advance {
|
||||
color: var(--md-nav-on-section-color-advance);
|
||||
background-color: var(--md-nav-section-color-advance);
|
||||
}
|
||||
|
||||
/* Dropdown min-width */
|
||||
.dropdown-mw-28 {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.dropdown-mw-20 {
|
||||
min-width: 200px;
|
||||
}
|
|
@ -293,7 +293,7 @@
|
|||
star
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
|
||||
<div class="dropdown-menu dropdown-mw-28 px-xl-2 px-2" id="favoritesDropdown" aria-labelledby="navbarDropdown-5">
|
||||
<!-- Dropdown items will be added here by JavaScript -->
|
||||
</div>
|
||||
</li>
|
||||
|
@ -312,7 +312,7 @@
|
|||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu px-xl-2 px-2" aria-labelledby="languageDropdown">
|
||||
<div class="scrollable-y">
|
||||
<div class="scrollable-y dropdown-mw-20">
|
||||
<th:block th:insert="~{fragments/languages :: langs}"></th:block>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue