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