improve(ui): polish settings options ui

This commit is contained in:
charlie
2021-02-27 17:04:48 +08:00
parent ace88231de
commit d18ee7f8c4
5 changed files with 321 additions and 217 deletions

View File

@@ -30,6 +30,28 @@
}
}
.ui__toggle {
.wrapper {
@apply relative inline-block flex-shrink-0
h-6 w-11 border-2 border-transparent flex
rounded-full cursor-pointer focus:outline-none focus:shadow-outline;
}
.switcher {
@apply inline-block h-5 w-5 rounded-full bg-white shadow;
}
&.is-small {
.wrapper {
@apply h-4 w-8;
}
.switcher {
@apply h-3 w-3;
}
}
}
.ui__confirm-modal {
.sublabel {
display: flex;
@@ -83,17 +105,31 @@
}
.form-select {
@apply block w-full pl-3 pr-10 py-2 text-base leading-6
border-gray-300 focus:outline-none focus:shadow-outline-blue sm:text-sm sm:leading-5;
background-color: var(--ls-primary-background-color, transparent);
background-repeat: no-repeat;
border-width: 1px;
border-color: var(--ls-border-color);
&.is-small {
@apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
}
}
.form-input {
@apply block w-full pl-2
sm:text-sm sm:leading-5;
border-width: 1px;
border-color: var(--ls-border-color);
&:focus {
box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
}
&.is-small {
@apply py-1.5 sm:leading-4 sm:text-xs;
}
}