src/options/layout.scss
html {
min-width: 800px;
}
body {
margin: 0 auto;
padding: 0 10px;
width: 90%;
max-width: 800px;
}
.header {
display: flex;
align-items: center;
padding: 10px 0;
&__logo {
display: inline-block;
margin-right: 20px;
width: 64px;
}
}
.main-content {
opacity: 1;
transition: opacity, 200ms;
}
.main-content--hidden {
opacity: 0;
}
.main-content__tab {
display: none;
&--is-visible {
display: block;
}
}
.options-section {
padding: 20px 0;
&__title,
&__description {
margin: 0 0 8px;
}
&__input-group {
display: flex;
align-items: center;
& + & {
margin-top: 8px;
}
}
&__input {
margin: 5px;
&--hidden {
display: none;
}
}
&__input-label {
margin: 0 0 0 5px;
}
&--highlighted {
padding: 15px;
}
&--hidden {
display: none;
}
}
.textarea {
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
padding: 10px;
height: 200px;
}
.text-input {
flex-shrink: 1;
overflow: hidden;
padding: 5px;
}
.status-message {
flex-grow: 1;
opacity: 0;
&--is-visible {
opacity: 1;
}
}
.footer {
padding: 20px 0;
}