matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-30 02:21:17 +03:00
Code Activity

Make the tabs look like the design

Browse Source
This commit is contained in:
Travis Ralston
2019-01-18 19:40:21 -07:00
parent 15709040e7
commit a7e3d7df28
8 changed files with 99 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
res/css/structures/_TabbedView.scss
View File

@ -39,15 +39,46 @@ limitations under the License.
height: 20px;
}
.mx_TabbedView_tabLabel:hover {
font-weight: 700;
}
.mx_TabbedView_tabLabel_active {
background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color;
}
.mx_TabbedView_tabLabel_icon {
width: 12px;
height: 12px;
margin-left: 6px;
margin-right: 9px;
position: relative;
}
.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
width: 12px;
height: 12px;
display: inline-block;
}
.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat;
mask-size: 12px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-active-icon-bg-color;
}
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
.mx_TabbedView_tabPanel {
width: calc(100% - 320px);
display: inline-block;