switching RTL on the fly - added bi-app for sass compiling
This commit is contained in:
Frances Botsford
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
64
cms/static/sass/style-app-extend1-rtl.scss
Normal file
64
cms/static/sass/style-app-extend1-rtl.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
|
||||
|
||||
// libs and resets *do not edit*
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
@import 'config';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic img/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/xblocks'; // studio rendering chrome for xblocks
|
||||
@import 'elements/modules'; // content module patterns
|
||||
@import 'elements/layout'; // various standard layouts
|
||||
|
||||
// base - specific views
|
||||
@import 'views/account';
|
||||
@import 'views/assets';
|
||||
@import 'views/updates';
|
||||
@import 'views/dashboard';
|
||||
@import 'views/export';
|
||||
@import 'views/index';
|
||||
@import 'views/course-create';
|
||||
@import 'views/import';
|
||||
@import 'views/outline';
|
||||
@import 'views/settings';
|
||||
@import 'views/static-pages';
|
||||
@import 'views/unit';
|
||||
@import 'views/container';
|
||||
@import 'views/users';
|
||||
@import 'views/checklists';
|
||||
@import 'views/textbooks';
|
||||
@import 'views/export-git';
|
||||
@import 'views/group-configuration';
|
||||
|
||||
// base - contexts
|
||||
@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
|
||||
|
||||
// temp - inherited
|
||||
@import 'assets/content-types';
|
||||
|
||||
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
|
||||
@import 'shame'; // used for any bad-form/orphaned scss
|
||||
@@ -1,6 +1,8 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
|
||||
|
||||
// libs and resets *do not edit*
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
|
||||
|
||||
45
cms/static/sass/style-app-rtl.scss
Normal file
45
cms/static/sass/style-app-rtl.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
|
||||
|
||||
// libs and resets *do not edit*
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
|
||||
// VENDOR + REBASE *referenced/used vendor presentation and reset*
|
||||
// ====================
|
||||
@import 'reset';
|
||||
|
||||
// BASE *default edX offerings*
|
||||
// ====================
|
||||
// base - utilities
|
||||
@import 'config';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'mixins-inherited';
|
||||
|
||||
// base - assets
|
||||
@import 'assets/fonts';
|
||||
@import 'assets/graphics'; // sprites, basic img/figure/svg styling
|
||||
@import 'assets/anims'; // animations
|
||||
|
||||
// base - starter
|
||||
@import 'base';
|
||||
|
||||
// base - elements
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/modules'; // content module patterns
|
||||
@import 'elements/navigation'; // all archetypes of navigation
|
||||
@import 'elements/layout'; // various standard layouts
|
||||
@import 'elements/forms';
|
||||
@import 'elements/header';
|
||||
@import 'elements/footer';
|
||||
@import 'elements/sock';
|
||||
@import 'elements/tender-widget';
|
||||
@import 'elements/system-feedback'; // alerts, notifications, states
|
||||
@import 'elements/system-help'; // help UI
|
||||
@import 'elements/modal'; // interstitial UI, dialogs, modal windows
|
||||
@import 'elements/vendor'; // overrides to vendor-provided styling
|
||||
@import 'elements/modal-window';
|
||||
@@ -1,6 +1,8 @@
|
||||
// studio - css architecture
|
||||
// ====================
|
||||
|
||||
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
|
||||
|
||||
// libs and resets *do not edit*
|
||||
@import 'bourbon/bourbon'; // lib - bourbon
|
||||
|
||||
|
||||
11
cms/static/sass/vendor/bi-app/_bi-app-ltr.scss
vendored
Executable file
11
cms/static/sass/vendor/bi-app/_bi-app-ltr.scss
vendored
Executable file
@@ -0,0 +1,11 @@
|
||||
// ------------------------------------------
|
||||
// left to right module
|
||||
// authors:
|
||||
// twitter.com/anasnakawa
|
||||
// twitter.com/victorzamfir
|
||||
// licensed under the MIT license
|
||||
// http://www.opensource.org/licenses/mit-license.php
|
||||
// ------------------------------------------
|
||||
|
||||
@import 'variables-ltr';
|
||||
@import 'mixins';
|
||||
11
cms/static/sass/vendor/bi-app/_bi-app-rtl.scss
vendored
Executable file
11
cms/static/sass/vendor/bi-app/_bi-app-rtl.scss
vendored
Executable file
@@ -0,0 +1,11 @@
|
||||
// ------------------------------------------
|
||||
// right to left module
|
||||
// authors:
|
||||
// twitter.com/anasnakawa
|
||||
// twitter.com/victorzamfir
|
||||
// licensed under the MIT license
|
||||
// http://www.opensource.org/licenses/mit-license.php
|
||||
// ------------------------------------------
|
||||
|
||||
@import 'variables-rtl';
|
||||
@import 'mixins';
|
||||
294
cms/static/sass/vendor/bi-app/_mixins.scss
vendored
Executable file
294
cms/static/sass/vendor/bi-app/_mixins.scss
vendored
Executable file
@@ -0,0 +1,294 @@
|
||||
// ------------------------------------------
|
||||
// bi app mixins
|
||||
// authors:
|
||||
// twitter.com/anasnakawa
|
||||
// twitter.com/victorzamfir
|
||||
// licensed under the MIT license
|
||||
// http://www.opensource.org/licenses/mit-license.php
|
||||
// ------------------------------------------
|
||||
|
||||
// ------------------------------------------
|
||||
// Table of contents
|
||||
// ------------------------------------------
|
||||
// padding
|
||||
// margin
|
||||
// float
|
||||
// text align
|
||||
// clear
|
||||
// left / right
|
||||
// border
|
||||
// - width
|
||||
// - style
|
||||
// - color
|
||||
// - generic
|
||||
// - radius
|
||||
// ltr / rtl contents
|
||||
// ------------------------------------------
|
||||
|
||||
// generic mixin for properties with values
|
||||
// (top right bottom left)
|
||||
// ------------------------------------------
|
||||
@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
|
||||
@if $bi-app-direction == ltr {
|
||||
#{$property}: $top $right $bottom $left;
|
||||
} @else {
|
||||
#{$property}: $top $left $bottom $right;
|
||||
}
|
||||
}
|
||||
|
||||
// padding
|
||||
// ------------------------------------------
|
||||
@mixin padding-left($distance) {
|
||||
padding-#{$bi-app-left}: $distance;
|
||||
}
|
||||
|
||||
@mixin padding-right($distance) {
|
||||
padding-#{$bi-app-right}: $distance;
|
||||
}
|
||||
|
||||
@mixin padding($top, $right, $bottom, $left) {
|
||||
@include bi-app-compact(padding, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
// margin
|
||||
// ------------------------------------------
|
||||
@mixin margin-left($distance) {
|
||||
margin-#{$bi-app-left}: $distance;
|
||||
}
|
||||
|
||||
@mixin margin-right($distance) {
|
||||
margin-#{$bi-app-right}: $distance;
|
||||
}
|
||||
|
||||
@mixin margin($top, $right, $bottom, $left) {
|
||||
@include bi-app-compact(margin, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
// float
|
||||
// ------------------------------------------
|
||||
@mixin bi-app-float-left {
|
||||
float: $bi-app-left;
|
||||
}
|
||||
|
||||
@mixin bi-app-float-right {
|
||||
float: $bi-app-right;
|
||||
}
|
||||
|
||||
@mixin float($direction) {
|
||||
@if $direction == left {
|
||||
@include bi-app-float-left;
|
||||
} @else if $direction == right {
|
||||
@include bi-app-float-right;
|
||||
} @else {
|
||||
float: $direction;
|
||||
}
|
||||
}
|
||||
|
||||
// text align
|
||||
// ------------------------------------------
|
||||
@mixin bi-app-text-align-left {
|
||||
text-align: $bi-app-left;
|
||||
}
|
||||
|
||||
@mixin bi-app-text-align-right {
|
||||
text-align: $bi-app-right;
|
||||
}
|
||||
|
||||
@mixin text-align($direction) {
|
||||
@if $direction == left {
|
||||
@include bi-app-text-align-left;
|
||||
} @else if $direction == right {
|
||||
@include bi-app-text-align-right;
|
||||
} @else {
|
||||
text-align: $direction;
|
||||
}
|
||||
}
|
||||
|
||||
// clear
|
||||
// ------------------------------------------
|
||||
@mixin bi-app-clear-left {
|
||||
clear: $bi-app-left;
|
||||
}
|
||||
|
||||
@mixin bi-app-clear-right {
|
||||
clear: $bi-app-right;
|
||||
}
|
||||
|
||||
@mixin clear($direction) {
|
||||
@if $direction == left {
|
||||
@include bi-app-clear-left;
|
||||
} @else if $direction == right {
|
||||
@include bi-app-clear-right;
|
||||
} @else {
|
||||
clear: $direction;
|
||||
}
|
||||
}
|
||||
|
||||
// left / right
|
||||
// ------------------------------------------
|
||||
@mixin left($distance) {
|
||||
@if $bi-app-direction == ltr {
|
||||
left: $distance;
|
||||
} @else if $bi-app-direction == rtl {
|
||||
right: $distance;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin right($distance) {
|
||||
@if $bi-app-direction == ltr {
|
||||
right: $distance;
|
||||
} @else if $bi-app-direction == rtl {
|
||||
left: $distance;
|
||||
}
|
||||
}
|
||||
|
||||
// border
|
||||
// ------------------------------------------
|
||||
|
||||
// width
|
||||
@mixin border-left-width($width) {
|
||||
border-#{$bi-app-left}-width: $width;
|
||||
}
|
||||
|
||||
@mixin border-right-width($width) {
|
||||
border-#{$bi-app-right}-width: $width;
|
||||
}
|
||||
|
||||
@mixin border-width($top, $right, $bottom, $left) {
|
||||
@include bi-app-compact(border-width, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
// style
|
||||
@mixin border-left-style($style) {
|
||||
border-#{$bi-app-left}-style: $style;
|
||||
}
|
||||
|
||||
@mixin border-right-style($style) {
|
||||
border-#{$bi-app-right}-style: $style;
|
||||
}
|
||||
|
||||
@mixin border-style($top, $right, $bottom, $left) {
|
||||
@include bi-app-compact(border-style, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
// color
|
||||
@mixin border-left-color($color) {
|
||||
border-#{$bi-app-left}-color: $color;
|
||||
}
|
||||
|
||||
@mixin border-right-color($color) {
|
||||
border-#{$bi-app-right}-color: $color;
|
||||
}
|
||||
|
||||
@mixin border-color($top, $right, $bottom, $left) {
|
||||
@include bi-app-compact(border-color, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
// generic
|
||||
@mixin border-left($border-style) {
|
||||
border-#{$bi-app-left}: $border-style;
|
||||
}
|
||||
|
||||
@mixin border-right($border-style) {
|
||||
border-#{$bi-app-right}: $border-style;
|
||||
}
|
||||
|
||||
// radius
|
||||
@mixin border-top-left-radius($radius) {
|
||||
-webkit-border-top-#{$bi-app-left}-radius: $radius;
|
||||
-moz-border-top#{$bi-app-left}-radius: $radius;
|
||||
border-top-#{$bi-app-left}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-top-right-radius($radius) {
|
||||
-webkit-border-top-#{$bi-app-right}-radius: $radius;
|
||||
-moz-border-top#{$bi-app-right}-radius: $radius;
|
||||
border-top-#{$bi-app-right}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
-webkit-border-bottom-#{$bi-app-left}-radius: $radius;
|
||||
-moz-border-bottom#{$bi-app-left}-radius: $radius;
|
||||
border-bottom-#{$bi-app-left}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
-webkit-border-bottom-#{$bi-app-right}-radius: $radius;
|
||||
-moz-border-bottom#{$bi-app-right}-radius: $radius;
|
||||
border-bottom-#{$bi-app-right}-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius);
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-top-right-radius($radius);
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@include border-bottom-left-radius($radius);
|
||||
@include border-bottom-right-radius($radius);
|
||||
}
|
||||
|
||||
@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
|
||||
@if $topRight != null {
|
||||
@include border-top-left-radius($topLeft);
|
||||
@include border-top-right-radius($topRight);
|
||||
@include border-bottom-right-radius($bottomRight);
|
||||
@include border-bottom-left-radius($bottomLeft);
|
||||
} @else {
|
||||
-webkit-border-radius: $topLeft;
|
||||
-moz-border-radius: $topLeft;
|
||||
-ms-border-radius: $topLeft;
|
||||
-o-border-radius: $topLeft;
|
||||
border-radius: $topLeft;
|
||||
}
|
||||
}
|
||||
|
||||
// Returns "en" or "ar", useful for image suffixes.
|
||||
// Usage: background-image: url(/img/header-#{lang()}.png);
|
||||
@function lang() {
|
||||
@if $bi-app-direction == ltr {
|
||||
@return 'en';
|
||||
} @else {
|
||||
@return 'ar';
|
||||
}
|
||||
}
|
||||
|
||||
// Support for "direction" declaration (renders ltr/rtl).
|
||||
// Useful for form elements as they swap the text-indent property and align the text accordingly.
|
||||
@mixin direction {
|
||||
direction: $bi-app-direction;
|
||||
}
|
||||
|
||||
// Inverts a percentage value. Example: 97% becames 3%.
|
||||
// Useful for background-position.
|
||||
@function bi-app-invert-percentage($percentage) {
|
||||
@if $bi-app-direction == rtl {
|
||||
@return 100% - $percentage;
|
||||
} @else {
|
||||
@return $percentage;
|
||||
}
|
||||
}
|
||||
|
||||
// ltr / rtl contents
|
||||
// ------------------------------------------
|
||||
@mixin ltr {
|
||||
@if $bi-app-direction == ltr {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl {
|
||||
@if $bi-app-direction == rtl {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
15
cms/static/sass/vendor/bi-app/_variables-ltr.scss
vendored
Executable file
15
cms/static/sass/vendor/bi-app/_variables-ltr.scss
vendored
Executable file
@@ -0,0 +1,15 @@
|
||||
// ------------------------------------------
|
||||
// left to right variables to be used by bi-app mixins
|
||||
// authors:
|
||||
// twitter.com/anasnakawa
|
||||
// twitter.com/victorzamfir
|
||||
// licensed under the MIT license
|
||||
// http://www.opensource.org/licenses/mit-license.php
|
||||
// ------------------------------------------
|
||||
|
||||
// namespacing variables with bi-app to
|
||||
// avoid conflicting with other global variables
|
||||
$bi-app-left : left;
|
||||
$bi-app-right : right;
|
||||
$bi-app-direction : ltr;
|
||||
$bi-app-invert-direction: rtl;
|
||||
15
cms/static/sass/vendor/bi-app/_variables-rtl.scss
vendored
Executable file
15
cms/static/sass/vendor/bi-app/_variables-rtl.scss
vendored
Executable file
@@ -0,0 +1,15 @@
|
||||
// ------------------------------------------
|
||||
// right to left variables to be used by bi-app mixins
|
||||
// authors:
|
||||
// twitter.com/anasnakawa
|
||||
// twitter.com/victorzamfir
|
||||
// licensed under the MIT license
|
||||
// http://www.opensource.org/licenses/mit-license.php
|
||||
// ------------------------------------------
|
||||
|
||||
// namespacing variables with bi-app to
|
||||
// avoid conflicting with other global variables
|
||||
$bi-app-left : right;
|
||||
$bi-app-right : left;
|
||||
$bi-app-direction : rtl;
|
||||
$bi-app-invert-direction: ltr;
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user