vue2-datetimepicker/src/calendar.less

Shows a calendar to pick a date using moment.js

.ui.custom[class*="bottom right"].popup[class*="for datepicker"] {
    top: 100%;
    // left: 0;
    // max-width: none;
    // width: 25em;
}


/*******************************
            Model
*******************************/

// .calendar.container {
//     & > [class*="month and year"].container {
//         & > .month.container {
//             & > i {
//                 &.disabled {
//                 }
//
//                 &:before {
//                 }
//
//                 &:not(.disabled):hover {
//                 }
//
//                 &.left {
//                     &:before {
//                     }
//                 }
//
//                 &.right {
//                     &:before {
//                     }
//                 }
//             }
//         }
//
//         & > .year.container {
//             & > input {
//             }
//         }
//     }
//
//     & > .table.container {
//         & > .week.days.container {
//             &.week {
//                 & > .day {
//                 }
//             }
//         }
//
//         & > .month.container {
//             & > .week {                
//                 & > .day {
//                     &.readonly, &.disabled {
//                     }
//
//                     &:not(.readonly):not(.disabled):not(.selected):hover {
//                     }
//
//                     &.previous,
//                     &.next,
//                     &.disabled {
//                     }
//
//                     &.today {    
//                     }
//
//                     &.selected {        
//                     }
//                 }
//             }
//         }
//     }
// }

/*******************************
            Grid
*******************************/

& {
    @type : 'collection';
    @element : 'grid';
    @import (multiple) '~semantic/src/theme.config';
    .calendar.container {
        margin: 0 !important;
        max-width: 100% !important;
        &>.table.container {
            &>[class*="week days"].container {
                &>.day {
                    box-shadow: @celledColumnDivider;
                    &:first-child {
                        box-shadow: none;
                    }
                }
            }
            &>.month.container {
                &>.week {
                    box-shadow: @celledRowDivider;
                    &>.day {
                        box-shadow: @celledColumnDivider;
                        &:first-child {
                            box-shadow: none;
                        }
                    }
                }
            }
        }
    }
}


/*******************************
             Table
*******************************/

& {
    @type : 'collection';
    @element : 'table';
    @import (multiple) '~semantic/src/theme.config';
    .calendar.container {
        &>.table.container {
            border: @border;
            box-shadow: @boxShadow;
            border-radius: @borderRadius;
            border-spacing: @borderSpacing;
            box-shadow: @attachedBoxShadow;
            // .ui[class*="bottom attached"].table
            bottom: 0px;
            margin-top: 0em;
            top: @attachedBottomOffset;
            box-shadow: @attachedBottomBoxShadow;
            border-radius: 0em 0em @borderRadius @borderRadius;
            &>[class*="week days"].container {
                box-shadow: @headerBoxShadow;
                background: @headerBackground;
                &>.day {
                    color: @headerColor;
                    font-style: @headerFontStyle;
                    font-weight: @headerFontWeight;
                    text-transform: @headerTextTransform;
                }
            }
            &>.month.container {
                &>.week {
                    &>.day {
                        opacity: 1;
                        &:not(.readonly):not(.disabled):not(.selected):hover {
                            background: @selectableBackground !important;
                            color: @selectableTextColor !important;
                        }
                        &.previous,
                        &.next {
                            color: @disabledTextColor;
                        }
                        &.today {
                            background: @positiveBackgroundColor !important;
                            color: @positiveColor !important;
                            font-weight: bold;
                        }
                        &.selected {
                            background: @activeBackgroundColor !important;
                            color: @activeColor !important;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}


/*******************************
            Segment
*******************************/

& {
    @type : 'element';
    @element : 'segment';
    @import (multiple) '~semantic/src/theme.config';
    .calendar.container {
        &>[class*="month and year"].container {
            top: 0px;
            bottom: 0px;
            border-radius: 0px;
            // margin: 0em @attachedHorizontalOffset;
            // width: @attachedWidth;
            // max-width: @attachedWidth;
            box-shadow: @attachedBoxShadow;
            border: @attachedBorder;
            // .ui[class*="top attached"].segment
            bottom: 0px;
            margin-bottom: 0em;
            top: @attachedTopOffset;
            // margin-top: @verticalMargin;
            border-radius: @borderRadius @borderRadius 0em 0em;
            border-bottom: none;
            &>.month.container {
                &>i {
                    &>.left {}
                    &>.left {}
                }
            }
            &>.year.container {
                &>input {}
            }
        }
        &>.table.container {
            &>[class*="week days"].container {}
            &>.month.container {
                &>.week {
                    &>.day {
                        &:not(.disabled):not(.selected):hover {}
                        &.previous,
                        &.next {}
                        &.today {}
                        &.selected {}
                        &.disabled {}
                    }
                }
            }
        }
    }
}