webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-01-03 23:42:28 +03:00
Code Activity

Updated styles to use logical properties/values

Browse Source 
- Intended to improve RTL support in the interface.
- Also adds hebrew to language dropdown since that was missing.

Related to #1794
This commit is contained in:
Dan Brown
2020-04-05 13:07:19 +01:00
parent f84bf8e883
commit f94fd44ff6
21 changed files with 228 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
resources/sass/_lists.scss
View File

@@ -6,7 +6,7 @@
justify-self: stretch;
align-self: stretch;
height: auto;
margin-right: $-l;
margin-inline-end: $-l;
}
.icon:after {
opacity: 0.5;
@@ -60,7 +60,7 @@
border-radius: 0 4px 4px 0;
padding: $-xs $-m;
width: 100%;
text-align: left;
text-align: start;
}
.chapter-expansion-toggle:hover {
background-color: rgba(0, 0, 0, 0.06);
@@ -88,13 +88,17 @@
.sidebar-page-nav {
$nav-indent: $-m;
list-style: none;
margin: $-s 0 $-m $-xs;
@include margin($-s, 0, $-m, $-xs);
position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
@include rtl {
left: auto;
right: 0;
}
background-color: rgba(0, 0, 0, 0.2);
width: 2px;
top: 5px;
@@ -107,22 +111,22 @@
position: relative;
}
.h1 {
padding-left: $nav-indent;
padding-inline-start: $nav-indent;
}
.h2 {
padding-left: $nav-indent * 1.5;
padding-inline-start: $nav-indent * 1.5;
}
.h3 {
padding-left: $nav-indent * 2;
padding-inline-start: $nav-indent * 2;
}
.h4 {
padding-left: $nav-indent * 2.5;
padding-inline-start: $nav-indent * 2.5;
}
.h5 {
padding-left: $nav-indent*3;
padding-inline-start: $nav-indent*3;
}
.h6 {
padding-left: $nav-indent*3.5;
padding-inline-start: $nav-indent*3.5;
}
.current-heading {
font-weight: bold;
@@ -139,15 +143,19 @@
border-radius: 50%;
box-shadow: 0 0 0 6px #F2F2F2;
z-index: 1;
@include rtl {
left: auto;
right: -2px;
}
}
}
// Sidebar list
.book-tree .sidebar-page-list {
list-style: none;
margin: $-xs -$-s 0 -$-s;
padding-left: 0;
padding-right: 0;
@include margin($-xs, -$-s, 0, -$-s);
padding-inline-start: 0;
padding-inline-end: 0;
position: relative;
&:after, .sub-menu:after {
@@ -157,14 +165,18 @@
left: $-m;
top: 1rem;
bottom: 1rem;
border-left: 4px solid rgba(0, 0, 0, 0.1);
border-inline-start: 4px solid rgba(0, 0, 0, 0.1);
z-index: 0;
@include rtl {
left: auto;
right: $-m;
}
}
ul {
list-style: none;
padding-left: 1rem;
padding-right: 0;
padding-inline-start: 1rem;
padding-inline-end: 0;
}
.entity-list-item {
@@ -183,7 +195,7 @@
}
.entity-list-item.no-hover {
margin-top: -$-xs;
padding-right: 0;
padding-inline-end: 0;
}
.entity-list-item-name {
font-size: 1em;
@@ -192,10 +204,10 @@
.chapter-child-menu {
font-size: .8rem;
margin-top: -.2rem;
margin-left: -1rem;
margin-inline-start: -1rem;
}
[chapter-toggle] {
padding-left: .7rem;
padding-inline-start: .7rem;
padding-bottom: .2rem;
}
.entity-list-item .icon {
@@ -218,7 +230,7 @@
.chapter-child-menu {
ul.sub-menu {
display: none;
padding-left: 0;
padding-inline-start: 0;
position: relative;
}
[chapter-toggle].open + .sub-menu {
@@ -254,10 +266,10 @@
justify-content: space-between;
}
.sort-box-options .button {
margin-left: 0;
margin-inline-start: 0;
}
.sortable-page-list {
margin-left: 0;
margin-inline-start: 0;
padding: 0;
.entity-list-item > span:first-child {
align-self: flex-start;
@@ -267,12 +279,12 @@
flex: 1;
}
> ul {
margin-left: 0;
margin-inline-start: 0;
}
ul {
margin-bottom: $-m;
margin-top: 0;
padding-left: $-m;
padding-inline-start: $-m;
}
li {
border: 1px solid #DDD;
@@ -280,7 +292,7 @@
min-height: 38px;
}
li.text-page, li.text-chapter {
border-left: 2px solid currentColor;
border-inline-start: 2px solid currentColor;
}
li:first-child {
margin-top: $-xs;
@@ -320,7 +332,7 @@ ul.pagination {
display: inline-block;
list-style: none;
margin: $-m 0;
padding-left: 1px;
padding-inline-start: 1px;
li {
float: left;
}
@@ -338,7 +350,7 @@ ul.pagination {
display: block;
padding: $-xxs $-s;
border: 1px solid #CCC;
margin-left: -1px;
margin-inline-start: -1px;
user-select: none;
&.disabled {
cursor: not-allowed;
@@ -402,13 +414,13 @@ ul.pagination {
color: #666;
}
> span:first-child {
margin-right: $-m;
margin-inline-end: $-m;
flex-basis: 1.88em;
flex: none;
}
> span:last-child {
flex: 1;
text-align: left;
text-align: start;
}
&:not(.no-hover) {
cursor: pointer;
@@ -438,7 +450,7 @@ ul.pagination {
position: relative;
top: 1px;
svg {
margin-right: 0;
margin-inline-end: 0;
}
}
@@ -460,7 +472,7 @@ ul.pagination {
text-overflow: ellipsis;
height: 2.5em;
overflow: hidden;
text-align: left;
text-align: start;
display: block;
white-space: nowrap;
}
@@ -474,7 +486,7 @@ ul.pagination {
background-position: 50% 50%;
border-radius: 3px;
position: relative;
margin-right: $-l;
margin-inline-end: $-l;
&.entity-list-item-image-wide {
width: 220px;
@@ -484,7 +496,7 @@ ul.pagination {
color: #FFF;
fill: #FFF;
font-size: 1.66rem;
margin-right: 0;
margin-inline-end: 0;
position: absolute;
bottom: $-xs;
left: $-xs;
@@ -550,7 +562,7 @@ ul.pagination {
padding: $-xs 0;
color: #555;
fill: #555;
text-align: left !important;
text-align: start !important;
&.wide {
min-width: 220px;
}
@@ -577,14 +589,14 @@ ul.pagination {
outline-offset: -2px;
}
svg {
margin-right: $-s;
margin-inline-end: $-s;
display: inline-block;
width: 16px;
}
}
button {
width: 100%;
text-align: left;
text-align: start;
}
li.border-bottom {
border-bottom: 1px solid #DDD;
@@ -615,7 +627,7 @@ ul.pagination {
color: #FFF;
fill: #FFF;
font-size: 2rem;
margin-right: 0;
margin-inline-end: 0;
position: absolute;
bottom: 10px;
left: 6px;