tweak style for mobile

This commit is contained in:
Nolan Lawson 2018-01-31 09:06:06 -08:00
parent eebadf8a71
commit 545d2a9d92
3 changed files with 38 additions and 11 deletions

View file

@ -15,6 +15,11 @@
:global(.settings .free-text h2) {
margin: 20px 0 10px;
}
@media (max-width: 767px) {
.settings {
margin: 20px 10px;
}
}
</style>
<script>
import SettingsNav from './SettingsNav.html';

View file

@ -1,18 +1,28 @@
{{#if label}}
<ul class="settings-list" aria-label="{{label}}">
<slot></slot>
</ul>
{{else}}
<ul class="settings-list">
<slot></slot>
</ul>
{{/if}}
<div class="settings-list-wrapper">
{{#if label}}
<ul class="settings-list" aria-label="{{label}}">
<slot></slot>
</ul>
{{else}}
<ul class="settings-list">
<slot></slot>
</ul>
{{/if}}
</div>
<style>
.settings-list-wrapper {
margin: 20px 20px;
}
ul.settings-list {
list-style: none;
width: 100%;
border: 1px solid var(--settings-list-item-border);
margin: 20px auto;
max-width: 80%;
margin: 0 auto;
box-sizing: border-box;
}
@media (max-width: 767px) {
.settings-list-wrapper {
margin: 20px 0;
}
}
</style>

View file

@ -55,4 +55,16 @@
text-overflow: ellipsis;
}
@media (max-width: 767px) {
.settings-list-item a {
padding: 20px 10px;
}
.settings-list-item svg {
margin-right: 10px;
}
.settings-list-item .offset-for-icon {
margin-left: 34px;
}
}
</style>