|
@import url(https://fonts.googleapis.com/css?family=Lato:900,300); |
|
@import url(http://weloveiconfonts.com/api/?family=fontawesome); |
|
|
|
$lato: 'Lato', sans-serif; |
|
|
|
$bp-small: 400px; |
|
|
|
$bg-body: #24A0AD; |
|
$bg-date-active: darken($bg-body, 10%); |
|
$bg-date-border: #ededed; |
|
$bg-date-hover: #eeeeee; |
|
$bg-date-selected: $bg-body; |
|
$bg-date-text: white; |
|
$bg-input: #ffffff; |
|
|
|
$color-date-lite: #ccc; |
|
$color-input: darken($bg-body, 25%); |
|
$color-text: #ffffff; |
|
|
|
$margin-element: 12px; |
|
$margin-form: 36px; |
|
|
|
@mixin pos($position: absolute) { |
|
position: $position; |
|
top: 0; right: 0; bottom: 0; left: 0; |
|
margin: auto; |
|
} |
|
|
|
@mixin placeholder { |
|
&::-webkit-input-placeholder {@content} |
|
&:-moz-placeholder {@content} |
|
&::-moz-placeholder {@content} |
|
&:-ms-input-placeholder {@content} |
|
} |
|
|
|
* { |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
font-family: $lato; |
|
line-height: 1.2; |
|
background-color: $bg-body; |
|
} |
|
|
|
h1 { |
|
font-size: 40px; |
|
font-weight: 900; |
|
color: $color-text; |
|
margin-bottom: $margin-element; |
|
} |
|
|
|
h2 { |
|
font-size: 22px; |
|
color: $color-text; |
|
margin-bottom: $margin-element; |
|
} |
|
|
|
main { |
|
@include pos; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
padding: 24px; |
|
width: 100%; |
|
height: 100%; |
|
max-width: 600px; |
|
} |
|
|
|
#flight-datepicker { |
|
@media screen and (min-width: $bp-small) { |
|
display: flex; |
|
} |
|
margin-top: $margin-form; |
|
.form-item { |
|
position: relative; |
|
margin: 12px 0 60px; |
|
@media screen and (min-width: $bp-small) { |
|
margin: 12px 24px 0 0; |
|
} |
|
} |
|
label { |
|
display: block; |
|
margin-bottom: 8px; |
|
color: $bg-date-text; |
|
} |
|
input { |
|
display: block; |
|
margin-bottom: 8px; |
|
padding-bottom: 6px; |
|
width: 100%; |
|
font-family: $lato; |
|
font-size: 22px; |
|
font-weight: bold; |
|
text-align: left; |
|
color: $color-input; |
|
background-color: transparent; |
|
border: none; |
|
border-bottom: 2px solid $bg-input; |
|
border-radius: 0; |
|
outline: none; |
|
transition: border-color .2s ease-out; |
|
&:first-child, |
|
&:last-child { |
|
border-radius: 0; |
|
} |
|
@include placeholder { |
|
color: $color-input; |
|
font-size: 14px; |
|
line-height: 30px; |
|
transition: color .2s .2s ease-out; |
|
} |
|
&:focus { |
|
border-bottom-color: darken($bg-body, 20%); |
|
@include placeholder { |
|
color: transparent; |
|
transition: color .2s ease-out; |
|
} |
|
} |
|
} |
|
.date-text { |
|
@include pos; |
|
top: calc(100% + 6px); |
|
font-size: 12px; |
|
color: $bg-date-text; |
|
@media screen and (min-width: $bp-small) { |
|
top: 100%; |
|
} |
|
} |
|
} |
|
|
|
.datepicker.dropdown-menu { |
|
padding: 0; |
|
background-clip: border-box; |
|
border: none; |
|
border-radius: 0; |
|
animation: popup .2s ease-out forwards; |
|
table { |
|
background-color: darken($bg-body, 10%); |
|
thead { |
|
background-color: darken($bg-body, 10%); |
|
tr { |
|
border-top: 0; |
|
} |
|
} |
|
tbody { |
|
background-color: white; |
|
} |
|
tr { |
|
border-top: 1px solid $bg-date-border; |
|
td, th { |
|
width: auto; |
|
height: 24px; |
|
padding: 8px; |
|
font-size: 16px; |
|
border-radius: 0; |
|
transition: background-color .6s ease-out; |
|
@media screen and (min-width: $bp-small) { |
|
padding: 12px; |
|
} |
|
&:hover, |
|
&.active:hover, |
|
&:active:hover { |
|
border-color: $bg-date-border; |
|
border-radius: 0; |
|
transition: background-color .2s ease-out; |
|
} |
|
&.focused, |
|
&.selected { |
|
background-color: $bg-date-selected; |
|
border-color: $bg-date-border; |
|
border-radius: 0; |
|
} |
|
&.active, |
|
&.active:focus, |
|
&.active.active:hover, |
|
&:active:focus, |
|
&.highlighted { |
|
background-color: $bg-date-active; |
|
border-color: $bg-date-border; |
|
} |
|
} |
|
th.datepicker-switch { |
|
font-size: 12px; |
|
font-weight: bold; |
|
line-height: 2; |
|
text-transform: uppercase; |
|
letter-spacing: .05em; |
|
color: $color-text; |
|
background-color: inherit; |
|
border-radius: 0; |
|
} |
|
th.prev, |
|
th.next { |
|
color: $color-text; |
|
background-color: darken($bg-body, 15%); |
|
border-radius: 0; |
|
} |
|
th.dow { |
|
padding: 2px 12px; |
|
font-size: 12px; |
|
line-height: 2; |
|
color: $color-text; |
|
background-color: darken($bg-body, 12%); |
|
border-top: 1px solid darken($bg-body, 13%); |
|
border-radius: 0; |
|
} |
|
td.day { |
|
width: 24px; |
|
border-right: 1px solid #ededed; |
|
&:last-child { |
|
border-right-width: 0; |
|
} |
|
} |
|
td.range { |
|
background-color: $bg-date-hover; |
|
} |
|
} |
|
} |
|
.new, |
|
.old, |
|
.disabled, |
|
.disabled:hover { |
|
color: $color-date-lite; |
|
} |
|
} |
|
|
|
[class*="fontawesome-"] { |
|
&:before { |
|
font-family: 'FontAwesome', sans-serif; |
|
} |
|
} |
|
|
|
.fontawesome-calendar { |
|
position: absolute; |
|
top: 26px; |
|
right: 0; |
|
font-size: 24px; |
|
z-index: -99; |
|
} |
|
|
|
@keyframes popup { |
|
from { |
|
opacity: 0; |
|
transform: translateY(12px); |
|
} |
|
to { |
|
opacity: 1; |
|
transform: translateY(0); |
|
} |
|
} |