From e255ac1f29007345781e569c2baa7f7eae3d4c88 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Tue, 18 Feb 2014 11:14:54 -0500 Subject: [PATCH 1/5] Initial pass at LMS and Studio RTL --- cms/envs/common.py | 1 + cms/static/sass/_base.scss | 22 ++++---- cms/static/sass/_config.scss | 6 ++ cms/static/sass/elements/_header.scss | 18 +++--- cms/static/sass/elements/_icons.scss | 4 +- cms/static/sass/elements/_navigation.scss | 12 ++-- cms/static/sass/elements/_sock.scss | 10 ++-- .../sass/elements/_system-feedback.scss | 56 +++++++++---------- cms/static/sass/elements/_system-help.scss | 6 +- cms/static/sass/style-app-extend1.scss | 1 + cms/static/sass/style-app.scss | 1 + cms/static/sass/style-xmodule.scss | 1 + cms/static/sass/views/_account.scss | 10 ++-- cms/static/sass/views/_assets.scss | 14 ++--- cms/static/sass/views/_checklists.scss | 30 +++++----- cms/static/sass/views/_dashboard.scss | 22 ++++---- cms/static/sass/views/_export.scss | 6 +- cms/static/sass/views/_import.scss | 6 +- cms/static/sass/views/_outline.scss | 6 +- cms/static/sass/views/_settings.scss | 36 ++++++------ cms/static/sass/views/_static-pages.scss | 6 +- cms/static/sass/views/_textbooks.scss | 16 +++--- cms/static/sass/views/_unit.scss | 2 +- cms/static/sass/views/_updates.scss | 28 +++++----- cms/static/sass/views/_users.scss | 10 ++-- cms/templates/base.html | 11 +++- cms/templates/js/asset.underscore | 4 +- cms/templates/js/edit-chapter.underscore | 2 +- cms/templates/js/show-textbook.underscore | 2 +- cms/templates/settings.html | 4 +- cms/templates/settings_graders.html | 2 +- .../lib/xmodule/xmodule/css/capa/display.scss | 12 ++-- common/lib/xmodule/xmodule/css/tabs/tabs.scss | 2 +- common/static/sass/_mixins.scss | 42 ++++++++++++++ conf/locale/config.yaml | 1 + lms/djangoapps/courseware/tests/test_i18n.py | 2 +- lms/envs/common.py | 5 +- lms/static/sass/application-extend1.scss.mako | 1 + lms/static/sass/application-extend2.scss.mako | 1 + lms/static/sass/application.scss.mako | 1 + lms/static/sass/base/_config.scss | 7 +++ lms/static/sass/base/_mixins.scss | 27 +++++++++ lms/static/sass/base/_variables.scss | 7 +++ lms/static/sass/course/_info.scss | 2 +- lms/static/sass/course/_profile.scss | 6 +- lms/static/sass/course/base/_base.scss | 4 +- lms/static/sass/course/base/_extends.scss | 2 +- lms/static/sass/course/base/_mixins.scss | 28 +++++++++- .../sass/course/courseware/_sidebar.scss | 4 +- .../sass/course/instructor/_instructor.scss | 5 ++ .../sass/course/instructor/_instructor_2.scss | 6 +- .../course/layout/_courseware_header.scss | 8 +-- .../course/layout/_courseware_subnav.scss | 2 +- .../sass/multicourse/_course_about.scss | 4 +- lms/static/sass/multicourse/_courses.scss | 6 +- lms/static/sass/multicourse/_dashboard.scss | 13 +++-- lms/static/sass/shared/_course_object.scss | 10 ++-- lms/static/sass/shared/_header.scss | 14 ++--- lms/templates/main.html | 32 +++++++---- 59 files changed, 373 insertions(+), 236 deletions(-) create mode 100644 cms/static/sass/_config.scss create mode 100644 lms/static/sass/base/_config.scss diff --git a/cms/envs/common.py b/cms/envs/common.py index 3e1cfe2f71..a2c471a180 100644 --- a/cms/envs/common.py +++ b/cms/envs/common.py @@ -307,6 +307,7 @@ STATICFILES_DIRS = [ # Locale/Internationalization 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 +LANGUAGES_BIDI = lms.envs.common.LANGUAGES_BIDI LANGUAGES = lms.envs.common.LANGUAGES LANGUAGE_DICT = dict(LANGUAGES) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 547d9b2e39..10650d8afa 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -279,25 +279,25 @@ p, ul, ol, dl { @include clearfix(); .page-header { - float: left; width: flex-grid(6,12); - margin-right: flex-gutter(); + float: flip(left, right); + #{$margin-right}: flex-gutter(); } .nav-actions { position: relative; bottom: -($baseline*0.75); - float: right; width: flex-grid(6,12); - text-align: right; + float: flip(left, right); + text-align: $right; .nav-item { display: inline-block; vertical-align: top; - margin-right: ($baseline/2); + #{$margin-right}: ($baseline/2); &:last-child { - margin-right: 0; + #{$margin-right}: 0; } } @@ -500,21 +500,21 @@ p, ul, ol, dl { .main-column { clear: both; - float: left; + float: $left; width: 70%; } .sidebar { - float: right; + float: $right; width: 28%; } .left { - float: left; + float: $left; } .right { - float: right; + float: $right; } // ==================== @@ -539,7 +539,7 @@ p, ul, ol, dl { .item-actions { position: absolute; top: 5px; - right: 5px; + #{$right}: 5px; .edit-button, .delete-button, diff --git a/cms/static/sass/_config.scss b/cms/static/sass/_config.scss new file mode 100644 index 0000000000..c00a518ca7 --- /dev/null +++ b/cms/static/sass/_config.scss @@ -0,0 +1,6 @@ +// 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/_header.scss b/cms/static/sass/elements/_header.scss index cbe02a029b..8e65dc2a8b 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -27,14 +27,14 @@ } .wrapper-l { - float: left; + float: flip(left, right); width: flex-grid(7,12); } .wrapper-r { - float: right; + float: flip(right, left); width: flex-grid(4,12); - text-align: right; + text-align: $right; } .branding, .info-course, .nav-course, .nav-account, .nav-pitch { @@ -128,8 +128,8 @@ // specific elements - course name/info .info-course { - margin-right: flex-gutter(); - border-right: 1px solid $gray-l4; + #{$margin-right}: flex-gutter(); + #{$border-right}: 1px solid $gray-l4; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; .course-org, .course-number { @@ -144,7 +144,7 @@ } .course-org { - margin-right: ($baseline/4); + #{$margin-right}: ($baseline/4); } .course-title { @@ -184,7 +184,7 @@ padding: ($baseline*0.75) 0; .nav-sub { - text-align: left; + text-align: $left; } .nav-account-help { @@ -238,7 +238,7 @@ .branding { width: 20%; - margin-right: 2%; + #{$margin-right}: 2%; } .nav-account { @@ -263,7 +263,7 @@ .branding { width: 20%; - margin-right: 2%; + #{$margin-right}: 2%; } .info-course { diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss index 937366c003..1f782e8317 100644 --- a/cms/static/sass/elements/_icons.scss +++ b/cms/static/sass/elements/_icons.scss @@ -12,14 +12,14 @@ .icon-inline { display: inline-block; vertical-align: middle; - margin-right: ($baseline/4); + #{$margin-right}: ($baseline/4); } // ui - badges .wrapper-ui-badge { position: absolute; top: -1px; - left: ($baseline*1.5); + #{$left}: ($baseline*1.5); width: 100%; } diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 98932abb10..33569702a5 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -34,7 +34,7 @@ nav { .ui-toggle-dd { @include transition(all $tmg-f2 ease-in-out 0s); - margin-left: ($baseline/10); + margin: 0 ($baseline/10); display: inline-block; vertical-align: middle; } @@ -148,7 +148,7 @@ nav { } .nav-sub { - text-align: left; + text-align: $left; // ui triangle/nub &:after { @@ -167,20 +167,20 @@ nav { &.ui-right { .wrapper-nav-sub { - left: none; - right: 0; + #{$left}: none; + #{$right}: 0; } .nav-sub { // ui triangle/nub &:after { - right: $baseline; + #{$right}: $baseline; margin-right: -10px; } &:before { - right: $baseline; + #{$right}: $baseline; margin-right: -11px; } } diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss index d29077f642..8c362f971e 100644 --- a/cms/static/sass/elements/_sock.scss +++ b/cms/static/sass/elements/_sock.scss @@ -35,7 +35,7 @@ [class^="icon-"] { @extend %t-icon6; - margin-right: ($baseline/4); + #{$margin-right}: ($baseline/4); } &:hover { @@ -84,11 +84,11 @@ @include clearfix(); .action-item { - float: left; - margin-right: ($baseline/2); + float: flip(left, right); + #{$margin-right}: ($baseline/2); &:last-child { - margin-right: 0; + #{$margin-right}: 0; } .action { @@ -98,7 +98,7 @@ [class^="icon-"] { @extend %t-icon4; vertical-align: middle; - margin-right: $baseline/4; + #{$margin-right}: $baseline/4; } diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss index bf9ec1b05a..93a0cfb46c 100644 --- a/cms/static/sass/elements/_system-feedback.scss +++ b/cms/static/sass/elements/_system-feedback.scss @@ -210,7 +210,7 @@ vertical-align: middle; width: $baseline*17.5; border: 4px solid $black; - text-align: left; + text-align: $left; .copy { border-top: 4px solid $blue; @@ -225,10 +225,10 @@ .nav-item { display: inline-block; - margin-right: ($baseline*0.75); + #{$margin-right}: ($baseline*0.75); &:last-child { - margin-right: 0; + #{$margin-right}: 0; } } @@ -437,22 +437,22 @@ .copy { width: flex-grid(7, 12); - margin-right: flex-gutter(); + #{$margin-right}: flex-gutter(); } .nav-actions { width: flex-grid(4, 12); - float: right; + float: flip(left, right); margin-top: ($baseline/4); text-align: right; .nav-item { display: inline-block; vertical-align: middle; - margin-right: ($baseline/2); + #{$margin-right}: ($baseline/2); &:last-child { - margin-right: 0; + #{$margin-right}: 0; } } } @@ -610,25 +610,25 @@ width: flex-grid(1, 12); } - .copy { - width: flex-grid(7, 12); - margin-right: flex-gutter(); - } + .copy { + width: flex-grid(7, 12); + #{$margin-right}: flex-gutter(); + } - .nav-actions { - width: flex-grid(4, 12); - float: right; - margin-top: ($baseline/2); - text-align: right; + .nav-actions { + width: flex-grid(4, 12); + float: flip(left, right); + margin-top: ($baseline/2); + text-align: right; - .nav-item { - display: inline-block; - vertical-align: middle; - margin-right: ($baseline/2); + .nav-item { + display: inline-block; + vertical-align: middle; + #{$margin-right}: ($baseline/2); - &:last-child { - margin-right: 0; - } + &:last-child { + #{$margin-right}: 0; + } .action-primary { @extend %t-action4; @@ -829,7 +829,7 @@ body.uxdesign.alerts { .content-primary { @extend %ui-window; width: flex-grid(12, 12); - margin-right: flex-gutter(); + #{$margin-right}: flex-gutter(); padding: $baseline ($baseline*1.5); > section { @@ -856,9 +856,9 @@ body.uxdesign.alerts { } a { - float: left; + float: flip(left, right); width: flex-grid(5, 12); - margin-right: flex-gutter(); + #{$margin-right}: flex-gutter(); } } } @@ -882,7 +882,7 @@ body.uxdesign.alerts { @include clearfix; .alert-message { - float: left; + float: flip(left, right); margin: 4px 0 0 0; color: $gray-d3; } @@ -892,7 +892,7 @@ body.uxdesign.alerts { } .alert-action { - float: right; + float: flip(left, right); &.secondary { @include orange-button; diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss index 0538bf6f7d..a35f240c60 100644 --- a/cms/static/sass/elements/_system-help.scss +++ b/cms/static/sass/elements/_system-help.scss @@ -24,14 +24,14 @@ @include clearfix(); .copy { - float: left; + float: flip(left, right); width: flex-grid(8,12); - margin-right: flex-gutter(); + #{$margin-right}: flex-gutter(); } .nav-introduction-supplementary { @extend %t-copy-sub2; - float: right; + float: flip(right, left); width: flex-grid(4,12); display: block; text-align: right; diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss index 924b7c114f..981e9e226f 100644 --- a/cms/static/sass/style-app-extend1.scss +++ b/cms/static/sass/style-app-extend1.scss @@ -11,6 +11,7 @@ // 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 d84d1cfd27..0ff2381a3d 100644 --- a/cms/static/sass/style-app.scss +++ b/cms/static/sass/style-app.scss @@ -11,6 +11,7 @@ // BASE *default edX offerings* // ==================== // base - utilities +@import 'config'; @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; diff --git a/cms/static/sass/style-xmodule.scss b/cms/static/sass/style-xmodule.scss index 330dca99d8..a2ff505729 100644 --- a/cms/static/sass/style-xmodule.scss +++ b/cms/static/sass/style-xmodule.scss @@ -11,6 +11,7 @@ // BASE *default edX offerings* // ==================== // base - utilities +@import 'config'; @import 'variables'; @import 'mixins'; @import 'mixins-inherited'; diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss index adf68981d7..eab6d498bc 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -37,7 +37,7 @@ .action { @extend %t-action3; position: absolute; - right: 0; + #{$right}: 0; top: 40%; } } @@ -50,12 +50,10 @@ .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(8, 12); - margin-right: flex-gutter(); + @extend %ui-col-wide; form { @include box-sizing(border-box); @@ -211,7 +209,7 @@ } .content-supplementary { - width: flex-grid(4, 12); + @extend %ui-col-narrow; .bit { @extend %t-copy-sub1; @@ -243,7 +241,7 @@ @extend %t-action3; position: absolute; top: 0; - right: 0; + #{$right}: 0; } } } diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index e1df5d107f..c61f8bd1e2 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -5,16 +5,14 @@ .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(9, 12); - margin-right: flex-gutter(); + @extend %ui-col-wide; } .content-supplementary { - width: flex-grid(3, 12); + @extend %ui-col-narrow; } .nav-actions { @@ -36,10 +34,10 @@ .new-button { @extend %t-action3; - margin-left: $baseline; + #{$margin-left}: $baseline; [class^="icon-"] { - margin-right: ($baseline/2); + #{$margin-right}: ($baseline/2); } } } @@ -70,7 +68,7 @@ width: flex-grid(3, 12); &.pagination-compact { - text-align: right; + text-align: $right; } &.pagination-full { @@ -136,7 +134,7 @@ .current-page { @extend %ui-depth1; position: absolute; - left: -($baseline/4); + #{$left}: -($baseline/4); } .page-divider { diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss index 8a246d49f4..d616f69f21 100644 --- a/cms/static/sass/views/_checklists.scss +++ b/cms/static/sass/views/_checklists.scss @@ -5,12 +5,10 @@ .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(9, 12); - margin-right: flex-gutter(); + @extend %ui-col-wide; } // checklists - general @@ -58,15 +56,16 @@ .checklist-title { @include transition(color $tmg-f2 ease-in-out 0s); width: flex-grid(6, 9); - margin: 0 flex-gutter() 0 0; - float: left; + margin: 0; + #{$margin-right}: flex-gutter(); + float: flip(left, right); .ui-toggle-expansion { @include transition(all $tmg-f2 ease-in-out 0s); @extend %t-action1; display: inline-block; vertical-align: middle; - margin-right: ($baseline/2); + #{$margin-right}: ($baseline/2); color: $gray-l4; } @@ -86,9 +85,9 @@ .checklist-status { @extend %t-copy-sub1; width: flex-grid(3, 9); - float: right; + float: flip(right, left); margin-top: ($baseline/2); - text-align: right; + text-align: $right; color: $gray-l2; @@ -127,7 +126,7 @@ .action-primary { @include green-button(); - float: left; + float: flip(left, right); .icon-add { @extend %t-icon7; @@ -141,7 +140,7 @@ @include grey-button(); @extend %t-action3; @extend %t-regular; - float: right; + float: flip(right, left); .icon-delete { @extend %t-icon7; @@ -227,15 +226,16 @@ .task-input { display: inline-block; vertical-align: text-top; - float: left; - margin: ($baseline/2) flex-gutter() 0 0; + float: flip(left, right); + margin-top: ($baseline/2); + #{$margin-right}: flex-gutter(); } .task-details { @extend %t-strong; display: inline-block; vertical-align: text-top; - float: left; + float: flip(left, right); width: flex-grid(6,9); .task-name { @@ -264,7 +264,7 @@ @include clearfix(); display: inline-block; vertical-align: middle; - float: right; + float: flip(right, left); width: flex-grid(2,9); margin: ($baseline/2) 0 0 flex-gutter(); opacity: 0.0; @@ -336,6 +336,6 @@ } .content-supplementary { - width: flex-grid(3, 12); + @extend %ui-col-narrow; } } diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index 167cdde7bb..433df2c777 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -14,20 +14,18 @@ // ==================== - // basic layout - .content-primary, .content-supplementary { - @include box-sizing(border-box); - float: left; - } + // basic layout + .content-primary, .content-supplementary { + @include box-sizing(border-box); + } - .content-primary { - width: flex-grid(9, 12); - margin-right: flex-gutter(); - } + .content-primary { + @extend %ui-col-wide; + } - .content-supplementary { - width: flex-grid(3, 12); - } + .content-supplementary { + @extend %ui-col-narrow; + } // ==================== diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss index 34cef96d04..0c5e9c5216 100644 --- a/cms/static/sass/views/_export.scss +++ b/cms/static/sass/views/_export.scss @@ -6,16 +6,14 @@ // UI: basic layout .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(9,12); - margin-right: flex-gutter(); + @extend %ui-col-wide; } .content-supplementary { - width: flex-grid(3,12); + @extend %ui-col-narrow; } diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss index 106a67f00f..1355032ecb 100644 --- a/cms/static/sass/views/_import.scss +++ b/cms/static/sass/views/_import.scss @@ -5,16 +5,14 @@ .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(9,12); - margin-right: flex-gutter(); + @extend %ui-col-wide; } .content-supplementary { - width: flex-grid(3,12); + @extend %ui-col-narrow; } // UI: export controls diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index e57569ac45..e96255c153 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -70,12 +70,10 @@ .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(9, 12); - margin-right: flex-gutter(); + @extend %ui-col-wide; .no-content { @extend %no-content; @@ -83,7 +81,7 @@ } .content-supplementary { - width: flex-grid(3, 12); + @extend %ui-col-narrow; } diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index 0d22c1284f..c85e862410 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -5,13 +5,11 @@ .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { @extend %ui-window; - width: flex-grid(9, 12); - margin-right: flex-gutter(); + @extend %ui-col-wide; padding: $baseline ($baseline*1.5); } @@ -67,16 +65,17 @@ .title-2 { width: flex-grid(4, 9); - margin: 0 flex-gutter() 0 0; - float: left; + margin: 0; + #{$margin-right}: flex-gutter(); + float: flip(left, right); } .tip { @extend %t-copy-sub2; width: flex-grid(5, 9); - float: right; + float: flip(right, left); margin-top: ($baseline/2); - text-align: right; + text-align: $right; color: $gray-l2; } } @@ -372,7 +371,7 @@ } .field { - float: left; + float: flip(left, right); width: flex-grid(3, 9); margin-bottom: ($baseline/4); margin-right: flex-gutter(); @@ -384,7 +383,7 @@ .tip { position: absolute; top: 0; - right: 0; + #{$right}: 0; } } } @@ -598,6 +597,7 @@ .grade-specific-bar { height: 50px !important; + text-align: left; } .grades { @@ -897,13 +897,13 @@ } .content-supplementary { - width: flex-grid(3, 12); + @extend %ui-col-narrow; } - + .wrapper-modal-window { - + .validation-error-modal-content { - + .error-header { p { strong { @@ -911,28 +911,28 @@ } } } - + hr { margin: 25px 0; } - + .error-list { .error-item { .error-item-title { color: $error-red; } - + .error-item-message { width:100%; border: none; resize: none; - + &:focus { outline: 0; } } } - } + } } } } diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index 2900f44ae7..97b2689198 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -203,7 +203,7 @@ position: absolute; display: block; top: 0; - right: 0; + #{$right}: 0; z-index: 11; width: 35px; height: 100%; @@ -238,8 +238,8 @@ .component-actions, .course-nav-item-actions { display: inline-block; - float: right; - margin-right: ($baseline*2); + float: flip(right, left); + #{$margin-right}: ($baseline*2); padding: 8px 0px; vertical-align: middle; text-align: center; diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index 47ca0b578e..c21160cf6e 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -5,12 +5,10 @@ .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(9, 12); - margin-right: flex-gutter(); + @extend %ui-col-wide; .no-textbook-content { @extend %no-content; @@ -31,7 +29,7 @@ .textbook-title { @extend %t-title4; @extend %t-strong; - margin-right: ($baseline*14); + #{$margin-right}: ($baseline*14); } .ui-toggle-expansion { @@ -85,7 +83,7 @@ opacity: 0.0; position: absolute; top: $baseline; - right: $baseline; + #{$right}: $baseline; .action { display: inline-block; @@ -305,9 +303,9 @@ display: block; width: 46%; border-bottom: none; - margin: 0 ($baseline*0.75) 0 0; + margin: flip(0 ($baseline*0.75) 0 0, 0 0 0 ($baseline*0.75)); padding: ($baseline/4) 0 0 0; - float: left; + float: $left; position: relative; input, textarea { @@ -318,7 +316,7 @@ @extend %ui-btn-flat-outline; position: absolute; top: 3px; - right: 0; + #{$right}: 0; } } @@ -354,6 +352,6 @@ } } .content-supplementary { - width: flex-grid(3, 12); + @extend %ui-col-narrow; } } diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 4a3467a675..9ceb0ee843 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -3,5 +3,5 @@ // .view-unit styles will go here once we split it from container .view-unit { - + } diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 2b29a0703c..29c4dc5df5 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -160,31 +160,31 @@ } .course-handouts { - @extend %ui-window; - width: 30%; - padding: 20px 30px; - margin: 0; - border-radius: 0 3px 3px 0; - border-left: none; - background: $lightGrey; + @extend %ui-window; + width: 30%; + padding: 20px 30px; + margin: 0; + border-radius: flip(0 3px 3px 0, 3px 0 0 3px); + #{$border-left}: none; + background: $lightGrey; - .title { - @extend %t-title4; + .title { + @extend %t-title4; @extend %t-light; margin-bottom: 24px; - } + } - .edit-button { - @include white-button(); + .edit-button { + @include white-button; @extend %t-action4; @extend %t-regular; - float: right; + float: right; padding: 3px 10px 4px; margin-left: 7px; .edit-icon, .delete-icon { - margin-right: 4px; + #{$margin-right}: 4px; } } diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss index aa2d21b038..2108877c07 100644 --- a/cms/static/sass/views/_users.scss +++ b/cms/static/sass/views/_users.scss @@ -6,16 +6,14 @@ // LAYOUT: page .content-primary, .content-supplementary { @include box-sizing(border-box); - float: left; } .content-primary { - width: flex-grid(9, 12); - margin-right: flex-gutter(); + @extend %ui-col-wide; } .content-supplementary { - width: flex-grid(3, 12); + @extend %ui-col-narrow; } // ELEM: content @@ -123,7 +121,7 @@ // ELEM: item - metadata .item-metadata { width: flex-grid(5, 9); - margin-right: flex-gutter(); + #{$margin-right}: flex-gutter(); .user-username, .user-email { display: inline-block; @@ -134,7 +132,7 @@ @include transition(color $tmg-f2 ease-in-out 0s); @extend %t-title4; @extend %t-strong; - margin: 0 ($baseline/2) ($baseline/10) 0; + margin: flip(0 ($baseline/2) ($baseline/10) 0, 0 0 ($baseline/10) ($baseline/2)); color: $gray-d4; } diff --git a/cms/templates/base.html b/cms/templates/base.html index 11c9d320aa..77438e7fda 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -8,7 +8,12 @@ - +<% + # This should be done someplace more central. + from django.utils.translation import get_language_bidi + dir_rtl = 'rtl' if get_language_bidi() else 'ltr' +%> + @@ -35,7 +40,7 @@ <%block name="header_extras"></%block> </head> - <body class="<%block name='bodyclass'></%block> hide-wip lang_${LANGUAGE_CODE}"> + <body class="${dir_rtl} <%block name='bodyclass'></%block> hide-wip lang_${LANGUAGE_CODE}"> <%block name="view_notes"></%block> <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a> @@ -341,7 +346,7 @@ % endif <!-- view --> - <div class="wrapper wrapper-view"> + <div class="wrapper wrapper-view" dir="${dir_rtl}"> <% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %> <%include file="widgets/header.html" args="online_help_token=online_help_token" /> diff --git a/cms/templates/js/asset.underscore b/cms/templates/js/asset.underscore index e38794af77..8e86eb9594 100644 --- a/cms/templates/js/asset.underscore +++ b/cms/templates/js/asset.underscore @@ -14,7 +14,7 @@ <%= date_added %> </td> <td class="embed-col"> - <input type="text" class="embeddable-xml-input" value="<%= portable_url %>" readonly> + <input type="text" class="embeddable-xml-input" value="<%= portable_url %>" readonly dir="ltr"> </td> <td class="embed-col"> <input type="text" class="embeddable-xml-input" value="<%= external_url %>" readonly> @@ -30,4 +30,4 @@ <div class="action-button"><i class="icon-lock"></i><i class="icon-unlock-alt"></i></div> </li> </ul> -</td> \ No newline at end of file +</td> diff --git a/cms/templates/js/edit-chapter.underscore b/cms/templates/js/edit-chapter.underscore index 34f42daa64..7a6e723e92 100644 --- a/cms/templates/js/edit-chapter.underscore +++ b/cms/templates/js/edit-chapter.underscore @@ -7,7 +7,7 @@ <div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset <% if (error && error.attributes && error.attributes.asset_path) { print('error'); } %>"> <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %></label> - <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text"> + <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text" dir="ltr"> <span class="tip tip-stacked"><%= gettext("upload a PDF file or provide the path to a Studio asset file") %></span> <button class="action action-upload"><%= gettext("Upload PDF") %></button> </div> diff --git a/cms/templates/js/show-textbook.underscore b/cms/templates/js/show-textbook.underscore index 1767340723..db63aaeb8e 100644 --- a/cms/templates/js/show-textbook.underscore +++ b/cms/templates/js/show-textbook.underscore @@ -12,7 +12,7 @@ <%= chapters.length %> PDF Chapters </a></p> <% } else if(chapters.length === 1) { %> - <p> + <p dir="ltr"> <%= chapters.at(0).get("asset_path") %> </p> <% } %> diff --git a/cms/templates/settings.html b/cms/templates/settings.html index bbeaad3d90..905ff06601 100644 --- a/cms/templates/settings.html +++ b/cms/templates/settings.html @@ -261,7 +261,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s <div class="wrapper-input"> <div class="input"> - <input type="text" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" /> + <input type="text" dir="ltr" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" /> <span class="tip tip-stacked">${_("Please provide a valid path and name to your course image (Note: only JPEG or PNG format supported)")}</span> </div> <button type="button" class="action action-upload-image">${_("Upload Course Image")}</button> @@ -281,7 +281,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s </div> <div class="input"> - <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" /> + <input type="text" dir="ltr" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" /> <span class="tip tip-stacked">${_("Enter your YouTube video's ID (along with any restriction parameters)")}</span> </div> </li> diff --git a/cms/templates/settings_graders.html b/cms/templates/settings_graders.html index c8687b1a8c..9c26972bb4 100644 --- a/cms/templates/settings_graders.html +++ b/cms/templates/settings_graders.html @@ -63,7 +63,7 @@ require(["domReady!", "jquery", "js/views/settings/grading", "js/models/settings <li class="field" id="field-course-grading-range"> <div class="grade-controls course-grading-range well"> <a href="#" class="new-grade-button"><span class="plus-icon"></span></a> - <div class="grade-slider"> + <div class="grade-slider" dir="ltr"> <div class="grade-bar"> <ol class="increments"> <li class="increment-0">0</li> diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index d9db33cb99..4d2f141bd3 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -81,23 +81,23 @@ div.problem { } .indicator_container { - float: left; + float: flip(left, right); width: 25px; height: 1px; - margin-right: 15px; + #{$margin-right}: 15px; } fieldset { @include box-sizing(border-box); margin: 0px 0px $baseline; - padding-left: $baseline; - border-left: 1px solid #ddd; + #{$padding-left}: $baseline; + #{$border-left}: 1px solid #ddd; } input[type="radio"], input[type="checkbox"] { - float: left; - margin: 4px 8px 0 0; + float: flip(left, right); + margin: flip(4px 8px 0 0, 4px 0 0 8px); } text { diff --git a/common/lib/xmodule/xmodule/css/tabs/tabs.scss b/common/lib/xmodule/xmodule/css/tabs/tabs.scss index 3dd0440160..bca3f3ef5e 100644 --- a/common/lib/xmodule/xmodule/css/tabs/tabs.scss +++ b/common/lib/xmodule/xmodule/css/tabs/tabs.scss @@ -23,7 +23,7 @@ .edit-header { @include box-sizing(border-box); - padding: 18px 0 18px $baseline; + padding: 18px $baseline; top: 0 !important; // ugly override for second level tab override right: 0; background-color: $blue; diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index ff3e1a56ad..55d61c4ab9 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -1,6 +1,34 @@ // studio - utilities - mixins and extends // ==================== +// right to left mixins and variables +// thanks to https://gist.github.com/Integralist/7269907 +@function flip($value_ltr, $value_rtl) { + @if $rtl { @return $value_rtl; } + @else { @return $value_ltr; } +} + +$padding-left: padding-left; +$padding-right: padding-right; +$margin-left: margin-left; +$margin-right: margin-right; +$border-left: border-left; +$border-right: border-right; +$left: left; +$right: right; + +@if $rtl { + $padding-left: padding-right; + $padding-right: padding-left; + $margin-left: margin-right; + $margin-right: margin-left; + $border-left: border-right; + $border-right: border-left; + $left: right; + $right: left; +} + + // mixins - font sizing @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; @@ -87,6 +115,20 @@ width: 100%; } +// layout placeholders +%ui-col-wide { + width: flex-grid(9, 12); + #{$margin-right}: flex-gutter(); + float: flip(left, right); +} + +%ui-col-narrow { + width: flex-grid(3, 12); + float: flip(left, right); +} + + + // extends - UI - window %ui-window { @include clearfix(); diff --git a/conf/locale/config.yaml b/conf/locale/config.yaml index f833ef8664..38d4947aa8 100644 --- a/conf/locale/config.yaml +++ b/conf/locale/config.yaml @@ -86,6 +86,7 @@ locales: dummy_locales: - eo - fake2 + - en@rtl # Directories we don't search for strings. ignore_dirs: diff --git a/lms/djangoapps/courseware/tests/test_i18n.py b/lms/djangoapps/courseware/tests/test_i18n.py index 22331c4399..88843689cb 100644 --- a/lms/djangoapps/courseware/tests/test_i18n.py +++ b/lms/djangoapps/courseware/tests/test_i18n.py @@ -17,7 +17,7 @@ class I18nTestCase(TestCase): self.assertIn('<html lang="en">', response.content) self.assertEqual(response['Content-Language'], 'en') self.assertTrue(re.search('<body.*class=".*lang_en">', response.content)) - + def test_esperanto(self): response = self.client.get('/', HTTP_ACCEPT_LANGUAGE='eo') self.assertIn('<html lang="eo">', response.content) diff --git a/lms/envs/common.py b/lms/envs/common.py index 755dd8ef3d..ca8eb6247f 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -671,11 +671,14 @@ FAVICON_PATH = 'images/favicon.ico' # Locale/Internationalization 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") # Sourced from http://www.localeplanet.com/icu/ and wikipedia LANGUAGES = ( ('en', u'English'), - ('eo', u'Dummy Language (Esperanto)'), # Dummy language used for testing + ('en@rtl', u'English (right-to-left)'), + ('eo', u'Dummy Language (Esperanto)'), # Dummy languaged used for testing ('fake2', u'Fake translations'), # Another dummy language for testing (not pushed to prod) ('am', u'አማርኛ'), # Amharic diff --git a/lms/static/sass/application-extend1.scss.mako b/lms/static/sass/application-extend1.scss.mako index 88af68783f..ead0570306 100644 --- a/lms/static/sass/application-extend1.scss.mako +++ b/lms/static/sass/application-extend1.scss.mako @@ -12,6 +12,7 @@ // 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 d3094326d0..5a086c934f 100644 --- a/lms/static/sass/application-extend2.scss.mako +++ b/lms/static/sass/application-extend2.scss.mako @@ -12,6 +12,7 @@ // 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 5365ec52ac..041f9b02b0 100644 --- a/lms/static/sass/application.scss.mako +++ b/lms/static/sass/application.scss.mako @@ -11,6 +11,7 @@ // 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 new file mode 100644 index 0000000000..df6dbdda08 --- /dev/null +++ b/lms/static/sass/base/_config.scss @@ -0,0 +1,7 @@ +// 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 f6cbd3ce5f..42af15e675 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -1,6 +1,33 @@ // lms - utilities - mixins and extends // ==================== +// right to left mixins and variables +// thanks to https://gist.github.com/Integralist/7269907 +@function flip($value_ltr, $value_rtl) { + @if $rtl { @return $value_rtl; } + @else { @return $value_ltr; } +} + +$padding-left: padding-left; +$padding-right: padding-right; +$margin-left: margin-left; +$margin-right: margin-right; +$border-left: border-left; +$border-right: border-right; +$left: left; +$right: right; + +@if $rtl { + $padding-left: padding-right; + $padding-right: padding-left; + $margin-left: margin-right; + $margin-right: margin-left; + $border-left: border-right; + $border-right: border-left; + $left: right; + $right: left; +} + // mixins - font sizing @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 2cb199f4c7..e6756c98d8 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -1,3 +1,10 @@ +// 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/_info.scss b/lms/static/sass/course/_info.scss index eaea329131..bfb5438107 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -80,7 +80,7 @@ div.info-wrapper { section.handouts { @extend .sidebar; border-radius: 0 4px 4px 0; - border-left: 1px solid #ddd; + #{$border-left}: 1px solid #ddd; box-shadow: none; font-size: 14px; diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss index fc1253f915..26a90fabc8 100644 --- a/lms/static/sass/course/_profile.scss +++ b/lms/static/sass/course/_profile.scss @@ -141,7 +141,7 @@ margin-bottom: lh(); h1 { - float: left; + float: $left; font-size: 1em; font-weight: 100; margin: 0; @@ -188,7 +188,7 @@ } h2 { - border-right: 1px dashed #ddd; + #{$border-right}: 1px dashed #ddd; @include box-sizing(border-box); display: table-cell; letter-spacing: 0; @@ -201,7 +201,7 @@ .sections { display: table-cell; - padding-left: flex-gutter(9); + #{$padding-left}: flex-gutter(9); width: flex-grid(7, 9); > div { diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 0363936c8c..c9fd7e4dbe 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -6,7 +6,7 @@ body { } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { - text-align: left; + text-align: $left; font-family: $sans-serif; } @@ -49,7 +49,7 @@ form { form.choicegroup { label { clear: both; - float: left; + float: $left; } } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index b9fa8f7ef6..934e9e45d1 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -1,6 +1,6 @@ h1.top-header { border-bottom: 1px solid $border-color-2; - text-align: left; + text-align: $left; font-size: em(24); font-weight: 100; padding-bottom: lh(); diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss index 766b656afb..dd8b98eea5 100644 --- a/lms/static/sass/course/base/_mixins.scss +++ b/lms/static/sass/course/base/_mixins.scss @@ -1,3 +1,29 @@ +// right to left mixins and variables +@function flip($value_ltr, $value_rtl) { + @if $rtl { @return $value_rtl; } + @else { @return $value_ltr; } +} + +$padding-left: padding-left; +$padding-right: padding-right; +$margin-left: margin-left; +$margin-right: margin-right; +$border-left: border-left; +$border-right: border-right; +$left: left; +$right: right; + +@if $rtl { + $padding-left: padding-right; + $padding-right: padding-left; + $margin-left: margin-right; + $margin-right: margin-left; + $border-left: border-right; + $border-right: border-left; + $left: right; + $right: left; +} + @mixin blue-button { display: block; height: 35px; @@ -54,4 +80,4 @@ &:hover, &:focus { background: -webkit-linear-gradient(top, #888, #666); } -} \ No newline at end of file +} diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index 12588657b3..716b084d90 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -1,8 +1,8 @@ .course-index { @extend .sidebar; @extend .tran; - border-radius: 3px 0 0 3px; - border-right: 1px solid $border-color-2; + border-radius: flip(3px 0 0 3px, 0 3px 3px 0); + #{$border-right}: 1px solid $border-color-2; #open_close_accordion { display: none; diff --git a/lms/static/sass/course/instructor/_instructor.scss b/lms/static/sass/course/instructor/_instructor.scss index 03211f7b45..278c36bd13 100644 --- a/lms/static/sass/course/instructor/_instructor.scss +++ b/lms/static/sass/course/instructor/_instructor.scss @@ -185,3 +185,8 @@ } +.rtl .instructor-dashboard-wrapper .beta-button-wrapper, +.rtl .instructor-dashboard-wrapper .studio-edit-link { + left: 2em; + right: auto; +} diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 7ae6a4fc6e..9bc7d3f227 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -785,7 +785,6 @@ section.instructor-dashboard-content-2 { .info { @include box-sizing(border-box); padding: ($baseline/2); - border: 1px solid $light-gray; color: $lighter-base-font-color; line-height: 1.3em; @@ -1621,3 +1620,8 @@ input[name="subject"] { } } +.rtl .instructor-dashboard-wrapper-2 .olddash-button-wrapper, +.rtl .instructor-dashboard-wrapper-2 .studio-edit-link { + left: 2em; + right: auto; +} diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 7b60475182..288d3a50e1 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -19,7 +19,7 @@ nav.course-material { margin-left: 10px; li { - float: left; + float: $left; list-style: none; margin-right: 6px; @@ -120,7 +120,7 @@ header.global.slim { h1.logo { margin: 0 10px 0 13px; - padding-right: 20px; + #{$padding-right}: 20px; &:before { @extend %faded-vertical-divider; @@ -128,7 +128,7 @@ header.global.slim { display: block; height: 35px; position: absolute; - right: 3px; + #{$right}: 3px; top: 0; width: 1px; } @@ -156,7 +156,7 @@ header.global.slim { h2 { display: block; width: 700px; - float: left; + float: flip(left, right); font-size: 0.9em; font-weight: 600; color: $lighter-base-font-color; diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss index eaffa28668..2fbb149bf8 100644 --- a/lms/static/sass/course/layout/_courseware_subnav.scss +++ b/lms/static/sass/course/layout/_courseware_subnav.scss @@ -18,7 +18,7 @@ nav.course-material { padding: 10px 0 0 0; li { - float: left; + float: $left; list-style: none; a { diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index b6188b300e..e7446be9be 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -295,7 +295,7 @@ } .details { - float: left; + float: flip(left, right); margin-right: flex-gutter(); width: flex-grid(8); font: normal 1em/1.6em $serif; @@ -384,7 +384,7 @@ .course-sidebar { @include box-sizing(border-box); - float: left; + float: flip(left, right); width: flex-grid(4); > section { diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index fe4c4d62a1..be433464c3 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -42,14 +42,14 @@ .logo { display: inline-block; + #{$border-right}: 1px solid $light-gray; height: 80px; - margin-right: 30px; - padding-right: 30px; + #{$margin-right}: 30px; + #{$padding-right}: 30px; position: relative; vertical-align: middle; &::after { - @extend %faded-vertical-divider; content: ""; display: block; height: 80px; diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 50be4fc573..9438440050 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -6,8 +6,9 @@ padding: ($baseline*2) 0 0 0; .profile-sidebar { - float: left; - margin-right: flex-gutter(); + background: transparent; + float: flip(left, right); + #{$margin-right}: flex-gutter(); width: flex-grid(3); background: transparent; box-shadow: 0 0 1px $shadow-l1; @@ -278,7 +279,7 @@ // course listings .my-courses { - float: left; + float: flip(left, right); margin: 0px; width: flex-grid(9); @@ -355,7 +356,7 @@ @include transition(all 0.15s linear 0s); overflow: hidden; position: relative; - float: left; + float: flip(left, right); height: 100%; max-height: 100%; width: 200px; @@ -374,7 +375,7 @@ .info { @include clearfix; - padding: 0 10px 0 230px; + padding: flip(0 10px 0 230px, 0 230px 0 10px); > hgroup { padding: 0; @@ -393,7 +394,7 @@ .date-block { position: absolute; top: 0; - right: 0; + #{$right}: 0; font-family: $sans-serif; font-size: 13px; font-style: italic; diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index b234086e1d..edaa3d6ac6 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -5,11 +5,11 @@ .university-column { width: flex-grid(4); - margin-right: flex-gutter(); + #{$margin-right}t: flex-gutter(); float: left; &:nth-child(3n+3) { - margin-right: 0; + #{$margin-right}: 0; } } @@ -21,11 +21,11 @@ .courses-listing-item { width: flex-grid(4); - margin-right: flex-gutter(); - float: left; + #{$margin-right}: flex-gutter(); + float: flip(left, right); &:nth-child(3n+3) { - margin-right: 0; + #{$margin-right}: 0; } } } diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 912f1e81a8..66297d1648 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -17,8 +17,8 @@ header.global { } h1.logo { - float: left; - margin: -2px 39px 0px 0px; + float: flip(left, right); + margin: flip(-2px 39px 0 0, -2px 0 0 39px); position: relative; a { @@ -27,11 +27,11 @@ header.global { } .left { - float: left; + float: flip(left, right); } .guest { - float: right; + float: flip(right, left); } > li { @@ -104,7 +104,7 @@ header.global { } .user { - float: right; + float: flip(right,left); margin-top: 4px; > .primary { @@ -194,7 +194,7 @@ header.global { height: 0px; position: absolute; @include transform(rotate(-45deg)); - right: 12px; + #{$right}: 12px; top: -6px; width: 0px; } @@ -279,7 +279,7 @@ header.global { } .nav-courseware { - float: right; + float: $right; margin-top: ($baseline/4); list-style: none; diff --git a/lms/templates/main.html b/lms/templates/main.html index 68573776ff..adbae61990 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -3,7 +3,12 @@ <!--[if IE 8]><html class="ie ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]--> <!--[if IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]--> <!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]--> -<head> +<% + # This should be done someplace more central. + from django.utils.translation import get_language_bidi + dir_rtl = 'rtl' if get_language_bidi() else 'ltr' +%> +<head dir="${dir_rtl}"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <%! from django.utils.translation import ugettext as _ %> @@ -117,20 +122,27 @@ </head> -<body class="<%block name='bodyclass'/> lang_${LANGUAGE_CODE}"> - <a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a> +<body class="${dir_rtl} <%block name='bodyclass'/> lang_${LANGUAGE_CODE}"> + <div class="window-wrap" dir="${dir_rtl}"> + <a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a> - <%include file="mathjax_accessible.html" /> + <%include file="mathjax_accessible.html" /> - <%include file="${header_file}" /> + % if not suppress_toplevel_navigation: + <%include file="${header_file}" /> + %endif + + <div class="content-wrapper" id="content"> + ${self.body()} + <%block name="bodyextra"/> + </div> + + % if not suppress_toplevel_navigation: + <%include file="${footer_file}" /> + % endif - <div class="content-wrapper" id="content"> - ${self.body()} - <%block name="bodyextra"/> </div> - <%include file="${footer_file}" /> - <script>window.baseUrl = "${settings.STATIC_URL}";</script> % if not disable_courseware_js: <%static:js group='application'/> From 9b287960e79a35a03240131f1fa0cc73d937f3ed Mon Sep 17 00:00:00 2001 From: Omar Al-Ithawi <i@omardo.com> Date: Mon, 22 Sep 2014 10:08:45 +0300 Subject: [PATCH 2/5] LMS RTL fixes --- .../lib/xmodule/xmodule/css/capa/display.scss | 5 ++- .../xmodule/xmodule/css/sequence/display.scss | 34 ++++++++++------- lms/static/sass/base/_mixins.scss | 4 ++ .../sass/course/courseware/_courseware.scss | 2 +- .../sass/course/courseware/_sidebar.scss | 9 ++++- .../sass/course/instructor/_instructor_2.scss | 2 +- lms/static/sass/discussion/_discussion.scss | 37 ++++++++++++++----- lms/static/sass/discussion/_mixins.scss | 11 ++++-- .../sass/discussion/elements/_actions.scss | 8 ++-- .../sass/discussion/elements/_navigation.scss | 29 +++++++++------ lms/static/sass/discussion/views/_thread.scss | 4 +- lms/static/sass/multicourse/_account.scss | 23 ++++++------ lms/static/sass/multicourse/_error-pages.scss | 2 +- 13 files changed, 108 insertions(+), 62 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index 4d2f141bd3..1ec4def880 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -61,7 +61,7 @@ div.problem { width: 100px; label { - float: left; + float: flip(left, right); clear: both; margin-bottom: 5px; @@ -633,7 +633,8 @@ div.problem { // padding: 8px 12px; // margin-top: 10px; display: inline-block; - margin: 8px 0 0 $baseline/2; + margin-top: 8px; + #{$margin-left}: $baseline/2; color: #666; font-style: italic; -webkit-font-smoothing: antialiased; diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 537461c264..47d7b6cddb 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -293,23 +293,28 @@ nav.sequence-nav { } } + $prev-icon: url('../images/sequence-nav/previous-icon.png'); + $next-icon: url('../images/sequence-nav/next-icon.png'); + &.prev { - left: -10px; - border-radius: 35px 0 0 35px; + left: flip(-10px, auto); + right: flip(auto, -10px); + border-radius: flip(35px 0 0 35px, 0 35px 35px 0); a { - background-image: url('../images/sequence-nav/previous-icon.png'); + background-image: flip($prev-icon, $next-icon); background-position: center 15px; } } &.next { - right: -10px; - border-radius: 0 35px 35px 0; + left: flip(auto, -10px); + right: flip(-10px, auto); + border-radius: flip(0 35px 35px 0, 35px 0 0 35px); a { - margin-left: 30px; - background-image: url('../images/sequence-nav/next-icon.png'); + #{$margin-left}: 30px; + background-image: flip($next-icon, $prev-icon); background-position: center 15px; } } @@ -334,7 +339,7 @@ nav.sequence-bottom { display: inline-block; li { - float: left; + float: flip(left, right); width: 50px; height: 44px; border: 1px solid #ccc; @@ -368,21 +373,24 @@ nav.sequence-bottom { */ } } + $prev-icon: url('../images/sequence-nav/previous-icon.png'); + $next-icon: url('../images/sequence-nav/next-icon.png'); + &.prev { - border-radius: 35px 0 0 35px; + border-radius: flip(35px 0 0 35px, 0 35px 35px 0); a { - background-image: url('../images/sequence-nav/previous-icon.png'); + background-image: flip($prev-icon, $next-icon); background-position: center 15px; } } &.next { - border-radius: 0 35px 35px 0; - border-left: none; + border-radius: flip(0 35px 35px 0, 35px 0 0 35px); + #{$border-left}: none; a { - background-image: url('../images/sequence-nav/next-icon.png'); + background-image: flip($next-icon, $prev-icon); background-position: center 15px; } } diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 42af15e675..125c1b3d36 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -81,6 +81,10 @@ $right: right; // ==================== +// 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 { diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 03b6d743bf..ead47c5c4e 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; - float: right; + float: flip(right, left); 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 716b084d90..b68c7146d0 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -47,7 +47,7 @@ a { border-radius: 0; box-shadow: none; - padding-left: 19px; + #{$padding-left}: 19px; color: $link-color; } @@ -61,9 +61,14 @@ } span.ui-icon { - left: 0; + left: flip(0, auto); + right: flip(0, auto); background-image: url("/static/images/ui-icons_222222_256x240.png"); opacity: 0.3; + + &.ui-icon-triangle-1-e { // jQuery UI east arrow + background-position: flip(-32px -16px, -96px -16px); // flip(jQuery UI east arrow, jQuery UI west arrow) + } } } } diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 9bc7d3f227..434ca846a5 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 { input[type="button"].add { @include idashbutton($blue); position: absolute; - right: $baseline; + #{$right}: $baseline; } } diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index db9cd944f5..42b012ef75 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -11,7 +11,8 @@ body.discussion { } .new-post-icon { - margin: 8px 7px 0 0; + margin-top: 8px; + #{$margin-right}: 7px; font-size: 16px; vertical-align: middle; color: $white; @@ -241,7 +242,7 @@ body.discussion { } .discussion-column { - float: right; + float: flip(right, left); @include box-sizing(border-box); width: 68%; max-width: 800px; @@ -368,7 +369,7 @@ body.discussion { .notification-checkbox { display: inline-block; padding: $baseline/4 0 $baseline/2 0; - margin-right: $baseline/2; + #{$margin-right}: $baseline/2; border-radius: 5px; border: 1px solid gray; @@ -376,7 +377,7 @@ body.discussion { display: inline-block; text-align: center; vertical-align: middle; - margin-left: $baseline/2; + #{$margin-left}: $baseline/2; } .icon { @@ -531,6 +532,13 @@ body.discussion { border-radius: 3px 3px 0 0; padding: $baseline; background-color: $white; + + .response-body { + ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places + #{$padding-left}: 40px; + #{$padding-right}: 0; + } + } } .posted-by { font-weight: 700; @@ -549,11 +557,15 @@ body.discussion { padding: 0 18px; width: 100%; box-shadow: 0 1px 1px $shadow-l1; - text-align: left; + text-align: $left; font-size: 13px; + .icon-reply:before { + content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward + } + span.add-response-btn-text { - padding-left: ($baseline/5); + #{$padding-left}: ($baseline/5); } } } @@ -638,7 +650,7 @@ body.discussion { .discussion-submit-post { @include blue-button; - float: left; + float: $left; } .wmd-button { @@ -674,7 +686,11 @@ body.discussion { padding-left: ($baseline*1.5); width: 100%; box-shadow: 0 1px 1px $shadow-l1; - text-align: left; + text-align: $left; + + .icon-reply:before { + content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward + } &:hover, &:focus { @include linear-gradient(top, $white 35%, #ddd); @@ -895,9 +911,10 @@ body.discussion { float: left; width: 16px; height: 17px; - margin: 8px 7px 0 0; + margin-top: 8px; + #{$margin-right}: 7px; font-size: 16px; - padding-right: $baseline/2; + #{$padding-right}: $baseline/2; vertical-align: middle; color: $white; } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index 0e463cb71f..f4d12f93e8 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -89,7 +89,7 @@ @mixin discussion-wmd-preview-label { padding-top: 3px; - padding-left: 5px; + #{$padding-left}: 5px; width: 100%; color: #bbb; text-transform: uppercase; @@ -100,6 +100,11 @@ padding: 10px 20px; width: 100%; color: #333; + + ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places + #{$padding-left}: 40px; + #{$padding-right}: 0; + } } @-webkit-keyframes fadeIn { @@ -130,11 +135,11 @@ color: $color; .icon { - margin-right: ($baseline/5); + #{$margin-right}: ($baseline/5); } &:last-child { - margin-right: 0; + #{$margin-right}: 0; } &.is-hidden { diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index 76afecdfe2..fa5e9e2dfe 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -8,7 +8,7 @@ .response-actions-list, .comment-actions-list { @extend %ui-no-list; - text-align: right; + text-align: $right; .actions-item { @include box-sizing(border-box); @@ -58,7 +58,7 @@ &:after, &:before { bottom: 100%; - right: 3px; + #{$right}: 3px; border: solid transparent; content: " "; height: 0; @@ -71,7 +71,7 @@ border-color: $transparent; border-bottom-color: $white; border-width: 6px; - margin-right: 1px; + #{$margin-right}: 1px; } &:before { @@ -254,7 +254,7 @@ display: block; padding: ($baseline/10) 0; white-space: nowrap; - text-align: right; + text-align: $right; color: $gray-l1; &:hover, &:focus { diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index 1eb002911d..d983d26acb 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -3,7 +3,7 @@ .forum-nav { @include box-sizing(border-box); - float: left; + float: flip(left, right); position: relative; width: 31%; border: 1px solid #aaa; @@ -34,7 +34,7 @@ .icon { @include font-size(14); - margin-right: ($baseline/4); + #{$margin-right}: ($baseline/4); } } @@ -43,7 +43,7 @@ } .forum-nav-browse-drop-arrow { - margin-left: ($baseline/4); + #{$margin-left}: ($baseline/4); } .forum-nav-search { @@ -60,7 +60,7 @@ position: absolute; margin-top: -6px; top: 50%; - right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding + #{$right}: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding } .forum-nav-search-input { @@ -115,7 +115,7 @@ } .forum-nav-browse-title .icon { - margin-right: ($baseline/2); + #{$margin-right}: ($baseline/2); } // ------------------- @@ -135,14 +135,14 @@ @include box-sizing(border-box); display: inline-block; width: 50%; - text-align: left; + text-align: $left; } .forum-nav-filter-cohort, .forum-nav-sort { @include box-sizing(border-box); display: inline-block; width: 50%; - text-align: right; + text-align: $right; } %forum-nav-select { @@ -200,6 +200,10 @@ .icon { @include font-size(14); + + &:before { + @include transform(scale(flip(1, -1), 1)); // RTL for font awesome question mark + } } .icon-comments { @@ -223,7 +227,7 @@ .forum-nav-thread-wrapper-2 { @extend %forum-nav-thread-wrapper; width: 13%; - text-align: right; + text-align: $right; } .forum-nav-thread-title { @@ -251,7 +255,7 @@ @extend %forum-nav-thread-wrapper-2-content; @extend %t-weight4; position: relative; - margin-left: ($baseline/4); + #{$margin-left}: ($baseline/4); margin-bottom: ($baseline/4); // Because tail is position: absolute border-radius: 2px; padding: ($baseline/10) ($baseline/5); @@ -264,12 +268,13 @@ display: block; position: absolute; bottom: (-$baseline/4); - right: ($baseline/4); + #{$right}: ($baseline/4); width: 0; height: 0; border-style: solid; - border-width: 0 ($baseline/4) ($baseline/4) 0; - border-color: transparent $gray-l3 transparent transparent; + + border-width: flip(0 ($baseline/4) ($baseline/4) 0, ($baseline/4) ($baseline/4) 0 0); + border-color: flip(transparent $gray-l3 transparent transparent, $gray-l3 transparent transparent transparent); } &.is-unread { diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index 4106cf1378..3cd9cf009e 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -17,7 +17,7 @@ body.discussion, .discussion-module { .post-header-actions { display: inline-block; - float: right; + float: $right; vertical-align: middle; width: flex-grid(3,12); } @@ -44,7 +44,7 @@ body.discussion, .discussion-module { .response-header-actions { width: flex-grid(3,12); - float: right; + float: $right; } } diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 39aa9cba39..6ce02ffcd4 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -125,14 +125,14 @@ @extend %heading-2; margin-bottom: $baseline; padding-bottom: $baseline; - text-align: left; + text-align: flip(left, right); } // CASE: marketing/imageery-based headings .title { position: absolute; top: ($baseline*2.5); - left:($baseline*1.5); + #{$left}:($baseline*1.5); .title-super, .title-sub { @extend %t-weight1; @@ -149,7 +149,7 @@ .title-sub { @include font-size(20); - margin-left: ($baseline*2); + #{$margin-left}: ($baseline*2); text-transform: lowercase; color: $header-graphic-sub-color; } @@ -197,14 +197,14 @@ } .content { - margin-right: ($baseline*2); + #{$margin-right}: ($baseline*2); width: 600px; - float: left; + float: flip(left, right); } aside { width: 280px; - float: left; + float: flip(left, right); p, ol, ul { font-size: 14px !important; @@ -274,9 +274,10 @@ .field { display: block; - float: left; + float: flip(left, right); border-bottom: none; - margin: 0 ($baseline*1.5) 0 0; + margin: 0; + #{$margin-right}: ($baseline*1.5); padding-bottom: 0; input, textarea { @@ -336,7 +337,7 @@ .tip { position: absolute; top: 0; - right: 0; + #{$right}: 0; } } @@ -378,7 +379,7 @@ input[type="checkbox"] { display: inline-block; width: auto; - margin-right: ($baseline/4); + #{$margin-right}: ($baseline/4); } label { @@ -702,7 +703,7 @@ h2 { @extend %heading-2; - text-align: left; + text-align: flip(left, right); } } diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss index 629a33891f..a860be8eac 100644 --- a/lms/static/sass/multicourse/_error-pages.scss +++ b/lms/static/sass/multicourse/_error-pages.scss @@ -1,6 +1,6 @@ section.outside-app { @extend .container; - text-align: left; + text-align: flip(left, right); padding: 80px 0; h1 { From ce3cb2786496f495ecdac62b3da6bb21d300bff0 Mon Sep 17 00:00:00 2001 From: Frances Botsford <frances@edx.org> Date: Tue, 7 Oct 2014 09:11:16 -0400 Subject: [PATCH 3/5] switching RTL on the fly - added bi-app for sass compiling --- cms/static/sass/_base.scss | 22 +- cms/static/sass/elements/_header.scss | 18 +- cms/static/sass/elements/_icons.scss | 4 +- cms/static/sass/elements/_navigation.scss | 10 +- cms/static/sass/elements/_sock.scss | 10 +- .../sass/elements/_system-feedback.scss | 32 +- cms/static/sass/elements/_system-help.scss | 8 +- cms/static/sass/style-app-extend1-rtl.scss | 64 ++++ cms/static/sass/style-app-extend1.scss | 2 + cms/static/sass/style-app-rtl.scss | 45 +++ cms/static/sass/style-app.scss | 2 + .../sass/vendor/bi-app/_bi-app-ltr.scss | 11 + .../sass/vendor/bi-app/_bi-app-rtl.scss | 11 + cms/static/sass/vendor/bi-app/_mixins.scss | 294 ++++++++++++++++++ .../sass/vendor/bi-app/_variables-ltr.scss | 15 + .../sass/vendor/bi-app/_variables-rtl.scss | 15 + cms/static/sass/views/_account.scss | 4 +- cms/static/sass/views/_assets.scss | 8 +- cms/static/sass/views/_checklists.scss | 22 +- cms/static/sass/views/_settings.scss | 12 +- cms/static/sass/views/_static-pages.scss | 6 +- cms/static/sass/views/_textbooks.scss | 10 +- cms/static/sass/views/_updates.scss | 6 +- cms/static/sass/views/_users.scss | 4 +- .../lib/xmodule/xmodule/css/capa/display.scss | 16 +- .../xmodule/xmodule/css/sequence/display.scss | 62 ++-- common/static/sass/_mixins.scss | 34 +- lms/envs/common.py | 26 ++ lms/static/sass/application-extend1-rtl.scss | 53 ++++ .../sass/application-extend1-rtl.scss.mako | 62 ++++ lms/static/sass/application-extend1.scss.mako | 2 +- lms/static/sass/application-extend2-rtl.scss | 61 ++++ .../sass/application-extend2-rtl.scss.mako | 70 +++++ lms/static/sass/application-extend2.scss.mako | 2 +- lms/static/sass/application-rtl.scss | 49 +++ lms/static/sass/application-rtl.scss.mako | 58 ++++ lms/static/sass/application.scss.mako | 1 + lms/static/sass/base/_mixins.scss | 27 -- lms/static/sass/course-rtl.scss | 70 +++++ lms/static/sass/course-rtl.scss.mako | 77 +++++ lms/static/sass/course.scss.mako | 1 + lms/static/sass/course/_info.scss | 2 +- lms/static/sass/course/_profile.scss | 6 +- lms/static/sass/course/base/_base.scss | 4 +- lms/static/sass/course/base/_extends.scss | 2 +- lms/static/sass/course/base/_mixins.scss | 25 -- .../sass/course/courseware/_courseware.scss | 2 +- .../sass/course/courseware/_sidebar.scss | 21 +- .../sass/course/instructor/_instructor_2.scss | 2 +- .../course/layout/_courseware_header.scss | 8 +- .../course/layout/_courseware_subnav.scss | 2 +- lms/static/sass/discussion/_discussion.scss | 42 ++- lms/static/sass/discussion/_mixins.scss | 10 +- .../sass/discussion/elements/_actions.scss | 8 +- .../sass/discussion/elements/_navigation.scss | 30 +- lms/static/sass/discussion/views/_thread.scss | 4 +- lms/static/sass/multicourse/_account.scss | 23 +- .../sass/multicourse/_course_about.scss | 4 +- lms/static/sass/multicourse/_courses.scss | 6 +- lms/static/sass/multicourse/_dashboard.scss | 12 +- lms/static/sass/multicourse/_error-pages.scss | 4 +- lms/static/sass/shared/_course_object.scss | 10 +- lms/static/sass/shared/_header.scss | 16 +- .../sass/vendor/bi-app/_bi-app-ltr.scss | 11 + .../sass/vendor/bi-app/_bi-app-rtl.scss | 11 + lms/static/sass/vendor/bi-app/_mixins.scss | 294 ++++++++++++++++++ .../sass/vendor/bi-app/_variables-ltr.scss | 15 + .../sass/vendor/bi-app/_variables-rtl.scss | 15 + lms/templates/main.html | 15 +- 69 files changed, 1604 insertions(+), 306 deletions(-) create mode 100644 cms/static/sass/style-app-extend1-rtl.scss create mode 100644 cms/static/sass/style-app-rtl.scss create mode 100755 cms/static/sass/vendor/bi-app/_bi-app-ltr.scss create mode 100755 cms/static/sass/vendor/bi-app/_bi-app-rtl.scss create mode 100755 cms/static/sass/vendor/bi-app/_mixins.scss create mode 100755 cms/static/sass/vendor/bi-app/_variables-ltr.scss create mode 100755 cms/static/sass/vendor/bi-app/_variables-rtl.scss create mode 100644 lms/static/sass/application-extend1-rtl.scss create mode 100644 lms/static/sass/application-extend1-rtl.scss.mako create mode 100644 lms/static/sass/application-extend2-rtl.scss create mode 100644 lms/static/sass/application-extend2-rtl.scss.mako create mode 100644 lms/static/sass/application-rtl.scss create mode 100644 lms/static/sass/application-rtl.scss.mako create mode 100644 lms/static/sass/course-rtl.scss create mode 100644 lms/static/sass/course-rtl.scss.mako create mode 100755 lms/static/sass/vendor/bi-app/_bi-app-ltr.scss create mode 100755 lms/static/sass/vendor/bi-app/_bi-app-rtl.scss create mode 100755 lms/static/sass/vendor/bi-app/_mixins.scss create mode 100755 lms/static/sass/vendor/bi-app/_variables-ltr.scss create mode 100755 lms/static/sass/vendor/bi-app/_variables-rtl.scss diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 10650d8afa..52a5b5f0e7 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -280,24 +280,24 @@ p, ul, ol, dl { .page-header { width: flex-grid(6,12); - float: flip(left, right); - #{$margin-right}: flex-gutter(); + @include float(left); + @include margin-right(flex-gutter()); } .nav-actions { position: relative; bottom: -($baseline*0.75); width: flex-grid(6,12); - float: flip(left, right); - text-align: $right; + @include float(left); + @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); } } @@ -500,21 +500,21 @@ p, ul, ol, dl { .main-column { clear: both; - float: $left; + @include float(left); width: 70%; } .sidebar { - float: $right; + @include float(right); width: 28%; } .left { - float: $left; + @include float(left); } .right { - float: $right; + @include float(right); } // ==================== @@ -539,7 +539,7 @@ p, ul, ol, dl { .item-actions { position: absolute; top: 5px; - #{$right}: 5px; + @include right(5px); .edit-button, .delete-button, diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 8e65dc2a8b..3bfafc7d28 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -27,14 +27,14 @@ } .wrapper-l { - float: flip(left, right); + @include float(left); width: flex-grid(7,12); } .wrapper-r { - float: flip(right, left); + @include float(right); width: flex-grid(4,12); - text-align: $right; + @include text-align(right); } .branding, .info-course, .nav-course, .nav-account, .nav-pitch { @@ -128,8 +128,8 @@ // specific elements - course name/info .info-course { - #{$margin-right}: flex-gutter(); - #{$border-right}: 1px solid $gray-l4; + @include margin-right(flex-gutter()); + @include border-right(1px solid $gray-l4); padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; .course-org, .course-number { @@ -144,7 +144,7 @@ } .course-org { - #{$margin-right}: ($baseline/4); + @include margin-right($baseline/4); } .course-title { @@ -184,7 +184,7 @@ padding: ($baseline*0.75) 0; .nav-sub { - text-align: $left; + @include text-align(left); } .nav-account-help { @@ -238,7 +238,7 @@ .branding { width: 20%; - #{$margin-right}: 2%; + @include margin-right(2%); } .nav-account { @@ -263,7 +263,7 @@ .branding { width: 20%; - #{$margin-right}: 2%; + @include margin-right(2%); } .info-course { diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss index 1f782e8317..aca138b068 100644 --- a/cms/static/sass/elements/_icons.scss +++ b/cms/static/sass/elements/_icons.scss @@ -12,14 +12,14 @@ .icon-inline { display: inline-block; vertical-align: middle; - #{$margin-right}: ($baseline/4); + @include margin-right($baseline/4); } // ui - badges .wrapper-ui-badge { position: absolute; top: -1px; - #{$left}: ($baseline*1.5); + @include left($baseline*1.5); width: 100%; } diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 33569702a5..70289057ea 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -148,7 +148,7 @@ nav { } .nav-sub { - text-align: $left; + @include text-align(left); // ui triangle/nub &:after { @@ -167,20 +167,20 @@ nav { &.ui-right { .wrapper-nav-sub { - #{$left}: none; - #{$right}: 0; + @include left(none); + @include right(0); } .nav-sub { // ui triangle/nub &:after { - #{$right}: $baseline; + @include right($baseline); margin-right: -10px; } &:before { - #{$right}: $baseline; + @include right($baseline); margin-right: -11px; } } diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss index 8c362f971e..05077ab7db 100644 --- a/cms/static/sass/elements/_sock.scss +++ b/cms/static/sass/elements/_sock.scss @@ -35,7 +35,7 @@ [class^="icon-"] { @extend %t-icon6; - #{$margin-right}: ($baseline/4); + @include margin-right($baseline/4); } &:hover { @@ -84,11 +84,11 @@ @include clearfix(); .action-item { - float: flip(left, right); - #{$margin-right}: ($baseline/2); + @include float(left); + @include margin-right($baseline/2); &:last-child { - #{$margin-right}: 0; + @include margin-right(0); } .action { @@ -98,7 +98,7 @@ [class^="icon-"] { @extend %t-icon4; vertical-align: middle; - #{$margin-right}: $baseline/4; + @include margin-right($baseline/4); } diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss index 93a0cfb46c..b1269e4ebd 100644 --- a/cms/static/sass/elements/_system-feedback.scss +++ b/cms/static/sass/elements/_system-feedback.scss @@ -210,7 +210,7 @@ vertical-align: middle; width: $baseline*17.5; border: 4px solid $black; - text-align: $left; + @include text-align(left); .copy { border-top: 4px solid $blue; @@ -225,10 +225,10 @@ .nav-item { display: inline-block; - #{$margin-right}: ($baseline*0.75); + @include margin-right($baseline*0.75); &:last-child { - #{$margin-right}: 0; + @include margin-right(0); } } @@ -437,22 +437,22 @@ .copy { width: flex-grid(7, 12); - #{$margin-right}: flex-gutter(); + @include margin-right(flex-gutter()); } .nav-actions { width: flex-grid(4, 12); - float: flip(left, right); + @include float(left); margin-top: ($baseline/4); text-align: right; .nav-item { display: inline-block; vertical-align: middle; - #{$margin-right}: ($baseline/2); + @include margin-right($baseline/2); &:last-child { - #{$margin-right}: 0; + @include margin-right(0); } } } @@ -612,22 +612,22 @@ .copy { width: flex-grid(7, 12); - #{$margin-right}: flex-gutter(); + @include margin-right(flex-gutter()); } .nav-actions { width: flex-grid(4, 12); - float: flip(left, right); + @include float(left); margin-top: ($baseline/2); text-align: right; .nav-item { display: inline-block; vertical-align: middle; - #{$margin-right}: ($baseline/2); + @include margin-right($baseline/2); &:last-child { - #{$margin-right}: 0; + @include margin-right(0); } .action-primary { @@ -829,7 +829,7 @@ body.uxdesign.alerts { .content-primary { @extend %ui-window; width: flex-grid(12, 12); - #{$margin-right}: flex-gutter(); + @include margin-right(flex-gutter()); padding: $baseline ($baseline*1.5); > section { @@ -856,9 +856,9 @@ body.uxdesign.alerts { } a { - float: flip(left, right); + @include float(left); width: flex-grid(5, 12); - #{$margin-right}: flex-gutter(); + @include margin-right(flex-gutter()); } } } @@ -882,7 +882,7 @@ body.uxdesign.alerts { @include clearfix; .alert-message { - float: flip(left, right); + @include float(left); margin: 4px 0 0 0; color: $gray-d3; } @@ -892,7 +892,7 @@ body.uxdesign.alerts { } .alert-action { - float: flip(left, right); + @include float(left); &.secondary { @include orange-button; diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss index a35f240c60..1bb350f4fe 100644 --- a/cms/static/sass/elements/_system-help.scss +++ b/cms/static/sass/elements/_system-help.scss @@ -24,17 +24,17 @@ @include clearfix(); .copy { - float: flip(left, right); + @include float(left); width: flex-grid(8,12); - #{$margin-right}: flex-gutter(); + @include margin-right(flex-gutter()); } .nav-introduction-supplementary { @extend %t-copy-sub2; - float: flip(right, left); + @include float(right); width: flex-grid(4,12); display: block; - text-align: right; + @include text-align(right); .icon { @extend %t-action3; diff --git a/cms/static/sass/style-app-extend1-rtl.scss b/cms/static/sass/style-app-extend1-rtl.scss new file mode 100644 index 0000000000..8801d803b8 --- /dev/null +++ b/cms/static/sass/style-app-extend1-rtl.scss @@ -0,0 +1,64 @@ +// 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 + +// VENDOR + REBASE *referenced/used vendor presentation and reset* +// ==================== +@import 'reset'; + +// BASE *default edX offerings* +// ==================== +// base - utilities +@import 'config'; +@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/xblocks'; // studio rendering chrome for xblocks +@import 'elements/modules'; // content module patterns +@import 'elements/layout'; // various standard layouts + +// base - specific views +@import 'views/account'; +@import 'views/assets'; +@import 'views/updates'; +@import 'views/dashboard'; +@import 'views/export'; +@import 'views/index'; +@import 'views/course-create'; +@import 'views/import'; +@import 'views/outline'; +@import 'views/settings'; +@import 'views/static-pages'; +@import 'views/unit'; +@import 'views/container'; +@import 'views/users'; +@import 'views/checklists'; +@import 'views/textbooks'; +@import 'views/export-git'; +@import 'views/group-configuration'; + +// base - contexts +@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs) + +// temp - inherited +@import 'assets/content-types'; + +@import 'developer'; // used for any developer-created scss that needs further polish/refactoring +@import 'shame'; // used for any bad-form/orphaned scss diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss index 981e9e226f..d0d5a2b1f5 100644 --- a/cms/static/sass/style-app-extend1.scss +++ b/cms/static/sass/style-app-extend1.scss @@ -1,6 +1,8 @@ // studio - css architecture // ==================== +@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages + // libs and resets *do not edit* @import 'bourbon/bourbon'; // lib - bourbon diff --git a/cms/static/sass/style-app-rtl.scss b/cms/static/sass/style-app-rtl.scss new file mode 100644 index 0000000000..12985bd37f --- /dev/null +++ b/cms/static/sass/style-app-rtl.scss @@ -0,0 +1,45 @@ +// 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 + +// VENDOR + REBASE *referenced/used vendor presentation and reset* +// ==================== +@import 'reset'; + +// BASE *default edX offerings* +// ==================== +// base - utilities +@import 'config'; +@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/modules'; // content module patterns +@import 'elements/navigation'; // all archetypes of navigation +@import 'elements/layout'; // various standard layouts +@import 'elements/forms'; +@import 'elements/header'; +@import 'elements/footer'; +@import 'elements/sock'; +@import 'elements/tender-widget'; +@import 'elements/system-feedback'; // alerts, notifications, states +@import 'elements/system-help'; // help UI +@import 'elements/modal'; // interstitial UI, dialogs, modal windows +@import 'elements/vendor'; // overrides to vendor-provided styling +@import 'elements/modal-window'; diff --git a/cms/static/sass/style-app.scss b/cms/static/sass/style-app.scss index 0ff2381a3d..8b49c60522 100644 --- a/cms/static/sass/style-app.scss +++ b/cms/static/sass/style-app.scss @@ -1,6 +1,8 @@ // studio - css architecture // ==================== +@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages + // libs and resets *do not edit* @import 'bourbon/bourbon'; // lib - bourbon diff --git a/cms/static/sass/vendor/bi-app/_bi-app-ltr.scss b/cms/static/sass/vendor/bi-app/_bi-app-ltr.scss new file mode 100755 index 0000000000..6278a31380 --- /dev/null +++ b/cms/static/sass/vendor/bi-app/_bi-app-ltr.scss @@ -0,0 +1,11 @@ +// ------------------------------------------ +// left to right module +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +@import 'variables-ltr'; +@import 'mixins'; \ No newline at end of file diff --git a/cms/static/sass/vendor/bi-app/_bi-app-rtl.scss b/cms/static/sass/vendor/bi-app/_bi-app-rtl.scss new file mode 100755 index 0000000000..17b7f2e90f --- /dev/null +++ b/cms/static/sass/vendor/bi-app/_bi-app-rtl.scss @@ -0,0 +1,11 @@ +// ------------------------------------------ +// right to left module +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +@import 'variables-rtl'; +@import 'mixins'; \ No newline at end of file diff --git a/cms/static/sass/vendor/bi-app/_mixins.scss b/cms/static/sass/vendor/bi-app/_mixins.scss new file mode 100755 index 0000000000..353999671d --- /dev/null +++ b/cms/static/sass/vendor/bi-app/_mixins.scss @@ -0,0 +1,294 @@ +// ------------------------------------------ +// bi app mixins +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +// ------------------------------------------ +// Table of contents +// ------------------------------------------ +// padding +// margin +// float +// text align +// clear +// left / right +// border +// - width +// - style +// - color +// - generic +// - radius +// ltr / rtl contents +// ------------------------------------------ + +// generic mixin for properties with values +// (top right bottom left) +// ------------------------------------------ +@mixin bi-app-compact($property, $top, $right, $bottom, $left) { + @if $bi-app-direction == ltr { + #{$property}: $top $right $bottom $left; + } @else { + #{$property}: $top $left $bottom $right; + } +} + +// padding +// ------------------------------------------ +@mixin padding-left($distance) { + padding-#{$bi-app-left}: $distance; +} + +@mixin padding-right($distance) { + padding-#{$bi-app-right}: $distance; +} + +@mixin padding($top, $right, $bottom, $left) { + @include bi-app-compact(padding, $top, $right, $bottom, $left); +} + +// margin +// ------------------------------------------ +@mixin margin-left($distance) { + margin-#{$bi-app-left}: $distance; +} + +@mixin margin-right($distance) { + margin-#{$bi-app-right}: $distance; +} + +@mixin margin($top, $right, $bottom, $left) { + @include bi-app-compact(margin, $top, $right, $bottom, $left); +} + +// float +// ------------------------------------------ +@mixin bi-app-float-left { + float: $bi-app-left; +} + +@mixin bi-app-float-right { + float: $bi-app-right; +} + +@mixin float($direction) { + @if $direction == left { + @include bi-app-float-left; + } @else if $direction == right { + @include bi-app-float-right; + } @else { + float: $direction; + } +} + +// text align +// ------------------------------------------ +@mixin bi-app-text-align-left { + text-align: $bi-app-left; +} + +@mixin bi-app-text-align-right { + text-align: $bi-app-right; +} + +@mixin text-align($direction) { + @if $direction == left { + @include bi-app-text-align-left; + } @else if $direction == right { + @include bi-app-text-align-right; + } @else { + text-align: $direction; + } +} + +// clear +// ------------------------------------------ +@mixin bi-app-clear-left { + clear: $bi-app-left; +} + +@mixin bi-app-clear-right { + clear: $bi-app-right; +} + +@mixin clear($direction) { + @if $direction == left { + @include bi-app-clear-left; + } @else if $direction == right { + @include bi-app-clear-right; + } @else { + clear: $direction; + } +} + +// left / right +// ------------------------------------------ +@mixin left($distance) { + @if $bi-app-direction == ltr { + left: $distance; + } @else if $bi-app-direction == rtl { + right: $distance; + } +} + +@mixin right($distance) { + @if $bi-app-direction == ltr { + right: $distance; + } @else if $bi-app-direction == rtl { + left: $distance; + } +} + +// border +// ------------------------------------------ + +// width +@mixin border-left-width($width) { + border-#{$bi-app-left}-width: $width; +} + +@mixin border-right-width($width) { + border-#{$bi-app-right}-width: $width; +} + +@mixin border-width($top, $right, $bottom, $left) { + @include bi-app-compact(border-width, $top, $right, $bottom, $left); +} + +// style +@mixin border-left-style($style) { + border-#{$bi-app-left}-style: $style; +} + +@mixin border-right-style($style) { + border-#{$bi-app-right}-style: $style; +} + +@mixin border-style($top, $right, $bottom, $left) { + @include bi-app-compact(border-style, $top, $right, $bottom, $left); +} + +// color +@mixin border-left-color($color) { + border-#{$bi-app-left}-color: $color; +} + +@mixin border-right-color($color) { + border-#{$bi-app-right}-color: $color; +} + +@mixin border-color($top, $right, $bottom, $left) { + @include bi-app-compact(border-color, $top, $right, $bottom, $left); +} + +// generic +@mixin border-left($border-style) { + border-#{$bi-app-left}: $border-style; +} + +@mixin border-right($border-style) { + border-#{$bi-app-right}: $border-style; +} + +// radius +@mixin border-top-left-radius($radius) { + -webkit-border-top-#{$bi-app-left}-radius: $radius; + -moz-border-top#{$bi-app-left}-radius: $radius; + border-top-#{$bi-app-left}-radius: $radius; +} + +@mixin border-top-right-radius($radius) { + -webkit-border-top-#{$bi-app-right}-radius: $radius; + -moz-border-top#{$bi-app-right}-radius: $radius; + border-top-#{$bi-app-right}-radius: $radius; +} + +@mixin border-bottom-left-radius($radius) { + -webkit-border-bottom-#{$bi-app-left}-radius: $radius; + -moz-border-bottom#{$bi-app-left}-radius: $radius; + border-bottom-#{$bi-app-left}-radius: $radius; +} + +@mixin border-bottom-right-radius($radius) { + -webkit-border-bottom-#{$bi-app-right}-radius: $radius; + -moz-border-bottom#{$bi-app-right}-radius: $radius; + border-bottom-#{$bi-app-right}-radius: $radius; +} + +@mixin border-right-radius($radius) { + @include border-top-right-radius($radius); + @include border-bottom-right-radius($radius); +} + +@mixin border-left-radius($radius) { + @include border-top-left-radius($radius); + @include border-bottom-left-radius($radius); +} + +@mixin border-top-radius($radius) { + @include border-top-left-radius($radius); + @include border-top-right-radius($radius); +} + +@mixin border-bottom-radius($radius) { + @include border-bottom-left-radius($radius); + @include border-bottom-right-radius($radius); +} + +@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) { + @if $topRight != null { + @include border-top-left-radius($topLeft); + @include border-top-right-radius($topRight); + @include border-bottom-right-radius($bottomRight); + @include border-bottom-left-radius($bottomLeft); + } @else { + -webkit-border-radius: $topLeft; + -moz-border-radius: $topLeft; + -ms-border-radius: $topLeft; + -o-border-radius: $topLeft; + border-radius: $topLeft; + } +} + +// Returns "en" or "ar", useful for image suffixes. +// Usage: background-image: url(/img/header-#{lang()}.png); +@function lang() { + @if $bi-app-direction == ltr { + @return 'en'; + } @else { + @return 'ar'; + } +} + +// Support for "direction" declaration (renders ltr/rtl). +// Useful for form elements as they swap the text-indent property and align the text accordingly. +@mixin direction { + direction: $bi-app-direction; +} + +// Inverts a percentage value. Example: 97% becames 3%. +// Useful for background-position. +@function bi-app-invert-percentage($percentage) { + @if $bi-app-direction == rtl { + @return 100% - $percentage; + } @else { + @return $percentage; + } +} + +// ltr / rtl contents +// ------------------------------------------ +@mixin ltr { + @if $bi-app-direction == ltr { + @content; + } +} + +@mixin rtl { + @if $bi-app-direction == rtl { + @content; + } +} diff --git a/cms/static/sass/vendor/bi-app/_variables-ltr.scss b/cms/static/sass/vendor/bi-app/_variables-ltr.scss new file mode 100755 index 0000000000..36d5a7b06e --- /dev/null +++ b/cms/static/sass/vendor/bi-app/_variables-ltr.scss @@ -0,0 +1,15 @@ +// ------------------------------------------ +// left to right variables to be used by bi-app mixins +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +// namespacing variables with bi-app to +// avoid conflicting with other global variables +$bi-app-left : left; +$bi-app-right : right; +$bi-app-direction : ltr; +$bi-app-invert-direction: rtl; \ No newline at end of file diff --git a/cms/static/sass/vendor/bi-app/_variables-rtl.scss b/cms/static/sass/vendor/bi-app/_variables-rtl.scss new file mode 100755 index 0000000000..7300f17863 --- /dev/null +++ b/cms/static/sass/vendor/bi-app/_variables-rtl.scss @@ -0,0 +1,15 @@ +// ------------------------------------------ +// right to left variables to be used by bi-app mixins +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +// namespacing variables with bi-app to +// avoid conflicting with other global variables +$bi-app-left : right; +$bi-app-right : left; +$bi-app-direction : rtl; +$bi-app-invert-direction: ltr; \ No newline at end of file diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss index eab6d498bc..7bb9ce2dcb 100644 --- a/cms/static/sass/views/_account.scss +++ b/cms/static/sass/views/_account.scss @@ -37,7 +37,7 @@ .action { @extend %t-action3; position: absolute; - #{$right}: 0; + @include right(0); top: 40%; } } @@ -241,7 +241,7 @@ @extend %t-action3; position: absolute; top: 0; - #{$right}: 0; + @include right(0); } } } diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index c61f8bd1e2..a3aa93fd7d 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -34,10 +34,10 @@ .new-button { @extend %t-action3; - #{$margin-left}: $baseline; + @include margin-left($baseline); [class^="icon-"] { - #{$margin-right}: ($baseline/2); + @include margin-right($baseline/2); } } } @@ -68,7 +68,7 @@ width: flex-grid(3, 12); &.pagination-compact { - text-align: $right; + @include text-align(right); } &.pagination-full { @@ -134,7 +134,7 @@ .current-page { @extend %ui-depth1; position: absolute; - #{$left}: -($baseline/4); + @include left(-($baseline/4)); } .page-divider { diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss index d616f69f21..2927f6ed63 100644 --- a/cms/static/sass/views/_checklists.scss +++ b/cms/static/sass/views/_checklists.scss @@ -57,15 +57,15 @@ @include transition(color $tmg-f2 ease-in-out 0s); width: flex-grid(6, 9); margin: 0; - #{$margin-right}: flex-gutter(); - float: flip(left, right); + @include margin-right(flex-gutter()); + @include float(left); .ui-toggle-expansion { @include transition(all $tmg-f2 ease-in-out 0s); @extend %t-action1; display: inline-block; vertical-align: middle; - #{$margin-right}: ($baseline/2); + @include margin-right($baseline/2); color: $gray-l4; } @@ -85,9 +85,9 @@ .checklist-status { @extend %t-copy-sub1; width: flex-grid(3, 9); - float: flip(right, left); + @include float(right); margin-top: ($baseline/2); - text-align: $right; + @include text-align(right); color: $gray-l2; @@ -126,7 +126,7 @@ .action-primary { @include green-button(); - float: flip(left, right); + @include float(left); .icon-add { @extend %t-icon7; @@ -140,7 +140,7 @@ @include grey-button(); @extend %t-action3; @extend %t-regular; - float: flip(right, left); + @include float(right); .icon-delete { @extend %t-icon7; @@ -226,16 +226,16 @@ .task-input { display: inline-block; vertical-align: text-top; - float: flip(left, right); + @include float(left); margin-top: ($baseline/2); - #{$margin-right}: flex-gutter(); + @include margin-right(flex-gutter()); } .task-details { @extend %t-strong; display: inline-block; vertical-align: text-top; - float: flip(left, right); + @include float(left); width: flex-grid(6,9); .task-name { @@ -264,7 +264,7 @@ @include clearfix(); display: inline-block; vertical-align: middle; - float: flip(right, left); + @include float(right); width: flex-grid(2,9); margin: ($baseline/2) 0 0 flex-gutter(); opacity: 0.0; diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index c85e862410..2dcfb35648 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -66,16 +66,16 @@ .title-2 { width: flex-grid(4, 9); margin: 0; - #{$margin-right}: flex-gutter(); - float: flip(left, right); + @include margin-right(flex-gutter()); + @include float(left); } .tip { @extend %t-copy-sub2; width: flex-grid(5, 9); - float: flip(right, left); + @include float(right); margin-top: ($baseline/2); - text-align: $right; + @include text-align(right); color: $gray-l2; } } @@ -371,7 +371,7 @@ } .field { - float: flip(left, right); + @include float(left); width: flex-grid(3, 9); margin-bottom: ($baseline/4); margin-right: flex-gutter(); @@ -383,7 +383,7 @@ .tip { position: absolute; top: 0; - #{$right}: 0; + @include right(0); } } } diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index 97b2689198..5b04353791 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -203,7 +203,7 @@ position: absolute; display: block; top: 0; - #{$right}: 0; + @include right(0); z-index: 11; width: 35px; height: 100%; @@ -238,8 +238,8 @@ .component-actions, .course-nav-item-actions { display: inline-block; - float: flip(right, left); - #{$margin-right}: ($baseline*2); + @include float(right); + @include margin-right($baseline*2); padding: 8px 0px; vertical-align: middle; text-align: center; diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index c21160cf6e..eff594d0ca 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -29,7 +29,7 @@ .textbook-title { @extend %t-title4; @extend %t-strong; - #{$margin-right}: ($baseline*14); + @include margin-right($baseline*14); } .ui-toggle-expansion { @@ -83,7 +83,7 @@ opacity: 0.0; position: absolute; top: $baseline; - #{$right}: $baseline; + @include right($baseline); .action { display: inline-block; @@ -303,9 +303,9 @@ display: block; width: 46%; border-bottom: none; - margin: flip(0 ($baseline*0.75) 0 0, 0 0 0 ($baseline*0.75)); + @include margin(0 ($baseline*0.75) 0 0); padding: ($baseline/4) 0 0 0; - float: $left; + @include float(left); position: relative; input, textarea { @@ -316,7 +316,7 @@ @extend %ui-btn-flat-outline; position: absolute; top: 3px; - #{$right}: 0; + @include right(0); } } diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 29c4dc5df5..0e0681cb7c 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -164,8 +164,8 @@ width: 30%; padding: 20px 30px; margin: 0; - border-radius: flip(0 3px 3px 0, 3px 0 0 3px); - #{$border-left}: none; + @include border-radius(0 3px 3px 0); + @include border-left(none); background: $lightGrey; .title { @@ -184,7 +184,7 @@ .edit-icon, .delete-icon { - #{$margin-right}: 4px; + @include margin-right(4px); } } diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss index 2108877c07..783589e0e3 100644 --- a/cms/static/sass/views/_users.scss +++ b/cms/static/sass/views/_users.scss @@ -121,7 +121,7 @@ // ELEM: item - metadata .item-metadata { width: flex-grid(5, 9); - #{$margin-right}: flex-gutter(); + @include margin-right(flex-gutter()); .user-username, .user-email { display: inline-block; @@ -132,7 +132,7 @@ @include transition(color $tmg-f2 ease-in-out 0s); @extend %t-title4; @extend %t-strong; - margin: flip(0 ($baseline/2) ($baseline/10) 0, 0 0 ($baseline/10) ($baseline/2)); + @include margin(0 ($baseline/2) ($baseline/10) 0); color: $gray-d4; } diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index 1ec4def880..3af3397ba8 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -61,7 +61,7 @@ div.problem { width: 100px; label { - float: flip(left, right); + @include float(left); clear: both; margin-bottom: 5px; @@ -81,23 +81,23 @@ div.problem { } .indicator_container { - float: flip(left, right); + @include float(left); width: 25px; height: 1px; - #{$margin-right}: 15px; + @include margin-right(15px); } fieldset { @include box-sizing(border-box); margin: 0px 0px $baseline; - #{$padding-left}: $baseline; - #{$border-left}: 1px solid #ddd; + @include padding-left($baseline); + @include border-left(1px solid #ddd); } input[type="radio"], input[type="checkbox"] { - float: flip(left, right); - margin: flip(4px 8px 0 0, 4px 0 0 8px); + @include float(left); + @include margin(4px 8px 0 0); } text { @@ -634,7 +634,7 @@ div.problem { // margin-top: 10px; display: inline-block; margin-top: 8px; - #{$margin-left}: $baseline/2; + @include margin-left($baseline/2); color: #666; font-style: italic; -webkit-font-smoothing: antialiased; diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 47d7b6cddb..deaa5fb578 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -293,29 +293,38 @@ nav.sequence-nav { } } - $prev-icon: url('../images/sequence-nav/previous-icon.png'); - $next-icon: url('../images/sequence-nav/next-icon.png'); - &.prev { - left: flip(-10px, auto); - right: flip(auto, -10px); - border-radius: flip(35px 0 0 35px, 0 35px 35px 0); + @include left(-10px); + @include border-radius(35px 0 0 35px); a { - background-image: flip($prev-icon, $next-icon); background-position: center 15px; + + @include ltr { + background-image: url('../images/sequence-nav/previous-icon.png'); + } + + @include rtl { + background-image: url('../images/sequence-nav/next-icon.png'); + } } } &.next { - left: flip(auto, -10px); - right: flip(-10px, auto); - border-radius: flip(0 35px 35px 0, 35px 0 0 35px); + @include right(-10px); + @include border-radius(0 35px 35px 0); a { - #{$margin-left}: 30px; - background-image: flip($next-icon, $prev-icon); + @include margin-left(30px); background-position: center 15px; + + @include ltr { + background-image: url('../images/sequence-nav/next-icon.png'); + } + + @include rtl { + background-image: url('../images/sequence-nav/previous-icon.png'); + } } } } @@ -339,7 +348,7 @@ nav.sequence-bottom { display: inline-block; li { - float: flip(left, right); + @include float(left); width: 50px; height: 44px; border: 1px solid #ccc; @@ -373,25 +382,36 @@ nav.sequence-bottom { */ } } - $prev-icon: url('../images/sequence-nav/previous-icon.png'); - $next-icon: url('../images/sequence-nav/next-icon.png'); - &.prev { - border-radius: flip(35px 0 0 35px, 0 35px 35px 0); + @include border-radius(35px 0 0 35px); a { - background-image: flip($prev-icon, $next-icon); background-position: center 15px; + + @include ltr { + background-image: url('../images/sequence-nav/previous-icon.png'); + } + + @include rtl { + background-image: url('../images/sequence-nav/next-icon.png'); + } } } &.next { - border-radius: flip(0 35px 35px 0, 35px 0 0 35px); - #{$border-left}: none; + @include border-radius(0 35px 35px 0); + @include border-left(none); a { - background-image: flip($next-icon, $prev-icon); background-position: center 15px; + + @include ltr { + background-image: url('../images/sequence-nav/next-icon.png'); + } + + @include rtl { + background-image: url('../images/sequence-nav/previous-icon.png'); + } } } } diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 55d61c4ab9..2c71bcd2a3 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -1,34 +1,6 @@ // studio - utilities - mixins and extends // ==================== -// right to left mixins and variables -// thanks to https://gist.github.com/Integralist/7269907 -@function flip($value_ltr, $value_rtl) { - @if $rtl { @return $value_rtl; } - @else { @return $value_ltr; } -} - -$padding-left: padding-left; -$padding-right: padding-right; -$margin-left: margin-left; -$margin-right: margin-right; -$border-left: border-left; -$border-right: border-right; -$left: left; -$right: right; - -@if $rtl { - $padding-left: padding-right; - $padding-right: padding-left; - $margin-left: margin-right; - $margin-right: margin-left; - $border-left: border-right; - $border-right: border-left; - $left: right; - $right: left; -} - - // mixins - font sizing @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; @@ -118,13 +90,13 @@ $right: right; // layout placeholders %ui-col-wide { width: flex-grid(9, 12); - #{$margin-right}: flex-gutter(); - float: flip(left, right); + @include margin-right(flex-gutter()); + @include float(left); } %ui-col-narrow { width: flex-grid(3, 12); - float: flip(left, right); + @include float(left); } diff --git a/lms/envs/common.py b/lms/envs/common.py index ca8eb6247f..a37c3915a9 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -1069,6 +1069,25 @@ PIPELINE_CSS = { ], 'output_filename': 'css/lms-style-app-extend2.css', }, + 'style-app-rtl': { + 'source_filenames': [ + 'sass/application-rtl.css', + 'sass/ie-rtl.css' + ], + 'output_filename': 'css/lms-style-app-rtl.css', + }, + 'style-app-extend1-rtl': { + 'source_filenames': [ + 'sass/application-extend1-rtl.css', + ], + 'output_filename': 'css/lms-style-app-extend1-rtl.css', + }, + 'style-app-extend2-rtl': { + 'source_filenames': [ + 'sass/application-extend2-rtl.css', + ], + 'output_filename': 'css/lms-style-app-extend2-rtl.css', + }, 'style-course-vendor': { 'source_filenames': [ 'js/vendor/CodeMirror/codemirror.css', @@ -1084,6 +1103,13 @@ PIPELINE_CSS = { ], 'output_filename': 'css/lms-style-course.css', }, + 'style-course-rtl': { + 'source_filenames': [ + 'sass/course-rtl.css', + 'xmodule/modules.css', + ], + 'output_filename': 'css/lms-style-course-rtl.css', + }, 'style-xmodule-annotations': { 'source_filenames': [ 'css/vendor/ova/annotator.css', diff --git a/lms/static/sass/application-extend1-rtl.scss b/lms/static/sass/application-extend1-rtl.scss new file mode 100644 index 0000000000..84cfce127b --- /dev/null +++ b/lms/static/sass/application-extend1-rtl.scss @@ -0,0 +1,53 @@ +/* + * This file is dynamically generated and ignored by Git. + * DO NOT MAKE CHANGES HERE. Instead, go edit its template: + * /edx/app/edxapp/edx-platform/lms/static/sass/application-extend1-rtl.scss.mako + */ + +// lms - css application architecture (platform) +// ==================== + +// 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 + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/config'; +@import 'base/variables'; +@import 'base/mixins'; + + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// shared - platform +@import 'multicourse/home'; +@import 'multicourse/dashboard'; +@import 'multicourse/account'; +@import 'multicourse/courses'; +@import 'multicourse/course_about'; +@import 'multicourse/jobs'; +@import 'multicourse/media-kit'; +@import 'multicourse/about_pages'; +@import 'multicourse/press_release'; +@import 'multicourse/error-pages'; +@import 'multicourse/help'; +@import 'multicourse/edge'; + +@import 'developer'; // used for any developer-created scss that needs further polish/refactoring +@import 'shame'; // used for any bad-form/orphaned scss diff --git a/lms/static/sass/application-extend1-rtl.scss.mako b/lms/static/sass/application-extend1-rtl.scss.mako new file mode 100644 index 0000000000..ae9b76b03e --- /dev/null +++ b/lms/static/sass/application-extend1-rtl.scss.mako @@ -0,0 +1,62 @@ +## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + +// lms - css application architecture (platform) +// ==================== + +// 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 + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/config'; +@import 'base/variables'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env["FEATURES"].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// shared - platform +@import 'multicourse/home'; +@import 'multicourse/dashboard'; +@import 'multicourse/account'; +@import 'multicourse/courses'; +@import 'multicourse/course_about'; +@import 'multicourse/jobs'; +@import 'multicourse/media-kit'; +@import 'multicourse/about_pages'; +@import 'multicourse/press_release'; +@import 'multicourse/error-pages'; +@import 'multicourse/help'; +@import 'multicourse/edge'; + +@import 'developer'; // used for any developer-created scss that needs further polish/refactoring +@import 'shame'; // used for any bad-form/orphaned scss +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution diff --git a/lms/static/sass/application-extend1.scss.mako b/lms/static/sass/application-extend1.scss.mako index ead0570306..3b1f32a8c4 100644 --- a/lms/static/sass/application-extend1.scss.mako +++ b/lms/static/sass/application-extend1.scss.mako @@ -1,11 +1,11 @@ ## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx - // lms - css application architecture (platform) // ==================== // 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 // BASE *default edX offerings* // ==================== diff --git a/lms/static/sass/application-extend2-rtl.scss b/lms/static/sass/application-extend2-rtl.scss new file mode 100644 index 0000000000..d9f7938dc6 --- /dev/null +++ b/lms/static/sass/application-extend2-rtl.scss @@ -0,0 +1,61 @@ +/* + * This file is dynamically generated and ignored by Git. + * DO NOT MAKE CHANGES HERE. Instead, go edit its template: + * /edx/app/edxapp/edx-platform/lms/static/sass/application-extend2-rtl.scss.mako + */ + +// lms - css application architecture (platform) +// ==================== + +// 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 + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/config'; +@import 'base/variables'; +@import 'base/mixins'; + + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; +@import 'elements/system-feedback'; + +// base - specific views +@import 'views/verification'; +@import 'views/shoppingcart'; + +// applications +@import "discussion/utilities/variables"; +@import "discussion/mixins"; +@import 'discussion/discussion'; // Process old file after definitions but before everything else +@import "discussion/elements/actions"; +@import "discussion/elements/editor"; +@import "discussion/elements/labels"; +@import "discussion/elements/navigation"; +@import "discussion/views/thread"; +@import "discussion/views/create-edit-post"; +@import "discussion/views/response"; +@import 'discussion/utilities/developer'; +@import 'discussion/utilities/shame'; + +@import 'news'; + +// temp - shame and developer +@import 'developer'; // used for any developer-created scss that needs further polish/refactoring +@import 'shame'; // used for any bad-form/orphaned scss diff --git a/lms/static/sass/application-extend2-rtl.scss.mako b/lms/static/sass/application-extend2-rtl.scss.mako new file mode 100644 index 0000000000..5d0faeea4f --- /dev/null +++ b/lms/static/sass/application-extend2-rtl.scss.mako @@ -0,0 +1,70 @@ +## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + +// lms - css application architecture (platform) +// ==================== + +// 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 + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/config'; +@import 'base/variables'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env["FEATURES"].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; +@import 'elements/system-feedback'; + +// base - specific views +@import 'views/verification'; +@import 'views/shoppingcart'; + +// applications +@import "discussion/utilities/variables"; +@import "discussion/mixins"; +@import 'discussion/discussion'; // Process old file after definitions but before everything else +@import "discussion/elements/actions"; +@import "discussion/elements/editor"; +@import "discussion/elements/labels"; +@import "discussion/elements/navigation"; +@import "discussion/views/thread"; +@import "discussion/views/create-edit-post"; +@import "discussion/views/response"; +@import 'discussion/utilities/developer'; +@import 'discussion/utilities/shame'; + +@import 'news'; + +// temp - shame and developer +@import 'developer'; // used for any developer-created scss that needs further polish/refactoring +@import 'shame'; // used for any bad-form/orphaned scss +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako index 5a086c934f..ea8626aab5 100644 --- a/lms/static/sass/application-extend2.scss.mako +++ b/lms/static/sass/application-extend2.scss.mako @@ -1,11 +1,11 @@ ## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx - // lms - css application architecture (platform) // ==================== // 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 // BASE *default edX offerings* // ==================== diff --git a/lms/static/sass/application-rtl.scss b/lms/static/sass/application-rtl.scss new file mode 100644 index 0000000000..9d71cb5891 --- /dev/null +++ b/lms/static/sass/application-rtl.scss @@ -0,0 +1,49 @@ +/* + * This file is dynamically generated and ignored by Git. + * DO NOT MAKE CHANGES HERE. Instead, go edit its template: + * /edx/app/edxapp/edx-platform/lms/static/sass/application-rtl.scss.mako + */ + +// lms - css application 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 + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/config'; +@import 'base/variables'; +@import 'base/mixins'; + + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// shared - course +@import 'shared/forms'; +@import 'shared/footer'; +@import 'shared/header'; +@import 'shared/course_object'; +@import 'shared/course_filter'; +@import 'shared/modal'; +@import 'shared/activation_messages'; +@import 'shared/unsubscribe'; + +@import 'developer'; // used for any developer-created scss that needs further polish/refactoring +@import 'shame'; // used for any bad-form/orphaned scss diff --git a/lms/static/sass/application-rtl.scss.mako b/lms/static/sass/application-rtl.scss.mako new file mode 100644 index 0000000000..c696c60e08 --- /dev/null +++ b/lms/static/sass/application-rtl.scss.mako @@ -0,0 +1,58 @@ +## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + +// lms - css application 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 + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/reset'; +@import 'base/config'; +@import 'base/variables'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env["FEATURES"].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// shared - course +@import 'shared/forms'; +@import 'shared/footer'; +@import 'shared/header'; +@import 'shared/course_object'; +@import 'shared/course_filter'; +@import 'shared/modal'; +@import 'shared/activation_messages'; +@import 'shared/unsubscribe'; + +@import 'developer'; // used for any developer-created scss that needs further polish/refactoring +@import 'shame'; // used for any bad-form/orphaned scss +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution diff --git a/lms/static/sass/application.scss.mako b/lms/static/sass/application.scss.mako index 041f9b02b0..f179fbb36b 100644 --- a/lms/static/sass/application.scss.mako +++ b/lms/static/sass/application.scss.mako @@ -5,6 +5,7 @@ // 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 // BASE *default edX offerings* // ==================== diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 125c1b3d36..c8af654c39 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -1,33 +1,6 @@ // lms - utilities - mixins and extends // ==================== -// right to left mixins and variables -// thanks to https://gist.github.com/Integralist/7269907 -@function flip($value_ltr, $value_rtl) { - @if $rtl { @return $value_rtl; } - @else { @return $value_ltr; } -} - -$padding-left: padding-left; -$padding-right: padding-right; -$margin-left: margin-left; -$margin-right: margin-right; -$border-left: border-left; -$border-right: border-right; -$left: left; -$right: right; - -@if $rtl { - $padding-left: padding-right; - $padding-right: padding-left; - $margin-left: margin-right; - $margin-right: margin-left; - $border-left: border-right; - $border-right: border-left; - $left: right; - $right: left; -} - // mixins - font sizing @mixin font-size($sizeValue: 16){ font-size: $sizeValue + px; diff --git a/lms/static/sass/course-rtl.scss b/lms/static/sass/course-rtl.scss new file mode 100644 index 0000000000..efdc274223 --- /dev/null +++ b/lms/static/sass/course-rtl.scss @@ -0,0 +1,70 @@ +/* + * This file is dynamically generated and ignored by Git. + * DO NOT MAKE CHANGES HERE. Instead, go edit its template: + * /edx/app/edxapp/edx-platform/lms/static/sass/course-rtl.scss.mako + */ +@import 'bourbon/bourbon'; +@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages + +@import 'base/reset'; +@import 'base/font_face'; +@import 'base/variables'; +@import 'base/mixins'; + + +@import 'base/base'; +@import 'base/extends'; +@import 'base/animations'; +@import 'shared/tooltips'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// Course base / layout styles +@import 'course/layout/courseware_header'; +@import 'course/layout/footer'; +@import 'course/base/mixins'; +@import 'course/base/base'; +@import 'course/base/extends'; +@import 'xmodule/modules/css/module-styles.scss'; + +// courseware +@import 'course/courseware/courseware'; +@import 'course/courseware/sidebar'; +@import 'course/courseware/amplifier'; +@import 'course/layout/calculator'; +@import 'course/layout/timer'; +@import 'course/layout/chat'; + +// course-specific courseware (all styles in these files should be gated by a +// course-specific class). This should be replaced with a better way of +// providing course-specific styling. +@import "course/courseware/courses/_cs188.scss"; + +// wiki +@import "course/wiki/basic-html"; +@import "course/wiki/sidebar"; +@import "course/wiki/create"; +@import "course/wiki/wiki"; +@import "course/wiki/table"; + +// pages +@import "course/info"; +@import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py +@import "course/textbook"; +@import "course/profile"; +@import "course/gradebook"; +@import "course/tabs"; +@import "course/staff_grading"; +@import "course/rubric"; +@import "course/open_ended_grading"; + +// instructor +@import "course/instructor/instructor"; +@import "course/instructor/instructor_2"; +@import "course/instructor/email"; +@import "xmodule/descriptors/css/module-styles.scss"; + +// discussion +@import "course/discussion/form-wmd-toolbar"; diff --git a/lms/static/sass/course-rtl.scss.mako b/lms/static/sass/course-rtl.scss.mako new file mode 100644 index 0000000000..05eaee88e8 --- /dev/null +++ b/lms/static/sass/course-rtl.scss.mako @@ -0,0 +1,77 @@ +@import 'bourbon/bourbon'; +@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages + +@import 'base/reset'; +@import 'base/font_face'; +@import 'base/variables'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env["FEATURES"].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base'; +@import 'base/extends'; +@import 'base/animations'; +@import 'shared/tooltips'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// Course base / layout styles +@import 'course/layout/courseware_header'; +@import 'course/layout/footer'; +@import 'course/base/mixins'; +@import 'course/base/base'; +@import 'course/base/extends'; +@import 'xmodule/modules/css/module-styles.scss'; + +// courseware +@import 'course/courseware/courseware'; +@import 'course/courseware/sidebar'; +@import 'course/courseware/amplifier'; +@import 'course/layout/calculator'; +@import 'course/layout/timer'; +@import 'course/layout/chat'; + +// course-specific courseware (all styles in these files should be gated by a +// course-specific class). This should be replaced with a better way of +// providing course-specific styling. +@import "course/courseware/courses/_cs188.scss"; + +// wiki +@import "course/wiki/basic-html"; +@import "course/wiki/sidebar"; +@import "course/wiki/create"; +@import "course/wiki/wiki"; +@import "course/wiki/table"; + +// pages +@import "course/info"; +@import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py +@import "course/textbook"; +@import "course/profile"; +@import "course/gradebook"; +@import "course/tabs"; +@import "course/staff_grading"; +@import "course/rubric"; +@import "course/open_ended_grading"; + +// instructor +@import "course/instructor/instructor"; +@import "course/instructor/instructor_2"; +@import "course/instructor/email"; +@import "xmodule/descriptors/css/module-styles.scss"; + +// discussion +@import "course/discussion/form-wmd-toolbar"; diff --git a/lms/static/sass/course.scss.mako b/lms/static/sass/course.scss.mako index 5a9c18a918..eb35050fe9 100644 --- a/lms/static/sass/course.scss.mako +++ b/lms/static/sass/course.scss.mako @@ -1,4 +1,5 @@ @import 'bourbon/bourbon'; +@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages @import 'base/reset'; @import 'base/font_face'; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index bfb5438107..ae38f34279 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -80,7 +80,7 @@ div.info-wrapper { section.handouts { @extend .sidebar; border-radius: 0 4px 4px 0; - #{$border-left}: 1px solid #ddd; + @include border-left(1px solid #ddd); box-shadow: none; font-size: 14px; diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss index 26a90fabc8..d5acd15d36 100644 --- a/lms/static/sass/course/_profile.scss +++ b/lms/static/sass/course/_profile.scss @@ -141,7 +141,7 @@ margin-bottom: lh(); h1 { - float: $left; + @include float(left); font-size: 1em; font-weight: 100; margin: 0; @@ -188,7 +188,7 @@ } h2 { - #{$border-right}: 1px dashed #ddd; + @include border-right(1px dashed #ddd); @include box-sizing(border-box); display: table-cell; letter-spacing: 0; @@ -201,7 +201,7 @@ .sections { display: table-cell; - #{$padding-left}: flex-gutter(9); + @include padding-left(flex-gutter(9)); width: flex-grid(7, 9); > div { diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index c9fd7e4dbe..30b5cfaed7 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -6,7 +6,7 @@ body { } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { - text-align: $left; + @include text-align(left); font-family: $sans-serif; } @@ -49,7 +49,7 @@ form { form.choicegroup { label { clear: both; - float: $left; + @include float(left); } } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index 934e9e45d1..1425a9efc4 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -1,6 +1,6 @@ h1.top-header { border-bottom: 1px solid $border-color-2; - text-align: $left; + @include text-align(left); font-size: em(24); font-weight: 100; padding-bottom: lh(); diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss index dd8b98eea5..3c220ac7f0 100644 --- a/lms/static/sass/course/base/_mixins.scss +++ b/lms/static/sass/course/base/_mixins.scss @@ -1,28 +1,3 @@ -// right to left mixins and variables -@function flip($value_ltr, $value_rtl) { - @if $rtl { @return $value_rtl; } - @else { @return $value_ltr; } -} - -$padding-left: padding-left; -$padding-right: padding-right; -$margin-left: margin-left; -$margin-right: margin-right; -$border-left: border-left; -$border-right: border-right; -$left: left; -$right: right; - -@if $rtl { - $padding-left: padding-right; - $padding-right: padding-left; - $margin-left: margin-right; - $margin-right: margin-left; - $border-left: border-right; - $border-right: border-left; - $left: right; - $right: left; -} @mixin blue-button { display: block; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index ead47c5c4e..6c8c3edc85 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; - float: flip(right, left); + @include float(left); 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 b68c7146d0..5c471aad51 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -1,8 +1,8 @@ .course-index { @extend .sidebar; @extend .tran; - border-radius: flip(3px 0 0 3px, 0 3px 3px 0); - #{$border-right}: 1px solid $border-color-2; + @include border-right(1px solid $border-color-2); + @include border-radius(3px 0 0 3px); #open_close_accordion { display: none; @@ -47,7 +47,7 @@ a { border-radius: 0; box-shadow: none; - #{$padding-left}: 19px; + @include padding-left(19px); color: $link-color; } @@ -61,13 +61,18 @@ } span.ui-icon { - left: flip(0, auto); - right: flip(0, auto); - background-image: url("/static/images/ui-icons_222222_256x240.png"); + @include left(0); opacity: 0.3; + background-image: url("/static/images/ui-icons_222222_256x240.png"); // jQuery UI sprite - &.ui-icon-triangle-1-e { // jQuery UI east arrow - background-position: flip(-32px -16px, -96px -16px); // flip(jQuery UI east arrow, jQuery UI west arrow) + &.ui-icon-triangle-1-e { + @include ltr { + background-position: -32px -16px; // jQuery UI east arrow position + } + + @include rtl { + background-position: -96px -16px; // jQuery UI west arrow position + } } } } diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 434ca846a5..6bc0618bdd 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 { input[type="button"].add { @include idashbutton($blue); position: absolute; - #{$right}: $baseline; + @include right($baseline); } } diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 288d3a50e1..fb8335f0dd 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -19,7 +19,7 @@ nav.course-material { margin-left: 10px; li { - float: $left; + @include float(left); list-style: none; margin-right: 6px; @@ -120,7 +120,7 @@ header.global.slim { h1.logo { margin: 0 10px 0 13px; - #{$padding-right}: 20px; + @include padding-right(20px); &:before { @extend %faded-vertical-divider; @@ -128,7 +128,7 @@ header.global.slim { display: block; height: 35px; position: absolute; - #{$right}: 3px; + @include right(3px); top: 0; width: 1px; } @@ -156,7 +156,7 @@ header.global.slim { h2 { display: block; width: 700px; - float: flip(left, right); + @include float(left); font-size: 0.9em; font-weight: 600; color: $lighter-base-font-color; diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss index 2fbb149bf8..003424c969 100644 --- a/lms/static/sass/course/layout/_courseware_subnav.scss +++ b/lms/static/sass/course/layout/_courseware_subnav.scss @@ -18,7 +18,7 @@ nav.course-material { padding: 10px 0 0 0; li { - float: $left; + @include float(left); list-style: none; a { diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 42b012ef75..62e8987bed 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -12,7 +12,7 @@ body.discussion { .new-post-icon { margin-top: 8px; - #{$margin-right}: 7px; + @include margin-right(7px); font-size: 16px; vertical-align: middle; color: $white; @@ -242,7 +242,7 @@ body.discussion { } .discussion-column { - float: flip(right, left); + @include float(right); @include box-sizing(border-box); width: 68%; max-width: 800px; @@ -369,7 +369,7 @@ body.discussion { .notification-checkbox { display: inline-block; padding: $baseline/4 0 $baseline/2 0; - #{$margin-right}: $baseline/2; + @include margin-right($baseline/2); border-radius: 5px; border: 1px solid gray; @@ -377,7 +377,7 @@ body.discussion { display: inline-block; text-align: center; vertical-align: middle; - #{$margin-left}: $baseline/2; + @include margin-right($baseline/2); } .icon { @@ -535,8 +535,8 @@ body.discussion { .response-body { ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places - #{$padding-left}: 40px; - #{$padding-right}: 0; + @include padding-left(40px); + @include padding-right(0); } } } @@ -557,15 +557,21 @@ body.discussion { padding: 0 18px; width: 100%; box-shadow: 0 1px 1px $shadow-l1; - text-align: $left; + @include text-align(left); font-size: 13px; - .icon-reply:before { - content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward + .icon-reply:before { // flip the icon for RTL + @include ltr { + content: "\f112"; // FA icon arrow to the left + } + + @include rtl { + content: "\f064"; // FA icon arrow to the right + } } span.add-response-btn-text { - #{$padding-left}: ($baseline/5); + @include padding-left($baseline/5); } } } @@ -650,7 +656,7 @@ body.discussion { .discussion-submit-post { @include blue-button; - float: $left; + @include float(left); } .wmd-button { @@ -686,10 +692,16 @@ body.discussion { padding-left: ($baseline*1.5); width: 100%; box-shadow: 0 1px 1px $shadow-l1; - text-align: $left; + @include text-align(left); .icon-reply:before { - content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward + @include ltr { + content: "\f112"; // FA icon arrow to the left + } + + @include rtl { + content: "\f064"; // FA icon arrow to the right + } } &:hover, &:focus { @@ -912,9 +924,9 @@ body.discussion { width: 16px; height: 17px; margin-top: 8px; - #{$margin-right}: 7px; + @include margin-right(7px); font-size: 16px; - #{$padding-right}: $baseline/2; + @include padding-right($baseline/2); vertical-align: middle; color: $white; } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index f4d12f93e8..26f173f542 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -89,7 +89,7 @@ @mixin discussion-wmd-preview-label { padding-top: 3px; - #{$padding-left}: 5px; + @include padding-left(5px); width: 100%; color: #bbb; text-transform: uppercase; @@ -102,8 +102,8 @@ color: #333; ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places - #{$padding-left}: 40px; - #{$padding-right}: 0; + @include padding-left(40px); + @include padding-right(0); } } @@ -135,11 +135,11 @@ color: $color; .icon { - #{$margin-right}: ($baseline/5); + @include margin-right($baseline/5); } &:last-child { - #{$margin-right}: 0; + @include margin-right(0); } &.is-hidden { diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index fa5e9e2dfe..5a8ff68a03 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -8,7 +8,7 @@ .response-actions-list, .comment-actions-list { @extend %ui-no-list; - text-align: $right; + @include text-align(right); .actions-item { @include box-sizing(border-box); @@ -58,7 +58,7 @@ &:after, &:before { bottom: 100%; - #{$right}: 3px; + @include right(3px); border: solid transparent; content: " "; height: 0; @@ -71,7 +71,7 @@ border-color: $transparent; border-bottom-color: $white; border-width: 6px; - #{$margin-right}: 1px; + @include margin-right(1px); } &:before { @@ -254,7 +254,7 @@ display: block; padding: ($baseline/10) 0; white-space: nowrap; - text-align: $right; + @include text-align(right); color: $gray-l1; &:hover, &:focus { diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index d983d26acb..48b18d8a0f 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -3,7 +3,7 @@ .forum-nav { @include box-sizing(border-box); - float: flip(left, right); + @include float(left); position: relative; width: 31%; border: 1px solid #aaa; @@ -34,7 +34,7 @@ .icon { @include font-size(14); - #{$margin-right}: ($baseline/4); + @include margin-right($baseline/4); } } @@ -43,7 +43,7 @@ } .forum-nav-browse-drop-arrow { - #{$margin-left}: ($baseline/4); + @include margin-left($baseline/4); } .forum-nav-search { @@ -60,7 +60,7 @@ position: absolute; margin-top: -6px; top: 50%; - #{$right}: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding + @include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding } .forum-nav-search-input { @@ -115,7 +115,7 @@ } .forum-nav-browse-title .icon { - #{$margin-right}: ($baseline/2); + @include margin-right($baseline/2); } // ------------------- @@ -135,14 +135,14 @@ @include box-sizing(border-box); display: inline-block; width: 50%; - text-align: $left; + @include text-align(left); } .forum-nav-filter-cohort, .forum-nav-sort { @include box-sizing(border-box); display: inline-block; width: 50%; - text-align: $right; + @include text-align(right); } %forum-nav-select { @@ -202,7 +202,10 @@ @include font-size(14); &:before { - @include transform(scale(flip(1, -1), 1)); // RTL for font awesome question mark + + @include rtl { + @include transform(scale(-1, 1)); // RTL for font awesome question mark + } } } @@ -227,7 +230,7 @@ .forum-nav-thread-wrapper-2 { @extend %forum-nav-thread-wrapper; width: 13%; - text-align: $right; + @include text-align(right); } .forum-nav-thread-title { @@ -255,7 +258,7 @@ @extend %forum-nav-thread-wrapper-2-content; @extend %t-weight4; position: relative; - #{$margin-left}: ($baseline/4); + @include margin-left($baseline/4); margin-bottom: ($baseline/4); // Because tail is position: absolute border-radius: 2px; padding: ($baseline/10) ($baseline/5); @@ -268,13 +271,12 @@ display: block; position: absolute; bottom: (-$baseline/4); - #{$right}: ($baseline/4); + @include right($baseline/4); width: 0; height: 0; border-style: solid; - - border-width: flip(0 ($baseline/4) ($baseline/4) 0, ($baseline/4) ($baseline/4) 0 0); - border-color: flip(transparent $gray-l3 transparent transparent, $gray-l3 transparent transparent transparent); + @include border-width(0, ($baseline/4), ($baseline/4), 0); + @include border-color(transparent, $gray-l3, transparent, transparent); } &.is-unread { diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index 3cd9cf009e..ee0f0071d3 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -17,7 +17,7 @@ body.discussion, .discussion-module { .post-header-actions { display: inline-block; - float: $right; + @include float(right); vertical-align: middle; width: flex-grid(3,12); } @@ -44,7 +44,7 @@ body.discussion, .discussion-module { .response-header-actions { width: flex-grid(3,12); - float: $right; + @include float(right); } } diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 6ce02ffcd4..0c4243dce7 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -123,16 +123,16 @@ // CASE: normal typographical headings h1 { @extend %heading-2; + @include text-align(left); margin-bottom: $baseline; padding-bottom: $baseline; - text-align: flip(left, right); } // CASE: marketing/imageery-based headings .title { position: absolute; top: ($baseline*2.5); - #{$left}:($baseline*1.5); + @include left($baseline*1.5); .title-super, .title-sub { @extend %t-weight1; @@ -149,7 +149,7 @@ .title-sub { @include font-size(20); - #{$margin-left}: ($baseline*2); + @include margin-left($baseline*2); text-transform: lowercase; color: $header-graphic-sub-color; } @@ -197,14 +197,14 @@ } .content { - #{$margin-right}: ($baseline*2); + @include float(left); + @include margin-right($baseline*2); width: 600px; - float: flip(left, right); } aside { + @include float(left); width: 280px; - float: flip(left, right); p, ol, ul { font-size: 14px !important; @@ -273,11 +273,10 @@ margin: 0 0 $baseline 0; .field { + @include float(left); + @include margin(0, ($baseline*1.5), 0, 0); display: block; - float: flip(left, right); border-bottom: none; - margin: 0; - #{$margin-right}: ($baseline*1.5); padding-bottom: 0; input, textarea { @@ -337,7 +336,7 @@ .tip { position: absolute; top: 0; - #{$right}: 0; + @include right(0); } } @@ -379,7 +378,7 @@ input[type="checkbox"] { display: inline-block; width: auto; - #{$margin-right}: ($baseline/4); + @include margin-right($baseline/4); } label { @@ -703,7 +702,7 @@ h2 { @extend %heading-2; - text-align: flip(left, right); + @include text-align(left); } } diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index e7446be9be..ecd7426ba4 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -295,7 +295,7 @@ } .details { - float: flip(left, right); + @include float(left); margin-right: flex-gutter(); width: flex-grid(8); font: normal 1em/1.6em $serif; @@ -384,7 +384,7 @@ .course-sidebar { @include box-sizing(border-box); - float: flip(left, right); + @include float(left); width: flex-grid(4); > section { diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index be433464c3..092fab4c20 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -42,10 +42,10 @@ .logo { display: inline-block; - #{$border-right}: 1px solid $light-gray; + @include border-right(1px solid $light-gray); height: 80px; - #{$margin-right}: 30px; - #{$padding-right}: 30px; + @include margin-right(30px); + @include padding-right(30px); position: relative; vertical-align: middle; diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 9438440050..fb9f15368e 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -7,8 +7,8 @@ .profile-sidebar { background: transparent; - float: flip(left, right); - #{$margin-right}: flex-gutter(); + @include float(left); + @include margin-right(flex-gutter()); width: flex-grid(3); background: transparent; box-shadow: 0 0 1px $shadow-l1; @@ -279,7 +279,7 @@ // course listings .my-courses { - float: flip(left, right); + @include float(left); margin: 0px; width: flex-grid(9); @@ -356,7 +356,7 @@ @include transition(all 0.15s linear 0s); overflow: hidden; position: relative; - float: flip(left, right); + @include float(left); height: 100%; max-height: 100%; width: 200px; @@ -375,7 +375,7 @@ .info { @include clearfix; - padding: flip(0 10px 0 230px, 0 230px 0 10px); + @include padding(0, 10px, 0, 230px); > hgroup { padding: 0; @@ -394,7 +394,7 @@ .date-block { position: absolute; top: 0; - #{$right}: 0; + @include right(0); font-family: $sans-serif; font-size: 13px; font-style: italic; diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss index a860be8eac..1854ff8103 100644 --- a/lms/static/sass/multicourse/_error-pages.scss +++ b/lms/static/sass/multicourse/_error-pages.scss @@ -1,13 +1,13 @@ section.outside-app { @extend .container; - text-align: flip(left, right); + @include text-align(left); padding: 80px 0; h1 { @extend h2; margin-bottom: 40px; } - + p { max-width: 600px; margin: 0 auto; diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index edaa3d6ac6..ddda7b9d2f 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -5,11 +5,11 @@ .university-column { width: flex-grid(4); - #{$margin-right}t: flex-gutter(); + @include margin-right(flex-gutter()); float: left; &:nth-child(3n+3) { - #{$margin-right}: 0; + @include margin-right(0); } } @@ -21,11 +21,11 @@ .courses-listing-item { width: flex-grid(4); - #{$margin-right}: flex-gutter(); - float: flip(left, right); + @include margin-right(flex-gutter()); + @include float(left); &:nth-child(3n+3) { - #{$margin-right}: 0; + @include margin-right(0); } } } diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 66297d1648..5580ff06e4 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -17,8 +17,8 @@ header.global { } h1.logo { - float: flip(left, right); - margin: flip(-2px 39px 0 0, -2px 0 0 39px); + @include float(left); + @include margin(-2px, 39px, 0, 0); position: relative; a { @@ -27,11 +27,11 @@ header.global { } .left { - float: flip(left, right); + @include float(left); } .guest { - float: flip(right, left); + @include float(right); } > li { @@ -104,7 +104,7 @@ header.global { } .user { - float: flip(right,left); + @include float(right); margin-top: 4px; > .primary { @@ -194,7 +194,7 @@ header.global { height: 0px; position: absolute; @include transform(rotate(-45deg)); - #{$right}: 12px; + @include right(12px); top: -6px; width: 0px; } @@ -236,7 +236,7 @@ header.global { .nav-global { margin-top: ($baseline/2); list-style: none; - float: left; + @include float(left); li, div { @@ -279,7 +279,7 @@ header.global { } .nav-courseware { - float: $right; + @include float(right); margin-top: ($baseline/4); list-style: none; diff --git a/lms/static/sass/vendor/bi-app/_bi-app-ltr.scss b/lms/static/sass/vendor/bi-app/_bi-app-ltr.scss new file mode 100755 index 0000000000..6278a31380 --- /dev/null +++ b/lms/static/sass/vendor/bi-app/_bi-app-ltr.scss @@ -0,0 +1,11 @@ +// ------------------------------------------ +// left to right module +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +@import 'variables-ltr'; +@import 'mixins'; \ No newline at end of file diff --git a/lms/static/sass/vendor/bi-app/_bi-app-rtl.scss b/lms/static/sass/vendor/bi-app/_bi-app-rtl.scss new file mode 100755 index 0000000000..17b7f2e90f --- /dev/null +++ b/lms/static/sass/vendor/bi-app/_bi-app-rtl.scss @@ -0,0 +1,11 @@ +// ------------------------------------------ +// right to left module +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +@import 'variables-rtl'; +@import 'mixins'; \ No newline at end of file diff --git a/lms/static/sass/vendor/bi-app/_mixins.scss b/lms/static/sass/vendor/bi-app/_mixins.scss new file mode 100755 index 0000000000..353999671d --- /dev/null +++ b/lms/static/sass/vendor/bi-app/_mixins.scss @@ -0,0 +1,294 @@ +// ------------------------------------------ +// bi app mixins +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +// ------------------------------------------ +// Table of contents +// ------------------------------------------ +// padding +// margin +// float +// text align +// clear +// left / right +// border +// - width +// - style +// - color +// - generic +// - radius +// ltr / rtl contents +// ------------------------------------------ + +// generic mixin for properties with values +// (top right bottom left) +// ------------------------------------------ +@mixin bi-app-compact($property, $top, $right, $bottom, $left) { + @if $bi-app-direction == ltr { + #{$property}: $top $right $bottom $left; + } @else { + #{$property}: $top $left $bottom $right; + } +} + +// padding +// ------------------------------------------ +@mixin padding-left($distance) { + padding-#{$bi-app-left}: $distance; +} + +@mixin padding-right($distance) { + padding-#{$bi-app-right}: $distance; +} + +@mixin padding($top, $right, $bottom, $left) { + @include bi-app-compact(padding, $top, $right, $bottom, $left); +} + +// margin +// ------------------------------------------ +@mixin margin-left($distance) { + margin-#{$bi-app-left}: $distance; +} + +@mixin margin-right($distance) { + margin-#{$bi-app-right}: $distance; +} + +@mixin margin($top, $right, $bottom, $left) { + @include bi-app-compact(margin, $top, $right, $bottom, $left); +} + +// float +// ------------------------------------------ +@mixin bi-app-float-left { + float: $bi-app-left; +} + +@mixin bi-app-float-right { + float: $bi-app-right; +} + +@mixin float($direction) { + @if $direction == left { + @include bi-app-float-left; + } @else if $direction == right { + @include bi-app-float-right; + } @else { + float: $direction; + } +} + +// text align +// ------------------------------------------ +@mixin bi-app-text-align-left { + text-align: $bi-app-left; +} + +@mixin bi-app-text-align-right { + text-align: $bi-app-right; +} + +@mixin text-align($direction) { + @if $direction == left { + @include bi-app-text-align-left; + } @else if $direction == right { + @include bi-app-text-align-right; + } @else { + text-align: $direction; + } +} + +// clear +// ------------------------------------------ +@mixin bi-app-clear-left { + clear: $bi-app-left; +} + +@mixin bi-app-clear-right { + clear: $bi-app-right; +} + +@mixin clear($direction) { + @if $direction == left { + @include bi-app-clear-left; + } @else if $direction == right { + @include bi-app-clear-right; + } @else { + clear: $direction; + } +} + +// left / right +// ------------------------------------------ +@mixin left($distance) { + @if $bi-app-direction == ltr { + left: $distance; + } @else if $bi-app-direction == rtl { + right: $distance; + } +} + +@mixin right($distance) { + @if $bi-app-direction == ltr { + right: $distance; + } @else if $bi-app-direction == rtl { + left: $distance; + } +} + +// border +// ------------------------------------------ + +// width +@mixin border-left-width($width) { + border-#{$bi-app-left}-width: $width; +} + +@mixin border-right-width($width) { + border-#{$bi-app-right}-width: $width; +} + +@mixin border-width($top, $right, $bottom, $left) { + @include bi-app-compact(border-width, $top, $right, $bottom, $left); +} + +// style +@mixin border-left-style($style) { + border-#{$bi-app-left}-style: $style; +} + +@mixin border-right-style($style) { + border-#{$bi-app-right}-style: $style; +} + +@mixin border-style($top, $right, $bottom, $left) { + @include bi-app-compact(border-style, $top, $right, $bottom, $left); +} + +// color +@mixin border-left-color($color) { + border-#{$bi-app-left}-color: $color; +} + +@mixin border-right-color($color) { + border-#{$bi-app-right}-color: $color; +} + +@mixin border-color($top, $right, $bottom, $left) { + @include bi-app-compact(border-color, $top, $right, $bottom, $left); +} + +// generic +@mixin border-left($border-style) { + border-#{$bi-app-left}: $border-style; +} + +@mixin border-right($border-style) { + border-#{$bi-app-right}: $border-style; +} + +// radius +@mixin border-top-left-radius($radius) { + -webkit-border-top-#{$bi-app-left}-radius: $radius; + -moz-border-top#{$bi-app-left}-radius: $radius; + border-top-#{$bi-app-left}-radius: $radius; +} + +@mixin border-top-right-radius($radius) { + -webkit-border-top-#{$bi-app-right}-radius: $radius; + -moz-border-top#{$bi-app-right}-radius: $radius; + border-top-#{$bi-app-right}-radius: $radius; +} + +@mixin border-bottom-left-radius($radius) { + -webkit-border-bottom-#{$bi-app-left}-radius: $radius; + -moz-border-bottom#{$bi-app-left}-radius: $radius; + border-bottom-#{$bi-app-left}-radius: $radius; +} + +@mixin border-bottom-right-radius($radius) { + -webkit-border-bottom-#{$bi-app-right}-radius: $radius; + -moz-border-bottom#{$bi-app-right}-radius: $radius; + border-bottom-#{$bi-app-right}-radius: $radius; +} + +@mixin border-right-radius($radius) { + @include border-top-right-radius($radius); + @include border-bottom-right-radius($radius); +} + +@mixin border-left-radius($radius) { + @include border-top-left-radius($radius); + @include border-bottom-left-radius($radius); +} + +@mixin border-top-radius($radius) { + @include border-top-left-radius($radius); + @include border-top-right-radius($radius); +} + +@mixin border-bottom-radius($radius) { + @include border-bottom-left-radius($radius); + @include border-bottom-right-radius($radius); +} + +@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) { + @if $topRight != null { + @include border-top-left-radius($topLeft); + @include border-top-right-radius($topRight); + @include border-bottom-right-radius($bottomRight); + @include border-bottom-left-radius($bottomLeft); + } @else { + -webkit-border-radius: $topLeft; + -moz-border-radius: $topLeft; + -ms-border-radius: $topLeft; + -o-border-radius: $topLeft; + border-radius: $topLeft; + } +} + +// Returns "en" or "ar", useful for image suffixes. +// Usage: background-image: url(/img/header-#{lang()}.png); +@function lang() { + @if $bi-app-direction == ltr { + @return 'en'; + } @else { + @return 'ar'; + } +} + +// Support for "direction" declaration (renders ltr/rtl). +// Useful for form elements as they swap the text-indent property and align the text accordingly. +@mixin direction { + direction: $bi-app-direction; +} + +// Inverts a percentage value. Example: 97% becames 3%. +// Useful for background-position. +@function bi-app-invert-percentage($percentage) { + @if $bi-app-direction == rtl { + @return 100% - $percentage; + } @else { + @return $percentage; + } +} + +// ltr / rtl contents +// ------------------------------------------ +@mixin ltr { + @if $bi-app-direction == ltr { + @content; + } +} + +@mixin rtl { + @if $bi-app-direction == rtl { + @content; + } +} diff --git a/lms/static/sass/vendor/bi-app/_variables-ltr.scss b/lms/static/sass/vendor/bi-app/_variables-ltr.scss new file mode 100755 index 0000000000..36d5a7b06e --- /dev/null +++ b/lms/static/sass/vendor/bi-app/_variables-ltr.scss @@ -0,0 +1,15 @@ +// ------------------------------------------ +// left to right variables to be used by bi-app mixins +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +// namespacing variables with bi-app to +// avoid conflicting with other global variables +$bi-app-left : left; +$bi-app-right : right; +$bi-app-direction : ltr; +$bi-app-invert-direction: rtl; \ No newline at end of file diff --git a/lms/static/sass/vendor/bi-app/_variables-rtl.scss b/lms/static/sass/vendor/bi-app/_variables-rtl.scss new file mode 100755 index 0000000000..7300f17863 --- /dev/null +++ b/lms/static/sass/vendor/bi-app/_variables-rtl.scss @@ -0,0 +1,15 @@ +// ------------------------------------------ +// right to left variables to be used by bi-app mixins +// authors: +// twitter.com/anasnakawa +// twitter.com/victorzamfir +// licensed under the MIT license +// http://www.opensource.org/licenses/mit-license.php +// ------------------------------------------ + +// namespacing variables with bi-app to +// avoid conflicting with other global variables +$bi-app-left : right; +$bi-app-right : left; +$bi-app-direction : rtl; +$bi-app-invert-direction: ltr; \ No newline at end of file diff --git a/lms/templates/main.html b/lms/templates/main.html index adbae61990..a51987090c 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -59,10 +59,17 @@ <link rel="icon" type="image/x-icon" href="${static.url(microsite.get_value('favicon_path', settings.FAVICON_PATH))}" /> - <%static:css group='style-vendor'/> - <%static:css group='style-app'/> - <%static:css group='style-app-extend1'/> - <%static:css group='style-app-extend2'/> + % if get_language_bidi(): + <%static:css group='style-vendor'/> + <%static:css group='style-app-rtl'/> + <%static:css group='style-app-extend1-rtl'/> + <%static:css group='style-app-extend2-rtl'/> + % else: + <%static:css group='style-vendor'/> + <%static:css group='style-app'/> + <%static:css group='style-app-extend1'/> + <%static:css group='style-app-extend2'/> + % endif % if disable_courseware_js: <%static:js group='base_vendor'/> From d8bf0ef5a50f5d815fd233349b5c4a75c2e35e7b Mon Sep 17 00:00:00 2001 From: Omar Al-Ithawi <i@omardo.com> Date: Wed, 8 Oct 2014 11:17:10 +0300 Subject: [PATCH 4/5] Elegant rtl/ltr css switch, LMS RTL fixes, language aware @cache_if_anonymous --- .gitignore | 6 ++ cms/static/sass/style-xmodule.scss | 2 + .../templates/static_content.html | 8 +++ common/djangoapps/util/cache.py | 4 +- lms/static/sass/application-extend1-rtl.scss | 53 -------------- lms/static/sass/application-extend2-rtl.scss | 61 ---------------- lms/static/sass/application-rtl.scss | 49 ------------- lms/static/sass/course-rtl.scss | 70 ------------------- .../course/layout/_courseware_header.scss | 2 +- lms/static/sass/discussion/_discussion.scss | 6 +- lms/static/sass/multicourse/_dashboard.scss | 4 +- lms/static/sass/shared/_header.scss | 33 +++++---- lms/templates/main.html | 15 ++-- 13 files changed, 48 insertions(+), 265 deletions(-) delete mode 100644 lms/static/sass/application-extend1-rtl.scss delete mode 100644 lms/static/sass/application-extend2-rtl.scss delete mode 100644 lms/static/sass/application-rtl.scss delete mode 100644 lms/static/sass/course-rtl.scss diff --git a/.gitignore b/.gitignore index a56dc07d82..fbf12d0f37 100644 --- a/.gitignore +++ b/.gitignore @@ -71,13 +71,19 @@ lms/static/css/ lms/static/sass/*.css lms/static/sass/*.css.map lms/static/sass/application.scss +lms/static/sass/application-rtl.scss lms/static/sass/application-extend1.scss +lms/static/sass/application-extend1-rtl.scss lms/static/sass/application-extend2.scss +lms/static/sass/application-extend2-rtl.scss lms/static/sass/course.scss +lms/static/sass/course-rtl.scss cms/static/css/ cms/static/sass/*.css cms/static/sass/*.css.map + + ### Logging artifacts log/ logs diff --git a/cms/static/sass/style-xmodule.scss b/cms/static/sass/style-xmodule.scss index a2ff505729..071b83234c 100644 --- a/cms/static/sass/style-xmodule.scss +++ b/cms/static/sass/style-xmodule.scss @@ -1,6 +1,8 @@ // 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 diff --git a/common/djangoapps/pipeline_mako/templates/static_content.html b/common/djangoapps/pipeline_mako/templates/static_content.html index a4ca0eba9f..9deb58e7b6 100644 --- a/common/djangoapps/pipeline_mako/templates/static_content.html +++ b/common/djangoapps/pipeline_mako/templates/static_content.html @@ -1,6 +1,7 @@ <%! from staticfiles.storage import staticfiles_storage from pipeline_mako import compressed_css, compressed_js +from django.utils.translation import get_language_bidi %> <%def name='url(file, raw=False)'><% @@ -11,6 +12,13 @@ except: %>${url}${"?raw" if raw else ""}</%def> <%def name='css(group, raw=False)'> + <% + rtl_group = '{}-rtl'.format(group) + + if get_language_bidi() and rtl_group in settings.PIPELINE_CSS: + group = rtl_group + %> + % if settings.FEATURES['USE_DJANGO_PIPELINE']: ${compressed_css(group, raw=raw)} % else: diff --git a/common/djangoapps/util/cache.py b/common/djangoapps/util/cache.py index 8ab1b06acd..7262fabd09 100644 --- a/common/djangoapps/util/cache.py +++ b/common/djangoapps/util/cache.py @@ -12,6 +12,8 @@ from django.core import cache # If we can't find a 'general' CACHE defined in settings.py, we simply fall back # to returning the default cache. This will happen with dev machines. +from django.utils.translation import get_language + try: cache = cache.get_cache('general') except Exception: @@ -45,7 +47,7 @@ def cache_if_anonymous(view_func): # same view accessed through different domain names may # return different things, so include the domain name in the key. domain = str(request.META.get('HTTP_HOST')) + '.' - cache_key = domain + "cache_if_anonymous." + request.path + cache_key = domain + "cache_if_anonymous." + get_language() + '.' + request.path response = cache.get(cache_key) if not response: response = view_func(request, *args, **kwargs) diff --git a/lms/static/sass/application-extend1-rtl.scss b/lms/static/sass/application-extend1-rtl.scss deleted file mode 100644 index 84cfce127b..0000000000 --- a/lms/static/sass/application-extend1-rtl.scss +++ /dev/null @@ -1,53 +0,0 @@ -/* - * This file is dynamically generated and ignored by Git. - * DO NOT MAKE CHANGES HERE. Instead, go edit its template: - * /edx/app/edxapp/edx-platform/lms/static/sass/application-extend1-rtl.scss.mako - */ - -// lms - css application architecture (platform) -// ==================== - -// 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 - -// BASE *default edX offerings* -// ==================== - -// base - utilities -@import 'base/reset'; -@import 'base/config'; -@import 'base/variables'; -@import 'base/mixins'; - - -@import 'base/base'; - -// base - assets -@import 'base/font_face'; -@import 'base/extends'; -@import 'base/animations'; - -// base - starter -@import 'base/base'; - -// base - elements -@import 'elements/typography'; -@import 'elements/controls'; - -// shared - platform -@import 'multicourse/home'; -@import 'multicourse/dashboard'; -@import 'multicourse/account'; -@import 'multicourse/courses'; -@import 'multicourse/course_about'; -@import 'multicourse/jobs'; -@import 'multicourse/media-kit'; -@import 'multicourse/about_pages'; -@import 'multicourse/press_release'; -@import 'multicourse/error-pages'; -@import 'multicourse/help'; -@import 'multicourse/edge'; - -@import 'developer'; // used for any developer-created scss that needs further polish/refactoring -@import 'shame'; // used for any bad-form/orphaned scss diff --git a/lms/static/sass/application-extend2-rtl.scss b/lms/static/sass/application-extend2-rtl.scss deleted file mode 100644 index d9f7938dc6..0000000000 --- a/lms/static/sass/application-extend2-rtl.scss +++ /dev/null @@ -1,61 +0,0 @@ -/* - * This file is dynamically generated and ignored by Git. - * DO NOT MAKE CHANGES HERE. Instead, go edit its template: - * /edx/app/edxapp/edx-platform/lms/static/sass/application-extend2-rtl.scss.mako - */ - -// lms - css application architecture (platform) -// ==================== - -// 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 - -// BASE *default edX offerings* -// ==================== - -// base - utilities -@import 'base/reset'; -@import 'base/config'; -@import 'base/variables'; -@import 'base/mixins'; - - -@import 'base/base'; - -// base - assets -@import 'base/font_face'; -@import 'base/extends'; -@import 'base/animations'; - -// base - starter -@import 'base/base'; - -// base - elements -@import 'elements/typography'; -@import 'elements/controls'; -@import 'elements/system-feedback'; - -// base - specific views -@import 'views/verification'; -@import 'views/shoppingcart'; - -// applications -@import "discussion/utilities/variables"; -@import "discussion/mixins"; -@import 'discussion/discussion'; // Process old file after definitions but before everything else -@import "discussion/elements/actions"; -@import "discussion/elements/editor"; -@import "discussion/elements/labels"; -@import "discussion/elements/navigation"; -@import "discussion/views/thread"; -@import "discussion/views/create-edit-post"; -@import "discussion/views/response"; -@import 'discussion/utilities/developer'; -@import 'discussion/utilities/shame'; - -@import 'news'; - -// temp - shame and developer -@import 'developer'; // used for any developer-created scss that needs further polish/refactoring -@import 'shame'; // used for any bad-form/orphaned scss diff --git a/lms/static/sass/application-rtl.scss b/lms/static/sass/application-rtl.scss deleted file mode 100644 index 9d71cb5891..0000000000 --- a/lms/static/sass/application-rtl.scss +++ /dev/null @@ -1,49 +0,0 @@ -/* - * This file is dynamically generated and ignored by Git. - * DO NOT MAKE CHANGES HERE. Instead, go edit its template: - * /edx/app/edxapp/edx-platform/lms/static/sass/application-rtl.scss.mako - */ - -// lms - css application 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 - -// BASE *default edX offerings* -// ==================== - -// base - utilities -@import 'base/reset'; -@import 'base/config'; -@import 'base/variables'; -@import 'base/mixins'; - - -@import 'base/base'; - -// base - assets -@import 'base/font_face'; -@import 'base/extends'; -@import 'base/animations'; - -// base - starter -@import 'base/base'; - -// base - elements -@import 'elements/typography'; -@import 'elements/controls'; - -// shared - course -@import 'shared/forms'; -@import 'shared/footer'; -@import 'shared/header'; -@import 'shared/course_object'; -@import 'shared/course_filter'; -@import 'shared/modal'; -@import 'shared/activation_messages'; -@import 'shared/unsubscribe'; - -@import 'developer'; // used for any developer-created scss that needs further polish/refactoring -@import 'shame'; // used for any bad-form/orphaned scss diff --git a/lms/static/sass/course-rtl.scss b/lms/static/sass/course-rtl.scss deleted file mode 100644 index efdc274223..0000000000 --- a/lms/static/sass/course-rtl.scss +++ /dev/null @@ -1,70 +0,0 @@ -/* - * This file is dynamically generated and ignored by Git. - * DO NOT MAKE CHANGES HERE. Instead, go edit its template: - * /edx/app/edxapp/edx-platform/lms/static/sass/course-rtl.scss.mako - */ -@import 'bourbon/bourbon'; -@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages - -@import 'base/reset'; -@import 'base/font_face'; -@import 'base/variables'; -@import 'base/mixins'; - - -@import 'base/base'; -@import 'base/extends'; -@import 'base/animations'; -@import 'shared/tooltips'; - -// base - elements -@import 'elements/typography'; -@import 'elements/controls'; - -// Course base / layout styles -@import 'course/layout/courseware_header'; -@import 'course/layout/footer'; -@import 'course/base/mixins'; -@import 'course/base/base'; -@import 'course/base/extends'; -@import 'xmodule/modules/css/module-styles.scss'; - -// courseware -@import 'course/courseware/courseware'; -@import 'course/courseware/sidebar'; -@import 'course/courseware/amplifier'; -@import 'course/layout/calculator'; -@import 'course/layout/timer'; -@import 'course/layout/chat'; - -// course-specific courseware (all styles in these files should be gated by a -// course-specific class). This should be replaced with a better way of -// providing course-specific styling. -@import "course/courseware/courses/_cs188.scss"; - -// wiki -@import "course/wiki/basic-html"; -@import "course/wiki/sidebar"; -@import "course/wiki/create"; -@import "course/wiki/wiki"; -@import "course/wiki/table"; - -// pages -@import "course/info"; -@import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py -@import "course/textbook"; -@import "course/profile"; -@import "course/gradebook"; -@import "course/tabs"; -@import "course/staff_grading"; -@import "course/rubric"; -@import "course/open_ended_grading"; - -// instructor -@import "course/instructor/instructor"; -@import "course/instructor/instructor_2"; -@import "course/instructor/email"; -@import "xmodule/descriptors/css/module-styles.scss"; - -// discussion -@import "course/discussion/form-wmd-toolbar"; diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index fb8335f0dd..1539ec8444 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -16,7 +16,7 @@ nav.course-material { @include border-top-radius(4px); @include clearfix; padding: 28px 0 10px 0; - margin-left: 10px; + @include margin-left(10px); li { @include float(left); diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 62e8987bed..bd3d132b26 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -3,11 +3,11 @@ body.discussion { .course-tabs .right { - float: right; + @include float(right); .new-post-btn { @include blue-button; - margin-right: 4px; + @include margin-right(4px); } .new-post-icon { @@ -377,7 +377,7 @@ body.discussion { display: inline-block; text-align: center; vertical-align: middle; - @include margin-right($baseline/2); + @include margin-left($baseline/2); } .icon { diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index fb9f15368e..d57b76609f 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -889,7 +889,7 @@ } a.unenroll { - float: right; + @include float(right); display: block; font-style: italic; color: $lighter-base-font-color; @@ -904,7 +904,7 @@ a.email-settings { @extend a.unenroll; - margin-right: 10px; + @include margin-right(10px); } } diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 5580ff06e4..151267216d 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -109,7 +109,7 @@ header.global { > .primary { display: block; - float: left; + @include float(left); margin: 0px; position: relative; @@ -120,14 +120,14 @@ header.global { &:last-child { > a { - border-radius: 0 4px 4px 0; - border-left: none; + @include border-radius(0, 4px, 4px, 0); + @include border-left(none); padding: 5px 8px 7px 8px; &.shopping-cart { border-radius: 4px; border: 1px solid $border-color-2; - margin-right: 10px; + @include margin-right(10px); padding-bottom: 6px; } } @@ -135,7 +135,7 @@ header.global { } a.user-link { - padding: 6px 12px 8px 35px; + @include padding(6px, 12px, 8px, 35px); position: relative; text-transform: none; font-size: 14px; @@ -145,9 +145,14 @@ header.global { .avatar { @include background-image(url('../images/small-header-home-icon.png')); background-repeat: no-repeat; + + @include rtl { + background-position: top right; + } + height: 26px; display: inline-block; - left: 8px; + @include left(8px); opacity: 0.5; overflow: hidden; position: absolute; @@ -171,7 +176,7 @@ header.global { display: none; padding: 5px 10px; position: absolute; - right: 0px; + @include right(0px); top: 34px; width: 170px; z-index: 3; @@ -394,7 +399,7 @@ header.global-new { } .primary { - margin-right: 5px; + @include margin-right(5px); > a { @include background-image($button-bg-image); @@ -415,7 +420,7 @@ header.global-new { vertical-align: middle; &:last-child { - margin-right: 0px; + @include margin-right(0px); } &:hover, &:focus, &:active { @@ -430,7 +435,7 @@ header.global-new { > .primary { display: block; - float: left; + @include float(left); margin: 0px; position: relative; @@ -456,7 +461,7 @@ header.global-new { } a.user-link { - padding: 6px 12px 8px 35px; + @include padding(6px, 12px, 8px, 35px); position: relative; text-transform: none; font-size: 14px; @@ -468,7 +473,7 @@ header.global-new { background-repeat: no-repeat; height: 26px; display: inline-block; - left: 8px; + @include left(8px); opacity: 0.5; overflow: hidden; position: absolute; @@ -492,7 +497,7 @@ header.global-new { display: none; padding: 5px 10px; position: absolute; - right: 0px; + @include right(0px); top: 34px; width: 170px; z-index: 3; @@ -515,7 +520,7 @@ header.global-new { height: 0px; position: absolute; @include transform(rotate(-45deg)); - right: 12px; + @include right(12px); top: -6px; width: 0px; } diff --git a/lms/templates/main.html b/lms/templates/main.html index a51987090c..adbae61990 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -59,17 +59,10 @@ <link rel="icon" type="image/x-icon" href="${static.url(microsite.get_value('favicon_path', settings.FAVICON_PATH))}" /> - % if get_language_bidi(): - <%static:css group='style-vendor'/> - <%static:css group='style-app-rtl'/> - <%static:css group='style-app-extend1-rtl'/> - <%static:css group='style-app-extend2-rtl'/> - % else: - <%static:css group='style-vendor'/> - <%static:css group='style-app'/> - <%static:css group='style-app-extend1'/> - <%static:css group='style-app-extend2'/> - % endif + <%static:css group='style-vendor'/> + <%static:css group='style-app'/> + <%static:css group='style-app-extend1'/> + <%static:css group='style-app-extend2'/> % if disable_courseware_js: <%static:js group='base_vendor'/> From c92f52e0bd4be73d525e6784f09dff3f6f2f7e63 Mon Sep 17 00:00:00 2001 From: Frances Botsford <frances@edx.org> Date: Fri, 10 Oct 2014 15:22:41 -0400 Subject: [PATCH 5/5] 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 @@ <!--[if IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]--> <!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]--> <% - # 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 @@ <!--[if IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]--> <!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]--> <% - # 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' %>