Skip to content

E
edx-platform
Commit 3b053980 by Andy Armstrong
Options

Address code review feedback

parent 749f9650
Showing with 404 additions and 400 deletions
lms/static/sass/discussion/views/_home.scss
...@@ -115,9 +115,9 @@ ...@@ -115,9 +115,9 @@
.row-item-full { .row-item-full {
.notification-checkbox { .notification-checkbox {
@include margin-right($baseline/2);
display: inline-block; display: inline-block;
@include padding($baseline/4, 0, $baseline/2, 0); @include padding($baseline/4, 0, $baseline/2, 0);
@include margin-right($baseline/2);
border-radius: 5px; border-radius: 5px;
border: 1px solid gray; border: 1px solid gray;
......
lms/static/sass/shared-v2/_components.scss
...@@ -56,33 +56,33 @@ ...@@ -56,33 +56,33 @@
display: inline-block; display: inline-block;
} }
.search-input { .search-box {
display: inline-block; display: inline-block;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
} }
.search-field { .search-field {
@include padding($baseline/4, $baseline*1.5, $baseline/4, $baseline/2);
transition: all $tmg-f2 ease-in-out; transition: all $tmg-f2 ease-in-out;
border: 1px solid $gray-l4; border: 1px solid $lms-border-color;
border-radius: 3px; border-radius: 3px;
padding: $baseline/4 $baseline*1.5;
font-family: inherit; font-family: inherit;
} }
.action-search { .action-search {
@include padding($baseline/5, $baseline/2, $baseline/5, $baseline/2);
text-shadow: none; text-shadow: none;
vertical-align: middle; vertical-align: middle;
padding: $baseline/5 $baseline/2;
} }
.action-clear { .action-clear {
@include right(0); @include right(0);
@include margin(0, ($baseline/4), 0, 0); @include margin(0, ($baseline/4), 0, 0);
@include padding($baseline/4, $baseline/4, $baseline/4, $baseline/4);
position: absolute; position: absolute;
top: 0; top: 0;
color: $lms-gray; color: $lms-gray;
padding: $baseline/4;
// STATE: hover and focus // STATE: hover and focus
&:hover, &:hover,
......
lms/static/sass/shared-v2/_footer.scss
...@@ -2,198 +2,199 @@ ...@@ -2,198 +2,199 @@
// ==================== // ====================
.wrapper-footer { .wrapper-footer {
@extend %ui-print-excluded;
box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid tint(palette(grayscale, light), 50%);
padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
background: $footer-bg;
clear: both;
footer#footer-openedx {
@include clearfix(); @include clearfix();
box-sizing: border-box; @extend %ui-print-excluded;
margin: 0 auto; box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid tint(palette(grayscale, light), 50%);
padding: 25px ($baseline/2) ($baseline*1.5);
background: $footer-bg;
p, ol, ul { footer#footer-openedx {
font-family: $sans-serif; @include clearfix();
box-sizing: border-box;
margin: 0 auto;
// override needed for poorly scoped font-family styling on p a:link {} p, ol, ul {
a { font-family: $sans-serif;
font-family: $sans-serif;
}
}
a { // override needed for poorly scoped font-family styling on p a:link {}
@extend %link-text; a {
border-bottom: none; font-family: $sans-serif;
}
}
&:hover, a {
&:focus, @extend %link-text;
&:active { border-bottom: none;
border-bottom: 1px dotted $link-color;
}
}
// colophon &:hover,
.colophon { &:focus,
@include span(12); &:active {
border-bottom: 1px dotted $link-color;
}
}
@include susy-media($bp-screen-sm) { // colophon
@include span(8); .colophon {
} @include span(12);
.nav-colophon { @include susy-media($bp-screen-sm) {
@include clearfix(); @include span(8);
margin: $footer_margin; }
ol { .nav-colophon {
list-style: none; @include clearfix();
} margin: $footer_margin;
li { ol {
@include float(left); list-style: none;
margin-right: ($baseline*0.75); }
a { li {
color: tint($black, 20%); @include float(left);
@include margin-right($baseline*0.75);
&:hover, a {
&:focus, color: tint($black, 20%);
&:active {
color: $link-color;
}
}
&:last-child { &:hover,
@include margin-right(0); &:focus,
} &:active {
} color: $link-color;
} }
}
.colophon-about { &:last-child {
@include clearfix(); @include margin-right(0);
}
}
}
img { .colophon-about {
@include float(left); @include clearfix();
width: 68px;
height: 34px; img {
margin-right: 0; @include float(left);
@include margin-right(0);
width: 68px;
height: 34px;
}
p {
@include float(left);
@include span(9);
@include margin-left($baseline);
@include padding-left($baseline);
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
}
}
} }
p { // references
@include float(left); .references {
@include span(9); @include span(4);
margin-left: $baseline; margin: -10px 0 0 0;
padding-left: $baseline; display: inline-block;
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
} }
}
}
// references .wrapper-logo {
.references { margin: ($baseline*0.75) 0;
@include span(4);
margin: -10px 0 0 0;
display: inline-block;
}
.wrapper-logo { a {
margin: ($baseline*0.75) 0; display: inline-block;
a { &:hover,
display: inline-block; &:focus {
border-bottom: 0;
&:hover { }
border-bottom: 0; }
} }
}
}
.copyright { .copyright {
@include text-align(left); @include text-align(left);
margin: -2px 0 8px 0; margin: -2px 0 8px;
font-size: font-size(xx-small); font-size: font-size(xx-small);
color: palette(grayscale, dark); color: palette(grayscale, dark);
} }
.nav-legal { .nav-legal {
@include clearfix(); @include clearfix();
@include text-align(left); @include text-align(left);
li { li {
display: inline-block; display: inline-block;
font-size: font-size(xx-small); font-size: font-size(xx-small);
} }
.nav-legal-02 a { .nav-legal-02 a {
&:before { &:before {
@include margin-right(($baseline/4)); @include margin-right(($baseline/4));
content: "-"; content: "-";
}
}
} }
}
}
.nav-social { .nav-social {
@include text-align(right); @include text-align(right);
margin: 0; margin: 0;
li { li {
display: inline-block; display: inline-block;
&:last-child { &:last-child {
margin-right: 0; @include margin-right(0);
} }
a { a {
display: block; display: block;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
border: none; border: none;
} }
} }
img { img {
display: block; display: block;
}
}
} }
}
}
// platform Open edX logo and link // platform Open edX logo and link
.footer-about-openedx { .footer-about-openedx {
@include span(12); @include span(12);
@include text-align(right); @include text-align(right);
vertical-align: bottom; vertical-align: bottom;
@include susy-media($bp-screen-sm) {
@include span(4);
@include margin-right(0);
}
@include susy-media($bp-screen-sm) {
@include span(4);
@include margin-right(0);
}
a {
a { @include float(right);
@include float(right); display: inline-block;
display: inline-block;
&:hover { &:hover {
border-bottom: none; border-bottom: none;
}
}
} }
}
} }
}
} }
// marketing site design syncing // marketing site design syncing
.view-register, .view-register,
.view-login, .view-login,
.view-passwordreset { .view-passwordreset {
.wrapper-footer footer { .wrapper-footer footer {
width: 960px; width: 960px;
.colophon-about img { .colophon-about img {
margin-top: ($baseline*1.5); margin-top: ($baseline*1.5);
}
} }
}
} }
lms/static/sass/shared-v2/_layouts.scss
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
.content-wrapper { .content-wrapper {
max-width: 1180px; max-width: 1180px;
padding-top: ($baseline/2); padding: {
padding-bottom: ($baseline*2); top: $baseline/2;
bottom: $baseline*2;
}
.container { .container {
border: 1px solid #c8c8c8; border: 1px solid $lms-border-color;
background-color: $lms-container-background-color; background-color: $lms-container-background-color;
padding: $baseline; padding: $baseline;
} }
...@@ -44,20 +46,20 @@ ...@@ -44,20 +46,20 @@
} }
.form-actions > * { .form-actions > * {
margin-left: ($baseline/2); @include margin-left($baseline/2);
vertical-align: middle; vertical-align: middle;
min-width: 200px; min-width: 200px;
height: 34px; height: 34px;
} }
.form-actions > button { .form-actions > button {
@include padding($baseline/5, $baseline/5, $baseline/5, $baseline/5); padding: $baseline/5;
min-width: 200px; min-width: 200px;
height: 34px; height: 34px;
} }
.form-actions > *:first-child { .form-actions > *:first-child {
margin-left: 0; @include margin-left(0);
} }
} }
} }
......
lms/static/sass/shared-v2/_modal.scss
...@@ -11,261 +11,261 @@ ...@@ -11,261 +11,261 @@
} }
.modal { .modal {
@include span(5); @include span(5);
z-index: z-index(mid-front);
display: none;
position: absolute;
left: 50%;
padding: 8px;
border-radius: 3px;
box-shadow: 0 0px 5px 0 $shadow-d1;
background: $gray-d2;
color: $base-font-color;
.inner-wrapper {
z-index: z-index(mid-front); z-index: z-index(mid-front);
background: $modal-bg-color; display: none;
border-radius: 0; position: absolute;
border: 1px solid $lms-border-color; left: 50%;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); padding: 8px;
overflow: hidden; border-radius: 3px;
padding-left: ($baseline/2); box-shadow: 0 0 5px 0 $shadow-d1;
padding-right: ($baseline/2); background: $gray-d2;
padding-bottom: ($baseline/2); color: $base-font-color;
position: relative;
.inner-wrapper {
p { z-index: z-index(mid-front);
font-size: font-size(small); background: $modal-bg-color;
line-height: 1.4; border-radius: 0;
} border: 1px solid $lms-border-color;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
a { overflow: hidden;
&:hover, padding-left: ($baseline/2);
&:focus { padding-right: ($baseline/2);
text-decoration: underline; padding-bottom: ($baseline/2);
}
}
header {
z-index: z-index(mid-front);
margin-bottom: ($baseline*1.5);
overflow: hidden;
padding: 28px $baseline 0;
position: relative;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: 1;
}
hr {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px;
width: 100%;
border: none;
margin: 0;
position: relative; position: relative;
z-index: 2;
&::after {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
width: 100%;
bottom: 0;
content: '';
display: block;
position: absolute;
top: -1px;
}
}
h2 { p {
@extend .hd-4; font-size: font-size(small);
position: relative; line-height: 1.4;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
z-index: 2;
text-transform: uppercase;
font-family: $font-family-serif;
.edx {
text-transform: none;
} }
}
}
.modal-form-error {
background: tint($red,90%);
border: 1px solid rgb(143, 14, 14);
color: rgb(143, 14, 14);
display: none;
margin-bottom: $baseline;
padding: 12px;
}
.notice {
background: $yellow;
border: 1px solid darken($yellow, 60%);
color: darken($yellow, 60%);
display: none;
margin-bottom: $baseline;
padding: 12px;
}
.activation-message, .message { a {
padding: 0 ($baseline*2) ($baseline/2); &:hover,
&:focus {
text-decoration: underline;
}
}
p { header {
margin-bottom: ($baseline/2); z-index: z-index(mid-front);
} margin-bottom: ($baseline*1.5);
} overflow: hidden;
padding: 28px $baseline 0;
position: relative;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: 1;
}
hr {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px;
width: 100%;
border: none;
margin: 0;
position: relative;
z-index: 2;
&::after {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
width: 100%;
bottom: 0;
content: '';
display: block;
position: absolute;
top: -1px;
}
}
h2 {
@extend .hd-4;
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
z-index: 2;
text-transform: uppercase;
font-family: $font-family-serif;
.edx {
text-transform: none;
}
}
}
form { .modal-form-error {
margin-bottom: 12px; background: tint($red,90%);
padding: 0 ($baseline*2) $baseline; border: 1px solid rgb(143, 14, 14);
position: relative; color: rgb(143, 14, 14);
z-index: 2; display: none;
margin-bottom: $baseline;
.input-group { padding: 12px;
@include clearfix(); }
border-bottom: 1px solid rgb(210,210,210);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
}
label { .notice {
color: $text-color; background: $yellow;
font: { border: 1px solid darken($yellow, 60%);
family: $font-family-serif; color: darken($yellow, 60%);
style: italic; display: none;
margin-bottom: $baseline;
padding: 12px;
} }
line-height: 1.6;
&.field-error { .activation-message, .message {
display: block; padding: 0 ($baseline*2) ($baseline/2);
color: #8F0E0E;
+ input, + textarea { p {
border: 1px solid #CA1111; margin-bottom: ($baseline/2);
color: #8F0E0E; }
}
} }
}
input[type="checkbox"] { form {
margin-right: ($baseline/4); margin-bottom: 12px;
} padding: 0 ($baseline*2) $baseline;
position: relative;
z-index: 2;
.input-group {
@include clearfix();
border-bottom: 1px solid rgb(210,210,210);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
}
label {
color: $text-color;
font: {
family: $font-family-serif;
style: italic;
}
line-height: 1.6;
&.field-error {
display: block;
color: #8F0E0E;
+ input, + textarea {
border: 1px solid #CA1111;
color: #8F0E0E;
}
}
}
input[type="checkbox"] {
@include margin-right($baseline/4);
}
textarea {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: $baseline;
width: 100%;
}
input[type="email"],
input[type="text"],
input[type="password"] {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: $baseline;
width: 100%;
}
.submit {
padding-top: ($baseline/2);
input[type="submit"] {
@extend .btn-brand;
display: block;
height: auto;
margin: 0 auto;
width: 100%;
white-space: normal;
}
}
}
textarea { .close-modal {
background: rgb(255,255,255); @include transition(all 0.15s ease-out 0s);
display: block; border-radius: 2px;
height: 45px; cursor: pointer;
margin-bottom: $baseline; display: inline-block;
width: 100%; padding: 10px;
} position: absolute;
right: 2px;
input[type="email"], top: 0;
input[type="text"], z-index: z-index(front);
input[type="password"] { color: $lighter-base-font-color;
background: rgb(255,255,255); font: {
display: block; size: font-size(large);
height: 45px; family: $font-family-sans-serif;
margin-bottom: $baseline; }
width: 100%; line-height: 1;
} text-align: center;
border: none;
.submit { background: transparent;
padding-top: ($baseline/2); text-shadow: none;
letter-spacing: 0;
input[type="submit"] { text-transform: none;
@extend .btn-brand;
display: block; &:hover,
height: auto; &:focus {
margin: 0 auto; color: $base-font-color;
width: 100%; text-decoration: none;
white-space: normal; opacity: 0.8;
}
&:focus {
border: none !important;
}
} }
}
} }
.close-modal { #help_wrapper,
@include transition(all 0.15s ease-out 0s); #feedback_form_wrapper,
border-radius: 2px; .discussion-alert-wrapper {
cursor: pointer; padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
display: inline-block;
padding: 10px;
position: absolute;
right: 2px;
top: 0px;
z-index: z-index(front);
color: $lighter-base-font-color;
font: {
size: font-size(large);
family: $font-family-sans-serif;
}
line-height: 1;
text-align: center;
border: none;
background: transparent;
text-shadow: none;
letter-spacing: 0;
text-transform: none;
&:hover,
&:focus {
color: $base-font-color;
text-decoration: none;
opacity: 0.8;
}
&:focus {
border: none !important;
}
}
}
#help_wrapper, header {
#feedback_form_wrapper, @include padding-left(0);
.discussion-alert-wrapper { @include padding-right(0);
padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5); margin-bottom: $baseline;
}
header { .note {
margin-bottom: $baseline; font: {
padding-right: 0; size: font-size(x-small);
padding-left: 0; family: $font-family-sans-serif;
}
line-height: 1.475;
margin-top: ($baseline/2);
color: $lighter-base-font-color;
}
} }
.note { .tip {
font: { font-size: font-size(x-small);
size: font-size(x-small); display: block;
family: $font-family-sans-serif; color: $dark-gray;
}
line-height: 1.475;
margin-top: ($baseline/2);
color: $lighter-base-font-color;
} }
}
.tip {
font-size: font-size(x-small);
display: block;
color: $dark-gray;
}
} }
.leanModal_box { .leanModal_box {
@extend .modal; @extend .modal;
} }
lms/templates/ux/reference/course-skeleton.html
...@@ -13,19 +13,19 @@ ...@@ -13,19 +13,19 @@
<div class="course-material"> <div class="course-material">
<ol class="tabs course-tabs"> <ol class="tabs course-tabs">
<li class="tab"> <li class="tab">
<a href="index.html" class=""> <a href="index.html">
Home Home
</a> </a>
</li> </li>
<li class="tab"> <li class="tab">
<a href="#" class=""> <a href="#">
Course Course
</a> </a>
</li> </li>
<li class="tab"> <li class="tab">
<a href="/courses/course-v1:AndyA+AA101+1/discussion/forum" class="active"> <a href="course-skeleton.html" class="active">
Skeleton Skeleton
<span class="sr-only">, current location</span> <span class="sr-only">, current location</span>
</a> </a>
...@@ -43,19 +43,20 @@ ...@@ -43,19 +43,20 @@
<div class="page-header-secondary"> <div class="page-header-secondary">
<div class="form-actions"> <div class="form-actions">
<button class="btn-neutral btn-small">Click Me!</button> <button class="btn-neutral btn-small">Click Me!</button>
## TODO: note that this search component markup is provisional
## - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
## - update the Pattern Library's markup to match
<div class="page-header-search"> <div class="page-header-search">
<form class="search-form"> <form class="search-form" role="search">
<div class="search-input"> <div class="search-box">
<label for="search-skeleton" class="search-label sr-only">Search</label> <input class="search-field" type="text" value=""
<input id="search-skeleton" class="search-field" type="text" value="" placeholder="Search"> aria-label="Search all the things" placeholder="Search all the things">
<button type="button" class="btn action action-clear" aria-label="Clear search"> <button type="button" class="btn action action-clear" aria-label="Clear search">
<span class="fa fa-times-circle" aria-hidden="true"></span> <span class="fa fa-times-circle" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button> </button>
</div> </div>
<button type="submit" class="btn-brand action action-search"> <button type="submit" class="btn-brand action action-search" aria-label="Search items">
<span class="fa fa-search" aria-hidden="true"></span> <span class="fa fa-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button> </button>
</form> </form>
</div> </div>
......
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