diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss index 1f34166c6..9ebe5d0d7 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -54,13 +54,18 @@ transition: all ease-in-out 180ms; user-select: none; svg[data-icon="caret-right"] { + margin-right: 0; + font-size: 1rem; transition: all ease-in-out 180ms; transform: rotate(0deg); - transform-origin: 25% 50%; + transform-origin: 50% 50%; } &.open svg[data-icon="caret-right"] { transform: rotate(90deg); } + svg[data-icon="caret-right"] + * { + margin-left: $-xs; + } } [overlay] { diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 74b0d9938..7182e8f7e 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -85,7 +85,7 @@ .sidebar-page-nav { $nav-indent: $-m; list-style: none; - margin: $-s 0 $-m 2px; + margin: $-s 0 $-m $-xs; position: relative; &:after { content: ''; @@ -140,61 +140,68 @@ } // Sidebar list -.book-tree .book.entity-list-item { - font-size: 0.6rem; - h4 { - font-size: 1rem; - margin: 0; - } -} -.book-tree .sidebar-page-list { +.book-tree .sidebar-page-list { list-style: none; - margin: $-xs 0 0; + margin: $-xs -$-s 0 -$-s; padding-left: 0; padding-right: 0; position: relative; + + &:after, .sub-menu:after { + content: ''; + display: block; + position: absolute; + left: $-m; + top: 1rem; + bottom: 1rem; + border-left: 4px solid rgba(0, 0, 0, 0.1); + z-index: 0; + } + ul { list-style: none; padding-left: 1rem; padding-right: 0; } - .entity-icon { - font-size: 12px; - z-index: 2; - background-color: #FFF; + .entity-list-item { + padding-top: $-xxs; + padding-bottom: $-xxs; + .content { + padding-top: $-xs; + padding-bottom: $-xs; + } + } + .entity-list-item.no-hover { + margin-top: -$-xs; + padding-right: 0; } .entity-list-item-name { font-size: 1em; margin: 0; } - .entity-list-item { - font-size: 0.8rem; - } - .entity-list-item.selected { - background-color: #F2F2F2; - } .chapter-child-menu { - font-size: 12px; - padding-left: 2rem; + font-size: .8rem; margin-top: -.2rem; + margin-left: -1rem; } [chapter-toggle] { padding-left: 1.5rem; padding-bottom: .2rem; } - .icon { + .entity-list-item .icon { z-index: 2; - } - &:after, .sub-menu:after { - content: ''; - display: block; - position: absolute; - left: 1.6rem; - top: 1rem; - bottom: 1rem; - border-left: 2px solid #DDD; + width: 4px; + height: auto; + align-self: stretch; + flex-shrink: 0; + border-radius: 1px; opacity: 0.6; - z-index: 0; + } + .entity-list-item .icon:after { + opacity: 1; + } + .entity-list-item .icon svg { + display: none; } } diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index 7792aee83..df1132de5 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/sass/styles.scss @@ -212,12 +212,6 @@ $btt-size: 40px; } } -.entity-list-item.selected { - h3, i, p ,a, span { - color: #EEE; - } -} - .scroll-box { max-height: 250px; overflow-y: scroll; diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php index e106b3704..bdfe4a480 100644 --- a/resources/views/books/index.blade.php +++ b/resources/views/books/index.blade.php @@ -2,6 +2,10 @@ @section('container-classes', 'mt-xl') +@section('body') + @include('books.list', ['books' => $books, 'view' => $view]) +@stop + @section('left') @if($recents)