ilscipio/scipio-erp

.month-calendar-full {
    table.calendar {
 
        .month-entry {
            vertical-align: top; 
            padding: 0.5em; 
            border-color: $table-border-color; 
            border-width: 1px; 
            //border-style: $table-border-style;
        }
        // weeks
        .month-entry-week{
    
        }
        
        
        // days
        .month-entry-content-title {
        }
        
        .month-entry-content-add {
                float: right;
        }
        
        .month-entry-content-event {
            display:block;
            width:100%;
            padding: 0 .8em;
            border-left: $brand-primary 4px solid;
            display: block;
            overflow: auto;
            line-height: 1.5em;
            background: $gray-lighter;
            margin-bottom:2px;
        }
        
        a {color: $gray-dark;
            &:hover {color: $brand-primary;}
        }
        
        th {
            word-break: break-all; // SPECIAL, essential for small screens, otherwise the workaround break on small screen
            //background: $brand-info;
        }
        
        td.month-entry:last-child {
            border-width: 1px 0 0 0; 
        }
        
        th.month-header-day, .month-calendar-full td.month-entry-day {
            width: 13.5% !important;
        }
        
        th.month-header-week, td.month-entry-week {
            width: auto;
        }
        
        td.month-entry-day .day-event-time {
            font-size: 0.8em;
        }
        
        td.month-entry-day .cal-entry-status {
            font-size: 0.8em;
        }
        
        td.month-entry-day .month-entry-wrapper {
            width: 100%;
            // padding % is calculated from the WIDTH of the parent element
            padding-bottom: 100%; // sets the ratio value vs width; we want 1:1 ~ 100:100
            position: relative;
            overflow: hidden;
        }
        
        td.month-entry-day .month-entry-abs {
            position: absolute;
            top: 0; bottom: 0; left: 0; right: 0;
        }
        
        td.month-entry-day{
           &.other-month {
                background: $gray;
                a {color: $gray-dark;
                    &:hover {color: $brand-primary;}
                }
            }
            
            &.current-month{
                background: $white;
            }
        
            &.current-period{
                //background: scale-color($brand-info, $lightness: +30%);
                border-bottom:4px solid $brand-info;
                .month-entry-content-title {
                    font-weight:bold;
                }
            }
        
            &.current-period:hover {
                //background: scale-color($brand-info, $lightness: +10%);
            }
            
            &:hover{ 
                    background: $gray-lighter;
           }
        }
    }
    
    // this is hidden markup content post-table used to populate foundation dropdowns
    .cal-detail-content {
    
        .month-entry-content-event:first-child {
            margin-top: 0;
        }
    
        .month-entry-content-event {
            margin-top: 0.5em;
        }
    
        .day-entry-stats {
            margin-top: 1em;
        }
    
    }
}

.week-calendar-full {
    table.calendar {
        td.week-entry-event {
            // TODO: better styling for this (omit border and use different color for each event? harder...)
            border: 1px solid black;
        }
    }
}

.day-calendar-full {
    table.calendar {
        td.day-entry-event {
            // TODO: better styling for this (omit border and use different color for each event? harder...)
            border: 1px solid black;
        }
    }
}