From c92f52e0bd4be73d525e6784f09dff3f6f2f7e63 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Fri, 10 Oct 2014 15:22:41 -0400 Subject: [PATCH] cleanup and response to PR review --- cms/envs/common.py | 18 ++++++++++ cms/static/sass/_base.scss | 6 ++-- cms/static/sass/_config.scss | 6 ---- cms/static/sass/elements/_controls.scss | 11 +++++- cms/static/sass/elements/_layout.scss | 18 +++++----- cms/static/sass/elements/_modules.scss | 2 +- cms/static/sass/elements/_xblocks.scss | 2 +- cms/static/sass/style-app-extend1-rtl.scss | 4 +-- cms/static/sass/style-app-extend1.scss | 1 - cms/static/sass/style-app-rtl.scss | 4 +-- cms/static/sass/style-app.scss | 1 - cms/static/sass/style-xmodule-rtl.scss | 36 +++++++++++++++++++ cms/static/sass/style-xmodule.scss | 4 +-- cms/static/sass/vendor/bi-app/_mixins.scss | 4 +-- cms/static/sass/views/_account.scss | 4 +-- cms/static/sass/views/_assets.scss | 4 +-- cms/static/sass/views/_checklists.scss | 4 +-- cms/static/sass/views/_dashboard.scss | 30 ++++++++-------- cms/static/sass/views/_export.scss | 4 +-- cms/static/sass/views/_import.scss | 4 +-- cms/static/sass/views/_outline.scss | 30 ++++++++-------- cms/static/sass/views/_settings.scss | 4 +-- cms/static/sass/views/_textbooks.scss | 6 ++-- cms/static/sass/views/_updates.scss | 4 +-- cms/static/sass/views/_users.scss | 6 ++-- cms/templates/base.html | 2 +- .../lib/xmodule/xmodule/css/capa/display.scss | 2 +- .../xmodule/xmodule/css/sequence/display.scss | 20 ++++++++--- .../xmodule/xmodule/css/video/display.scss | 1 + common/static/sass/_mixins.scss | 4 +-- lms/envs/common.py | 2 +- .../sass/application-extend1-rtl.scss.mako | 1 - lms/static/sass/application-extend1.scss.mako | 1 - .../sass/application-extend2-rtl.scss.mako | 1 - lms/static/sass/application-extend2.scss.mako | 1 - lms/static/sass/application-rtl.scss.mako | 1 - lms/static/sass/application.scss.mako | 1 - lms/static/sass/base/_config.scss | 7 ---- lms/static/sass/base/_mixins.scss | 5 --- lms/static/sass/base/_variables.scss | 5 --- .../sass/course/courseware/_courseware.scss | 2 +- .../sass/course/courseware/_sidebar.scss | 7 ++-- lms/static/sass/discussion/_discussion.scss | 4 +-- .../discussion/views/_create-edit-post.scss | 4 +-- lms/static/sass/multicourse/_dashboard.scss | 2 +- lms/static/sass/shared/_footer.scss | 13 +++---- lms/static/sass/shared/_header.scss | 9 ++--- lms/templates/main.html | 2 +- 48 files changed, 178 insertions(+), 136 deletions(-) delete mode 100644 cms/static/sass/_config.scss create mode 100644 cms/static/sass/style-xmodule-rtl.scss delete mode 100644 lms/static/sass/base/_config.scss diff --git a/cms/envs/common.py b/cms/envs/common.py index a2c471a180..10c285045d 100644 --- a/cms/envs/common.py +++ b/cms/envs/common.py @@ -370,12 +370,30 @@ PIPELINE_CSS = { ], 'output_filename': 'css/cms-style-app-extend1.css', }, + 'style-app-rtl': { + 'source_filenames': [ + 'sass/style-app-rtl.css', + ], + 'output_filename': 'css/cms-style-app-rtl.css', + }, + 'style-app-extend1-rtl': { + 'source_filenames': [ + 'sass/style-app-extend1-rtl.css', + ], + 'output_filename': 'css/cms-style-app-extend1-rtl.css', + }, 'style-xmodule': { 'source_filenames': [ 'sass/style-xmodule.css', ], 'output_filename': 'css/cms-style-xmodule.css', }, + 'style-xmodule-rtl': { + 'source_filenames': [ + 'sass/style-xmodule-rtl.css', + ], + 'output_filename': 'css/cms-style-xmodule-rtl.css', + }, 'style-xmodule-annotations': { 'source_filenames': [ 'css/vendor/ova/annotator.css', diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 52a5b5f0e7..329ecad33f 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -279,17 +279,17 @@ p, ul, ol, dl { @include clearfix(); .page-header { - width: flex-grid(6,12); @include float(left); @include margin-right(flex-gutter()); + width: flex-grid(6,12); } .nav-actions { + @include float(left); + @include text-align(right); position: relative; bottom: -($baseline*0.75); width: flex-grid(6,12); - @include float(left); - @include text-align(right); .nav-item { display: inline-block; diff --git a/cms/static/sass/_config.scss b/cms/static/sass/_config.scss deleted file mode 100644 index c00a518ca7..0000000000 --- a/cms/static/sass/_config.scss +++ /dev/null @@ -1,6 +0,0 @@ -// studio - config -// ==================== - -// setting the layout to handle right to left languages -// false= lang direction left to right (eg. english); true = rtl (eg. arabic) -$rtl: false; diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index f5c9eb7434..fa8eeb072c 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -278,7 +278,16 @@ height: ($baseline*1.2); width: ($baseline); margin: 0; - background: transparent url("../img/drag-handles.png") no-repeat right center; + + // CASE: right to left layout + @include rtl { + background: transparent url("../img/drag-handles.png") no-repeat left center; + } + + // CASE: left to right layout + @include ltr { + background: transparent url("../img/drag-handles.png") no-repeat right center; + } } &.toggle-action { diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index cc3324805c..13a755b60f 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -40,25 +40,25 @@ @include clearfix(); .page-header { - float: left; + @include float(left); width: flex-grid(6,12); - margin-right: flex-gutter(); + @include margin-right(flex-gutter()); } .nav-actions { position: relative; bottom: -($baseline*0.75); - float: right; + @include float(right); width: flex-grid(6,12); - text-align: right; + @include text-align(right); .nav-item { display: inline-block; vertical-align: top; - margin-right: ($baseline/2); + @include margin-right(($baseline/2)); &:last-child { - margin-right: 0; + @include margin-right(0); } } @@ -214,8 +214,8 @@ // 3/4 - 1/4 two col layout %two-col-1 { .content-primary { - float: left; - margin-right: flex-gutter(); + @include float(left); + @include margin-right(flex-gutter()); width: flex-grid(9,12); box-shadow: none; border: 0; @@ -223,7 +223,7 @@ } .content-supplementary { - float: left; + @include float(left); width: flex-grid(3,12); } } diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index 183bf29a64..421f97ff29 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -300,7 +300,7 @@ $outline-indent-width: $baseline; .icon { @extend %t-icon5; - margin-right: ($baseline/4); + @include margin-right($baseline/4); } } diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss index c75daf9b94..bd44611a74 100644 --- a/cms/static/sass/elements/_xblocks.scss +++ b/cms/static/sass/elements/_xblocks.scss @@ -41,7 +41,7 @@ display: inline-block; width: 49%; vertical-align: middle; - text-align: right; + @include text-align(right); } } diff --git a/cms/static/sass/style-app-extend1-rtl.scss b/cms/static/sass/style-app-extend1-rtl.scss index 8801d803b8..db601f8bca 100644 --- a/cms/static/sass/style-app-extend1-rtl.scss +++ b/cms/static/sass/style-app-extend1-rtl.scss @@ -1,10 +1,9 @@ // studio - css architecture // ==================== -@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages - // libs and resets *do not edit* @import 'bourbon/bourbon'; // lib - bourbon +@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages // VENDOR + REBASE *referenced/used vendor presentation and reset* // ==================== @@ -13,7 +12,6 @@ // BASE *default edX offerings* // ==================== // base - utilities -@import 'config'; @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss index d0d5a2b1f5..99460e4b29 100644 --- a/cms/static/sass/style-app-extend1.scss +++ b/cms/static/sass/style-app-extend1.scss @@ -13,7 +13,6 @@ // BASE *default edX offerings* // ==================== // base - utilities -@import 'config'; @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; diff --git a/cms/static/sass/style-app-rtl.scss b/cms/static/sass/style-app-rtl.scss index 12985bd37f..91dea8af04 100644 --- a/cms/static/sass/style-app-rtl.scss +++ b/cms/static/sass/style-app-rtl.scss @@ -1,10 +1,9 @@ // studio - css architecture // ==================== -@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages - // libs and resets *do not edit* @import 'bourbon/bourbon'; // lib - bourbon +@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages // VENDOR + REBASE *referenced/used vendor presentation and reset* // ==================== @@ -13,7 +12,6 @@ // BASE *default edX offerings* // ==================== // base - utilities -@import 'config'; @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; diff --git a/cms/static/sass/style-app.scss b/cms/static/sass/style-app.scss index 8b49c60522..7e8f1b0a7f 100644 --- a/cms/static/sass/style-app.scss +++ b/cms/static/sass/style-app.scss @@ -13,7 +13,6 @@ // BASE *default edX offerings* // ==================== // base - utilities -@import 'config'; @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; diff --git a/cms/static/sass/style-xmodule-rtl.scss b/cms/static/sass/style-xmodule-rtl.scss new file mode 100644 index 0000000000..7c09076a5e --- /dev/null +++ b/cms/static/sass/style-xmodule-rtl.scss @@ -0,0 +1,36 @@ +// studio - xmodule architecture +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon +@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages + +// VENDOR + REBASE *referenced/used vendor presentation and reset* +// ==================== +@import 'reset'; + +// BASE *default edX offerings* +// ==================== +// base - utilities +@import 'variables'; +@import 'mixins'; +@import 'mixins-inherited'; + +// base - assets +@import 'assets/fonts'; +@import 'assets/graphics'; // sprites, basic img/figure/svg styling +@import 'assets/anims'; // animations + +// base - starter +@import 'base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/icons'; // references to icons used +@import 'elements/controls'; // buttons, link styles, sliders, etc. +@import 'elements/navigation'; // all archetypes of navigation + +// xmodule +@import 'xmodule/modules/css/module-styles.scss'; +@import 'xmodule/descriptors/css/module-styles.scss'; +@import 'elements/xmodules'; // styling for Studio-specific contexts diff --git a/cms/static/sass/style-xmodule.scss b/cms/static/sass/style-xmodule.scss index 071b83234c..684ad9ef1d 100644 --- a/cms/static/sass/style-xmodule.scss +++ b/cms/static/sass/style-xmodule.scss @@ -1,10 +1,9 @@ // studio - xmodule architecture // ==================== -@import 'vendor/bi-app/bi-app-ltr'; // set the layout for right to left languages - // libs and resets *do not edit* @import 'bourbon/bourbon'; // lib - bourbon +@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages // VENDOR + REBASE *referenced/used vendor presentation and reset* // ==================== @@ -13,7 +12,6 @@ // BASE *default edX offerings* // ==================== // base - utilities -@import 'config'; @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; diff --git a/cms/static/sass/vendor/bi-app/_mixins.scss b/cms/static/sass/vendor/bi-app/_mixins.scss index 353999671d..e02d4d00ac 100755 --- a/cms/static/sass/vendor/bi-app/_mixins.scss +++ b/cms/static/sass/vendor/bi-app/_mixins.scss @@ -1,9 +1,9 @@ // ------------------------------------------ // bi app mixins -// authors: +// authors: // twitter.com/anasnakawa // twitter.com/victorzamfir -// licensed under the MIT license +// licensed under the MIT license // http://www.opensource.org/licenses/mit-license.php // ------------------------------------------ diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss index 7bb9ce2dcb..1c70554542 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -53,7 +53,7 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; form { @include box-sizing(border-box); @@ -209,7 +209,7 @@ } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; .bit { @extend %t-copy-sub1; diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index a3aa93fd7d..9cc9e1dea6 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -8,11 +8,11 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } .nav-actions { diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss index 2927f6ed63..5246286c3a 100644 --- a/cms/static/sass/views/_checklists.scss +++ b/cms/static/sass/views/_checklists.scss @@ -8,7 +8,7 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; } // checklists - general @@ -336,6 +336,6 @@ } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } } diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index 433df2c777..fc95b229b5 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -14,18 +14,18 @@ // ==================== - // basic layout - .content-primary, .content-supplementary { - @include box-sizing(border-box); - } + // basic layout + .content-primary, .content-supplementary { + @include box-sizing(border-box); + } - .content-primary { - @extend %ui-col-wide; - } + .content-primary { + @extend .ui-col-wide; + } - .content-supplementary { - @extend %ui-col-narrow; - } + .content-supplementary { + @extend .ui-col-narrow; + } // ==================== @@ -437,13 +437,13 @@ .course-link { @extend %ui-depth2; width: flex-grid(6, 9); - margin-right: flex-gutter(); + @include margin-right(flex-gutter()); } // course title .course-title { @extend %t-title4; - margin: 0 ($baseline*2) ($baseline/4) 0; + @include margin(0, ($baseline*2), ($baseline/4), 0); font-weight: 300; } @@ -484,17 +484,17 @@ @extend %ui-depth3; position: static; width: flex-grid(3, 9); - text-align: right; + @include text-align(right); opacity: 0; pointer-events: none; .action { display: inline-block; vertical-align: middle; - margin-right: ($baseline/2); + @include margin-right($baseline/2); &:last-child { - margin-right: 0; + @include margin-right(0); } } diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss index 0c5e9c5216..f913f6fd43 100644 --- a/cms/static/sass/views/_export.scss +++ b/cms/static/sass/views/_export.scss @@ -9,11 +9,11 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss index 1355032ecb..5539688b13 100644 --- a/cms/static/sass/views/_import.scss +++ b/cms/static/sass/views/_import.scss @@ -8,11 +8,11 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } // UI: export controls diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index e96255c153..39a0b088ce 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -73,7 +73,7 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; .no-content { @extend %no-content; @@ -81,7 +81,7 @@ } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } @@ -295,7 +295,7 @@ } .section-header-details { - float: left; + @include float(left); width: flex-grid(6, 9); .icon, .wrapper-section-title { @@ -304,7 +304,7 @@ } .icon { - margin-right: ($baseline/4); + @include margin-right($baseline/4); } .wrapper-section-title { @@ -314,10 +314,10 @@ } .section-header-actions { - float: right; + @include float(right); width: flex-grid(3, 9); margin-top: -($baseline/4); - text-align: right; + @include text-align(right); .actions-list { @extend %actions-list; @@ -383,7 +383,7 @@ } .subsection-header-details { - float: left; + @include float(left); width: flex-grid(6, 9); .icon, .wrapper-subsection-title { @@ -392,7 +392,7 @@ } .icon { - margin-right: ($baseline/4); + @include margin-right($baseline/4); } .wrapper-subsection-title { @@ -403,10 +403,10 @@ } .subsection-header-actions { - float: right; + @include float(right); width: flex-grid(3, 9); margin-top: -($baseline/4); - text-align: right; + @include text-align(right); .actions-list { @extend %actions-list; @@ -422,7 +422,7 @@ // status .subsection-status { - margin: 0 0 0 $outline-indent-width; + @include margin(0, 0, 0, $outline-indent-width); } // content @@ -465,16 +465,16 @@ } .unit-header-details { - float: left; + @include float(left); width: flex-grid(6, 9); margin-top: ($baseline/4); } .unit-header-actions { - float: right; + @include float(right); width: flex-grid(3, 9); margin-top: -($baseline/10); - text-align: right; + @include text-align(right); .actions-list { @extend %actions-list; @@ -495,7 +495,7 @@ .icon { display: inline-block; vertical-align: middle; - margin-right: ($baseline/2); + @include margin-right($baseline/2); } } } diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index 2dcfb35648..1c8e0aee96 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -9,7 +9,7 @@ .content-primary { @extend %ui-window; - @extend %ui-col-wide; + @extend .ui-col-wide; padding: $baseline ($baseline*1.5); } @@ -897,7 +897,7 @@ } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } .wrapper-modal-window { diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index eff594d0ca..08abedbb72 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -8,7 +8,7 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; .no-textbook-content { @extend %no-content; @@ -303,7 +303,7 @@ display: block; width: 46%; border-bottom: none; - @include margin(0 ($baseline*0.75) 0 0); + @include margin(0, ($baseline*0.75), 0, 0); padding: ($baseline/4) 0 0 0; @include float(left); position: relative; @@ -352,6 +352,6 @@ } } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } } diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 0e0681cb7c..7a1a140c70 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -164,7 +164,7 @@ width: 30%; padding: 20px 30px; margin: 0; - @include border-radius(0 3px 3px 0); + @include border-radius(0, 3px, 3px, 0); @include border-left(none); background: $lightGrey; @@ -184,7 +184,7 @@ .edit-icon, .delete-icon { - @include margin-right(4px); + @include margin-right($baseline/5); } } diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss index 783589e0e3..11c89dd196 100644 --- a/cms/static/sass/views/_users.scss +++ b/cms/static/sass/views/_users.scss @@ -9,11 +9,11 @@ } .content-primary { - @extend %ui-col-wide; + @extend .ui-col-wide; } .content-supplementary { - @extend %ui-col-narrow; + @extend .ui-col-narrow; } // ELEM: content @@ -132,7 +132,7 @@ @include transition(color $tmg-f2 ease-in-out 0s); @extend %t-title4; @extend %t-strong; - @include margin(0 ($baseline/2) ($baseline/10) 0); + @include margin(0, ($baseline/2), ($baseline/10), 0); color: $gray-d4; } diff --git a/cms/templates/base.html b/cms/templates/base.html index 77438e7fda..97e28b3c0f 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -9,7 +9,7 @@ <% - # This should be done someplace more central. + # set doc language direction from django.utils.translation import get_language_bidi dir_rtl = 'rtl' if get_language_bidi() else 'ltr' %> diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index 3af3397ba8..1c318b8f24 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -97,7 +97,7 @@ div.problem { input[type="radio"], input[type="checkbox"] { @include float(left); - @include margin(4px 8px 0 0); + @include margin(4px, 8px, 0, 0); } text { diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index deaa5fb578..9222f9dedd 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -276,6 +276,7 @@ nav.sequence-nav { height: 100%; width: 40px; text-indent: -9999px; + overflow: hidden; @include transition(all .2s $ease-in-out-quad 0s); /* &:focus { @@ -295,15 +296,17 @@ nav.sequence-nav { &.prev { @include left(-10px); - @include border-radius(35px 0 0 35px); + @include border-radius(35px, 0, 0, 35px); a { background-position: center 15px; + // CASE: left to right layout @include ltr { background-image: url('../images/sequence-nav/previous-icon.png'); } + // CASE: right to left layout @include rtl { background-image: url('../images/sequence-nav/next-icon.png'); } @@ -312,16 +315,18 @@ nav.sequence-nav { &.next { @include right(-10px); - @include border-radius(0 35px 35px 0); + @include border-radius(0, 35px, 35px, 0); a { @include margin-left(30px); background-position: center 15px; + // CASE: left to right layout @include ltr { background-image: url('../images/sequence-nav/next-icon.png'); } + // CASE: right to left layout @include rtl { background-image: url('../images/sequence-nav/previous-icon.png'); } @@ -365,6 +370,7 @@ nav.sequence-bottom { display: block; padding: lh(.5) 4px; text-indent: -9999px; + overflow: hidden; @include transition(all .2s $ease-in-out-quad 0s); &:hover, &:focus { @@ -383,15 +389,17 @@ nav.sequence-bottom { } &.prev { - @include border-radius(35px 0 0 35px); + @include border-radius(35px, 0, 0, 35px); a { background-position: center 15px; - @include ltr { + // CASE: left to right layout + @include ltr { background-image: url('../images/sequence-nav/previous-icon.png'); } + // CASE: right to left layout @include rtl { background-image: url('../images/sequence-nav/next-icon.png'); } @@ -399,16 +407,18 @@ nav.sequence-bottom { } &.next { - @include border-radius(0 35px 35px 0); + @include border-radius(0, 35px, 35px, 0); @include border-left(none); a { background-position: center 15px; + // CASE: left to right layout @include ltr { background-image: url('../images/sequence-nav/next-icon.png'); } + // CASE: right to left layout @include rtl { background-image: url('../images/sequence-nav/previous-icon.png'); } diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index a6c5cf74a5..23261f835b 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -179,6 +179,7 @@ div.video { line-height: 46px; margin: 0; padding: 0 0 0 15px; + overflow: hidden; text-indent: -9999px; -webkit-font-smoothing: antialiased; box-shadow: 1px 0 0 #555, inset 1px 0 0 #555; diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 2c71bcd2a3..101d2874c1 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -88,13 +88,13 @@ } // layout placeholders -%ui-col-wide { +.ui-col-wide { width: flex-grid(9, 12); @include margin-right(flex-gutter()); @include float(left); } -%ui-col-narrow { +.ui-col-narrow { width: flex-grid(3, 12); @include float(left); } diff --git a/lms/envs/common.py b/lms/envs/common.py index a37c3915a9..c57ff34565 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -672,7 +672,7 @@ FAVICON_PATH = 'images/favicon.ico' TIME_ZONE = 'America/New_York' # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name LANGUAGE_CODE = 'en' # http://www.i18nguy.com/unicode/language-identifiers.html # these languages display right to left -LANGUAGES_BIDI = ("en@rtl", "he", "ar", "fa") +LANGUAGES_BIDI = ("en@rtl", "he", "ar", "fa", "ur", "fa-ir") # Sourced from http://www.localeplanet.com/icu/ and wikipedia LANGUAGES = ( diff --git a/lms/static/sass/application-extend1-rtl.scss.mako b/lms/static/sass/application-extend1-rtl.scss.mako index ae9b76b03e..d27c97d0c4 100644 --- a/lms/static/sass/application-extend1-rtl.scss.mako +++ b/lms/static/sass/application-extend1-rtl.scss.mako @@ -12,7 +12,6 @@ // base - utilities @import 'base/reset'; -@import 'base/config'; @import 'base/variables'; @import 'base/mixins'; diff --git a/lms/static/sass/application-extend1.scss.mako b/lms/static/sass/application-extend1.scss.mako index 3b1f32a8c4..dd184fb6be 100644 --- a/lms/static/sass/application-extend1.scss.mako +++ b/lms/static/sass/application-extend1.scss.mako @@ -12,7 +12,6 @@ // base - utilities @import 'base/reset'; -@import 'base/config'; @import 'base/variables'; @import 'base/mixins'; diff --git a/lms/static/sass/application-extend2-rtl.scss.mako b/lms/static/sass/application-extend2-rtl.scss.mako index 5d0faeea4f..7535f6a7c4 100644 --- a/lms/static/sass/application-extend2-rtl.scss.mako +++ b/lms/static/sass/application-extend2-rtl.scss.mako @@ -12,7 +12,6 @@ // base - utilities @import 'base/reset'; -@import 'base/config'; @import 'base/variables'; @import 'base/mixins'; diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako index ea8626aab5..0ea4e21259 100644 --- a/lms/static/sass/application-extend2.scss.mako +++ b/lms/static/sass/application-extend2.scss.mako @@ -12,7 +12,6 @@ // base - utilities @import 'base/reset'; -@import 'base/config'; @import 'base/variables'; @import 'base/mixins'; diff --git a/lms/static/sass/application-rtl.scss.mako b/lms/static/sass/application-rtl.scss.mako index c696c60e08..2336fe85c0 100644 --- a/lms/static/sass/application-rtl.scss.mako +++ b/lms/static/sass/application-rtl.scss.mako @@ -12,7 +12,6 @@ // base - utilities @import 'base/reset'; -@import 'base/config'; @import 'base/variables'; @import 'base/mixins'; diff --git a/lms/static/sass/application.scss.mako b/lms/static/sass/application.scss.mako index f179fbb36b..80a8e95a83 100644 --- a/lms/static/sass/application.scss.mako +++ b/lms/static/sass/application.scss.mako @@ -12,7 +12,6 @@ // base - utilities @import 'base/reset'; -@import 'base/config'; @import 'base/variables'; @import 'base/mixins'; diff --git a/lms/static/sass/base/_config.scss b/lms/static/sass/base/_config.scss deleted file mode 100644 index df6dbdda08..0000000000 --- a/lms/static/sass/base/_config.scss +++ /dev/null @@ -1,7 +0,0 @@ -// lms - config -// ==================== -// TODO: make the RTL variable work here for LMS and xmodules -// setting the layout to handle right to left languages -// false= lang direction left to right (eg. english); true = rtl (eg. arabic) -//$rtl: true; -// does not work here - is in LMS variables diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index c8af654c39..0cbca47152 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -54,11 +54,6 @@ // ==================== -// Cross-browsers transform -@mixin transform($transform-functions) { - @include prefixer(transform, $transform-functions, webkit moz ms o spec); -} - // extends - UI - used for page/view-level wrappers (for centering/grids) %ui-wrapper { @include clearfix(); diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index e6756c98d8..a54a4687c7 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -1,10 +1,5 @@ // lms variables -// setting the layout to handle right to left languages -// false= lang direction left to right (eg. english); true = rtl (eg. arabic) -$rtl: false; - - // base $baseline: 20px; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 6c8c3edc85..b1fb86cdb4 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -23,7 +23,7 @@ html.video-fullscreen{ .instructor-info-action { @extend %t-copy-sub2; - @include float(left); + @include float(right); margin-left: ($baseline/2); padding: ($baseline/4) ($baseline/2); border-radius: ($baseline/4); diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index 5c471aad51..885d54e886 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -2,7 +2,7 @@ @extend .sidebar; @extend .tran; @include border-right(1px solid $border-color-2); - @include border-radius(3px 0 0 3px); + @include border-radius(3px, 0, 0, 3px); #open_close_accordion { display: none; @@ -66,11 +66,14 @@ background-image: url("/static/images/ui-icons_222222_256x240.png"); // jQuery UI sprite &.ui-icon-triangle-1-e { + + // CASE: left to right layout @include ltr { background-position: -32px -16px; // jQuery UI east arrow position } - @include rtl { + // CASE: right to left layout + @include rtl { background-position: -96px -16px; // jQuery UI west arrow position } } diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index bd3d132b26..492d605e47 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -734,7 +734,7 @@ body.discussion { display: inline-block; position: relative; top: 5px; - margin-right: 6px; + @include margin-right(6px); width: 21px; height: 19px; background: url(../images/show-hide-discussion-icon.png) no-repeat; @@ -744,7 +744,7 @@ body.discussion { .new-post-btn { display: inline-block; - float: right; + @include float(right); } section.discussion { diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index d02cf6002e..3b96976252 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/lms/static/sass/discussion/views/_create-edit-post.scss @@ -46,7 +46,7 @@ .field-help { @include box-sizing(border-box); display: inline-block; - padding-left: $baseline; + @include padding-left($baseline); width: 50%; font-size: 12px; } @@ -131,7 +131,7 @@ .post-option { @include box-sizing(border-box); display: inline-block; - margin-right: $baseline; + @include margin-right($baseline); border: 1px solid transparent; border-radius: 3px; padding: ($baseline/2); diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index d57b76609f..f25c8147ce 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -452,7 +452,7 @@ @include box-sizing(border-box); border-radius: 3px; display: block; - float: left; + @include float(left); font: normal 15px/1.6rem $sans-serif; letter-spacing: 0; padding: 6px 32px 7px; diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 8a7717c825..9b477ca363 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -32,16 +32,16 @@ // colophon .colophon { - margin-right: flex-gutter(); + @include margin-right(flex-gutter()); width: flex-grid(8,12); - float: left; + @include float(left); .nav-colophon { @include clearfix(); margin: $footer_margin; li { - float: left; + @include float(left); margin-right: ($baseline*0.75); a { @@ -102,12 +102,12 @@ margin: -2px 0 8px 0; font-size: em(11); color: $gray-l2; - text-align: left; + @include text-align(left); } .nav-legal { @include clearfix(); - text-align: left; + @include text-align(left); li { display: inline-block; @@ -154,10 +154,11 @@ // platform Open edX logo and link .powered-by { + @include float(right); width: flex-grid(3,12); display: inline-block; vertical-align: bottom; - text-align: right; + @include text-align(right); a { display: inline-block; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 151267216d..33f7b7771f 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -146,6 +146,7 @@ header.global { @include background-image(url('../images/small-header-home-icon.png')); background-repeat: no-repeat; + // CASE: right to left layout @include rtl { background-position: top right; } @@ -420,7 +421,7 @@ header.global-new { vertical-align: middle; &:last-child { - @include margin-right(0px); + @include margin-right(0); } &:hover, &:focus, &:active { @@ -436,12 +437,12 @@ header.global-new { > .primary { display: block; @include float(left); - margin: 0px; + margin: 0; position: relative; > a { margin: 0px; - @include border-right-radius(0px); + @include border-right-radius(0); } &:last-child { @@ -497,7 +498,7 @@ header.global-new { display: none; padding: 5px 10px; position: absolute; - @include right(0px); + @include right(0); top: 34px; width: 170px; z-index: 3; diff --git a/lms/templates/main.html b/lms/templates/main.html index adbae61990..51649afed1 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -4,7 +4,7 @@ <% - # This should be done someplace more central. + # set doc language direction from django.utils.translation import get_language_bidi dir_rtl = 'rtl' if get_language_bidi() else 'ltr' %>