Skip to content

Commit

Permalink
fix(#9481): improve style of new menu buttons and labels (#9545)
Browse files Browse the repository at this point in the history
Co-authored-by: Ben Kiarie <[email protected]>
Co-authored-by: Jennifer Q <[email protected]>
  • Loading branch information
3 people authored Oct 29, 2024
1 parent 2a3e914 commit d18a402
Showing 1 changed file with 50 additions and 28 deletions.
78 changes: 50 additions & 28 deletions webapp/src/css/inbox.less
Original file line number Diff line number Diff line change
Expand Up @@ -198,10 +198,16 @@ body {
a .button-label {
margin-top: 3px;
position: relative;
overflow: hidden;
word-wrap: break-word;
color: @nav-icon-gray;
font-size: @font-XXS;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

Expand Down Expand Up @@ -1289,9 +1295,10 @@ mm-sidebar-menu .mat-sidenav-container {
}
}

mm-panel-header {
.mat-sidenav mm-panel-header {
background: @top-header-color;
height: @sidebar-menu-header-desktop;
padding: 0;

.panel-header {
justify-content: flex-end;
Expand All @@ -1303,13 +1310,13 @@ mm-sidebar-menu .mat-sidenav-container {
font-size: @font-XXL;
font-weight: bold;
line-height: @font-XXL;
margin-left: 15px;
margin-left: -15px;
color: @text-inverse-color;
letter-spacing: normal;
}

.panel-header-close {
width: 20px;
width: 80px;
text-align: center;

mat-icon {
Expand Down Expand Up @@ -1366,6 +1373,7 @@ mm-sidebar-menu .mat-sidenav-container {
mat-icon {
text-align: center;
margin-right: 15px;
margin-left: 10px;
flex-shrink: 0;
}
}
Expand Down Expand Up @@ -1402,10 +1410,20 @@ mm-sidebar-menu .mat-sidenav-container {
height: calc(@sidebar-menu-height - @sidebar-menu-header-mobile);
}

mm-panel-header {
.nav-item mat-icon {
margin-left: -6px;
}

.mat-sidenav mm-panel-header {
height: @sidebar-menu-header-mobile;

.panel-header-title {
font-size: @font-extra-large;
margin-left: 0;
}

.panel-header-close {
width: 48px;
}
}
}
Expand Down Expand Up @@ -1452,29 +1470,34 @@ mm-sidebar-menu .mat-sidenav-container {
flex-direction: row;
align-items: center;
justify-content: center;
.button-label {
top: 0;
font-size: @font-XXS;
padding-top: 5px;
text-overflow: ellipsis;
margin-top: 0;

a .button-label {
top: 0;
font-size: @font-XXS;
padding-top: 5px;
margin-top: 3px;
overflow: hidden;
word-wrap: break-word;
color: @nav-icon-gray;
text-overflow: ellipsis;
white-space: unset;
word-break: unset;
}

a {
min-width: 65px;
margin-top: 1px;

.mm-icon {
padding: 8px 0;
}

&.selected
.mm-icon {
border-radius: 999px;
background-color: @tab-selected-color;
}
min-width: 65px;
margin-top: 1px;

.mm-icon {
padding: 8px 0;
}

&.selected .mm-icon {
border-radius: 999px;
background-color: @tab-selected-color;
}
}
}
}
}

&.select-mode {
Expand Down Expand Up @@ -1882,5 +1905,4 @@ mm-sidebar-menu .mat-sidenav-container {
.desktop-only {
display: none;
}
}

}

0 comments on commit d18a402

Please sign in to comment.