Philipp Lang 4 years ago
parent
commit
abb3b46d57
  1. 14
      assets/css/app.css

14
assets/css/app.css

@ -52,14 +52,17 @@ body {
color: var(--secondary); color: var(--secondary);
text-align: center; text-align: center;
} }
.radio-grid { .radio-grid {
display: grid; display: grid;
grid-gap: 2rem; grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
margin-top: 1rem; margin-top: 1rem;
label { label {
height: 20rem; height: 20rem;
position: relative; position: relative;
input { input {
visibility: hidden; visibility: hidden;
z-index: -99; z-index: -99;
@ -79,12 +82,14 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
span:first-child { span:first-child {
display: flex; display: flex;
flex: 1 0 0; flex: 1 0 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
span:nth-child(2) { span:nth-child(2) {
flex: 0 0 4rem; flex: 0 0 4rem;
background: var(--gray); background: var(--gray);
@ -97,6 +102,7 @@ body {
input:checked + span { input:checked + span {
border-color: var(--secondary); border-color: var(--secondary);
} }
svg { svg {
color: var(--secondary); color: var(--secondary);
fill: currentColor; fill: currentColor;
@ -105,34 +111,41 @@ body {
} }
} }
} }
.form-container { .form-container {
background: var(--container); background: var(--container);
border-radius: 2rem; border-radius: 2rem;
padding: 3rem; padding: 3rem;
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
.separator { .separator {
background: white; background: white;
height: 5px; height: 5px;
} }
.form-grid { .form-grid {
display: grid; display: grid;
grid-gap: 0.5rem; grid-gap: 0.5rem;
grid-template-columns: 2fr 3fr 30px; grid-template-columns: 2fr 3fr 30px;
align-items: center; align-items: center;
input[type="text"], input[type="number"], input[type="tel"] { input[type="text"], input[type="number"], input[type="tel"] {
font-weight: bold; font-weight: bold;
border: var(--primary) 1px solid; border: var(--primary) 1px solid;
text-align: right; text-align: right;
} }
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
.unit { .unit {
text-align: right; text-align: right;
} }
.comment { .comment {
grid-column: 1 / -1; grid-column: 1 / -1;
font-size: 1.5rem; font-size: 1.5rem;
@ -145,6 +158,7 @@ body {
.step { .step {
height: 5px; height: 5px;
position: relative; position: relative;
div { div {
position: absolute; position: absolute;
transition: width 0.5s; transition: width 0.5s;

Loading…
Cancel
Save