Skip to content

E
edx-ora2
Commit efd1bbb2 by Brian Talbot
Options

adding basic/problem-centric styling support and FED fixes: 

* adding in missing Font Awesome font assets
* correcting path for Open Sans typeface
* correcting typo in notes of openassessment IE-specific Sass
* syncing up variable names/values
* adding additional wrapper--grid element into layouts for easier grid-based styling
* syncing up variable names/values
* initial grid/view-based styles
* initial typographical styles
parent ba6ee2c7
Showing with 822 additions and 102 deletions
apps/openassessment/templates/openassessmentblock/t-base.html
...@@ -10,9 +10,10 @@ ...@@ -10,9 +10,10 @@
--> -->
<div class="wrapper wrapper--openassessment theme--basic"> <div class="wrapper wrapper--openassessment wrapper--xblock theme--basic">
<div class="openassessment" id="openassessment"> <div class="openassessment" id="openassessment">
<div class="wrapper--grid">
<h1 class="openassessment__title"> <h1 class="openassessment__title">
<span class="openassessment__title--super"> <span class="openassessment__title--super">
Assignment Number 1 - Censorship in Libraries Assignment Number 1 - Censorship in Libraries
...@@ -96,4 +97,5 @@ ...@@ -96,4 +97,5 @@
<!-- STATUS: problem grade --> <!-- STATUS: problem grade -->
<!-- SEE t-grade.html for all cases --> <!-- SEE t-grade.html for all cases -->
</div> </div>
</div>
</div> </div>
apps/openassessment/templates/openassessmentblock/t-peer-assessment.html
...@@ -11,11 +11,14 @@ ...@@ -11,11 +11,14 @@
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -236,11 +239,14 @@ ...@@ -236,11 +239,14 @@
<!-- CASE: started, but incomplete --> <!-- CASE: started, but incomplete -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -461,11 +467,14 @@ ...@@ -461,11 +467,14 @@
<!-- CASE: started, but incomplete and problem closed --> <!-- CASE: started, but incomplete and problem closed -->
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -481,11 +490,14 @@ ...@@ -481,11 +490,14 @@
<!-- CASE: no peer responses to assess --> <!-- CASE: no peer responses to assess -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -500,11 +512,14 @@ ...@@ -500,11 +512,14 @@
<!-- CASE: completed --> <!-- CASE: completed -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span> <span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
......
apps/openassessment/templates/openassessmentblock/t-response.html
...@@ -16,8 +16,11 @@ ...@@ -16,8 +16,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -62,8 +65,11 @@ ...@@ -62,8 +65,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -82,8 +88,11 @@ ...@@ -82,8 +88,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status is--updated"> <span class="step__status is--updated">
...@@ -128,8 +137,11 @@ ...@@ -128,8 +137,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved is--unavailable ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--saved is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -164,8 +176,11 @@ ...@@ -164,8 +176,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -196,8 +211,11 @@ ...@@ -196,8 +211,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -228,8 +246,11 @@ ...@@ -228,8 +246,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted awaiting--peer-responses ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted awaiting--peer-responses ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -260,8 +281,11 @@ ...@@ -260,8 +281,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__title__label">Your Response</span> <span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
......
apps/openassessment/templates/openassessmentblock/t-self-assessment.html
...@@ -10,8 +10,11 @@ ...@@ -10,8 +10,11 @@
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__title__label">Assess Your Response</span> <span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -212,11 +215,14 @@ ...@@ -212,11 +215,14 @@
</li> </li>
<!-- CASE: not started and problem closed --> <!-- CASE: not started and problem closed -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__title__label">Assess Your Response</span> <span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -230,11 +236,14 @@ ...@@ -230,11 +236,14 @@
</li> </li>
<!-- CASE: complete --> <!-- CASE: complete -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__title__label">Assess Your Response</span> <span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
......
apps/openassessment/xblock/static/fonts/libs/font-awesome/fontawesome-webfont.svg 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/openassessment/xblock/static/js/design.js 0 → 100644
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e) {
window.open($(e.target).attr('href'));
e.preventDefault();
}
// --------------------
jQuery(document).ready(function($) {
// removing no-js, accessibility/modernizr marker
$('html').removeClass('no-js');
// general link management - new window/tab
$('a[data-rel="external"]').bind('click', $linkNewWindow);
});
apps/openassessment/xblock/static/js/design.min.js 0 → 100644
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e){window.open($(e.target).attr("href"));e.preventDefault()}jQuery(document).ready(function(e){e("html").removeClass("no-js");e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file
apps/openassessment/xblock/static/sass/oa/contexts/_ie.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ==================== // ====================
// NOTES: // NOTES:
// * any openassessment-specific suport-based styling needed for internet explorer should be placed here // * any openassessment-specific support-based styling needed for internet explorer should be placed here
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -11,3 +11,69 @@ ...@@ -11,3 +11,69 @@
// background: transparent; // background: transparent;
// } // }
// --------------------
// Views: Static HTML Page Display
// --------------------
.view--placeholder {
background: $bg-view;
margin: ($baseline-v*2) $baseline-h;
}
.wrapper--xblock {
// typography tests
.h1 {
@extend %hd-alpha;
}
.h2 {
@extend %hd-bravo;
}
.h3 {
@extend %hd-charlie;
}
.h4 {
@extend %hd-delta;
}
.h5 {
@extend %hd-epsilon;
}
.h6 {
@extend %hd-foxtrot;
}
.h7 {
@extend %hd-golf;
}
.h8 {
@extend %hd-hotel;
}
.copy-1 {
@extend %copy-alpha;
}
.copy-2 {
@extend %copy-bravo;
}
.copy-3 {
@extend %copy-charlie;
}
.copy-4 {
@extend %copy-delta;
}
.copy-5 {
@extend %copy-epsilon;
}
.copy-6 {
@extend %copy-foxtrot;
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss
...@@ -3,3 +3,29 @@ ...@@ -3,3 +3,29 @@
// NOTES: // NOTES:
// * these are openassessment-specific variable files // * these are openassessment-specific variable files
// --------------------
// layout (neat-based) - forced breakpoints/sizing
// --------------------
$grid-size-s: 530px; // small
$grid-size-m: 760px; // medium
$grid-size-l: 925px; // large
$grid-size-x: 1300px; // extra large
$grid-size-f: 1600px; // full size
// --------------------
// layout (neat-based) - mediaqueries
// --------------------
$bp-m: new-breakpoint(max-width ($grid-size-s - 1) 4); // mobile devices - make grid 4 columns
$bp-ds: new-breakpoint(min-width $grid-size-s max-width ($grid-size-m - 1) 6); // small displays - make grid 6 columns
$bp-dm: new-breakpoint(min-width $grid-size-m max-width ($grid-size-l - 1) 12); // medium displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12); // large displays - make grid 12 columns
$bp-dx: new-breakpoint(min-width $grid-size-x 12); // large displays - make grid 12 columns
// --------------------
// // application - colors: states
// --------------------
$color-incomplete: yellow;
$color-complete: green;
$color-focused: $black;
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -3,3 +3,476 @@ ...@@ -3,3 +3,476 @@
// NOTES: // NOTES:
// * The basic view and all of its states of the openassessment xblock // * The basic view and all of its states of the openassessment xblock
.wrapper--openassessment {
position: relative;
background: $bg-view;
}
.openassessment {
@extend %copy--base;
// --------------------
// general
// --------------------
// chrome: title
.openassessment__title {
@include row();
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/5) solid $color-decorative-tertiary;
padding-bottom: $spacing-bravo;
}
.openassessment__title--super {
@extend %hd-charlie;
display: block;
margin-bottom: $spacing-delta;
@include media($bp-m) {
}
@include media($bp-ds) {
}
@include media($bp-dm) {
}
@include media($bp-dl) {
@include span-columns(8 of 12);
}
@include media($bp-dx) {
@include span-columns(8 of 12);
}
}
.openassessment__title--sub {
@extend %hd-hotel;
display: block;
@include media($bp-m) {
}
@include media($bp-ds) {
}
@include media($bp-dm) {
}
@include media($bp-dl) {
@include span-columns(4 of 12);
margin-top: $spacing-delta;
text-align: right;
}
@include media($bp-dx) {
@include span-columns(4 of 12);
margin-top: $spacing-delta;
text-align: right;
}
}
// steps
.openassessment__steps {
@extend %no-list;
counter-reset: item; // setting counter here
}
.openassessment__steps__step {
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-bravo;
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
// step header
.step__header {
@include row();
// STATE: hover
&:hover {
.step__deadline, .step__label {
color: $heading-secondary-color;
}
}
}
// step title/name
.step__title {
@include media($bp-ds) {
@include span-columns(4 of 6);
vertical-align: middle;
}
@include media($bp-dm) {
@include span-columns(9 of 12);
vertical-align: middle;
}
@include media($bp-dl) {
@include span-columns(9 of 12);
vertical-align: middle;
}
@include media($bp-dx) {
@include span-columns(9 of 12);
vertical-align: middle;
}
.step__counter, .wrapper--copy {
display: inline-block;
vertical-align: middle;
}
// step counter
.step__counter {
// increment: show numbers using parent list counter
&:before {
@extend %hd-charlie;
@extend %t-weight3;
content: counter(item, decimal);
counter-increment: item;
margin-right: $spacing-charlie;
}
}
.step__label, .step__deadline {
display: block;
}
.step__label {
@extend %hd-delta;
@extend %trans-color;
}
.step__deadline {
@extend %hd-hotel;
@extend %trans-color;
}
}
// step status
.step__status {
.step__status__value {
border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-disabled;
color: $white;
@include media($bp-m) {
display: block;
margin-top: $spacing-charlie;
}
}
.ico, .copy {
display: inline-block;
vertical-align: bottom;
}
.ico {
@extend %t-icon-m;
margin-right: $spacing-delta;
}
.copy {
@extend %copy-foxtrot;
@extend %t-titlecase;
}
@include media($bp-m) {
position: relative;
top: 2px;
}
@include media($bp-ds) {
@include span-columns(2 of 6);
@include omega();
margin-top: $spacing-delta;
text-align: right;
}
@include media($bp-dm) {
@include span-columns(3 of 12);
@include omega();
margin-top: $spacing-delta;
text-align: right;
}
@include media($bp-dl) {
@include span-columns(3 of 12);
@include omega();
margin-top: $spacing-delta;
text-align: right;
}
@include media($bp-dx) {
@include span-columns(3 of 12);
@include omega();
margin-top: $spacing-delta;
text-align: right;
}
}
.step__status__label {
@extend %text-sr;
}
// STATE: step is unavailable
&.is--unavailable {
.step__status {
display: none;
}
.step__label {
color: $heading-tertiary-color;
}
.step__counter:before {
color: $color-disabled;
}
}
// STATE: step is collapsed (disabled)
&.is--collapsed {
.step__status__value {
background: $color-disabled;
}
}
// STATE: step is expanded (focused)
&.is--expanded {
border-bottom-color: $color-focused;
.step__header {
margin-bottom: $spacing-charlie;
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie;
// STATE: hover
&:hover {
.step__deadline, .step__label {
color: $color-focused;
}
}
@include media($bp-m) {
padding-bottom: 0;
}
}
.step__counter:before, .step__title .step__deadline {
color: $color-focused;
}
.step__status__value {
background: $color-focused;
.copy {
color: $white;
}
}
}
// STATE: step is incomplete
&.is--incomplete {
.step__counter:before {
color: $color-incomplete;
}
.step__status__value {
background: $color-incomplete;
}
}
// STATE: step is complete
&.is--complete {
.step__counter:before {
color: $color-complete;
}
.step__status__value {
background: $color-complete;
}
}
}
// --------------------
// messages
// --------------------
.message {
// CASE: has actions
&.has-actions {
}
}
// TYPE: warning
.message--warning {
}
// TYPE: confirmation
.message--confirmation {
}
// --------------------
// problem
// --------------------
.wrapper--openassessment__prompt {
}
.openassessment__prompt {
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $gray-l6;
padding-bottom: $spacing-bravo;
}
.openassessment__prompt__title {
@extend %text-sr;
}
.openassessment__prompt__copy {
@extend %copy-charlie;
> * {
margin-bottom: $spacing-bravo;
&:last-child {
@extend %wipe-last-child;
}
}
a {
@extend %link-copy;
}
}
// --------------------
// response
// --------------------
.step--response {
}
// --------------------
// peer assessment
// --------------------
.step--peer-assessment {
}
// --------------------
// self assessment
// --------------------
.step--self-assessment {
}
// --------------------
// status
// --------------------
.openassessment__grade {
@include row();
border-top: ($baseline-v/10) solid $color-decorative-secondary;
padding: $spacing-bravo;
background: $color-decorative-tertiary;
.openassessment__grade__title, .openassessment__grade__content {
display: inline-block;
vertical-align: top;
}
.openassessment__grade__title {
@extend %hd-delta;
color: $heading-tertiary-color;
@include media($bp-ds) {
margin-bottom: $spacing-bravo;
}
@include media($bp-dm) {
margin-right: $spacing-bravo;
}
@include media($bp-dl) {
margin-right: $spacing-bravo;
}
@include media($bp-dx) {
margin-right: $spacing-bravo;
}
}
.openassessment__grade__content {
.grade__value {
@extend %hd-delta;
margin-bottom: $spacing-charlie;
}
.grade__description {
@extend %copy-delta;
}
}
// CASE: is not started
&.is--unstarted {
}
// CASE: is incomplete
&.is--incomplete {
border-top-color: $color-incomplete;
}
// CASE: is complete
&.is--complete {
border-top-color: $color-complete;
}
}
// --------------------
// STATE: incomplete
// --------------------
// --------------------
// STATE: waiting
// --------------------
// --------------------
// STATE: complete
// --------------------
}
apps/openassessment/xblock/static/sass/openassessment.scss
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
@import 'xb/elements/typography'; // font sizes/scale and applied/canned definitions @import 'xb/elements/typography'; // font sizes/scale and applied/canned definitions
@import 'xb/elements/controls'; // buttons, link styles, sliders, etc. @import 'xb/elements/controls'; // buttons, link styles, sliders, etc.
@import 'xb/elements/forms'; // form elements @import 'xb/elements/forms'; // form elements
@import 'xb/elements/layout'; // applied layouts and deliberate class-based breakpoints
// xblock: contextual // xblock: contextual
@import 'xb/contexts/ie'; // Internet Explorer-specific styling @import 'xb/contexts/ie'; // Internet Explorer-specific styling
......
apps/openassessment/xblock/static/sass/themes/edx/_assets.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
// -------------------- // --------------------
// font: Open Sans - http://www.google.com/fonts/specimen/Open+Sans // font: Open Sans - http://www.google.com/fonts/specimen/Open+Sans
// -------------------- // --------------------
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss
...@@ -52,14 +52,46 @@ $edx-pink-t1: rgba($edx-pink,0.25); ...@@ -52,14 +52,46 @@ $edx-pink-t1: rgba($edx-pink,0.25);
$edx-pink-t2: rgba($edx-pink,0.50); $edx-pink-t2: rgba($edx-pink,0.50);
$edx-pink-t3: rgba($edx-pink,0.75); $edx-pink-t3: rgba($edx-pink,0.75);
$edx-gray: rgb(164, 165, 168);
$edx-gray-l1: tint($edx-gray,20%);
$edx-gray-l2: tint($edx-gray,40%);
$edx-gray-l3: tint($edx-gray,60%);
$edx-gray-l4: tint($edx-gray,80%);
$edx-gray-l5: tint($edx-gray,90%);
$edx-gray-d1: shade($edx-gray,20%);
$edx-gray-d2: shade($edx-gray,40%);
$edx-gray-d3: shade($edx-gray,60%);
$edx-gray-d4: shade($edx-gray,80%);
$edx-gray-d5: shade($edx-gray,90%);
$edx-gray-s1: saturate($edx-gray,15%);
$edx-gray-s2: saturate($edx-gray,30%);
$edx-gray-s3: saturate($edx-gray,45%);
$edx-gray-u1: desaturate($edx-gray,15%);
$edx-gray-u2: desaturate($edx-gray,30%);
$edx-gray-u3: desaturate($edx-gray,45%);
$edx-gray-t0: rgba($edx-gray,0.125);
$edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75);
// -------------------- // --------------------
// variables: overrides // variables: overrides
// -------------------- // --------------------
// application - fonts // fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
// layout - grid
@import "neat/neat-helpers";
$max-width: 100%;
$grid-columns: 12;
$gutter: $baseline-v;
// application - fonts
$f-title: $f-sans-serif;
$f-copy: $f-sans-serif;
$f-action: $f-sans-serif;
// application - colors // application - colors
$color-primary: $edx-blue-d1; $color-primary: $edx-blue-d1;
$color-secondary: $edx-blue-l1; $color-secondary: $edx-blue-l1;
...@@ -67,22 +99,22 @@ $color-tertiary: $gray-l1; ...@@ -67,22 +99,22 @@ $color-tertiary: $gray-l1;
$color-quarternary: $gray-l2; $color-quarternary: $gray-l2;
// application - colors: decorative // application - colors: decorative
$decorative__color-primary: $edx-blue-u1; $color-decorative-primary: $edx-blue-u2;
$decorative__color-secondary: $edx-pink-l2; $color-decorative-secondary: $gray-l4;
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: $gray-d3; $heading-color: $gray-d3;
$heading-primary-color: $black; $heading-primary-color: $black;
$heading-secondary-color: $gray; $heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l4; $heading-tertiary-color: $gray-l3;
$copy-color: $gray-l2; $copy-color: $gray-l1;
$copy-color-alt: $gray-d1; $copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4; $copy-color-focus: $gray-d4;
$copy-lead__color: $gray; $copy-lead-color: $gray;
$copy-lead__color: $gray-d1; $copy-lead-color: $gray-d1;
$copy-lead__color-focus: $gray-d4; $copy-lead-color-focus: $gray-d4;
$copy-supplemental-color: $gray-l2; $copy-supplemental-color: $gray-l2;
$copy-supplemental-color-alt: $gray-l2; $copy-supplemental-color-alt: $gray-l2;
...@@ -105,8 +137,9 @@ $bg-content-main: $gray-l5; ...@@ -105,8 +137,9 @@ $bg-content-main: $gray-l5;
$color-content-main: $gray-d1; $color-content-main: $gray-d1;
// application - colors: view-based elements // application - colors: view-based elements
$bg-view: $gray-l6; $bg-view: $gray-l7;
$bg-content: $white; $bg-content: $white;
$bg-message: $black;
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
...@@ -8,9 +8,6 @@ ...@@ -8,9 +8,6 @@
// fonts // fonts
// -------------------- // --------------------
.wrapper--xblock { .wrapper--xblock {
@extend %t-copy-base;
overflow-y: scroll;
font-size: 62.5%;
background: $bg-view; background: $bg-view;
} }
...@@ -18,17 +15,19 @@ ...@@ -18,17 +15,19 @@
// -------------------- // --------------------
// layout // layout
// -------------------- // --------------------
[class^="wrapper-"] { // [class^="wrapper--"] {
@extend %wrapper; // @extend %wrapper;
padding: 0; // padding: 0;
} // }
// -------------------- // --------------------
// semantic dividers // semantic elements, but visually hidden
// -------------------- // --------------------
.sr, hr.divider { .sr,
@extend %ui-text-sr; hr.divider,
.nav--contents {
@extend %text-sr;
} }
...@@ -44,6 +43,6 @@ ...@@ -44,6 +43,6 @@
.nav--wizard, .nav--wizard,
.list--tips, .list--tips,
.field--group { .field--group {
@extend %ui-no-list; @extend %no-list;
@extend %wipe-last-child; @extend %wipe-last-child;
} }
apps/openassessment/xblock/static/sass/xb/elements/_layout.scss 0 → 100644
// xblock: elements - layouts
// ====================
// NOTES:
// * Grid and common page layout rules
.wrapper--grid {
@include outer-container();
}
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
...@@ -29,6 +29,14 @@ ...@@ -29,6 +29,14 @@
font-weight: 700; font-weight: 700;
} }
// --------------------
// titlecase
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.025rem;
}
// -------------------- // --------------------
// canned icon sizes // canned icon sizes
...@@ -54,88 +62,79 @@ ...@@ -54,88 +62,79 @@
// canned headings // canned headings
// -------------------- // --------------------
%hd-alpha { %hd-alpha {
@include font-size(48); @extend %t-weight1;
@include lh(48); @extend %t-titlecase;
@extend %t-weight4; @include font-size(24);
text-transform: uppercase; @include lh(24);
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.50rem;
color: $heading-primary-color; color: $heading-primary-color;
} }
%hd-bravo { %hd-bravo {
@extend %t-weight2; @extend %t-weight3;
@include font-size(24); @include font-size(21);
@include lh(24); @include lh(21);
margin: 0 0 ($baseline-v/4) 0;
font-family: $f-title; font-family: $f-title;
color: $heading-primary-color; color: $heading-primary-color;
} }
%hd-charlie { %hd-charlie {
@extend %t-weight1; @extend %t-weight1;
@extend %t-titlecase;
@include font-size(18); @include font-size(18);
@include lh(18); @include lh(18);
margin: 0 0 ($baseline-v/2) 0;
font-family: $f-title; font-family: $f-title;
color: $heading-primary-color; color: $heading-primary-color;
} }
%hd-charlie-alt {
@extend %t-weight2;
@include font-size(18);
@include lh(18);
margin: 0 0 ($baseline-v/4) 0;
font-family: $f-title;
color: $heading-color;
}
%hd-delta { %hd-delta {
@extend %t-weight1; @extend %t-weight3;
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
margin: 0 0 ($baseline-v/2) 0;
text-transform: uppercase;
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.125rem; color: $heading-primary-color;
color: $heading-tertiary-color;
} }
%hd-epsilon { %hd-epsilon {
@extend %t-weight1; @extend %t-weight1;
@include font-size(14); @extend %t-titlecase;
@include lh(14); @include font-size(16);
@include lh(16);
font-family: $f-title; font-family: $f-title;
color: $heading-secondary-color; color: $heading-secondary-color;
} }
%hd-foxtrot { %hd-foxtrot {
@extend %t-weight1; @extend %t-weight3;
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
margin: 0 0 ($baseline-v/10) 0;
font-family: $f-title; font-family: $f-title;
color: $heading-secondary-color; color: $heading-secondary-color;
} }
%hd-golf { %hd-golf {
@extend %t-weight1; @extend %t-weight1;
@include font-size(14); @extend %t-titlecase;
@include lh(14); @include font-size(13);
margin: 0 0 ($baseline-v/10) 0; @include lh(13);
text-transform: uppercase;
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.25rem;
color: $heading-tertiary-color; color: $heading-tertiary-color;
} }
%hd-hotel { %hd-hotel {
@include font-size(24); @extend %t-weight1;
@include lh(24); @include font-size(13);
@extend %t-weight4; @include lh(13);
text-transform: uppercase; font-family: $f-title;
color: $heading-tertiary-color;
}
%hd-india {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(11);
@include lh(11);
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.25rem;
color: $heading-tertiary-color; color: $heading-tertiary-color;
} }
...@@ -143,15 +142,7 @@ ...@@ -143,15 +142,7 @@
// -------------------- // --------------------
// canned copy // canned copy
// -------------------- // --------------------
%copy-base { %copy-alpha {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
font-family: $f-copy;
color: $copy-color;
}
%copy-lead {
@extend %t-weight0; @extend %t-weight0;
@include font-size(24); @include font-size(24);
@include lh(24); @include lh(24);
...@@ -159,27 +150,42 @@ ...@@ -159,27 +150,42 @@
color: $copy-color; color: $copy-color;
} }
%copy-showcase { %copy-bravo {
@include font-size(18); @include font-size(18);
@include lh(18); @include lh(18);
color: $copy-color; color: $copy-color;
font-family: $f-copy; font-family: $f-copy;
} }
%copy-detail { %copy-charlie {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
font-family: $f-copy;
color: $copy-color;
}
%copy-delta {
@include font-size(14); @include font-size(14);
@include lh(14); @include lh(14);
font-family: $f-copy; font-family: $f-copy;
color: $copy-color; color: $copy-color;
} }
%copy-metadata { %copy-epsilon {
@include font-size(12); @include font-size(12);
@include lh(12); @include lh(12);
font-family: $f-copy; font-family: $f-copy;
color: $copy-supplemental-color; color: $copy-supplemental-color;
} }
%copy-foxtrot {
@include font-size(11);
@include lh(11);
font-family: $f-copy;
color: $copy-supplemental-color;
}
// -------------------- // --------------------
// canned actions // canned actions
......
apps/openassessment/xblock/static/sass/xb/utilities/_mixins.scss
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
// -------------------- // --------------------
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem; // font-size: ($sizeValue/10) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
} }
...@@ -31,6 +31,6 @@ ...@@ -31,6 +31,6 @@
// -------------------- // --------------------
@mixin lh($fontSize: auto){ @mixin lh($fontSize: auto){
line-height: ($fontSize*1.50) + px; line-height: ($fontSize*1.50) + px;
line-height: (($fontSize/10)*1.50) + rem; // line-height: (($fontSize/10)*1.50) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
} }
apps/openassessment/xblock/static/sass/xb/utilities/_reset.scss
...@@ -421,6 +421,10 @@ ...@@ -421,6 +421,10 @@
// -------------------- // --------------------
// custom reset // custom reset
// -------------------- // --------------------
* {
@include box-sizing(border-box);
}
div, span, applet, object, iframe, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -10,6 +10,24 @@ ...@@ -10,6 +10,24 @@
$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/)
// --------------------
// grid
@import "neat/neat-helpers";
$max-width: 100%; // http://gridcalculator.dk/#/1040/12/20/20
$grid-columns: 12; // make grid 12 columns
$column: $baseline-v;
$gutter: $baseline-v; // gutter b/t columns
// $visual-grid: true;
// $visual-grid-index: front;
// -------------------- // --------------------
// colors - basic // colors - basic
...@@ -116,13 +134,19 @@ $f-action: $f-sans-serif; ...@@ -116,13 +134,19 @@ $f-action: $f-sans-serif;
// -------------------- // --------------------
// application - colors // application - colors
// -------------------- // --------------------
// application - colors: basic
$color-primary: $blue-s2; $color-primary: $blue-s2;
$color-secondary: $blue; $color-secondary: $blue;
$color-teritary: $blue-u2; $color-teritary: $blue-u2;
// application - colors: decorative // application - colors: decorative
$color-decorative-primary: $blue-u2; $color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-t0; $color-decorative-secondary: $gray-l4;
$color-decorative-tertiary: $gray-l6;
// application - colors: states
$color-disabled: $gray-l4;
$color-focused: $blue-u2;
// application - colors: actions // application - colors: actions
$action-primary-color: tint($color-primary,10%); $action-primary-color: tint($color-primary,10%);
...@@ -143,10 +167,10 @@ $action-tertiary-color-visited: shade($color-teritary,20%); ...@@ -143,10 +167,10 @@ $action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: $gray-d5; $heading-color: $gray-d5;
$heading-primary-color: $black; $heading-primary-color: $black;
$heading-secondary-color: $gray-l3; $heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l4; $heading-tertiary-color: $gray-l3;
$copy-color: $gray-l2; $copy-color: $gray-l1;
$copy-color-alt: $gray-d1; $copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4; $copy-color-focus: $gray-d4;
...@@ -163,5 +187,6 @@ $selected-bg: $blue-t1; ...@@ -163,5 +187,6 @@ $selected-bg: $blue-t1;
$selected-color: $blue-s1; $selected-color: $blue-s1;
// application - colors: view-based elements // application - colors: view-based elements
$bg-view: $gray-l6; $bg-view: $gray-l7;
$bg-content: $white; $bg-content: $white;
$bg-message: $black;
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