]> BookStack Code Mirror - bookstack/blob - resources/sass/_lists.scss
Removed old str_random functions from seeders
[bookstack] / resources / sass / _lists.scss
1
2 .book-contents .entity-list-item {
3   .icon {
4     width: 4px;
5     border-radius: 1px;
6     justify-self: stretch;
7     align-self: stretch;
8     height: auto;
9     margin-right: $-l;
10   }
11   .icon:after {
12     opacity: 0.5;
13   }
14   .icon svg {
15     display: none;
16   }
17   p {
18     margin-bottom: 0;
19   }
20   .inner-page {
21     padding-top: 0;
22     padding-bottom: 0;
23   }
24 }
25
26 .entity-list-item + .chapter-expansion {
27   display: flex;
28   padding: 0 $-m $-m $-m;
29   align-items: center;
30   border: 0;
31   width: 100%;
32   position: relative;
33   > .icon {
34     width: 4px;
35     height: auto;
36     border-radius: 0 0 1px 1px;
37     align-self: stretch;
38     flex-shrink: 0;
39     &:before {
40       position: absolute;
41       top: 0;
42       left: 0;
43       width: 100%;
44       height: 1px;
45       background-color: currentColor;
46       content: '';
47       opacity: 0.5;
48     }
49     &:after {
50       opacity: 0.5;
51     }
52   }
53   .icon svg {
54     display: none;
55   }
56   > .content {
57     flex: 1;
58   }
59   .chapter-expansion-toggle {
60     border-radius: 0 4px 4px 0;
61     padding: $-xs $-m;
62     width: 100%;
63     text-align: left;
64   }
65   .chapter-expansion-toggle:hover {
66     background-color: rgba(0, 0, 0, 0.06);
67   }
68 }
69
70 .entity-list-item.has-children {
71   padding-bottom: 0;
72   > .icon {
73     border-radius: 4px 4px 0 0;
74   }
75 }
76
77 .inset-list {
78   display: none;
79   .entity-list-item-name {
80     font-size: 1rem;
81   }
82   .entity-list-item-children {
83     padding-top: 0;
84     padding-bottom: 0;
85   }
86 }
87
88 .sidebar-page-nav {
89   $nav-indent: $-m;
90   list-style: none;
91   margin: $-s 0 $-m $-xs;
92   position: relative;
93   &:after {
94     content: '';
95     display: block;
96     position: absolute;
97     left: 0;
98     background-color: rgba(0, 0, 0, 0.2);
99     width: 2px;
100     top: 5px;
101     bottom: 5px;
102     z-index: 0;
103   }
104   li {
105     margin-bottom: 4px;
106     font-size: 0.95em;
107     position: relative;
108   }
109   .h1 {
110     padding-left: $nav-indent;
111   }
112   .h2 {
113     padding-left: $nav-indent * 1.5;
114   }
115   .h3 {
116     padding-left: $nav-indent * 2;
117   }
118   .h4 {
119     padding-left: $nav-indent * 2.5;
120   }
121   .h5 {
122     padding-left: $nav-indent*3;
123   }
124   .h6 {
125     padding-left: $nav-indent*3.5;
126   }
127   .current-heading {
128     font-weight: bold;
129   }
130   li:not(.current-heading) .sidebar-page-nav-bullet {
131     background-color: #BBB !important;
132   }
133   .sidebar-page-nav-bullet {
134     width: 6px;
135     height: 6px;
136     position: absolute;
137     left: -2px;
138     top: 30%;
139     border-radius: 50%;
140     box-shadow: 0 0 0 6px #F2F2F2;
141     z-index: 1;
142   }
143 }
144
145 // Sidebar list
146 .book-tree .sidebar-page-list  {
147   list-style: none;
148   margin: $-xs -$-s 0 -$-s;
149   padding-left: 0;
150   padding-right: 0;
151   position: relative;
152
153   &:after, .sub-menu:after {
154     content: '';
155     display: block;
156     position: absolute;
157     left: $-m;
158     top: 1rem;
159     bottom: 1rem;
160     border-left: 4px solid rgba(0, 0, 0, 0.1);
161     z-index: 0;
162   }
163
164   ul {
165     list-style: none;
166     padding-left: 1rem;
167     padding-right: 0;
168   }
169
170   .entity-list-item {
171     padding-top: $-xxs;
172     padding-bottom: $-xxs;
173     background-clip: content-box;
174     border-radius: 0 3px 3px 0;
175     .content {
176       padding-top: $-xs;
177       padding-bottom: $-xs;
178       max-width: calc(100% - 20px);
179     }
180   }
181   .entity-list-item.selected {
182     background-color: rgba(0, 0, 0, 0.08);
183   }
184   .entity-list-item.no-hover {
185     margin-top: -$-xs;
186     padding-right: 0;
187   }
188   .entity-list-item-name {
189     font-size: 1em;
190     margin: 0;
191   }
192   .chapter-child-menu {
193     font-size: .8rem;
194     margin-top: -.2rem;
195     margin-left: -1rem;
196   }
197   [chapter-toggle] {
198     padding-left: .7rem;
199     padding-bottom: .2rem;
200   }
201   .entity-list-item .icon {
202     z-index: 2;
203     width: 4px;
204     height: auto;
205     align-self: stretch;
206     flex-shrink: 0;
207     border-radius: 1px;
208     opacity: 0.6;
209   }
210   .entity-list-item .icon:after {
211     opacity: 1;
212   }
213   .entity-list-item .icon svg {
214     display: none;
215   }
216 }
217
218 .chapter-child-menu {
219   ul.sub-menu {
220     display: none;
221     padding-left: 0;
222     position: relative;
223   }
224   [chapter-toggle].open + .sub-menu {
225     display: block;
226   }
227 }
228
229 // Sortable Lists
230 .sortable-page-list, .sortable-page-list ul {
231   list-style: none;
232 }
233 .sort-box {
234   margin-bottom: $-m;
235   padding: $-m $-xl;
236   position: relative;
237   &::before {
238     content: '';
239     border-radius: 4px;
240     opacity: 0.5;
241     border: 2px solid var(--color-book);
242     display: block;
243     top: 0;
244     bottom: 0;
245     left: 0;
246     right: 0;
247     position: absolute;
248   }
249 }
250 .sort-box-options {
251   display: flex;
252   flex-wrap: wrap;
253   justify-content: space-between;
254 }
255 .sort-box-options .button {
256   margin-left: 0;
257 }
258 .sortable-page-list {
259   margin-left: 0;
260   padding: 0;
261   .entity-list-item > span:first-child {
262     align-self: flex-start;
263   }
264   .entity-list-item > div {
265     display: block;
266     flex: 1;
267   }
268   > ul {
269     margin-left: 0;
270   }
271   ul {
272     margin-bottom: $-m;
273     margin-top: 0;
274     padding-left: $-m;
275   }
276   li {
277     border: 1px solid #DDD;
278     margin-top: -1px;
279     min-height: 38px;
280   }
281   li.text-page, li.text-chapter {
282     border-left: 2px solid currentColor;
283   }
284   li:first-child {
285     margin-top: $-xs;
286   }
287 }
288 .sortable-page-list li.placeholder {
289   position: relative;
290 }
291 .sortable-page-list li.placeholder:before {
292   position: absolute;
293 }
294
295 .activity-list-item {
296   padding: $-s 0;
297   display: grid;
298   grid-template-columns: min-content 1fr;
299   grid-column-gap: $-m;
300   font-size: 0.9em;
301 }
302 .card .activity-list-item {
303   padding: $-s $-m;
304 }
305
306 .user-list-item {
307   display: inline-grid;
308   padding: $-s;
309   grid-template-columns: min-content 1fr;
310   grid-column-gap: $-m;
311   font-size: 0.9em;
312   align-items: center;
313   > div:first-child {
314     line-height: 0;
315   }
316 }
317
318 ul.pagination {
319   display: inline-block;
320   list-style: none;
321   margin: $-m 0;
322   padding-left: 1px;
323   li {
324     float: left;
325   }
326   li:first-child {
327     a, span {
328       border-radius: 3px 0 0 3px;
329     }
330   }
331   li:last-child {
332     a, span {
333       border-radius: 0 3px 3px 0;
334     }
335   }
336   a, span {
337     display: block;
338     padding: $-xxs $-s;
339     border: 1px solid #CCC;
340     margin-left: -1px;
341     user-select: none;
342     &.disabled {
343       cursor: not-allowed;
344     }
345   }
346   li.active span {
347     color: #FFF;
348   }
349 }
350
351 .compact ul.pagination {
352   margin: 0;
353 }
354
355 .entity-list, .icon-list {
356   margin: 0 (-$-m);
357   h4 {
358     margin: 0;
359   }
360   hr {
361     margin: 0;
362   }
363   .text-small.text-muted {
364     color: #AAA;
365     font-size: 0.75em;
366     margin-top: $-xs;
367   }
368   .text-muted p.text-muted {
369     margin-top: 0;
370   }
371   .page.draft .text-page {
372     color: var(--color-page-draft);
373     fill: var(--color-page-draft);
374   }
375   > .dropdown-container {
376     display: block;
377   }
378 }
379
380 .icon-list hr {
381   margin: $-s $-m;
382   max-width: 140px;
383   opacity: 0.25;
384   height: 1.1px;
385 }
386
387 .icon-list hr + hr, .icon-list hr:first-child, .icon-list hr:last-child {
388   display: none;
389 }
390
391 .entity-list-item, .icon-list-item {
392   padding: $-s $-m;
393   display: flex;
394   align-items: center;
395   background-color: transparent;
396   border: 0;
397   width: 100%;
398   position: relative;
399   word-break: break-word;
400   h4 a {
401     color: #666;
402   }
403   > span:first-child {
404     margin-right: $-m;
405     flex-basis: 1.88em;
406     flex: none;
407   }
408   > span:last-child {
409     flex: 1;
410     text-align: left;
411   }
412   &:not(.no-hover) {
413     cursor: pointer;
414   }
415   &:not(.no-hover):hover {
416     text-decoration: none;
417     background-color: rgba(0, 0, 0, 0.1);
418     border-radius: 4px;
419   }
420   &.outline-hover {
421     border: 1px solid transparent;
422   }
423   &.outline-hover:hover {
424     background-color: transparent;
425     border-color: rgba(0, 0, 0, 0.1);
426   }
427   &:focus {
428     background-color: #eee;
429     outline: 1px dotted #666;
430     outline-offset: -2px;
431   }
432 }
433
434 .entity-list-item-path-sep {
435   display: inline-block;
436   vertical-align: top;
437   position: relative;
438   top: 1px;
439   svg {
440     margin-right: 0;
441   }
442 }
443
444 .card .entity-list-item:not(.no-hover):hover {
445   background-color: #F2F2F2;
446 }
447 .card .entity-list-item .entity-list-item:hover {
448   background-color: #EEEEEE;
449 }
450
451 .entity-list-item-children {
452   padding: $-m;
453   > div {
454     overflow: hidden;
455     padding: $-xs 0;
456     margin-top: -$-xs;
457   }
458   .entity-chip {
459     text-overflow: ellipsis;
460     height: 2.5em;
461     overflow: hidden;
462     text-align: left;
463     display: block;
464     white-space: nowrap;
465   }
466 }
467
468 .entity-list-item-image {
469   align-self: stretch;
470   width: 140px;
471   flex: none;
472   background-size: cover;
473   background-position: 50% 50%;
474   border-radius: 3px;
475   position: relative;
476   margin-right: $-l;
477
478   &.entity-list-item-image-wide {
479     width: 220px;
480   }
481
482   .svg-icon {
483     color: #FFF;
484     fill: #FFF;
485     font-size: 1.66rem;
486     margin-right: 0;
487     position: absolute;
488     bottom: $-xs;
489     left: $-xs;
490   }
491
492   @include smaller-than($m) {
493     width: 80px;
494   }
495 }
496
497 .chapter > .entity-list-item-image {
498   width: 60px;
499 }
500
501 .entity-list.compact {
502   font-size: 0.6 * $fs-m;
503   h4, a {
504     line-height: 1.2;
505   }
506   .entity-item-snippet {
507     display: none;
508   }
509   .entity-list-item p {
510     font-size: $fs-m * 0.8;
511     padding-top: $-xs;
512   }
513   p {
514     margin: 0;
515   }
516   > p.empty-text {
517     display: block;
518     font-size: $fs-m;
519   }
520   hr {
521     margin: 0;
522   }
523   @include smaller-than($m) {
524     h4 {
525       font-size: 1.666em;
526     }
527   }
528 }
529
530 .dropdown-container {
531   display: inline-block;
532   vertical-align: top;
533   position: relative;
534 }
535
536 .dropdown-menu {
537   display: none;
538   position: absolute;
539   z-index: 999;
540   top: 0;
541   list-style: none;
542   right: 0;
543   margin: $-m 0;
544   background-color: #FFFFFF;
545   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
546   border-radius: 1px;
547   border: 1px solid #EEE;
548   min-width: 180px;
549   padding: $-xs 0;
550   color: #555;
551   fill: #555;
552   text-align: left !important;
553   &.wide {
554     min-width: 220px;
555   }
556   .text-muted {
557     color: #999;
558     fill: #999;
559   }
560   li.active a {
561     font-weight: 600;
562   }
563   a, button {
564     display: block;
565     padding: $-xs $-m;
566     color: #555;
567     fill: currentColor;
568     white-space: nowrap;
569     &:hover, &:focus {
570       text-decoration: none;
571       background-color: var(--color-primary-light);
572       color: var(--color-primary);
573     }
574     &:focus {
575       outline: 1px solid var(--color-primary);
576       outline-offset: -2px;
577     }
578     svg {
579       margin-right: $-s;
580       display: inline-block;
581       width: 16px;
582     }
583   }
584   button {
585     width: 100%;
586     text-align: left;
587   }
588   li.border-bottom {
589     border-bottom: 1px solid #DDD;
590   }
591 }
592
593 // Books grid view
594 .featured-image-container {
595   position: relative;
596   overflow: hidden;
597   min-height: 140px;
598   background-size: cover;
599   background-position: 50% 50%;
600   transition: opacity ease-in-out 240ms;
601   a {
602     display: block;
603   }
604   img {
605     display: block;
606     width: 100%;
607     max-width: 100%;
608     height: auto;
609   }
610 }
611 .featured-image-container-wrap {
612   position: relative;
613   .svg-icon {
614     color: #FFF;
615     fill: #FFF;
616     font-size: 2rem;
617     margin-right: 0;
618     position: absolute;
619     bottom: 10px;
620     left: 6px;
621   }
622 }
623 .grid-card:hover .featured-image-container {
624   opacity: .5;
625 }
626
627 .action-link-list {
628   //padding: $-s 0;
629 }
630 .action-link {
631   background: transparent;
632   border: none;
633   color: currentColor;
634   padding: $-m 0;
635 }
636
637 .active-link-list {
638   a {
639     display: inline-block;
640     padding: $-s;
641   }
642   a:not(.active) {
643     color: #444;
644     fill: #444;
645   }
646   a:hover {
647     background-color: rgba(0, 0, 0, 0.05);
648     border-radius: 3px;
649     text-decoration: none;
650   }
651 }