Skip to content

E
edx-ora2
Commit 0301feed by Brian Talbot
Options

removing Sass spacing-* variables for clarity's sake

parent 74dfcf5c
Showing with 64 additions and 71 deletions
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -20,19 +20,19 @@ ...@@ -20,19 +20,19 @@
%ui-section { %ui-section {
border: ($baseline-v/10) solid $color-decorative-tertiary; border: ($baseline-v/10) solid $color-decorative-tertiary;
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
} }
%ui-section-title { %ui-section-title {
@extend %hd-golf; @extend %hd-golf;
@extend %t-weight3; @extend %t-weight3;
padding: $spacing-charlie $spacing-bravo; padding: ($baseline-v/2) $baseline-v;
background: $color-decorative-tertiary; background: $color-decorative-tertiary;
color: $heading-secondary-color; color: $heading-secondary-color;
} }
%ui-section-content { %ui-section-content {
padding: $spacing-bravo; padding: $baseline-v;
} }
...@@ -42,18 +42,18 @@ ...@@ -42,18 +42,18 @@
// rubric question // rubric question
%ui-rubric-question { %ui-rubric-question {
@include clearfix(); @include clearfix();
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
@extend %wipe-last-child; @extend %wipe-last-child;
.question__title { .question__title {
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary; border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta; padding-bottom: ($baseline-v/4);
.ico { .ico {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: $spacing-delta; margin-right: ($baseline-v/4);
} }
} }
...@@ -71,9 +71,9 @@ ...@@ -71,9 +71,9 @@
@include row(); @include row();
@extend %trans-opacity; @extend %trans-opacity;
@extend %wipe-last-child; @extend %wipe-last-child;
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/20) solid $color-decorative-tertiary; border-bottom: ($baseline-v/20) solid $color-decorative-tertiary;
padding-bottom: $spacing-charlie; padding-bottom: ($baseline-v/2);
opacity: 0.75; opacity: 0.75;
&:hover { &:hover {
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
} }
.wrapper--input { .wrapper--input {
margin-bottom: $spacing-delta; margin-bottom: ($baseline-v/4);
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(6 of 6); @include span-columns(6 of 6);
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
} }
.answer__value { .answer__value {
margin-right: $spacing-charlie; margin-right: ($baseline-v/2);
// STATE: checked // STATE: checked
&:checked { &:checked {
...@@ -152,10 +152,10 @@ ...@@ -152,10 +152,10 @@
} }
.answer__tip { .answer__tip {
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
@extend %copy-epsilon; @extend %copy-epsilon;
margin-right: $spacing-bravo; margin-right: $baseline-v;
color: $copy-supplemental-color; color: $copy-supplemental-color;
@include media($bp-dm) { @include media($bp-dm) {
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
color: $copy-color; color: $copy-color;
@extend %copy-epsilon; @extend %copy-epsilon;
margin-right: $spacing-bravo; margin-right: $baseline-v;
color: $copy-supplemental-color; color: $copy-supplemental-color;
@include media($bp-dm) { @include media($bp-dm) {
...@@ -207,7 +207,7 @@ ...@@ -207,7 +207,7 @@
.label { .label {
@extend %copy-epsilon; // FIX: need to reset base label style @extend %copy-epsilon; // FIX: need to reset base label style
display: inline-block; // FIX: need to reset base label style display: inline-block; // FIX: need to reset base label style
margin-left: $spacing-delta; margin-left: ($baseline-v/4);
color: $copy-supplemental-color; color: $copy-supplemental-color;
} }
} }
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -17,15 +17,15 @@ ...@@ -17,15 +17,15 @@
// chrome: title // chrome: title
.openassessment__title { .openassessment__title {
@include row(); @include row();
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
border-bottom: ($baseline-v/5) solid $color-decorative-tertiary; border-bottom: ($baseline-v/5) solid $color-decorative-tertiary;
padding-bottom: $spacing-charlie; padding-bottom: ($baseline-v/2);
} }
.openassessment__title--super { .openassessment__title--super {
@extend %hd-charlie; @extend %hd-charlie;
display: block; display: block;
margin-bottom: $spacing-delta; margin-bottom: ($baseline-v/4);
} }
.openassessment__title--sub { .openassessment__title--sub {
...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
} }
.openassessment__steps__step { .openassessment__steps__step {
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary; border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-bravo; padding-bottom: $baseline-v;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
...@@ -54,27 +54,27 @@ ...@@ -54,27 +54,27 @@
.step__header { .step__header {
@extend %trans-opacity; @extend %trans-opacity;
@include row(); @include row();
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
opacity: 1.0; opacity: 1.0;
@include media($bp-ds) { @include media($bp-ds) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie; padding-bottom: ($baseline-v/2);
} }
@include media($bp-dm) { @include media($bp-dm) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie; padding-bottom: ($baseline-v/2);
} }
@include media($bp-dl) { @include media($bp-dl) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie; padding-bottom: ($baseline-v/2);
} }
@include media($bp-dx) { @include media($bp-dx) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie; padding-bottom: ($baseline-v/2);
} }
.step__deadline { .step__deadline {
...@@ -119,10 +119,10 @@ ...@@ -119,10 +119,10 @@
@extend %t-weight4; @extend %t-weight4;
content: counter(item, decimal); content: counter(item, decimal);
counter-increment: item; counter-increment: item;
margin-right: $spacing-delta; margin-right: ($baseline-v/4);
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
border: 1px solid rgba($color-focused, 0.5); border: 1px solid rgba($color-focused, 0.5);
padding: $spacing-delta $spacing-charlie; padding: ($baseline-v/4) ($baseline-v/2);
color: $color-focused; color: $color-focused;
} }
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
@include media($bp-m) { @include media($bp-m) {
display: block; display: block;
margin-top: $spacing-charlie; margin-top: ($baseline-v/2);
} }
} }
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
.ico { .ico {
@extend %t-icon-m; @extend %t-icon-m;
display: none; // hiding by default display: none; // hiding by default
margin-right: $spacing-delta; margin-right: ($baseline-v/4);
} }
.copy { .copy {
...@@ -186,28 +186,28 @@ ...@@ -186,28 +186,28 @@
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(2 of 6); @include span-columns(2 of 6);
@include omega(); @include omega();
margin-top: $spacing-delta; margin-top: ($baseline-v/4);
text-align: right; text-align: right;
} }
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
margin-top: $spacing-delta; margin-top: ($baseline-v/4);
text-align: right; text-align: right;
} }
@include media($bp-dl) { @include media($bp-dl) {
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
margin-top: $spacing-delta; margin-top: ($baseline-v/4);
text-align: right; text-align: right;
} }
@include media($bp-dx) { @include media($bp-dx) {
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
margin-top: $spacing-delta; margin-top: ($baseline-v/4);
text-align: right; text-align: right;
} }
} }
...@@ -226,13 +226,13 @@ ...@@ -226,13 +226,13 @@
// step instructions // step instructions
.step__instruction { .step__instruction {
@extend %copy-delta; @extend %copy-delta;
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
color: $copy-color; color: $copy-color;
} }
// step content // step content
.step__content { .step__content {
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
} }
// step actions // step actions
...@@ -394,7 +394,7 @@ ...@@ -394,7 +394,7 @@
} }
.openassessment__prompt { .openassessment__prompt {
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
} }
.openassessment__prompt__title { .openassessment__prompt__title {
...@@ -406,7 +406,7 @@ ...@@ -406,7 +406,7 @@
color: $copy-lead-color; color: $copy-lead-color;
> * { > * {
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
&:last-child { &:last-child {
@extend %wipe-last-child; @extend %wipe-last-child;
...@@ -427,12 +427,12 @@ ...@@ -427,12 +427,12 @@
// response form // response form
.response__submission { .response__submission {
padding: $spacing-charlie; padding: ($baseline-v/2);
background: $color-decorative-tertiary; background: $color-decorative-tertiary;
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
.submission__answer { .submission__answer {
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
} }
} }
...@@ -452,7 +452,7 @@ ...@@ -452,7 +452,7 @@
.action--submit, .tip { .action--submit, .tip {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
@include media($bp-ds) { @include media($bp-ds) {
display: inline-block; display: inline-block;
...@@ -487,22 +487,22 @@ ...@@ -487,22 +487,22 @@
@include media($bp-ds) { @include media($bp-ds) {
display: inline-block; display: inline-block;
margin-right: $spacing-charlie; margin-right: ($baseline-v/2);
} }
@include media($bp-dm) { @include media($bp-dm) {
display: inline-block; display: inline-block;
margin-right: $spacing-charlie; margin-right: ($baseline-v/2);
} }
@include media($bp-dl) { @include media($bp-dl) {
display: inline-block; display: inline-block;
margin-right: $spacing-charlie; margin-right: ($baseline-v/2);
} }
@include media($bp-dx) { @include media($bp-dx) {
display: inline-block; display: inline-block;
margin-right: $spacing-charlie; margin-right: ($baseline-v/2);
} }
} }
...@@ -554,7 +554,7 @@ ...@@ -554,7 +554,7 @@
.peer-assessment__display__title { .peer-assessment__display__title {
@extend %hd-golf; // FIX: needed due to DOM structure @extend %hd-golf; // FIX: needed due to DOM structure
@extend %t-weight3; @extend %t-weight3;
margin-bottom: $spacing-delta; margin-bottom: ($baseline-v/4);
@include media($bp-ds) { @include media($bp-ds) {
float: left; float: left;
...@@ -608,7 +608,7 @@ ...@@ -608,7 +608,7 @@
// fields // fields
.assessment__fields { .assessment__fields {
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
} }
// rubric question // rubric question
...@@ -752,7 +752,7 @@ ...@@ -752,7 +752,7 @@
.openassessment__grade { .openassessment__grade {
@include row(); @include row();
border-top: ($baseline-v/5) solid $color-decorative-tertiary; border-top: ($baseline-v/5) solid $color-decorative-tertiary;
padding-top: $spacing-bravo; padding-top: $baseline-v;
.openassessment__grade__title, .openassessment__grade__content { .openassessment__grade__title, .openassessment__grade__content {
display: inline-block; display: inline-block;
...@@ -761,7 +761,7 @@ ...@@ -761,7 +761,7 @@
.openassessment__grade__title { .openassessment__grade__title {
@extend %hd-delta; @extend %hd-delta;
margin-right: $spacing-bravo; margin-right: $baseline-v;
color: $heading-tertiary-color; color: $heading-tertiary-color;
} }
...@@ -769,7 +769,7 @@ ...@@ -769,7 +769,7 @@
.grade__value { .grade__value {
@extend %hd-delta; @extend %hd-delta;
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
} }
.grade__description { .grade__description {
...@@ -808,7 +808,7 @@ ...@@ -808,7 +808,7 @@
.submission__peer-evaluations__questions { .submission__peer-evaluations__questions {
@extend %no-list; @extend %no-list;
@extend %ui-section-content; @extend %ui-section-content;
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -818,15 +818,15 @@ ...@@ -818,15 +818,15 @@
// individual question // individual question
.question { .question {
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
@extend %wipe-last-child; @extend %wipe-last-child;
} }
.question__title { .question__title {
@include clearfix(); @include clearfix();
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary; border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta; padding-bottom: ($baseline-v/4);
} }
.question__title__copy { .question__title__copy {
...@@ -841,9 +841,9 @@ ...@@ -841,9 +841,9 @@
@extend %t-titlecase; @extend %t-titlecase;
float: right; float: right;
position: relative; position: relative;
bottom: -($spacing-delta); bottom: -(($baseline-v/4));
margin-left: $spacing-bravo; margin-left: $baseline-v;
padding: $spacing-delta $spacing-charlie ($spacing-delta/2) $spacing-charlie; padding: ($baseline-v/4) ($baseline-v/2) (($baseline-v/4)/2) ($baseline-v/2);
background: $color-decorative-tertiary; background: $color-decorative-tertiary;
color: $white; color: $white;
} }
...@@ -853,7 +853,7 @@ ...@@ -853,7 +853,7 @@
&:after { &:after {
content: "/"; content: "/";
margin-left: $spacing-delta; margin-left: ($baseline-v/4);
color: $heading-secondary-color; color: $heading-secondary-color;
} }
} }
...@@ -862,7 +862,7 @@ ...@@ -862,7 +862,7 @@
color: $heading-secondary-color; color: $heading-secondary-color;
.unit { .unit {
margin-left: $spacing-delta; margin-left: ($baseline-v/4);
} }
} }
...@@ -874,7 +874,7 @@ ...@@ -874,7 +874,7 @@
// individual answers // individual answers
.answer { .answer {
margin-bottom: $spacing-bravo; margin-bottom: $baseline-v;
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(3 of 6); @include span-columns(3 of 6);
...@@ -906,7 +906,7 @@ ...@@ -906,7 +906,7 @@
.answer__value { .answer__value {
@extend %copy-charlie; @extend %copy-charlie;
display: block; display: block;
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
color: $heading-primary-color; color: $heading-primary-color;
} }
...@@ -937,7 +937,7 @@ ...@@ -937,7 +937,7 @@
.action--submit { .action--submit {
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-delta; @extend %action-delta;
margin-right: $spacing-charlie; margin-right: ($baseline-v/2);
} }
} }
......
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
} }
.copy { .copy {
margin-right: $spacing-charlie; margin-right: ($baseline-v/2);
} }
} }
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
textarea { textarea {
@extend %t-weight2; @extend %t-weight2;
border: 1px solid $color-decorative-secondary; border: 1px solid $color-decorative-secondary;
padding: $spacing-charlie; padding: ($baseline-v/2);
font-family: $f-copy; font-family: $f-copy;
outline: 0; outline: 0;
color: $selected-color; color: $selected-color;
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
label, .label { label, .label {
@extend %copy-delta; @extend %copy-delta;
display: block; display: block;
margin-bottom: $spacing-charlie; margin-bottom: ($baseline-v/2);
color: $copy-color; color: $copy-color;
} }
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -10,13 +10,6 @@ ...@@ -10,13 +10,6 @@
$baseline-v: 20px; // vertical baseline $baseline-v: 20px; // vertical baseline
$baseline-h: 40px; // horizontal baseline $baseline-h: 40px; // horizontal baseline
// units: spacing presets
$spacing-alpha: ($baseline-v*2);
$spacing-bravo: $baseline-v;
$spacing-charlie: ($baseline-v/2);
$spacing-delta: ($baseline-v/4);
// -------------------- // --------------------
// layout - grid (neat-based - http://neat.bourbon.io/) // layout - grid (neat-based - http://neat.bourbon.io/)
// -------------------- // --------------------
......
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