Use the right icons, sizing, and font families for things
This commit is contained in:
parent
a8ec40a8b0
commit
c3692aa9ae
9 changed files with 49 additions and 19 deletions
|
@ -30,7 +30,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TabbedView_tabLabel {
|
||||
vertical-align: middle;
|
||||
vertical-align: text-top;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
|
@ -46,23 +46,23 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 6px;
|
||||
margin-right: 9px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
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-size: 14px;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
|
@ -3,29 +3,29 @@
|
|||
display: block;
|
||||
text-align: center;
|
||||
color: $dialog-title-fg-color;
|
||||
margin-top: 23px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_close {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
top: 16px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_closeIcon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_closeIcon:before {
|
||||
// TODO: Use real icon
|
||||
mask: url('$(res)/img/feather-icons/video.svg');
|
||||
mask: url('$(res)/img/feather-icons/cancel.svg');
|
||||
background-color: $dialog-close-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 14px;
|
||||
mask-size: 16px;
|
||||
mask-position: center;
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
@ -52,16 +52,13 @@
|
|||
}
|
||||
|
||||
.mx_UserSettingsDialog_preferencesIcon:before {
|
||||
// TODO: Use real icon
|
||||
mask: url('$(res)/img/feather-icons/paperclip.svg');
|
||||
mask: url('$(res)/img/feather-icons/sliders.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_securityIcon:before {
|
||||
// TODO: Use real icon
|
||||
mask: url('$(res)/img/feather-icons/life-buoy.svg');
|
||||
mask: url('$(res)/img/feather-icons/lock.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_helpIcon:before {
|
||||
// TODO: Use real icon
|
||||
mask: url('$(res)/img/feather-icons/share.svg');
|
||||
mask: url('$(res)/img/feather-icons/help-circle.svg');
|
||||
}
|
|
@ -1,13 +1,17 @@
|
|||
.mx_SettingsTab_heading {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_SettingsTab_subheading {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
font-family: $font-family-semibold;
|
||||
color: $primary-fg-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_SettingsTab_section {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue