.app-calendar-time-line{ margin: 6px; height: calc(100% - 30px); .app-calendar-time-line__header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5em; } .app-calendar-time-line__header__left{ display: flex; align-items: center; justify-content: center; } .app-calendar-time-line__header__center{ h2{ font-size: 1.75em; } } .app-calendar-time-line__container{ height: 100%; display: flex; border: 1px solid #ddd; } .app-calendar-time-line__container__left.weekview{ .left__header{ height: 47px; } .left__items{ height: calc(100% - 47px); } } .app-calendar-time-line__container__right{ position: relative; padding-left: 6px; height: 100%; display: flex; flex-shrink: 0; overflow-x: auto; .calendar-chart-day{ top: 35px; flex-shrink: 0; width: 1440px; height: calc(100% - 35px); position: absolute; } .calendar-chart-week{ top: 47px; flex-shrink: 0; width: 10080px; height: calc(100% - 47px); position: absolute; } .calendar-chart-month{ top: 35px; flex-shrink: 0; width: 1440px; height: calc(100% - 35px); position: absolute; } .group-chart{ position: relative; height: 35px; width: 100%; .chart{ position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } } .app-calendar-time-line__container__left{ height: 100%; flex-shrink: 0; align-self: center; .left__header{ height: 35px; font-size: 1em; border-bottom: 1px solid #ddd; >div{ height: 100%; padding: 7px 8px; font-weight: bold; } } .left__items{ height: calc(100% - 35px); >.left-item{ height: 35px; display: flex; align-items: center; border-bottom: 1px solid #ddd; >span{ margin-left: 7px; } } } } .empty-space{ height: calc(100% - 35px); display: flex; >div{ height: 100%; width: 50%; .cell{ height: 35px; border-bottom: 1px solid #ddd; } &:first-child{ border-right: 1px dashed #ddd; } } } .dayview{ height: 100%; align-self: center; flex-shrink: 0; .dayview-header{ height: 35px; font-size: 1em; border-bottom: 1px solid #ddd; .date{ height: 100%; padding: 7px 0px; text-align: center; } } } .weekview{ height: 100%; .weekviewr-header{ height: 100%; } .date-header{ height: 25px; width: 100%; border-bottom: 1px solid #ddd; text-align: center; } .hours{ height: calc(100% - 25px); display: flex; } .hour{ height: 100%; align-self: center; .hour-header{ border-bottom: 1px solid #ddd; } .title{ text-align: center; } >.empty-space{ height: calc(100% - 25px); } &:not(:first-child){ border-left: 1px solid #ddd; } } } .monthview{ height: 100%; .monthview-header{ height: 35px; font-size: 1em; border-bottom: 1px solid #ddd; .date{ height: 100%; padding: 7px 0px; text-align: center; } } } .right__time-line{ &:not(:first-child){ .dayview{ border-left: 1px solid #ddd; } .weekview{ border-left: 1px solid #ddd; } .monthview{ border-left: 1px solid #ddd; } } }