Skip to content

E
edx-platform
Commit 3b053980 by Andy Armstrong
Options

Address code review feedback

parent 749f9650
Showing with 172 additions and 168 deletions
lms/static/sass/discussion/views/_home.scss
......@@ -115,9 +115,9 @@
.row-item-full {
.notification-checkbox {
@include margin-right($baseline/2);
display: inline-block;
@include padding($baseline/4, 0, $baseline/2, 0);
@include margin-right($baseline/2);
border-radius: 5px;
border: 1px solid gray;
......
lms/static/sass/shared-v2/_components.scss
......@@ -56,33 +56,33 @@
display: inline-block;
}
.search-input {
.search-box {
display: inline-block;
position: relative;
vertical-align: middle;
}
.search-field {
@include padding($baseline/4, $baseline*1.5, $baseline/4, $baseline/2);
transition: all $tmg-f2 ease-in-out;
border: 1px solid $gray-l4;
border: 1px solid $lms-border-color;
border-radius: 3px;
padding: $baseline/4 $baseline*1.5;
font-family: inherit;
}
.action-search {
@include padding($baseline/5, $baseline/2, $baseline/5, $baseline/2);
text-shadow: none;
vertical-align: middle;
padding: $baseline/5 $baseline/2;
}
.action-clear {
@include right(0);
@include margin(0, ($baseline/4), 0, 0);
@include padding($baseline/4, $baseline/4, $baseline/4, $baseline/4);
position: absolute;
top: 0;
color: $lms-gray;
padding: $baseline/4;
// STATE: hover and focus
&:hover,
......
lms/static/sass/shared-v2/_footer.scss
......@@ -2,198 +2,199 @@
// ====================
.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();
box-sizing: border-box;
margin: 0 auto;
@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);
background: $footer-bg;
p, ol, ul {
font-family: $sans-serif;
footer#footer-openedx {
@include clearfix();
box-sizing: border-box;
margin: 0 auto;
// override needed for poorly scoped font-family styling on p a:link {}
a {
font-family: $sans-serif;
}
}
p, ol, ul {
font-family: $sans-serif;
a {
@extend %link-text;
border-bottom: none;
// override needed for poorly scoped font-family styling on p a:link {}
a {
font-family: $sans-serif;
}
}
&:hover,
&:focus,
&:active {
border-bottom: 1px dotted $link-color;
}
}
a {
@extend %link-text;
border-bottom: none;
// colophon
.colophon {
@include span(12);
&:hover,
&:focus,
&:active {
border-bottom: 1px dotted $link-color;
}
}
@include susy-media($bp-screen-sm) {
@include span(8);
}
// colophon
.colophon {
@include span(12);
.nav-colophon {
@include clearfix();
margin: $footer_margin;
@include susy-media($bp-screen-sm) {
@include span(8);
}
ol {
list-style: none;
}
.nav-colophon {
@include clearfix();
margin: $footer_margin;
li {
@include float(left);
margin-right: ($baseline*0.75);
ol {
list-style: none;
}
a {
color: tint($black, 20%);
li {
@include float(left);
@include margin-right($baseline*0.75);
&:hover,
&:focus,
&:active {
color: $link-color;
}
}
a {
color: tint($black, 20%);
&:last-child {
@include margin-right(0);
}
}
}
&:hover,
&:focus,
&:active {
color: $link-color;
}
}
.colophon-about {
@include clearfix();
&:last-child {
@include margin-right(0);
}
}
}
img {
@include float(left);
width: 68px;
height: 34px;
margin-right: 0;
.colophon-about {
@include clearfix();
img {
@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 {
@include float(left);
@include span(9);
margin-left: $baseline;
padding-left: $baseline;
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
// references
.references {
@include span(4);
margin: -10px 0 0 0;
display: inline-block;
}
}
}
// references
.references {
@include span(4);
margin: -10px 0 0 0;
display: inline-block;
}
.wrapper-logo {
margin: ($baseline*0.75) 0;
.wrapper-logo {
margin: ($baseline*0.75) 0;
a {
display: inline-block;
a {
display: inline-block;
&:hover {
border-bottom: 0;
&:hover,
&:focus {
border-bottom: 0;
}
}
}
}
}
.copyright {
@include text-align(left);
margin: -2px 0 8px 0;
font-size: font-size(xx-small);
color: palette(grayscale, dark);
}
.copyright {
@include text-align(left);
margin: -2px 0 8px;
font-size: font-size(xx-small);
color: palette(grayscale, dark);
}
.nav-legal {
@include clearfix();
@include text-align(left);
.nav-legal {
@include clearfix();
@include text-align(left);
li {
display: inline-block;
font-size: font-size(xx-small);
}
li {
display: inline-block;
font-size: font-size(xx-small);
}
.nav-legal-02 a {
&:before {
@include margin-right(($baseline/4));
content: "-";
.nav-legal-02 a {
&:before {
@include margin-right(($baseline/4));
content: "-";
}
}
}
}
}
.nav-social {
@include text-align(right);
margin: 0;
.nav-social {
@include text-align(right);
margin: 0;
li {
display: inline-block;
li {
display: inline-block;
&:last-child {
margin-right: 0;
}
&:last-child {
@include margin-right(0);
}
a {
display: block;
a {
display: block;
&:hover,
&:focus,
&:active {
border: none;
}
}
&:hover,
&:focus,
&:active {
border: none;
}
}
img {
display: block;
img {
display: block;
}
}
}
}
}
// platform Open edX logo and link
.footer-about-openedx {
@include span(12);
@include text-align(right);
vertical-align: bottom;
// platform Open edX logo and link
.footer-about-openedx {
@include span(12);
@include text-align(right);
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 {
@include float(right);
display: inline-block;
a {
@include float(right);
display: inline-block;
&:hover {
border-bottom: none;
&:hover {
border-bottom: none;
}
}
}
}
}
}
}
// marketing site design syncing
.view-register,
.view-login,
.view-passwordreset {
.wrapper-footer footer {
width: 960px;
.wrapper-footer footer {
width: 960px;
.colophon-about img {
margin-top: ($baseline*1.5);
.colophon-about img {
margin-top: ($baseline*1.5);
}
}
}
}
lms/static/sass/shared-v2/_layouts.scss
......@@ -2,11 +2,13 @@
.content-wrapper {
max-width: 1180px;
padding-top: ($baseline/2);
padding-bottom: ($baseline*2);
padding: {
top: $baseline/2;
bottom: $baseline*2;
}
.container {
border: 1px solid #c8c8c8;
border: 1px solid $lms-border-color;
background-color: $lms-container-background-color;
padding: $baseline;
}
......@@ -44,20 +46,20 @@
}
.form-actions > * {
margin-left: ($baseline/2);
@include margin-left($baseline/2);
vertical-align: middle;
min-width: 200px;
height: 34px;
}
.form-actions > button {
@include padding($baseline/5, $baseline/5, $baseline/5, $baseline/5);
padding: $baseline/5;
min-width: 200px;
height: 34px;
}
.form-actions > *:first-child {
margin-left: 0;
@include margin-left(0);
}
}
}
......
lms/templates/ux/reference/course-skeleton.html
......@@ -13,19 +13,19 @@
<div class="course-material">
<ol class="tabs course-tabs">
<li class="tab">
<a href="index.html" class="">
<a href="index.html">
Home
</a>
</li>
<li class="tab">
<a href="#" class="">
<a href="#">
Course
</a>
</li>
<li class="tab">
<a href="/courses/course-v1:AndyA+AA101+1/discussion/forum" class="active">
<a href="course-skeleton.html" class="active">
Skeleton
<span class="sr-only">, current location</span>
</a>
......@@ -43,19 +43,20 @@
<div class="page-header-secondary">
<div class="form-actions">
<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">
<form class="search-form">
<div class="search-input">
<label for="search-skeleton" class="search-label sr-only">Search</label>
<input id="search-skeleton" class="search-field" type="text" value="" placeholder="Search">
<form class="search-form" role="search">
<div class="search-box">
<input class="search-field" type="text" value=""
aria-label="Search all the things" placeholder="Search all the things">
<button type="button" class="btn action action-clear" aria-label="Clear search">
<span class="fa fa-times-circle" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</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="sr-only">Search</span>
</button>
</form>
</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