Skip to content

E
edx-platform
Commit 9c1dc60b by Reda Lemeden
Options

Merge

parents 33b5c871 b2e1ba74
Showing with 139 additions and 109 deletions
sass/_base-extends.scss
...@@ -8,9 +8,15 @@ ...@@ -8,9 +8,15 @@
.wrapper { .wrapper {
margin: 0 auto; margin: 0 auto;
max-width: $max-width; max-width: $fg-max-width;
width: grid-width(12); min-width: $fg-min-width;
width: flex-grid(12);
text-align: left; text-align: left;
div.table-wrapper {
display: table;
width: flex-grid(12);
}
} }
.button { .button {
...@@ -34,20 +40,21 @@ ...@@ -34,20 +40,21 @@
.content { .content {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding: $body-line-height; padding: lh();
vertical-align: top; vertical-align: top;
width: grid-width(9); width: flex-grid(9) + flex-gutter();
} }
.sidebar { .sidebar {
@include box-shadow( inset -1px 0 0 #f6f6f6); @include box-shadow( inset -1px 0 0 #f6f6f6);
@include box-sizing(border-box);
background: #e3e3e3; background: #e3e3e3;
border-right: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3;
display: table-cell; display: table-cell;
font-family: $body-font-family; font-family: $body-font-family;
text-shadow: 0 1px 0 #f1f1f1; text-shadow: 0 1px 0 #f1f1f1;
vertical-align: top; vertical-align: top;
width: grid-width(3); width: flex-grid(3);
position: relative; position: relative;
h3 { h3 {
......
sass/_base-variables.scss
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
}
// Flexible grid gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
}
// Percentage of container calculator // Percentage of container calculator
@function perc($width, $container-width: $max-width) { @function perc($width, $container-width: $max-width) {
@return percentage($width / $container-width); @return percentage($width / $container-width);
...@@ -25,6 +37,13 @@ $gw-column: perc($column-width); ...@@ -25,6 +37,13 @@ $gw-column: perc($column-width);
$gw-gutter: perc($gutter-width); $gw-gutter: perc($gutter-width);
$body-line-height: golden-ratio($body-font-size, 1); $body-line-height: golden-ratio($body-font-size, 1);
//Flexible grid
$fg-column: $column-width;
$fg-gutter: $gutter-width;
$fg-max-columns: $columns;
$fg-max-width: 1400px;
$fg-min-width: 810px;
// color // color
$light-gray: #ddd; $light-gray: #ddd;
$dark-gray: #333; $dark-gray: #333;
......
sass/_courseware.scss
div.course-wrapper { div.course-wrapper {
display: table; @extend .table-wrapper;
width: 100%;
div#accordion { div#accordion {
@extend .sidebar; @extend .sidebar;
...@@ -80,11 +79,7 @@ div.course-wrapper { ...@@ -80,11 +79,7 @@ div.course-wrapper {
} }
section.course-content { section.course-content {
@include box-sizing(border-box); @extend .content;
display: table-cell;
padding: $gw-gutter;
vertical-align: top;
width: grid-width(9);
ol.vert-mod { ol.vert-mod {
li { li {
......
sass/_fancybox.scss
...@@ -36,14 +36,14 @@ div#fancybox-wrap { ...@@ -36,14 +36,14 @@ div#fancybox-wrap {
text-align: left; text-align: left;
div#enroll_error, div#login_error { div#enroll_error, div#login_error {
margin-bottom: lh(); -webkit-font-smoothing: antialiased;
background-color: #F50200; background-color: #F50200;
color: #fff; color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold; font-weight: bold;
-webkit-font-smoothing: antialiased; letter-spacing: 1px;
margin-bottom: lh();
padding: lh(.2); padding: lh(.2);
text-transform: uppercase;
&:empty { &:empty {
padding: 0; padding: 0;
...@@ -77,20 +77,6 @@ div#fancybox-wrap { ...@@ -77,20 +77,6 @@ div#fancybox-wrap {
width: auto; width: auto;
float: none; float: none;
} }
ul {
list-style: disc outside none;
margin: lh(.5) 0 lh() lh();
li {
list-style: disc outside none;
margin-bottom: lh(.5);
color: #666;
font-size: 14px;
float: none;
}
}
} }
} }
......
sass/_leanmodal.scss
...@@ -10,47 +10,49 @@ ...@@ -10,47 +10,49 @@
} }
div.leanModal_box { div.leanModal_box {
@include border-radius(3px); @include border-radius(3px);
@include box-shadow(0 0 6px #000); @include box-shadow(0 0 6px #000);
@include box-sizing(border-box); @include box-sizing(border-box);
display: none; display: none;
border: none; border: none;
max-width: 600px; max-width: 600px;
background: #fff; background: #fff;
padding: lh(2); padding: lh(2);
h1 { h1 {
font-size: 24px; font-size: 24px;
margin-top: 0; margin-top: 0;
font-family: "Oswald"; padding-bottom: lh();
padding-bottom: lh();
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
margin-bottom: lh(); margin-bottom: lh();
} }
form { form {
text-align: left; text-align: left;
div#enroll_error { div#enroll_error, div#login_error {
padding-bottom: lh(); -webkit-font-smoothing: antialiased;
color: #DF8B2C; background-color: #F50200;
text-transform: uppercase; color: #fff;
letter-spacing: 1px;
font-weight: bold; font-weight: bold;
letter-spacing: 1px;
margin-bottom: lh();
padding: lh(.2);
text-transform: uppercase;
&:empty {
padding: 0;
}
} }
ol { ol {
li { list-style: none;
margin-bottom: lh();
width: grid-width(6);
float: left;
&:nth-child(odd) { li {
margin-right: $gw-gutter; margin-bottom: lh(.5);
}
&.terms, &.remember { &.terms, &.remember {
float: none; float: none;
width: auto; width: auto;
clear: both; clear: both;
padding-top: lh(); padding-top: lh();
...@@ -58,9 +60,9 @@ div.leanModal_box { ...@@ -58,9 +60,9 @@ div.leanModal_box {
} }
&.honor-code { &.honor-code {
width: auto; width: auto;
float: none; float: none;
} }
label { label {
display: block; display: block;
...@@ -68,59 +70,82 @@ div.leanModal_box { ...@@ -68,59 +70,82 @@ div.leanModal_box {
} }
#{$all-text-inputs}, textarea { #{$all-text-inputs}, textarea {
width: 100%; width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
} }
input[type="checkbox"] { input[type="checkbox"] {
margin-right: 10px; margin-right: 10px;
}
ul {
list-style: disc outside none;
margin: lh(.5) 0 lh() lh();
li {
list-style: disc outside none;
margin-bottom: lh(.5);
color: #666;
font-size: 14px;
float: none;
}
} }
} }
} }
input[type="button"] { input[type="button"] {
@include button($mit-red); @include button($mit-red);
font-size: 18px; font-size: 18px;
padding: lh(.5); padding: lh(.5);
} }
} }
}
div#login {
min-width: 400px;
ol {
li {
width: auto;
float: none;
}
}
}
div.lost-password {
text-align: left;
margin-top: lh();
div#login { a {
min-width: 300px; color: #999;
ol { &:hover {
li { color: #444;
width: auto; }
float: none; }
} }
}
} div#pwd_reset {
p {
div.lost-password { margin-bottom: lh();
text-align: left; }
margin-top: lh();
input[type="email"] {
a { margin-bottom: lh();
color: #999; }
&:hover {
color: #444;
}
}
}
} }
div#feedback_div{ div#feedback_div{
form{ form{
ol { ol {
li { li {
float: none; float: none;
width: 100%; width: 100%;
textarea#feedback_message { textarea#feedback_message {
height: 100px; height: 100px;
} }
} }
} }
} }
} }
sass/_profile.scss
...@@ -3,9 +3,9 @@ div.profile-wrapper { ...@@ -3,9 +3,9 @@ div.profile-wrapper {
section.user-info { section.user-info {
@include box-sizing(border-box); @include box-sizing(border-box);
margin-right: $gw-gutter; margin-right: flex-gutter();
padding: $body-line-height; padding: $body-line-height;
width: grid-width(6); width: flex-grid(6);
background: #e3e3e3; background: #e3e3e3;
border-right: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3;
text-shadow: 0 1px 0 #f6f6f6; text-shadow: 0 1px 0 #f6f6f6;
...@@ -14,9 +14,9 @@ div.profile-wrapper { ...@@ -14,9 +14,9 @@ div.profile-wrapper {
section.course-info { section.course-info {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: $body-line-height;
width: grid-width(6);
display: table-cell; display: table-cell;
padding: $body-line-height;
width: flex-grid(6);
ul { ul {
li { li {
......
sass/_textbook.scss
div.book-wrapper { div.book-wrapper {
display: table; @extend .table-wrapper;
ul#booknav { ul#booknav {
@extend .sidebar; @extend .sidebar;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: $body-line-height; padding: lh();
li { li {
ul { ul {
...@@ -14,11 +14,7 @@ div.book-wrapper { ...@@ -14,11 +14,7 @@ div.book-wrapper {
} }
section.book { section.book {
@include box-sizing(border-box); @extend .content;
padding: $body-line-height;
vertical-align: top;
width: grid-width(9) + $gw-gutter;
display: table-cell;
nav { nav {
@extend .topbar; @extend .topbar;
...@@ -42,6 +38,8 @@ div.book-wrapper { ...@@ -42,6 +38,8 @@ div.book-wrapper {
section.page { section.page {
img { img {
border: 1px solid $border-color; border: 1px solid $border-color;
max-width: 100%;
min-width: 100%;
} }
} }
} }
......
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