mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 08:16:09 +08:00
💄(prefs): Shrink top tabs better, add min-widths
This commit is contained in:
parent
37add7741e
commit
08792f00bd
|
@ -83,7 +83,9 @@ class PreferencesTabsBar extends React.Component {
|
|||
return (
|
||||
<div className="container-preference-tabs">
|
||||
<Flexbox direction="row" className="preferences-tabs">
|
||||
<div style={{flex: 1}}></div>
|
||||
{this.renderTabs()}
|
||||
<div style={{flex: 1}}></div>
|
||||
</Flexbox>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
.preferences-wrap {
|
||||
.container-accounts {
|
||||
width: 70%;
|
||||
min-width: 360px;
|
||||
margin: 0 auto;
|
||||
.accounts-content {
|
||||
display: flex;
|
||||
|
|
|
@ -37,19 +37,20 @@
|
|||
|
||||
.container-preference-tabs {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background-color: @source-list-bg;
|
||||
border-bottom: 1px solid @border-color-divider;
|
||||
|
||||
.preferences-tabs {
|
||||
padding-top: 10px;
|
||||
background-color: @source-list-bg;
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
|
||||
.item {
|
||||
cursor: default;
|
||||
margin: 0 auto;
|
||||
flex: 1.3;
|
||||
min-width: 54px;
|
||||
max-width: 120px;
|
||||
text-align: center;
|
||||
|
||||
&:active {
|
||||
img {
|
||||
|
@ -65,12 +66,19 @@
|
|||
|
||||
.tab-icon {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.name {
|
||||
padding: @padding-base-vertical @padding-large-horizontal;
|
||||
padding: 0 @padding-base-horizontal * 0.3;
|
||||
padding-bottom: @padding-large-vertical;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: @font-size-small;
|
||||
line-height: @font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -92,6 +100,7 @@
|
|||
|
||||
.container-general {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
@ -137,6 +146,7 @@
|
|||
|
||||
.container-keymaps {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
.col-left {
|
||||
|
@ -219,3 +229,13 @@ body.platform-linux {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.preferences-tabs .item .name {
|
||||
display:none;
|
||||
}
|
||||
.preferences-wrap .preferences-content > .scroll-region-content {
|
||||
padding-left: @padding-large-horizontal * 1;
|
||||
padding-right: @padding-large-horizontal * 1;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue