Skip to content

E
edx-platform
Commit a7b88550 by Calen Pennington
Options

Merge pull request #401 from MITx/feature/kfiedler/courseware-style 

Added tooltip styles, made all buttons the same, and other small changes...
parents 0297aff7 731f1cd7
Showing with 101 additions and 127 deletions
common/lib/xmodule/xmodule/css/video/display.scss
......@@ -14,7 +14,7 @@ div.video {
section.video-player {
height: 0;
overflow: hidden;
// overflow: hidden;
padding-bottom: 56.25%;
position: relative;
......@@ -45,12 +45,13 @@ div.video {
div.slider {
@extend .clearfix;
background: #c2c2c2;
border: none;
border-bottom: 1px solid #000;
border: 1px solid #000;
@include border-radius(0);
border-top: 1px solid #000;
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
height: 7px;
margin-left: -1px;
margin-right: -1px;
@include transition(height 2.0s ease-in-out);
div.ui-widget-header {
......@@ -58,43 +59,12 @@ div.video {
@include box-shadow(inset 0 1px 0 #999);
}
.ui-tooltip.qtip .ui-tooltip-content {
background: $mit-red;
border: 1px solid darken($mit-red, 20%);
@include border-radius(2px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
color: #fff;
font: bold 12px $body-font-family;
margin-bottom: 6px;
margin-right: 0;
overflow: visible;
padding: 4px;
text-align: center;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
&::after {
background: $mit-red;
border-bottom: 1px solid darken($mit-red, 20%);
border-right: 1px solid darken($mit-red, 20%);
bottom: -5px;
content: " ";
display: block;
height: 7px;
left: 50%;
margin-left: -3px;
position: absolute;
@include transform(rotate(45deg));
width: 7px;
}
}
a.ui-slider-handle {
background: $mit-red url(../images/slider-handle.png) center center no-repeat;
background: $pink url(../images/slider-handle.png) center center no-repeat;
@include background-size(50%);
border: 1px solid darken($mit-red, 20%);
border: 1px solid darken($pink, 20%);
@include border-radius(15px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
@include box-shadow(inset 0 1px 0 lighten($pink, 10%));
cursor: pointer;
height: 15px;
margin-left: -7px;
......@@ -103,7 +73,7 @@ div.video {
width: 15px;
&:focus, &:hover {
background-color: lighten($mit-red, 10%);
background-color: lighten($pink, 10%);
outline: none;
}
}
......
lms/static/sass/course.scss
......@@ -7,6 +7,7 @@
@import 'base/base';
@import 'base/extends';
@import 'base/animations';
@import 'shared/tooltips';
// Course base / layout styles
@import 'course/layout/courseware_subnav';
......
lms/static/sass/course/_info.scss
......@@ -15,15 +15,15 @@ div.info-wrapper {
> ol {
list-style: none;
padding-left: 0;
margin-bottom: lh();
padding-left: 0;
> li {
@extend .clearfix;
border-bottom: 1px solid lighten($border-color, 10%);
list-style-type: disk;
margin-bottom: lh();
padding-bottom: lh(.5);
list-style-type: disk;
&:first-child {
margin: 0 (-(lh(.5))) lh();
......@@ -41,10 +41,10 @@ div.info-wrapper {
h2 {
float: left;
margin: 0 flex-gutter() 0 0;
width: flex-grid(2, 9);
font-size: $body-font-size;
font-weight: bold;
margin: 0 flex-gutter() 0 0;
width: flex-grid(2, 9);
}
section.update-description {
......@@ -68,15 +68,15 @@ div.info-wrapper {
section.handouts {
@extend .sidebar;
border-left: 1px solid #d3d3d3;
border-left: 1px solid $border-color;
@include border-radius(0 4px 4px 0);
@include box-shadow(none);
border-right: 0;
@include box-shadow(none);
h1 {
@extend .bottom-border;
padding: lh(.5) lh(.5);
margin-bottom: 0;
padding: lh(.5) lh(.5);
}
ol {
......@@ -90,8 +90,9 @@ div.info-wrapper {
&.expandable,
&.collapsable {
h4 {
font-weight: normal;
color: $blue;
font-size: 1em;
font-weight: normal;
padding: lh(.25) 0 lh(.25) lh(1.5);
}
}
......@@ -145,7 +146,8 @@ div.info-wrapper {
filter: alpha(opacity=60);
+ h4 {
background-color: #e3e3e3;
@extend a:hover;
text-decoration: underline;
}
}
......
lms/static/sass/course/base/_base.scss
......@@ -3,6 +3,7 @@ body {
}
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a {
text-align: left;
font-family: $sans-serif;
}
......
lms/static/sass/course/base/_extends.scss
......@@ -25,24 +25,12 @@ h1.top-header {
}
}
.action-link {
a {
color: $mit-red;
&:hover {
color: darken($mit-red, 20%);
text-decoration: none;
}
}
}
.content {
@include box-sizing(border-box);
display: table-cell;
padding: lh();
vertical-align: top;
width: flex-grid(9) + flex-gutter();
overflow: hidden;
@media print {
@include box-shadow(none);
......@@ -164,7 +152,6 @@ h1.top-header {
.topbar {
@extend .clearfix;
border-bottom: 1px solid $border-color;
font-size: 14px;
@media print {
display: none;
......@@ -193,17 +180,17 @@ h1.top-header {
h2 {
display: block;
width: 700px;
float: left;
font-size: 0.9em;
font-weight: 600;
line-height: 40px;
letter-spacing: 0;
text-transform: none;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #fff;
text-transform: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 700px;
.provider {
font: inherit;
......@@ -211,4 +198,4 @@ h1.top-header {
color: #6d6d6d;
}
}
}
\ No newline at end of file
}
lms/static/sass/course/courseware/_courseware.scss
......@@ -146,13 +146,13 @@ div.course-wrapper {
@include border-radius(0);
a.ui-slider-handle {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
@include box-shadow(inset 0 1px 0 lighten($pink, 10%));
background: $mit-red url(../images/slider-bars.png) center center no-repeat;
border: 1px solid darken($mit-red, 20%);
border: 1px solid darken($pink, 20%);
cursor: pointer;
&:hover, &:focus {
background-color: lighten($mit-red, 10%);
background-color: lighten($pink, 10%);
outline: none;
}
}
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -13,7 +13,7 @@ section.course-index {
div#accordion {
h3 {
@include border-radius(0);
border-top: 1px solid #e3e3e3;
border-top: 1px solid lighten($border-color, 10%);
font-size: em(16, 18);
margin: 0;
overflow: hidden;
......@@ -34,6 +34,7 @@ section.course-index {
}
&.ui-accordion-header {
border-bottom: none;
color: #000;
a {
......
lms/static/sass/course/discussion/_answers.scss
......@@ -17,7 +17,6 @@ div.answer-controls {
margin-left: flex-gutter();
nav {
@extend .action-link;
float: right;
margin-top: 34px;
......@@ -144,7 +143,7 @@ div.answer-actions {
text-decoration: none;
&.question-delete {
// color: $mit-red;
color: $mit-red;
}
}
}
......
lms/static/sass/course/discussion/_forms.scss
......@@ -92,7 +92,7 @@ form.answer-form {
margin-left: 2.5%;
padding-left: 1.5%;
border-left: 1px dashed #ddd;
color: $mit-red;;
color: $mit-red;
}
ul, ol, pre {
......
lms/static/sass/course/wiki/_sidebar.scss
......@@ -14,14 +14,6 @@ div#wiki_panel {
}
}
form {
input[type="submit"]{
@extend .light-button;
text-transform: none;
text-shadow: none;
}
}
div#wiki_create_form {
@extend .clearfix;
padding: lh(.5) lh() lh(.5) 0;
......@@ -53,4 +45,12 @@ div#wiki_panel {
}
}
}
input#wiki_search_input_submit {
padding: 4px 8px;
}
input#wiki_search_input {
margin-right: 10px;
}
}
lms/static/sass/shared/_forms.scss
form {
font-size: 1em;
}
label {
color: $base-font-color;
font: italic 300 1rem/1.6rem $serif;
margin-bottom: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.4);
-webkit-font-smoothing: antialiased;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
background: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font: italic 300 1rem/1.6rem $serif;
height: 35px;
padding: 5px 12px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
label {
color: $base-font-color;
font: italic 300 1rem/1.6rem $serif;
margin-bottom: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.4);
-webkit-font-smoothing: antialiased;
}
&:last-child {
margin-right: 0px;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
background: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font: italic 300 1rem/1.6rem $serif;
height: 35px;
padding: 5px 12px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
&:focus {
border-color: lighten($blue, 20%);
@include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
outline: none;
}
&:last-child {
margin-right: 0px;
}
textarea {
height: 60px;
&:focus {
border-color: lighten($blue, 20%);
@include box-shadow(0 0 6px 0 rgba($blue, 0.4), inset 0 0 4px 0 rgba(0,0,0, 0.15));
outline: none;
}
}
input[type="submit"] {
@include button(shiny, $blue);
@include border-radius(3px);
font: normal 1.2rem/1.6rem $sans-serif;
height: 35px;
letter-spacing: 1px;
text-transform: uppercase;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
textarea {
height: 60px;
}
input[type="submit"],
input[type="button"],
.button {
@include border-radius(3px);
@include button(shiny, $blue);
font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 4px 20px;
text-transform: uppercase;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
lms/static/sass/shared/_tooltips.scss 0 → 100644
.ui-tooltip.qtip .ui-tooltip-content {
background: rgba($pink, .8);
border: 0;
color: #fff;
font: bold 12px $body-font-family;
margin-bottom: 6px;
margin-right: 0;
overflow: visible;
padding: 4px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
lms/templates/simplewiki/simplewiki_base.html
......@@ -110,7 +110,7 @@
</div>
<ul>
<li>
<input type="submit" class="button" value="Create" style="display: inline-block; margin-right: 2px; font-weight: bold;" />
<input type="submit" class="button" value="Create" />
</li>
</ul>
</form>
......@@ -120,8 +120,8 @@
<li class="search">
<form method="GET" action='${wiki_reverse("wiki_search_articles", course=course, namespace=namespace)}'>
<label class="wiki_box_title">Search</label>
<input type="text" placeholder="Search" name="value" id="wiki_search_input" style="width: 71%" value="${wiki_search_query if wiki_search_query is not UNDEFINED else '' |h}"/>
<input type="submit" id="wiki_search_input_submit" value="Go!" style="width: 20%" />
<input type="text" placeholder="Search" name="value" id="wiki_search_input" value="${wiki_search_query if wiki_search_query is not UNDEFINED else '' |h}"/>
<input type="submit" id="wiki_search_input_submit" value="Go!" />
</form>
</li>
</ul>
......
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