127 lines
2.1 KiB
SCSS
127 lines
2.1 KiB
SCSS
@import "~@/styles/forSize.mixin";
|
|
|
|
#event-proposal {
|
|
header {
|
|
background-color: #FFFCFC;
|
|
border-bottom: thin solid #aaa;
|
|
padding: 0.5em;
|
|
|
|
h1, h2 {
|
|
margin: 0;
|
|
margin-top: 0.5em;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: normal;
|
|
margin-bottom: -0.30em;
|
|
}
|
|
|
|
}
|
|
|
|
&.success header { background-color: #38b00010; }
|
|
&.error header { background-color: #d9042910; }
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
fieldset {
|
|
border: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
margin: 0.5em;
|
|
padding: 0;
|
|
width: calc(100% - 1em);
|
|
}
|
|
}
|
|
|
|
label {
|
|
margin: 0.5em;
|
|
display: flex;
|
|
|
|
input, textarea, select { flex-grow: 1; }
|
|
}
|
|
|
|
.invalid-message {
|
|
display: flex;
|
|
margin: 0.5em;
|
|
color: #d90429;
|
|
font-style: italic;
|
|
justify-content: center;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0.5em;
|
|
|
|
button svg {
|
|
position: relative;
|
|
margin: 0 0.125em;
|
|
top: 0.125em;
|
|
}
|
|
}
|
|
|
|
&.success button {
|
|
color: #38b000;
|
|
background-color: #38b00010;
|
|
border-color: #38b000;
|
|
}
|
|
|
|
&.error button {
|
|
color: #d90429;
|
|
background-color: #d9042910;
|
|
border-color: #d90429;
|
|
}
|
|
}
|
|
|
|
.successes, .errors { margin: 0.5em auto; }
|
|
|
|
.successes { color: #38b000; }
|
|
.errors { color: #d90429; }
|
|
|
|
@include forSize(mobile) {
|
|
#header-splash {
|
|
width: 100%;
|
|
}
|
|
|
|
#event-proposal {
|
|
padding: 0 1em;
|
|
width: 100%;
|
|
|
|
label {
|
|
flex-wrap: wrap;
|
|
|
|
span { width: 100%; }
|
|
input, select, textarea {
|
|
margin: 0.125em 1em;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include forSize(notMobile) {
|
|
#header-splash {
|
|
object-fit: cover;
|
|
object-position: center 56%;
|
|
width: 100%;
|
|
height: 20em;
|
|
}
|
|
|
|
#event-proposal {
|
|
border: solid thin #bbb;
|
|
border-radius: 0.25em;
|
|
box-shadow: 0.25em 0.25em 0.75em #aaa;
|
|
margin: 2em auto;
|
|
width: 30em;
|
|
|
|
label span { width: 9em; }
|
|
}
|
|
|
|
.successes, .errors { width: 26em; }
|
|
}
|