@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
transition-property: $transition-property;transition-duration: $transition-duration;transition-timing-function: $transition-timing;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-moz-transition-timing-function:$transition-timing;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-webkit-transition-timing-function:$transition-timing;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-o-transition-timing-function:$transition-timing;-ms-transition-property:$transition-property;
-ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing;
}
@mixin box_sizing() {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
/*
* Author: Digital Zoom Studio
* Website: http://digitalzoomstudio.net/
* Portfolio: http://codecanyon.net/user/ZoomIt/portfolio
*
* Version: 3.92
*/
$transition-property: margin-top;
$transition-duration: 0.3s;
$transition-timing: ease-out;
/* --- functional styling */
$mainclass : '.dzscalendar';
#{$mainclass} .events { display:none;
}
#{$mainclass} .calendar-controls{ position:relative;
}
/* --- estethic styling */
#{$mainclass}{
font-family: 'Carrois Gothic', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#{$mainclass} .testimonial span { font-size: 2.5em;
font-family: Courier New, Arial;
font-style: italic; line-height:1.5; color:#555;
}
#{$mainclass} .testimonial .the-author { font-size: 1em;
font-family: Courier New, Arial;
font-style: italic; color:#aaa; margin-top:10px; }
.dzscalendar{
$transition-property: height;
$transition-duration: 0.3s;
$transition-timing: ease-out;
@include box_sizing();
*{
@include box_sizing();
}
position:relative;
width: 100%;
height: 165px;
@include apply_transition($transition-property, $transition-duration, $transition-timing);
.main-mon, .mon-body, .mon-body > .mon-row {
position:relative;
}
.week-day{
padding-top:0; padding-bottom:0; text-align:center; font-size:12px;
width: 14%;
width: calc(100%/7);
position: relative;;
display: inline-block;
vertical-align: top;
.divimage{
position: absolute; top:0; left:0;
width: 100%; height:100%;
background-size: cover;
}
.divimage-overlay{
position: absolute; top:0; left:0;
width: 100%; height:100%;
}
.the-number{
position: relative;
}
.the-event-content{
display: none;
}
}
.week-day.tooltip-is-active{
z-index:55;
}
.mon-row{
> span{
white-space:nowrap;
}
}
.theMonths{
position: relative;
width:100%;
height:151px;
margin-top:0;
> * {
position:absolute; top:0; left:0; width: 100%;
}
}
.main-mon{
.week-day.tag-red{
background-color: red;
color: #fff;
}
.week-day.tag-important{
background-color: #ae1919;
color: #fff;
}
.week-day.tag-blue{
background-color: #2f96b4;
color: #fff;
}
.week-day.tag-imgbg{
background-color: transparent;
background-size: cover;
background-position: center center;
}
}
.mon-row, .headerRow{
white-space: nowrap;
}
.hasEvent, .hasEventForHover{
color:#6fb6ce;
cursor: pointer;
font-weight:bold;
}
.label{
color: #111;
}
}
.dzscalendar.tooltip_transition-slide{
overflow: hidden;
}
.dzscalendar.tooltip_transition-showContent{
$transition-property: all;
$transition-duration: 0.3s;
$transition-timing: ease-out;
.theMonths{
// overflow: visible;
}
.week-day{
.the-event-content{
visibility: hidden;
opacity:0;
display: block;
padding:20px;
background: #fff;
position:absolute;
top: -40px;
left: -40px;
white-space: normal;;
width: calc(100% + 80px);
transform: scale(0.8);
@include apply_transition($transition-property, $transition-duration, $transition-timing);
.divimage{
position:relative;
height: 160px;
}
}
}
.week-day.hasEventForHover:hover{
.the-event-content {
visibility: visible;
opacity: 1;
transform: scale(1);
z-index: 505;
}
}
}
#{$mainclass}.mode-datepicker .main-mon .mon-body .week-day{
cursor: pointer;
}
#{$mainclass} .main-mon .other-months-date{ opacity:0.3; filter: alpha(opacity=30);
}
#{$mainclass} .past-date{ opacity:0.5; filter: alpha(opacity=50);
}
#{$mainclass} .calendar-controls{ min-height:27px; width:100%;
}
#{$mainclass} .calendar-controls .arrow-left{ position:absolute; top:1px; left:10px; background:transparent no-repeat center center url(img/arrowline-left-simple.png); width:15px; height:16px; cursor:pointer;
}
#{$mainclass} .calendar-controls .arrow-right{ position:absolute; top:1px; right:10px; background:transparent no-repeat center center url(img/arrowline-right-simple.png); width:15px; height:16px; cursor:pointer;
}
#{$mainclass} .calendar-controls .curr-date{ text-align:center; padding-top:0px;
}
#{$mainclass} .calendar-controls .curr-month{ margin-right:15px;
}
#{$mainclass} .calendar-controls .curr-year{ color:#aaa;
}
#{$mainclass} .theMonths, #{$mainclass} .calendar-controls { width:100%;
}
.dzscalendar{
.slideDescription{
position:absolute; top:0; left:0; text-align:left; padding:10px;
opacity:0;
visibility: hidden;
$transition-property: opacity,visibility;
$transition-duration: 0.3s;
$transition-timing: ease-out;
@include apply_transition($transition-property, $transition-duration, $transition-timing);
@include box_sizing();
height:100%;
overflow: auto;
}
.slideDescription--inner{
}
}
.dzscalendar.description-opened{
.slideDescription{
opacity: 1;
visibility: visible;
}
.slideDescription--inner {
}
}
#{$mainclass} .slideDescription .desc-close-button{ position:absolute; top:10px; right:5px; text-align:center; padding:1px 7px; border:1px solid white; border-radius:20px;
font-family: arial, serif; cursor:pointer;
}
/*=== the DZS tooltip -->
*/
$sel_tooltip : ".dzstooltip";
.dzscalendar{
.dzstooltip{
position:absolute;
width:250px;
z-index:576;
text-align:left;
white-space: normal;
text-align: center;
.bg-div{
background-position: center center;
background-size: cover;
}
$transition-property: visibility, opacity;
$transition-duration: 0.3s;
$transition-timing: ease-out;
> .tooltip-close{
display: block;
text-align: center;
line-height: 1;
position: absolute;
top: 10px;
right: 10px;
padding: 5px 8px;
text-indent: 1px;
font-family: "Helvetica", Courier, Arial, sans-serif;
font-weight: 300;
border-radius: 50%;
background-color: #efefef;
color: #777;
cursor: pointer;
visibility: hidden;
opacity: 0;
@include apply_transition($transition-property, $transition-duration, $transition-timing);
}
}
.dzstooltip:hover{
> .tooltip-close{
opacity: 1;
visibility: visible;
}
}
.dzstooltip:after{
content: "";
display: block;
clear: both;
}
span.label{
font-weight:bold;
}
> div{
padding-bottom:10px;
}
}
#{$sel_tooltip} > div > h5{
font-size: 20px;
font-weight:normal;
margin-top:7px;
margin-bottom:10px;
}
#{$mainclass} .aux-transition-container{
position: absolute;top:0; left:0;
width: 100%;
height: 100%;
perspective: 1600px;
-webkit-perspective: 1600px;
}
$transition-property: transform;
$transition-duration: 0.8s;
$transition-timing: ease-out;
#{$mainclass} .aux-transition{
position: absolute;top:0; left:0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
@include apply_transition($transition-property, $transition-duration, $transition-timing);
}
#{$mainclass} .aux-transition > *{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#{$mainclass} .aux-transition > .theMonths{
transform-origin: 50% 0 ;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 0 ;
-webkit-transform-style: preserve-3d;
@include apply_transition($transition-property, $transition-duration, $transition-timing);
}
#{$mainclass} .aux-transition > .calendar-controls{
transform: rotateX( -180deg );
transform-origin: 50% 100% ;
transform-style: preserve-3d;
-webkit-transform: rotateX( -180deg );
-webkit-transform-origin: 50% 100% ;
-webkit-transform-style: preserve-3d;
@include apply_transition($transition-property, $transition-duration, $transition-timing);
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
}
#{$mainclass} .aux-transition.dzsflipped > .theMonths{
transform: rotateX( 180deg );
-webkit-transform: rotateX( 180deg );
}
#{$mainclass} .aux-transition.dzsflipped > .calendar-controls{
transform: rotateX( 0deg );
-webkit-transform: rotateX( 0deg );
box-shadow: 0 0 3px 0 rgba(0,0,0,0);
}
#{$mainclass} .aux-transition.backward > .theMonths{
transform: rotateX( 180deg );
-webkit-transform: rotateX( 180deg );
}
#{$mainclass} .aux-transition.backward > .calendar-controls{
transform: rotateX( 0deg );
-webkit-transform: rotateX( 0deg );
}
#{$mainclass} .aux-transition.backward.dzsflipped > .theMonths{
transform: rotateX( 180deg );
-webkit-transform: rotateX( 180deg );
}
#{$mainclass} .aux-transition.backward.dzsflipped > .calendar-controls{
transform: rotateX( -180deg );
-webkit-transform: rotateX( -180deg );
}
.dzscalendar.skin-default{
.mon-row{
.week-day{
font-style:italic;
}
}
}
$mainclass : '.dzscalendar.skin-other';
#{$mainclass} .testimonial span { font-size: 1em;
}
#{$mainclass} .testimonial .the-author { font-size: 1em;
font-family: Courier New, Arial;
font-style: italic; color:#aaa; margin-top:0px; }
.dzscalendar.skin-black{
}
.dzscalendar.skin-black{
height:auto;
.slideDescription{
span.label{
color: #FFFFFF;
font-weight: bold;
}
}
}
$mainclass : '.dzscalendar.skin-black';
#{$mainclass} .testimonial span { font-size: 1em;
}
#{$mainclass} .testimonial .the-author { font-size: 1em;
font-family: Courier New, Arial;
font-style: italic; color:#aaa; margin-top:0px; }
#{$mainclass}{
background:#222;
color:#fff;
padding:7px 3px 12px;
border-radius:5px;
}
#{$mainclass} .calendar-controls .arrow-left{ position:absolute; top:1px; left:10px; background:transparent no-repeat center center url(img/arrowline-left-simple.png); width:15px; height:16px; cursor:pointer;
}
#{$mainclass} .calendar-controls .arrow-right{ position:absolute; top:1px; right:10px; background:transparent no-repeat center center url(img/arrowline-right-simple.png); width:15px; height:16px; cursor:pointer;
}
.dzscalendar.skin-aurora{
width: 100%;
height: 230px;
color: #333;
.calendar-controls{
background: #333;
color: #fff;
padding-top:6px;
.curr-date{
padding-top: 5px;
padding-bottom: 8px;
}
}
.theMonths{
height: auto;
background: #fff;
> *{
position: absolute; top:0; left:0;
}
border-left: 1px solid rgba(0,0,0,0.2);
border-right: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.mon-row,.headerRow{
line-height: 1;
}
.mon-row:first-child{
.week-day{
border-top: 1px solid rgba(0,0,0,0.2);
}
}
.week-day{
background-color: #e5e5e5;
opacity:0.75;
@include box_sizing();
border-right: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,0,0,0.2);
font-size:11px;
text-align:center;
font-family: Arial, sans-serif;
padding: 3px 7px;
line-height: 1.2;
}
.week-day:first-child{
}
.week-day:last-child{
border-right: 0px solid rgba(0,0,0,0.2);
}
.hasEvent, .hasEventForHover{
color: #ae1919;
font-weight: normal;
}
.main-mon {
.today-date{
font-weight: bold;
}
.other-months-date{
opacity:0.3; filter: alpha(opacity=30);
}
.headerRow{
}
.curr-months-date{
position: relative;
}
.past-date{ opacity:0.5; filter: alpha(opacity=50);
}
}
}
$mainclass : '.dzscalendar.skin-aurora';
#{$mainclass} .headerRow .week-day{
background: #f6f6f6;
font-size:8px;
border:0;
box-shadow: none;
}
#{$mainclass} .mon-row{
}
#{$mainclass} .calendar-controls .arrow-left, #{$mainclass} .calendar-controls .arrow-right{ position:absolute; top:13px; left:10px; background: transparent no-repeat center center url(img/arrowleft.png);
width:15px; height:16px; cursor:pointer;
}
#{$mainclass} .calendar-controls .arrow-right{ left: auto; right:10px; background: transparent no-repeat center center url(img/arrowright.png);
}
/*======
========skin-responsive
*/
$mainclass : '.dzscalendar.skin-responsive';
#{$mainclass}{
margin-top:15px;
margin-bottom:20px;
width:100%;
height: auto;
}
#{$mainclass} .calendar-controls{
margin-bottom: 8px;
}
#{$mainclass} .theMonths{
height:auto;
}
#{$mainclass} .theMonths > *{
width:100%;
position: relative;
}
#{$mainclass} .main-mon .week-day{
width: 14%;
height: 30px;
border-left:1px solid rgba(0,0,0,.1);
}
#{$mainclass} .main-mon .mon-row .week-day:first-child{
border-left:0px solid rgba(0,0,0,.1);
}
#{$mainclass} .main-mon .other-months-date{
}
#{$mainclass} .past-date{
}
#{$mainclass} .headerRow{
}
#{$mainclass} .headerRow .week-day{
}
#{$mainclass} .mon-row{
}
#{$mainclass} .calendar-controls .arrow-left{
left:35px;
}
#{$mainclass} .calendar-controls .arrow-right{
right:25px;
}
/*==========================================================
========skin-responsive-galileo
=================================================================
*/
$color_bg: #fff;
$color_bg2: #ba5e5e;
$transition-property: height;
$transition-duration: 0.8s;
$transition-timing: ease-out;
$mainclass : '.dzscalendar.skin-responsive-galileo';
.dzscalendar-con.skin-responsive-galileo{
box-shadow: 1px 2px 5px 0 rgba(0,0,0,.2);
}
.dzscalendar.skin-responsive-galileo{
margin-top:15px;
margin-bottom:20px;
width:100%;
height: auto;
color: #222;
@include apply_transition($transition-property, $transition-duration, $transition-timing);
overflow: visible;
.main-mon
{
.mon-body{
.week-day{
width: 14%;
width: calc(100% / 7);
height: 50px;
border-left:1px solid rgba(0,0,0,.1);
vertical-align: bottom;
text-align: right;
font-size: 14px;
font-size: 0.8rem;
@include box_sizing();
position: relative;
}
}
}
.main-mon {
.week-day {
> .the-number {
position: absolute;
right: 4px;
bottom: 0;
}
> span.event-inner {
position: absolute;
right: auto;
left: 50%;
top: 50%;
width: 100%;
transform: translate(-50%,-50%);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #222222;
}
.zoombox-inline{
display: none;
}
}
}
}
.zoombox-maincon .event-inner{
display: none;
}
.event-heading{
font-size: 21px;
margin-bottom: 10px;
}
.event-date{
font-style:italic;
margin-bottom: 10px;
}
.the-item.type-inlinecontent{
padding: 15px;
color: #222222;;
}
#{$mainclass} .calendar-controls{
margin-bottom: 8px;
}
#{$mainclass} .theMonths{
height:auto;
@include box_sizing();
}
#{$mainclass} .theMonths > *{
width:100%;
position: relative;
}
#{$mainclass} .main-mon .other-months-date{
}
#{$mainclass} .past-date{
color: rgba(0,0,0,0.5);
opacity:1;
}
#{$mainclass} .headerRow{
background: $color_bg2;
color:#eee;
}
#{$mainclass} .headerRow .week-day{
padding: 5px 0;
}
#{$mainclass} .mon-row{
}
#{$mainclass} .mon-row.separator{
height: 20px;
}
#{$mainclass} .theMonths{
background: $color_bg;
@include box_sizing();
}
#{$mainclass} .main-mon{
}
#{$mainclass} .main-mon .mon-body .mon-row{
border-top:1px solid rgba(0,0,0,.1);
}
#{$mainclass} .main-mon .mon-body .mon-row:empty{
display: none;
}
#{$mainclass} .main-mon .mon-body .mon-row:first-child{
border-top:0px solid rgba(0,0,0,.1);
}
#{$mainclass} .main-mon .mon-row .week-day:first-child{
border-left:0px solid rgba(0,0,0,.1);
}
#{$mainclass} .calendar-controls .arrow-left{
left:35px;
}
#{$mainclass} .calendar-controls .arrow-right{
right:25px;
}
#{$mainclass} .hasEvent{
}
#{$mainclass} .theMonths{
}
#{$mainclass} .calendar-controls{
height: 350px;
background: #eee;
margin-bottom: 0;
}
#{$mainclass} .calendar-controls .month-bg{
position: absolute; top:0; left:0; width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}
#{$mainclass} .curr-date{
color: #eee;
position: absolute;
right: 40px
;
bottom:40px;
font-size: 22px;
border: 2px solid rgba(255,255,255,0.5);
padding: 15px 20px;
text-shadow: 1px 0px 1px rgba(0,0,0,0.3);
}
#{$mainclass} .curr-date > *{
color: #eee;
}
#{$mainclass} .calendar-controls .arrow-left{
position:absolute; left:10px; opacity: 0.5; top:auto; bottom:40px; background:transparent no-repeat center center url(img/arrowleft-galileo.png); width:50px; height:50px; cursor:pointer;
}
#{$mainclass} .calendar-controls .arrow-left:hover{
opacity: 0.7;
}
#{$mainclass} .calendar-controls .arrow-right{
position:absolute; left:auto; right: 0px; opacity: 0.5; top:auto; bottom:40px;
background:transparent no-repeat center center url(img/arrowright-galileo.png);
width:50px; height:50px; cursor:pointer;
}
#{$mainclass} .calendar-controls .arrow-right:hover{
opacity: 0.7;
}
.dzscalendar.skin-lions{
background-color: #eeeeee;
padding: 20px;
font-family: "Lato", "Open Sans", arial;
height: auto;
.calendar-controls{
margin-bottom: 20px;
.arrow-left, .arrow-right{
top: 24px;
left: 15px;
background-image: none;
line-height: 1;
}
.arrow-right{
left: auto;
right:15px;
}
}
.curr-date{
background-color: #ffffff;
padding: 15px;
.curr-month{
font-size: 30px;
font-weight: 800;
text-transform: uppercase;
color: #222222;
margin-right: 10px;
}
.curr-year{
font-size: 30px;
font-weight: 300;
}
}
.week-day{
margin-right: 4px;
margin-bottom: 4px;
padding: 5px;
text-align: left;
background-color: #ffffff;
font-weight: bold;
color: #222222;
.the-event-content{
h5{
margin-top: 20px;
text-align: center;
}
}
}
.week-day.odd{
background-color: #f4f4f4;
}
.week-day.hasEvent, .week-day.hasEventForHover{
.divimage-overlay{
background: rgba(0,0,0,0.4);
}
.the-number{
font-size: 50px;
color: #fff;
font-weight: 300;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
}
.mon-head{
.week-day{
text-align: center;
}
}
.mon-body{
margin-top: 15px;
}
.mon-body > .mon-row:nth-last-child(1){
.week-day{
margin-bottom: 0;
}
}
}
.dzscalendar.skin-lions-square{
background-color: #eeeeee;
padding: 20px;
height: auto;
font-family: "Lato", "Open Sans", arial;
.mon-head{
.week-day{
padding: 15px 0;
}
}
.calendar-controls{
margin-bottom: 4px;
.arrow-left, .arrow-right{
top: 18px;
left: 15px;
background-image: none;
line-height: 1;
}
.arrow-right{
left: auto;
right:15px;
}
}
.curr-date{
background-color: #ffffff;
padding: 15px;
.curr-month{
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
color: #222222;
margin-right: 10px;
}
.curr-year{
font-size: 20px;
font-weight: 300;
}
}
.week-day{
margin-right: 4px;
margin-bottom: 4px;
padding: 5px;
text-align: left;
background-color: #ffffff;
font-weight: bold;
color: #222222;
line-height: 1;
font-size: 14px;
.the-number{
position:absolute; top:50%; left:50%;
transform: translate(-50%, -50%);
}
.the-event-content{
h5{
margin-top: 20px;
text-align: center;
}
}
}
.week-day.odd{
background-color: #f4f4f4;
}
.week-day.hasEvent, .week-day.hasEventForHover{
.divimage-overlay{
background: rgba(68,68,68,1);
}
.the-number{
color: #fff;
}
}
.mon-head{
.week-day{
text-align: center;
}
}
.mon-body{
margin-top: 0px;
}
.mon-body > .mon-row:nth-last-child(1){
.week-day{
margin-bottom: 0;
}
}
}
/* --- responsive props */
#{$mainclass}.under-480 .curr-date{
font-size: 13px;
}
#{$mainclass}.under-240 .main-mon .week-day{
width: 14%;
height: 30px;
font-size: 12px;
font-size: 0.6rem;
}
#{$mainclass}.under-240 .theMonths{
}
#{$mainclass}.under-240 .curr-date{
font-size: 10px;
}
#{$mainclass}.under-240 .calendar-controls{
height: 230px;
}
$transition-duration: 0s;
.non-animation{
transition-duration: $transition-duration;
-webkit-transition-duration: $transition-duration;
-moz-transition-duration: $transition-duration;
-ms-transition-duration: $transition-duration;
-o-transition-duration: $transition-duration;
}
.event-receiver{
background: #fff;
border: 1px solid rgba(0,0,0,0.2);
@include box_sizing();
padding: 10px 15px;
border-radius:0;
color: #888;
}
.dzscal-blog-event{
position: relative;
@include box_sizing();
*{
@include box_sizing();
}
.dzscal-date-con{
float:left;
width: 70px;
margin-right: 30px;
background: #cb1919;
text-align: center;
color: #fff;
padding: 18px 10px;
font-family: Courier New, Arial;
.date-con--date{
font-size: 30px;
margin-bottom: 3px;
}
.date-con--month{
font-size: 15px;
opacity: 0.7;
}
}
.dzscal-event-content{
}
}
.dzscal-blog-event:after{
display: block;
clear: both;
content: " ";
}
|
Download
