first commit
This commit is contained in:
592
public/bib/css/style.css
vendored
Normal file
592
public/bib/css/style.css
vendored
Normal file
@ -0,0 +1,592 @@
|
||||
@font-face {
|
||||
font-family: muli-bold;
|
||||
src: url(../fonts/muli/Muli-Bold.ttf)
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: poppins-regular;
|
||||
src: url(../fonts/poppins/Poppins-Regular.ttf)
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: poppins-semibold;
|
||||
src: url(../fonts/poppins/Poppins-SemiBold.ttf)
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: poppins-regular;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: none
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family: poppins-regular;
|
||||
font-size: 15px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
ul {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none
|
||||
}
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
border: none
|
||||
}
|
||||
|
||||
select option[value=""][disabled] {
|
||||
display: none
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(../images/form-wizard-bg.png);
|
||||
background-size: cover;
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1400px;
|
||||
height: 100vh;
|
||||
margin: auto;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.wizard>.steps .current-info,
|
||||
.wizard>.steps .number {
|
||||
display: none
|
||||
}
|
||||
|
||||
.image-holder {
|
||||
width: 41.07%;
|
||||
align-self: flex-end
|
||||
}
|
||||
|
||||
form {
|
||||
width: 58.93%;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
align-self: center
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.form-header a {
|
||||
font-family: poppins-regular;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
border-radius: 5px;
|
||||
background: #e4bd37
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: poppins-semibold;
|
||||
font-size: 22px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 46px;
|
||||
letter-spacing: 3px;
|
||||
margin-top: 19px
|
||||
}
|
||||
|
||||
#wizard {
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px;
|
||||
padding: 47px 57px 50px 50px;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, .1)
|
||||
}
|
||||
|
||||
.wizard>.steps ul {
|
||||
content: "";
|
||||
width: 60%;
|
||||
height: 12px;
|
||||
background: rgba(255, 255, 255, .3);
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -69px;
|
||||
transform: translateX(-50%)
|
||||
}
|
||||
|
||||
.wizard>.steps ul:before {
|
||||
content: '\f26b';
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
font-family: Material-Design-Iconic-Font;
|
||||
bottom: 20px;
|
||||
left: 29.4%;
|
||||
transition: all .5s ease
|
||||
}
|
||||
|
||||
.wizard>.steps ul:after {
|
||||
content: "";
|
||||
width: 33.33%;
|
||||
height: 12px;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all .5s ease
|
||||
}
|
||||
|
||||
.wizard>.steps ul.step-2:before {
|
||||
left: 62.5%;
|
||||
transition: all .5s ease
|
||||
}
|
||||
|
||||
.wizard>.steps ul.step-2:after {
|
||||
width: 66.67%;
|
||||
transition: all .5s ease
|
||||
}
|
||||
|
||||
.wizard>.steps ul.step-3:before {
|
||||
left: 96%;
|
||||
transition: all .5s ease
|
||||
}
|
||||
|
||||
.wizard>.steps ul.step-3:after {
|
||||
width: 100%;
|
||||
transition: all .5s ease
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
margin-bottom: 29px;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.form-row:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.form-row label {
|
||||
width: 34.9%;
|
||||
margin-right: 40px
|
||||
}
|
||||
|
||||
.form-row .form-holder {
|
||||
width: 65.1%
|
||||
}
|
||||
|
||||
.form-holder {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.form-holder i {
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
right: 20px;
|
||||
font-size: 25px
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 41px;
|
||||
border: 1px solid rgba(255, 255, 255, .4);
|
||||
background: 0 0;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
padding: 0 18px;
|
||||
background: rgba(255, 255, 255, .2)
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: 0 0 7px 0 rgba(255, 255, 255, .7);
|
||||
border: 1px solid #ceebf7
|
||||
}
|
||||
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.form-control::-moz-placeholder {
|
||||
color: #fff;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.form-control:-ms-input-placeholder {
|
||||
color: #fff;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.form-control:-moz-placeholder {
|
||||
color: #fff;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.option {
|
||||
color: #999
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
padding: 8px 0;
|
||||
background: url(../images/textarea-bg.html) no-repeat right bottom 3px
|
||||
}
|
||||
|
||||
.actions ul {
|
||||
display: flex;
|
||||
margin-top: 39px;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.actions li a {
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
height: 54px;
|
||||
width: 180px;
|
||||
letter-spacing: 1.3px;
|
||||
align-items: center;
|
||||
background: #e4bd37;
|
||||
font-family: muli-bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 34px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
border-radius: 27px;
|
||||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
-webkit-transition-duration: .3s;
|
||||
transition-duration: .3s
|
||||
}
|
||||
|
||||
.actions li a:before {
|
||||
content: '\f2ee';
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 34px;
|
||||
font-family: Material-Design-Iconic-Font;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0)
|
||||
}
|
||||
|
||||
.actions li a:hover {
|
||||
background: #c9a630
|
||||
}
|
||||
|
||||
.actions li a:hover:before {
|
||||
-webkit-animation-name: hvr-icon-wobble-horizontal;
|
||||
animation-name: hvr-icon-wobble-horizontal;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1
|
||||
}
|
||||
|
||||
.actions li[aria-disabled=true] a {
|
||||
opacity: 0;
|
||||
transition: all .3s
|
||||
}
|
||||
|
||||
.actions li:first-child a {
|
||||
width: 136px;
|
||||
background: #fff;
|
||||
color: #666;
|
||||
font-family: muli-bold;
|
||||
padding-left: 57px
|
||||
}
|
||||
|
||||
.actions li:first-child a:before {
|
||||
content: '\f2ea';
|
||||
left: 32px;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.actions li:first-child a:hover {
|
||||
background: #e5e5e5
|
||||
}
|
||||
|
||||
.actions li:last-child a {
|
||||
width: 154px
|
||||
}
|
||||
|
||||
@-webkit-keyframes hvr-icon-wobble-horizontal {
|
||||
16.65% {
|
||||
-webkit-transform: translateX(6px);
|
||||
transform: translateX(6px)
|
||||
}
|
||||
|
||||
33.3% {
|
||||
-webkit-transform: translateX(-5px);
|
||||
transform: translateX(-5px)
|
||||
}
|
||||
|
||||
49.95% {
|
||||
-webkit-transform: translateX(4px);
|
||||
transform: translateX(4px)
|
||||
}
|
||||
|
||||
66.6% {
|
||||
-webkit-transform: translateX(-2px);
|
||||
transform: translateX(-2px)
|
||||
}
|
||||
|
||||
83.25% {
|
||||
-webkit-transform: translateX(1px);
|
||||
transform: translateX(1px)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hvr-icon-wobble-horizontal {
|
||||
16.65% {
|
||||
-webkit-transform: translateX(6px);
|
||||
transform: translateX(6px)
|
||||
}
|
||||
|
||||
33.3% {
|
||||
-webkit-transform: translateX(-5px);
|
||||
transform: translateX(-5px)
|
||||
}
|
||||
|
||||
49.95% {
|
||||
-webkit-transform: translateX(4px);
|
||||
transform: translateX(4px)
|
||||
}
|
||||
|
||||
66.6% {
|
||||
-webkit-transform: translateX(-2px);
|
||||
transform: translateX(-2px)
|
||||
}
|
||||
|
||||
83.25% {
|
||||
-webkit-transform: translateX(1px);
|
||||
transform: translateX(1px)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-circle {
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.checkbox-circle label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-left: 23px;
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
width: auto
|
||||
}
|
||||
|
||||
.checkbox-circle input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.checkbox-circle input:checked~.checkmark:after {
|
||||
display: block
|
||||
}
|
||||
|
||||
.checkbox-circle .checkmark {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, .4)
|
||||
}
|
||||
|
||||
.checkbox-circle .checkmark:after {
|
||||
content: "";
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
display: none
|
||||
}
|
||||
|
||||
@media(max-width:1500px) {
|
||||
form {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 97px;
|
||||
align-self: flex-start
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: auto
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:1199px) {
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
width: auto
|
||||
}
|
||||
|
||||
.image-holder {
|
||||
align-self: center
|
||||
}
|
||||
|
||||
.image-holder img {
|
||||
transform: translateY(40px)
|
||||
}
|
||||
|
||||
form {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
align-self: center
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:991px) {
|
||||
.wrapper {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.image-holder {
|
||||
display: none
|
||||
}
|
||||
|
||||
form {
|
||||
width: auto
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:767px) {
|
||||
body {
|
||||
height: auto
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: auto;
|
||||
padding: 30px 20px
|
||||
}
|
||||
|
||||
#wizard {
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
form,
|
||||
#wizard {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 30px
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: block
|
||||
}
|
||||
|
||||
.form-row label {
|
||||
margin-bottom: 29px;
|
||||
display: block
|
||||
}
|
||||
|
||||
.form-row label,
|
||||
.form-row .form-holder {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.checkbox-circle {
|
||||
display: block
|
||||
}
|
||||
|
||||
.wizard>.steps {
|
||||
order: 3;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.wizard>.steps ul {
|
||||
position: static;
|
||||
transform: translateX(0);
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.actions ul {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.actions li a {
|
||||
height: 44px
|
||||
}
|
||||
|
||||
.actions li a:before {
|
||||
top: 13px
|
||||
}
|
||||
|
||||
.actions li:first-child a {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user