You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
311 lines
7.7 KiB
CSS
311 lines
7.7 KiB
CSS
2 years ago
|
html, body, div, input, span, a, select, textarea, option, h1, h2, h3, h4, main, aside, article, section, header, p, footer, nav, pre {
|
||
|
box-sizing: border-box;
|
||
|
font-family: Tahoma, Geneva, sans-serif;
|
||
|
}
|
||
|
html {
|
||
|
background: #f8f9f9 linear-gradient(0deg, #f8f9f9 0%, #f8f9f9 80%, #51b47c 80%, #51b47c 100%) no-repeat;
|
||
|
padding: 30px;
|
||
|
height: 100%;
|
||
|
}
|
||
|
input,textarea,select {
|
||
|
outline: 0;
|
||
|
}
|
||
|
h1 {
|
||
|
margin: 0;
|
||
|
padding: 35px 25px 25px 25px;
|
||
|
font-size: 20px;
|
||
|
color: #6a737f;
|
||
|
font-weight: 600;
|
||
|
}
|
||
|
h1 i {
|
||
|
padding-right: 10px;
|
||
|
font-size: 24px;
|
||
|
}
|
||
|
.installer-form {
|
||
|
background-color: #fff;
|
||
|
width: 500px;
|
||
|
margin: 0 auto;
|
||
|
box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2);
|
||
|
}
|
||
|
.installer-form .fields {
|
||
|
position: relative;
|
||
|
padding: 20px;
|
||
|
}
|
||
|
.installer-form select {
|
||
|
appearance: none;
|
||
|
background-image: linear-gradient(45deg, transparent 50%, #c7c9cb 50%), linear-gradient(135deg, #c7c9cb 50%, transparent 50%), linear-gradient(to right, #dfe0e0, #dfe0e0);
|
||
|
background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px, calc(100% - 40px) 10px;
|
||
|
background-size: 5px 5px, 5px 5px, 1px 25px;
|
||
|
background-repeat: no-repeat;
|
||
|
}
|
||
|
.installer-form select option:first-child {
|
||
|
display: none;
|
||
|
}
|
||
|
.installer-form input[type="date"]::-webkit-calendar-picker-indicator {
|
||
|
color: #ddd;
|
||
|
filter: invert(0.8);
|
||
|
}
|
||
|
.installer-form input[type="text"],
|
||
|
.installer-form input[type="password"],
|
||
|
.installer-form input[type="email"],
|
||
|
.installer-form input[type="date"],
|
||
|
.installer-form input[type="tel"],
|
||
|
.installer-form select {
|
||
|
display: flex;
|
||
|
margin-top: 10px;
|
||
|
padding: 15px;
|
||
|
border: 1px solid #dfe0e0;
|
||
|
width: 100%;
|
||
|
flex-basis: 100%;
|
||
|
height: 47px;
|
||
|
}
|
||
|
.installer-form input[type="text"]:focus,
|
||
|
.installer-form input[type="email"]:focus,
|
||
|
.installer-form input[type="tel"]:focus,
|
||
|
.installer-form input[type="date"]:focus,
|
||
|
.installer-form select:focus {
|
||
|
border: 1px solid #c6c7c7;
|
||
|
}
|
||
|
.installer-form input[type="text"]::placeholder,
|
||
|
.installer-form input[type="email"]::placeholder,
|
||
|
.installer-form input[type="tel"]::placeholder,
|
||
|
.installer-form input[type="date"]:invalid,
|
||
|
.installer-form textarea::placeholder,
|
||
|
.installer-form select:invalid {
|
||
|
color: #858688;
|
||
|
}
|
||
|
.installer-form textarea {
|
||
|
resize: none;
|
||
|
margin-top: 15px;
|
||
|
padding: 15px;
|
||
|
border: 1px solid #dfe0e0;
|
||
|
width: 100%;
|
||
|
height: 150px;
|
||
|
}
|
||
|
.installer-form textarea:focus {
|
||
|
border: 1px solid #c6c7c7;
|
||
|
}
|
||
|
.installer-form .buttons {
|
||
|
padding: 20px;
|
||
|
border-top: 1px solid #eceff2;
|
||
|
}
|
||
|
.installer-form .btn {
|
||
|
display: inline-block;
|
||
|
padding: 10px 20px;
|
||
|
border: 0;
|
||
|
background-color: #c9704c;
|
||
|
font-weight: bold;
|
||
|
color: #fff;
|
||
|
cursor: pointer;
|
||
|
border-radius: 25px;
|
||
|
margin-right: 5px;
|
||
|
text-decoration: none;
|
||
|
font-size: 14px;
|
||
|
}
|
||
|
.installer-form .btn:hover {
|
||
|
background-color: #c26c4a;
|
||
|
}
|
||
|
.installer-form .btn.alt {
|
||
|
background-color: transparent;
|
||
|
border: 1px solid #c9704c;
|
||
|
color: #c9704c;
|
||
|
}
|
||
|
.installer-form .btn.alt:hover {
|
||
|
border: 1px solid #c26c4a;
|
||
|
color: #c26c4a;
|
||
|
}
|
||
|
.installer-form input[name="email"] {
|
||
|
position: relative;
|
||
|
display: block;
|
||
|
}
|
||
|
.installer-form .field {
|
||
|
display: inline-flex;
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
padding-bottom: 20px;
|
||
|
}
|
||
|
.installer-form label, .installer-form p {
|
||
|
font-size: 14px;
|
||
|
font-weight: 600;
|
||
|
color: #8e939b;
|
||
|
}
|
||
|
.installer-form .field i {
|
||
|
position: absolute;
|
||
|
color: #dfe2e5;
|
||
|
top: 25px;
|
||
|
left: 15px;
|
||
|
z-index: 10;
|
||
|
}
|
||
|
.installer-form .field i ~ input {
|
||
|
padding-left: 45px !important;
|
||
|
}
|
||
|
.installer-form .responses {
|
||
|
padding: 15px;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.installer-form .fields .wrapper {
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
}
|
||
|
.installer-form .fields .wrapper > div {
|
||
|
width: 100%;
|
||
|
}
|
||
|
.installer-form .fields .wrapper .gap {
|
||
|
width: 35px;
|
||
|
}
|
||
|
.installer-form .steps {
|
||
|
position: relative;
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
margin-top: 10px;
|
||
|
width: calc(100% - 35px);
|
||
|
align-self: center;
|
||
|
margin: 0 auto;
|
||
|
}
|
||
|
.installer-form .steps::before {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 4px;
|
||
|
background-color: #f2f4f7;
|
||
|
margin: auto 0;
|
||
|
top: 0;
|
||
|
bottom: 0;
|
||
|
z-index: 0;
|
||
|
}
|
||
|
.installer-form .steps .step {
|
||
|
width: 25px;
|
||
|
height: 25px;
|
||
|
background-color: #f2f4f7;
|
||
|
border: 3px solid #f2f4f7;
|
||
|
border-radius: 50px;
|
||
|
|
||
|
z-index: 1;
|
||
|
}
|
||
|
.installer-form .steps .step.current {
|
||
|
background-color: #8cc6f2;
|
||
|
}
|
||
|
.installer-form .steps .step.complete {
|
||
|
background-color: #6ECBA4;
|
||
|
}
|
||
|
.installer-form .rating {
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
padding: 5px 0;
|
||
|
}
|
||
|
.installer-form .rating input[type="radio"]:checked,
|
||
|
.installer-form .rating input[type="radio"]:not(:checked) {
|
||
|
position: absolute;
|
||
|
left: -9999px;
|
||
|
}
|
||
|
.installer-form .rating input[type="radio"]:checked + label,
|
||
|
.installer-form .rating input[type="radio"]:not(:checked) + label
|
||
|
{
|
||
|
display: flex;
|
||
|
position: relative;
|
||
|
font-size: 14px;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
width: 31px;
|
||
|
height: 31px;
|
||
|
cursor: pointer;
|
||
|
color: #8e939b;
|
||
|
z-index: 10;
|
||
|
}
|
||
|
.installer-form .rating input[type="radio"]:checked + label:before,
|
||
|
.installer-form .rating input[type="radio"]:not(:checked) + label:before {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
width: 30px;
|
||
|
height: 30px;
|
||
|
border: 1px solid #dfe0e0;
|
||
|
border-radius: 100%;
|
||
|
background: #fff;
|
||
|
z-index: -1;
|
||
|
}
|
||
|
.installer-form .rating input[type="radio"]:checked + label:after,
|
||
|
.installer-form .rating input[type="radio"]:not(:checked) + label:after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 31px;
|
||
|
height: 31px;
|
||
|
border-radius: 100%;
|
||
|
background: #c9704c;
|
||
|
z-index: -1;
|
||
|
}
|
||
|
.installer-form .rating input[type="radio"]:not(:checked) + label:after {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
.installer-form .rating input[type="radio"]:checked + label {
|
||
|
color: #fff;
|
||
|
}
|
||
|
.installer-form .rating input[type="radio"]:checked + label:after {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
.installer-form .rating-footer {
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
font-size: 14px;
|
||
|
color: #8e939b;
|
||
|
padding: 15px 0 25px;
|
||
|
}
|
||
|
.installer-form .group {
|
||
|
display: flex;
|
||
|
flex-flow: column;
|
||
|
justify-content: center;
|
||
|
padding-bottom: 15px;
|
||
|
}
|
||
|
.installer-form .group label {
|
||
|
display: flex;
|
||
|
font-weight: 500;
|
||
|
height: 25px;
|
||
|
align-items: center;
|
||
|
padding-bottom: 5px;
|
||
|
}
|
||
|
.installer-form .group input[type="radio"],
|
||
|
.installer-form .group input[type="checkbox"] {
|
||
|
appearance: none;
|
||
|
display: inline-flex;
|
||
|
cursor: pointer;
|
||
|
width: 16px;
|
||
|
height: 16px;
|
||
|
padding: 2px;
|
||
|
background-clip: content-box;
|
||
|
border: 1px solid #dfe0e0;
|
||
|
background-color: #eef1f1;
|
||
|
border-radius: 50%;
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
.installer-form .group input[type="radio"]:hover,
|
||
|
.installer-form .group input[type="checkbox"]:hover {
|
||
|
border: 1px solid #d2d3d3;
|
||
|
}
|
||
|
.installer-form .group input[type="radio"]:checked,
|
||
|
.installer-form .group input[type="checkbox"]:checked {
|
||
|
border: 1px solid #d2d3d3;
|
||
|
background-color: #2996ed;
|
||
|
}
|
||
|
.installer-form .group input[type="checkbox"] {
|
||
|
border-radius: 0;
|
||
|
}
|
||
|
.installer-form .step-content {
|
||
|
display: none;
|
||
|
}
|
||
|
.installer-form .step-content.current {
|
||
|
display: block;
|
||
|
}
|
||
|
.installer-form .result {
|
||
|
padding: 25px;
|
||
|
}
|
||
|
.installer-form .result h3 {
|
||
|
color: #6a737f;
|
||
|
}
|
||
|
.installer-form .result p {
|
||
|
font-weight: 500;
|
||
|
}
|