Skip to content

E
edx-platform
Commit 3dd5733c by Giulio Gratta
Options

first round of color replacements with variables

parent a8084628
Showing with 238 additions and 152 deletions
lms/static/sass/base/_base.scss
......@@ -2,8 +2,8 @@
// overflow-y: scroll;
// }
body {
background: rgb(250,250,250);
html, body {
background: $body-bg;
font-family: $sans-serif;
font-size: 1em;
font-style: normal;
......@@ -61,20 +61,20 @@ p + p, ul + p, ol + p {
p {
a:link, a:visited {
color: $blue;
color: $link-color;
font: normal 1em/1em $serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
color: $blue;
color: $link-color;
text-decoration: underline;
}
}
}
a:link, a:visited {
color: $blue;
color: $link-color;
font: normal 1em/1em $sans-serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
......@@ -87,8 +87,8 @@ a:link, a:visited {
.content-wrapper {
width: flex-grid(12);
margin: 0 auto;
background: $content-wrapper-bg;
padding-bottom: ($baseline*2);
background: rgb(255,255,255);
}
.container {
......@@ -164,7 +164,7 @@ mark {
display: none;
padding: 10px;
@include linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .0));
background-color: $pink;
background-color: $site-status-color;
box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
font-size: 14px;
......
lms/static/sass/base/_extends.scss
.faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
@include background-image($faded-hr-image-1);
height: 1px;
width: 100%;
}
.faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
@include background-image($faded-hr-image-4);
height: 1px;
width: 100%;
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
@include background-image($faded-hr-image-5);
height: 1px;
width: 100%;
}
.faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
@include background-image($faded-hr-image-1);
height: 100%;
width: 1px;
}
.faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
@include background-image($faded-hr-image-6);
background: transparent;
height: 100%;
width: 1px;
}
......@@ -66,14 +57,12 @@
}
.fade-right-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1)));
@include background-image($faded-hr-image-2);
border: none;
}
.fade-left-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
rgba(200,200,200, 0)));
@include background-image($faded-hr-image-3);
border: none;
}
......
lms/static/sass/base/_variables.scss
......@@ -14,6 +14,14 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif;
$serif: $georgia;
$body-font-size: em(14);
$body-line-height: golden-ratio(.875em, 1);
$base-font-color: rgb(60,60,60);
$baseFontColor: rgb(60,60,60);
$base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$very-light-text: #fff;
$white: rgb(255,255,255);
$black: rgb(0,0,0);
$blue: rgb(29,157,217);
......@@ -52,6 +60,66 @@ $baseFontColor: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$text-color: $dark-gray;
$body-font-family: $sans-serif;
$body-font-size: em(14);
$body-line-height: golden-ratio(.875em, 1);
$body-bg: rgb(250,250,250);
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
$header-bg: transparent;
$courseware-header-image: linear-gradient(top, #fff, #eee);
$courseware-header-bg: transparent;
$footer-bg: transparent;
$courseware-footer-border: none;
$courseware-footer-shadow: none;
$courseware-footer-margin: 0px;
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
$button-bg-color: transparent;
$button-bg-hover-color: #fff;
$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));
$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0));
$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0));
$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0));
$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245));
$dashboard-profile-header-color: transparent;
$dashboard-profile-color: rgb(252,252,252);
$dot-color: $light-gray;
$content-wrapper-bg: rgb(255,255,255);
$course-bg-color: #d6d6d6;
$course-bg-image: url(../images/bg-texture.png);
$course-profile-bg: rgb(245,245,245);
$course-header-bg: rgba(255,255,255, 0.93);
$border-color-1: rgb(190,190,190);
$border-color-2: rgb(200,200,200);
$border-color-3: rgb(100,100,100);
$border-color-4: rgb(252,252,252);
$link-color: $blue;
$link-hover: $pink;
$selection-color-1: $pink;
$selection-color-2: #444;
$site-status-color: $pink;
$button-color: $blue;
$button-archive-color: #eee;
$shadow-color: $blue;
$sidebar-chapter-bg-top: rgba(255, 255, 255, .6);
$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
$sidebar-chapter-bg: #eee;
$sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
$form-bg-color: #fff;
$modal-bg-color: rgb(245,245,245);
//-----------------
// CSS BG Images
//-----------------
$homepage-bg-image: '/static/images/homepage-bg.jpg';
$video-thumb-url: '/static/images/courses/video-thumb.jpg';
\ No newline at end of file
lms/static/sass/course/_info.scss
......@@ -117,7 +117,7 @@ div.info-wrapper {
@include transition(all .2s);
h4 {
color: $blue;
color: $link-color;
font-size: 1em;
font-weight: normal;
padding-left: 30px;
......
lms/static/sass/course/base/_base.scss
body {
min-width: 980px;
min-height: 100%;
background: url(../images/bg-texture.png) #d6d6d6;
background-image: $course-bg-image;
background-color: $course-bg-color;
}
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
......@@ -34,7 +35,7 @@ a {
width: 100%;
border-radius: 3px;
border: 1px solid $outer-border-color;
background: #fff;
background: $body-bg;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}
}
......@@ -49,8 +50,8 @@ textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
background: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
background: $body-bg;
border: 1px solid $border-color-2;
@include border-radius(0);
@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);
......@@ -65,7 +66,7 @@ input[type="password"] {
}
&:focus {
border-color: lighten($blue, 20%);
border-color: lighten($link-color, 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;
}
......@@ -94,7 +95,7 @@ img {
}
::selection, ::-moz-selection, ::-webkit-selection {
background: #444;
background: $selection-color-2;
color: #fff;
}
......@@ -143,7 +144,7 @@ img {
max-width: 350px;
padding: 15px 20px 17px;
border-radius: 3px;
border: 1px solid #333;
border: 1px solid $border-color-3;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)) rgba(30, 30, 30, .92);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
font-size: 13px;
......
lms/static/sass/course/base/_extends.scss
h1.top-header {
border-bottom: 1px solid #e3e3e3;
border-bottom: 1px solid $border-color-2;
text-align: left;
font-size: em(24);
font-weight: 100;
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -2,7 +2,7 @@ section.course-index {
@extend .sidebar;
@extend .tran;
@include border-radius(3px 0 0 3px);
border-right: 1px solid #ddd;
border-right: 1px solid $border-color-2;
#open_close_accordion {
display: none;
......@@ -70,8 +70,8 @@ section.course-index {
width: 100% !important;
@include box-sizing(border-box);
padding: 11px 14px;
@include linear-gradient(top, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
background-color: #eee;
@include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
background-color: $sidebar-chapter-bg;
@include box-shadow(0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset);
@include transition(background-color .1s);
......@@ -169,9 +169,9 @@ section.course-index {
}
> a {
border: 1px solid #bbb;
border: 1px solid $border-color-1;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset);
@include linear-gradient(top, #e6e6e6, #d6d6d6);
background: $sidebar-active-image;
&:after {
opacity: 1;
......
lms/static/sass/course/layout/_courseware_header.scss
......@@ -75,9 +75,9 @@ header.global.slim {
&#login {
display: block;
@include background-image(linear-gradient(-90deg, lighten($blue, 8%), lighten($blue, 5%) 50%, $blue 50%, darken($blue, 10%) 100%));
@include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
border: 1px solid transparent;
border-color: darken($blue, 10%);
border-color: darken($link-color, 10%);
@include border-radius(3px);
@include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
......@@ -97,7 +97,7 @@ header.global.slim {
vertical-align: middle;
&:hover, &.active {
@include background-image(linear-gradient(-90deg, $blue, $blue 50%, $blue 50%, $blue 100%));
@include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%));
}
}
}
......
lms/static/sass/course/layout/_footer.scss
footer {
border: none;
box-shadow: none;
border: $courseware-footer-border;
box-shadow: $courseware-footer-shadow;
margin-top: $courseware-footer-margin;
}
\ No newline at end of file
lms/static/sass/course/wiki/_wiki.scss
......@@ -113,7 +113,7 @@ section.wiki {
}
&:focus {
border-color: $blue;
border-color: $link-color;
}
}
}
......@@ -276,7 +276,7 @@ section.wiki {
li {
&.active {
a {
color: $blue;
color: $link-color;
.icon-view,
.icon-home {
......
lms/static/sass/multicourse/_course_about.scss
......@@ -4,11 +4,11 @@
}
header.course-profile {
background: rgb(245,245,245);
@include background-image(url('/static/images/homepage-bg.jpg'));
background: $course-profile-bg;
@include background-image(url($homepage-bg-image));
background-size: cover;
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(100,100,100);
border-bottom: 1px solid $border-color-3;
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
height: 280px;
margin-top: -69px;
......@@ -18,8 +18,8 @@
width: 100%;
.intro-inner-wrapper {
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
background: $course-header-bg;
border: 1px solid $border-color-3;
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box);
@include clearfix;
......@@ -44,7 +44,7 @@
z-index: 2;
> hgroup {
border-bottom: 1px solid rgb(210,210,210);
border-bottom: 1px solid $border-color-2;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
margin-bottom: 20px;
padding-bottom: 20px;
......@@ -68,7 +68,7 @@
text-transform: none;
&:hover {
color: $blue;
color: $link-color;
}
}
}
......@@ -85,7 +85,7 @@
text-transform: none;
&:hover {
color: $blue;
color: $link-color;
}
}
}
......@@ -99,7 +99,7 @@
width: flex-grid(12);
> a.find-courses, a.register {
@include button(shiny, $blue);
@include button(shiny, $button-color);
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
......@@ -122,7 +122,7 @@
}
strong {
@include button(shiny, $blue);
@include button(shiny, $button-color);
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
......@@ -140,10 +140,10 @@
}
span.register {
background: lighten($blue, 20%);
border: 1px solid $blue;
background: $button-archive-color;
border: 1px solid darken($button-archive-color, 50%);
@include box-sizing(border-box);
color: darken($blue, 20%);
color: darken($button-archive-color, 50%);
display: block;
letter-spacing: 1px;
padding: 10px 0px 8px;
......@@ -176,7 +176,7 @@
z-index: 2;
.hero {
border: 1px solid rgb(100,100,100);
border: 1px solid $border-color-3;
height: 100%;
overflow: hidden;
position: relative;
......@@ -235,7 +235,7 @@
@include clearfix;
nav {
border-bottom: 1px solid rgb(220,220,220);
border-bottom: 1px solid $border-color-2;
@include box-sizing(border-box);
@include clearfix;
margin: 40px 0;
......@@ -262,7 +262,7 @@
}
&:hover, &.active {
border-color: rgb(200,200,200);
border-color: $border-color-2;
color: $base-font-color;
text-decoration: none;
}
......@@ -296,7 +296,7 @@
.teacher-image {
background: rgb(255,255,255);
border: 1px solid rgb(200,200,200);
border: 1px solid $border-color-2;
height: 115px;
float: left;
margin: 0 15px 0px 0;
......@@ -351,7 +351,7 @@
> section {
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
border: 1px solid rgb(200,200,200);
border: 1px solid $border-color-2;
&.course-summary {
padding: 16px 20px 30px;
......@@ -401,7 +401,7 @@
}
a.university-name {
border-right: 1px solid rgb(200,200,200);
border-right: 1px solid $border-color-2;
color: $base-font-color;
font-family: $sans-serif;
font-style: italic;
......@@ -498,12 +498,12 @@
li {
@include clearfix;
border-bottom: 1px dotted rgb(220,220,220);
border-bottom: 1px dotted $border-color-2;
margin-bottom: 20px;
padding-bottom: 10px;
&.prerequisites {
border: 1px solid rgb(220,220,220);
border: 1px solid $border-color-2;
margin: 0 -10px 0;
padding: 10px;
......
lms/static/sass/multicourse/_courses.scss
.find-courses, .university-profile {
background: rgb(252,252,252);
background: $course-profile-bg;
padding-bottom: 60px;
header.search {
background: rgb(240,240,240);
background: $course-profile-bg;
background-size: cover;
@include background-image(url($homepage-bg-image));
background-position: center top !important;
border-bottom: 1px solid rgb(100,100,100);
border-bottom: 1px solid $border-color-3;
@include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));
height: 430px;
margin-top: -69px;
......@@ -24,8 +25,8 @@
> hgroup {
background: #FFF;
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
background: $course-header-bg;
border: 1px solid $border-color-3;
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
padding: 20px 30px;
position: relative;
......@@ -41,7 +42,7 @@
.logo {
@include inline-block;
height: 80px;
height: 100px;
margin-right: 30px;
padding-right: 30px;
position: relative;
......@@ -51,7 +52,7 @@
@extend .faded-vertical-divider;
content: "";
display: block;
height: 80px;
height: 100px;
position: absolute;
right: 0px;
top: 0px;
......@@ -83,7 +84,7 @@
}
section.message {
border-top: 1px solid rgb(220,220,220);
border-top: 1px solid $border-color-2;
@include clearfix;
margin-top: 20px;
padding-top: 60px;
......
lms/static/sass/multicourse/_dashboard.scss
......@@ -30,8 +30,9 @@
width: flex-grid(3);
header.profile {
@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)));
border: 1px solid rgb(200,200,200);
@include background-image($dashboard-profile-header-image);
background-color: $dashboard-profile-header-color;
border: 1px solid $border-color-2;
@include border-radius(4px);
@include box-sizing(border-box);
width: flex-grid(12);
......@@ -53,8 +54,8 @@
padding: 0px 10px;
> ul {
background: rgb(252,252,252);
border: 1px solid rgb(200,200,200);
background: $dashboard-profile-color;
border: 1px solid $border-color-2;
border-top: none;
//@include border-bottom-radius(4px);
@include box-sizing(border-box);
......@@ -66,7 +67,7 @@
li {
@include clearfix;
border-bottom: 1px dotted rgb(220,220,220);
border-bottom: 1px dotted $border-color-2;
list-style: none;
margin-bottom: 15px;
padding-bottom: 17px;
......@@ -128,8 +129,8 @@
.news-carousel {
@include clearfix;
margin: 30px 10px 0;
border: 1px solid rgb(200,200,200);
background: rgb(252,252,252);
border: 1px solid $border-color-2;
background: $dashboard-profile-color;
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
* {
......@@ -156,14 +157,14 @@
width: 11px;
height: 11px;
border-radius: 11px;
background: $light-gray;
background: $dot-color;
&:hover {
background: #ccc;
background: $lighter-base-font-color;
}
&.current {
background: $blue;
background: $link-color;
}
}
......@@ -201,7 +202,7 @@
img {
width: 100%;
border: 1px solid $light-gray;
border: 1px solid $border-color-1;
}
}
......@@ -229,7 +230,7 @@
width: flex-grid(9);
> header {
border-bottom: 1px solid rgb(210,210,210);
border-bottom: 1px solid $border-color-2;
margin-bottom: 30px;
}
......@@ -246,8 +247,9 @@
a {
background: rgb(240,240,240);
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border: 1px solid rgb(220,220,220);
@include background-image($button-bg-image);
background-color: $button-bg-color;
border: 1px solid $border-color-2;
@include border-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
......@@ -260,7 +262,7 @@
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:hover {
color: $blue;
color: $link-color;
text-decoration: none;
}
}
......@@ -272,7 +274,7 @@
margin-right: flex-gutter();
margin-bottom: 50px;
padding-bottom: 50px;
border-bottom: 1px solid $light-gray;
border-bottom: 1px solid $border-color-1;
position: relative;
width: flex-grid(12);
z-index: 20;
......@@ -343,7 +345,7 @@
.course-status {
background: $yellow;
border: 1px solid rgb(200,200,200);
border: 1px solid $border-color-2;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
margin-top: 17px;
margin-right: flex-gutter();
......@@ -362,7 +364,7 @@
.course-status-completed {
background: #ccc;
color: #fff;
color: $very-light-text;
p {
color: #222;
......@@ -374,7 +376,7 @@
}
.enter-course {
@include button(simple, $blue);
@include button(simple, $button-color);
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
......@@ -386,7 +388,7 @@
margin-top: 16px;
&.archived {
@include button(simple, #eee);
@include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif;
padding: 6px 32px 7px;
......
lms/static/sass/multicourse/_home.scss
......@@ -7,15 +7,16 @@
}
> header {
background: rgb(255,255,255);
@include background-image(url('/static/images/homepage-bg.jpg'));
background: $dashboard-profile-color;
@include background-image(url($homepage-bg-image));
background-size: cover;
border-bottom: 1px solid rgb(80,80,80);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
border-bottom: 1px solid $border-color-3;
@include box-shadow(0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
@include clearfix;
height: 460px;
margin-top: -69px;
float: left;
overflow: hidden;
margin-top: -69px;
padding: 0px;
width: flex-grid(12);
......@@ -31,8 +32,8 @@
.title {
background: #FFF;
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
background: $course-header-bg;
border: 1px solid $border-color-3;
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box);
min-height: 120px;
......@@ -80,8 +81,8 @@
.media {
background: #FFF;
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
background: $course-header-bg;
border: 1px solid $border-color-3;
border-left: 0;
@include box-sizing(border-box);
// @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
......@@ -101,7 +102,7 @@
height: 100%;
overflow: hidden;
position: relative;
background: url('../images/courses/video-thumb.jpg') center no-repeat;
background: url($video-thumb-url) center no-repeat;
@include background-size(cover);
.play-intro {
......@@ -164,15 +165,15 @@
> h2 {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border: 1px solid rgb(200,200,200);
border: 1px solid $border-color-2;
@include border-radius(4px);
border-top-color: rgb(190,190,190);
border-top-color: $border-color-1;
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
color: $lighter-base-font-color;
letter-spacing: 1px;
margin-bottom: 0px;
margin-top: -15px;
padding: 10px 10px 8px;
padding: 10px 10px 12px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -180,7 +181,7 @@
}
.university-partners {
border-bottom: 1px solid rgb(210,210,210);
border-bottom: 1px solid $border-color-2;
margin-bottom: 0px;
overflow: hidden;
position: relative;
......@@ -366,13 +367,13 @@
}
.more-info {
border: 1px solid rgb(200,200,200);
border: 1px solid $border-color-2;
margin-bottom: 80px;
width: flex-grid(12);
header {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border-bottom: 1px solid rgb(200,200,200);
border-bottom: 1px solid $border-color-2;
@include clearfix;
padding: 10px 20px 8px;
position: relative;
......@@ -415,14 +416,14 @@
width: flex-grid(12);
.blog-posts {
border-bottom: 1px solid rgb(220,220,220);
border-bottom: 1px solid $border-color-2;
margin-bottom: 20px;
padding-bottom: 20px;
@include clearfix;
> article {
border: 1px dotted transparent;
border-color: rgb(220,220,220);
border-color: $border-color-2;
@include box-sizing(border-box);
@include clearfix;
float: left;
......@@ -432,8 +433,8 @@
width: flex-grid(4);
&:hover {
background: rgb(248,248,248);
border: 1px solid rgb(220,220,220);
background: $body-bg;
border: 1px solid $border-color-2;
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.1));
}
......@@ -442,7 +443,7 @@
}
.post-graphics {
border: 1px solid rgb(190,190,190);
border: 1px solid $border-color-1;
@include box-sizing(border-box);
display: block;
float: left;
......
lms/static/sass/shared/_course_object.scss
......@@ -31,8 +31,8 @@
}
.course {
background: rgb(250,250,250);
border: 1px solid rgb(180,180,180);
background: $body-bg;
border: 1px solid $border-color-1;
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
......@@ -42,7 +42,7 @@
@include transition(all, 0.15s, linear);
.status {
background: $blue;
background: $link-color;
color: white;
font-size: 10px;
left: 10px;
......@@ -55,7 +55,7 @@
}
.status:after {
border-bottom: 6px solid shade($blue, 50%);
border-bottom: 6px solid shade($link-color, 50%);
border-right: 6px solid transparent;
content: "";
display: block;
......@@ -90,7 +90,7 @@
}
.inner-wrapper {
border: 1px solid rgba(255,255,255, 1);
border: 1px solid $border-color-4;
height: 100%;
height: 200px;
overflow: hidden;
......@@ -116,12 +116,12 @@
text-decoration: none;
.info-link {
color: $blue;
color: $link-color;
opacity: 1;
}
h2 {
color: $blue;
color: $link-color;
}
}
......@@ -176,7 +176,7 @@
// }
.info {
background: rgb(255,255,255);
background: $content-wrapper-bg;
height: 220px + 130px;
left: 0px;
position: absolute;
......@@ -221,14 +221,14 @@
width: 100%;
.university {
border-right: 1px solid rgb(200,200,200);
border-right: 1px solid $border-color-2;
color: $lighter-base-font-color;
letter-spacing: 1px;
margin-right: 10px;
padding-right: 10px;
&:hover {
color: $blue;
color: $link-color;
}
}
......@@ -240,9 +240,9 @@
}
&:hover {
background: rgb(245,245,245);
border-color: rgb(170,170,170);
@include box-shadow(0 1px 16px 0 rgba($blue, 0.4));
background: $course-profile-bg;
border-color: $border-color-1;
@include box-shadow(0 1px 16px 0 rgba($shadow-color, 0.4));
.info {
top: -150px;
......
lms/static/sass/shared/_forms.scss
......@@ -15,8 +15,8 @@ input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
background: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
background: $form-bg-color;
border: 1px solid $border-color-2;
@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);
......@@ -31,8 +31,8 @@ input[type="tel"] {
}
&: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));
border-color: darken($button-archive-color, 50%);
@include box-shadow(0 0 6px 0 darken($button-archive-color, 50%), inset 0 0 4px 0 rgba(0,0,0, 0.15));
outline: none;
}
}
......@@ -46,7 +46,7 @@ input[type="button"],
button,
.button {
@include border-radius(3px);
@include button(shiny, $blue);
@include button(shiny, $button-color);
font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 4px 20px;
......
lms/static/sass/shared/_header.scss
......@@ -22,6 +22,28 @@ header.global {
margin: -2px 39px 0px 0px;
position: relative;
&::before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -5px;
width: 1px;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -10px;
width: 1px;
}
a {
display: block;
}
......@@ -55,7 +77,6 @@ header.global {
li.secondary {
> a {
color: $lighter-base-font-color;
color: $blue;
display: block;
font-family: $sans-serif;
@include inline-block;
......@@ -78,9 +99,9 @@ header.global {
margin-right: 5px;
> a {
@include background-image(linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%));
border: 1px solid transparent;
border-color: rgb(200,200,200);
@include background-image($button-bg-image);
background-color: $button-bg-color;
border: 1px solid $border-color-2;
@include border-radius(3px);
@include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
......@@ -101,7 +122,7 @@ header.global {
}
&:hover, &.active {
background: #FFF;
background: $button-bg-hover-color;
}
}
}
......@@ -159,10 +180,10 @@ header.global {
}
ul.dropdown-menu {
background: rgb(252,252,252);
background: $border-color-4;
@include border-radius(4px);
@include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3));
border: 1px solid rgb(100,100,100);
border: 1px solid $border-color-3;
display: none;
padding: 5px 10px;
position: absolute;
......@@ -178,12 +199,12 @@ header.global {
&::before {
background: transparent;
border: {
top: 6px solid rgba(252,252,252, 1);
right: 6px solid rgba(252,252,252, 1);
top: 6px solid $border-color-4;
right: 6px solid $border-color-4;
bottom: 6px solid transparent;
left: 6px solid transparent;
}
@include box-shadow(1px 0 0 0 rgb(0,0,0), 0 -1px 0 0 rgb(0,0,0));
@include box-shadow(1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3);
content: "";
display: block;
height: 0px;
......@@ -196,7 +217,7 @@ header.global {
li {
display: block;
border-top: 1px dotted rgba(200,200,200, 1);
border-top: 1px dotted $border-color-2;
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
&:first-child {
......@@ -208,7 +229,7 @@ header.global {
border: 1px solid transparent;
@include border-radius(3px);
@include box-sizing(border-box);
color: $blue;
color: $link-color;
cursor: pointer;
display: block;
margin: 5px 0px;
......
lms/static/sass/shared/_modal.scss
......@@ -52,7 +52,7 @@
}
.inner-wrapper {
background: rgb(245,245,245);
background: $modal-bg-color;
@include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
......@@ -149,7 +149,7 @@
}
label {
color: #646464;
color: $text-color;
&.field-error {
display: block;
......
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