]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_lists.scss
Added cross-book page/chapter sorting
[bookstack] / resources / assets / sass / _lists.scss
1 .page-list {
2   h3 {
3     margin: $-l 0 $-m 0;
4   }
5   a.chapter {
6     color: $color-chapter;
7   }
8   .inset-list {
9     display: block;
10     overflow: hidden;
11     // padding-left: $-m;
12     margin-bottom: $-l;
13   }
14   h4 {
15     display: block;
16     margin: $-s 0 0 0;
17     border-left: 5px solid $color-page;
18     padding: $-xs 0 $-xs $-m;
19   }
20   hr {
21     margin-top: 0;
22   }
23   .page, .chapter, .book {
24     padding-left: $-l;
25   }
26   .page {
27     border-left: 5px solid $color-page;
28   }
29   .chapter {
30     border-left: 5px solid $color-chapter;
31   }
32   .book {
33     border-left: 5px solid $color-book;
34   }
35 }
36 .chapter-toggle {
37   cursor: pointer;
38   margin: 0 0 $-l 0;
39   transition: all ease-in-out 180ms;
40   user-select: none;
41   i {
42     transition: all ease-in-out 180ms;
43     transform: rotate(0deg);
44     transform-origin: 25% 50%;
45   }
46   &.open {
47     margin-bottom: 0;
48   }
49   &.open i {
50     transform: rotate(90deg);
51   }
52 }
53
54 .page-nav-list {
55   $nav-indent: $-s;
56   margin-left: 2px;
57   list-style: none;
58   li {
59     //border-left: 1px solid rgba(0, 0, 0, 0.1);
60     padding-left: $-xs;
61     border-left: 2px solid #888;
62     margin-bottom: 4px;
63   }
64   li a {
65     color: #555;
66   }
67   .nav-H2 {
68     margin-left: $nav-indent;
69     font-size: 0.95em;
70   }
71   .nav-H3 {
72     margin-left: $nav-indent*2;
73     font-size: 0.90em
74   }
75   .nav-H4 {
76     margin-left: $nav-indent*3;
77     font-size: 0.85em
78   }
79   .nav-H5 {
80     margin-left: $nav-indent*4;
81     font-size: 0.80em
82   }
83   .nav-H6 {
84     margin-left: $nav-indent*5;
85     font-size: 0.75em
86   }
87 }
88
89 // Sidebar list
90 .book-tree {
91   margin-top: $-xl;
92 }
93 .book-tree h4 {
94   padding: $-m $-s 0 $-s;
95   i {
96     padding-right: $-s;
97   }
98 }
99 .book-tree .sidebar-page-list {
100   list-style: none;
101   margin: 0;
102   margin-top: $-xs;
103   border-left: 5px solid $color-book;
104   li a {
105     display: block;
106     border-bottom: none;
107     padding-left: $-s;
108     padding: $-xs 0 $-xs $-s;
109     &:hover {
110       background-color: rgba(255, 255, 255, 0.2);
111       text-decoration: none;
112     }
113   }
114   li, a {
115     display: block;
116   }
117   a.bold {
118     color: #EEE !important;
119   }
120   ul {
121     list-style: none;
122     margin: 0;
123   }
124   .book {
125     color: $color-book !important;
126     &.selected {
127       background-color: rgba($color-book, 0.29);
128     }
129   }
130   .chapter {
131     color: $color-chapter !important;
132     &.selected {
133       background-color: rgba($color-chapter, 0.12);
134     }
135   }
136   .list-item-chapter {
137     border-left: 5px solid $color-chapter;
138     margin: 10px 10px;
139     display: block;
140   }
141   .list-item-page {
142     border-bottom: none;
143   }
144   .page {
145     color: $color-page !important;
146     border-left: 5px solid $color-page;
147     margin: 10px 10px;
148     border-bottom: none;
149     &.selected {
150       background-color: rgba($color-page, 0.1);
151     }
152   }
153 }
154
155 // Sortable Lists
156 .sortable-page-list, .sortable-page-list ul {
157   list-style: none;
158   background-color: #FFF;
159 }
160 .sort-box {
161   margin-bottom: $-m;
162   padding: 0 $-l 0 $-l;
163   border-left: 4px solid $color-book;
164 }
165 .sortable-page-list {
166   margin-left: 0;
167   > ul {
168     margin-left: 0;
169   }
170   ul {
171     margin-bottom: 0;
172     margin-top: 0;
173     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
174   }
175   li {
176     border: 1px solid #DDD;
177     padding: $-xs $-s;
178     margin-top: -1px;
179     min-height: 38px;
180     &.text-chapter {
181       border-left: 2px solid $color-chapter;
182     }
183     &.text-page {
184       border-left: 2px solid $color-page;
185     }
186   }
187   li:first-child {
188     margin-top: $-xs;
189   }
190 }
191 .sortable-page-list li.placeholder {
192   position: relative;
193 }
194 .sortable-page-list li.placeholder:before {
195   position: absolute;
196 }
197
198
199 .activity-list-item {
200   padding: $-s 0;
201   color: #888;
202   border-bottom: 1px solid #EEE;
203   font-size: 0.9em;
204   .left {
205     float: left;
206   }
207   .left + .right {
208     margin-left: 30px + $-s;
209   }
210 }