Skip to content

E
edx-platform
Commit ce3cb278 by Frances Botsford
Options

switching RTL on the fly - added bi-app for sass compiling

parent 9b287960
Showing with 1612 additions and 306 deletions
cms/static/sass/_base.scss
...@@ -280,24 +280,24 @@ p, ul, ol, dl { ...@@ -280,24 +280,24 @@ p, ul, ol, dl {
.page-header { .page-header {
width: flex-grid(6,12); width: flex-grid(6,12);
float: flip(left, right); @include float(left);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
} }
.nav-actions { .nav-actions {
position: relative; position: relative;
bottom: -($baseline*0.75); bottom: -($baseline*0.75);
width: flex-grid(6,12); width: flex-grid(6,12);
float: flip(left, right); @include float(left);
text-align: $right; @include text-align(right);
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
#{$margin-right}: ($baseline/2); @include margin-right($baseline/2);
&:last-child { &:last-child {
#{$margin-right}: 0; @include margin-right(0);
} }
} }
...@@ -500,21 +500,21 @@ p, ul, ol, dl { ...@@ -500,21 +500,21 @@ p, ul, ol, dl {
.main-column { .main-column {
clear: both; clear: both;
float: $left; @include float(left);
width: 70%; width: 70%;
} }
.sidebar { .sidebar {
float: $right; @include float(right);
width: 28%; width: 28%;
} }
.left { .left {
float: $left; @include float(left);
} }
.right { .right {
float: $right; @include float(right);
} }
// ==================== // ====================
...@@ -539,7 +539,7 @@ p, ul, ol, dl { ...@@ -539,7 +539,7 @@ p, ul, ol, dl {
.item-actions { .item-actions {
position: absolute; position: absolute;
top: 5px; top: 5px;
#{$right}: 5px; @include right(5px);
.edit-button, .edit-button,
.delete-button, .delete-button,
......
cms/static/sass/elements/_header.scss
...@@ -27,14 +27,14 @@ ...@@ -27,14 +27,14 @@
} }
.wrapper-l { .wrapper-l {
float: flip(left, right); @include float(left);
width: flex-grid(7,12); width: flex-grid(7,12);
} }
.wrapper-r { .wrapper-r {
float: flip(right, left); @include float(right);
width: flex-grid(4,12); width: flex-grid(4,12);
text-align: $right; @include text-align(right);
} }
.branding, .info-course, .nav-course, .nav-account, .nav-pitch { .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
...@@ -128,8 +128,8 @@ ...@@ -128,8 +128,8 @@
// specific elements - course name/info // specific elements - course name/info
.info-course { .info-course {
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
#{$border-right}: 1px solid $gray-l4; @include border-right(1px solid $gray-l4);
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number { .course-org, .course-number {
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
} }
.course-org { .course-org {
#{$margin-right}: ($baseline/4); @include margin-right($baseline/4);
} }
.course-title { .course-title {
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
padding: ($baseline*0.75) 0; padding: ($baseline*0.75) 0;
.nav-sub { .nav-sub {
text-align: $left; @include text-align(left);
} }
.nav-account-help { .nav-account-help {
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
.branding { .branding {
width: 20%; width: 20%;
#{$margin-right}: 2%; @include margin-right(2%);
} }
.nav-account { .nav-account {
...@@ -263,7 +263,7 @@ ...@@ -263,7 +263,7 @@
.branding { .branding {
width: 20%; width: 20%;
#{$margin-right}: 2%; @include margin-right(2%);
} }
.info-course { .info-course {
......
cms/static/sass/elements/_icons.scss
...@@ -12,14 +12,14 @@ ...@@ -12,14 +12,14 @@
.icon-inline { .icon-inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
#{$margin-right}: ($baseline/4); @include margin-right($baseline/4);
} }
// ui - badges // ui - badges
.wrapper-ui-badge { .wrapper-ui-badge {
position: absolute; position: absolute;
top: -1px; top: -1px;
#{$left}: ($baseline*1.5); @include left($baseline*1.5);
width: 100%; width: 100%;
} }
......
cms/static/sass/elements/_navigation.scss
...@@ -148,7 +148,7 @@ nav { ...@@ -148,7 +148,7 @@ nav {
} }
.nav-sub { .nav-sub {
text-align: $left; @include text-align(left);
// ui triangle/nub // ui triangle/nub
&:after { &:after {
...@@ -167,20 +167,20 @@ nav { ...@@ -167,20 +167,20 @@ nav {
&.ui-right { &.ui-right {
.wrapper-nav-sub { .wrapper-nav-sub {
#{$left}: none; @include left(none);
#{$right}: 0; @include right(0);
} }
.nav-sub { .nav-sub {
// ui triangle/nub // ui triangle/nub
&:after { &:after {
#{$right}: $baseline; @include right($baseline);
margin-right: -10px; margin-right: -10px;
} }
&:before { &:before {
#{$right}: $baseline; @include right($baseline);
margin-right: -11px; margin-right: -11px;
} }
} }
......
cms/static/sass/elements/_sock.scss
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
[class^="icon-"] { [class^="icon-"] {
@extend %t-icon6; @extend %t-icon6;
#{$margin-right}: ($baseline/4); @include margin-right($baseline/4);
} }
&:hover { &:hover {
...@@ -84,11 +84,11 @@ ...@@ -84,11 +84,11 @@
@include clearfix(); @include clearfix();
.action-item { .action-item {
float: flip(left, right); @include float(left);
#{$margin-right}: ($baseline/2); @include margin-right($baseline/2);
&:last-child { &:last-child {
#{$margin-right}: 0; @include margin-right(0);
} }
.action { .action {
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
[class^="icon-"] { [class^="icon-"] {
@extend %t-icon4; @extend %t-icon4;
vertical-align: middle; vertical-align: middle;
#{$margin-right}: $baseline/4; @include margin-right($baseline/4);
} }
......
cms/static/sass/elements/_system-feedback.scss
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
vertical-align: middle; vertical-align: middle;
width: $baseline*17.5; width: $baseline*17.5;
border: 4px solid $black; border: 4px solid $black;
text-align: $left; @include text-align(left);
.copy { .copy {
border-top: 4px solid $blue; border-top: 4px solid $blue;
...@@ -225,10 +225,10 @@ ...@@ -225,10 +225,10 @@
.nav-item { .nav-item {
display: inline-block; display: inline-block;
#{$margin-right}: ($baseline*0.75); @include margin-right($baseline*0.75);
&:last-child { &:last-child {
#{$margin-right}: 0; @include margin-right(0);
} }
} }
...@@ -437,22 +437,22 @@ ...@@ -437,22 +437,22 @@
.copy { .copy {
width: flex-grid(7, 12); width: flex-grid(7, 12);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
} }
.nav-actions { .nav-actions {
width: flex-grid(4, 12); width: flex-grid(4, 12);
float: flip(left, right); @include float(left);
margin-top: ($baseline/4); margin-top: ($baseline/4);
text-align: right; text-align: right;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
#{$margin-right}: ($baseline/2); @include margin-right($baseline/2);
&:last-child { &:last-child {
#{$margin-right}: 0; @include margin-right(0);
} }
} }
} }
...@@ -612,22 +612,22 @@ ...@@ -612,22 +612,22 @@
.copy { .copy {
width: flex-grid(7, 12); width: flex-grid(7, 12);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
} }
.nav-actions { .nav-actions {
width: flex-grid(4, 12); width: flex-grid(4, 12);
float: flip(left, right); @include float(left);
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: right;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
#{$margin-right}: ($baseline/2); @include margin-right($baseline/2);
&:last-child { &:last-child {
#{$margin-right}: 0; @include margin-right(0);
} }
.action-primary { .action-primary {
...@@ -829,7 +829,7 @@ body.uxdesign.alerts { ...@@ -829,7 +829,7 @@ body.uxdesign.alerts {
.content-primary { .content-primary {
@extend %ui-window; @extend %ui-window;
width: flex-grid(12, 12); width: flex-grid(12, 12);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
> section { > section {
...@@ -856,9 +856,9 @@ body.uxdesign.alerts { ...@@ -856,9 +856,9 @@ body.uxdesign.alerts {
} }
a { a {
float: flip(left, right); @include float(left);
width: flex-grid(5, 12); width: flex-grid(5, 12);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
} }
} }
} }
...@@ -882,7 +882,7 @@ body.uxdesign.alerts { ...@@ -882,7 +882,7 @@ body.uxdesign.alerts {
@include clearfix; @include clearfix;
.alert-message { .alert-message {
float: flip(left, right); @include float(left);
margin: 4px 0 0 0; margin: 4px 0 0 0;
color: $gray-d3; color: $gray-d3;
} }
...@@ -892,7 +892,7 @@ body.uxdesign.alerts { ...@@ -892,7 +892,7 @@ body.uxdesign.alerts {
} }
.alert-action { .alert-action {
float: flip(left, right); @include float(left);
&.secondary { &.secondary {
@include orange-button; @include orange-button;
......
cms/static/sass/elements/_system-help.scss
...@@ -24,17 +24,17 @@ ...@@ -24,17 +24,17 @@
@include clearfix(); @include clearfix();
.copy { .copy {
float: flip(left, right); @include float(left);
width: flex-grid(8,12); width: flex-grid(8,12);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
} }
.nav-introduction-supplementary { .nav-introduction-supplementary {
@extend %t-copy-sub2; @extend %t-copy-sub2;
float: flip(right, left); @include float(right);
width: flex-grid(4,12); width: flex-grid(4,12);
display: block; display: block;
text-align: right; @include text-align(right);
.icon { .icon {
@extend %t-action3; @extend %t-action3;
......
cms/static/sass/style-app-extend1-rtl.scss 0 → 100644
// 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
cms/static/sass/style-app-extend1.scss
// studio - css architecture // studio - css architecture
// ==================== // ====================
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// libs and resets *do not edit* // libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
......
cms/static/sass/style-app-rtl.scss 0 → 100644
// 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';
cms/static/sass/style-app.scss
// studio - css architecture // studio - css architecture
// ==================== // ====================
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// libs and resets *do not edit* // libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
......
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 @@ ...@@ -37,7 +37,7 @@
.action { .action {
@extend %t-action3; @extend %t-action3;
position: absolute; position: absolute;
#{$right}: 0; @include right(0);
top: 40%; top: 40%;
} }
} }
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
@extend %t-action3; @extend %t-action3;
position: absolute; position: absolute;
top: 0; top: 0;
#{$right}: 0; @include right(0);
} }
} }
} }
cms/static/sass/views/_assets.scss
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
.new-button { .new-button {
@extend %t-action3; @extend %t-action3;
#{$margin-left}: $baseline; @include margin-left($baseline);
[class^="icon-"] { [class^="icon-"] {
#{$margin-right}: ($baseline/2); @include margin-right($baseline/2);
} }
} }
} }
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
width: flex-grid(3, 12); width: flex-grid(3, 12);
&.pagination-compact { &.pagination-compact {
text-align: $right; @include text-align(right);
} }
&.pagination-full { &.pagination-full {
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
.current-page { .current-page {
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
#{$left}: -($baseline/4); @include left(-($baseline/4));
} }
.page-divider { .page-divider {
......
cms/static/sass/views/_checklists.scss
...@@ -57,15 +57,15 @@ ...@@ -57,15 +57,15 @@
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
width: flex-grid(6, 9); width: flex-grid(6, 9);
margin: 0; margin: 0;
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
float: flip(left, right); @include float(left);
.ui-toggle-expansion { .ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-action1; @extend %t-action1;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
#{$margin-right}: ($baseline/2); @include margin-right($baseline/2);
color: $gray-l4; color: $gray-l4;
} }
...@@ -85,9 +85,9 @@ ...@@ -85,9 +85,9 @@
.checklist-status { .checklist-status {
@extend %t-copy-sub1; @extend %t-copy-sub1;
width: flex-grid(3, 9); width: flex-grid(3, 9);
float: flip(right, left); @include float(right);
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: $right; @include text-align(right);
color: $gray-l2; color: $gray-l2;
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
.action-primary { .action-primary {
@include green-button(); @include green-button();
float: flip(left, right); @include float(left);
.icon-add { .icon-add {
@extend %t-icon7; @extend %t-icon7;
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
@include grey-button(); @include grey-button();
@extend %t-action3; @extend %t-action3;
@extend %t-regular; @extend %t-regular;
float: flip(right, left); @include float(right);
.icon-delete { .icon-delete {
@extend %t-icon7; @extend %t-icon7;
...@@ -226,16 +226,16 @@ ...@@ -226,16 +226,16 @@
.task-input { .task-input {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
float: flip(left, right); @include float(left);
margin-top: ($baseline/2); margin-top: ($baseline/2);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
} }
.task-details { .task-details {
@extend %t-strong; @extend %t-strong;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
float: flip(left, right); @include float(left);
width: flex-grid(6,9); width: flex-grid(6,9);
.task-name { .task-name {
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
float: flip(right, left); @include float(right);
width: flex-grid(2,9); width: flex-grid(2,9);
margin: ($baseline/2) 0 0 flex-gutter(); margin: ($baseline/2) 0 0 flex-gutter();
opacity: 0.0; opacity: 0.0;
......
cms/static/sass/views/_settings.scss
...@@ -66,16 +66,16 @@ ...@@ -66,16 +66,16 @@
.title-2 { .title-2 {
width: flex-grid(4, 9); width: flex-grid(4, 9);
margin: 0; margin: 0;
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
float: flip(left, right); @include float(left);
} }
.tip { .tip {
@extend %t-copy-sub2; @extend %t-copy-sub2;
width: flex-grid(5, 9); width: flex-grid(5, 9);
float: flip(right, left); @include float(right);
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: $right; @include text-align(right);
color: $gray-l2; color: $gray-l2;
} }
} }
...@@ -371,7 +371,7 @@ ...@@ -371,7 +371,7 @@
} }
.field { .field {
float: flip(left, right); @include float(left);
width: flex-grid(3, 9); width: flex-grid(3, 9);
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
margin-right: flex-gutter(); margin-right: flex-gutter();
...@@ -383,7 +383,7 @@ ...@@ -383,7 +383,7 @@
.tip { .tip {
position: absolute; position: absolute;
top: 0; top: 0;
#{$right}: 0; @include right(0);
} }
} }
} }
......
cms/static/sass/views/_static-pages.scss
...@@ -203,7 +203,7 @@ ...@@ -203,7 +203,7 @@
position: absolute; position: absolute;
display: block; display: block;
top: 0; top: 0;
#{$right}: 0; @include right(0);
z-index: 11; z-index: 11;
width: 35px; width: 35px;
height: 100%; height: 100%;
...@@ -238,8 +238,8 @@ ...@@ -238,8 +238,8 @@
.component-actions, .component-actions,
.course-nav-item-actions { .course-nav-item-actions {
display: inline-block; display: inline-block;
float: flip(right, left); @include float(right);
#{$margin-right}: ($baseline*2); @include margin-right($baseline*2);
padding: 8px 0px; padding: 8px 0px;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
......
cms/static/sass/views/_textbooks.scss
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
.textbook-title { .textbook-title {
@extend %t-title4; @extend %t-title4;
@extend %t-strong; @extend %t-strong;
#{$margin-right}: ($baseline*14); @include margin-right($baseline*14);
} }
.ui-toggle-expansion { .ui-toggle-expansion {
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
opacity: 0.0; opacity: 0.0;
position: absolute; position: absolute;
top: $baseline; top: $baseline;
#{$right}: $baseline; @include right($baseline);
.action { .action {
display: inline-block; display: inline-block;
...@@ -303,9 +303,9 @@ ...@@ -303,9 +303,9 @@
display: block; display: block;
width: 46%; width: 46%;
border-bottom: none; 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; padding: ($baseline/4) 0 0 0;
float: $left; @include float(left);
position: relative; position: relative;
input, textarea { input, textarea {
...@@ -316,7 +316,7 @@ ...@@ -316,7 +316,7 @@
@extend %ui-btn-flat-outline; @extend %ui-btn-flat-outline;
position: absolute; position: absolute;
top: 3px; top: 3px;
#{$right}: 0; @include right(0);
} }
} }
......
cms/static/sass/views/_updates.scss
...@@ -164,8 +164,8 @@ ...@@ -164,8 +164,8 @@
width: 30%; width: 30%;
padding: 20px 30px; padding: 20px 30px;
margin: 0; margin: 0;
border-radius: flip(0 3px 3px 0, 3px 0 0 3px); @include border-radius(0 3px 3px 0);
#{$border-left}: none; @include border-left(none);
background: $lightGrey; background: $lightGrey;
.title { .title {
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
.edit-icon, .edit-icon,
.delete-icon { .delete-icon {
#{$margin-right}: 4px; @include margin-right(4px);
} }
} }
......
cms/static/sass/views/_users.scss
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
// ELEM: item - metadata // ELEM: item - metadata
.item-metadata { .item-metadata {
width: flex-grid(5, 9); width: flex-grid(5, 9);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
.user-username, .user-email { .user-username, .user-email {
display: inline-block; display: inline-block;
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
@extend %t-title4; @extend %t-title4;
@extend %t-strong; @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; color: $gray-d4;
} }
......
common/lib/xmodule/xmodule/css/capa/display.scss
...@@ -61,7 +61,7 @@ div.problem { ...@@ -61,7 +61,7 @@ div.problem {
width: 100px; width: 100px;
label { label {
float: flip(left, right); @include float(left);
clear: both; clear: both;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -81,23 +81,23 @@ div.problem { ...@@ -81,23 +81,23 @@ div.problem {
} }
.indicator_container { .indicator_container {
float: flip(left, right); @include float(left);
width: 25px; width: 25px;
height: 1px; height: 1px;
#{$margin-right}: 15px; @include margin-right(15px);
} }
fieldset { fieldset {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0px 0px $baseline; margin: 0px 0px $baseline;
#{$padding-left}: $baseline; @include padding-left($baseline);
#{$border-left}: 1px solid #ddd; @include border-left(1px solid #ddd);
} }
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
float: flip(left, right); @include float(left);
margin: flip(4px 8px 0 0, 4px 0 0 8px); @include margin(4px 8px 0 0);
} }
text { text {
...@@ -634,7 +634,7 @@ div.problem { ...@@ -634,7 +634,7 @@ div.problem {
// margin-top: 10px; // margin-top: 10px;
display: inline-block; display: inline-block;
margin-top: 8px; margin-top: 8px;
#{$margin-left}: $baseline/2; @include margin-left($baseline/2);
color: #666; color: #666;
font-style: italic; font-style: italic;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
......
common/lib/xmodule/xmodule/css/sequence/display.scss
...@@ -293,29 +293,38 @@ nav.sequence-nav { ...@@ -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 { &.prev {
left: flip(-10px, auto); @include left(-10px);
right: flip(auto, -10px); @include border-radius(35px 0 0 35px);
border-radius: flip(35px 0 0 35px, 0 35px 35px 0);
a { a {
background-image: flip($prev-icon, $next-icon);
background-position: center 15px; 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 { &.next {
left: flip(auto, -10px); @include right(-10px);
right: flip(-10px, auto); @include border-radius(0 35px 35px 0);
border-radius: flip(0 35px 35px 0, 35px 0 0 35px);
a { a {
#{$margin-left}: 30px; @include margin-left(30px);
background-image: flip($next-icon, $prev-icon);
background-position: center 15px; 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 { ...@@ -339,7 +348,7 @@ nav.sequence-bottom {
display: inline-block; display: inline-block;
li { li {
float: flip(left, right); @include float(left);
width: 50px; width: 50px;
height: 44px; height: 44px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -373,25 +382,36 @@ nav.sequence-bottom { ...@@ -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 { &.prev {
border-radius: flip(35px 0 0 35px, 0 35px 35px 0); @include border-radius(35px 0 0 35px);
a { a {
background-image: flip($prev-icon, $next-icon);
background-position: center 15px; 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 { &.next {
border-radius: flip(0 35px 35px 0, 35px 0 0 35px); @include border-radius(0 35px 35px 0);
#{$border-left}: none; @include border-left(none);
a { a {
background-image: flip($next-icon, $prev-icon);
background-position: center 15px; 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');
}
} }
} }
} }
......
common/static/sass/_mixins.scss
// studio - utilities - mixins and extends // 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 // mixins - font sizing
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
...@@ -118,13 +90,13 @@ $right: right; ...@@ -118,13 +90,13 @@ $right: right;
// layout placeholders // layout placeholders
%ui-col-wide { %ui-col-wide {
width: flex-grid(9, 12); width: flex-grid(9, 12);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
float: flip(left, right); @include float(left);
} }
%ui-col-narrow { %ui-col-narrow {
width: flex-grid(3, 12); width: flex-grid(3, 12);
float: flip(left, right); @include float(left);
} }
......
lms/envs/common.py
...@@ -1069,6 +1069,25 @@ PIPELINE_CSS = { ...@@ -1069,6 +1069,25 @@ PIPELINE_CSS = {
], ],
'output_filename': 'css/lms-style-app-extend2.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': { 'style-course-vendor': {
'source_filenames': [ 'source_filenames': [
'js/vendor/CodeMirror/codemirror.css', 'js/vendor/CodeMirror/codemirror.css',
...@@ -1084,6 +1103,13 @@ PIPELINE_CSS = { ...@@ -1084,6 +1103,13 @@ PIPELINE_CSS = {
], ],
'output_filename': 'css/lms-style-course.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': { 'style-xmodule-annotations': {
'source_filenames': [ 'source_filenames': [
'css/vendor/ova/annotator.css', 'css/vendor/ova/annotator.css',
......
lms/static/sass/application-extend1-rtl.scss 0 → 100644
/*
* 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
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/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
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 ## 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) // lms - css application architecture (platform)
// ==================== // ====================
// libs and resets *do not edit* // libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// BASE *default edX offerings* // BASE *default edX offerings*
// ==================== // ====================
......
lms/static/sass/application-extend2-rtl.scss 0 → 100644
/*
* 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
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/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
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 ## 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) // lms - css application architecture (platform)
// ==================== // ====================
// libs and resets *do not edit* // libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// BASE *default edX offerings* // BASE *default edX offerings*
// ==================== // ====================
......
lms/static/sass/application-rtl.scss 0 → 100644
/*
* 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
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/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
lms/static/sass/application.scss.mako
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
// libs and resets *do not edit* // libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon @import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
// BASE *default edX offerings* // BASE *default edX offerings*
// ==================== // ====================
......
lms/static/sass/base/_mixins.scss
// lms - utilities - mixins and extends // 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 // mixins - font sizing
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
......
lms/static/sass/course-rtl.scss 0 → 100644
/*
* 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";
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 'bourbon/bourbon';
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
@import 'base/reset'; @import 'base/reset';
@import 'base/font_face'; @import 'base/font_face';
......
lms/static/sass/course/_info.scss
...@@ -80,7 +80,7 @@ div.info-wrapper { ...@@ -80,7 +80,7 @@ div.info-wrapper {
section.handouts { section.handouts {
@extend .sidebar; @extend .sidebar;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
#{$border-left}: 1px solid #ddd; @include border-left(1px solid #ddd);
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: 14px;
......
lms/static/sass/course/_profile.scss
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
margin-bottom: lh(); margin-bottom: lh();
h1 { h1 {
float: $left; @include float(left);
font-size: 1em; font-size: 1em;
font-weight: 100; font-weight: 100;
margin: 0; margin: 0;
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
} }
h2 { h2 {
#{$border-right}: 1px dashed #ddd; @include border-right(1px dashed #ddd);
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
letter-spacing: 0; letter-spacing: 0;
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
.sections { .sections {
display: table-cell; display: table-cell;
#{$padding-left}: flex-gutter(9); @include padding-left(flex-gutter(9));
width: flex-grid(7, 9); width: flex-grid(7, 9);
> div { > div {
......
lms/static/sass/course/base/_base.scss
...@@ -6,7 +6,7 @@ body { ...@@ -6,7 +6,7 @@ body {
} }
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { 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; font-family: $sans-serif;
} }
...@@ -49,7 +49,7 @@ form { ...@@ -49,7 +49,7 @@ form {
form.choicegroup { form.choicegroup {
label { label {
clear: both; clear: both;
float: $left; @include float(left);
} }
} }
......
lms/static/sass/course/base/_extends.scss
h1.top-header { h1.top-header {
border-bottom: 1px solid $border-color-2; border-bottom: 1px solid $border-color-2;
text-align: $left; @include text-align(left);
font-size: em(24); font-size: em(24);
font-weight: 100; font-weight: 100;
padding-bottom: lh(); padding-bottom: lh();
......
lms/static/sass/course/base/_mixins.scss
// 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 { @mixin blue-button {
display: block; display: block;
......
lms/static/sass/course/courseware/_courseware.scss
...@@ -23,7 +23,7 @@ html.video-fullscreen{ ...@@ -23,7 +23,7 @@ html.video-fullscreen{
.instructor-info-action { .instructor-info-action {
@extend %t-copy-sub2; @extend %t-copy-sub2;
float: flip(right, left); @include float(left);
margin-left: ($baseline/2); margin-left: ($baseline/2);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4); border-radius: ($baseline/4);
......
lms/static/sass/course/courseware/_sidebar.scss
.course-index { .course-index {
@extend .sidebar; @extend .sidebar;
@extend .tran; @extend .tran;
border-radius: flip(3px 0 0 3px, 0 3px 3px 0); @include border-right(1px solid $border-color-2);
#{$border-right}: 1px solid $border-color-2; @include border-radius(3px 0 0 3px);
#open_close_accordion { #open_close_accordion {
display: none; display: none;
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
a { a {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
#{$padding-left}: 19px; @include padding-left(19px);
color: $link-color; color: $link-color;
} }
...@@ -61,13 +61,18 @@ ...@@ -61,13 +61,18 @@
} }
span.ui-icon { span.ui-icon {
left: flip(0, auto); @include left(0);
right: flip(0, auto);
background-image: url("/static/images/ui-icons_222222_256x240.png");
opacity: 0.3; 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 &.ui-icon-triangle-1-e {
background-position: flip(-32px -16px, -96px -16px); // flip(jQuery UI east arrow, jQuery UI west arrow) @include ltr {
background-position: -32px -16px; // jQuery UI east arrow position
}
@include rtl {
background-position: -96px -16px; // jQuery UI west arrow position
}
} }
} }
} }
......
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 { ...@@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 {
input[type="button"].add { input[type="button"].add {
@include idashbutton($blue); @include idashbutton($blue);
position: absolute; position: absolute;
#{$right}: $baseline; @include right($baseline);
} }
} }
......
lms/static/sass/course/layout/_courseware_header.scss
...@@ -19,7 +19,7 @@ nav.course-material { ...@@ -19,7 +19,7 @@ nav.course-material {
margin-left: 10px; margin-left: 10px;
li { li {
float: $left; @include float(left);
list-style: none; list-style: none;
margin-right: 6px; margin-right: 6px;
...@@ -120,7 +120,7 @@ header.global.slim { ...@@ -120,7 +120,7 @@ header.global.slim {
h1.logo { h1.logo {
margin: 0 10px 0 13px; margin: 0 10px 0 13px;
#{$padding-right}: 20px; @include padding-right(20px);
&:before { &:before {
@extend %faded-vertical-divider; @extend %faded-vertical-divider;
...@@ -128,7 +128,7 @@ header.global.slim { ...@@ -128,7 +128,7 @@ header.global.slim {
display: block; display: block;
height: 35px; height: 35px;
position: absolute; position: absolute;
#{$right}: 3px; @include right(3px);
top: 0; top: 0;
width: 1px; width: 1px;
} }
...@@ -156,7 +156,7 @@ header.global.slim { ...@@ -156,7 +156,7 @@ header.global.slim {
h2 { h2 {
display: block; display: block;
width: 700px; width: 700px;
float: flip(left, right); @include float(left);
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
color: $lighter-base-font-color; color: $lighter-base-font-color;
......
lms/static/sass/course/layout/_courseware_subnav.scss
...@@ -18,7 +18,7 @@ nav.course-material { ...@@ -18,7 +18,7 @@ nav.course-material {
padding: 10px 0 0 0; padding: 10px 0 0 0;
li { li {
float: $left; @include float(left);
list-style: none; list-style: none;
a { a {
......
lms/static/sass/discussion/_discussion.scss
...@@ -12,7 +12,7 @@ body.discussion { ...@@ -12,7 +12,7 @@ body.discussion {
.new-post-icon { .new-post-icon {
margin-top: 8px; margin-top: 8px;
#{$margin-right}: 7px; @include margin-right(7px);
font-size: 16px; font-size: 16px;
vertical-align: middle; vertical-align: middle;
color: $white; color: $white;
...@@ -242,7 +242,7 @@ body.discussion { ...@@ -242,7 +242,7 @@ body.discussion {
} }
.discussion-column { .discussion-column {
float: flip(right, left); @include float(right);
@include box-sizing(border-box); @include box-sizing(border-box);
width: 68%; width: 68%;
max-width: 800px; max-width: 800px;
...@@ -369,7 +369,7 @@ body.discussion { ...@@ -369,7 +369,7 @@ body.discussion {
.notification-checkbox { .notification-checkbox {
display: inline-block; display: inline-block;
padding: $baseline/4 0 $baseline/2 0; padding: $baseline/4 0 $baseline/2 0;
#{$margin-right}: $baseline/2; @include margin-right($baseline/2);
border-radius: 5px; border-radius: 5px;
border: 1px solid gray; border: 1px solid gray;
...@@ -377,7 +377,7 @@ body.discussion { ...@@ -377,7 +377,7 @@ body.discussion {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
#{$margin-left}: $baseline/2; @include margin-right($baseline/2);
} }
.icon { .icon {
...@@ -535,8 +535,8 @@ body.discussion { ...@@ -535,8 +535,8 @@ body.discussion {
.response-body { .response-body {
ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
#{$padding-left}: 40px; @include padding-left(40px);
#{$padding-right}: 0; @include padding-right(0);
} }
} }
} }
...@@ -557,15 +557,21 @@ body.discussion { ...@@ -557,15 +557,21 @@ body.discussion {
padding: 0 18px; padding: 0 18px;
width: 100%; width: 100%;
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l1;
text-align: $left; @include text-align(left);
font-size: 13px; font-size: 13px;
.icon-reply:before { .icon-reply:before { // flip the icon for RTL
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
}
} }
span.add-response-btn-text { span.add-response-btn-text {
#{$padding-left}: ($baseline/5); @include padding-left($baseline/5);
} }
} }
} }
...@@ -650,7 +656,7 @@ body.discussion { ...@@ -650,7 +656,7 @@ body.discussion {
.discussion-submit-post { .discussion-submit-post {
@include blue-button; @include blue-button;
float: $left; @include float(left);
} }
.wmd-button { .wmd-button {
...@@ -686,10 +692,16 @@ body.discussion { ...@@ -686,10 +692,16 @@ body.discussion {
padding-left: ($baseline*1.5); padding-left: ($baseline*1.5);
width: 100%; width: 100%;
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l1;
text-align: $left; @include text-align(left);
.icon-reply:before { .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 { &:hover, &:focus {
...@@ -912,9 +924,9 @@ body.discussion { ...@@ -912,9 +924,9 @@ body.discussion {
width: 16px; width: 16px;
height: 17px; height: 17px;
margin-top: 8px; margin-top: 8px;
#{$margin-right}: 7px; @include margin-right(7px);
font-size: 16px; font-size: 16px;
#{$padding-right}: $baseline/2; @include padding-right($baseline/2);
vertical-align: middle; vertical-align: middle;
color: $white; color: $white;
} }
......
lms/static/sass/discussion/_mixins.scss
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
@mixin discussion-wmd-preview-label { @mixin discussion-wmd-preview-label {
padding-top: 3px; padding-top: 3px;
#{$padding-left}: 5px; @include padding-left(5px);
width: 100%; width: 100%;
color: #bbb; color: #bbb;
text-transform: uppercase; text-transform: uppercase;
...@@ -102,8 +102,8 @@ ...@@ -102,8 +102,8 @@
color: #333; color: #333;
ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
#{$padding-left}: 40px; @include padding-left(40px);
#{$padding-right}: 0; @include padding-right(0);
} }
} }
...@@ -135,11 +135,11 @@ ...@@ -135,11 +135,11 @@
color: $color; color: $color;
.icon { .icon {
#{$margin-right}: ($baseline/5); @include margin-right($baseline/5);
} }
&:last-child { &:last-child {
#{$margin-right}: 0; @include margin-right(0);
} }
&.is-hidden { &.is-hidden {
......
lms/static/sass/discussion/elements/_actions.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.response-actions-list, .response-actions-list,
.comment-actions-list { .comment-actions-list {
@extend %ui-no-list; @extend %ui-no-list;
text-align: $right; @include text-align(right);
.actions-item { .actions-item {
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
&:after, &:after,
&:before { &:before {
bottom: 100%; bottom: 100%;
#{$right}: 3px; @include right(3px);
border: solid transparent; border: solid transparent;
content: " "; content: " ";
height: 0; height: 0;
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
border-color: $transparent; border-color: $transparent;
border-bottom-color: $white; border-bottom-color: $white;
border-width: 6px; border-width: 6px;
#{$margin-right}: 1px; @include margin-right(1px);
} }
&:before { &:before {
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
display: block; display: block;
padding: ($baseline/10) 0; padding: ($baseline/10) 0;
white-space: nowrap; white-space: nowrap;
text-align: $right; @include text-align(right);
color: $gray-l1; color: $gray-l1;
&:hover, &:focus { &:hover, &:focus {
......
lms/static/sass/discussion/elements/_navigation.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.forum-nav { .forum-nav {
@include box-sizing(border-box); @include box-sizing(border-box);
float: flip(left, right); @include float(left);
position: relative; position: relative;
width: 31%; width: 31%;
border: 1px solid #aaa; border: 1px solid #aaa;
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
.icon { .icon {
@include font-size(14); @include font-size(14);
#{$margin-right}: ($baseline/4); @include margin-right($baseline/4);
} }
} }
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
} }
.forum-nav-browse-drop-arrow { .forum-nav-browse-drop-arrow {
#{$margin-left}: ($baseline/4); @include margin-left($baseline/4);
} }
.forum-nav-search { .forum-nav-search {
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
position: absolute; position: absolute;
margin-top: -6px; margin-top: -6px;
top: 50%; 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 { .forum-nav-search-input {
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
} }
.forum-nav-browse-title .icon { .forum-nav-browse-title .icon {
#{$margin-right}: ($baseline/2); @include margin-right($baseline/2);
} }
// ------------------- // -------------------
...@@ -135,14 +135,14 @@ ...@@ -135,14 +135,14 @@
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
width: 50%; width: 50%;
text-align: $left; @include text-align(left);
} }
.forum-nav-filter-cohort, .forum-nav-sort { .forum-nav-filter-cohort, .forum-nav-sort {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
width: 50%; width: 50%;
text-align: $right; @include text-align(right);
} }
%forum-nav-select { %forum-nav-select {
...@@ -202,7 +202,10 @@ ...@@ -202,7 +202,10 @@
@include font-size(14); @include font-size(14);
&:before { &: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 @@ ...@@ -227,7 +230,7 @@
.forum-nav-thread-wrapper-2 { .forum-nav-thread-wrapper-2 {
@extend %forum-nav-thread-wrapper; @extend %forum-nav-thread-wrapper;
width: 13%; width: 13%;
text-align: $right; @include text-align(right);
} }
.forum-nav-thread-title { .forum-nav-thread-title {
...@@ -255,7 +258,7 @@ ...@@ -255,7 +258,7 @@
@extend %forum-nav-thread-wrapper-2-content; @extend %forum-nav-thread-wrapper-2-content;
@extend %t-weight4; @extend %t-weight4;
position: relative; position: relative;
#{$margin-left}: ($baseline/4); @include margin-left($baseline/4);
margin-bottom: ($baseline/4); // Because tail is position: absolute margin-bottom: ($baseline/4); // Because tail is position: absolute
border-radius: 2px; border-radius: 2px;
padding: ($baseline/10) ($baseline/5); padding: ($baseline/10) ($baseline/5);
...@@ -268,13 +271,12 @@ ...@@ -268,13 +271,12 @@
display: block; display: block;
position: absolute; position: absolute;
bottom: (-$baseline/4); bottom: (-$baseline/4);
#{$right}: ($baseline/4); @include right($baseline/4);
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
@include border-width(0, ($baseline/4), ($baseline/4), 0);
border-width: flip(0 ($baseline/4) ($baseline/4) 0, ($baseline/4) ($baseline/4) 0 0); @include border-color(transparent, $gray-l3, transparent, transparent);
border-color: flip(transparent $gray-l3 transparent transparent, $gray-l3 transparent transparent transparent);
} }
&.is-unread { &.is-unread {
......
lms/static/sass/discussion/views/_thread.scss
...@@ -17,7 +17,7 @@ body.discussion, .discussion-module { ...@@ -17,7 +17,7 @@ body.discussion, .discussion-module {
.post-header-actions { .post-header-actions {
display: inline-block; display: inline-block;
float: $right; @include float(right);
vertical-align: middle; vertical-align: middle;
width: flex-grid(3,12); width: flex-grid(3,12);
} }
...@@ -44,7 +44,7 @@ body.discussion, .discussion-module { ...@@ -44,7 +44,7 @@ body.discussion, .discussion-module {
.response-header-actions { .response-header-actions {
width: flex-grid(3,12); width: flex-grid(3,12);
float: $right; @include float(right);
} }
} }
......
lms/static/sass/multicourse/_account.scss
...@@ -123,16 +123,16 @@ ...@@ -123,16 +123,16 @@
// CASE: normal typographical headings // CASE: normal typographical headings
h1 { h1 {
@extend %heading-2; @extend %heading-2;
@include text-align(left);
margin-bottom: $baseline; margin-bottom: $baseline;
padding-bottom: $baseline; padding-bottom: $baseline;
text-align: flip(left, right);
} }
// CASE: marketing/imageery-based headings // CASE: marketing/imageery-based headings
.title { .title {
position: absolute; position: absolute;
top: ($baseline*2.5); top: ($baseline*2.5);
#{$left}:($baseline*1.5); @include left($baseline*1.5);
.title-super, .title-sub { .title-super, .title-sub {
@extend %t-weight1; @extend %t-weight1;
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
.title-sub { .title-sub {
@include font-size(20); @include font-size(20);
#{$margin-left}: ($baseline*2); @include margin-left($baseline*2);
text-transform: lowercase; text-transform: lowercase;
color: $header-graphic-sub-color; color: $header-graphic-sub-color;
} }
...@@ -197,14 +197,14 @@ ...@@ -197,14 +197,14 @@
} }
.content { .content {
#{$margin-right}: ($baseline*2); @include float(left);
@include margin-right($baseline*2);
width: 600px; width: 600px;
float: flip(left, right);
} }
aside { aside {
@include float(left);
width: 280px; width: 280px;
float: flip(left, right);
p, ol, ul { p, ol, ul {
font-size: 14px !important; font-size: 14px !important;
...@@ -273,11 +273,10 @@ ...@@ -273,11 +273,10 @@
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
.field { .field {
@include float(left);
@include margin(0, ($baseline*1.5), 0, 0);
display: block; display: block;
float: flip(left, right);
border-bottom: none; border-bottom: none;
margin: 0;
#{$margin-right}: ($baseline*1.5);
padding-bottom: 0; padding-bottom: 0;
input, textarea { input, textarea {
...@@ -337,7 +336,7 @@ ...@@ -337,7 +336,7 @@
.tip { .tip {
position: absolute; position: absolute;
top: 0; top: 0;
#{$right}: 0; @include right(0);
} }
} }
...@@ -379,7 +378,7 @@ ...@@ -379,7 +378,7 @@
input[type="checkbox"] { input[type="checkbox"] {
display: inline-block; display: inline-block;
width: auto; width: auto;
#{$margin-right}: ($baseline/4); @include margin-right($baseline/4);
} }
label { label {
...@@ -703,7 +702,7 @@ ...@@ -703,7 +702,7 @@
h2 { h2 {
@extend %heading-2; @extend %heading-2;
text-align: flip(left, right); @include text-align(left);
} }
} }
......
lms/static/sass/multicourse/_course_about.scss
...@@ -295,7 +295,7 @@ ...@@ -295,7 +295,7 @@
} }
.details { .details {
float: flip(left, right); @include float(left);
margin-right: flex-gutter(); margin-right: flex-gutter();
width: flex-grid(8); width: flex-grid(8);
font: normal 1em/1.6em $serif; font: normal 1em/1.6em $serif;
...@@ -384,7 +384,7 @@ ...@@ -384,7 +384,7 @@
.course-sidebar { .course-sidebar {
@include box-sizing(border-box); @include box-sizing(border-box);
float: flip(left, right); @include float(left);
width: flex-grid(4); width: flex-grid(4);
> section { > section {
......
lms/static/sass/multicourse/_courses.scss
...@@ -42,10 +42,10 @@ ...@@ -42,10 +42,10 @@
.logo { .logo {
display: inline-block; display: inline-block;
#{$border-right}: 1px solid $light-gray; @include border-right(1px solid $light-gray);
height: 80px; height: 80px;
#{$margin-right}: 30px; @include margin-right(30px);
#{$padding-right}: 30px; @include padding-right(30px);
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
.profile-sidebar { .profile-sidebar {
background: transparent; background: transparent;
float: flip(left, right); @include float(left);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
width: flex-grid(3); width: flex-grid(3);
background: transparent; background: transparent;
box-shadow: 0 0 1px $shadow-l1; box-shadow: 0 0 1px $shadow-l1;
...@@ -279,7 +279,7 @@ ...@@ -279,7 +279,7 @@
// course listings // course listings
.my-courses { .my-courses {
float: flip(left, right); @include float(left);
margin: 0px; margin: 0px;
width: flex-grid(9); width: flex-grid(9);
...@@ -356,7 +356,7 @@ ...@@ -356,7 +356,7 @@
@include transition(all 0.15s linear 0s); @include transition(all 0.15s linear 0s);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
float: flip(left, right); @include float(left);
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
width: 200px; width: 200px;
...@@ -375,7 +375,7 @@ ...@@ -375,7 +375,7 @@
.info { .info {
@include clearfix; @include clearfix;
padding: flip(0 10px 0 230px, 0 230px 0 10px); @include padding(0, 10px, 0, 230px);
> hgroup { > hgroup {
padding: 0; padding: 0;
...@@ -394,7 +394,7 @@ ...@@ -394,7 +394,7 @@
.date-block { .date-block {
position: absolute; position: absolute;
top: 0; top: 0;
#{$right}: 0; @include right(0);
font-family: $sans-serif; font-family: $sans-serif;
font-size: 13px; font-size: 13px;
font-style: italic; font-style: italic;
......
lms/static/sass/multicourse/_error-pages.scss
section.outside-app { section.outside-app {
@extend .container; @extend .container;
text-align: flip(left, right); @include text-align(left);
padding: 80px 0; padding: 80px 0;
h1 { h1 {
@extend h2; @extend h2;
margin-bottom: 40px; margin-bottom: 40px;
} }
p { p {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
......
lms/static/sass/shared/_course_object.scss
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
.university-column { .university-column {
width: flex-grid(4); width: flex-grid(4);
#{$margin-right}t: flex-gutter(); @include margin-right(flex-gutter());
float: left; float: left;
&:nth-child(3n+3) { &:nth-child(3n+3) {
#{$margin-right}: 0; @include margin-right(0);
} }
} }
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
.courses-listing-item { .courses-listing-item {
width: flex-grid(4); width: flex-grid(4);
#{$margin-right}: flex-gutter(); @include margin-right(flex-gutter());
float: flip(left, right); @include float(left);
&:nth-child(3n+3) { &:nth-child(3n+3) {
#{$margin-right}: 0; @include margin-right(0);
} }
} }
} }
......
lms/static/sass/shared/_header.scss
...@@ -17,8 +17,8 @@ header.global { ...@@ -17,8 +17,8 @@ header.global {
} }
h1.logo { h1.logo {
float: flip(left, right); @include float(left);
margin: flip(-2px 39px 0 0, -2px 0 0 39px); @include margin(-2px, 39px, 0, 0);
position: relative; position: relative;
a { a {
...@@ -27,11 +27,11 @@ header.global { ...@@ -27,11 +27,11 @@ header.global {
} }
.left { .left {
float: flip(left, right); @include float(left);
} }
.guest { .guest {
float: flip(right, left); @include float(right);
} }
> li { > li {
...@@ -104,7 +104,7 @@ header.global { ...@@ -104,7 +104,7 @@ header.global {
} }
.user { .user {
float: flip(right,left); @include float(right);
margin-top: 4px; margin-top: 4px;
> .primary { > .primary {
...@@ -194,7 +194,7 @@ header.global { ...@@ -194,7 +194,7 @@ header.global {
height: 0px; height: 0px;
position: absolute; position: absolute;
@include transform(rotate(-45deg)); @include transform(rotate(-45deg));
#{$right}: 12px; @include right(12px);
top: -6px; top: -6px;
width: 0px; width: 0px;
} }
...@@ -236,7 +236,7 @@ header.global { ...@@ -236,7 +236,7 @@ header.global {
.nav-global { .nav-global {
margin-top: ($baseline/2); margin-top: ($baseline/2);
list-style: none; list-style: none;
float: left; @include float(left);
li, li,
div { div {
...@@ -279,7 +279,7 @@ header.global { ...@@ -279,7 +279,7 @@ header.global {
} }
.nav-courseware { .nav-courseware {
float: $right; @include float(right);
margin-top: ($baseline/4); margin-top: ($baseline/4);
list-style: none; list-style: none;
......
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
...@@ -59,10 +59,17 @@ ...@@ -59,10 +59,17 @@
<link rel="icon" type="image/x-icon" href="${static.url(microsite.get_value('favicon_path', settings.FAVICON_PATH))}" /> <link rel="icon" type="image/x-icon" href="${static.url(microsite.get_value('favicon_path', settings.FAVICON_PATH))}" />
<%static:css group='style-vendor'/> % if get_language_bidi():
<%static:css group='style-app'/> <%static:css group='style-vendor'/>
<%static:css group='style-app-extend1'/> <%static:css group='style-app-rtl'/>
<%static:css group='style-app-extend2'/> <%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: % if disable_courseware_js:
<%static:js group='base_vendor'/> <%static:js group='base_vendor'/>
......
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