LMS RTL fixes
This commit is contained in:
committed by
Frances Botsford
parent
e255ac1f29
commit
9b287960e7
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 {
|
||||
input[type="button"].add {
|
||||
@include idashbutton($blue);
|
||||
position: absolute;
|
||||
right: $baseline;
|
||||
#{$right}: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
section.outside-app {
|
||||
@extend .container;
|
||||
text-align: left;
|
||||
text-align: flip(left, right);
|
||||
padding: 80px 0;
|
||||
|
||||
h1 {
|
||||
|
||||
Reference in New Issue
Block a user