Created
August 20, 2018 07:39
-
-
Save ponnex/1a6bfeb00b6ecc0bd2b2bb9a30960403 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import '../atoms/mixins/_icon'; | |
/* Stylish left and right navigator */ | |
.months-text .left { | |
@include render-icon('icon-chevron-left'); | |
background-repeat: no-repeat; | |
background-position: 0% 50%; | |
height: 25px; | |
} | |
.months-text .right { | |
@include render-icon('icon-chevron-right'); | |
background-repeat: no-repeat; | |
background-position: 100% 50%; | |
height: 25px; | |
} | |
i.left:after, i.right:after { | |
height: 55px; | |
width: 55px; | |
border-radius: 50%; | |
content: ' '; | |
background-color: #2275D3; | |
display: flex; | |
position: relative; | |
z-index: -1; | |
} | |
i.left:after { | |
left: -30px; | |
top: -15px; | |
} | |
i.right:after { | |
left: -5px; | |
top: -15px; | |
} /* Stylish nav */ | |
.calendar { | |
overflow: hidden; | |
background-color: #fff; | |
} | |
.booking_widget .calendar { | |
width: 202.6%; | |
left: calc(0px - 102.9%); | |
display: flex; | |
height: 500px; | |
box-shadow: 0px 0px 6px 0px #ccc; | |
} | |
.calendar-wrap { | |
display: flex; | |
float: none; | |
width: 100%; | |
height: 100%; | |
} | |
.calendar_month_left, .calendar_month_right { | |
float: none; | |
display: flex; | |
width: 100%; | |
position: relative; | |
flex-wrap: wrap; | |
padding: 15px 30px; | |
border-bottom: 1px solid #E5E9F0; | |
margin-left: 0; | |
margin-right: 0; | |
} | |
.months-text {display: flex;/* flex-direction: unset; */width: 100%;flex: 7 100%;justify-content: center;} | |
ul.calendar_weeks { | |
flex: 7 100%; | |
} | |
ul.calendar_days:not(.calendar_days > .calendar_days) { | |
flex: 1 20%; | |
} | |
ul.calendar_days > * { | |
display: flex; | |
} | |
.calendar_days li { | |
padding: 5px; | |
margin: 0; | |
line-height: 1; | |
width: 100%; | |
display: flex; | |
width: 45px; | |
height: 45px; | |
font-size: 0.9375rem; | |
} | |
.calendar ul.calendar_days { | |
display: flex; | |
flex-wrap: wrap; | |
flex: 1 100%; | |
flex-direction: row; | |
} | |
li.calendar_days_in-range:last-child { | |
border-radius: 0 2px 2px 0; | |
} | |
li.calendar_days_in-range:first-child { | |
border-radius: 2px 0 0 2px; | |
} | |
.months-text .left { | |
position: absolute; | |
left: -5px; | |
} | |
.months-text .right { | |
position: absolute; | |
right: -5px; | |
} | |
.calendar__days_wrapper { | |
display: flex; | |
flex-direction: column; | |
} | |
.calendar ul.calendar_days li { | |
flex: 1 14%; | |
display: flex; | |
flex-direction: row; | |
border: 1px solid transparent; | |
} | |
.calendar_month_left { | |
border-right: 1px solid #E5E9F0; | |
} | |
li.calendar_days--disabled.calendar_days--invalid { | |
background: none; | |
color: #D1D1D1; | |
} | |
ul.calendar_days li:hover { | |
border: 1px solid #2275D3; | |
border-radius: 2px; | |
background: white; | |
} | |
li.calendar_days_selected { | |
color: #fff; | |
background: #2275D3; | |
border-radius: 2px; | |
box-shadow: 0 1px 6px #CCC; | |
} | |
li.calendar_days_in-range { | |
background: #E5E9F0; | |
color: black; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment