Skip to content

E
edx-platform
Commit 94efb379 by Omar Al-Ithawi
Options

Major RTL refactor for the group configuration in Studio

parent 70e13407
Showing with 47 additions and 40 deletions
cms/static/sass/views/_group-configuration.scss
......@@ -4,12 +4,12 @@
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
@include float(left);
}
.content-primary {
@include margin-right(flex-gutter());
width: flex-grid(9, 12);
margin-right: flex-gutter();
.notice-moduledisabled {
@extend %ui-well;
......@@ -59,12 +59,12 @@
@extend %cont-truncated;
@extend %t-title5;
@extend %t-strong;
margin-right: ($baseline*14);
@include margin-right($baseline*14);
color: $black;
.toggle {
@include padding-left($baseline);
display: inline-block;
padding-left: $baseline;
color: $black;
&:hover, &:focus {
......@@ -74,10 +74,17 @@
.ui-toggle-expansion {
@include transition(rotate .15s ease-in-out .25s);
@extend %t-action1;
@include margin-left(-$baseline);
display: inline-block;
width: ($baseline*0.75);
vertical-align: baseline;
margin-left: -$baseline;
&.fa-caret-right:before {
@include rtl {
// Flip to fa-caret-left on RTL
content: "\f0d9";
}
}
}
&.is-selectable {
......@@ -97,18 +104,18 @@
.collection-info {
@extend %t-copy-sub1;
@include margin-left($baseline);
color: $gray-l1;
margin-left: $baseline;
&.group-configuration-info-inline {
@include margin($baseline/4, 0, $baseline/2, $baseline);
display: table;
width: 70%;
margin: ($baseline/4) 0 ($baseline/2) $baseline;
li {
@include box-sizing(border-box);
@include margin-right(1%);
display: table-cell;
margin-right: 1%;
&.group-configuration-usage-count {
font-style: italic;
......@@ -123,14 +130,14 @@
}
&.collection-info-inline {
@include margin($baseline/4, 0, $baseline/2, $baseline);
display: table;
width: 70%;
margin: ($baseline/4) 0 ($baseline/2) $baseline;
li {
@include box-sizing(border-box);
@include margin-right(1%);
display: table-cell;
margin-right: 1%;
padding: ($baseline/4) 0;
&.collection-usage-count {
......@@ -150,7 +157,7 @@
}
.collection-items {
margin-left: $baseline;
@include margin-left($baseline);
margin-bottom: ($baseline*0.75);
.item {
......@@ -164,12 +171,12 @@
}
.name {
@include margin-right(5%);
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
width: 75%;
margin-right: 5%;
}
}
}
......@@ -178,15 +185,15 @@
.actions {
@include transition(opacity .15s .25s ease-in-out);
@include right($baseline);
position: absolute;
top: $baseline;
right: $baseline;
opacity: 0.0;
.action {
@include margin-right($baseline/4);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
.edit {
@extend %ui-btn-non-blue;
......@@ -206,8 +213,8 @@
.collection-references {
@extend %t-copy-sub1;
@include padding($baseline, $baseline*1.5, $baseline, $baseline*2.5);
box-shadow: 0 2px 2px 0 $shadow inset;
padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5);
color: $gray-l1;
.usage {
......@@ -221,12 +228,12 @@
}
.fa-warning {
margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5);
@include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
color: $orange;
}
.fa-times-circle {
margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5);
@include margin($baseline/4, $baseline/2, 0, $baseline*1.5);
color: $red-l2;
}
}
......@@ -235,14 +242,14 @@
.usage-validation {
@extend %t-copy-sub1;
@include padding($baseline, $baseline*1.5, $baseline, $baseline*1.5);
background-color: $gray-l6;
margin-top: $baseline;
padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5);
.fa-warning {
margin: ($baseline/2) $baseline 0 0;
@include margin($baseline/2, $baseline, 0, 0);
@include float(left);
color: $orange;
float: left;
}
.collection-validation-text {
......@@ -283,7 +290,7 @@
}
.field {
margin: 0 0 ($baseline*0.75) 0;
@include margin(0, 0, $baseline*0.75, 0);
&:last-child {
@extend %wipe-last-child;
......@@ -296,7 +303,7 @@
}
label:after {
margin-left: ($baseline/4);
@include margin-left($baseline/4);
content: "*";
}
}
......@@ -312,7 +319,7 @@
label {
@extend %t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
@include margin(0, 0, $baseline/4, 0);
&.is-focused {
color: $blue;
......@@ -372,7 +379,7 @@
@extend %t-strong;
&:after {
margin-left: ($baseline/4);
@include margin-left($baseline/4);
content: "*";
}
}
......@@ -387,16 +394,16 @@
}
.group-configuration-id {
@include text-align(right);
display: inline-block;
width: 45%;
text-align: right;
vertical-align: top;
color: $gray-l1;
.group-configuration-value {
@extend %t-strong;
@include margin-left($baseline*0.5);
white-space: nowrap;
margin-left: ($baseline*0.5);
}
}
}
......@@ -409,10 +416,10 @@
background: $gray-l6;
.action {
margin-right: ($baseline/4);
@include margin-right($baseline/4);
&:last-child {
margin-right: 0;
@include margin-right(0);
}
}
......@@ -428,7 +435,7 @@
}
.wrapper-delete-button {
float: right;
@include float(right);
padding: ($baseline/4) ($baseline/2);
.is-disabled {
......@@ -439,7 +446,7 @@
.copy {
@extend %t-copy-sub2;
margin: ($baseline) 0 ($baseline/2) 0;
@include margin($baseline, 0, $baseline/2, 0);
color: $gray;
strong {
......@@ -452,9 +459,9 @@
@extend %ui-btn-flat-outline;
@extend %t-action2;
@extend %t-strong;
@include margin($baseline*1.5, 0, 0, 0);
display: block;
width: 100%;
margin: ($baseline*1.5) 0 0 0;
padding: ($baseline/2);
}
}
......@@ -472,9 +479,9 @@
}
.icon {
@include margin-right($baseline/2);
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/2);
}
}
......@@ -495,8 +502,8 @@
.group-configuration-info {
@extend %t-copy-sub1;
@include margin-left($baseline);
color: $gray-l1;
margin-left: $baseline;
.group-configuration-label {
text-transform: uppercase;
......@@ -509,7 +516,7 @@
}
.groups {
margin-left: $baseline;
@include margin-left($baseline);
margin-bottom: ($baseline*0.75);
.group {
......@@ -523,20 +530,20 @@
}
.group-name {
@include margin-right(5%);
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
width: 75%;
margin-right: 5%;
}
.group-allocation {
@include text-align(right);
display: inline-block;
vertical-align: middle;
width: 20%;
color: $gray-l1;
text-align: right;
}
}
}
......@@ -545,7 +552,7 @@
.group-configuration-edit {
.add-collection-name label {
padding-right: 5%;
@include padding-right(5%);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
......@@ -553,14 +560,14 @@
.field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
padding: ($baseline/4) 0 0 0;
@include margin(0, 0, $baseline/2, 0);
@include padding($baseline/4, 0, 0, 0);
.group-allocation,
.field {
@include margin(0, 3%, 0, 0);
display: inline-block;
vertical-align: middle;
margin: 0 3% 0 0;
}
.group-allocation {
......
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