src/less/styles.less
.pignose-calendar-wrapper {
display: none;
position: fixed;
width: 80%;
max-width: 360px;
top: 50%;
left: 50%;
border-radius: 2px;
z-index: 50001;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 1);
transform: translate3d(0, 160px, 0);
opacity: 0;
transition: opacity .3s ease, transform .5s ease-out;
&.pignose-calendar-wrapper-active {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.pignose-calendar {
max-width: auto;
width: 100%;
border: none;
.pignose-calendar-button-group {
border-top: 1px solid #e2e2e2;
overflow: hidden;
.pignose-calendar-button {
width: 50%;
display: block;
float: left;
height: 3.2em;
text-align: center;
line-height: 3.2em;
color: #333333;
font-weight: 600;
text-decoration: none;
transition: background-color .3s ease;
box-sizing: border-box;
&:hover {
background-color: @color-semilight;
}
}
.pignose-calendar-button-apply {
color: @color-white;
background-color: @color-theme-default-primary;
&:hover {
background-color: lighten(@color-theme-default-primary, 10%);
}
}
}
}
}
.pignose-calendar-wrapper-overlay {
background-color: #000000;
opacity: 0;
transition: opacity .3s ease;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 50000;
&.pignose-calendar-wrapper-overlay-active {
opacity: .7;
}
}
.pignose-calendar {
width: 80%;
max-width: 360px;
background-color: @color-white;
border: 1px solid @color-gray;
font-size: 100%;
margin: 0 auto;
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
.pignose-calendar-top {
padding: 2.6em 0;
background-color: @color-theme-default-background;
border-bottom: 1px solid #e2e2e2;
box-shadow: 0 3px 8px rgba(0, 0, 0, .125);
position: relative;
overflow: hidden;
.pignose-calendar-top-date {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1.8em 0;
text-align: center;
text-transform: uppercase;
box-sizing: border-box;
}
.pignose-calendar-top-year,
.pignose-calendar-top-month {
display: block;
text-align: center;
}
.pignose-calendar-top-year {
font-size: 115%;
color: rgba(0, 0, 0, .5);
}
.pignose-calendar-top-month {
margin-bottom: .4em;
font-size: 130%;
font-weight: 600;
}
.pignose-calendar-top-nav {
display: inline-block;
width: 1.6em;
height: 1.6em;
position: relative;
z-index: 5;
text-decoration: none;
.pignose-calendar-top-value {
display: inline-block;
color: @color-ash;
font-size: 115%;
font-weight: 600;
vertical-align: middle;
margin-top: -10px;
}
.pignose-calendar-top-icon {
color: @color-charcoal;
font-size: 160%;
}
&.pignose-calendar-top-prev {
float: left;
margin-left: 1.6em;
.pignose-calendar-top-value {
margin-left: .2em;
}
}
&.pignose-calendar-top-next {
float: right;
margin-right: 1.6em;
.pignose-calendar-top-value {
margin-right: .2em;
}
}
}
}
.pignose-calendar-header {
padding: 0 1.2em;
margin-top: 1.2em;
font-weight: 600;
overflow: hidden;
.pignose-calendar-week {
float: left;
width: 14.28%;
height: 2.8em;
text-align: center;
line-height: 2.8em;
box-sizing: border-box;
&.pignose-calendar-week-sun,
&.pignose-calendar-week-sat {
color: @color-red-dark;
}
&:last-child {
width: 14.32%;
}
}
}
.pignose-calendar-body {
padding: 1.2em;
.pignose-calendar-row {
overflow: hidden;
}
}
.pignose-calendar-unit {
float: left;
display: block;
height: 3.8em;
width: 14.28%;
text-align: center;
line-height: 2.8em;
box-sizing: border-box;
&:last-child {
width: 14.32%;
}
.pignose-calendar-button-schedule-container {
line-height: .5em;
.pignose-calendar-button-schedule-pin {
display: inline-block;
background-color: @color-ash;
width: .5em;
height: .5em;
border-radius: 50%;
margin-right: .2em;
&:last-child {
margin-right: 0;
}
}
}
a {
display: inline-block;
width: 2.4em;
height: 2.4em;
border-radius: 50%;
color: lighten(@color-theme-default-primary, 10%);
line-height: 2.4em;
text-align: center;
text-decoration: none;
transition: background-color .3s ease, color .3s ease;
&:active {
background-color: @color-gray;
}
}
&.pignose-calendar-unit-disabled a {
opacity: .5;
background-color: @color-semilight;
}
&.pignose-calendar-unit-active {
a {
background-color: @color-theme-default-primary;
color: @color-white;
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
&.pignose-calendar-unit-sun a,
&.pignose-calendar-unit-sat a {
color: @color-white;
}
}
&.pignose-calendar-unit-range {
a {
background-color: @color-semilight;
border-radius: 0;
width: 100%;
}
&.pignose-calendar-unit-disabled a {
color: #b2b9bb;
background-color: #e1e1e1;
}
&.pignose-calendar-unit-range-first a {
border-top-left-radius: 1.2em;
border-bottom-left-radius: 1.2em;
}
&.pignose-calendar-unit-range-last a {
border-top-right-radius: 1.2em;
border-bottom-right-radius: 1.2em;
}
}
&.pignose-calendar-unit-sun a,
&.pignose-calendar-unit-sat a {
color: @color-red-dark;
}
}
}