Skip to content

E
edx-platform
Commit 9b287960 by Omar Al-Ithawi Committed by Frances Botsford
Options

LMS RTL fixes

parent e255ac1f
Showing with 108 additions and 62 deletions
common/lib/xmodule/xmodule/css/capa/display.scss
......@@ -61,7 +61,7 @@ div.problem {
width: 100px;
label {
float: left;
float: flip(left, right);
clear: both;
margin-bottom: 5px;
......@@ -633,7 +633,8 @@ div.problem {
// padding: 8px 12px;
// margin-top: 10px;
display: inline-block;
margin: 8px 0 0 $baseline/2;
margin-top: 8px;
#{$margin-left}: $baseline/2;
color: #666;
font-style: italic;
-webkit-font-smoothing: antialiased;
......
common/lib/xmodule/xmodule/css/sequence/display.scss
......@@ -293,23 +293,28 @@ nav.sequence-nav {
}
}
$prev-icon: url('../images/sequence-nav/previous-icon.png');
$next-icon: url('../images/sequence-nav/next-icon.png');
&.prev {
left: -10px;
border-radius: 35px 0 0 35px;
left: flip(-10px, auto);
right: flip(auto, -10px);
border-radius: flip(35px 0 0 35px, 0 35px 35px 0);
a {
background-image: url('../images/sequence-nav/previous-icon.png');
background-image: flip($prev-icon, $next-icon);
background-position: center 15px;
}
}
&.next {
right: -10px;
border-radius: 0 35px 35px 0;
left: flip(auto, -10px);
right: flip(-10px, auto);
border-radius: flip(0 35px 35px 0, 35px 0 0 35px);
a {
margin-left: 30px;
background-image: url('../images/sequence-nav/next-icon.png');
#{$margin-left}: 30px;
background-image: flip($next-icon, $prev-icon);
background-position: center 15px;
}
}
......@@ -334,7 +339,7 @@ nav.sequence-bottom {
display: inline-block;
li {
float: left;
float: flip(left, right);
width: 50px;
height: 44px;
border: 1px solid #ccc;
......@@ -368,21 +373,24 @@ nav.sequence-bottom {
*/ }
}
$prev-icon: url('../images/sequence-nav/previous-icon.png');
$next-icon: url('../images/sequence-nav/next-icon.png');
&.prev {
border-radius: 35px 0 0 35px;
border-radius: flip(35px 0 0 35px, 0 35px 35px 0);
a {
background-image: url('../images/sequence-nav/previous-icon.png');
background-image: flip($prev-icon, $next-icon);
background-position: center 15px;
}
}
&.next {
border-radius: 0 35px 35px 0;
border-left: none;
border-radius: flip(0 35px 35px 0, 35px 0 0 35px);
#{$border-left}: none;
a {
background-image: url('../images/sequence-nav/next-icon.png');
background-image: flip($next-icon, $prev-icon);
background-position: center 15px;
}
}
......
lms/static/sass/base/_mixins.scss
......@@ -81,6 +81,10 @@ $right: right;
// ====================
// Cross-browsers transform
@mixin transform($transform-functions) {
@include prefixer(transform, $transform-functions, webkit moz ms o spec);
}
// extends - UI - used for page/view-level wrappers (for centering/grids)
%ui-wrapper {
......
lms/static/sass/course/courseware/_courseware.scss
......@@ -23,7 +23,7 @@ html.video-fullscreen{
.instructor-info-action {
@extend %t-copy-sub2;
float: right;
float: flip(right, left);
margin-left: ($baseline/2);
padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4);
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -47,7 +47,7 @@
a {
border-radius: 0;
box-shadow: none;
padding-left: 19px;
#{$padding-left}: 19px;
color: $link-color;
}
......@@ -61,9 +61,14 @@
}
span.ui-icon {
left: 0;
left: flip(0, auto);
right: flip(0, auto);
background-image: url("/static/images/ui-icons_222222_256x240.png");
opacity: 0.3;
&.ui-icon-triangle-1-e { // jQuery UI east arrow
background-position: flip(-32px -16px, -96px -16px); // flip(jQuery UI east arrow, jQuery UI west arrow)
}
}
}
}
......
lms/static/sass/course/instructor/_instructor_2.scss
......@@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 {
input[type="button"].add {
@include idashbutton($blue);
position: absolute;
right: $baseline;
#{$right}: $baseline;
}
}
......
lms/static/sass/discussion/_discussion.scss
......@@ -11,7 +11,8 @@ body.discussion {
}
.new-post-icon {
margin: 8px 7px 0 0;
margin-top: 8px;
#{$margin-right}: 7px;
font-size: 16px;
vertical-align: middle;
color: $white;
......@@ -241,7 +242,7 @@ body.discussion {
}
.discussion-column {
float: right;
float: flip(right, left);
@include box-sizing(border-box);
width: 68%;
max-width: 800px;
......@@ -368,7 +369,7 @@ body.discussion {
.notification-checkbox {
display: inline-block;
padding: $baseline/4 0 $baseline/2 0;
margin-right: $baseline/2;
#{$margin-right}: $baseline/2;
border-radius: 5px;
border: 1px solid gray;
......@@ -376,7 +377,7 @@ body.discussion {
display: inline-block;
text-align: center;
vertical-align: middle;
margin-left: $baseline/2;
#{$margin-left}: $baseline/2;
}
.icon {
......@@ -531,6 +532,13 @@ body.discussion {
border-radius: 3px 3px 0 0;
padding: $baseline;
background-color: $white;
.response-body {
ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
#{$padding-left}: 40px;
#{$padding-right}: 0;
}
}
}
.posted-by {
font-weight: 700;
......@@ -549,11 +557,15 @@ body.discussion {
padding: 0 18px;
width: 100%;
box-shadow: 0 1px 1px $shadow-l1;
text-align: left;
text-align: $left;
font-size: 13px;
.icon-reply:before {
content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward
}
span.add-response-btn-text {
padding-left: ($baseline/5);
#{$padding-left}: ($baseline/5);
}
}
}
......@@ -638,7 +650,7 @@ body.discussion {
.discussion-submit-post {
@include blue-button;
float: left;
float: $left;
}
.wmd-button {
......@@ -674,7 +686,11 @@ body.discussion {
padding-left: ($baseline*1.5);
width: 100%;
box-shadow: 0 1px 1px $shadow-l1;
text-align: left;
text-align: $left;
.icon-reply:before {
content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward
}
&:hover, &:focus {
@include linear-gradient(top, $white 35%, #ddd);
......@@ -895,9 +911,10 @@ body.discussion {
float: left;
width: 16px;
height: 17px;
margin: 8px 7px 0 0;
margin-top: 8px;
#{$margin-right}: 7px;
font-size: 16px;
padding-right: $baseline/2;
#{$padding-right}: $baseline/2;
vertical-align: middle;
color: $white;
}
......
lms/static/sass/discussion/_mixins.scss
......@@ -89,7 +89,7 @@
@mixin discussion-wmd-preview-label {
padding-top: 3px;
padding-left: 5px;
#{$padding-left}: 5px;
width: 100%;
color: #bbb;
text-transform: uppercase;
......@@ -100,6 +100,11 @@
padding: 10px 20px;
width: 100%;
color: #333;
ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
#{$padding-left}: 40px;
#{$padding-right}: 0;
}
}
@-webkit-keyframes fadeIn {
......@@ -130,11 +135,11 @@
color: $color;
.icon {
margin-right: ($baseline/5);
#{$margin-right}: ($baseline/5);
}
&:last-child {
margin-right: 0;
#{$margin-right}: 0;
}
&.is-hidden {
......
lms/static/sass/discussion/elements/_actions.scss
......@@ -8,7 +8,7 @@
.response-actions-list,
.comment-actions-list {
@extend %ui-no-list;
text-align: right;
text-align: $right;
.actions-item {
@include box-sizing(border-box);
......@@ -58,7 +58,7 @@
&:after,
&:before {
bottom: 100%;
right: 3px;
#{$right}: 3px;
border: solid transparent;
content: " ";
height: 0;
......@@ -71,7 +71,7 @@
border-color: $transparent;
border-bottom-color: $white;
border-width: 6px;
margin-right: 1px;
#{$margin-right}: 1px;
}
&:before {
......@@ -254,7 +254,7 @@
display: block;
padding: ($baseline/10) 0;
white-space: nowrap;
text-align: right;
text-align: $right;
color: $gray-l1;
&:hover, &:focus {
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -3,7 +3,7 @@
.forum-nav {
@include box-sizing(border-box);
float: left;
float: flip(left, right);
position: relative;
width: 31%;
border: 1px solid #aaa;
......@@ -34,7 +34,7 @@
.icon {
@include font-size(14);
margin-right: ($baseline/4);
#{$margin-right}: ($baseline/4);
}
}
......@@ -43,7 +43,7 @@
}
.forum-nav-browse-drop-arrow {
margin-left: ($baseline/4);
#{$margin-left}: ($baseline/4);
}
.forum-nav-search {
......@@ -60,7 +60,7 @@
position: absolute;
margin-top: -6px;
top: 50%;
right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
#{$right}: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
}
.forum-nav-search-input {
......@@ -115,7 +115,7 @@
}
.forum-nav-browse-title .icon {
margin-right: ($baseline/2);
#{$margin-right}: ($baseline/2);
}
// -------------------
......@@ -135,14 +135,14 @@
@include box-sizing(border-box);
display: inline-block;
width: 50%;
text-align: left;
text-align: $left;
}
.forum-nav-filter-cohort, .forum-nav-sort {
@include box-sizing(border-box);
display: inline-block;
width: 50%;
text-align: right;
text-align: $right;
}
%forum-nav-select {
......@@ -200,6 +200,10 @@
.icon {
@include font-size(14);
&:before {
@include transform(scale(flip(1, -1), 1)); // RTL for font awesome question mark
}
}
.icon-comments {
......@@ -223,7 +227,7 @@
.forum-nav-thread-wrapper-2 {
@extend %forum-nav-thread-wrapper;
width: 13%;
text-align: right;
text-align: $right;
}
.forum-nav-thread-title {
......@@ -251,7 +255,7 @@
@extend %forum-nav-thread-wrapper-2-content;
@extend %t-weight4;
position: relative;
margin-left: ($baseline/4);
#{$margin-left}: ($baseline/4);
margin-bottom: ($baseline/4); // Because tail is position: absolute
border-radius: 2px;
padding: ($baseline/10) ($baseline/5);
......@@ -264,12 +268,13 @@
display: block;
position: absolute;
bottom: (-$baseline/4);
right: ($baseline/4);
#{$right}: ($baseline/4);
width: 0;
height: 0;
border-style: solid;
border-width: 0 ($baseline/4) ($baseline/4) 0;
border-color: transparent $gray-l3 transparent transparent;
border-width: flip(0 ($baseline/4) ($baseline/4) 0, ($baseline/4) ($baseline/4) 0 0);
border-color: flip(transparent $gray-l3 transparent transparent, $gray-l3 transparent transparent transparent);
}
&.is-unread {
......
lms/static/sass/discussion/views/_thread.scss
......@@ -17,7 +17,7 @@ body.discussion, .discussion-module {
.post-header-actions {
display: inline-block;
float: right;
float: $right;
vertical-align: middle;
width: flex-grid(3,12);
}
......@@ -44,7 +44,7 @@ body.discussion, .discussion-module {
.response-header-actions {
width: flex-grid(3,12);
float: right;
float: $right;
}
}
......
lms/static/sass/multicourse/_account.scss
......@@ -125,14 +125,14 @@
@extend %heading-2;
margin-bottom: $baseline;
padding-bottom: $baseline;
text-align: left;
text-align: flip(left, right);
}
// CASE: marketing/imageery-based headings
.title {
position: absolute;
top: ($baseline*2.5);
left:($baseline*1.5);
#{$left}:($baseline*1.5);
.title-super, .title-sub {
@extend %t-weight1;
......@@ -149,7 +149,7 @@
.title-sub {
@include font-size(20);
margin-left: ($baseline*2);
#{$margin-left}: ($baseline*2);
text-transform: lowercase;
color: $header-graphic-sub-color;
}
......@@ -197,14 +197,14 @@
}
.content {
margin-right: ($baseline*2);
#{$margin-right}: ($baseline*2);
width: 600px;
float: left;
float: flip(left, right);
}
aside {
width: 280px;
float: left;
float: flip(left, right);
p, ol, ul {
font-size: 14px !important;
......@@ -274,9 +274,10 @@
.field {
display: block;
float: left;
float: flip(left, right);
border-bottom: none;
margin: 0 ($baseline*1.5) 0 0;
margin: 0;
#{$margin-right}: ($baseline*1.5);
padding-bottom: 0;
input, textarea {
......@@ -336,7 +337,7 @@
.tip {
position: absolute;
top: 0;
right: 0;
#{$right}: 0;
}
}
......@@ -378,7 +379,7 @@
input[type="checkbox"] {
display: inline-block;
width: auto;
margin-right: ($baseline/4);
#{$margin-right}: ($baseline/4);
}
label {
......@@ -702,7 +703,7 @@
h2 {
@extend %heading-2;
text-align: left;
text-align: flip(left, right);
}
}
......
lms/static/sass/multicourse/_error-pages.scss
section.outside-app {
@extend .container;
text-align: left;
text-align: flip(left, right);
padding: 80px 0;
h1 {
......
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