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 908 additions and 188 deletions
apps/openassessment/templates/openassessmentblock/t-base.html
......@@ -10,90 +10,92 @@
-->
<div class="wrapper wrapper--openassessment theme--basic">
<div class="wrapper wrapper--openassessment wrapper--xblock theme--basic">
<div class="openassessment" id="openassessment">
<h1 class="openassessment__title">
<span class="openassessment__title--super">
Assignment Number 1 - Censorship in Libraries
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
+
<span class="problem-type problem-type--peer-assessment">Peer</span>
+
<span class="problem-type problem-type--self-assessment">Self Assessment</span>
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a part of this problem:</h2>
<ol class="list list--nav">
<li class="list--nav__item">
<a class="action" href="#openassessment__response">Your response to this problem</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__peer-assessment">Your assessment(s) of peer responses</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__self-assessment">Your assessment of your response</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a>
</li>
</ol>
</nav>
<div class="wrapper--grid">
<h1 class="openassessment__title">
<span class="openassessment__title--super">
Assignment Number 1 - Censorship in Libraries
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
+
<span class="problem-type problem-type--peer-assessment">Peer</span>
+
<span class="problem-type problem-type--self-assessment">Self Assessment</span>
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a part of this problem:</h2>
<ol class="list list--nav">
<li class="list--nav__item">
<a class="action" href="#openassessment__response">Your response to this problem</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__peer-assessment">Your assessment(s) of peer responses</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__self-assessment">Your assessment of your response</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a>
</li>
</ol>
</nav>
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- question -->
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<!-- question -->
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
<blockquote>
<p>All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.</p>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
<blockquote>
<p>All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.</p>
<footer>
&mdash; <cite><a href="">Katherine Paterson, Author</a></cite>
</footer>
</blockquote>
<footer>
&mdash; <cite><a href="">Katherine Paterson, Author</a></cite>
</footer>
</blockquote>
<p>Write a persuasive essay to a newspaper reflecting your vies on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.</p>
</div>
<p>Write a persuasive essay to a newspaper reflecting your vies on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.</p>
</div>
<ul class="list list--controls">
<li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li>
</ul>
</article>
</div>
<ul class="list list--controls">
<li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li>
</ul>
</article>
</div>
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response -->
<!-- SEE t-response.html for all cases -->
<!-- STEP: response -->
<!-- SEE t-response.html for all cases -->
<!-- ==== -->
<!-- ==== -->
<!-- STEP: peer assessment -->
<!-- SEE t-peer-assessment.html for all cases -->
<!-- STEP: peer assessment -->
<!-- SEE t-peer-assessment.html for all cases -->
<!-- ==== -->
<!-- ==== -->
<!-- STEP: self assessment -->
<!-- SEE t-self-assessment.html for all cases -->
</ol>
<!-- STEP: self assessment -->
<!-- SEE t-self-assessment.html for all cases -->
</ol>
<!-- STATUS: problem grade -->
<!-- SEE t-grade.html for all cases -->
<!-- STATUS: problem grade -->
<!-- SEE t-grade.html for all cases -->
</div>
</div>
</div>
apps/openassessment/templates/openassessmentblock/t-peer-assessment.html
......@@ -11,11 +11,14 @@
<!-- 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">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<span class="step__status">
......@@ -236,11 +239,14 @@
<!-- 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">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<span class="step__status">
......@@ -461,11 +467,14 @@
<!-- 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">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<span class="step__status">
......@@ -481,11 +490,14 @@
<!-- 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">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<span class="step__status">
......@@ -500,11 +512,14 @@
<!-- 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">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<span class="step__status">
......
apps/openassessment/templates/openassessmentblock/t-response.html
......@@ -16,8 +16,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__counter"></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>
<span class="step__status">
......@@ -62,8 +65,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__counter"></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>
<span class="step__status">
......@@ -82,8 +88,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__counter"></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>
<span class="step__status is--updated">
......@@ -128,8 +137,11 @@
<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">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__counter"></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>
<span class="step__status">
......@@ -164,8 +176,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__counter"></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>
<span class="step__status">
......@@ -196,8 +211,11 @@
<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">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__counter"></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>
<span class="step__status">
......@@ -228,8 +246,11 @@
<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">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__counter"></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>
<span class="step__status">
......@@ -260,8 +281,11 @@
<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">
<h2 class="step__title">
<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__counter"></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>
<span class="step__status">
......
apps/openassessment/templates/openassessmentblock/t-self-assessment.html
......@@ -10,8 +10,11 @@
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<span class="step__status">
......@@ -212,11 +215,14 @@
</li>
<!-- 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">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<span class="step__status">
......@@ -230,11 +236,14 @@
</li>
<!-- 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">
<h2 class="step__title">
<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__counter"></span>
<span class="wrapper--copy">
<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>
</h2>
<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 @@
// ====================
// 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 @@
// 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 @@
// NOTES:
// * 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 @@
// NOTES:
// * 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 @@
@import 'xb/elements/typography'; // font sizes/scale and applied/canned definitions
@import 'xb/elements/controls'; // buttons, link styles, sliders, etc.
@import 'xb/elements/forms'; // form elements
@import 'xb/elements/layout'; // applied layouts and deliberate class-based breakpoints
// xblock: contextual
@import 'xb/contexts/ie'; // Internet Explorer-specific styling
......
apps/openassessment/xblock/static/sass/themes/edx/_assets.scss
......@@ -8,7 +8,7 @@
// --------------------
// 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);
$edx-pink-t2: rgba($edx-pink,0.50);
$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
// --------------------
// application - fonts
// fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, 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
$color-primary: $edx-blue-d1;
$color-secondary: $edx-blue-l1;
......@@ -67,22 +99,22 @@ $color-tertiary: $gray-l1;
$color-quarternary: $gray-l2;
// application - colors: decorative
$decorative__color-primary: $edx-blue-u1;
$decorative__color-secondary: $edx-pink-l2;
$color-decorative-primary: $edx-blue-u2;
$color-decorative-secondary: $gray-l4;
// application - colors: copy and headings
$heading-color: $gray-d3;
$heading-primary-color: $black;
$heading-secondary-color: $gray;
$heading-tertiary-color: $gray-l4;
$heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l3;
$copy-color: $gray-l2;
$copy-color: $gray-l1;
$copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4;
$copy-lead__color: $gray;
$copy-lead__color: $gray-d1;
$copy-lead__color-focus: $gray-d4;
$copy-lead-color: $gray;
$copy-lead-color: $gray-d1;
$copy-lead-color-focus: $gray-d4;
$copy-supplemental-color: $gray-l2;
$copy-supplemental-color-alt: $gray-l2;
......@@ -105,8 +137,9 @@ $bg-content-main: $gray-l5;
$color-content-main: $gray-d1;
// application - colors: view-based elements
$bg-view: $gray-l6;
$bg-view: $gray-l7;
$bg-content: $white;
$bg-message: $black;
// --------------------
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
......@@ -8,9 +8,6 @@
// fonts
// --------------------
.wrapper--xblock {
@extend %t-copy-base;
overflow-y: scroll;
font-size: 62.5%;
background: $bg-view;
}
......@@ -18,17 +15,19 @@
// --------------------
// layout
// --------------------
[class^="wrapper-"] {
@extend %wrapper;
padding: 0;
}
// [class^="wrapper--"] {
// @extend %wrapper;
// padding: 0;
// }
// --------------------
// semantic dividers
// semantic elements, but visually hidden
// --------------------
.sr, hr.divider {
@extend %ui-text-sr;
.sr,
hr.divider,
.nav--contents {
@extend %text-sr;
}
......@@ -44,6 +43,6 @@
.nav--wizard,
.list--tips,
.field--group {
@extend %ui-no-list;
@extend %no-list;
@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 @@
font-weight: 700;
}
// --------------------
// titlecase
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.025rem;
}
// --------------------
// canned icon sizes
......@@ -54,88 +62,79 @@
// canned headings
// --------------------
%hd-alpha {
@include font-size(48);
@include lh(48);
@extend %t-weight4;
text-transform: uppercase;
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(24);
@include lh(24);
font-family: $f-title;
letter-spacing: 0.50rem;
color: $heading-primary-color;
}
%hd-bravo {
@extend %t-weight2;
@include font-size(24);
@include lh(24);
margin: 0 0 ($baseline-v/4) 0;
@extend %t-weight3;
@include font-size(21);
@include lh(21);
font-family: $f-title;
color: $heading-primary-color;
}
%hd-charlie {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(18);
@include lh(18);
margin: 0 0 ($baseline-v/2) 0;
font-family: $f-title;
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 {
@extend %t-weight1;
@extend %t-weight3;
@include font-size(16);
@include lh(16);
margin: 0 0 ($baseline-v/2) 0;
text-transform: uppercase;
font-family: $f-title;
letter-spacing: 0.125rem;
color: $heading-tertiary-color;
color: $heading-primary-color;
}
%hd-epsilon {
@extend %t-weight1;
@include font-size(14);
@include lh(14);
@extend %t-titlecase;
@include font-size(16);
@include lh(16);
font-family: $f-title;
color: $heading-secondary-color;
}
%hd-foxtrot {
@extend %t-weight1;
@extend %t-weight3;
@include font-size(16);
@include lh(16);
margin: 0 0 ($baseline-v/10) 0;
font-family: $f-title;
color: $heading-secondary-color;
}
%hd-golf {
@extend %t-weight1;
@include font-size(14);
@include lh(14);
margin: 0 0 ($baseline-v/10) 0;
text-transform: uppercase;
@extend %t-titlecase;
@include font-size(13);
@include lh(13);
font-family: $f-title;
letter-spacing: 0.25rem;
color: $heading-tertiary-color;
}
%hd-hotel {
@include font-size(24);
@include lh(24);
@extend %t-weight4;
text-transform: uppercase;
@extend %t-weight1;
@include font-size(13);
@include lh(13);
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;
letter-spacing: 0.25rem;
color: $heading-tertiary-color;
}
......@@ -143,15 +142,7 @@
// --------------------
// canned copy
// --------------------
%copy-base {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
font-family: $f-copy;
color: $copy-color;
}
%copy-lead {
%copy-alpha {
@extend %t-weight0;
@include font-size(24);
@include lh(24);
......@@ -159,27 +150,42 @@
color: $copy-color;
}
%copy-showcase {
%copy-bravo {
@include font-size(18);
@include lh(18);
color: $copy-color;
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 lh(14);
font-family: $f-copy;
color: $copy-color;
}
%copy-metadata {
%copy-epsilon {
@include font-size(12);
@include lh(12);
font-family: $f-copy;
color: $copy-supplemental-color;
}
%copy-foxtrot {
@include font-size(11);
@include lh(11);
font-family: $f-copy;
color: $copy-supplemental-color;
}
// --------------------
// canned actions
......
apps/openassessment/xblock/static/sass/xb/utilities/_mixins.scss
......@@ -22,7 +22,7 @@
// --------------------
@mixin font-size($sizeValue: 16){
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 @@
// --------------------
@mixin lh($fontSize: auto){
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 @@
// --------------------
// custom reset
// --------------------
* {
@include box-sizing(border-box);
}
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -10,6 +10,24 @@
$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/)
// --------------------
// 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
......@@ -116,13 +134,19 @@ $f-action: $f-sans-serif;
// --------------------
// application - colors
// --------------------
// application - colors: basic
$color-primary: $blue-s2;
$color-secondary: $blue;
$color-teritary: $blue-u2;
// application - colors: decorative
$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
$action-primary-color: tint($color-primary,10%);
......@@ -143,10 +167,10 @@ $action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: copy and headings
$heading-color: $gray-d5;
$heading-primary-color: $black;
$heading-secondary-color: $gray-l3;
$heading-tertiary-color: $gray-l4;
$heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l3;
$copy-color: $gray-l2;
$copy-color: $gray-l1;
$copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4;
......@@ -163,5 +187,6 @@ $selected-bg: $blue-t1;
$selected-color: $blue-s1;
// application - colors: view-based elements
$bg-view: $gray-l6;
$bg-view: $gray-l7;
$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