mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Merge pull request #2003 from BookStackApp/rtl_styles_update
Updated styles to use logical properties/values, for improved RTL support
This commit is contained in:
Dan Brown
GitHub
commit
feab756b9f
@ -11,6 +11,7 @@ class DropDown {
|
||||
this.menu = elem.querySelector('.dropdown-menu, [dropdown-menu]');
|
||||
this.moveMenu = elem.hasAttribute('dropdown-move-menu');
|
||||
this.toggle = elem.querySelector('[dropdown-toggle]');
|
||||
this.direction = (document.dir === 'rtl') ? 'right' : 'left';
|
||||
this.body = document.body;
|
||||
this.showing = false;
|
||||
this.setupListeners();
|
||||
@ -28,7 +29,11 @@ class DropDown {
|
||||
this.rect = this.menu.getBoundingClientRect();
|
||||
this.body.appendChild(this.menu);
|
||||
this.menu.style.position = 'fixed';
|
||||
this.menu.style.left = `${this.rect.left}px`;
|
||||
if (this.direction === 'right') {
|
||||
this.menu.style.right = `${(this.rect.right - this.rect.width)}px`;
|
||||
} else {
|
||||
this.menu.style.left = `${this.rect.left}px`;
|
||||
}
|
||||
this.menu.style.top = `${this.rect.top}px`;
|
||||
this.menu.style.width = `${this.rect.width}px`;
|
||||
}
|
||||
@ -67,7 +72,7 @@ class DropDown {
|
||||
this.toggle.setAttribute('aria-expanded', 'false');
|
||||
if (this.moveMenu) {
|
||||
this.menu.style.position = '';
|
||||
this.menu.style.left = '';
|
||||
this.menu.style[this.direction] = '';
|
||||
this.menu.style.top = '';
|
||||
this.menu.style.width = '';
|
||||
this.container.appendChild(this.menu);
|
||||
|
||||
@ -192,6 +192,7 @@ return [
|
||||
'es' => 'Español',
|
||||
'es_AR' => 'Español Argentina',
|
||||
'fr' => 'Français',
|
||||
'he' => 'עברית',
|
||||
'hu' => 'Magyar',
|
||||
'it' => 'Italian',
|
||||
'ja' => '日本語',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* Callouts
|
||||
*/
|
||||
.callout {
|
||||
border-left: 3px solid #BBB;
|
||||
border-inline-start: 3px solid #BBB;
|
||||
background-color: #EEE;
|
||||
padding: $-s $-s $-s $-xl;
|
||||
display: block;
|
||||
@ -109,7 +109,7 @@
|
||||
background-color: #EEE;
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 0px;
|
||||
margin-inline-end: 0px;
|
||||
}
|
||||
}
|
||||
> div .outline input {
|
||||
@ -177,8 +177,8 @@
|
||||
|
||||
.content-wrap.card {
|
||||
padding: $-m $-xxl;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
margin-bottom: $-xl;
|
||||
overflow: initial;
|
||||
min-height: 60vh;
|
||||
@ -211,7 +211,7 @@
|
||||
.tag-item {
|
||||
display: inline-flex;
|
||||
margin-bottom: $-xs;
|
||||
margin-right: $-xs;
|
||||
margin-inline-end: $-xs;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #CCC;
|
||||
overflow: hidden;
|
||||
@ -229,7 +229,7 @@
|
||||
fill: #888;
|
||||
}
|
||||
.tag-value {
|
||||
border-left: 1px solid #DDD;
|
||||
border-inline-start: 1px solid #DDD;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@ button {
|
||||
}
|
||||
|
||||
.button + .button {
|
||||
margin-left: $-s;
|
||||
margin-inline-start: $-s;
|
||||
}
|
||||
|
||||
.button.small {
|
||||
@ -99,26 +99,28 @@ button {
|
||||
|
||||
.button.block {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button.icon {
|
||||
.svg-icon {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button.svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $-s $-m;
|
||||
padding-bottom: ($-s - 2px);
|
||||
svg {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: $-m;
|
||||
top: $-s - 2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
bottom: auto;
|
||||
margin-inline-end: $-m;
|
||||
}
|
||||
padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
padding: $-m $-l;
|
||||
background-color: #FFF;
|
||||
border-radius: 4px;
|
||||
border-left: 6px solid currentColor;
|
||||
border-inline-start: 6px solid currentColor;
|
||||
box-shadow: $bs-large;
|
||||
z-index: 999999;
|
||||
cursor: pointer;
|
||||
@ -26,7 +26,7 @@
|
||||
svg {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
padding-right: $-s;
|
||||
padding-inline-end: $-s;
|
||||
fill: currentColor;
|
||||
}
|
||||
.dismiss {
|
||||
@ -63,7 +63,7 @@
|
||||
transition: all ease-in-out 180ms;
|
||||
user-select: none;
|
||||
svg[data-icon="caret-right"] {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
font-size: 1rem;
|
||||
transition: all ease-in-out 180ms;
|
||||
transform: rotate(0deg);
|
||||
@ -73,7 +73,7 @@
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
svg[data-icon="caret-right"] + * {
|
||||
margin-left: $-xs;
|
||||
margin-inline-start: $-xs;
|
||||
}
|
||||
}
|
||||
|
||||
@ -243,7 +243,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
width: 300px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-left: 1px solid #DDD;
|
||||
border-inline-start: 1px solid #DDD;
|
||||
.inner {
|
||||
padding: $-m;
|
||||
}
|
||||
@ -477,7 +477,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -27px;
|
||||
margin-inline-start: -27px;
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
@ -511,7 +511,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
width: 80px;
|
||||
margin-left: -40px;
|
||||
margin-inline-start: -40px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
transform: scale(1);
|
||||
border-radius: 8px;
|
||||
@ -568,14 +568,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
left: 44px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-inline-start: 6px solid transparent;
|
||||
border-inline-end: 6px solid transparent;
|
||||
border-bottom: 6px solid $negative;
|
||||
}
|
||||
|
||||
|
||||
.tab-container .nav-tabs {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
border-bottom: 1px solid #DDD;
|
||||
margin-bottom: $-m;
|
||||
.tab-item {
|
||||
@ -613,7 +613,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
max-width: 480px;
|
||||
margin-bottom: $-s;
|
||||
a {
|
||||
margin-right: $-xs;
|
||||
margin-inline-end: $-xs;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -659,7 +659,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
}
|
||||
a { color: #666; }
|
||||
span {
|
||||
padding-left: $-xxs;
|
||||
padding-inline-start: $-xxs;
|
||||
}
|
||||
}
|
||||
.text-muted {
|
||||
@ -692,7 +692,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #DDD;
|
||||
border-inline-start: 1px solid #DDD;
|
||||
}
|
||||
.template-item-actions button {
|
||||
cursor: pointer;
|
||||
|
||||
@ -107,15 +107,15 @@
|
||||
}
|
||||
|
||||
.markdown-display {
|
||||
margin-left: -1px;
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
|
||||
.markdown-editor-display {
|
||||
background-color: #FFFFFF;
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-inline-start: 16px;
|
||||
pmargin-inline-end: 16px;
|
||||
}
|
||||
[drawio-diagram]:hover {
|
||||
outline: 2px solid var(--color-primary);
|
||||
@ -155,12 +155,12 @@ label.radio, label.checkbox {
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
margin-right: $-xs;
|
||||
margin-inline-end: $-xs;
|
||||
}
|
||||
}
|
||||
|
||||
label.inline.checkbox {
|
||||
margin-right: $-m;
|
||||
margin-inline-end: $-m;
|
||||
}
|
||||
|
||||
label + p.small {
|
||||
@ -288,12 +288,12 @@ input[type=color] {
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 4px;
|
||||
.collapse-title {
|
||||
margin-left: -$-m;
|
||||
margin-right: -$-m;
|
||||
margin-inline-start: -$-m;
|
||||
margin-inline-end: -$-m;
|
||||
padding: $-s $-m;
|
||||
display: block;
|
||||
width: calc(100% + 32px);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
.collapse-title, .collapse-title label {
|
||||
cursor: pointer;
|
||||
@ -306,7 +306,7 @@ input[type=color] {
|
||||
.collapse-title label:before {
|
||||
display: inline-block;
|
||||
content: '▸';
|
||||
margin-right: $-m;
|
||||
margin-inline-end: $-m;
|
||||
transition: all ease-in-out 400ms;
|
||||
transform: rotate(0);
|
||||
}
|
||||
@ -373,10 +373,14 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 9px;
|
||||
@include rtl {
|
||||
right: 8px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: block;
|
||||
padding-left: $-l + 4px;
|
||||
padding-inline-start: $-l + 4px;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -34,8 +34,8 @@ header {
|
||||
fill: #FFF;
|
||||
}
|
||||
.dropdown-container {
|
||||
padding-left: $-m;
|
||||
padding-right: 0;
|
||||
padding-inline-start: $-m;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
.avatar, .user-name {
|
||||
display: inline-block;
|
||||
@ -53,7 +53,7 @@ header {
|
||||
vertical-align: top;
|
||||
}
|
||||
> span {
|
||||
padding-left: $-xs;
|
||||
padding-inline-start: $-xs;
|
||||
display: inline-block;
|
||||
padding-top: $-xxs;
|
||||
}
|
||||
@ -62,7 +62,7 @@ header {
|
||||
font-size: 18px;
|
||||
}
|
||||
@include between($l, $xl) {
|
||||
padding-left: $-xs;
|
||||
padding-inline-start: $-xs;
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
@ -87,7 +87,7 @@ header .search-box {
|
||||
border-radius: 40px;
|
||||
color: #EEE;
|
||||
z-index: 2;
|
||||
padding-left: 40px;
|
||||
padding-inline-start: 40px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
@ -97,8 +97,12 @@ header .search-box {
|
||||
fill: #EEE;
|
||||
z-index: 1;
|
||||
left: 16px;
|
||||
@include rtl {
|
||||
left: auto;
|
||||
right: 16px;
|
||||
}
|
||||
svg {
|
||||
margin-right: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
@ -124,12 +128,12 @@ header .search-box {
|
||||
font-size: 1.8em;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
padding: 14px $-l 14px 0;
|
||||
@include padding(14px, $-l, 14px, 0);
|
||||
vertical-align: top;
|
||||
line-height: 1;
|
||||
}
|
||||
.logo-image {
|
||||
margin: $-xs $-s $-xs 0;
|
||||
@include margin($-xs, $-s, $-xs, 0);
|
||||
vertical-align: top;
|
||||
height: 43px;
|
||||
}
|
||||
@ -151,8 +155,14 @@ header .search-box {
|
||||
margin: 0;
|
||||
bottom: -2px;
|
||||
}
|
||||
@include rtl() {
|
||||
left: $-m;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include smaller-than($l) {
|
||||
header .header-links {
|
||||
display: none;
|
||||
@ -169,13 +179,13 @@ header .search-box {
|
||||
}
|
||||
}
|
||||
header .links a, header .dropdown-container ul li a {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
display: block;
|
||||
padding: $-s $-m;
|
||||
color: $text-dark;
|
||||
fill: $text-dark;
|
||||
svg {
|
||||
margin-right: $-s;
|
||||
margin-inline-end: $-s;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #EEE;
|
||||
@ -186,7 +196,7 @@ header .search-box {
|
||||
}
|
||||
header .dropdown-container {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
header .links {
|
||||
display: block;
|
||||
@ -215,7 +225,7 @@ header .search-box {
|
||||
border-bottom: 3px solid #BBB;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
border-right: 1px solid #DDD;
|
||||
border-inline-end: 1px solid #DDD;
|
||||
}
|
||||
&.active {
|
||||
border-bottom-color: currentColor;
|
||||
@ -253,7 +263,7 @@ header .search-box {
|
||||
display: none;
|
||||
}
|
||||
> span:first-child {
|
||||
margin-right: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -269,7 +279,7 @@ header .search-box {
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -282,9 +292,17 @@ header .search-box {
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
right: -$-m;
|
||||
@include rtl {
|
||||
right: auto;
|
||||
left: -$-m;
|
||||
}
|
||||
.breadcrumb-listing-search .svg-icon {
|
||||
position: absolute;
|
||||
left: $-s;
|
||||
@include rtl {
|
||||
right: $-s;
|
||||
left: auto;
|
||||
}
|
||||
top: 11px;
|
||||
fill: #888;
|
||||
pointer-events: none;
|
||||
@ -292,10 +310,10 @@ header .search-box {
|
||||
.breadcrumb-listing-entity-list {
|
||||
max-height: 400px;
|
||||
overflow-y: scroll;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
input {
|
||||
padding-left: $-xl;
|
||||
padding-inline-start: $-xl;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
@ -337,25 +355,25 @@ header .search-box {
|
||||
display: inline-block;
|
||||
padding: $-xs $-s;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.action-buttons .dropdown-container:last-child a {
|
||||
padding-right: 0;
|
||||
padding-left: $-s;
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: $-s;
|
||||
}
|
||||
.action-buttons {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
.text-button {
|
||||
padding-right: $-m;
|
||||
padding-left: 0;
|
||||
padding-inline-end: $-m;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
&.text-center {
|
||||
@ -368,6 +386,6 @@ header .search-box {
|
||||
padding: $-xs $-xs;
|
||||
}
|
||||
.action-buttons .dropdown-container:last-child a {
|
||||
padding-left: $-xs;
|
||||
padding-inline-start: $-xs;
|
||||
}
|
||||
}
|
||||
@ -4,10 +4,10 @@
|
||||
*/
|
||||
.container {
|
||||
max-width: $xxl;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: $-m;
|
||||
padding-right: $-m;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
padding-inline-start: $-m;
|
||||
padding-inline-end: $-m;
|
||||
&.small {
|
||||
max-width: 840px;
|
||||
}
|
||||
@ -198,8 +198,8 @@ body.flexbox {
|
||||
*/
|
||||
.tri-layout-container {
|
||||
display: grid;
|
||||
margin-left: $-xl;
|
||||
margin-right: $-xl;
|
||||
margin-inline-start: $-xl;
|
||||
margin-inline-end: $-xl;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-template-areas: "a b c";
|
||||
grid-column-gap: $-xxl;
|
||||
@ -223,7 +223,7 @@ body.flexbox {
|
||||
". b b";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-rows: min-content min-content 1fr;
|
||||
padding-right: $-l;
|
||||
padding-inline-end: $-l;
|
||||
}
|
||||
}
|
||||
@include between($l, $xxl) {
|
||||
@ -258,11 +258,11 @@ body.flexbox {
|
||||
grid-template-areas: none;
|
||||
grid-template-columns: 1fr;
|
||||
grid-column-gap: 0;
|
||||
padding-right: $-xs;
|
||||
padding-left: $-xs;
|
||||
padding-inline-end: $-xs;
|
||||
padding-inline-start: $-xs;
|
||||
.tri-layout-left-contents, .tri-layout-right-contents {
|
||||
padding-left: $-m;
|
||||
padding-right: $-m;
|
||||
padding-inline-start: $-m;
|
||||
padding-inline-end: $-m;
|
||||
}
|
||||
.tri-layout-left > *, .tri-layout-right > * {
|
||||
display: none;
|
||||
@ -316,7 +316,7 @@ body.flexbox {
|
||||
|
||||
@include smaller-than($m) {
|
||||
.tri-layout-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -8,3 +8,27 @@
|
||||
@mixin between($min, $max) {
|
||||
@media screen and (min-width: $min) and (max-width: $max) { @content; }
|
||||
}
|
||||
|
||||
// Padding shorthand using logical operators to better support RTL.
|
||||
@mixin padding($t, $r, $b, $l) {
|
||||
padding-block-start: $t;
|
||||
padding-block-end: $b;
|
||||
padding-inline-start: $l;
|
||||
padding-inline-end: $r;
|
||||
}
|
||||
|
||||
// Margin shorthand using logical operators to better support RTL.
|
||||
@mixin margin($t, $r, $b, $l) {
|
||||
margin-block-start: $t;
|
||||
margin-block-end: $b;
|
||||
margin-inline-start: $l;
|
||||
margin-inline-end: $r;
|
||||
}
|
||||
|
||||
// Create a RTL specific style block.
|
||||
// Mostly used as a patch until browser support improves for logical properties.
|
||||
@mixin rtl() {
|
||||
html[dir=rtl] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -59,7 +59,7 @@ body.mce-fullscreen, body.markdown-fullscreen {
|
||||
text-align: center;
|
||||
svg {
|
||||
fill: #FFF;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -174,14 +174,14 @@ body.mce-fullscreen, body.markdown-fullscreen {
|
||||
bottom: -9px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -8px;
|
||||
margin-inline-start: -8px;
|
||||
content: '';
|
||||
display: block;
|
||||
background-color:#FFF;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 50% 50%;
|
||||
border-bottom: 1px solid #CCC;
|
||||
border-right: 1px solid #CCC;
|
||||
border-inline-startom: 1px solid #CCC;
|
||||
border-inline-end: 1px solid #CCC;
|
||||
z-index: 56;
|
||||
}
|
||||
input, button, a {
|
||||
@ -255,7 +255,7 @@ body.mce-fullscreen, body.markdown-fullscreen {
|
||||
}
|
||||
.tabs {
|
||||
display: block;
|
||||
border-right: 1px solid #DDD;
|
||||
border-inline-end: 1px solid #DDD;
|
||||
width: 48px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
@ -294,8 +294,8 @@ body.mce-fullscreen, body.markdown-fullscreen {
|
||||
width: 100%;
|
||||
min-width: 50px;
|
||||
}
|
||||
.tags td, .tag-table > div > div > div {
|
||||
padding-right: $-s;
|
||||
.tags td, .inline-start-table > div > div > div {
|
||||
padding-inline-end: $-s;
|
||||
padding-top: $-s;
|
||||
position: relative;
|
||||
}
|
||||
@ -319,42 +319,6 @@ body.mce-fullscreen, body.markdown-fullscreen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag-display {
|
||||
position: relative;
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
tr:first-child td {
|
||||
padding-top: 0;
|
||||
}
|
||||
.heading th {
|
||||
padding: $-xs $-s;
|
||||
color: rgba(100, 100, 100, 0.7);
|
||||
border: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
padding: $-xs $-s;
|
||||
color: #444;
|
||||
}
|
||||
tr td:first-child {
|
||||
padding-left:0;
|
||||
}
|
||||
.tag-value {
|
||||
color: #888;
|
||||
}
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.tag {
|
||||
padding: $-s;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-box {
|
||||
position: absolute;
|
||||
background-color: #FFF;
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
#{$prop}: $size !important;
|
||||
}
|
||||
.#{$propLetter}x-#{$sizeLetter} {
|
||||
#{$prop}-left: $size !important;
|
||||
#{$prop}-right: $size !important;
|
||||
#{$prop}-inline-start: $size !important;
|
||||
#{$prop}-inline-end: $size !important;
|
||||
}
|
||||
.#{$propLetter}y-#{$sizeLetter} {
|
||||
#{$prop}-top: $size !important;
|
||||
@ -18,13 +18,13 @@
|
||||
#{$prop}-top: $size !important;
|
||||
}
|
||||
.#{$propLetter}r-#{$sizeLetter} {
|
||||
#{$prop}-right: $size !important;
|
||||
#{$prop}-inline-end: $size !important;
|
||||
}
|
||||
.#{$propLetter}b-#{$sizeLetter} {
|
||||
#{$prop}-bottom: $size !important;
|
||||
}
|
||||
.#{$propLetter}l-#{$sizeLetter} {
|
||||
#{$prop}-left: $size !important;
|
||||
#{$prop}-inline-start: $size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ table.table {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
border: none;
|
||||
padding: $-s $-s;
|
||||
vertical-align: middle;
|
||||
@ -36,7 +36,7 @@ table.table {
|
||||
background-color: #EEE;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
|
||||
@ -313,10 +313,10 @@ li > ol, li > ul {
|
||||
text-align: center;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@each $sizeLetter, $size in $screen-sizes {
|
||||
@ -325,10 +325,10 @@ li > ol, li > ul {
|
||||
text-align: center;
|
||||
}
|
||||
.text-#{$sizeLetter}-left {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
.text-#{$sizeLetter}-right {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -384,6 +384,6 @@ span.sep {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: -0.105em;
|
||||
margin-right: $-xs;
|
||||
margin-inline-end: $-xs;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -20,8 +20,8 @@ html, body {
|
||||
.tri-layout-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "b";
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -30,6 +30,6 @@ html, body {
|
||||
}
|
||||
|
||||
.content-wrap.card {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
@ -74,7 +74,7 @@ $loadingSize: 10px;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
background-color: var(--color-page);
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
@ -89,7 +89,7 @@ $loadingSize: 10px;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
> span {
|
||||
margin-left: $-s;
|
||||
margin-inline-start: $-s;
|
||||
font-style: italic;
|
||||
color: #888;
|
||||
vertical-align: top;
|
||||
@ -110,7 +110,7 @@ $btt-size: 40px;
|
||||
svg {
|
||||
width: $btt-size / 1.5;
|
||||
height: $btt-size / 1.5;
|
||||
margin-right: 4px;
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
width: $btt-size;
|
||||
height: $btt-size;
|
||||
@ -138,7 +138,7 @@ $btt-size: 40px;
|
||||
input, button {
|
||||
border-radius: 0;
|
||||
border: 1px solid #DDD;
|
||||
margin-left: -1px;
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
input {
|
||||
flex: 5;
|
||||
@ -177,8 +177,8 @@ $btt-size: 40px;
|
||||
overflow-y: scroll;
|
||||
height: 400px;
|
||||
background-color: #EEEEEE;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
.entity-list-item {
|
||||
background-color: #FFF;
|
||||
@ -252,7 +252,7 @@ $btt-size: 40px;
|
||||
}
|
||||
.list-sort {
|
||||
display: inline-grid;
|
||||
margin-left: $-s;
|
||||
margin-inline-start: $-s;
|
||||
grid-template-columns: minmax(120px, max-content) 40px;
|
||||
font-size: 0.9rem;
|
||||
border: 2px solid #DDD;
|
||||
@ -264,14 +264,14 @@ $btt-size: 40px;
|
||||
color: #555;
|
||||
}
|
||||
.list-sort-type {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
.list-sort-type, .list-sort-dir {
|
||||
padding: $-xs $-s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-sort-dir {
|
||||
border-left: 2px solid #DDD;
|
||||
border-inline-start: 2px solid #DDD;
|
||||
fill: #888;
|
||||
.svg-icon {
|
||||
transition: transform ease-in-out 120ms;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div>
|
||||
<button id="saml-login" class="button outline block svg">
|
||||
@icon('saml2')
|
||||
{{ trans('auth.log_in_with', ['socialDriver' => config('saml2.name')]) }}
|
||||
<span>{{ trans('auth.log_in_with', ['socialDriver' => config('saml2.name')]) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<div>
|
||||
<a id="social-login-{{$driver}}" class="button outline block svg" href="{{ url("/login/service/" . $driver) }}">
|
||||
@icon('auth/' . $driver)
|
||||
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}
|
||||
<span>{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}</span>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
<div>
|
||||
<a id="social-register-{{$driver}}" class="button block outline svg" href="{{ url("/register/service/" . $driver) }}">
|
||||
@icon('auth/' . $driver)
|
||||
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}
|
||||
<span>{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}</span>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ config('app.lang') }}" class="@yield('body-class')">
|
||||
<html lang="{{ config('app.lang') }}" dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}" class="@yield('body-class')">
|
||||
<head>
|
||||
<title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title>
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ class LanguageTest extends TestCase
|
||||
public function setUp(): void
|
||||
{
|
||||
parent::setUp();
|
||||
$this->langs = array_diff(scandir(resource_path('lang')), ['..', '.', 'check.php', 'format.php']);
|
||||
$this->langs = array_diff(scandir(resource_path('lang')), ['..', '.']);
|
||||
}
|
||||
|
||||
public function test_locales_config_key_set_properly()
|
||||
@ -22,6 +22,20 @@ class LanguageTest extends TestCase
|
||||
$this->assertEquals(implode(':', $configLocales), implode(':', $this->langs), 'app.locales configuration variable does not match those found in lang files');
|
||||
}
|
||||
|
||||
// Not part of standard phpunit test runs since we sometimes expect non-added langs.
|
||||
public function do_test_locales_all_have_language_dropdown_entry()
|
||||
{
|
||||
$dropdownLocales = array_keys(trans('settings.language_select', [], 'en'));
|
||||
sort($dropdownLocales);
|
||||
sort($this->langs);
|
||||
$diffs = array_diff($this->langs, $dropdownLocales);
|
||||
if (count($diffs) > 0) {
|
||||
$diffText = implode(',', $diffs);
|
||||
$this->addWarning("Languages: {$diffText} found in files but not in language select dropdown.");
|
||||
}
|
||||
$this->assertTrue(true);
|
||||
}
|
||||
|
||||
public function test_correct_language_if_not_logged_in()
|
||||
{
|
||||
$loginReq = $this->get('/login');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user