From 4f6d323f6fbfe12f0f809455969fe200a0a430ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 29 Aug 2018 16:42:12 +0200 Subject: [PATCH] MOBILE-649 ux: Adapt more RTL styles --- .../messages/pages/discussion/discussion.scss | 11 ++++----- ...don-mod-assign-submission-toc-popover.html | 2 +- src/addon/mod/chat/pages/chat/chat.html | 2 +- src/addon/mod/data/data.scss | 8 +++---- .../index/addon-mod-forum-index.html | 4 ++-- .../components/post/addon-mod-forum-post.html | 4 ++-- .../forum/pages/discussion/discussion.html | 2 +- .../addon-mod-imscp-toc-popover.html | 2 +- src/addon/mod/lesson/pages/player/player.html | 2 +- src/addon/mod/lesson/pages/player/player.scss | 5 ++++ .../mod/quiz/components/index/index.scss | 4 ++-- .../navigation-modal/navigation-modal.scss | 8 +++---- .../mod/wiki/components/index/index.scss | 4 ++-- src/addon/mod/workshop/pages/phase/phase.scss | 9 +------- .../component/addon-qtype-calculated.html | 2 +- .../multianswer/component/multianswer.scss | 3 +-- .../component/addon-qtype-shortanswer.html | 2 +- src/app/app.ios.scss | 6 ++--- src/app/app.md.scss | 6 ++--- src/app/app.scss | 23 ++++++++----------- src/app/app.wp.scss | 6 ++--- src/components/empty-box/empty-box.scss | 9 ++------ src/components/iframe/iframe.scss | 5 +--- src/components/loading/loading.scss | 5 +--- .../mark-required/mark-required.scss | 2 +- src/components/progress-bar/progress-bar.scss | 7 +++--- .../rich-text-editor/rich-text-editor.scss | 12 +++++----- .../show-password/show-password.scss | 2 +- src/components/split-view/split-view.scss | 13 ++++------- src/components/tabs/tabs.scss | 2 +- src/core/course/components/format/format.scss | 5 ++-- src/core/course/components/module/module.scss | 18 +++++++-------- .../course-progress/course-progress.scss | 6 ++--- .../core-courses-overview-events.html | 2 +- .../pages/capture-media/capture-media.scss | 5 +--- src/core/grades/components/course/course.scss | 12 ++++------ src/core/login/pages/init/init.scss | 5 +--- src/core/login/pages/reconnect/reconnect.scss | 8 +++---- src/core/user/pages/profile/profile.scss | 5 ++-- src/theme/variables.scss | 21 +++++++++++++++++ 40 files changed, 120 insertions(+), 139 deletions(-) diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss index ab9a66c03..8b94e0a1a 100644 --- a/src/addon/messages/pages/discussion/discussion.scss +++ b/src/addon/messages/pages/discussion/discussion.scss @@ -58,12 +58,12 @@ page-addon-messages-discussion { align-self: flex-end; color: $item-message-note-text; font-size: $item-message-note-font-size; - margin-left: 10px; + @include margin(null, null, null, 10px); } .addon-messages-delete-button { min-height: initial; line-height: initial; - margin: 0 0 0 10px; + @include margin(0, 0, 0, 10px); height: auto; -webkit-align-self: flex-end; -ms-flex-item-align: end; @@ -88,11 +88,8 @@ page-addon-messages-discussion { } .spinner { - float: right; - margin-left: 5px; - margin-right: -3px; - margin-top: 2px; - margin-bottom: -2px; + @include float(end); + @include margin(2px, -3px, -2px, 5px); svg { width: 16px; diff --git a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html b/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html index 6d3dca6f0..ed35905b6 100644 --- a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html +++ b/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html @@ -1,5 +1,5 @@ -

{{chapter.title}}

+

{{chapter.title}}

 diff --git a/src/addon/mod/chat/pages/chat/chat.html b/src/addon/mod/chat/pages/chat/chat.html index 1a44afca3..fbdf3bce1 100644 --- a/src/addon/mod/chat/pages/chat/chat.html +++ b/src/addon/mod/chat/pages/chat/chat.html @@ -42,7 +42,7 @@

-

{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}

+

{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}

diff --git a/src/addon/mod/data/data.scss b/src/addon/mod/data/data.scss index d8cb84608..6c646f411 100644 --- a/src/addon/mod/data/data.scss +++ b/src/addon/mod/data/data.scss @@ -50,11 +50,11 @@ page-addon-mod-data-edit { } .core-mark-required { - float: right; + @include float(end); + ion-input, + ion-select { - padding-right: 20px; + @include padding(null, 20px, null, null); } } @@ -91,12 +91,12 @@ page-addon-mod-data-edit { ion-select { width: 100%; - left: 0; + @include position(null, null, null, 0); max-width: none; } .core-item-has-rich-text-editor { - margin-right: 1px; + @include margin(null, 1px, null, null); } } } \ No newline at end of file diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html index c4b5ad909..ddbebcadf 100644 --- a/src/addon/mod/forum/components/index/addon-mod-forum-index.html +++ b/src/addon/mod/forum/components/index/addon-mod-forum-index.html @@ -32,7 +32,7 @@

- {{ 'core.notsent' | translate }} + {{ 'core.notsent' | translate }} {{discussion.userfullname}}

@@ -50,7 +50,7 @@

- + {{discussion.created | coreDateDayOrTime}}

{{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}
diff --git a/src/addon/mod/forum/components/post/addon-mod-forum-post.html b/src/addon/mod/forum/components/post/addon-mod-forum-post.html index a7b3ebaf2..b5d7c22eb 100644 --- a/src/addon/mod/forum/components/post/addon-mod-forum-post.html +++ b/src/addon/mod/forum/components/post/addon-mod-forum-post.html @@ -4,8 +4,8 @@

- {{ 'core.notsent' | translate }} - + {{ 'core.notsent' | translate }} + {{post.modified | coreDateDayOrTime}}

{{ 'addon.mod_forum.unread' | translate }}
diff --git a/src/addon/mod/forum/pages/discussion/discussion.html b/src/addon/mod/forum/pages/discussion/discussion.html index 03fd64c3d..dd59860cf 100644 --- a/src/addon/mod/forum/pages/discussion/discussion.html +++ b/src/addon/mod/forum/pages/discussion/discussion.html @@ -51,7 +51,7 @@ -
+
diff --git a/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html b/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html index 6bda8d594..4c1c9b21b 100644 --- a/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html +++ b/src/addon/mod/imscp/components/toc-popover/addon-mod-imscp-toc-popover.html @@ -1,5 +1,5 @@ - {{item.title}} + {{item.title}} diff --git a/src/addon/mod/lesson/pages/player/player.html b/src/addon/mod/lesson/pages/player/player.html index a6a2c73c6..6bb4f6a75 100644 --- a/src/addon/mod/lesson/pages/player/player.html +++ b/src/addon/mod/lesson/pages/player/player.html @@ -50,7 +50,7 @@ - + diff --git a/src/addon/mod/lesson/pages/player/player.scss b/src/addon/mod/lesson/pages/player/player.scss index 540e14ac8..2c06d1a8b 100644 --- a/src/addon/mod/lesson/pages/player/player.scss +++ b/src/addon/mod/lesson/pages/player/player.scss @@ -10,6 +10,11 @@ page-addon-mod-lesson-player { padding-left: 0; } + ion-input[padding-start] input[padding-start] { + // Applying padding-start to the ion-input applies it twice since it's replicated in the inner input. + @include padding(null, null, null, 0); + } + .addon-mod_lesson-pagebuttons .button-block { contain: content; height: 100%; diff --git a/src/addon/mod/quiz/components/index/index.scss b/src/addon/mod/quiz/components/index/index.scss index 279d948b5..08f6226a8 100644 --- a/src/addon/mod/quiz/components/index/index.scss +++ b/src/addon/mod/quiz/components/index/index.scss @@ -7,11 +7,11 @@ addon-mod-quiz-index { } .item-inner ion-label { - margin-right: 0; + @include margin(null, 0, null, null); } .item { - padding-left: 0; + @include padding(null, null, null, 0); } .label { diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss index 38bf67187..b608f4438 100644 --- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss +++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss @@ -1,16 +1,16 @@ page-addon-mod-quiz-navigation-modal { .addon-mod_quiz-selected, .item.addon-mod_quiz-selected { - border-left: 5px solid $core-splitview-selected; + @include border-start(5px, solid, $core-splitview-selected); font-weight: bold; &.item-md { - padding-left: $item-md-padding-start - 5px; + @include padding(null, null, null, $item-md-padding-start - 5px); } &.item-ios { - padding-left: $item-ios-padding-start - 5px; + @include padding(null, null, null, $item-ios-padding-start - 5px); } &.item-wp { - padding-left: $item-wp-padding-start - 5px; + @include padding(null, null, null, $item-wp-padding-start - 5px); } } diff --git a/src/addon/mod/wiki/components/index/index.scss b/src/addon/mod/wiki/components/index/index.scss index e3404377f..538f326da 100644 --- a/src/addon/mod/wiki/components/index/index.scss +++ b/src/addon/mod/wiki/components/index/index.scss @@ -32,11 +32,11 @@ addon-mod-wiki-index { } .wiki-toc-section-2 { - padding-left: $addon-mod-wiki-toc-level-padding; + @include padding(null, null, null, $addon-mod-wiki-toc-level-padding); } .wiki-toc-section-3 { - padding-left: $addon-mod-wiki-toc-level-padding * 2; + @include padding(null, null, null, $addon-mod-wiki-toc-level-padding * 2); } .wiki_newentry { diff --git a/src/addon/mod/workshop/pages/phase/phase.scss b/src/addon/mod/workshop/pages/phase/phase.scss index b454614ef..39b922678 100644 --- a/src/addon/mod/workshop/pages/phase/phase.scss +++ b/src/addon/mod/workshop/pages/phase/phase.scss @@ -1,14 +1,7 @@ page-addon-mod-workshop-phase-info { .core-workshop-phase-selected { background-color: $white; - @include ltr() { - border-left: 5px solid $core-splitview-selected; - } - - @include rtl() { - border-right: 5px solid $core-splitview-selected; - } - + @include border-start(5px, solid, $core-splitview-selected); &.item-md { @include padding(null, null, null, $item-md-padding-start - 5px); } diff --git a/src/addon/qtype/calculated/component/addon-qtype-calculated.html b/src/addon/qtype/calculated/component/addon-qtype-calculated.html index db25e4f4b..ab11e293c 100644 --- a/src/addon/qtype/calculated/component/addon-qtype-calculated.html +++ b/src/addon/qtype/calculated/component/addon-qtype-calculated.html @@ -18,7 +18,7 @@ - + diff --git a/src/addon/qtype/multianswer/component/multianswer.scss b/src/addon/qtype/multianswer/component/multianswer.scss index d449e8a26..5d116515e 100644 --- a/src/addon/qtype/multianswer/component/multianswer.scss +++ b/src/addon/qtype/multianswer/component/multianswer.scss @@ -37,7 +37,6 @@ addon-qtype-multianswer { } input[type="radio"], input[type="checkbox"] { - margin-top: -4px; - margin-right: 7px; + @include margin(-4px, 7px, null, null); } } diff --git a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html index 550e65863..bdf6f49ab 100644 --- a/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html +++ b/src/addon/qtype/shortanswer/component/addon-qtype-shortanswer.html @@ -2,6 +2,6 @@

- + diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss index 2c8c9ef57..4d135f461 100644 --- a/src/app/app.ios.scss +++ b/src/app/app.ios.scss @@ -27,10 +27,10 @@ @extend .card-content-ios; &[icon-start] { - padding-left: $card-ios-padding-left * 2 + 20; + @include padding(null, null, null, $card-ios-padding-left * 2 + 20); ion-icon { - left: $card-ios-padding-left; + @include position(null, null, null, $card-ios-padding-left); } } } @@ -121,7 +121,7 @@ // Different levels of padding. @for $i from 0 through 15 { .ios .core-padding-#{$i} { - padding-left: 15px * $i + $item-ios-padding-start; + @include padding(null, null, null, 15px * $i + $item-ios-padding-start); } } diff --git a/src/app/app.md.scss b/src/app/app.md.scss index e39f28792..3a9d43320 100644 --- a/src/app/app.md.scss +++ b/src/app/app.md.scss @@ -27,10 +27,10 @@ @extend .card-content-md; &[icon-start] { - padding-left: $card-md-padding-left * 2 + 20; + @include padding(null, null, null, $card-md-padding-left * 2 + 20); ion-icon { - left: $card-md-padding-left; + @include position(null, null, null, $card-md-padding-left); } } } @@ -109,7 +109,7 @@ // Different levels of padding. @for $i from 0 through 15 { .md .core-padding-#{$i} { - padding-left: 15px * $i + $item-md-padding-start; + @include padding(null, null, null, 15px * $i + $item-md-padding-start); } } diff --git a/src/app/app.scss b/src/app/app.scss index 9eb4390d6..79ae83fe0 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -122,7 +122,7 @@ max-width: 32px; } .label { - margin-left: 5px; + @include margin(null, null, null, 5px); color: $gray-darker; } } @@ -153,7 +153,7 @@ &.item-complex .item-content { text-align: center; - padding-left: 49px; + @include padding(null, null, null, 49px); } > img:first-child, @@ -256,9 +256,7 @@ core-format-text[ng-reflect-max-height] { content: ''; height: 100%; position: absolute; - left: 0; - right: 0; - bottom: 0; + @include position(null, 0, 0, 0); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(255, 255, 255, 0)), color-stop(calc(100% - 15px), white)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) calc(100% - 50px), white calc(100% - 15px)); @@ -405,7 +403,7 @@ ion-select { } ion-col ion-select { - float: right; + @include float(end); max-width: none; width: 100%; .select-text { @@ -587,8 +585,7 @@ ion-col ion-select { } .atto_image_size input[type=checkbox] { - margin-left: 1em; - margin-right: 1em; + @include margin(null, 1em, null, 1em); } .atto_image_size input[type=text] { @@ -624,13 +621,13 @@ ion-col ion-select { /*rtl:begin:ignore*/ .atto_image_button_left { - float: left; + @include float(start); @include margin(0, 0.5em, 0, 0); max-width: calc(100% - 1em); } .atto_image_button_right { - float: right; + @include float(end); @include margin(0, 0, 0, 0.5em); max-width: calc(100% - 1em); } @@ -692,7 +689,7 @@ textarea { border-bottom: 3px solid $color-base; &[icon-start] { - padding-left: 52px; + @include padding(null, null, null, 52px); position: relative; ion-icon { @@ -730,7 +727,7 @@ textarea { .accesshide { position: absolute; - left: -10000px; + @include position(null, null, null, -10000px); font-weight: normal; font-size: 1em; } @@ -883,8 +880,6 @@ ion-alert.core-inapp-notification { height: auto; margin: 0; position: absolute; - top: -18px; - right: -8px; @include position(-18px, -8px, null, null); color: red; font-size: 16px; diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss index eda1dc65c..040a4560c 100644 --- a/src/app/app.wp.scss +++ b/src/app/app.wp.scss @@ -27,10 +27,10 @@ @extend .card-content-wp; &[icon-start] { - padding-left: $card-wp-padding-left * 2 + 20; + @include padding(null, null, null, $card-wp-padding-left * 2 + 20); ion-icon { - left: $card-wp-padding-left; + @include position(null, null, null, $card-wp-padding-left); } } } @@ -44,7 +44,7 @@ // Different levels of padding. @for $i from 0 through 15 { .wp .core-padding-#{$i} { - padding-left: 15px * $i + $item-wp-padding-start; + @include padding(null, null, null, 15px * $i + $item-wp-padding-start); } } diff --git a/src/components/empty-box/empty-box.scss b/src/components/empty-box/empty-box.scss index 643d81917..4d493c020 100644 --- a/src/components/empty-box/empty-box.scss +++ b/src/components/empty-box/empty-box.scss @@ -1,10 +1,7 @@ core-empty-box { .core-empty-box { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include position(0, 0, 0, 0); display: table; height: 100%; width: 100%; @@ -25,10 +22,8 @@ core-empty-box { &.core-empty-box-inline { position: relative; - top: initial; - left: initial; - right: initial; z-index: initial; + @include position(initial, initial, null, initial); height: auto; } diff --git a/src/components/iframe/iframe.scss b/src/components/iframe/iframe.scss index abc26dfee..5f1a11cc2 100644 --- a/src/components/iframe/iframe.scss +++ b/src/components/iframe/iframe.scss @@ -9,10 +9,7 @@ core-iframe { .core-loading-container { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include position(0, 0, 0, 0); display: table; height: 100%; width: 100%; diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss index 3b05c5fdf..a6e506ba3 100644 --- a/src/components/loading/loading.scss +++ b/src/components/loading/loading.scss @@ -32,10 +32,7 @@ core-loading.core-loading-loaded { > .core-loading-container { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include position(0, 0, 0, 0); display: table; height: 100%; width: 100%; diff --git a/src/components/mark-required/mark-required.scss b/src/components/mark-required/mark-required.scss index 1e6bebc83..09873c055 100644 --- a/src/components/mark-required/mark-required.scss +++ b/src/components/mark-required/mark-required.scss @@ -1,7 +1,7 @@ .core-input-required-asterisk, .icon.core-input-required-asterisk { color: $red !important; font-size: 8px; - padding-left: 4px; + @include padding(null, null, null, 4px); line-height: 100%; vertical-align: top; } diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss index 64c6ecbdf..3634f0946 100644 --- a/src/components/progress-bar/progress-bar.scss +++ b/src/components/progress-bar/progress-bar.scss @@ -1,18 +1,17 @@ $core-progress-bar-height: 5px !default; core-progress-bar { - padding-right: 55px; + @include padding(null, 55px, null, null); position: relative; display: block; @extend .clearfix; .core-progress-text { - margin-left: 10px; + @include margin(null, null, null, 10px); line-height: normal; font-size: 1.4rem; color: $gray-darker; - right: 0; - top: -6px; + @include position(-6px, 0, null, null); position: absolute; } diff --git a/src/components/rich-text-editor/rich-text-editor.scss b/src/components/rich-text-editor/rich-text-editor.scss index 2ca2e51b4..f6bd913d1 100644 --- a/src/components/rich-text-editor/rich-text-editor.scss +++ b/src/components/rich-text-editor/rich-text-editor.scss @@ -33,7 +33,7 @@ core-rich-text-editor { overflow-y: auto; cursor: text; img { - padding-left: 2px; + @include padding(null, null, null, 2px); max-width: 95%; } &:empty:before { @@ -66,7 +66,7 @@ core-rich-text-editor { } ul, ol { list-style-position: inside; - margin-left: 15px; + @include margin(null, null, null, 15px); } } } @@ -89,7 +89,7 @@ core-rich-text-editor { div.core-rte-toolbar { background: $gray-darker; - margin: 0px 1px 15px 1px; + @include margin(0px, 1px, 15px, 1px); text-align: center; flex-grow: 0; width: 100%; @@ -108,10 +108,10 @@ core-rich-text-editor { font-size: 1.1em; height: 35px; min-width: 30px; - padding-left: 3px; - padding-right: 3px; - border-right: 1px solid $gray-dark; + @include padding(null, 3px, null, 3px); + @include border-end(qpx, solid, $gray-dark); border-bottom: 1px solid $gray-dark; + @include position(-6px, 0, null, null); flex-grow: 1; margin: 0; } diff --git a/src/components/show-password/show-password.scss b/src/components/show-password/show-password.scss index ef9238aaa..fd66ae745 100644 --- a/src/components/show-password/show-password.scss +++ b/src/components/show-password/show-password.scss @@ -4,7 +4,7 @@ core-show-password { position: relative; ion-input input.text-input { - padding-right: 47px; + @include padding(null, 47px, null, null); } .button[icon-only] { diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss index 5472d55e2..f38027603 100644 --- a/src/components/split-view/split-view.scss +++ b/src/components/split-view/split-view.scss @@ -3,10 +3,7 @@ core-split-view { display: block; .menu-inner { - left: 0; - right: 0; - top: 0; - bottom: 0; + @include position(0, 0, 0, 0); -webkit-transform: initial; transform: initial; width: 100%; @@ -24,15 +21,15 @@ core-split-view { .split-pane-side .core-split-item-selected { background-color: $gray-lighter; - border-left: 5px solid $core-splitview-selected; + @include border-start(5px, solid, $core-splitview-selected); &.item-md { - padding-left: $item-md-padding-start - 5px; + @include padding(null, null, null, $item-md-padding-start - 5px); } &.item-ios { - padding-left: $item-ios-padding-start - 5px; + @include padding(null, null, null, $item-ios-padding-start - 5px); } &.item-wp { - padding-left: $item-wp-padding-start - 5px; + @include padding(null, null, null, $item-wp-padding-start - 5px); } } } diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index fdac70174..ff246ed5d 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -1,5 +1,5 @@ .core-tabs-bar { - left: 0; + @include position(null, null, null, 0); position: relative; z-index: $z-index-toolbar; display: flex; diff --git a/src/core/course/components/format/format.scss b/src/core/course/components/format/format.scss index 5596893e1..169018837 100644 --- a/src/core/course/components/format/format.scss +++ b/src/core/course/components/format/format.scss @@ -1,8 +1,7 @@ ion-badge.core-course-download-section-progress { display: block; - float: left; - margin-top: 12px; - margin-right: 12px; + @include float(start); + @include margin(12px, 12px, null, null); } core-course-format { diff --git a/src/core/course/components/module/module.scss b/src/core/course/components/module/module.scss index e71fa5721..b77077df8 100644 --- a/src/core/course/components/module/module.scss +++ b/src/core/course/components/module/module.scss @@ -7,12 +7,10 @@ core-course-module { min-height: 52px; &.item .item-inner { - padding-right: 0; + @include padding(null, 0, null, null); } .label { - margin-top: 0; - margin-right: 0; - margin-bottom: 0; + @include margin(0, 0, 0, null); } .core-module-icon { align-items: flex-start; @@ -55,11 +53,11 @@ core-course-module { .md core-course-module { .core-module-description { - padding-right: $label-md-margin-end; + @include padding(null, $label-md-margin-end, null, null); margin-bottom: $label-md-margin-bottom; .core-show-more { - padding-right: $label-md-margin-end; + @include padding(null, $label-md-margin-end, null, null); } } @@ -85,11 +83,11 @@ core-course-module { .ios core-course-module { .core-module-description { - padding-right: $label-ios-margin-end; + @include padding(null, $label-ios-margin-end, null, null); margin-bottom: $label-md-margin-bottom; .core-show-more { - padding-right: $label-ios-margin-end; + @include padding(null, $label-ios-margin-end, null, null); } } @@ -110,11 +108,11 @@ core-course-module { .wp core-course-module { .core-module-description { - padding-right: ($item-wp-padding-end / 2); + @include padding(null, $item-wp-padding-end / 2, null, null); margin-bottom: $label-md-margin-bottom; .core-show-more { - padding-right: ($item-wp-padding-end / 2); + @include padding(null, $item-wp-padding-end / 2, null, null); } } diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss index 242ed5c3b..1ad60e95b 100644 --- a/src/core/courses/components/course-progress/course-progress.scss +++ b/src/core/courses/components/course-progress/course-progress.scss @@ -33,7 +33,7 @@ core-courses-course-progress { padding-top: 8px; padding-bottom: 8px; .item-inner { - padding-right: 0; + @include padding(null, 0, null, null); } .label { display: flex; @@ -46,9 +46,7 @@ core-courses-course-progress { } } .label { - margin-top: 0; - margin-right: 0; - margin-bottom: 0; + @include margin(0, 0, 0, null); } } diff --git a/src/core/courses/components/overview-events/core-courses-overview-events.html b/src/core/courses/components/overview-events/core-courses-overview-events.html index 04764c65b..ff5aed5ec 100644 --- a/src/core/courses/components/overview-events/core-courses-overview-events.html +++ b/src/core/courses/components/overview-events/core-courses-overview-events.html @@ -5,7 +5,7 @@

{{event.timesort * 1000 | coreFormatDate:"dfmediumdate" }}

{{event.action.itemcount}} diff --git a/src/core/emulator/pages/capture-media/capture-media.scss b/src/core/emulator/pages/capture-media/capture-media.scss index 58bb5d1a2..2b605ada2 100644 --- a/src/core/emulator/pages/capture-media/capture-media.scss +++ b/src/core/emulator/pages/capture-media/capture-media.scss @@ -2,10 +2,7 @@ page-core-emulator-capture-media { ion-content { .core-av-wrapper { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include position(0, 0, 0, 0); margin: 0; padding: 0; clear: both; diff --git a/src/core/grades/components/course/course.scss b/src/core/grades/components/course/course.scss index 2559d03e2..73db3bf79 100644 --- a/src/core/grades/components/course/course.scss +++ b/src/core/grades/components/course/course.scss @@ -10,9 +10,7 @@ core-grades-course { border-bottom: 1px solid $list-border-color; } th, td { - padding-top: 10px; - padding-bottom: 10px; - padding-right: 10px; + @include padding(10px, 10px, 10px, null); vertical-align: top; white-space: normal; text-align: left; @@ -26,15 +24,15 @@ core-grades-course { font-weight: normal; } #gradeitem { - padding-left: 5px; + @include padding(null, null, null, 5px); } .core-grades-table-gradeitem { - padding-left: 5px; + @include padding(null, null, null, 5px); font-weight: bold; &.column-itemname { - padding-left: 0; + @include padding(null, null, null, 0); } img { @@ -46,7 +44,7 @@ core-grades-course { } } .core-grades-table-feedback { - padding-left: 5px; + @include padding(null, null, null, 5px); .no-overflow { overflow: auto; } diff --git a/src/core/login/pages/init/init.scss b/src/core/login/pages/init/init.scss index 3b164ea59..bdce290f9 100644 --- a/src/core/login/pages/init/init.scss +++ b/src/core/login/pages/init/init.scss @@ -8,10 +8,7 @@ page-core-login-init { } .core-bglogo { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + @include position(0, 0, 0, 0); height: 100%; width: 100%; display: table; diff --git a/src/core/login/pages/reconnect/reconnect.scss b/src/core/login/pages/reconnect/reconnect.scss index b51923a7f..8ae1f4565 100644 --- a/src/core/login/pages/reconnect/reconnect.scss +++ b/src/core/login/pages/reconnect/reconnect.scss @@ -42,17 +42,17 @@ page-core-login-reconnect { .list .core-username { &.item-md { - @include padding-horizontal($item-md-padding-left, $content-padding); + @include padding-horizontal($item-md-padding-start, $content-padding); } &.item-ios { - @include padding-horizontal($item-ios-padding-left, $content-padding); + @include padding-horizontal($item-ios-padding-start, $content-padding); } &.item-wp { - @include padding-horizontal($item-wp-padding-left, $content-padding); + @include padding-horizontal($item-wp-padding-start, $content-padding); } .item-inner { - padding-left: 8px; + @include padding(null, null, null, 8px); } } diff --git a/src/core/user/pages/profile/profile.scss b/src/core/user/pages/profile/profile.scss index cb0594deb..f51ba5364 100644 --- a/src/core/user/pages/profile/profile.scss +++ b/src/core/user/pages/profile/profile.scss @@ -1,8 +1,7 @@ page-core-user-profile { .core-icon-foreground { position: relative; - left: 60px; - bottom: 30px; + @include position(null, null, 30px, 60px); font-size: 24px; } .core-user-communication-handlers { @@ -34,7 +33,7 @@ page-core-user-profile { .core-user-profile-handler { ion-spinner { - margin-left: 0.3em; + @include margin(null, null, null, 0.3em); } } } \ No newline at end of file diff --git a/src/theme/variables.scss b/src/theme/variables.scss index c5019ea2c..710a17c5f 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -254,6 +254,27 @@ $core-question-state-incorrect-color: $red-light !default; background-image: url("data:image/svg+xml;charset=utf-8,") !important; } +@mixin border-start($px, $type, $color) { + @include ltr() { + border-left: $px $type $color; + } + + @include rtl() { + border-right: $px $type $color; + } +} + + +@mixin border-end($px, $type, $color) { + @include ltr() { + border-right: $px $type $color; + } + + @include rtl() { + border-left: $px $type $color; + } +} + // Font Awesome $fa-font-path: $font-path; @import "font-awesome";