.book-summary { font-family: @font-family-sans; position: absolute; top: 0px; left: -@sidebar-width; bottom: 0px; z-index: 1; overflow-y: auto; width: @sidebar-width; color: @sidebar-color; background: @sidebar-background; border-right: @sidebar-border-right; .transition(left @sidebar-transition-duration ease); ul.summary { list-style: none; margin: 0px; padding: 0px; .transition(top 0.5s ease); li { list-style: none; &.header { padding: @sidebar-link-padding-v @sidebar-link-padding-h; padding-top: 20px; text-transform: uppercase; color: @sidebar-header-color; } &.divider { height: 1px; margin: 7px 0; overflow: hidden; background: @sidebar-divider-color; } i.fa-check { display: none; position: absolute; right: 9px; top: 16px; font-size: 9px; color: @sidebar-icon-color; } &.done { > a { color: @sidebar-link-completed; font-weight: @sidebar-link-completed-weight; i { display: inline; } } } a, span { display: block; padding: @sidebar-link-padding-v @sidebar-link-padding-h; border-bottom: none; color: @sidebar-link-color; background: @sidebar-link-background; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; } a:hover { text-decoration: underline; } a:focus { outline: none; } &.active > a { color: @sidebar-link-hover-color; background: @sidebar-link-hover-background; text-decoration: none; } ul { padding-left: @sidebar-nested-padding; } } } @media (max-width: @sidebar-breakpoint) { width: calc(~"100% - 60px"); bottom: 0px; left: -100%; } } .book { &.with-summary { .book-summary { left: 0px; } } &.without-animation { .book-summary { .transition(none) !important; } } }