Commit 3b053980 by Andy Armstrong

Address code review feedback

parent 749f9650
......@@ -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;
......
......@@ -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,
......
......@@ -2,12 +2,12 @@
// ====================
.wrapper-footer {
@include clearfix();
@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);
padding: 25px ($baseline/2) ($baseline*1.5);
background: $footer-bg;
clear: both;
footer#footer-openedx {
@include clearfix();
......@@ -52,7 +52,7 @@
li {
@include float(left);
margin-right: ($baseline*0.75);
@include margin-right($baseline*0.75);
a {
color: tint($black, 20%);
......@@ -75,16 +75,16 @@
img {
@include float(left);
@include margin-right(0);
width: 68px;
height: 34px;
margin-right: 0;
}
p {
@include float(left);
@include span(9);
margin-left: $baseline;
padding-left: $baseline;
@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;
}
......@@ -104,7 +104,8 @@
a {
display: inline-block;
&:hover {
&:hover,
&:focus {
border-bottom: 0;
}
}
......@@ -112,7 +113,7 @@
.copyright {
@include text-align(left);
margin: -2px 0 8px 0;
margin: -2px 0 8px;
font-size: font-size(xx-small);
color: palette(grayscale, dark);
}
......@@ -142,7 +143,7 @@
display: inline-block;
&:last-child {
margin-right: 0;
@include margin-right(0);
}
a {
......
......@@ -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);
}
}
}
......
......@@ -18,7 +18,7 @@
left: 50%;
padding: 8px;
border-radius: 3px;
box-shadow: 0 0px 5px 0 $shadow-d1;
box-shadow: 0 0 5px 0 $shadow-d1;
background: $gray-d2;
color: $base-font-color;
......@@ -166,7 +166,7 @@
}
input[type="checkbox"] {
margin-right: ($baseline/4);
@include margin-right($baseline/4);
}
textarea {
......@@ -209,7 +209,7 @@
padding: 10px;
position: absolute;
right: 2px;
top: 0px;
top: 0;
z-index: z-index(front);
color: $lighter-base-font-color;
font: {
......@@ -243,9 +243,9 @@
padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
header {
@include padding-left(0);
@include padding-right(0);
margin-bottom: $baseline;
padding-right: 0;
padding-left: 0;
}
.note {
......
......@@ -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