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