mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-21 13:33:57 +00:00
omair saleh
719 lines
13 KiB
SCSS
Vendored
719 lines
13 KiB
SCSS
Vendored
/*------------------------------------------------------------------
|
|
[21. Calendar App]
|
|
*/
|
|
|
|
$cell-height : 80;
|
|
body.overflow-hidden{
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
Calendar
|
|
--------------------------------------------------
|
|
Header / .calendar-header
|
|
Years / .years .year
|
|
Months / .months
|
|
Weeks / .weeks-wrapper .week
|
|
Grid / .calendar-container
|
|
Events / .event-container
|
|
*/
|
|
.calendar{
|
|
height: 100%;
|
|
.drager{
|
|
overflow: hidden;
|
|
.scroll-element{
|
|
display: none;
|
|
}
|
|
}
|
|
&.month{
|
|
padding-left:5px;
|
|
.options .date{
|
|
margin-bottom: 22px;
|
|
}
|
|
.week-dragger{
|
|
display: none;
|
|
}
|
|
.calendar-container{
|
|
border-top: 1px solid $color-master-light;
|
|
padding-top: 0;
|
|
height:calc(100% - 169px);
|
|
.view .tble{
|
|
width: 100%;
|
|
.thead .tcell .weekday{
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.calendar-header{
|
|
height: 43px;
|
|
background-color:$color-master-lightest;
|
|
line-height: 43px;
|
|
padding-left:60px;
|
|
& > .drager{
|
|
width:calc(100% - 141px);
|
|
border-right:1px solid rgba(0, 0, 0, 0.33);
|
|
line-height: 35px;
|
|
}
|
|
.years{
|
|
width: auto;
|
|
list-style: none;
|
|
white-space: nowrap;
|
|
margin-top: 5px;
|
|
.year{
|
|
display: inline-block;
|
|
width: 69px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
font-family: "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
& > a{
|
|
color: rgba(0, 0, 0, 0.5);
|
|
position: relative;
|
|
&.active{
|
|
color: #000;
|
|
}
|
|
&.has-event{
|
|
&:before{
|
|
position: absolute;
|
|
content: '\25CF';
|
|
width: 100%;
|
|
font-size: 8px;
|
|
line-height: 6px;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.44);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.options{
|
|
padding-left:60px;
|
|
margin-top: 15px;
|
|
.months{
|
|
width: auto;
|
|
white-space: nowrap;
|
|
height: 43px;
|
|
line-height: 43px;
|
|
.month{
|
|
min-width: 30px;
|
|
max-width: 100px;
|
|
padding: 0 10px;
|
|
display: inline-block;
|
|
& > a{
|
|
position: relative;
|
|
color: rgba(0, 0, 0, 0.28);
|
|
&:hover{
|
|
color: rgba(0, 0, 0, 0.33);
|
|
}
|
|
&.active{
|
|
color: rgba(0, 0, 0, 1);
|
|
}
|
|
&.has-event{
|
|
&:before{
|
|
position: absolute;
|
|
content: '\25CF';
|
|
top: -6px;
|
|
width: 100%;
|
|
font-size: 8px;
|
|
line-height: 6px;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.33);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.date{
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
.week-dragger{
|
|
border-bottom: 1px solid #e6e6e6;
|
|
margin-left:-20px;
|
|
}
|
|
.weeks-wrapper{
|
|
width: auto;
|
|
white-space: nowrap;
|
|
padding-left:10px;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 5px;
|
|
margin-left: 20px;
|
|
.week{
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-left:30px;
|
|
padding-right:30px;
|
|
&:first-child{
|
|
padding-left:4px;
|
|
}
|
|
&:last-child{
|
|
padding-left:0px;
|
|
}
|
|
&:before{
|
|
content: '';
|
|
position: absolute;
|
|
right:-20px;
|
|
bottom: 6px;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-left:1px dotted rgba(0, 0, 0, 0.3);
|
|
}
|
|
&.active{
|
|
.day-wrapper .week-date{
|
|
.day{
|
|
& > a{
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.day-wrapper{
|
|
display: inline-block;
|
|
.week-date{
|
|
text-align: center;
|
|
width: 21px;
|
|
height: 21px;
|
|
margin: 6px;
|
|
border-radius:99px;
|
|
&.current-date{
|
|
background-color: $color-master-light;
|
|
}
|
|
&.active{
|
|
background-color: $color-success;
|
|
.day > a{
|
|
font-weight: bold;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.day > a{
|
|
letter-spacing: -0.01em;
|
|
}
|
|
}
|
|
.week-day{
|
|
text-align: center;
|
|
}
|
|
.day{
|
|
display: inline-block;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 1px 0;
|
|
font-size: 12px;
|
|
color: rgba(0, 0, 0, 0.3);
|
|
& > a{
|
|
position: relative;
|
|
width: 100%;
|
|
display: block;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.3);
|
|
opacity: 0.7;
|
|
font-weight: 600;
|
|
&.has-event{
|
|
&:before{
|
|
position: absolute;
|
|
content: '\25CF';
|
|
top: -10px;
|
|
width: 100%;
|
|
font-size: 8px;
|
|
line-height: 6px;
|
|
text-align: center;
|
|
color:$color-success;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.week-header{
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
letter-spacing: 0.06em;
|
|
font-size: 10.5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.calendar-container{
|
|
position: relative;
|
|
height: calc(100% - 200px);
|
|
padding-top: 10px;
|
|
.view{
|
|
&.month-view{
|
|
.tble .trow .tcell{
|
|
position: relative;
|
|
height: 20%;
|
|
clear: both;
|
|
.cell-inner{
|
|
.holder{
|
|
position: absolute;
|
|
top: 37px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
&.active{
|
|
background: #fff;
|
|
.cell-inner{
|
|
background-color: #fef8e7;
|
|
}
|
|
}
|
|
&.not{
|
|
background-color: $color-master-lightest;
|
|
}
|
|
&.drop-target{
|
|
.cell-inner{
|
|
background-color: $color-master-lightest;
|
|
}
|
|
}
|
|
.cell-inner:only-child, .cell-inner{
|
|
height: 100%;
|
|
border-bottom: 1px solid $color-master-light;
|
|
position: relative;
|
|
}
|
|
.month-date{
|
|
position: relative;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
margin-right: 6px;
|
|
width: 25px;
|
|
height: 25px;
|
|
padding-top: 2px;
|
|
margin: 6px;
|
|
float: right;
|
|
display: block;
|
|
z-index:1;
|
|
border-radius:99px;
|
|
&.current-date{
|
|
background-color: $color-master-light;
|
|
}
|
|
&.active{
|
|
background-color: $color-success;
|
|
font-weight: bold;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.event-container{
|
|
height: 30px;
|
|
position: relative !important;
|
|
min-height: 30px !important;
|
|
.event-inner{
|
|
padding: 8px;
|
|
}
|
|
}
|
|
}
|
|
.ghost-element{
|
|
height: 30px;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.grid .tble{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.event-container .event-title{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
&.day-view .tble{
|
|
white-space: nowrap;
|
|
.thead{
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
.tcell{
|
|
display: none;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
&.active{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.trow{
|
|
display: block;
|
|
height: 80px;
|
|
.tcell.active{
|
|
background-color:#fff;
|
|
}
|
|
}
|
|
}
|
|
width: 100%;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
|
|
//DEFAULT WEEKVIEW WITH 30 min Slot
|
|
.tble{
|
|
display: inline-table;
|
|
width: calc(100% - 50px);
|
|
vertical-align: top;
|
|
position: relative;
|
|
.thead{
|
|
display: table-row;
|
|
width: 100%;
|
|
background: #fff;
|
|
.tcell{
|
|
padding: 10px;
|
|
height: $cell-height/2 * 1px;
|
|
position: relative;
|
|
.weekday{
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
color: rgba(0, 0, 0, 0.51);
|
|
}
|
|
.weekdate{
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
margin-right:10px;
|
|
color: rgba(0, 0, 0, 0.77);
|
|
}
|
|
&.active{
|
|
.weekdate, .weekday{
|
|
color:rgba(0, 0, 0, 1);
|
|
}
|
|
}
|
|
&:before{
|
|
content: '';
|
|
border-bottom: 1px solid $color-master-light;
|
|
width: calc(100% - 18px);
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
.event-bubble{
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-left:5px;
|
|
float:right;
|
|
border-radius:30px;
|
|
}
|
|
}
|
|
}
|
|
.tcell{
|
|
display: table-cell;
|
|
height: $cell-height * 1px;
|
|
max-width: 14.2857%;
|
|
width: 14.2857%;
|
|
}
|
|
.trow{
|
|
display:table-row;
|
|
.tcell{
|
|
background: #fff;
|
|
padding: 0 10px;
|
|
.cell-inner{
|
|
height: $cell-height/2 * 1px;
|
|
position: relative;
|
|
&:first-child{
|
|
border-bottom: 1px dotted $color-master-light;
|
|
}
|
|
&:last-child{
|
|
border-bottom: 1px solid $color-master-light;
|
|
}
|
|
&:only-child{
|
|
height: 40px;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
&.active{
|
|
background-color: #fef8e7;
|
|
& > *{
|
|
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
}
|
|
&.disable{
|
|
background-color: $color-master-lightest;
|
|
}
|
|
}
|
|
}
|
|
.loading{
|
|
left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.loading{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
z-index: 100;
|
|
}
|
|
.pgn-wrapper{
|
|
position: absolute;
|
|
}
|
|
.even-holder{
|
|
position: absolute;
|
|
display: table;
|
|
width: calc(100% - 50px);
|
|
height: calc(100% - 25px);
|
|
.event-placeholder{
|
|
height: 100%;
|
|
width: 14.2857%;
|
|
display: table-cell;
|
|
}
|
|
}
|
|
.event-container{
|
|
width: 100%;
|
|
height: 40px;
|
|
position: absolute !important;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
margin-bottom: 5px;
|
|
min-height: 40px !important;
|
|
transition:width .16s ease;
|
|
.event-inner{
|
|
padding: 15px;
|
|
&:before{
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
content: '';
|
|
background-color: rgba(255, 255, 255,0.8);
|
|
border-radius: 999px;
|
|
right:14px;
|
|
top: 11px;
|
|
}
|
|
}
|
|
.time-wrap{
|
|
line-height: 12px;
|
|
text-align:left;
|
|
color: rgba(0, 0, 0, 0.77);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.event-start-time, .event-end-time{
|
|
font-size: 12px;
|
|
color: rgba(0, 0, 0, 0.44);
|
|
}
|
|
.event-title{
|
|
font-size: 14px;
|
|
line-height: 15px;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.resizable-handle{
|
|
position: absolute;
|
|
opacity: 1;
|
|
z-index: 3;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 8px;
|
|
overflow: hidden;
|
|
line-height: 8px;
|
|
font-size: 11px;
|
|
font-family: monospace;
|
|
text-align: center;
|
|
cursor: s-resize;
|
|
&:after {
|
|
content: "=";
|
|
color: rgba(0, 0, 0, 0.44);
|
|
}
|
|
}
|
|
&.dragging{
|
|
z-index: 100;
|
|
}
|
|
}
|
|
.grid{
|
|
display: block;
|
|
overflow: scroll;
|
|
height: calc(100% - 40px);
|
|
-webkit-overflow-scrolling: touch;
|
|
//Time Slots
|
|
&.slot-60{
|
|
.tble .trow .tcell .cell-inner{
|
|
height: $cell-height * 1px;
|
|
border-bottom: 1px solid $color-master-light;
|
|
}
|
|
}
|
|
&.slot-15{
|
|
.tble .trow .tcell {
|
|
height: 100/4 * 1px;
|
|
.cell-inner{
|
|
height: 100/4 * 1px;
|
|
border-bottom: 1px dotted $color-master-light;
|
|
&:last-child{
|
|
border-bottom: 1px solid $color-master-light;
|
|
}
|
|
}
|
|
}
|
|
.time-slot-wrapper .time-slot{
|
|
height: 100px;
|
|
}
|
|
}
|
|
}
|
|
.allday-cell{
|
|
height: $cell-height/2 * 1px;
|
|
display: inline-block;
|
|
width: 50px;
|
|
float:left;
|
|
}
|
|
}
|
|
.time-slot-wrapper{
|
|
display: inline-block;
|
|
width: 50px;
|
|
float:left;
|
|
height: 100%;
|
|
.time-slot{
|
|
display: block;
|
|
height: $cell-height*1px;
|
|
width: 100%;
|
|
background: #fff;
|
|
&:first-child{
|
|
span{
|
|
display: none;
|
|
}
|
|
}
|
|
& > span{
|
|
float:right;
|
|
font-size: 12px;
|
|
position: relative;
|
|
top: -15%;
|
|
color: rgba(0, 0, 0, 0.46);
|
|
font-weight: bold;
|
|
font-size: 11px;
|
|
letter-spacing: 0.06em;
|
|
font-size: 10.5px;
|
|
font-family: 'Montserrat';
|
|
right:5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.calendar-event{
|
|
width: 330px;
|
|
right:-330px;
|
|
.scrollable{
|
|
height: 100%;
|
|
}
|
|
}
|
|
.date-selector{
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
Responsive Util
|
|
*/
|
|
@media (max-width: 991px) {
|
|
.calendar{
|
|
background-color: #fff;
|
|
.calendar-header{
|
|
display: none;
|
|
}
|
|
.options{
|
|
margin-top:0;
|
|
padding-left:10px;
|
|
.months{
|
|
line-height: 21px;
|
|
padding-top: 14px;
|
|
}
|
|
.date{
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.calendar-container {
|
|
height:100%;
|
|
.view.week-view .tble{
|
|
white-space: nowrap;
|
|
.thead{
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
.tcell{
|
|
display: none;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
&.active{
|
|
display: inline-block;
|
|
background-color:#fff;
|
|
}
|
|
}
|
|
.trow{
|
|
display: block;
|
|
height: 80px;
|
|
}
|
|
}
|
|
.view.month-view {
|
|
.allday-cell{
|
|
display: none;
|
|
}
|
|
.grid .tble{
|
|
padding-left: 0;
|
|
}
|
|
.tble {
|
|
.thead .tcell{
|
|
padding: 3px;
|
|
padding-top: 10px;
|
|
}
|
|
.trow .tcell{
|
|
padding: 0 6px;
|
|
}
|
|
}
|
|
.tble .trow .tcell .event-container{
|
|
@include border-radius(99px);
|
|
position: absolute !important;
|
|
height: 16px !important;
|
|
width: 16px !important;
|
|
min-height: 16px !important;
|
|
margin: 0 auto;
|
|
left: 0;
|
|
right: 0;
|
|
.event-inner{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.month{
|
|
height: calc(100% - 101px);
|
|
}
|
|
}
|
|
.weeks-wrapper{
|
|
margin-bottom: 0;
|
|
}
|
|
&.month{
|
|
padding-left:0;
|
|
.calendar-container{
|
|
height: calc(100% - 108px);
|
|
}
|
|
}
|
|
}
|
|
.calendar-event{
|
|
width: 240px;
|
|
right:-240px;
|
|
}
|
|
.months-drager{
|
|
margin-left:16px;
|
|
margin-right:36px;
|
|
border-right:1px solid $color-master-light;
|
|
padding-top: 0;
|
|
}
|
|
.horizontal-app-menu {
|
|
.months-drager{
|
|
margin-left:0;
|
|
margin-right:0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.calendar.month .calendar-container .view .tble .thead .tcell {
|
|
text-align: center;
|
|
&:before{
|
|
width: 100%;
|
|
}
|
|
.weekday{
|
|
width: 11px;
|
|
overflow: hidden;
|
|
letter-spacing: 4px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
} |