Skip to content

E
edx-platform
Commit 3dd5733c by Giulio Gratta
Options

first round of color replacements with variables

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