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