tweak style for mobile
This commit is contained in:
parent
eebadf8a71
commit
545d2a9d92
|
@ -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';
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in a new issue