Commit 16190843 by Tom Giannattasio

started reworking sidebar styles

parent e9e6b182
...@@ -21,6 +21,7 @@ $pink: rgb(182,37,104); ...@@ -21,6 +21,7 @@ $pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$border-color: #C8C8C8; $border-color: #C8C8C8;
$sidebar-color: #f6f6f6;
// old variables // old variables
...@@ -28,3 +29,4 @@ $light-gray: #ddd; ...@@ -28,3 +29,4 @@ $light-gray: #ddd;
$dark-gray: #333; $dark-gray: #333;
$mit-red: #993333; $mit-red: #993333;
$text-color: $dark-gray; $text-color: $dark-gray;
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
// Course base / layout styles // Course base / layout styles
@import 'course/layout/courseware_header'; @import 'course/layout/courseware_header';
@import 'course/layout/footer';
@import 'course/base/base'; @import 'course/base/base';
@import 'course/base/extends'; @import 'course/base/extends';
@import 'module/module-styles.scss'; @import 'module/module-styles.scss';
......
...@@ -68,23 +68,31 @@ div.info-wrapper { ...@@ -68,23 +68,31 @@ div.info-wrapper {
section.handouts { section.handouts {
@extend .sidebar; @extend .sidebar;
border-left: 1px solid $border-color;
@include border-radius(0 4px 4px 0); @include border-radius(0 4px 4px 0);
border-right: 0; border-right: 0;
@include box-shadow(none); @include box-shadow(none);
font-size: 14px;
h1 { h1 {
@extend .bottom-border;
margin-bottom: 0; margin-bottom: 0;
padding: lh(.5) lh(.5); padding: 20px 26px;
font-size: 18px;
font-style: normal;
font-weight: bold;
} }
ol { ol {
li { li {
padding: 0 26px;
margin-bottom: 14px;
a { a {
display: block; display: block;
padding-left: lh(.5); padding: 0;
padding-right: 0;
&:hover {
background: transparent;
}
} }
&.expandable, &.expandable,
...@@ -98,7 +106,6 @@ div.info-wrapper { ...@@ -98,7 +106,6 @@ div.info-wrapper {
} }
&.multiple { &.multiple {
padding: lh(.5) 0 lh(.5) lh(.5);
a { a {
@include inline-block; @include inline-block;
...@@ -133,7 +140,7 @@ div.info-wrapper { ...@@ -133,7 +140,7 @@ div.info-wrapper {
} }
div.hitarea { div.hitarea {
background-image: url('../images/treeview-default.gif'); background-image: url('../images/treeview-default.gif') no-repeat;
display: block; display: block;
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
...@@ -165,7 +172,7 @@ div.info-wrapper { ...@@ -165,7 +172,7 @@ div.info-wrapper {
@include box-shadow(none); @include box-shadow(none);
color: #aaa; color: #aaa;
font-size: 1em; font-size: 1em;
margin-bottom: em(6); margin-bottom: em(6);
} }
p { p {
......
body { body {
min-width: 980px; min-width: 980px;
background: #f7f7f7; background: url(../images/bg-texture.png) #f7f7f7;
} }
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a { body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a {
...@@ -12,6 +12,13 @@ table { ...@@ -12,6 +12,13 @@ table {
table-layout: fixed; table-layout: fixed;
} }
a {
&:hover {
color: $pink;
text-decoration: none !important;
}
}
.content-wrapper { .content-wrapper {
background: none; background: none;
border: none; border: none;
...@@ -36,6 +43,6 @@ form { ...@@ -36,6 +43,6 @@ form {
} }
::selection, ::-moz-selection, ::-webkit-selection { ::selection, ::-moz-selection, ::-webkit-selection {
background:#444; background: #444;
color:#fff; color: #fff;
} }
...@@ -28,7 +28,7 @@ h1.top-header { ...@@ -28,7 +28,7 @@ h1.top-header {
.content { .content {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding: lh(); padding: 2.5em;
vertical-align: top; vertical-align: top;
width: flex-grid(9) + flex-gutter(); width: flex-grid(9) + flex-gutter();
...@@ -38,13 +38,14 @@ h1.top-header { ...@@ -38,13 +38,14 @@ h1.top-header {
} }
.sidebar { .sidebar {
border-right: 1px solid #C8C8C8; // border-right: 1px solid #C8C8C8;
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
font-family: $sans-serif; font-family: $sans-serif;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
width: flex-grid(3); width: flex-grid(3);
background: $sidebar-color;
h1, h2 { h1, h2 {
font-size: em(20); font-size: em(20);
...@@ -85,7 +86,7 @@ h1.top-header { ...@@ -85,7 +86,7 @@ h1.top-header {
} }
&.active { &.active {
@extend .bottom-border; // @extend .bottom-border;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
...@@ -101,7 +102,7 @@ h1.top-header { ...@@ -101,7 +102,7 @@ h1.top-header {
padding-left: 0; padding-left: 0;
li { li {
@extend .bottom-border; // @extend .bottom-border;
@extend .clearfix; @extend .clearfix;
background: none; background: none;
position: relative; position: relative;
......
...@@ -5,12 +5,6 @@ html { ...@@ -5,12 +5,6 @@ html {
div.course-wrapper { div.course-wrapper {
@extend .table-wrapper; @extend .table-wrapper;
padding: 40px;
box-sizing: border-box;
border-radius: 3px;
background: #fff;
@include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1));
ul, ol { ul, ol {
list-style: none; list-style: none;
......
nav.course-material { nav.course-material {
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
background: #f6f6f6;
border-bottom: none; border-bottom: none;
margin: 0px auto 0px; margin: 0px auto 0px;
padding: 0px; padding: 0px;
...@@ -24,7 +23,7 @@ nav.course-material { ...@@ -24,7 +23,7 @@ nav.course-material {
list-style: none; list-style: none;
a { a {
color: darken($lighter-base-font-color, 20%); color: #555;
display: block; display: block;
text-align: center; text-align: center;
padding: 8px 13px 12px; padding: 8px 13px 12px;
...@@ -34,7 +33,7 @@ nav.course-material { ...@@ -34,7 +33,7 @@ nav.course-material {
text-shadow: 0 1px rgb(255,255,255); text-shadow: 0 1px rgb(255,255,255);
&:hover { &:hover {
color: $base-font-color; color: #333;
} }
&.active { &.active {
...@@ -72,6 +71,7 @@ nav.course-material { ...@@ -72,6 +71,7 @@ nav.course-material {
float: left; float: left;
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
color: #888;
line-height: 40px; line-height: 40px;
letter-spacing: 0; letter-spacing: 0;
text-transform: none; text-transform: none;
...@@ -83,7 +83,7 @@ nav.course-material { ...@@ -83,7 +83,7 @@ nav.course-material {
.provider { .provider {
font: inherit; font: inherit;
font-weight: bold; font-weight: bold;
color: #6d6d6d; color: #555;
} }
} }
} }
\ No newline at end of file
footer {
border: none;
box-shadow: none;
}
\ No newline at end of file
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