From e2706876bf4dbf6dfe02e3aa2d9094fd53751427 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Thu, 16 Mar 2017 13:57:48 -0700 Subject: [PATCH] feat(ltr): add fallback styles for `ltr` + additional support. (#413) * feat(): move rlt fab into components toolbar as a menu option * fix(chips): added fallback for ltr support * fix(): leverage rtl mixin in chips * fix(toolbar): set fallback for ltr * chore(): move ltr option to the whole components page * feat(data-table): add fallback for ltr and fix selected rtl * feat(dialog): add fallback for ltr in dialogs * feat(expansion-panel): add fallback ltr * feat(layouts): add ltr fallback and fix rtl * feat(menu): added fallback for ltr * feat(notifications): rollback since this was already working * fix(): remove unused code * fix(search): margin for rtl and fallback for ltr * feat(search): change animation depending on rtl/ltr in search input * fix(search): fix rtl in search box * fix(paging): remove unused style * fix(stepper): icon in rtl * feat(file-upload): add rtl support * rollback: we will fix this in a separate PR * rollback: we need to rethink how pad, pull and push for rtl * fix(): use default ltr * feat(): added some support for rtl in json-formatter * feat(paging): support paging rtl * feat(rtl): set dir in root `html` tag --- src/app/app.component.html | 5 +- src/app/app.component.ts | 17 ++---- .../components/components.component.html | 14 ++++- .../components/components.component.ts | 11 +++- src/platform/core/chips/chips.component.scss | 17 ++---- .../core/common/styles/_structure.scss | 21 +++++--- src/platform/core/common/styles/_toolbar.scss | 20 ++++--- .../core/common/styles/utilities/_pad.scss | 52 +++++++------------ .../data-table-cell.component.scss | 8 +-- .../data-table-column.component.scss | 18 +++---- .../core/data-table/data-table.component.scss | 17 +++--- .../core/dialogs/dialog.component.scss | 14 +++-- .../_expansion-panel-theme.scss | 9 ---- .../expansion-panel.component.scss | 7 ++- .../file-upload/file-upload.component.scss | 48 +++++++++-------- .../json-formatter.component.html | 2 +- .../json-formatter.component.scss | 12 +++++ .../json-formatter.component.ts | 13 ++++- .../layout-manage-list.component.scss | 16 +++--- .../layout-nav-list.component.scss | 16 +++--- .../layout-nav/layout-nav.component.scss | 16 +++--- src/platform/core/menu/menu.component.scss | 5 +- .../notification-count.component.scss | 46 +++++----------- .../core/paging/paging-bar.component.html | 8 +-- .../core/paging/paging-bar.component.scss | 9 ---- .../core/paging/paging-bar.component.ts | 12 ++++- .../search-box/search-box.component.scss | 13 ++--- .../search/search-box/search-box.component.ts | 2 + .../search-input/search-input.component.html | 2 +- .../search-input/search-input.component.scss | 2 +- .../search-input/search-input.component.ts | 26 +++++++--- .../step-header/step-header.component.scss | 2 +- src/styles.scss | 4 +- 33 files changed, 245 insertions(+), 239 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 05352eb512..e8eaf8fdf6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,11 +1,8 @@ - + {{item.icon}}{{item.title}} - - {{root.dir.toUpperCase()}} - \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 229804c7fd..dc92ef04b6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ -import { Component, ElementRef, Inject, Renderer } from '@angular/core'; -import { DomSanitizer, DOCUMENT } from '@angular/platform-browser'; -import { MdIconRegistry, Dir } from '@angular/material'; +import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { MdIconRegistry } from '@angular/material'; import { TranslateService } from '@ngx-translate/core'; @@ -36,13 +36,9 @@ export class DocsAppComponent { }, ]; - direction: string = 'ltr'; - constructor(private _iconRegistry: MdIconRegistry, private _domSanitizer: DomSanitizer, - translateService: TranslateService, - private el: ElementRef, private renderer: Renderer, - @Inject(DOCUMENT) private document: any) { + translateService: TranslateService) { // Set fallback language translateService.setDefaultLang('en'); // Supported languages @@ -67,9 +63,4 @@ export class DocsAppComponent { this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid', this._domSanitizer.bypassSecurityTrustResourceUrl('app/assets/icons/querygrid.svg')); } - - changeDir(root: Dir): void { - this.direction = root._dir; - this.renderer.setElementAttribute(this.document.querySelector('html'), 'dir', this.direction); - } } diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html index e120098096..278ff26993 100644 --- a/src/app/components/components/components.component.html +++ b/src/app/components/components/components.component.html @@ -1,4 +1,5 @@ {{item.title}}
Covalent Components & Addons + + + + +
+
+
- \ No newline at end of file diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts index a588d6317c..0a27398d6a 100644 --- a/src/app/components/components/components.component.ts +++ b/src/app/components/components/components.component.ts @@ -1,4 +1,5 @@ -import { Component, HostBinding, AfterViewInit } from '@angular/core'; +import { Component, HostBinding, AfterViewInit, ElementRef, Inject, Renderer } from '@angular/core'; +import { DOCUMENT } from '@angular/platform-browser'; import { TdMediaService } from '@covalent/core'; import { fadeAnimation } from '../../app.animations'; @@ -135,10 +136,16 @@ export class ComponentsComponent implements AfterViewInit { title: 'NGX-Translate', }]; - constructor(public media: TdMediaService) {} + constructor(public media: TdMediaService, + private _renderer: Renderer, + @Inject(DOCUMENT) private _document: HTMLElement) {} ngAfterViewInit(): void { // broadcast to all listener observables when loading the page this.media.broadcast(); } + + changeDir(dir: string): void { + this._renderer.setElementAttribute(this._document.querySelector('html'), 'dir', dir); + } } diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss index 4862a4dd53..1dd50216e7 100644 --- a/src/platform/core/chips/chips.component.scss +++ b/src/platform/core/chips/chips.component.scss @@ -1,3 +1,5 @@ +@import '../common/styles/mixins'; + :host { display: block; padding: 0px 5px 0px 5px; @@ -6,12 +8,7 @@ cursor: default; border-radius: 16px; line-height: 32px; - [dir='ltr'] & { - margin: 8px 8px 0 0; - } - [dir='rtl'] & { - margin: 8px 0 0 8px; - } + @include rtl(margin, 8px 8px 0 0, 8px 0 0 8px); padding: 0 12px; box-sizing: border-box; max-width: 100%; @@ -19,12 +16,8 @@ md-icon { position: relative; top: 5px; - [dir='ltr'] & { - left: 5px; - } - [dir='rtl'] & { - right: 5px; - } + @include rtl(left, 5px, auto); + @include rtl(right, auto, 5px); height: 18px; width: 18px; font-size: 19px; diff --git a/src/platform/core/common/styles/_structure.scss b/src/platform/core/common/styles/_structure.scss index 7ef67a2a15..477c56cb31 100644 --- a/src/platform/core/common/styles/_structure.scss +++ b/src/platform/core/common/styles/_structure.scss @@ -109,8 +109,11 @@ input { pointer-events: none; position: absolute; overflow: hidden; - [dir='ltr'] & {left: 0;} - [dir='rtl'] & {right:0;} + left: 0; + [dir='rtl'] & { + right:0; + left: auto; + } top: 0; width: 100%; height: 100%; @@ -124,8 +127,11 @@ input { pointer-events: none; position: absolute; overflow: hidden; - [dir='ltr'] & {left: 0;} - [dir='rtl'] & {right:0;} + left: 0; + [dir='rtl'] & { + right:0; + left: auto; + } top: 0; width: 100%; height: 100%; @@ -174,8 +180,11 @@ input { display: block; position: absolute; background-color: #fafafa; - [dir='ltr'] & {right: 0;} - [dir='rtl'] & {left:0;} + right: 0; + [dir='rtl'] & { + left:0; + right: auto; + } top: 0; bottom: 0; z-index: $z-index-scroll-mask; diff --git a/src/platform/core/common/styles/_toolbar.scss b/src/platform/core/common/styles/_toolbar.scss index 29e3642855..6d216511e5 100644 --- a/src/platform/core/common/styles/_toolbar.scss +++ b/src/platform/core/common/styles/_toolbar.scss @@ -2,18 +2,26 @@ md-toolbar { [md-button] { &:first-of-type:not(:last-child) { - [dir='ltr'] & {margin-left: -6px;} - [dir='rtl'] & {margin-right: -6px;} + margin-left: -6px; + [dir='rtl'] & { + margin-right: -6px; + margin-left: 0; + } } &:last-of-type:not(:first-child) { - [dir='ltr'] & {margin-right: -6px;} - [dir='rtl'] & {margin-left: -6px;} + margin-right: -6px; + [dir='rtl'] & { + margin-left: -6px; + margin-right: 0; + } } } .md-icon-logo { margin-right: 10px; - [dir='ltr'] & {margin-right: 10px;} - [dir='rtl'] & {margin-left: 10px;} + [dir='rtl'] & { + margin-left: 10px; + margin-right: 0; + } } [md-icon-button] { margin: 0 6px; diff --git a/src/platform/core/common/styles/utilities/_pad.scss b/src/platform/core/common/styles/utilities/_pad.scss index fb306ede32..b0dca866be 100644 --- a/src/platform/core/common/styles/utilities/_pad.scss +++ b/src/platform/core/common/styles/utilities/_pad.scss @@ -1,7 +1,7 @@ // // Pad (padding) // -------------------------------------------------- - +body { .pad { padding: 20px; } @@ -53,46 +53,38 @@ } .pad-right { - [dir='ltr'] & { padding-right: 20px;} - [dir='rtl'] & { padding-left: 20px;} + padding-right: 20px; } .pad-right-xxl { - [dir='ltr'] & { padding-right: 60px;} - [dir='rtl'] & { padding-left: 60px;} + padding-right: 60px; } .pad-right-xl { - [dir='ltr'] & { padding-right: 50px;} - [dir='rtl'] & { padding-left: 50px;} + padding-right: 50px; } .pad-right-lg { - [dir='ltr'] & { padding-right: 40px;} - [dir='rtl'] & { padding-left: 40px;} + padding-right: 40px; } .pad-right-md { - [dir='ltr'] & { padding-right: 30px;} - [dir='rtl'] & { padding-left: 30px;} + padding-right: 30px; } .pad-right-sm { - [dir='ltr'] & { padding-right: 10px;} - [dir='rtl'] & { padding-left: 10px;} + padding-right: 10px; } .pad-right-xs { - [dir='ltr'] & { padding-right: 5px;} - [dir='rtl'] & { padding-left: 5px;} + padding-right: 5px; } .pad-right-none { - [dir='ltr'] & { padding-right: 0px;} - [dir='rtl'] & { padding-left: 0px;} + padding-right: 0px; } .pad-bottom { @@ -124,42 +116,34 @@ } .pad-left { - [dir='ltr'] & { padding-left: 20px;} - [dir='rtl'] & { padding-right: 20px;} + padding-left: 20px; } .pad-left-xxl { - [dir='ltr'] & { padding-left: 60px;} - [dir='rtl'] & { padding-right: 60px;} + padding-left: 60px; } .pad-left-xl { - [dir='ltr'] & { padding-left: 50px;} - [dir='rtl'] & { padding-right: 50px;} + padding-left: 50px; } .pad-left-lg { - [dir='ltr'] & { padding-left: 40px;} - [dir='rtl'] & { padding-right: 40px;} + padding-left: 40px; } .pad-left-md { - [dir='ltr'] & { padding-left: 30px;} - [dir='rtl'] & { padding-right: 30px;} + padding-left: 30px; } .pad-left-sm { - [dir='ltr'] & { padding-left: 10px;} - [dir='rtl'] & { padding-right: 10px;} + padding-left: 10px; } .pad-left-xs { - [dir='ltr'] & { padding-left: 5px;} - [dir='rtl'] & { padding-right: 5px;} + padding-left: 5px; } .pad-left-none { - [dir='ltr'] & { padding-left: 0px;} - [dir='rtl'] & { padding-right: 0px;} + padding-left: 0px; } - +} diff --git a/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss b/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss index 4600f5aee7..6351129026 100644 --- a/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss +++ b/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss @@ -6,12 +6,12 @@ padding: 0 28px 0 28px; &:first-child { - [dir='ltr'] & { padding-left: 24px;} - [dir='rtl'] & { padding-right: 24px;} + @include rtl(padding-left, 24px, initial); + @include rtl(padding-right, initial, 24px); } &:last-child { - [dir='ltr'] & { padding-right: 24px;} - [dir='rtl'] & { padding-left: 24px;} + @include rtl(padding-left, initial, 24px); + @include rtl(padding-right, 24px, initial); } > * { diff --git a/src/platform/core/data-table/data-table-column/data-table-column.component.scss b/src/platform/core/data-table/data-table-column/data-table-column.component.scss index 5ff9d81e6e..b536fb0131 100644 --- a/src/platform/core/data-table/data-table-column/data-table-column.component.scss +++ b/src/platform/core/data-table/data-table-column/data-table-column.component.scss @@ -8,12 +8,12 @@ position: relative; &:first-child { - [dir='ltr'] & { padding-left: 24px;} - [dir='rtl'] & { padding-right: 24px;} + @include rtl(padding-left, 24px, initial); + @include rtl(padding-right, initial, 24px); } &:last-child { - [dir='ltr'] & { padding-right: 24px;} - [dir='rtl'] & { padding-left: 24px;} + @include rtl(padding-left, initial, 24px); + @include rtl(padding-right, 24px, initial); } md-icon { @@ -62,14 +62,14 @@ &.mat-numeric { @include rtl(text-align, right, left); md-icon.td-data-table-sort-icon { - [dir='ltr'] & { margin-left: -22px;} - [dir='rtl'] & { margin-right: -22px;} + @include rtl(margin-left, -22px, initial); + @include rtl(margin-right, initial, -22px); } } &:not(.mat-numeric) { md-icon.td-data-table-sort-icon { - [dir='ltr'] & { margin-left: 6px;} - [dir='rtl'] & { margin-right: 6px;} + @include rtl(margin-left, 6px, initial); + @include rtl(margin-right, initial, 6px); } } -} \ No newline at end of file +} diff --git a/src/platform/core/data-table/data-table.component.scss b/src/platform/core/data-table/data-table.component.scss index 409b022b2f..56e91ad615 100644 --- a/src/platform/core/data-table/data-table.component.scss +++ b/src/platform/core/data-table/data-table.component.scss @@ -13,15 +13,21 @@ table.td-data-table { transition: background-color 0.2s; } - &.mat-selectable td.td-data-table-cell, - &.mat-selectable th.td-data-table-column { + &.mat-selectable .td-data-table-column, + &.mat-selectable th.td-data-table-column, + &.mat-selectable td.td-data-table-cell { &:first-child { width: 20px; padding: 0 24px; } &:nth-child(2) { - [dir='ltr'] & { padding-left: 0px;} - [dir='rtl'] & { padding-right: 0px;} + padding-left: 0px; + } + [dir='rtl'] & { + &:nth-child(2){ + padding-right: 0px; + padding-left: 28px; + } } } @@ -34,8 +40,7 @@ table.td-data-table { height: $checkbox-size; /deep/ &.mat-pseudo-checkbox-checked::after { top: 3px !important; - [dir='ltr'] & { left: 1px !important;} - [dir='rtl'] & { right: 1px !important;} + left: 1px !important; width: 11px !important; height: 4px !important; } diff --git a/src/platform/core/dialogs/dialog.component.scss b/src/platform/core/dialogs/dialog.component.scss index 77a08b7ee7..1762423a31 100644 --- a/src/platform/core/dialogs/dialog.component.scss +++ b/src/platform/core/dialogs/dialog.component.scss @@ -10,11 +10,10 @@ .td-dialog-actions { position: relative; top: 16px; - [dir='ltr'] & { - left: 16px; - } - [dir='rtl'] & { - right: 16px; + left: 16px; + /deep/ [dir='rtl'] & { + right: 16px; + left: auto; } } @@ -23,11 +22,10 @@ .td-dialog-actions { /deep/ button { text-transform: uppercase; - [dir='ltr'] & { - margin-left: 8px; - } + margin-left: 8px; [dir='rtl'] & { margin-right: 8px; + margin-left: inherit; } padding-left: 8px; padding-right: 8px; diff --git a/src/platform/core/expansion-panel/_expansion-panel-theme.scss b/src/platform/core/expansion-panel/_expansion-panel-theme.scss index d7ab44b0ff..ab9c565404 100644 --- a/src/platform/core/expansion-panel/_expansion-panel-theme.scss +++ b/src/platform/core/expansion-panel/_expansion-panel-theme.scss @@ -34,15 +34,6 @@ } .td-expansion-primary, .td-expansion-secondary { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - [dir='ltr'] & { - margin-right: 5px; - } - [dir='rtl'] & { - margin-left: 5px; - } &, & * { vertical-align: middle; } diff --git a/src/platform/core/expansion-panel/expansion-panel.component.scss b/src/platform/core/expansion-panel/expansion-panel.component.scss index 4f860b781b..29a7530ca9 100644 --- a/src/platform/core/expansion-panel/expansion-panel.component.scss +++ b/src/platform/core/expansion-panel/expansion-panel.component.scss @@ -37,10 +37,9 @@ md-nav-list { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - [dir='ltr'] & { - margin-right: 5px; - } - [dir='rtl'] & { + margin-right: 5px; + /deep/ [dir='rtl'] & { margin-left: 5px; + margin-right: inherit; } } \ No newline at end of file diff --git a/src/platform/core/file/file-upload/file-upload.component.scss b/src/platform/core/file/file-upload/file-upload.component.scss index 6600c475fb..62dad5def5 100644 --- a/src/platform/core/file/file-upload/file-upload.component.scss +++ b/src/platform/core/file/file-upload/file-upload.component.scss @@ -1,27 +1,29 @@ -:host { - .td-file-upload { - padding-left: 8px; - padding-right: 8px; +.td-file-upload { + padding-left: 8px; + padding-right: 8px; +} +.td-file-upload-cancel { + height: 24px; + width: 24px; + position: relative; + top: 24px; + left: -12px; + /deep/ [dir='rtl'] & { + right: -12px; + left: 0; } - .td-file-upload-cancel { - height: 24px; - width: 24px; - position: relative; - top: 24px; - left: -12px; - md-icon { - border-radius: 12px; - vertical-align: baseline; - } + md-icon { + border-radius: 12px; + vertical-align: baseline; } - /** - * Class that is added ondragenter by the [TdFileDrop] directive. - */ - .drop-zone { - // Animation. - border-radius: 3px; - * { - pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements - } +} +/** +* Class that is added ondragenter by the [TdFileDrop] directive. +*/ +.drop-zone { + // Animation. + border-radius: 3px; + * { + pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements } } diff --git a/src/platform/core/json-formatter/json-formatter.component.html b/src/platform/core/json-formatter/json-formatter.component.html index 79f98b7847..14058f44c0 100644 --- a/src/platform/core/json-formatter/json-formatter.component.html +++ b/src/platform/core/json-formatter/json-formatter.component.html @@ -7,7 +7,7 @@ layout="row" layout-align="start center" (click)="toggle()"> - {{open? 'keyboard_arrow_down' : 'keyboard_arrow_right'}} + {{open? 'keyboard_arrow_down' : (isRTL ? 'keyboard_arrow_left' : 'keyboard_arrow_right')}} {{key}}: diff --git a/src/platform/core/json-formatter/json-formatter.component.scss b/src/platform/core/json-formatter/json-formatter.component.scss index 40760a7b80..9ae682200c 100644 --- a/src/platform/core/json-formatter/json-formatter.component.scss +++ b/src/platform/core/json-formatter/json-formatter.component.scss @@ -15,13 +15,25 @@ & .td-key, & .td-object-children { padding-left: 24px; + /deep/ [dir='rtl'] & { + padding-right: 24px; + padding-left: 0; + } &.td-key-leaf { padding-left: 48px; + /deep/ [dir='rtl'] & { + padding-right: 48px; + padding-left: 0; + } } } } .value { margin-left: 5px; + /deep/ [dir='rtl'] & { + padding-right: 5px; + padding-left: 0; + } .td-empty { opacity: .5; text-decoration: line-through; diff --git a/src/platform/core/json-formatter/json-formatter.component.ts b/src/platform/core/json-formatter/json-formatter.component.ts index 37cb99ff92..456b77c827 100644 --- a/src/platform/core/json-formatter/json-formatter.component.ts +++ b/src/platform/core/json-formatter/json-formatter.component.ts @@ -1,4 +1,5 @@ -import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, Optional } from '@angular/core'; +import { Dir } from '@angular/material'; import { TdCollapseAnimation } from '../common/common.module'; @Component({ @@ -83,7 +84,15 @@ export class TdJsonFormatterComponent { return this._children; } - constructor(private _changeDetectorRef: ChangeDetectorRef) { + get isRTL(): boolean { + if (this._dir) { + return this._dir.dir === 'rtl'; + } + return false; + } + + constructor(private _changeDetectorRef: ChangeDetectorRef, + @Optional() private _dir: Dir) { } /** diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss index 949c1c7227..f74770e84e 100644 --- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss +++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss @@ -1,3 +1,11 @@ +.td-menu-button { + margin-left: 0px; + /deep/ [dir='rtl'] & { + margin-right: 0px; + margin-left: 6px; + } +} + :host { display: flex; margin: 0; @@ -15,14 +23,6 @@ } } } - .td-menu-button { - [dir='ltr'] & { - margin-left: 0px; - } - [dir='rtl'] & { - margin-right: 0px; - } - } .list { text-align: start; } diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss index 2927ec1825..ec2b7a7549 100644 --- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss +++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss @@ -1,3 +1,11 @@ +.td-menu-button { + margin-left: 0px; + /deep/ [dir='rtl'] & { + margin-right: 0px; + margin-left: 6px; + } +} + :host { display: flex; margin: 0; @@ -15,14 +23,6 @@ } } } - .td-menu-button { - [dir='ltr'] & { - margin-left: 0px; - } - [dir='rtl'] & { - margin-right: 0px; - } - } .list { text-align: start; } diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.scss b/src/platform/core/layout/layout-nav/layout-nav.component.scss index 9664e6c95e..05c007974b 100644 --- a/src/platform/core/layout/layout-nav/layout-nav.component.scss +++ b/src/platform/core/layout/layout-nav/layout-nav.component.scss @@ -1,3 +1,11 @@ +.td-menu-button { + margin-left: 0px; + /deep/ [dir='rtl'] & { + margin-right: 0px; + margin-left: 6px; + } +} + :host { display: flex; margin: 0; @@ -5,12 +13,4 @@ min-height: 100%; height: 100%; overflow: hidden; - .td-menu-button { - [dir='ltr'] & { - margin-left: 0px; - } - [dir='rtl'] & { - margin-right: 0px; - } - } } diff --git a/src/platform/core/menu/menu.component.scss b/src/platform/core/menu/menu.component.scss index d7074c36f7..122baacd63 100644 --- a/src/platform/core/menu/menu.component.scss +++ b/src/platform/core/menu/menu.component.scss @@ -18,11 +18,10 @@ $td-menu-spacing: 8px !default; height: auto; padding: $td-menu-spacing; .mat-list-text { - [dir='ltr'] & { - padding-right: 0px; - } + padding-right: 0px; [dir='rtl'] & { padding-left: 0px; + padding-right: 16px; } } [md-line] + [md-line] { diff --git a/src/platform/core/notifications/notification-count.component.scss b/src/platform/core/notifications/notification-count.component.scss index 2dbd95e371..c18186e19d 100644 --- a/src/platform/core/notifications/notification-count.component.scss +++ b/src/platform/core/notifications/notification-count.component.scss @@ -1,4 +1,3 @@ -@import '../common/styles/mixins'; $td-notification-size: 20px !default; $td-notification-content-size: 40px !default; @@ -40,21 +39,10 @@ $td-notification-content-size: 40px !default; bottom: 0px; } &.td-notification-before { - - [dir='ltr'] & { - left: 0px; - } - [dir='rtl'] & { - right: 0px; - } + left: 0px } &.td-notification-after { - [dir='ltr'] & { - right: 0px; - } - [dir='rtl'] & { - left: 0px; - } + right: 0px; } &.td-notification-no-count { width: 8px; @@ -66,39 +54,29 @@ $td-notification-content-size: 40px !default; bottom: 8px; } &.td-notification-before { - [dir='ltr'] & { - left: 8px; - } - [dir='rtl'] & { - right: 8px; - } + left: 8px; } &.td-notification-after { - [dir='ltr'] & { - right: 8px; - } - [dir='rtl'] & { - left: 8px; - } + right: 8px; } } /deep/ [dir='rtl'] & { &.td-notification-before { - @include rtl(right, 0px,auto); - @include rtl(left, auto, 0px); + right: 0px; + left: auto; } &.td-notification-after { - @include rtl(left, 0px,auto); - @include rtl(right, auto, 0px); + left: 0px; + right: auto; } &.td-notification-no-count { &.td-notification-before { - @include rtl(right, 8px,auto); - @include rtl(left, auto, 8px); + right: 8px; + left: auto; } &.td-notification-after { - @include rtl(left, 8px,auto); - @include rtl(right, auto, 8px); + left: 8px; + right: auto; } } } diff --git a/src/platform/core/paging/paging-bar.component.html b/src/platform/core/paging/paging-bar.component.html index fbbdd790eb..879071c056 100644 --- a/src/platform/core/paging/paging-bar.component.html +++ b/src/platform/core/paging/paging-bar.component.html @@ -13,16 +13,16 @@
\ No newline at end of file diff --git a/src/platform/core/paging/paging-bar.component.scss b/src/platform/core/paging/paging-bar.component.scss index 1380a6d3be..de8bfba03b 100644 --- a/src/platform/core/paging/paging-bar.component.scss +++ b/src/platform/core/paging/paging-bar.component.scss @@ -25,13 +25,4 @@ md-select { display: none; } } -} -.td-paging-size { - margin-right: -5px; - [dir='ltr'] & { - margin-right: -5px; - } - [dir='rtl'] & { - margin-left: -5px; - } } \ No newline at end of file diff --git a/src/platform/core/paging/paging-bar.component.ts b/src/platform/core/paging/paging-bar.component.ts index 55ca19a5b1..66218344ff 100644 --- a/src/platform/core/paging/paging-bar.component.ts +++ b/src/platform/core/paging/paging-bar.component.ts @@ -1,4 +1,5 @@ -import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; +import { Component, Input, Output, EventEmitter, OnInit, Optional } from '@angular/core'; +import { Dir } from '@angular/material'; export interface IPageChangeEvent { page: number; @@ -126,6 +127,15 @@ export class TdPagingBarComponent implements OnInit { */ @Output('change') onChange: EventEmitter = new EventEmitter(); + get isRTL(): boolean { + if (this._dir) { + return this._dir.dir === 'rtl'; + } + return false; + } + + constructor(@Optional() private _dir: Dir) {} + ngOnInit(): void { this._page = this.initialPage; this._calculateRows(); diff --git a/src/platform/core/search/search-box/search-box.component.scss b/src/platform/core/search/search-box/search-box.component.scss index 2b2ec421b1..6ea421b2f8 100644 --- a/src/platform/core/search/search-box/search-box.component.scss +++ b/src/platform/core/search/search-box/search-box.component.scss @@ -4,18 +4,15 @@ .td-search-box { height: 64px; td-search-input { + margin-left: 12px; + /deep/ [dir='rtl'] & { + margin-right: 12px; + margin-left: 0px !important; + } /deep/ { .mat-input-placeholder.mat-focused { visibility: hidden; } } - - [dir='ltr'] & { - margin-left: 12px; - } - [dir='rtl'] & { - margin-right: 12px; - } - } } \ No newline at end of file diff --git a/src/platform/core/search/search-box/search-box.component.ts b/src/platform/core/search/search-box/search-box.component.ts index 839fa10575..099fda29ec 100644 --- a/src/platform/core/search/search-box/search-box.component.ts +++ b/src/platform/core/search/search-box/search-box.component.ts @@ -12,10 +12,12 @@ import { TdSearchInputComponent } from '../search-input/search-input.component'; state('false', style({ width: '0%', 'margin-left': '0px', + 'margin-right': '0px', })), state('true', style({ width: '100%', 'margin-left': '*', + 'margin-right': '*', })), transition('0 => 1', animate('200ms ease-in')), transition('1 => 0', animate('200ms ease-out')), diff --git a/src/platform/core/search/search-input/search-input.component.html b/src/platform/core/search/search-input/search-input.component.html index c6bfcb764c..5d97c7279b 100644 --- a/src/platform/core/search/search-input/search-input.component.html +++ b/src/platform/core/search/search-input/search-input.component.html @@ -11,7 +11,7 @@