durfdoen-2.0/content/stylesheets/quiz.css
2020-09-20 22:58:01 +02:00

106 lines
1.6 KiB
CSS

.main_content {
margin-top: 2rem;
}
.quiz_content {
max-width: 1100px;
margin: 0 auto;
}
.question_wrapper {
padding: 1rem 0 0 2rem;
position: relative;
}
.question_wrapper:before {
content: "";
position: absolute;
top: 2rem;
left: -7px;
background: silver;
height: calc(100% - 2rem);
width: 3px;
}
#postcodeField {
-webkit-appearance: none;
margin: 0;
}
#postcodeField::-webkit-outer-spin-button,
#postcodeField::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
#postcodeField[type="number"] {
-moz-appearance: textfield;
}
#resultWrapper {
padding-top: 2em;
}
fieldset {
max-height: 60vh;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
overflow-y: auto;
margin: auto;
}
#postcodeField {
-webkit-appearance: none;
margin: 0;
}
#postcodeField::-webkit-outer-spin-button,
#postcodeField::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
#postcodeField[type="number"] {
-moz-appearance: textfield;
}
.form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.form__element {
margin: 0.5rem;
display: flex;
align-items: center;
}
.form__element__text {
margin-left: 10px;
}
.form__element__text::first-letter {
text-transform: uppercase;
}
h3::first-letter {
text-transform: uppercase;
}
.buttons {
padding: 2em 10px;
display: flex;
justify-content: space-between;
}
.question__ {
font-size: 2rem;
}
.small {
padding: 1rem 1.5rem !important;
font-size: 1rem !important;
border-width: 4px !important;
}