Skip to content

E
edx-platform
Commit b9c37120 by frances botsford
Options

Merge pull request #2682 from edx/frances/experiments/rtl 

RTL platform support
parents 03a42898 c92f52e0
Showing with 1675 additions and 363 deletions
.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
......
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)
......@@ -369,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',
......
cms/static/sass/_base.scss
......@@ -279,25 +279,25 @@ p, ul, ol, dl {
@include clearfix();
.page-header {
float: left;
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(6,12);
margin-right: flex-gutter();
}
.nav-actions {
@include float(left);
@include text-align(right);
position: relative;
bottom: -($baseline*0.75);
float: right;
width: flex-grid(6,12);
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,
......
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 {
......
cms/static/sass/elements/_header.scss
......@@ -27,14 +27,14 @@
}
.wrapper-l {
float: left;
@include float(left);
width: flex-grid(7,12);
}
.wrapper-r {
float: right;
@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 {
......
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%;
}
......
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);
}
}
......
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);
}
}
......
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;
@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;
}
}
......
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: left;
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);
}
......
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: 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);
}
}
}
......@@ -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);
@include 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);
@include float(left);
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;
@include margin-right($baseline/2);
&:last-child {
margin-right: 0;
}
&:last-child {
@include 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();
@include margin-right(flex-gutter());
padding: $baseline ($baseline*1.5);
> section {
......@@ -856,9 +856,9 @@ body.uxdesign.alerts {
}
a {
float: left;
@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: left;
@include float(left);
margin: 4px 0 0 0;
color: $gray-d3;
}
......@@ -892,7 +892,7 @@ body.uxdesign.alerts {
}
.alert-action {
float: right;
@include float(left);
&.secondary {
@include orange-button;
......
cms/static/sass/elements/_system-help.scss
......@@ -24,17 +24,17 @@
@include clearfix();
.copy {
float: left;
@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: right;
@include float(right);
width: flex-grid(4,12);
display: block;
text-align: right;
@include text-align(right);
.icon {
@extend %t-action3;
......
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);
}
}
......
cms/static/sass/style-app-extend1-rtl.scss 0 → 100644
// studio - css 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/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
cms/static/sass/style-app-extend1.scss
// 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
......
cms/static/sass/style-app-rtl.scss 0 → 100644
// studio - css 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/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';
cms/static/sass/style-app.scss
// 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
......
cms/static/sass/style-xmodule-rtl.scss 0 → 100644
// 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
cms/static/sass/style-xmodule.scss
......@@ -3,6 +3,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
// VENDOR + REBASE *referenced/used vendor presentation and reset*
// ====================
......
cms/static/sass/vendor/bi-app/_bi-app-ltr.scss 0 → 100755
// ------------------------------------------
// 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
cms/static/sass/vendor/bi-app/_bi-app-rtl.scss 0 → 100755
// ------------------------------------------
// 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
cms/static/sass/vendor/bi-app/_mixins.scss 0 → 100755
// ------------------------------------------
// 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;
}
}
cms/static/sass/vendor/bi-app/_variables-ltr.scss 0 → 100755
// ------------------------------------------
// 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
cms/static/sass/vendor/bi-app/_variables-rtl.scss 0 → 100755
// ------------------------------------------
// 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
cms/static/sass/views/_account.scss
......@@ -37,7 +37,7 @@
.action {
@extend %t-action3;
position: absolute;
right: 0;
@include 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;
@include right(0);
}
}
}
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;
@include margin-left($baseline);
[class^="icon-"] {
margin-right: ($baseline/2);
@include margin-right($baseline/2);
}
}
}
......@@ -70,7 +68,7 @@
width: flex-grid(3, 12);
&.pagination-compact {
text-align: right;
@include text-align(right);
}
&.pagination-full {
......@@ -136,7 +134,7 @@
.current-page {
@extend %ui-depth1;
position: absolute;
left: -($baseline/4);
@include left(-($baseline/4));
}
.page-divider {
......
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;
@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;
}
......@@ -86,9 +85,9 @@
.checklist-status {
@extend %t-copy-sub1;
width: flex-grid(3, 9);
float: right;
@include float(right);
margin-top: ($baseline/2);
text-align: right;
@include text-align(right);
color: $gray-l2;
......@@ -127,7 +126,7 @@
.action-primary {
@include green-button();
float: left;
@include float(left);
.icon-add {
@extend %t-icon7;
......@@ -141,7 +140,7 @@
@include grey-button();
@extend %t-action3;
@extend %t-regular;
float: right;
@include float(right);
.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;
@include float(left);
margin-top: ($baseline/2);
@include margin-right(flex-gutter());
}
.task-details {
@extend %t-strong;
display: inline-block;
vertical-align: text-top;
float: left;
@include float(left);
width: flex-grid(6,9);
.task-name {
......@@ -264,7 +264,7 @@
@include clearfix();
display: inline-block;
vertical-align: middle;
float: right;
@include float(right);
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;
}
}
cms/static/sass/views/_dashboard.scss
......@@ -17,16 +17,14 @@
// 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;
}
// ====================
......@@ -439,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;
}
......@@ -486,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);
}
}
......
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;
}
......
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
......
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;
}
......@@ -297,7 +295,7 @@
}
.section-header-details {
float: left;
@include float(left);
width: flex-grid(6, 9);
.icon, .wrapper-section-title {
......@@ -306,7 +304,7 @@
}
.icon {
margin-right: ($baseline/4);
@include margin-right($baseline/4);
}
.wrapper-section-title {
......@@ -316,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;
......@@ -385,7 +383,7 @@
}
.subsection-header-details {
float: left;
@include float(left);
width: flex-grid(6, 9);
.icon, .wrapper-subsection-title {
......@@ -394,7 +392,7 @@
}
.icon {
margin-right: ($baseline/4);
@include margin-right($baseline/4);
}
.wrapper-subsection-title {
......@@ -405,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;
......@@ -424,7 +422,7 @@
// status
.subsection-status {
margin: 0 0 0 $outline-indent-width;
@include margin(0, 0, 0, $outline-indent-width);
}
// content
......@@ -467,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;
......@@ -497,7 +495,7 @@
.icon {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
@include margin-right($baseline/2);
}
}
}
......
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;
@include margin-right(flex-gutter());
@include float(left);
}
.tip {
@extend %t-copy-sub2;
width: flex-grid(5, 9);
float: right;
@include float(right);
margin-top: ($baseline/2);
text-align: right;
@include text-align(right);
color: $gray-l2;
}
}
......@@ -372,7 +371,7 @@
}
.field {
float: left;
@include float(left);
width: flex-grid(3, 9);
margin-bottom: ($baseline/4);
margin-right: flex-gutter();
......@@ -384,7 +383,7 @@
.tip {
position: absolute;
top: 0;
right: 0;
@include 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;
}
}
}
}
}
}
}
}
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: right;
margin-right: ($baseline*2);
@include float(right);
@include margin-right($baseline*2);
padding: 8px 0px;
vertical-align: middle;
text-align: center;
......
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);
@include margin-right($baseline*14);
}
.ui-toggle-expansion {
......@@ -85,7 +83,7 @@
opacity: 0.0;
position: absolute;
top: $baseline;
right: $baseline;
@include right($baseline);
.action {
display: inline-block;
......@@ -305,9 +303,9 @@
display: block;
width: 46%;
border-bottom: none;
margin: 0 ($baseline*0.75) 0 0;
@include margin(0, ($baseline*0.75), 0, 0);
padding: ($baseline/4) 0 0 0;
float: left;
@include float(left);
position: relative;
input, textarea {
......@@ -318,7 +316,7 @@
@extend %ui-btn-flat-outline;
position: absolute;
top: 3px;
right: 0;
@include right(0);
}
}
......@@ -354,6 +352,6 @@
}
}
.content-supplementary {
width: flex-grid(3, 12);
@extend .ui-col-narrow;
}
}
cms/static/sass/views/_unit.scss
......@@ -3,5 +3,5 @@
// .view-unit styles will go here once we split it from container
.view-unit {
}
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;
.title {
@extend %t-title4;
@extend %ui-window;
width: 30%;
padding: 20px 30px;
margin: 0;
@include border-radius(0, 3px, 3px, 0);
@include border-left(none);
background: $lightGrey;
.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;
@include margin-right($baseline/5);
}
}
......
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();
@include 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;
@include margin(0, ($baseline/2), ($baseline/10), 0);
color: $gray-d4;
}
......
cms/templates/base.html
......@@ -8,7 +8,12 @@
<!--[if IE 8]><html class="ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
<head>
<%
# set doc language direction
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,chrome=1">
<title>
......@@ -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" />
......
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>
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>
......
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>
<% } %>
......
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>
......
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>
......
common/djangoapps/pipeline_mako/templates/static_content.html
<%!
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:
......
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)
......
common/lib/xmodule/xmodule/css/capa/display.scss
......@@ -61,7 +61,7 @@ div.problem {
width: 100px;
label {
float: left;
@include float(left);
clear: both;
margin-bottom: 5px;
......@@ -81,23 +81,23 @@ div.problem {
}
.indicator_container {
float: left;
@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: left;
margin: 4px 8px 0 0;
@include float(left);
@include margin(4px, 8px, 0, 0);
}
text {
......@@ -633,7 +633,8 @@ div.problem {
// padding: 8px 12px;
// margin-top: 10px;
display: inline-block;
margin: 8px 0 0 $baseline/2;
margin-top: 8px;
@include margin-left($baseline/2);
color: #666;
font-style: italic;
-webkit-font-smoothing: antialiased;
......
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 {
......@@ -294,23 +295,41 @@ nav.sequence-nav {
}
&.prev {
left: -10px;
border-radius: 35px 0 0 35px;
@include left(-10px);
@include border-radius(35px, 0, 0, 35px);
a {
background-image: url('../images/sequence-nav/previous-icon.png');
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');
}
}
}
&.next {
right: -10px;
border-radius: 0 35px 35px 0;
@include right(-10px);
@include border-radius(0, 35px, 35px, 0);
a {
margin-left: 30px;
background-image: url('../images/sequence-nav/next-icon.png');
@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');
}
}
}
}
......@@ -334,7 +353,7 @@ nav.sequence-bottom {
display: inline-block;
li {
float: left;
@include float(left);
width: 50px;
height: 44px;
border: 1px solid #ccc;
......@@ -351,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 {
......@@ -369,21 +389,39 @@ nav.sequence-bottom {
}
&.prev {
border-radius: 35px 0 0 35px;
@include border-radius(35px, 0, 0, 35px);
a {
background-image: url('../images/sequence-nav/previous-icon.png');
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');
}
}
}
&.next {
border-radius: 0 35px 35px 0;
border-left: none;
@include border-radius(0, 35px, 35px, 0);
@include border-left(none);
a {
background-image: url('../images/sequence-nav/next-icon.png');
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');
}
}
}
}
......
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;
......
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;
......
common/static/sass/_mixins.scss
......@@ -87,6 +87,20 @@
width: 100%;
}
// layout placeholders
.ui-col-wide {
width: flex-grid(9, 12);
@include margin-right(flex-gutter());
@include float(left);
}
.ui-col-narrow {
width: flex-grid(3, 12);
@include float(left);
}
// extends - UI - window
%ui-window {
@include clearfix();
......
conf/locale/config.yaml
......@@ -86,6 +86,7 @@ locales:
dummy_locales:
- eo
- fake2
- en@rtl
# Directories we don't search for strings.
ignore_dirs:
......
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)
......
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", "ur", "fa-ir")
# 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
......@@ -1066,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',
......@@ -1081,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',
......
lms/static/sass/application-extend1-rtl.scss.mako 0 → 100644
## 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/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
lms/static/sass/application-extend1.scss.mako
## 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*
// ====================
......
lms/static/sass/application-extend2-rtl.scss.mako 0 → 100644
## 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/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
lms/static/sass/application-extend2.scss.mako
## 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*
// ====================
......
lms/static/sass/application-rtl.scss.mako 0 → 100644
## 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/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
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*
// ====================
......
lms/static/sass/base/_mixins.scss
......@@ -54,7 +54,6 @@
// ====================
// extends - UI - used for page/view-level wrappers (for centering/grids)
%ui-wrapper {
@include clearfix();
......
lms/static/sass/base/_variables.scss
// lms variables
// base
$baseline: 20px;
......
lms/static/sass/course-rtl.scss.mako 0 → 100644
@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";
lms/static/sass/course.scss.mako
@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';
......
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;
......
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 {
......
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);
}
}
......
lms/static/sass/course/base/_extends.scss
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();
......
lms/static/sass/course/base/_mixins.scss
@mixin blue-button {
display: block;
height: 35px;
......@@ -54,4 +55,4 @@
&:hover, &:focus {
background: -webkit-linear-gradient(top, #888, #666);
}
}
\ No newline at end of file
}
lms/static/sass/course/courseware/_courseware.scss
......@@ -23,7 +23,7 @@ html.video-fullscreen{
.instructor-info-action {
@extend %t-copy-sub2;
float: right;
@include float(right);
margin-left: ($baseline/2);
padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4);
......
lms/static/sass/course/courseware/_sidebar.scss
.course-index {
@extend .sidebar;
@extend .tran;
border-radius: 3px 0 0 3px;
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,9 +61,22 @@
}
span.ui-icon {
left: 0;
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 {
// CASE: left to right layout
@include ltr {
background-position: -32px -16px; // jQuery UI east arrow position
}
// CASE: right to left layout
@include rtl {
background-position: -96px -16px; // jQuery UI west arrow position
}
}
}
}
}
......
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;
}
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;
......@@ -833,7 +832,7 @@ section.instructor-dashboard-content-2 {
input[type="button"].add {
@include idashbutton($blue);
position: absolute;
right: $baseline;
@include right($baseline);
}
}
......@@ -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;
}
lms/static/sass/course/layout/_courseware_header.scss
......@@ -16,10 +16,10 @@ nav.course-material {
@include border-top-radius(4px);
@include clearfix;
padding: 28px 0 10px 0;
margin-left: 10px;
@include 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: left;
@include float(left);
font-size: 0.9em;
font-weight: 600;
color: $lighter-base-font-color;
......
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 {
......
lms/static/sass/discussion/_discussion.scss
......@@ -3,15 +3,16 @@
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 {
margin: 8px 7px 0 0;
margin-top: 8px;
@include margin-right(7px);
font-size: 16px;
vertical-align: middle;
color: $white;
......@@ -241,7 +242,7 @@ body.discussion {
}
.discussion-column {
float: right;
@include float(right);
@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;
@include 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;
@include 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
@include padding-left(40px);
@include padding-right(0);
}
}
}
.posted-by {
font-weight: 700;
......@@ -549,11 +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 { // 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);
}
}
}
......@@ -638,7 +656,7 @@ body.discussion {
.discussion-submit-post {
@include blue-button;
float: left;
@include float(left);
}
.wmd-button {
......@@ -674,7 +692,17 @@ 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 {
@include ltr {
content: "\f112"; // FA icon arrow to the left
}
@include rtl {
content: "\f064"; // FA icon arrow to the right
}
}
&:hover, &:focus {
@include linear-gradient(top, $white 35%, #ddd);
......@@ -706,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;
......@@ -716,7 +744,7 @@ body.discussion {
.new-post-btn {
display: inline-block;
float: right;
@include float(right);
}
section.discussion {
......@@ -895,9 +923,10 @@ body.discussion {
float: left;
width: 16px;
height: 17px;
margin: 8px 7px 0 0;
margin-top: 8px;
@include margin-right(7px);
font-size: 16px;
padding-right: $baseline/2;
@include padding-right($baseline/2);
vertical-align: middle;
color: $white;
}
......
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;
......@@ -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
@include padding-left(40px);
@include padding-right(0);
}
}
@-webkit-keyframes fadeIn {
......@@ -130,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 {
......
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 {
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -3,7 +3,7 @@
.forum-nav {
@include box-sizing(border-box);
float: left;
@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 {
......@@ -200,6 +200,13 @@
.icon {
@include font-size(14);
&:before {
@include rtl {
@include transform(scale(-1, 1)); // RTL for font awesome question mark
}
}
}
.icon-comments {
......@@ -223,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 {
......@@ -251,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);
......@@ -264,12 +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: 0 ($baseline/4) ($baseline/4) 0;
border-color: transparent $gray-l3 transparent transparent;
@include border-width(0, ($baseline/4), ($baseline/4), 0);
@include border-color(transparent, $gray-l3, transparent, transparent);
}
&.is-unread {
......
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);
......
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);
}
}
......
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: left;
}
// 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: left;
}
aside {
@include float(left);
width: 280px;
float: left;
p, ol, ul {
font-size: 14px !important;
......@@ -273,10 +273,10 @@
margin: 0 0 $baseline 0;
.field {
@include float(left);
@include margin(0, ($baseline*1.5), 0, 0);
display: block;
float: left;
border-bottom: none;
margin: 0 ($baseline*1.5) 0 0;
padding-bottom: 0;
input, textarea {
......@@ -336,7 +336,7 @@
.tip {
position: absolute;
top: 0;
right: 0;
@include right(0);
}
}
......@@ -378,7 +378,7 @@
input[type="checkbox"] {
display: inline-block;
width: auto;
margin-right: ($baseline/4);
@include margin-right($baseline/4);
}
label {
......@@ -702,7 +702,7 @@
h2 {
@extend %heading-2;
text-align: left;
@include text-align(left);
}
}
......
lms/static/sass/multicourse/_course_about.scss
......@@ -295,7 +295,7 @@
}
.details {
float: left;
@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: left;
@include float(left);
width: flex-grid(4);
> section {
......
lms/static/sass/multicourse/_courses.scss
......@@ -42,14 +42,14 @@
.logo {
display: inline-block;
@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;
&::after {
@extend %faded-vertical-divider;
content: "";
display: block;
height: 80px;
......
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;
@include float(left);
@include 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;
@include float(left);
margin: 0px;
width: flex-grid(9);
......@@ -355,7 +356,7 @@
@include transition(all 0.15s linear 0s);
overflow: hidden;
position: relative;
float: left;
@include float(left);
height: 100%;
max-height: 100%;
width: 200px;
......@@ -374,7 +375,7 @@
.info {
@include clearfix;
padding: 0 10px 0 230px;
@include padding(0, 10px, 0, 230px);
> hgroup {
padding: 0;
......@@ -393,7 +394,7 @@
.date-block {
position: absolute;
top: 0;
right: 0;
@include right(0);
font-family: $sans-serif;
font-size: 13px;
font-style: italic;
......@@ -451,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;
......@@ -888,7 +889,7 @@
}
a.unenroll {
float: right;
@include float(right);
display: block;
font-style: italic;
color: $lighter-base-font-color;
......@@ -903,7 +904,7 @@
a.email-settings {
@extend a.unenroll;
margin-right: 10px;
@include margin-right(10px);
}
}
......
lms/static/sass/multicourse/_error-pages.scss
section.outside-app {
@extend .container;
text-align: left;
@include text-align(left);
padding: 80px 0;
h1 {
@extend h2;
margin-bottom: 40px;
}
p {
max-width: 600px;
margin: 0 auto;
......
lms/static/sass/shared/_course_object.scss
......@@ -5,11 +5,11 @@
.university-column {
width: flex-grid(4);
margin-right: 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: left;
@include margin-right(flex-gutter());
@include float(left);
&:nth-child(3n+3) {
margin-right: 0;
@include margin-right(0);
}
}
}
......
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;
......
lms/static/sass/shared/_header.scss
......@@ -17,8 +17,8 @@ header.global {
}
h1.logo {
float: left;
margin: -2px 39px 0px 0px;
@include float(left);
@include margin(-2px, 39px, 0, 0);
position: relative;
a {
......@@ -27,11 +27,11 @@ header.global {
}
.left {
float: left;
@include float(left);
}
.guest {
float: right;
@include float(right);
}
> li {
......@@ -104,12 +104,12 @@ header.global {
}
.user {
float: right;
@include float(right);
margin-top: 4px;
> .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,15 @@ header.global {
.avatar {
@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;
}
height: 26px;
display: inline-block;
left: 8px;
@include left(8px);
opacity: 0.5;
overflow: hidden;
position: absolute;
......@@ -171,7 +177,7 @@ header.global {
display: none;
padding: 5px 10px;
position: absolute;
right: 0px;
@include right(0px);
top: 34px;
width: 170px;
z-index: 3;
......@@ -194,7 +200,7 @@ header.global {
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
right: 12px;
@include right(12px);
top: -6px;
width: 0px;
}
......@@ -236,7 +242,7 @@ header.global {
.nav-global {
margin-top: ($baseline/2);
list-style: none;
float: left;
@include float(left);
li,
div {
......@@ -279,7 +285,7 @@ header.global {
}
.nav-courseware {
float: right;
@include float(right);
margin-top: ($baseline/4);
list-style: none;
......@@ -394,7 +400,7 @@ header.global-new {
}
.primary {
margin-right: 5px;
@include margin-right(5px);
> a {
@include background-image($button-bg-image);
......@@ -415,7 +421,7 @@ header.global-new {
vertical-align: middle;
&:last-child {
margin-right: 0px;
@include margin-right(0);
}
&:hover, &:focus, &:active {
......@@ -430,13 +436,13 @@ header.global-new {
> .primary {
display: block;
float: left;
margin: 0px;
@include float(left);
margin: 0;
position: relative;
> a {
margin: 0px;
@include border-right-radius(0px);
@include border-right-radius(0);
}
&:last-child {
......@@ -456,7 +462,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 +474,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 +498,7 @@ header.global-new {
display: none;
padding: 5px 10px;
position: absolute;
right: 0px;
@include right(0);
top: 34px;
width: 170px;
z-index: 3;
......@@ -515,7 +521,7 @@ header.global-new {
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
right: 12px;
@include right(12px);
top: -6px;
width: 0px;
}
......
lms/static/sass/vendor/bi-app/_bi-app-ltr.scss 0 → 100755
// ------------------------------------------
// 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
lms/static/sass/vendor/bi-app/_bi-app-rtl.scss 0 → 100755
// ------------------------------------------
// 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
lms/static/sass/vendor/bi-app/_mixins.scss 0 → 100755
// ------------------------------------------
// 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;
}
}
lms/static/sass/vendor/bi-app/_variables-ltr.scss 0 → 100755
// ------------------------------------------
// 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
lms/static/sass/vendor/bi-app/_variables-rtl.scss 0 → 100755
// ------------------------------------------
// 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
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>
<%
# set doc language direction
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,19 +122,26 @@
</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>
<div class="content-wrapper" id="content">
${self.body()}
<%block name="bodyextra"/>
</div>
<%include file="${footer_file}" />
% if not suppress_toplevel_navigation:
<%include file="${footer_file}" />
% endif
</div>
<script>window.baseUrl = "${settings.STATIC_URL}";</script>
% if not disable_courseware_js:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment