liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: rtl offset + list indent (#1326, #1327)

Browse Source
This commit is contained in:
NGPixel
2019-12-22 18:49:17 -05:00
parent f09f1f4f1e
commit 14c842ff9d
4 changed files with 65 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/themes/default/components/page.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug">
v-app(v-scroll='upBtnScroll', :dark='darkMode')
v-app(v-scroll='upBtnScroll', :dark='darkMode', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`')
nav-header
v-navigation-drawer(
:class='darkMode ? `grey darken-4-d4` : `primary`'
@@ -49,7 +49,7 @@
v-divider
v-container.grey.pa-0(fluid, :class='darkMode ? `darken-4-l3` : `lighten-4`')
v-row(no-gutters, align-content='center', style='height: 90px;')
v-col.pl-4.page-col-content(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;')
v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
.headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
.caption.grey--text.text--darken-1 {{description}}
v-divider

62
client/themes/default/scss/app.scss
View File

@@ -103,10 +103,10 @@
background: linear-gradient(to right, mc('blue', '300') 0%, mc('blue', '500') 10%, rgba(mc('blue', '900'), 0) 100%);
}
@at-root .application--is-rtl & {
@at-root .is-rtl & {
background: linear-gradient(to left, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
}
@at-root .theme--dark.application--is-rtl & {
@at-root .theme--dark.is-rtl & {
background: linear-gradient(to left, mc('grey', '600'), rgba(mc('grey', '600'), 0));
}
}
@@ -133,10 +133,10 @@
background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
}
@at-root .application--is-rtl & {
@at-root .is-rtl & {
background: linear-gradient(to left, mc('grey', '700'), rgba(mc('grey', '700'), 0));
}
@at-root .theme--dark.application--is-rtl & {
@at-root .theme--dark.is-rtl & {
background: linear-gradient(to left, mc('grey', '300'), rgba(mc('grey', '700'), 0));
}
}
@@ -315,9 +315,19 @@
padding: 1rem 0 0 1rem;
list-style-position: outside;
@at-root .is-rtl & {
padding-left: 0;
padding-right: 1rem;
}
li > ul, li > ol {
padding-top: .5rem;
padding-left: 1rem;
@at-root .is-rtl & {
padding-left: 0;
padding-right: 1rem;
}
}
li + li {
@@ -328,6 +338,10 @@
padding-left: 0;
list-style-type: none;
@at-root .is-rtl & {
padding-right: 0;
}
li {
background-color: mc('grey', '50');
background-image: linear-gradient(to bottom, #FFF, mc('grey', '50'));
@@ -339,10 +353,20 @@
border-radius: 5px;
font-weight: 500;
@at-root .is-rtl & {
border-left-width: 1px;
border-right-width: 5px;
}
&:hover {
background-image: linear-gradient(to bottom, #FFF, lighten(mc('blue', '50'), 4%));
border-left-color: mc('blue', '500');
cursor: pointer;
@at-root .is-rtl & {
border-left-color: mc('grey', '200');
border-right-width: mc('blue', '500');
}
}
&::before {
@@ -387,10 +411,20 @@
border-left: 5px solid mc('grey', '700');
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
@at-root .theme--dark.is-rtl & {
border-left-width: 1px;
border-right-width: 5px;
}
&:hover {
background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
border-left-color: mc('indigo', '300');
cursor: pointer;
@at-root .theme--dark.is-rtl & {
border-left-color: mc('grey', '900');
border-right-width: mc('indigo', '300');
}
}
}
}
@@ -710,6 +744,26 @@
}
// ---------------
// RTL FIXES
// Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317
// ---------------
.is-rtl {
.page-col-content.is-page-header {
@each $size, $width in $grid-breakpoints {
@media (min-width: $width) {
@for $n from 0 through 12 {
&.offset-#{$size}-#{$n} {
margin-left: 0;
margin-right: ($n / 12 * 100) * 1%;
}
}
}
}
}
}
// ---------------
// PRINT OVERRIDES
// ---------------