@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); } }