app/assets/stylesheets/components/_calendar.sass
//-----------//
// CALENDARS //
//-----------//
table.calendar
display: table
width: 100%
table-layout: fixed
margin-bottom: 20px
th, td
border: 1px solid $darkgrey
text-align: center
padding: 0.35em 0.5em
th
padding: 0.5em
thead
tr
> th
border: none
&:first-child
text-transform: uppercase
tbody
tr > td
&.weekNumber
border: none
padding: 0.5em 0.5em 0.5em 0
&.outsideMonth
color: rgba($darkgrey, 0.35)
&.weekend
font-weight: bold
&.selected_period, &.selected_date, &.overlaped_date
> a
display: block
margin: 0 auto
width: 24px
height: 24px
line-height: 24px
color: $darkgrey
background-color: rgba($gold, 0.75)
border-radius: 50%
&:hover, &:focus
color: $darkgrey
text-decoration: none
.col-xs-6
&:nth-child(2n +1)
clear: both
.col-sm-4
@media (min-width: 768px)
&:nth-child(2n +1)
clear: none
&:nth-child(3n+1)
clear: both
// .col-md-4
// @media (min-width: 992px)
.col-lg-3
@media (min-width: 1200px)
&:nth-child(2n +1), &:nth-child(3n+1)
clear: none
&:nth-child(4n+1)
clear: both