$off-grey-color: #ededed; $off-color: #eef2f9; html { height: 100%; } body { font-family: sans-serif; margin: 2rem; height: 100%; } .main { margin: auto; } .split-pane { display: flex; flex-direction: vertical; } .split-elem { flex-grow: 1; flex-shrink: 0; flex-basis: 40%; margin: 0.25rem; } .table-wrapper { border: 1px solid $off-grey-color; padding-top: 0.5rem; padding-bottom: 1rem; border-radius: 0.25rem; display: inline-block; margin-top: 1rem; box-shadow: 0px 0px 5px rgba(grey, 0.1); box-sizing: border-box; } .class-table { border-collapse: collapse; th, td { padding: 0.5rem; padding-left: 1rem; padding-right: 1rem; } th { text-align: left; } tr { transition: background-color 0.2s; &:nth-child(2n+3) { background-color: $off-color; } &.hoverable:hover { background-color: lighten(yellow, 30%); } &.selected { border: 1px dashed black; } } } .schedule-table { width: 100%; padding: 1rem; } .feather { vertical-align: middle; height: 1rem; } .button { border: 1px solid black; padding: 0.25rem; border-radius: 0.25rem; display: inline-block; text-align: center; vertical-align: middle; } .color-green { background-color: lighten(#5bc275, 30%); border-color: #5bc275; color: darken(#5bc275, 30%); } .color-red { background-color: lighten(#c25b75, 30%); border-color: #c25b75; color: darken(#c25b75, 30%); } .week-grid { display: grid; width: 100%; height: 70vh; grid-template-columns: auto repeat(5, 1fr); grid-template-rows: auto repeat(10, 1fr); } .course-block { position: absolute; border: 1px solid; border-radius: 0.25rem; padding: 0.25rem; box-sizing: border-box; &.selected { border-style: dashed; border-width: 2px; } p { margin-top: 0.1rem; margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } overflow: hidden; } .column-container { position: relative; padding: 0.25rem; box-sizing: border-box; border-left: 0.5px solid lighten(grey, 20%); border-right: 0.5px solid lighten(grey, 20%); } .table-day-header { padding: 0.25rem; text-align: center; } .time-column { padding-right: 1rem; }