BookStack/resources/assets/sass/_lists.scss
Dan Brown 7215392784 Changed when revisions are saved and update changelog input
Revisions are now saved when te page content is originally saved whereas before they were saved on the next update to the page.
2016-07-10 12:12:52 +01:00

400 lines
6.8 KiB
SCSS

.page-list {
h3 {
margin: $-l 0 $-xs 0;
font-size: 1.666em;
}
a.chapter {
color: $color-chapter;
}
.inset-list {
display: none;
overflow: hidden;
margin-bottom: $-l;
}
h4 {
display: block;
margin: $-s 0 0 0;
border-left: 5px solid $color-page;
padding: $-xs 0 $-xs $-m;
&.draft {
border-left-color: $color-page-draft;
}
}
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;
}
}
.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;
}
}
.chapter-toggle {
cursor: pointer;
margin: 0 0 $-l 0;
transition: all ease-in-out 180ms;
user-select: none;
i.zmdi-caret-right {
transition: all ease-in-out 180ms;
transform: rotate(0deg);
transform-origin: 25% 50%;
}
&.open {
margin-bottom: 0;
}
&.open i.zmdi-caret-right {
transform: rotate(90deg);
}
}
.page-nav-list {
$nav-indent: $-s;
margin-left: 2px;
list-style: none;
li {
//border-left: 1px solid rgba(0, 0, 0, 0.1);
padding-left: $-xs;
border-left: 2px solid #888;
margin-bottom: 4px;
}
li a {
color: #555;
}
.nav-H2 {
margin-left: $nav-indent;
font-size: 0.95em;
}
.nav-H3 {
margin-left: $nav-indent*2;
font-size: 0.90em
}
.nav-H4 {
margin-left: $nav-indent*3;
font-size: 0.85em
}
.nav-H5 {
margin-left: $nav-indent*4;
font-size: 0.80em
}
.nav-H6 {
margin-left: $nav-indent*5;
font-size: 0.75em
}
}
// Sidebar list
.book-tree {
padding: $-l 0 0 0;
position: relative;
right: 0;
top: 0;
transition: ease-in-out 240ms;
transition-property: right, border;
border-left: 0px solid #FFF;
background-color: #FFF;
&.fixed {
position: fixed;
top: 0;
padding-left: $-l;
padding-right: $-l + 15;
width: 30%;
right: -15px;
height: 100%;
overflow-y: scroll;
-ms-overflow-style: none;
//background-color: $primary-faded;
border-left: 1px solid #DDD;
&::-webkit-scrollbar { width: 0 !important }
}
}
.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;
}
ul {
list-style: none;
margin: 0;
}
.book {
color: $color-book !important;
&.selected {
background-color: rgba($color-book, 0.29);
}
}
.chapter {
color: $color-chapter !important;
&.selected {
background-color: rgba($color-chapter, 0.12);
}
}
.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;
}
.page {
color: $color-page !important;
border-bottom: none;
&.selected {
background-color: rgba($color-page, 0.1);
}
}
.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;
}
.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;
border-bottom: 1px solid #EEE;
font-size: 0.9em;
.left {
float: left;
}
.left + .right {
margin-left: 30px + $-s;
}
}
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;
color: #888;
user-select: none;
&.disabled {
cursor: not-allowed;
}
}
li.active span {
background-color: rgba($primary, 0.8);
color: #EEE;
border-color: rgba($primary, 0.8);
}
a {
color: $primary;
}
}
.compact ul.pagination {
margin: 0;
}
.entity-list {
>div {
padding: $-m 0;
}
h3 {
margin: 0;
}
p {
margin: $-xs 0 0 0;
}
hr {
margin: 0;
}
.text-small.text-muted {
color: #AAA;
font-size: 0.75em;
margin-top: $-xs;
}
.page.draft .text-page {
color: $color-page-draft;
}
}
.entity-list.compact {
font-size: 0.6em;
h3, a {
line-height: 1.2;
}
p {
display: none;
font-size: $fs-m * 0.8;
padding-top: $-xs;
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;
text-align: left !important;
&.wide {
min-width: 220px;
}
.text-muted {
color: #999;
}
li.padded {
padding: $-xs $-m;
}
a {
display: block;
padding: $-xs $-m;
color: #555;
&:hover {
text-decoration: none;
background-color: #EEE;
}
i {
margin-right: $-s;
padding-right: 0;
display: inline-block;
width: 16px;
}
}
li.border-bottom {
border-bottom: 1px solid #DDD;
}
}