BookStack/resources/assets/sass/_lists.scss
2018-09-11 22:42:25 +04:00

440 lines
7.2 KiB
SCSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.page-list {
h4 {
margin: $-l 0 $-xs 0;
font-size: 1.666em;
}
a.chapter {
color: $color-chapter;
}
.inset-list {
display: none;
overflow: hidden;
}
h5 {
display: block;
margin: $-s 0 0 0;
border-left: 5px solid $color-page;
padding: $-xs 0 $-xs $-m;
font-size: 1.1em;
font-weight: normal;
&.draft {
border-left-color: $color-page-draft;
}
}
.entity-list-item {
margin-bottom: $-m;
}
hr {
margin-top: 0;
}
.page, .chapter, .book {
padding-left: $-l;
}
.page {
border-left: 5px solid $color-page;
}
.page.draft {
border-left: 5px solid $color-page-draft;
.text-page {
color: $color-page-draft;
fill: $color-page-draft;
}
}
.chapter {
border-left: 5px solid $color-chapter;
}
.book {
border-left: 5px solid $color-book;
}
.meta {
margin-top: -$-m;
font-size: 0.95em;
}
.meta span {
margin-right: $-s;
}
}
@include smaller-than($s) {
.page-list h4 {
font-size: 1.333em;
}
}
.sidebar-page-nav {
$nav-indent: $-s;
list-style: none;
margin: $-s 0 $-m 2px;
border-left: 2px dotted #BBB;
li {
padding-left: $-s;
margin-bottom: 4px;
font-size: 0.95em;
}
.h1 {
margin-left: -2px;
}
.h2 {
margin-left: -2px;
}
.h3 {
margin-left: $nav-indent;
}
.h4 {
margin-left: $nav-indent*2;
}
.h5 {
margin-left: $nav-indent*3;
}
.h6 {
margin-left: $nav-indent*4;
}
.current-heading {
font-weight: bold;
}
}
// Sidebar list
.book-tree {
transition: ease-in-out 240ms;
transition-property: right, border;
}
.book-tree h4 {
padding: $-m $-s 0 $-s;
i {
padding-right: $-s;
}
}
.book-tree .sidebar-page-list {
list-style: none;
margin: $-xs 0 0;
padding-left: 0;
border-left: 5px solid $color-book;
li a {
display: block;
border-bottom: none;
padding: $-xs 0 $-xs $-s;
&:hover {
text-decoration: none;
}
}
li a i {
padding-right: $-xs + 2px;
}
li, a {
display: block;
}
a.bold {
color: #EEE !important;
fill: #EEE !important;
}
ul {
list-style: none;
margin: 0;
}
.book {
color: $color-book !important;
fill: $color-book !important;
&.selected {
background-color: rgba($color-book, 0.29);
}
}
.chapter {
color: $color-chapter !important;
fill: $color-chapter !important;
&.selected {
background-color: rgba($color-chapter, 0.12);
}
}
.page {
color: $color-page !important;
fill: $color-page !important;
border-bottom: none;
&.selected {
background-color: rgba($color-page, 0.1);
}
}
[chapter-toggle] {
padding-left: $-s;
}
.list-item-chapter {
border-left: 5px solid $color-chapter;
margin: 10px 10px;
display: block;
}
.list-item-page {
border-bottom: none;
border-left: 5px solid $color-page;
margin: 10px 10px;
}
.list-item-page.draft {
border-left: 5px solid $color-page-draft;
}
.page.draft .page, .list-item-page.draft a.page {
color: $color-page-draft !important;
fill: $color-page-draft !important;
}
.sub-menu {
display: none;
padding-left: 0;
}
.sub-menu.open {
display: block;
}
}
// Sortable Lists
.sortable-page-list, .sortable-page-list ul {
list-style: none;
background-color: #FFF;
}
.sort-box {
margin-bottom: $-m;
padding: 0 $-l 0 $-l;
border-left: 4px solid $color-book;
}
.sortable-page-list {
margin-left: 0;
> ul {
margin-left: 0;
}
ul {
margin-bottom: 0;
margin-top: 0;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
li {
border: 1px solid #DDD;
padding: $-xs $-s;
margin-top: -1px;
min-height: 38px;
&.text-chapter {
border-left: 2px solid $color-chapter;
}
&.text-page {
border-left: 2px solid $color-page;
}
}
li:first-child {
margin-top: $-xs;
}
}
.sortable-page-list li.placeholder {
position: relative;
}
.sortable-page-list li.placeholder:before {
position: absolute;
}
.activity-list-item {
padding: $-s 0;
color: #888;
fill: #888;
border-bottom: 1px solid #EEE;
font-size: 0.9em;
.left {
float: left;
}
.left + .right {
margin-left: 30px + $-s;
}
&:last-of-type {
border-bottom: 0;
}
}
ul.pagination {
display: inline-block;
list-style: none;
margin: $-m 0;
padding-left: 1px;
li {
float: left;
}
li:first-child {
a, span {
border-radius: 3px 0 0 3px;
}
}
li:last-child {
a, span {
border-radius: 0 3px 3px 0;
}
}
a, span {
display: block;
padding: $-xxs $-s;
border: 1px solid #CCC;
margin-left: -1px;
user-select: none;
&.disabled {
cursor: not-allowed;
}
}
li.active span {
color: #FFF;
}
}
.compact ul.pagination {
margin: 0;
}
.entity-list {
> div {
padding: $-m 0;
}
h4 {
margin: 0;
}
hr {
margin: 0;
}
.text-small.text-muted {
color: #AAA;
font-size: 0.75em;
margin-top: $-xs;
}
.text-muted p.text-muted {
margin-top: 0;
}
.page.draft .text-page {
color: $color-page-draft;
fill: $color-page-draft;
}
}
.card .entity-list-item, .card .activity-list-item {
padding-left: $-m;
padding-right: $-m;
}
.entity-list.compact {
font-size: 0.6em;
h4, a {
line-height: 1.2;
}
.entity-item-snippet {
display: none;
}
.entity-list-item p {
font-size: $fs-m * 0.8;
padding-top: $-xs;
}
p {
margin: 0;
}
> p.empty-text {
display: block;
font-size: $fs-m;
}
hr {
margin: 0;
}
}
.dropdown-container {
display: inline-block;
vertical-align: top;
position: relative;
}
.dropdown-container ul {
display: none;
position: absolute;
z-index: 999;
top: 0;
list-style: none;
right: 0;
margin: $-m 0;
background-color: #FFFFFF;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 1px;
border: 1px solid #EEE;
min-width: 180px;
padding: $-xs 0;
color: #555;
fill: #555;
text-align: left !important;
&.wide {
min-width: 220px;
}
.text-muted {
color: #999;
fill: #999;
}
li.padded {
padding: $-xs $-m;
line-height: 1.2;
}
a {
display: block;
padding: $-xs $-m;
color: #555;
fill: #555;
white-space: nowrap;
&:hover {
text-decoration: none;
background-color: #EEE;
}
svg {
margin-right: $-s;
display: inline-block;
width: 16px;
}
}
li.border-bottom {
border-bottom: 1px solid #DDD;
}
}
// Books grid view
.featured-image-container {
position: relative;
overflow: hidden;
background: #F2F2F2;
a {
display: block;
}
img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
transition: all .5s ease-in-out;
}
img:hover {
transform: scale(1.15);
opacity: .5;
}
}
.book-grid-item .grid-card-content {
border-top: 0;
border-bottom-width: 2px;
h2 {
width: 100%;
font-size: 1.5em;
margin: 0 0 10px;
}
h2 a {
display: block;
width: 100%;
line-height: 1.2;
color: #009688;;
fill: #009688;;
text-decoration: none;
}
p {
font-size: .85em;
margin: 0;
line-height: 1.6em;
}
}
.book-grid-item .grid-card-footer {
p.small {
font-size: .8em;
margin: 0;
}
}