From 3a59aff933242a38b36fb8248a110153d5f3fdad Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Thu, 30 Aug 2018 23:01:15 +0430 Subject: [PATCH 01/10] rtl navbar and header --- src/assets/styles/index.scss | 1 + src/assets/styles/spec/rtl.scss | 103 ++++++++++++++++++++++++++++++++ src/index.html | 2 +- 3 files changed, 105 insertions(+), 1 deletion(-) create mode 100644 src/assets/styles/spec/rtl.scss diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 6c7b16c..d504c45 100755 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -3,4 +3,5 @@ @import "~bootstrap/scss/bootstrap"; @import 'spec/index'; @import 'vendor/index'; +@import 'spec/rtl'; diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss new file mode 100644 index 0000000..a043cc2 --- /dev/null +++ b/src/assets/styles/spec/rtl.scss @@ -0,0 +1,103 @@ +html[dir="rtl"] { + direction: rtl; + text-align: right; + .paginate-next { + float: left !important; + } + .paginate-prev { + float: right !important; + } + .sidebar-menu { + border-right: 0px; + border-left: 1px solid rgba(0, 0, 0, .0625); + } + .page-container { + padding-right: 280px !important; + padding-left: 0px !important; + } + .sidebar-logo { + border-left: 1px solid rgba(0, 0, 0, .0625); + border-right: none; + } + .sidebar-menu > li > a .icon-holder { + margin-right: 0px !important; + left: unset; + right: 0; + + } + .sidebar-menu li.dropdown .arrow { + right: unset; + left: 30px; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + .nav-item, .sidebar-link { + text-align: right; + } + .sidebar-menu > li.dropdown ul.dropdown-menu { + padding-left: unset; + padding-right: 50px; + text-align: right; + } + .sidebar-menu .sidebar-link.active:before { + right: 5px; + left: unset; + } + .header .header-container .nav-left { + float: right; + padding-right: 10px; + } + .header .header-container .nav-right { + float: left; + } + .mR-10 { + margin-right: unset; + margin-left: 10px !important; + } + .header .header-container .nav-left > li, .header .header-container .nav-right > li { + float: right; + } + .header .header-container .nav-right .dropdown-menu { + left: 0; + right: auto; + } + + .header .header-container .dropdown-menu { + -webkit-transform-origin: top left; + transform-origin: top left; + -ms-transform-origin: top left; + } + .is-collapsed .page-container { + padding-right: 70px !important; + } + .header .header-container .nav-right .dropdown-menu li { + text-align: right; + } + .header .header-container .nav-right .dropdown-menu li i { + float: right; + } + .pR-10 { + padding-right: unset; + padding-left: 10px; + } + .mR-15 { + margin-right: unset; + margin-left: 15px; + } + .mL-10 { + margin-left: unset; + margin-right: 10px; + } + .header .header-container .nav-right .dropdown-menu li i.ti-angle-right { + float: left; + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } +} + diff --git a/src/index.html b/src/index.html index bc39c0a..b7ff3fc 100755 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + From 952d338f6c7b5df54a988cf45fe917094ceced4f Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 00:17:10 +0430 Subject: [PATCH 02/10] index.html rtl --- src/assets/scripts/masonry/index.js | 20 +-- src/assets/styles/spec/rtl.scss | 241 +++++++++++++++++++++++++++- 2 files changed, 250 insertions(+), 11 deletions(-) diff --git a/src/assets/scripts/masonry/index.js b/src/assets/scripts/masonry/index.js index 1b52abb..71fce84 100755 --- a/src/assets/scripts/masonry/index.js +++ b/src/assets/scripts/masonry/index.js @@ -2,13 +2,15 @@ import * as $ from 'jquery'; import Masonry from 'masonry-layout'; export default (function () { - window.addEventListener('load', () => { - if ($('.masonry').length > 0) { - new Masonry('.masonry', { - itemSelector: '.masonry-item', - columnWidth: '.masonry-sizer', - percentPosition: true, - }); - } - }); + window.addEventListener('load', () => { + if ($('.masonry').length > 0) { + new Masonry('.masonry', { + itemSelector: '.masonry-item', + columnWidth: '.masonry-sizer', + percentPosition: true, + originLeft: ($('html').attr('dir') == 'rtl') ? false : '', + + }); + } + }); }()); diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index a043cc2..d75e329 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -1,6 +1,8 @@ html[dir="rtl"] { - direction: rtl; - text-align: right; + body { + text-align: right; + direction: rtl; + } .paginate-next { float: left !important; } @@ -99,5 +101,240 @@ html[dir="rtl"] { -ms-transform: rotate(180deg); transform: rotate(180deg); } + + .pull-right { + float: left; + } + + .nav { + padding-right: 0; + } + + .navbar-nav .nav-item { + float: right; + } + + .navbar-nav .nav-item + .nav-item { + margin-right: 1rem; + margin-left: inherit; + } + + th { + text-align: right; + } + + .alert-dismissible { + padding-right: 1.25rem; + padding-left: 4rem; + } + + .dropdown-menu { + right: 0; + text-align: right; + } + + .checkbox label { + padding-right: 1.25rem; + padding-left: inherit; + } + + .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-radius: 0 $border-radius $border-radius 0; + } + + .btn-group > .btn:last-child:not(:first-child), + .btn-group > .dropdown-toggle:not(:first-child) { + border-radius: $border-radius 0 0 $border-radius; + } + + .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-radius: $border-radius 0 0 $border-radius; + } + + .custom-control-label::after, + .custom-control-label::before { + right: 0; + left: inherit; + } + + .custom-select { + padding: $custom-select-padding-y $custom-select-padding-x $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding); + background: $custom-select-bg $custom-select-indicator no-repeat left $custom-select-padding-x center; + background-size: $custom-select-bg-size; + } + + .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), + .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), + .input-group > .input-group-append:not(:last-child) > .btn, + .input-group > .input-group-append:not(:last-child) > .input-group-text, + .input-group > .input-group-prepend > .btn, + .input-group > .input-group-prepend > .input-group-text { + border-radius: 0 $border-radius $border-radius 0; + } + + .input-group > .input-group-append > .btn, + .input-group > .input-group-append > .input-group-text, + .input-group > .input-group-prepend:first-child > .btn:not(:first-child), + .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), + .input-group > .input-group-prepend:not(:first-child) > .btn, + .input-group > .input-group-prepend:not(:first-child) > .input-group-text { + border-radius: $border-radius 0 0 $border-radius; + } + + .input-group > .custom-select:not(:first-child), + .input-group > .form-control:not(:first-child) { + border-radius: $border-radius 0 0 $border-radius; + } + + .input-group > .custom-select:not(:last-child), + .input-group > .form-control:not(:last-child) { + border-radius: 0 $border-radius $border-radius 0; + } + + .input-group > .custom-select:not(:last-child):not(:first-child), + .input-group > .form-control:not(:last-child):not(:first-child) { + border-radius: 0; + } + + .custom-control { + padding-right: 1.5rem; + padding-left: inherit; + margin-right: inherit; + margin-left: 1rem; + } + .custom-control-indicator { + right: 0; + left: inherit; + } + + .custom-file-label::after { + right: initial; + left: -1px; + border-radius: .25rem 0 0 .25rem; + } + + .radio input, + .radio-inline, + .checkbox input, + .checkbox-inline input { + margin-right: -1.25rem; + margin-left: inherit; + } + + .list-group { + padding-right: 0; + padding-left: 40px; + } + + .close { + float: left; + } + + .modal-header .close { + margin: -15px auto -15px -15px; + } + + .modal-footer > :not(:first-child) { + margin-right: .25rem; + } + + .alert-dismissible .close { + right: inherit; + left: 0; + } + + .dropdown-toggle::after { + margin-right: .255em; + margin-left: 0; + } + + .form-check-input { + margin-right: -1.25rem; + margin-left: inherit; + } + + .form-check-label { + padding-right: 1.25rem; + padding-left: inherit; + } + + @mixin make-col-offset($size, $columns: $grid-columns) { + $num: $size / $columns; + margin-right: if($num == 0, 0, percentage($num)); + margin-left: 0; + } + + @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + @include media-breakpoint-up($breakpoint, $breakpoints) { + @for $i from 0 through ($columns - 1) { + @if not ($infix == "" and $i == 0) { + .offset#{$infix}-#{$i} { + @include make-col-offset($i, $columns); + } + } + } + } + } + } + @if $enable-grid-classes { + @include make-grid-columns(); + } + + // stylelint-disable declaration-no-important + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + + .#{$abbrev}r#{$infix}-#{$size}, + .#{$abbrev}x#{$infix}-#{$size} { + #{$prop}-right: 0 !important; + #{$prop}-left: $length !important; + } + .#{$abbrev}l#{$infix}-#{$size}, + .#{$abbrev}x#{$infix}-#{$size} { + #{$prop}-left: 0 !important; + #{$prop}-right: $length !important; + } + } + } + + .mr#{$infix}-auto, + .mx#{$infix}-auto { + margin-right: 0 !important; + margin-left: auto !important; + } + .ml#{$infix}-auto, + .mx#{$infix}-auto { + margin-right: auto !important; + margin-left: 0 !important; + } + } + } + .checkbox-inline input, .checkbox input, .radio-inline, .radio input{ + margin-right:unset; + margin-left: -20px; + margin-left: -1.25rem; + } + .checkbox label:after, .checkbox label:before { + left: unset; + right: 0; + } + .mR-20{ + margin-right: unset; + margin-left: 20px; + } + .r-1 { + right: unset; + left: 1px; + } + .mL-20 { + margin-right: 20px; + margin-left: unset; + } } From d5c27f156d7ce9986ae1376b005707a882bf4a12 Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 00:29:33 +0430 Subject: [PATCH 03/10] email.html rtl --- src/assets/styles/spec/rtl.scss | 19 ++++++++++++++++--- src/email.html | 2 +- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index d75e329..fd897aa 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -315,8 +315,8 @@ html[dir="rtl"] { } } } - .checkbox-inline input, .checkbox input, .radio-inline, .radio input{ - margin-right:unset; + .checkbox-inline input, .checkbox input, .radio-inline, .radio input { + margin-right: unset; margin-left: -20px; margin-left: -1.25rem; } @@ -324,7 +324,7 @@ html[dir="rtl"] { left: unset; right: 0; } - .mR-20{ + .mR-20 { margin-right: unset; margin-left: 20px; } @@ -336,5 +336,18 @@ html[dir="rtl"] { margin-right: 20px; margin-left: unset; } + .full-container { + right: 280px; + left: unset; + } + @media screen and (min-width: 992px) { + .email-app .email-wrapper { + margin-left: unset; + margin-right: 250px; + } + } + .email-side-nav i { + float: right; + } } diff --git a/src/email.html b/src/email.html index fcf1405..5939c80 100755 --- a/src/email.html +++ b/src/email.html @@ -1,5 +1,5 @@ - + From 7cb5ccf4c1524fb0ac946f8c097d32326421b03a Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 00:31:37 +0430 Subject: [PATCH 04/10] remove dir=rtl --- src/email.html | 2 +- src/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/email.html b/src/email.html index 5939c80..fcf1405 100755 --- a/src/email.html +++ b/src/email.html @@ -1,5 +1,5 @@ - + diff --git a/src/index.html b/src/index.html index b7ff3fc..bc39c0a 100755 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + From a8df540d246e9c9bc0d7039fa1bad7ed22347bda Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 00:42:25 +0430 Subject: [PATCH 05/10] compose rtl --- src/assets/styles/spec/rtl.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index fd897aa..15f0679 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -338,7 +338,7 @@ html[dir="rtl"] { } .full-container { right: 280px; - left: unset; + left: 0; } @media screen and (min-width: 992px) { .email-app .email-wrapper { @@ -349,5 +349,9 @@ html[dir="rtl"] { .email-side-nav i { float: right; } + .email-app .email-side-nav { + border-right: 0px; + border-left: 1px solid rgba(0, 0, 0, .0625); + } } From 1756aa5cd19a8ef26819e98157b0f6ce16918455 Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 00:51:19 +0430 Subject: [PATCH 06/10] calender rtl --- src/assets/scripts/fullcalendar/index.js | 103 ++++++++++++----------- src/assets/styles/spec/rtl.scss | 6 ++ 2 files changed, 58 insertions(+), 51 deletions(-) diff --git a/src/assets/scripts/fullcalendar/index.js b/src/assets/scripts/fullcalendar/index.js index de3ebba..51c7c66 100755 --- a/src/assets/scripts/fullcalendar/index.js +++ b/src/assets/scripts/fullcalendar/index.js @@ -3,57 +3,58 @@ import 'fullcalendar/dist/fullcalendar.min.js'; import 'fullcalendar/dist/fullcalendar.min.css'; export default (function () { - const date = new Date(); - const d = date.getDate(); - const m = date.getMonth(); - const y = date.getFullYear(); + const date = new Date(); + const d = date.getDate(); + const m = date.getMonth(); + const y = date.getFullYear(); - const events = [{ - title : 'All Day Event', - start : new Date(y, m, 1), - desc : 'Meetings', - bullet : 'success', - }, { - title : 'Long Event', - start : new Date(y, m, d - 5), - end : new Date(y, m, d - 2), - desc : 'Hangouts', - bullet : 'success', - }, { - title : 'Repeating Event', - start : new Date(y, m, d - 3, 16, 0), - allDay : false, - desc : 'Product Checkup', - bullet : 'warning', - }, { - title : 'Repeating Event', - start : new Date(y, m, d + 4, 16, 0), - allDay : false, - desc : 'Conference', - bullet : 'danger', - }, { - title : 'Birthday Party', - start : new Date(y, m, d + 1, 19, 0), - end : new Date(y, m, d + 1, 22, 30), - allDay : false, - desc : 'Gathering', - }, { - title : 'Click for Google', - start : new Date(y, m, 28), - end : new Date(y, m, 29), - url : 'http ://google.com/', - desc : 'Google', - bullet : 'success', - }]; + const events = [{ + title: 'All Day Event', + start: new Date(y, m, 1), + desc: 'Meetings', + bullet: 'success', + }, { + title: 'Long Event', + start: new Date(y, m, d - 5), + end: new Date(y, m, d - 2), + desc: 'Hangouts', + bullet: 'success', + }, { + title: 'Repeating Event', + start: new Date(y, m, d - 3, 16, 0), + allDay: false, + desc: 'Product Checkup', + bullet: 'warning', + }, { + title: 'Repeating Event', + start: new Date(y, m, d + 4, 16, 0), + allDay: false, + desc: 'Conference', + bullet: 'danger', + }, { + title: 'Birthday Party', + start: new Date(y, m, d + 1, 19, 0), + end: new Date(y, m, d + 1, 22, 30), + allDay: false, + desc: 'Gathering', + }, { + title: 'Click for Google', + start: new Date(y, m, 28), + end: new Date(y, m, 29), + url: 'http ://google.com/', + desc: 'Google', + bullet: 'success', + }]; - $('#full-calendar').fullCalendar({ - events, - height : 800, - editable : true, - header: { - left : 'month,agendaWeek,agendaDay', - center : 'title', - right : 'today prev,next', - }, - }); + $('#full-calendar').fullCalendar({ + events, + height: 800, + editable: true, + isRTL: ($('html').attr('dir') == 'rtl') ? true : false, + header: { + left: 'month,agendaWeek,agendaDay', + center: 'title', + right: 'today prev,next', + }, + }); }()) diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index 15f0679..c9a9674 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -353,5 +353,11 @@ html[dir="rtl"] { border-right: 0px; border-left: 1px solid rgba(0, 0, 0, .0625); } + .fc-toolbar .fc-left { + float: right; + } + .fc-toolbar .fc-right { + float: left; + } } From 1a40b3273787c5f3a6f2387f5d6e5cd2a0dfb09b Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 01:00:27 +0430 Subject: [PATCH 07/10] chat rtl --- src/assets/styles/spec/rtl.scss | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index c9a9674..2be863b 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -82,15 +82,15 @@ html[dir="rtl"] { float: right; } .pR-10 { - padding-right: unset; + padding-right: unset !important; padding-left: 10px; } .mR-15 { - margin-right: unset; + margin-right: unset !important; margin-left: 15px; } .mL-10 { - margin-left: unset; + margin-left: unset !important; margin-right: 10px; } .header .header-container .nav-right .dropdown-menu li i.ti-angle-right { @@ -325,7 +325,7 @@ html[dir="rtl"] { right: 0; } .mR-20 { - margin-right: unset; + margin-right: unset !important; margin-left: 20px; } .r-1 { @@ -334,7 +334,7 @@ html[dir="rtl"] { } .mL-20 { margin-right: 20px; - margin-left: unset; + margin-left: unset !important; } .full-container { right: 280px; @@ -359,5 +359,20 @@ html[dir="rtl"] { .fc-toolbar .fc-right { float: left; } + .mR-30 { + margin-right: unset !important; + margin-left: 30px; + } + .pL-20 { + padding-left: unset !important; + padding-right: 20px; + } + .bdR { + border-left: 1px solid rgba(0, 0, 0, .0625) !important; + } + .header .header-container .nav-left .notifications .counter, .header .header-container .nav-right .notifications .counter { + right: unset !important; + left: 6px; + } } From 96da62b90678282a9d3725df98206ad2a4e87636 Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 01:10:24 +0430 Subject: [PATCH 08/10] forms rtl --- src/assets/styles/spec/rtl.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index 2be863b..68e79e5 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -374,5 +374,9 @@ html[dir="rtl"] { right: unset !important; left: 6px; } + .datepicker-dropdown { + direction: unset !important; + right: unset !important; + } } From 083a2eaa291a0ba22c767976a7f57effc09e2c86 Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 01:20:44 +0430 Subject: [PATCH 09/10] ui.html rtl --- src/assets/styles/spec/rtl.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index 68e79e5..6bd6a29 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -129,7 +129,6 @@ html[dir="rtl"] { } .dropdown-menu { - right: 0; text-align: right; } From 67a62b4aae66137ee9c98a3a908c4601ccdb5a38 Mon Sep 17 00:00:00 2001 From: Navid Sedehi Date: Fri, 31 Aug 2018 01:53:54 +0430 Subject: [PATCH 10/10] siginin rtl --- src/assets/styles/spec/rtl.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/assets/styles/spec/rtl.scss b/src/assets/styles/spec/rtl.scss index 6bd6a29..37f5049 100644 --- a/src/assets/styles/spec/rtl.scss +++ b/src/assets/styles/spec/rtl.scss @@ -377,5 +377,8 @@ html[dir="rtl"] { direction: unset !important; right: unset !important; } + .form-group .peer { + min-width: 150px; + } }