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