imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

1
res/css/_components.scss
View file

@ -52,6 +52,7 @@
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
@import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";

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;

26
res/css/views/dialogs/_UserSettingsDialog.scss Normal file
View file

@ -0,0 +1,26 @@
.mx_UserSettingsDialog_settingsIcon:before {
mask: url('$(res)/img/feather-icons/settings.svg');
}
.mx_UserSettingsDialog_voiceIcon:before {
mask: url('$(res)/img/feather-icons/phone.svg');
}
.mx_UserSettingsDialog_bellIcon:before {
mask: url('$(res)/img/feather-icons/notifications.svg');
}
.mx_UserSettingsDialog_preferencesIcon:before {
// TODO: Use real icon
mask: url('$(res)/img/feather-icons/paperclip.svg');
}
.mx_UserSettingsDialog_securityIcon:before {
// TODO: Use real icon
mask: url('$(res)/img/feather-icons/life-buoy.svg');
}
.mx_UserSettingsDialog_helpIcon:before {
// TODO: Use real icon
mask: url('$(res)/img/feather-icons/share.svg');
}