Skip to content

E
edx-platform
Commit fbd0f1be by Kevin Chugh
Options

wire up static HTML to allow panel functionality

parents 978d33ba f94ec6cf
Showing with 2416 additions and 211 deletions
lms/static/fonts/vendor/fontawesome-webfont.svg 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/sass/_discussion-old.scss
...@@ -68,7 +68,10 @@ ...@@ -68,7 +68,10 @@
width: 16px; width: 16px;
height: 17px; height: 17px;
margin: 7px 7px 0 0; margin: 7px 7px 0 0;
background: url(../images/new-post-icon.png) no-repeat; font-size: 16px;
padding-right: $baseline/2;
vertical-align: middle;
color: $white;
} }
.post-search { .post-search {
......
lms/static/sass/_discussion.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
color: #fff; color: $white;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
&:hover { &:hover {
@include linear-gradient(top, #fff, #ddd); @include linear-gradient(top, $white, #ddd);
} }
} }
...@@ -43,11 +43,11 @@ ...@@ -43,11 +43,11 @@
padding: 0 15px; padding: 0 15px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #222; border: 1px solid #222;
background: -webkit-linear-gradient(top, #777, #555); background: -webkit-linear-gradient(top, $gray, #555);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
color: #fff; color: $white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
...@@ -60,28 +60,28 @@ ...@@ -60,28 +60,28 @@
width: 100%; width: 100%;
height: 240px; height: 240px;
margin-top: 0; margin-top: 0;
padding: 10px; padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px $black-t0 inset;
} }
@mixin discussion-wmd-preview { @mixin discussion-wmd-preview {
width: 100%; width: 100%;
min-height: 40px; min-height: 40px;
padding: 25px 20px 10px 20px; padding: 25px $baseline $baseline/2 $baseline;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #aaa; border: 1px solid #aaa;
border-top: none; border-top: none;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: #eee; background: #eee;
color: #333; color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px $black-t0 inset;
} }
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
...@@ -90,10 +90,6 @@ ...@@ -90,10 +90,6 @@
} }
body.discussion { body.discussion {
.new-post-form-errors { .new-post-form-errors {
...@@ -102,13 +98,13 @@ body.discussion { ...@@ -102,13 +98,13 @@ body.discussion {
padding: 0; padding: 0;
border: 1px solid #333; border: 1px solid #333;
list-style: none; list-style: none;
color: #fff; color: $white;
line-height: 1.6; line-height: 1.6;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
li { li {
padding: 10px 20px 12px 45px; padding: $baseline/2 $baseline 12px 45px;
border-bottom: 1px solid #dc4949; border-bottom: 1px solid #dc4949;
background: url(../images/white-error-icon.png) no-repeat 15px 14px; background: url(../images/white-error-icon.png) no-repeat 15px 14px;
...@@ -133,13 +129,15 @@ body.discussion { ...@@ -133,13 +129,15 @@ body.discussion {
width: 16px; width: 16px;
height: 17px; height: 17px;
margin: 8px 7px 0 0; margin: 8px 7px 0 0;
background: url(../images/new-post-icon.png) no-repeat; font-size: 16px;
vertical-align: middle;
color: $white;
} }
} }
.new-post-article { .new-post-article {
display: none; display: none;
margin-top: 20px; margin-top: $baseline;
.inner-wrapper { .inner-wrapper {
max-width: 1180px; max-width: 1180px;
...@@ -150,13 +148,13 @@ body.discussion { ...@@ -150,13 +148,13 @@ body.discussion {
.left-column { .left-column {
float: left; float: left;
width: 32%; width: 32%;
padding: 40px; padding: $baseline*2;
@include box-sizing(border-box); @include box-sizing(border-box);
label { label {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
color: #fff; color: $white;
text-shadow: none; text-shadow: none;
} }
...@@ -172,8 +170,8 @@ body.discussion { ...@@ -172,8 +170,8 @@ body.discussion {
.form-group-label { .form-group-label {
display: block; display: block;
padding-top: 5px; padding-top: $baseline/4;
color:#fff; color: $white;
} }
.topic_dropdown_button { .topic_dropdown_button {
...@@ -195,12 +193,12 @@ body.discussion { ...@@ -195,12 +193,12 @@ body.discussion {
.topic_menu_wrapper { .topic_menu_wrapper {
display: none; display: none;
position: absolute; position: absolute;
top: 40px; top: $baseline*2;
left: 0; left: 0;
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
background: #737373; background: #797979;
border: 1px solid #333; border: 1px solid #333;
box-shadow: 0 2px 50px rgba(0, 0, 0, .4); box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
} }
...@@ -211,7 +209,7 @@ body.discussion { ...@@ -211,7 +209,7 @@ body.discussion {
a { a {
display: block; display: block;
padding: 10px 15px; padding: $baseline/2 15px;
border-top: 1px solid #5f5f5f; border-top: 1px solid #5f5f5f;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
...@@ -241,7 +239,7 @@ body.discussion { ...@@ -241,7 +239,7 @@ body.discussion {
} }
.topic_menu_search { .topic_menu_search {
padding: 10px; padding: $baseline/2;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
...@@ -252,8 +250,8 @@ body.discussion { ...@@ -252,8 +250,8 @@ body.discussion {
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 30px; border-radius: 30px;
border: 1px solid #333; border: 1px solid #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset; box-shadow: 0 1px 3px $black-t1 inset;
background: -webkit-linear-gradient(top, #eee, #fff); background: -webkit-linear-gradient(top, #eee, $white);
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
color: #333; color: #333;
...@@ -263,7 +261,7 @@ body.discussion { ...@@ -263,7 +261,7 @@ body.discussion {
.right-column { .right-column {
float: left; float: left;
width: 68%; width: 68%;
padding: 40px; padding: $baseline*2;
@include box-sizing(border-box); @include box-sizing(border-box);
} }
...@@ -278,7 +276,7 @@ body.discussion { ...@@ -278,7 +276,7 @@ body.discussion {
.edit-post-form { .edit-post-form {
width: 100%; width: 100%;
margin-bottom: 40px; margin-bottom: $baseline*2;
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -287,20 +285,20 @@ body.discussion { ...@@ -287,20 +285,20 @@ body.discussion {
} }
.form-row { .form-row {
margin-top: 20px; margin-top: $baseline;
} }
.post-cancel { .post-cancel {
@include white-button; @include white-button;
float: left; float: left;
margin: 10px 0 0 15px; margin: $baseline/2 0 0 15px;
} }
.post-update { .post-update {
@include blue-button; @include blue-button;
float: left; float: left;
height: 37px; height: 37px;
margin-top: 10px; margin-top: $baseline/2;
padding-bottom: 2px; padding-bottom: 2px;
&:hover { &:hover {
...@@ -311,26 +309,26 @@ body.discussion { ...@@ -311,26 +309,26 @@ body.discussion {
.edit-post-title, .edit-post-tags { .edit-post-title, .edit-post-tags {
width: 100%; width: 100%;
height: 40px; height: 40px;
padding: 0 10px; padding: 0 $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 3px; border-radius: 3px;
border: 1px solid #aaa; border: 1px solid #aaa;
font-size: 16px; font-size: 16px;
font-family: $sans-serif; font-family: $sans-serif;
color: #333; color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px $black-t0 inset;
} }
.tagsinput { .tagsinput {
padding: 10px; padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px $black-t1 inset;
span.tag { span.tag {
margin-bottom: 0; margin-bottom: 0;
...@@ -340,15 +338,15 @@ body.discussion { ...@@ -340,15 +338,15 @@ body.discussion {
.new-post-form { .new-post-form {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: $baseline;
border-radius: 3px; border-radius: 3px;
background: rgba(0, 0, 0, .55); background: rgba(0, 0, 0, .55);
color: #fff; color: $white;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5); box-shadow: 0 1px 2px $black-t2 inset, 0 1px 0 $white-t2;
@include clearfix; @include clearfix;
.form-row { .form-row {
margin-bottom: 20px; margin-bottom: $baseline;
} }
.new-post-body .wmd-input { .new-post-body .wmd-input {
...@@ -357,27 +355,27 @@ body.discussion { ...@@ -357,27 +355,27 @@ body.discussion {
width: 100%; width: 100%;
height: 200px; height: 200px;
z-index: 1; z-index: 1;
padding: 10px; padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #333; border: 1px solid #333;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px $black-t1 inset;
} }
.tagsinput { .tagsinput {
padding: 10px; padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #333; border: 1px solid #333;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px $black-t1 inset;
span.tag { span.tag {
margin-bottom: 0; margin-bottom: 0;
...@@ -390,13 +388,13 @@ body.discussion { ...@@ -390,13 +388,13 @@ body.discussion {
width: 100%; width: 100%;
//height: 50px; //height: 50px;
margin-top: -1px; margin-top: -1px;
padding: 25px 20px 10px 20px; padding: 25px $baseline $baseline/2 $baseline;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #333; border: 1px solid #333;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
background: #e6e6e6; background: #e6e6e6;
color: #333; color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px $black-t1 inset;
} }
.new-post-preview-label { .new-post-preview-label {
...@@ -412,14 +410,14 @@ body.discussion { ...@@ -412,14 +410,14 @@ body.discussion {
.new-post-tags { .new-post-tags {
width: 100%; width: 100%;
height: 40px; height: 40px;
padding: 0 10px; padding: 0 $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 3px; border-radius: 3px;
border: 1px solid #333; border: 1px solid #333;
font-size: 16px; font-size: 16px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
color: #333; color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 1px 3px $black-t1 inset;
} }
.new-post-title { .new-post-title {
...@@ -430,7 +428,7 @@ body.discussion { ...@@ -430,7 +428,7 @@ body.discussion {
@include blue-button; @include blue-button;
float: left; float: left;
height: 37px; height: 37px;
margin-top: 10px; margin-top: $baseline/2;
padding-bottom: 2px; padding-bottom: 2px;
border-color: #333; border-color: #333;
...@@ -443,17 +441,17 @@ body.discussion { ...@@ -443,17 +441,17 @@ body.discussion {
@include white-button; @include white-button;
border-color: #444; border-color: #444;
float: left; float: left;
margin: 10px 0 0 15px; margin: $baseline/2 0 0 15px;
} }
.options { .options {
margin-top: 40px; margin-top: $baseline*2;
label { label {
display: inline; display: inline;
margin-left: 8px; margin-left: 8px;
font-size: 15px; font-size: 15px;
color: #fff; color: $white;
text-shadow: none; text-shadow: none;
} }
} }
...@@ -462,12 +460,12 @@ body.discussion { ...@@ -462,12 +460,12 @@ body.discussion {
.thread-tags { .thread-tags {
margin-top: 20px; margin-top: $baseline;
} }
.thread-tag { .thread-tag {
margin-right: 5px; margin-right: 5px;
padding: 3px 10px 6px; padding: 3px $baseline/2 6px;
border-radius: 3px; border-radius: 3px;
color: #333; color: #333;
background: #c5eeff; background: #c5eeff;
...@@ -477,7 +475,7 @@ body.discussion { ...@@ -477,7 +475,7 @@ body.discussion {
.thread-title { .thread-title {
display: block; display: block;
margin-bottom: 20px; margin-bottom: $baseline;
font-size: 21px; font-size: 21px;
color: #333; color: #333;
font-weight: 700; font-weight: 700;
...@@ -522,7 +520,7 @@ body.discussion { ...@@ -522,7 +520,7 @@ body.discussion {
.sidebar-toggle-moderator-button { .sidebar-toggle-moderator-button {
@include blue-button; @include blue-button;
text-align: center; text-align: center;
margin-top: 20px; margin-top: $baseline;
} }
} }
...@@ -558,7 +556,7 @@ body.discussion { ...@@ -558,7 +556,7 @@ body.discussion {
.wmd-preview { .wmd-preview {
position: relative; position: relative;
font-family: $sans-serif; font-family: $sans-serif;
padding: 25px 20px 10px 20px; padding: 25px $baseline $baseline/2 $baseline;
margin-bottom: 5px; margin-bottom: 5px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
...@@ -587,7 +585,7 @@ body.discussion { ...@@ -587,7 +585,7 @@ body.discussion {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 10px; margin-top: $baseline/2;
padding: 0px; padding: 0px;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
...@@ -642,11 +640,11 @@ body.discussion { ...@@ -642,11 +640,11 @@ body.discussion {
.wmd-prompt-dialog { .wmd-prompt-dialog {
@extend .modal; @extend .modal;
background: #fff; background: $white;
} }
.wmd-prompt-dialog { .wmd-prompt-dialog {
padding: 20px; padding: $baseline;
> div { > div {
font-size: 0.8em; font-size: 0.8em;
...@@ -710,22 +708,41 @@ body.discussion { ...@@ -710,22 +708,41 @@ body.discussion {
border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;
.browse, .home, .browse,
.search { .search {
position: relative; position: relative;
float: left; float: left;
width: 20%; width: 20%;
height: 100%; height: 100%;
@include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
<<<<<<< HEAD
background-color: #dcdcdc; background-color: #dcdcdc;
@include transition(all .2s ease-out 0s); @include transition(all .2s ease-out 0s);
=======
background-color: $gray-l4;
@include transition(all .2s ease-out);
>>>>>>> feature/marco/discussionhome
&:hover { &:hover {
background-color: #e9e9e9; background-color: $gray-l3;
} }
}
&.is-open { .home {
width: 80%; border-radius: 3px 0 0 0;
box-shadow: -1px 0 0 #aaa inset;
cursor: pointer;
.home-icon {
display: block;
position: absolute;
top: 30%;
left: 30%;
color: $gray-l1;
font-size: 28px;
z-index: 100;
opacity: 1;
@include transition(all .2s ease-out);
} }
} }
...@@ -734,6 +751,7 @@ body.discussion { ...@@ -734,6 +751,7 @@ body.discussion {
box-shadow: -1px 0 0 #aaa inset; box-shadow: -1px 0 0 #aaa inset;
&.is-open { &.is-open {
width:60%;
.browse-topic-drop-btn span { .browse-topic-drop-btn span {
opacity: 1.0; opacity: 1.0;
} }
...@@ -746,7 +764,7 @@ body.discussion { ...@@ -746,7 +764,7 @@ body.discussion {
.browse-topic-drop-btn { .browse-topic-drop-btn {
span { span {
color: #fff; color: $white;
text-shadow: none; text-shadow: none;
} }
...@@ -774,9 +792,14 @@ body.discussion { ...@@ -774,9 +792,14 @@ body.discussion {
&.is-open { &.is-open {
cursor: auto; cursor: auto;
width: 60%;
.home {
width:0%;
}
.post-search { .post-search {
padding: 0 10px; padding: 0 $baseline/2;
max-width: 1000px; max-width: 1000px;
} }
...@@ -796,30 +819,34 @@ body.discussion { ...@@ -796,30 +819,34 @@ body.discussion {
.browse-topic-drop-btn { .browse-topic-drop-btn {
display: block; display: block;
position: absolute; position: absolute;
padding-top: 10%;
top: -1px; top: -1px;
left: -1px; left: -1px;
z-index: 50; z-index: 50;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 3px 0 0 0;
border: 1px solid transparent; border: 1px solid transparent;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@include transition(none); @include transition(none);
.current-board { .current-board {
white-space: nowrap; white-space: normal;
} }
span { span {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 400;
line-height: 58px; line-height: 1.2;
color: #333; color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8); text-shadow: 0 1px 0 $white-t3;
opacity: 0.0; opacity: 0.0;
@include transition(opacity .2s linear 0s); @include transition(opacity .2s linear 0s);
} }
.drop-arrow {
font-size: 16px;
}
} }
.browse-topic-drop-icon { .browse-topic-drop-icon {
...@@ -843,7 +870,7 @@ body.discussion { ...@@ -843,7 +870,7 @@ body.discussion {
left: -1px; left: -1px;
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
background: #737373; background: #797979;
border: 1px solid #4b4b4b; border: 1px solid #4b4b4b;
border-left: none; border-left: none;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
...@@ -854,6 +881,7 @@ body.discussion { ...@@ -854,6 +881,7 @@ body.discussion {
overflow-y: scroll; overflow-y: scroll;
} }
ul { ul {
position: inline; position: inline;
} }
...@@ -864,12 +892,12 @@ body.discussion { ...@@ -864,12 +892,12 @@ body.discussion {
a { a {
display: block; display: block;
padding: 0 20px; padding: 0 $baseline;
border-top: 1px solid #5f5f5f; border-top: 1px solid #5f5f5f;
font-size: 14px; font-size: 12px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
color: #fff; color: $white;
@include clearfix; @include clearfix;
@include transition(none); @include transition(none);
...@@ -886,7 +914,7 @@ body.discussion { ...@@ -886,7 +914,7 @@ body.discussion {
float: left; float: left;
width: 80%; width: 80%;
margin: 13px 0; margin: 13px 0;
color: #fff; color: $white;
} }
.unread { .unread {
...@@ -916,7 +944,7 @@ body.discussion { ...@@ -916,7 +944,7 @@ body.discussion {
} }
.browse-topic-drop-search { .browse-topic-drop-search {
padding: 10px; padding: $baseline/2;
} }
.browse-topic-drop-search-input { .browse-topic-drop-search-input {
...@@ -927,7 +955,7 @@ body.discussion { ...@@ -927,7 +955,7 @@ body.discussion {
border-radius: 30px; border-radius: 30px;
border: 1px solid #333; border: 1px solid #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
background: -webkit-linear-gradient(top, #eee, #fff); background: -webkit-linear-gradient(top, #eee, $white);
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
color: #333; color: #333;
...@@ -950,8 +978,8 @@ body.discussion { ...@@ -950,8 +978,8 @@ body.discussion {
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #acacac; border: 1px solid #acacac;
border-radius: 30px; border-radius: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5); box-shadow: 0 1px 3px $white-t0 inset, 0 1px 0 $white-t2;
background: url(../images/search-icon.png) no-repeat 7px center #fff; background: url(../images/search-icon.png) no-repeat 7px center $white;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
...@@ -977,17 +1005,17 @@ body.discussion { ...@@ -977,17 +1005,17 @@ body.discussion {
.sort-bar { .sort-bar {
height: auto; height: auto;
min-height: 27px; min-height: 27px;
border-bottom: 1px solid #a3a3a3; border-bottom: 1px solid $gray-l3;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #aeaeae; background-color: $gray-l2;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; box-shadow: 0 1px 0 $white-t1 inset;
span, span,
a { a {
font-size: 9px; font-size: 9px;
font-weight: bold; font-weight: bold;
line-height: 25px; line-height: 25px;
color: #333; color: $gray-d3;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4); text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
} }
...@@ -995,7 +1023,7 @@ body.discussion { ...@@ -995,7 +1023,7 @@ body.discussion {
.sort-label { .sort-label {
display: block; display: block;
float: left; float: left;
margin: 0 10px; margin: 0 $baseline/2;
} }
li { li {
...@@ -1008,18 +1036,18 @@ body.discussion { ...@@ -1008,18 +1036,18 @@ body.discussion {
height: 18px; height: 18px;
padding: 0 9px; padding: 0 9px;
border-radius: 19px; border-radius: 19px;
color: #333; color: $gray-d3;
line-height: 17px; line-height: 17px;
&:hover { &:hover {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2));
color: #333; color: $gray-d3;
} }
&.active { &.active {
@include linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); @include linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
background-color: #999; background-color: #999;
color: #fff; color: $white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, .2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, .2) inset;
} }
...@@ -1027,7 +1055,7 @@ body.discussion { ...@@ -1027,7 +1055,7 @@ body.discussion {
} }
.group-filter-label { .group-filter-label {
width: 40px; width: 40px;
margin-left:10px; margin-left: $baseline/2;
} }
.group-filter-select { .group-filter-select {
...@@ -1042,7 +1070,7 @@ body.discussion { ...@@ -1042,7 +1070,7 @@ body.discussion {
.post-list-wrapper { .post-list-wrapper {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid transparent; //border-right: 1px solid transparent;
} }
.post-list { .post-list {
...@@ -1075,11 +1103,11 @@ body.discussion { ...@@ -1075,11 +1103,11 @@ body.discussion {
float: left; float: left;
clear: both; clear: both;
width: 100%; width: 100%;
padding: 0 10px 0 18px; padding: 0 $baseline/2 0 18px;
margin-bottom: 1px; margin-bottom: 1px;
margin-right: -1px; margin-right: -1px;
@include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
background-color: #fff; background-color: $white;
@include clearfix; @include clearfix;
&:hover { &:hover {
...@@ -1120,7 +1148,7 @@ body.discussion { ...@@ -1120,7 +1148,7 @@ body.discussion {
display: block; display: block;
float: left; float: left;
width: 70%; width: 70%;
margin: 8px 0 10px; margin: 8px 0 $baseline/2;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 1.4; line-height: 1.4;
...@@ -1176,7 +1204,7 @@ body.discussion { ...@@ -1176,7 +1204,7 @@ body.discussion {
.votes-count, .votes-count,
.comments-count { .comments-count {
@include linear-gradient(top, #3994c7, #4da7d3); @include linear-gradient(top, #3994c7, #4da7d3);
color: #fff; color: $white;
&:after { &:after {
background-position: 0 0; background-position: 0 0;
...@@ -1238,9 +1266,6 @@ body.discussion { ...@@ -1238,9 +1266,6 @@ body.discussion {
} }
} }
.bottom-post-status { .bottom-post-status {
padding: 30px; padding: 30px;
font-size: 20px; font-size: 20px;
...@@ -1249,9 +1274,6 @@ body.discussion { ...@@ -1249,9 +1274,6 @@ body.discussion {
text-align: center; text-align: center;
} }
.discussion-column { .discussion-column {
float: right; float: right;
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -1260,7 +1282,7 @@ body.discussion { ...@@ -1260,7 +1282,7 @@ body.discussion {
min-height: 500px; min-height: 500px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
&.sidebar-fixed { &.sidebar-fixed {
...@@ -1268,24 +1290,163 @@ body.discussion { ...@@ -1268,24 +1290,163 @@ body.discussion {
} }
} }
.blank-slate h1 { .blank-slate {
margin-top: 195px;
text-align: center; section {
color: #ccc; border-bottom: 1px solid #ccc;
}
.label {
display: block;
font-size: 12px;
}
.label-settings {
padding-top: $baseline;
padding-bottom: $baseline/2;
}
.home-header {
margin: 0;
}
.home-title {
font-size: 18px;
color: $black;
margin-bottom: 5px;
}
.home-description {
font-size: 12px;
line-height: 1;
margin-bottom: $baseline/2;
}
.home-stats {
padding: $baseline 0;
.label-area {
display: inline-block;
min-width: $baseline*5;
width: 25%;
vertical-align: middle;
.profile-link {
font-weight: 700;
}
}
.stats-grouping {
display: inline-block;
width: 70%;
padding-left: $baseline;
.profile-stat {
display: inline-block;
width: 32.5%;
vertical-align: middle;
font-size: 12px;
.count {
display: inline-block;
font-size: 28px;
padding: 0 $baseline/2;
vertical-align: middle;
}
.profile-stat-label{
vertical-align: middle;
}
}
}
}
.home-helpgrid {
border-bottom: none;
border-radius: 3px;
border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
}
.helpgrid-row {
border-bottom: 1px solid #b2b2b2;
.row-title {
padding: 30px $baseline;
//width: 15%;
background-color: $gray-l4;
font-size: 12px;
}
.row-item-full, .row-item {
font-size: 12px;
padding-left: $baseline/2;
width: 30%;
vertical-align: middle;
.icon {
padding: 0 $baseline/2;
font-size: 24px;
vertical-align: middle;
display: table-cell;
}
.icon-stack i {
padding: 0 $baseline/2;
}
.row-description {
vertical-align: middle;
display: table-cell;
}
}
.row-item-full {
.row-setting {
display: table-cell;
vertical-align: middle;
}
.row-description {
padding-left: 15px;
}
}
}
.helpgrid-row-navigation {
.icon-reorder {color: $light-gray;}
.icon-search {color: $light-gray;}
.icon-sort {color: $light-gray;}
}
.helpgrid-row-participation {
.icon-plus {color: $green;}
.icon-flag {color: $pink;}
.icon-star {color: $blue;}
}
.helpgrid-row-notification {
.icon-sign-blank {color: $green;}
.icon-envelope {color: $gray;}
} }
.blank-slate,
.discussion-article { .discussion-article {
position: relative; position: relative;
<<<<<<< HEAD
padding: 40px; padding: 40px;
min-height: 468px; min-height: 468px;
=======
padding: $baseline*2;
min-height: 468px;
>>>>>>> feature/marco/discussionhome
a { a {
word-wrap: break-word; word-wrap: break-word;
} }
h1 { h1 {
margin-bottom: 10px; margin-bottom: $baseline/2;
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
...@@ -1309,13 +1470,13 @@ body.discussion { ...@@ -1309,13 +1470,13 @@ body.discussion {
} }
.post-context{ .post-context{
margin-top: 20px; margin-top: $baseline;
font-size: 12px; font-size: 12px;
color: #888; color: #888;
} }
p + p { p + p {
margin-top: 20px; margin-top: $baseline;
} }
.dogear { .dogear {
...@@ -1338,13 +1499,13 @@ body.discussion { ...@@ -1338,13 +1499,13 @@ body.discussion {
} }
.discussion-post { .discussion-post {
padding: 10px 20px; padding: $baseline/2 $baseline;
> header .vote-btn { > header .vote-btn {
position: relative; position: relative;
z-index: 100; z-index: 100;
margin-top: 5px; margin-top: 5px;
margin-left: 40px; margin-left: $baseline*2;
} }
...@@ -1376,20 +1537,20 @@ body.discussion { ...@@ -1376,20 +1537,20 @@ body.discussion {
.discussion-post header, .discussion-post header,
.responses li header { .responses li header {
margin-bottom: 20px; margin-bottom: $baseline;
} }
.responses { .responses {
list-style: none; list-style: none;
margin-top: 40px; margin-top: $baseline;
padding: 0; padding: 0;
> li { > li {
position: relative; position: relative;
margin: 0 -10px 30px; margin: 0 -10px 30px;
padding: 26px 30px 20px; padding: 26px 30px $baseline;
border-radius: 3px; border-radius: 3px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15); box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
...@@ -1417,7 +1578,7 @@ body.discussion { ...@@ -1417,7 +1578,7 @@ body.discussion {
background: #009fe2; background: #009fe2;
font-size: 9px; font-size: 9px;
font-weight: 700; font-weight: 700;
color: #fff; color: $white;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -1433,7 +1594,7 @@ body.discussion { ...@@ -1433,7 +1594,7 @@ body.discussion {
background: #449944; background: #449944;
font-size: 9px; font-size: 9px;
font-weight: 700; font-weight: 700;
color: #fff; color: $white;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -1461,7 +1622,7 @@ body.discussion { ...@@ -1461,7 +1622,7 @@ body.discussion {
padding: 0 8px; padding: 0 8px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
@include linear-gradient(top, #fff 35%, #ebebeb); @include linear-gradient(top, $white 35%, #ebebeb);
box-shadow: 0 1px 1px rgba(0, 0, 0, .15); box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
...@@ -1483,7 +1644,7 @@ body.discussion { ...@@ -1483,7 +1644,7 @@ body.discussion {
&.is-cast { &.is-cast {
border-color: #379a42; border-color: #379a42;
@include linear-gradient(top, #50cc5e, #3db84b); @include linear-gradient(top, #50cc5e, #3db84b);
color: #fff; color: $white;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2);
...@@ -1500,10 +1661,10 @@ body.discussion { ...@@ -1500,10 +1661,10 @@ body.discussion {
float: right; float: right;
width: 27px; width: 27px;
height: 27px; height: 27px;
margin-right: 10px; margin-right: $baseline/2;
border-radius: 27px; border-radius: 27px;
border: 1px solid #a0a0a0; border: 1px solid #a0a0a0;
@include linear-gradient(top, #fff 35%, #ebebeb); @include linear-gradient(top, $white 35%, #ebebeb);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1); box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
.check-icon { .check-icon {
...@@ -1528,13 +1689,13 @@ body.discussion { ...@@ -1528,13 +1689,13 @@ body.discussion {
blockquote { blockquote {
background: #f6f6f6; background: #f6f6f6;
border-radius: 3px; border-radius: 3px;
padding: 5px 10px; padding: 5px $baseline/2;
font-size: 14px; font-size: 14px;
} }
.comments { .comments {
list-style: none; list-style: none;
margin-top: 20px; margin-top: $baseline;
padding: 0; padding: 0;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
...@@ -1546,7 +1707,7 @@ body.discussion { ...@@ -1546,7 +1707,7 @@ body.discussion {
blockquote { blockquote {
background: #e6e6e6; background: #e6e6e6;
border-radius: 3px; border-radius: 3px;
padding: 5px 10px; padding: 5px $baseline/2;
font-size: 14px; font-size: 14px;
} }
...@@ -1555,8 +1716,8 @@ body.discussion { ...@@ -1555,8 +1716,8 @@ body.discussion {
@include clearfix; @include clearfix;
.comment-form-input { .comment-form-input {
padding: 5px 10px; padding: 5px $baseline/2;
background-color: #fff; background-color: $white;
font-size: 14px; font-size: 14px;
} }
...@@ -1577,7 +1738,7 @@ body.discussion { ...@@ -1577,7 +1738,7 @@ body.discussion {
.response-body { .response-body {
font-size: 13px; font-size: 13px;
padding: 10px 20px; padding: $baseline/2 $baseline;
p + p { p + p {
margin-top: 12px; margin-top: 12px;
...@@ -1585,7 +1746,7 @@ body.discussion { ...@@ -1585,7 +1746,7 @@ body.discussion {
} }
.posted-details { .posted-details {
margin: 0 20px 10px; margin: 0 $baseline $baseline/2;
font-size: 11px; font-size: 11px;
} }
...@@ -1615,7 +1776,7 @@ body.discussion { ...@@ -1615,7 +1776,7 @@ body.discussion {
} }
.comment-form { .comment-form {
padding: 8px 20px; padding: 8px $baseline;
.wmd-input { .wmd-input {
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
...@@ -1633,7 +1794,7 @@ body.discussion { ...@@ -1633,7 +1794,7 @@ body.discussion {
.comment-form-input { .comment-form-input {
width: 100%; width: 100%;
height: 31px; height: 31px;
padding: 0 10px; padding: 0 $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
border-radius: 3px; border-radius: 3px;
...@@ -1647,7 +1808,7 @@ body.discussion { ...@@ -1647,7 +1808,7 @@ body.discussion {
.moderator-actions { .moderator-actions {
margin: 0; margin: 0;
margin-top: 20px; margin-top: $baseline;
padding: 0; padding: 0;
@include clearfix; @include clearfix;
...@@ -1663,7 +1824,7 @@ body.discussion { ...@@ -1663,7 +1824,7 @@ body.discussion {
padding: 0 12px; padding: 0 12px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
@include linear-gradient(top, #fff 35%, #ebebeb); @include linear-gradient(top, $white 35%, #ebebeb);
font-size: 13px; font-size: 13px;
line-height: 24px; line-height: 24px;
color: #737373; color: #737373;
...@@ -1698,20 +1859,20 @@ body.discussion { ...@@ -1698,20 +1859,20 @@ body.discussion {
} }
.new-post-form { .new-post-form {
margin-top: 20px; margin-top: $baseline;
@include clearfix; @include clearfix;
} }
.new-post-form .submit { .new-post-form .submit {
@include blue-button; @include blue-button;
float: left; float: left;
margin-top: 10px; margin-top: $baseline/2;
padding-bottom: 2px; padding-bottom: 2px;
} }
.new-post-form .options { .new-post-form .options {
float: right; float: right;
margin-top: 20px; margin-top: $baseline;
font-size: 14px; font-size: 14px;
label { label {
...@@ -1724,7 +1885,7 @@ body.discussion { ...@@ -1724,7 +1885,7 @@ body.discussion {
.discussion-reply-new { .discussion-reply-new {
padding: 20px; padding: $baseline;
@include clearfix; @include clearfix;
@include transition(opacity .2s linear 0s); @include transition(opacity .2s linear 0s);
...@@ -1747,7 +1908,7 @@ body.discussion { ...@@ -1747,7 +1908,7 @@ body.discussion {
} }
.reply-post-control { .reply-post-control {
margin-top: 20px; margin-top: $baseline;
} }
.discussion-submit-post { .discussion-submit-post {
...@@ -1774,8 +1935,8 @@ body.discussion { ...@@ -1774,8 +1935,8 @@ body.discussion {
.discussion-module { .discussion-module {
@extend .discussion-body; @extend .discussion-body;
position: relative; position: relative;
margin: 20px 0; margin: $baseline 0;
padding: 20px; padding: $baseline;
background: #f6f6f6 !important; background: #f6f6f6 !important;
border-radius: 3px; border-radius: 3px;
...@@ -1786,11 +1947,11 @@ body.discussion { ...@@ -1786,11 +1947,11 @@ body.discussion {
} }
.responses { .responses {
margin-top: 40px; margin-top: $baseline*2;
> li { > li {
margin: 0 20px 20px !important; margin: 0 $baseline $baseline !important;
padding: 26px 30px 20px !important; padding: 26px 30px $baseline !important;
} }
} }
...@@ -1831,7 +1992,7 @@ body.discussion { ...@@ -1831,7 +1992,7 @@ body.discussion {
margin-top: 30px; margin-top: 30px;
.threads { .threads {
margin-top: 20px; margin-top: $baseline;
} }
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */ /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
...@@ -1844,7 +2005,7 @@ body.discussion { ...@@ -1844,7 +2005,7 @@ body.discussion {
} }
&.expanded { &.expanded {
padding: 20px 0; padding: $baseline 0;
.dogear{ .dogear{
display: block; display: block;
...@@ -1864,14 +2025,14 @@ body.discussion { ...@@ -1864,14 +2025,14 @@ body.discussion {
.discussion-article { .discussion-article {
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-width: 0; border-bottom-width: 0;
background: #fff; background: $white;
min-height: 0; min-height: 0;
padding: 10px 10px 15px 10px; padding: $baseline/2 $baseline/2 15px $baseline/2;
box-shadow: 0 1px 0 #ddd; box-shadow: 0 1px 0 #ddd;
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
.discussion-post { .discussion-post {
padding: 12px 20px 0 20px; padding: 12px $baseline 0 $baseline;
@include clearfix; @include clearfix;
.inline-comment-count { .inline-comment-count {
...@@ -1922,7 +2083,7 @@ body.discussion { ...@@ -1922,7 +2083,7 @@ body.discussion {
} }
.post-tools { .post-tools {
margin-left: 20px; margin-left: $baseline;
margin-top: 5px; margin-top: 5px;
a { a {
...@@ -1945,7 +2106,7 @@ body.discussion { ...@@ -1945,7 +2106,7 @@ body.discussion {
} }
.responses { .responses {
margin-top: 10px; margin-top: $baseline/2;
header { header {
padding-bottom: 0; padding-bottom: 0;
...@@ -1982,7 +2143,7 @@ body.discussion { ...@@ -1982,7 +2143,7 @@ body.discussion {
.new-post-article { .new-post-article {
display: none; display: none;
margin-top: 20px; margin-top: $baseline;
.inner-wrapper { .inner-wrapper {
max-width: 1180px; max-width: 1180px;
...@@ -1992,17 +2153,17 @@ body.discussion { ...@@ -1992,17 +2153,17 @@ body.discussion {
.new-post-form { .new-post-form {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: $baseline;
padding: 30px; padding: 30px;
border-radius: 3px; border-radius: 3px;
background: rgba(0, 0, 0, .55); background: rgba(0, 0, 0, .55);
color: #fff; color: $white;
box-shadow: none; box-shadow: none;
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
.form-row { .form-row {
margin-bottom: 20px; margin-bottom: $baseline;
} }
.new-post-body .wmd-input { .new-post-body .wmd-input {
...@@ -2011,11 +2172,11 @@ body.discussion { ...@@ -2011,11 +2172,11 @@ body.discussion {
width: 100%; width: 100%;
height: 200px; height: 200px;
z-index: 1; z-index: 1;
padding: 10px; padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #333; border: 1px solid #333;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
...@@ -2028,7 +2189,7 @@ body.discussion { ...@@ -2028,7 +2189,7 @@ body.discussion {
width: 100%; width: 100%;
//height: 50px; //height: 50px;
margin-top: -1px; margin-top: -1px;
padding: 25px 20px 10px 20px; padding: 25px $baseline $baseline/2 $baseline;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #333; border: 1px solid #333;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
...@@ -2050,7 +2211,7 @@ body.discussion { ...@@ -2050,7 +2211,7 @@ body.discussion {
.new-post-tags { .new-post-tags {
width: 100%; width: 100%;
height: 40px; height: 40px;
padding: 0 10px; padding: 0 $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 3px; border-radius: 3px;
border: 1px solid #333; border: 1px solid #333;
...@@ -2065,11 +2226,11 @@ body.discussion { ...@@ -2065,11 +2226,11 @@ body.discussion {
} }
.tagsinput { .tagsinput {
padding: 10px; padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #333; border: 1px solid #333;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
...@@ -2084,7 +2245,7 @@ body.discussion { ...@@ -2084,7 +2245,7 @@ body.discussion {
@include blue-button; @include blue-button;
float: left; float: left;
height: 37px; height: 37px;
margin-top: 10px; margin-top: $baseline/2;
padding-bottom: 2px; padding-bottom: 2px;
border-color: #333; border-color: #333;
...@@ -2096,7 +2257,7 @@ body.discussion { ...@@ -2096,7 +2257,7 @@ body.discussion {
.new-post-cancel { .new-post-cancel {
@include white-button; @include white-button;
float: left; float: left;
margin: 10px 0 0 15px; margin: $baseline/2 0 0 15px;
border-color: #444; border-color: #444;
} }
...@@ -2107,18 +2268,18 @@ body.discussion { ...@@ -2107,18 +2268,18 @@ body.discussion {
display: inline; display: inline;
margin-left: 8px; margin-left: 8px;
font-size: 15px; font-size: 15px;
color: #fff; color: $white;
text-shadow: none; text-shadow: none;
} }
} }
} }
.thread-tags { .thread-tags {
margin: 20px 0; margin: $baseline 0;
} }
.thread-tag { .thread-tag {
padding: 3px 10px 6px; padding: 3px $baseline/2 6px;
margin-right: 5px; margin-right: 5px;
border-radius: 3px; border-radius: 3px;
color: #333; color: #333;
...@@ -2129,7 +2290,7 @@ body.discussion { ...@@ -2129,7 +2290,7 @@ body.discussion {
.thread-title { .thread-title {
display: block; display: block;
margin-bottom: 20px; margin-bottom: $baseline;
font-size: 21px; font-size: 21px;
color: #333; color: #333;
font-weight: 700; font-weight: 700;
...@@ -2149,7 +2310,10 @@ body.discussion { ...@@ -2149,7 +2310,10 @@ body.discussion {
width: 16px; width: 16px;
height: 17px; height: 17px;
margin: 8px 7px 0 0; margin: 8px 7px 0 0;
background: url(../images/new-post-icon.png) no-repeat; font-size: 16px;
padding-right: $baseline/2;
vertical-align: middle;
color: $white;
} }
.moderator-actions { .moderator-actions {
...@@ -2216,7 +2380,7 @@ body.discussion { ...@@ -2216,7 +2380,7 @@ body.discussion {
.wmd-preview { .wmd-preview {
position: relative; position: relative;
font-family: $sans-serif; font-family: $sans-serif;
padding: 25px 20px 10px 20px; padding: 25px $baseline $baseline/2 $baseline;
margin-bottom: 5px; margin-bottom: 5px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
...@@ -2245,7 +2409,7 @@ body.discussion { ...@@ -2245,7 +2409,7 @@ body.discussion {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 10px; margin-top: $baseline/2;
padding: 0px; padding: 0px;
height: 20px; height: 20px;
overflow: hidden; overflow: hidden;
...@@ -2301,11 +2465,11 @@ body.discussion { ...@@ -2301,11 +2465,11 @@ body.discussion {
.wmd-prompt-dialog { .wmd-prompt-dialog {
@extend .modal; @extend .modal;
background: #fff; background: $white;
} }
.wmd-prompt-dialog { .wmd-prompt-dialog {
padding: 20px; padding: $baseline;
> div { > div {
font-size: 0.8em; font-size: 0.8em;
...@@ -2361,25 +2525,25 @@ body.discussion { ...@@ -2361,25 +2525,25 @@ body.discussion {
} }
.edit-post-form { .edit-post-form {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: $baseline;
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
.form-row { .form-row {
margin-top: 20px; margin-top: $baseline;
} }
.post-cancel { .post-cancel {
@include white-button; @include white-button;
float: left; float: left;
margin: 10px 0 0 15px; margin: $baseline/2 0 0 15px;
} }
.post-update { .post-update {
@include blue-button; @include blue-button;
float: left; float: left;
height: 37px; height: 37px;
margin-top: 10px; margin-top: $baseline/2;
padding-bottom: 2px; padding-bottom: 2px;
&:hover { &:hover {
...@@ -2390,7 +2554,7 @@ body.discussion { ...@@ -2390,7 +2554,7 @@ body.discussion {
.edit-post-title, .edit-post-tags { .edit-post-title, .edit-post-tags {
width: 100%; width: 100%;
height: 40px; height: 40px;
padding: 0 10px; padding: 0 $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 3px; border-radius: 3px;
border: 1px solid #aaa; border: 1px solid #aaa;
...@@ -2401,11 +2565,11 @@ body.discussion { ...@@ -2401,11 +2565,11 @@ body.discussion {
} }
.tagsinput { .tagsinput {
padding: 10px; padding: $baseline/2;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px; border-radius: 3px;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
...@@ -2418,11 +2582,11 @@ body.discussion { ...@@ -2418,11 +2582,11 @@ body.discussion {
} }
.thread-tags { .thread-tags {
margin: 20px 0; margin: $baseline 0;
} }
.thread-tag { .thread-tag {
padding: 3px 10px 6px; padding: 3px $baseline/2 6px;
margin-right: 5px; margin-right: 5px;
border-radius: 3px; border-radius: 3px;
color: #333; color: #333;
...@@ -2440,7 +2604,7 @@ body.discussion { ...@@ -2440,7 +2604,7 @@ body.discussion {
font-size: 12px; font-size: 12px;
color:#000; color:#000;
font-style: italic; font-style: italic;
background-color:#fff; background-color: $white;
} }
.discussion-pin { .discussion-pin {
...@@ -2448,8 +2612,13 @@ body.discussion { ...@@ -2448,8 +2612,13 @@ body.discussion {
float:right; float:right;
padding-right: 5px; padding-right: 5px;
font-style: italic; font-style: italic;
<<<<<<< HEAD
cursor:pointer; cursor:pointer;
margin-right: 10px; margin-right: 10px;
=======
cursor:pointer;
margin-right: $baseline/2;
>>>>>>> feature/marco/discussionhome
opacity: 0.8; opacity: 0.8;
span { span {
...@@ -2481,7 +2650,11 @@ body.discussion { ...@@ -2481,7 +2650,11 @@ body.discussion {
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
<<<<<<< HEAD
background: transparent url('../images/unpinned.png') no-repeat 0 0; background: transparent url('../images/unpinned.png') no-repeat 0 0;
=======
color: $gray-l2;
>>>>>>> feature/marco/discussionhome
} }
.pinned .icon { .pinned .icon {
...@@ -2491,7 +2664,11 @@ body.discussion { ...@@ -2491,7 +2664,11 @@ body.discussion {
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
<<<<<<< HEAD
background: transparent url('../images/pinned.png') no-repeat 0 0; background: transparent url('../images/pinned.png') no-repeat 0 0;
=======
color: $pink;
>>>>>>> feature/marco/discussionhome
} }
.pinned span { .pinned span {
...@@ -2526,28 +2703,47 @@ display:none; ...@@ -2526,28 +2703,47 @@ display:none;
opacity: 1.0; opacity: 1.0;
} }
<<<<<<< HEAD
} }
.notflagged .icon .notflagged .icon
{ {
display: block; display: block;
=======
}
.notflagged .icon {
display: block;
>>>>>>> feature/marco/discussionhome
float: left; float: left;
margin: 3px; margin: 3px;
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
<<<<<<< HEAD
background: transparent url('../images/notflagged.png') no-repeat 0 0; background: transparent url('../images/notflagged.png') no-repeat 0 0;
} }
.flagged .icon .flagged .icon
{ {
display: block; display: block;
=======
color: $gray-l2;
}
.flagged .icon {
display: block;
>>>>>>> feature/marco/discussionhome
float: left; float: left;
margin: 3px; margin: 3px;
width: 10px; width: 10px;
height: 14px; height: 14px;
padding-right: 3px; padding-right: 3px;
<<<<<<< HEAD
background: transparent url('../images/flagged.png') no-repeat 0 0; background: transparent url('../images/flagged.png') no-repeat 0 0;
=======
color: $pink;
>>>>>>> feature/marco/discussionhome
} }
.flagged span { .flagged span {
......
lms/static/sass/application.scss.mako
@import 'bourbon/bourbon'; // lms - css application architecture
// ====================
// libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon
// VENDOR + REBASE *referenced/used vendor presentation and reset*
// ====================
@import 'base/reset'; @import 'base/reset';
@import 'base/font_face'; @import 'vendor/font-awesome';
// BASE *default edX offerings*
// ====================
// base - utilities
@import 'base/mixins'; @import 'base/mixins';
@import 'base/variables'; @import 'base/variables';
...@@ -19,10 +32,16 @@ ...@@ -19,10 +32,16 @@
% endif % endif
@import 'base/base'; @import 'base/base';
// base - assets
@import 'base/font_face';
@import 'base/extends'; @import 'base/extends';
@import 'base/animations'; @import 'base/animations';
// base - starter
@import 'base/base';
// Multicourse styles // shared - course
@import 'shared/forms'; @import 'shared/forms';
@import 'shared/footer'; @import 'shared/footer';
@import 'shared/header'; @import 'shared/header';
...@@ -31,6 +50,7 @@ ...@@ -31,6 +50,7 @@
@import 'shared/modal'; @import 'shared/modal';
@import 'shared/activation_messages'; @import 'shared/activation_messages';
// shared - platform
@import 'multicourse/home'; @import 'multicourse/home';
@import 'multicourse/dashboard'; @import 'multicourse/dashboard';
@import 'multicourse/account'; @import 'multicourse/account';
...@@ -46,7 +66,8 @@ ...@@ -46,7 +66,8 @@
@import 'multicourse/help'; @import 'multicourse/help';
@import 'multicourse/edge'; @import 'multicourse/edge';
// applications
@import 'discussion'; @import 'discussion';
@import 'news'; @import 'news';
@import 'shame'; @import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
lms/static/sass/base/_variables.scss
// lms - utilities - variables
// ====================
$baseline: 20px; $baseline: 20px;
// grid
$gw-column: 80px; $gw-column: 80px;
$gw-gutter: 20px; $gw-gutter: 20px;
...@@ -9,6 +13,9 @@ $fg-max-columns: 12; ...@@ -9,6 +13,9 @@ $fg-max-columns: 12;
$fg-max-width: 1400px; $fg-max-width: 1400px;
$fg-min-width: 810px; $fg-min-width: 810px;
// ====================
// fonts
$sans-serif: 'Open Sans', $verdana; $sans-serif: 'Open Sans', $verdana;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif; $body-font-family: $sans-serif;
...@@ -22,12 +29,115 @@ $base-font-color: rgb(60,60,60); ...@@ -22,12 +29,115 @@ $base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100); $lighter-base-font-color: rgb(100,100,100);
$very-light-text: #fff; $very-light-text: #fff;
$white: rgb(255,255,255); // ====================
// colors - new reorganized colors
$black: rgb(0,0,0); $black: rgb(0,0,0);
$blue: rgb(29,157,217); $black-t0: rgba(0,0,0,0.125);
$pink: rgb(182,37,104); $black-t1: rgba(0,0,0,0.25);
$yellow: rgb(255, 252, 221); $black-t2: rgba(0,0,0,0.50);
$black-t3: rgba(0,0,0,0.75);
$white: rgb(255,255,255);
$white-t0: rgba(255,255,255,0.125);
$white-t1: rgba(255,255,255,0.25);
$white-t2: rgba(255,255,255,0.50);
$white-t3: rgba(255,255,255,0.75);
$gray: rgb(127,127,127);
$gray-l1: tint($gray,20%);
$gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
//new blue
$pink: rgb(183,37,103);
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
$pink-l3: tint($pink,60%);
$pink-l4: tint($pink,80%);
$pink-l5: tint($pink,90%);
$pink-d1: shade($pink,20%);
$pink-d2: shade($pink,40%);
$pink-d3: shade($pink,60%);
$pink-d4: shade($pink,80%);
$pink-s1: saturate($pink,15%);
$pink-s2: saturate($pink,30%);
$pink-s3: saturate($pink,45%);
$pink-u1: desaturate($pink,15%);
$pink-u2: desaturate($pink,30%);
$pink-u3: desaturate($pink,45%);
$red: rgb(178, 6, 16); $red: rgb(178, 6, 16);
$red-l1: tint($red,20%);
$red-l2: tint($red,40%);
$red-l3: tint($red,60%);
$red-l4: tint($red,80%);
$red-l5: tint($red,90%);
$red-d1: shade($red,20%);
$red-d2: shade($red,40%);
$red-d3: shade($red,60%);
$red-d4: shade($red,80%);
$red-s1: saturate($red,15%);
$red-s2: saturate($red,30%);
$red-s3: saturate($red,45%);
$red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%);
$red-u3: desaturate($red,45%);
$green: rgb(37, 184, 90);
$green-l1: tint($green,20%);
$green-l2: tint($green,40%);
$green-l3: tint($green,60%);
$green-l4: tint($green,80%);
$green-l5: tint($green,90%);
$green-d1: shade($green,20%);
$green-d2: shade($green,40%);
$green-d3: shade($green,60%);
$green-d4: shade($green,80%);
$green-s1: saturate($green,15%);
$green-s2: saturate($green,30%);
$green-s3: saturate($green,45%);
$green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%);
//new yellow
$orange: rgb(237, 189, 60);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,40%);
$orange-l3: tint($orange,60%);
$orange-l4: tint($orange,80%);
$orange-l5: tint($orange,90%);
$orange-d1: shade($orange,20%);
$orange-d2: shade($orange,40%);
$orange-d3: shade($orange,60%);
$orange-d4: shade($orange,80%);
$orange-s1: saturate($orange,15%);
$orange-s2: saturate($orange,30%);
$orange-s3: saturate($orange,45%);
$orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%);
$orange-u3: desaturate($orange,45%);
$shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// ====================
// colors - old variables
$blue: rgb(29,157,217); //old blue
$yellow: rgb(255, 252, 221); //old yellow
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$light-gray: rgb(221, 221, 221); $light-gray: rgb(221, 221, 221);
$dark-gray: rgb(51, 51, 51); $dark-gray: rgb(51, 51, 51);
...@@ -40,7 +150,7 @@ $light-gray: #ddd; ...@@ -40,7 +150,7 @@ $light-gray: #ddd;
$dark-gray: #333; $dark-gray: #333;
// edx.org-related // edx.org-related
$m-gray-l1: rgb(203,203,203); $m-gray-l1: rgb(203,203,203);
$m-gray-l2: rgb(246,246,246); $m-gray-l2: rgb(246,246,246);
$m-gray: rgb(153,153,153); $m-gray: rgb(153,153,153);
$m-gray-d1: rgb(102,102,102); $m-gray-d1: rgb(102,102,102);
......
lms/static/sass/course/_discussions-inline.scss 0 → 100644
.discussion-module {
@extend .discussion-body;
margin: 20px 0;
padding: 20px 20px 28px 20px;
background: #f6f6f6 !important;
border-radius: 3px;
.responses {
margin-top: 40px;
> li {
margin: 0 20px 30px;
}
}
.discussion-show {
display: block;
width: 200px;
margin: auto;
font-size: 14px;
text-align: center;
&.shown {
.show-hide-discussion-icon {
background-position: 0 0;
}
}
.show-hide-discussion-icon {
display: inline-block;
position: relative;
top: 5px;
margin-right: 6px;
width: 21px;
height: 19px;
background: url(../images/show-hide-discussion-icon.png) no-repeat;
background-position: -21px 0;
}
}
.new-post-btn {
display: inline-block;
}
section.discussion {
margin-top: 20px;
.threads {
margin-top: 20px;
}
/* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
.discussion-thread {
padding: 0;
@include transition(all .25s);
.dogear,
.vote-btn {
display: none;
}
&.expanded {
padding: 20px 0;
.dogear,
.vote-btn {
display: block;
}
.discussion-article {
border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
}
p {
margin-bottom: 0em;
}
.discussion-article {
border: 1px solid #ddd;
border-bottom-width: 0;
background: #fff;
min-height: 0;
padding: 10px 10px 15px 10px;
box-shadow: 0 1px 0 #ddd;
@include transition(all .2s);
.discussion-post {
padding: 12px 20px 0 20px;
@include clearfix;
header {
padding-bottom: 0;
margin-bottom: 15px;
h3 {
font-size: 19px;
font-weight: 700;
margin-bottom: 0px;
}
h4 {
font-size: 16px;
}
}
.post-body {
font-size: 14px;
clear: both;
}
}
.post-tools {
margin-left: 20px;
a {
display: block;
font-size: 12px;
line-height: 30px;
&.expand-post:before {
content: '▾ ';
}
&.collapse-post:before {
content: '▴ ';
}
&.collapse-post {
display: none;
}
}
}
.responses {
margin-top: 10px;
header {
padding-bottom: 0em;
margin-bottom: 5px;
.posted-by {
font-size: 0.8em;
}
}
.response-body {
margin-bottom: 0.2em;
font-size: 14px;
}
}
.discussion-reply-new {
.wmd-input {
height: 120px;
}
}
// Content that is hidden by default in the inline view
.post-extended-content{
display: none;
}
}
}
}
.new-post-article {
display: none;
margin-top: 20px;
.inner-wrapper {
max-width: 1180px;
min-width: 760px;
margin: auto;
}
.new-post-form {
width: 100%;
margin-bottom: 20px;
padding: 30px;
border-radius: 3px;
background: rgba(0, 0, 0, .55);
color: #fff;
box-shadow: none;
@include clearfix;
@include box-sizing(border-box);
.form-row {
margin-bottom: 20px;
}
.new-post-body .wmd-input {
@include discussion-wmd-input;
position: relative;
width: 100%;
height: 200px;
z-index: 1;
padding: 10px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 3px 3px 0 0;
background: #fff;
font-family: 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}
.new-post-body .wmd-preview {
@include discussion-wmd-preview;
position: relative;
width: 100%;
//height: 50px;
margin-top: -1px;
padding: 25px 20px 10px 20px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 0 0 3px 3px;
background: #e6e6e6;
color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}
.new-post-preview-label {
position: absolute;
top: 4px;
left: 4px;
font-size: 11px;
color: #aaa;
text-transform: uppercase;
}
.new-post-title,
.new-post-tags {
width: 100%;
height: 40px;
padding: 0 10px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #333;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}
.new-post-title {
font-weight: 700;
}
.tagsinput {
padding: 10px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 3px;
background: #fff;
font-family: 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
span.tag {
margin-bottom: 0;
}
}
.submit {
@include blue-button;
float: left;
height: 37px;
margin-top: 10px;
padding-bottom: 2px;
border-color: #333;
&:hover {
border-color: #222;
}
}
.new-post-cancel {
@include white-button;
float: left;
margin: 10px 0 0 15px;
border-color: #444;
}
.options {
margin-top: 5px;
label {
display: inline;
margin-left: 8px;
font-size: 15px;
color: #fff;
text-shadow: none;
}
}
}
.thread-tags {
margin-top: 20px;
}
.thread-tag {
padding: 3px 10px 6px;
border-radius: 3px;
color: #333;
background: #c5eeff;
border: 1px solid #90c4d7;
font-size: 13px;
}
.thread-title {
display: block;
margin-bottom: 20px;
font-size: 21px;
color: #333;
font-weight: 700;
}
}
.new-post-btn {
@include blue-button;
display: inline-block;
font-size: 13px;
margin-right: 4px;
}
.new-post-icon {
display: block;
float: left;
width: 16px;
height: 17px;
margin: 8px 7px 0 0;
font-size: 16px;
vertical-align: middle;
color: $white;
}
.moderator-actions {
padding-left: 0 !important;
}
section.pagination {
margin-top: 30px;
nav.discussion-paginator {
float: right;
ol {
li {
list-style: none;
display: inline-block;
padding-right: 0.5em;
a {
@include white-button;
}
}
li.current-page{
height: 35px;
padding: 0 15px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
line-height: 32px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
}
}
}
.new-post-body {
.wmd-panel {
width: 100%;
min-width: 500px;
}
.wmd-button-bar {
width: 100%;
}
.wmd-input {
height: 150px;
width: 100%;
background-color: #e9e9e9;
border: 1px solid #c8c8c8;
font-family: Monaco, 'Lucida Console', monospace;
font-style: normal;
font-size: 0.8em;
line-height: 1.6em;
@include border-radius(3px 3px 0 0);
&::-webkit-input-placeholder {
color: #888;
}
}
.wmd-preview {
position: relative;
font-family: $sans-serif;
padding: 25px 20px 10px 20px;
margin-bottom: 5px;
box-sizing: border-box;
border: 1px solid #c8c8c8;
border-top-width: 0;
@include border-radius(0 0 3px 3px);
overflow: hidden;
@include transition(all, .2s, easeOut);
&:before {
content: 'PREVIEW';
position: absolute;
top: 3px;
left: 5px;
font-size: 11px;
color: #bbb;
}
p {
font-family: $sans-serif;
}
background-color: #fafafa;
}
.wmd-button-row {
position: relative;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 10px;
padding: 0px;
height: 20px;
overflow: hidden;
@include transition(all, .2s, easeOut);
}
.wmd-spacer {
width: 1px;
height: 20px;
margin-left: 14px;
position: absolute;
background-color: Silver;
display: inline-block;
list-style: none;
}
.wmd-button {
width: 20px;
height: 20px;
padding-left: 2px;
padding-right: 3px;
position: absolute;
display: inline-block;
list-style: none;
cursor: pointer;
background: none;
}
.wmd-button > span {
display: inline-block;
background-image: url(../images/new-post-icons-full.png);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 20px;
height: 20px;
}
.wmd-spacer1 {
left: 50px;
}
.wmd-spacer2 {
left: 175px;
}
.wmd-spacer3 {
left: 300px;
}
.wmd-prompt-background {
background-color: Black;
}
.wmd-prompt-dialog {
@extend .modal;
background: #fff;
}
.wmd-prompt-dialog {
padding: 20px;
> div {
font-size: 0.8em;
font-family: arial, helvetica, sans-serif;
}
b {
font-size: 16px;
}
> form > input[type="text"] {
border-radius: 3px;
color: #333;
}
> form > input[type="button"] {
border: 1px solid #888;
font-family: $sans-serif;
font-size: 14px;
}
> form > input[type="file"] {
margin-bottom: 18px;
}
}
}
.wmd-button-row {
// this is being hidden now because the inline styles to position the icons are not being written
display: none;
position: relative;
height: 12px;
}
.wmd-button {
span {
background-image: url("/static/images/wmd-buttons.png");
display: inline-block;
}
}
}
\ No newline at end of file
lms/static/sass/vendor/_font-awesome.scss 0 → 100644
/*!
* Font Awesome 3.1.0
* the iconic font designed for Bootstrap
* -------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation
* can be found at: http://fontawesome.io
*
* License
* -------------------------------------------------------
* - The Font Awesome font is licensed under the SIL Open Font License v1.1 -
* http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
* http://opensource.org/licenses/mit-license.html
* - Font Awesome documentation licensed under CC BY 3.0 License -
* http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fontawesome.io"
* Contact
* -------------------------------------------------------
* Email: dave@fontawesome.io
* Twitter: http://twitter.com/fortaweso_me
* Work: Lead Product Designer @ http://kyruus.com
*/
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/vendor/fontawesome-webfont.eot?v=3.1.0');
src: url('../fonts/vendor/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../fonts/vendor/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../fonts/vendor/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../fonts/vendor/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
font-weight: normal;
font-style: normal;
}
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"],
a [class^="icon-"]:before,
a [class*=" icon-"]:before {
display: inline;
}
/* increased font size for icon-large */
[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
display: inline-block;
width: 1.2857142857142858em;
text-align: center;
}
[class^="icon-"].icon-fixed-width.icon-large,
[class*=" icon-"].icon-fixed-width.icon-large {
width: 1.5714285714285714em;
}
ul.icons-ul {
list-style-type: none;
text-indent: -0.7142857142857143em;
margin-left: 2.142857142857143em;
}
ul.icons-ul > li .icon-li {
width: 0.7142857142857143em;
display: inline-block;
text-align: center;
}
[class^="icon-"].hide,
[class*=" icon-"].hide {
display: none;
}
.icon-muted {
color: #eeeeee;
}
.icon-light {
color: #ffffff;
}
.icon-dark {
color: #333333;
}
.icon-border {
border: solid 1px #eeeeee;
padding: .2em .25em .15em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-2x {
font-size: 2em;
}
.icon-2x.icon-border {
border-width: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.icon-3x {
font-size: 3em;
}
.icon-3x.icon-border {
border-width: 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.icon-4x {
font-size: 4em;
}
.icon-4x.icon-border {
border-width: 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.icon-5x {
font-size: 5em;
}
.icon-5x.icon-border {
border-width: 5px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
margin-right: .3em;
}
[class^="icon-"].pull-right,
[class*=" icon-"].pull-right {
margin-left: .3em;
}
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */
.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
line-height: .9em;
}
.btn [class^="icon-"].icon-spin,
.nav [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
display: inline-block;
}
.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large,
.nav-pills [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"].icon-large,
.nav-pills [class*=" icon-"].icon-large {
line-height: .9em;
}
.btn [class^="icon-"].pull-left.icon-2x,
.btn [class*=" icon-"].pull-left.icon-2x,
.btn [class^="icon-"].pull-right.icon-2x,
.btn [class*=" icon-"].pull-right.icon-2x {
margin-top: .18em;
}
.btn [class^="icon-"].icon-spin.icon-large,
.btn [class*=" icon-"].icon-spin.icon-large {
line-height: .8em;
}
.btn.btn-small [class^="icon-"].pull-left.icon-2x,
.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
.btn.btn-small [class^="icon-"].pull-right.icon-2x,
.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
margin-top: .25em;
}
.btn.btn-large [class^="icon-"],
.btn.btn-large [class*=" icon-"] {
margin-top: 0;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x,
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
margin-top: .05em;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x {
margin-right: .2em;
}
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
margin-left: .2em;
}
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.icon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: -35%;
}
.icon-stack [class^="icon-"],
.icon-stack [class*=" icon-"] {
display: block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
font-size: 1em;
line-height: inherit;
*line-height: 2em;
}
.icon-stack .icon-stack-base {
font-size: 2em;
*line-height: 1em;
}
/* Animated rotating icon */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
/* Icon rotations and mirroring */
.icon-rotate-90:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270:before {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.icon-flip-horizontal:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-vertical:before {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before {
content: "\f000";
}
.icon-music:before {
content: "\f001";
}
.icon-search:before {
content: "\f002";
}
.icon-envelope:before {
content: "\f003";
}
.icon-heart:before {
content: "\f004";
}
.icon-star:before {
content: "\f005";
}
.icon-star-empty:before {
content: "\f006";
}
.icon-user:before {
content: "\f007";
}
.icon-film:before {
content: "\f008";
}
.icon-th-large:before {
content: "\f009";
}
.icon-th:before {
content: "\f00a";
}
.icon-th-list:before {
content: "\f00b";
}
.icon-ok:before {
content: "\f00c";
}
.icon-remove:before {
content: "\f00d";
}
.icon-zoom-in:before {
content: "\f00e";
}
.icon-zoom-out:before {
content: "\f010";
}
.icon-off:before {
content: "\f011";
}
.icon-signal:before {
content: "\f012";
}
.icon-cog:before {
content: "\f013";
}
.icon-trash:before {
content: "\f014";
}
.icon-home:before {
content: "\f015";
}
.icon-file:before {
content: "\f016";
}
.icon-time:before {
content: "\f017";
}
.icon-road:before {
content: "\f018";
}
.icon-download-alt:before {
content: "\f019";
}
.icon-download:before {
content: "\f01a";
}
.icon-upload:before {
content: "\f01b";
}
.icon-inbox:before {
content: "\f01c";
}
.icon-play-circle:before {
content: "\f01d";
}
.icon-repeat:before,
.icon-rotate-right:before {
content: "\f01e";
}
/* F020 doesn't work in Safari. all shifted one down */
.icon-refresh:before {
content: "\f021";
}
.icon-list-alt:before {
content: "\f022";
}
.icon-lock:before {
content: "\f023";
}
.icon-flag:before {
content: "\f024";
}
.icon-headphones:before {
content: "\f025";
}
.icon-volume-off:before {
content: "\f026";
}
.icon-volume-down:before {
content: "\f027";
}
.icon-volume-up:before {
content: "\f028";
}
.icon-qrcode:before {
content: "\f029";
}
.icon-barcode:before {
content: "\f02a";
}
.icon-tag:before {
content: "\f02b";
}
.icon-tags:before {
content: "\f02c";
}
.icon-book:before {
content: "\f02d";
}
.icon-bookmark:before {
content: "\f02e";
}
.icon-print:before {
content: "\f02f";
}
.icon-camera:before {
content: "\f030";
}
.icon-font:before {
content: "\f031";
}
.icon-bold:before {
content: "\f032";
}
.icon-italic:before {
content: "\f033";
}
.icon-text-height:before {
content: "\f034";
}
.icon-text-width:before {
content: "\f035";
}
.icon-align-left:before {
content: "\f036";
}
.icon-align-center:before {
content: "\f037";
}
.icon-align-right:before {
content: "\f038";
}
.icon-align-justify:before {
content: "\f039";
}
.icon-list:before {
content: "\f03a";
}
.icon-indent-left:before {
content: "\f03b";
}
.icon-indent-right:before {
content: "\f03c";
}
.icon-facetime-video:before {
content: "\f03d";
}
.icon-picture:before {
content: "\f03e";
}
.icon-pencil:before {
content: "\f040";
}
.icon-map-marker:before {
content: "\f041";
}
.icon-adjust:before {
content: "\f042";
}
.icon-tint:before {
content: "\f043";
}
.icon-edit:before {
content: "\f044";
}
.icon-share:before {
content: "\f045";
}
.icon-check:before {
content: "\f046";
}
.icon-move:before {
content: "\f047";
}
.icon-step-backward:before {
content: "\f048";
}
.icon-fast-backward:before {
content: "\f049";
}
.icon-backward:before {
content: "\f04a";
}
.icon-play:before {
content: "\f04b";
}
.icon-pause:before {
content: "\f04c";
}
.icon-stop:before {
content: "\f04d";
}
.icon-forward:before {
content: "\f04e";
}
.icon-fast-forward:before {
content: "\f050";
}
.icon-step-forward:before {
content: "\f051";
}
.icon-eject:before {
content: "\f052";
}
.icon-chevron-left:before {
content: "\f053";
}
.icon-chevron-right:before {
content: "\f054";
}
.icon-plus-sign:before {
content: "\f055";
}
.icon-minus-sign:before {
content: "\f056";
}
.icon-remove-sign:before {
content: "\f057";
}
.icon-ok-sign:before {
content: "\f058";
}
.icon-question-sign:before {
content: "\f059";
}
.icon-info-sign:before {
content: "\f05a";
}
.icon-screenshot:before {
content: "\f05b";
}
.icon-remove-circle:before {
content: "\f05c";
}
.icon-ok-circle:before {
content: "\f05d";
}
.icon-ban-circle:before {
content: "\f05e";
}
.icon-arrow-left:before {
content: "\f060";
}
.icon-arrow-right:before {
content: "\f061";
}
.icon-arrow-up:before {
content: "\f062";
}
.icon-arrow-down:before {
content: "\f063";
}
.icon-share-alt:before,
.icon-mail-forward:before {
content: "\f064";
}
.icon-resize-full:before {
content: "\f065";
}
.icon-resize-small:before {
content: "\f066";
}
.icon-plus:before {
content: "\f067";
}
.icon-minus:before {
content: "\f068";
}
.icon-asterisk:before {
content: "\f069";
}
.icon-exclamation-sign:before {
content: "\f06a";
}
.icon-gift:before {
content: "\f06b";
}
.icon-leaf:before {
content: "\f06c";
}
.icon-fire:before {
content: "\f06d";
}
.icon-eye-open:before {
content: "\f06e";
}
.icon-eye-close:before {
content: "\f070";
}
.icon-warning-sign:before {
content: "\f071";
}
.icon-plane:before {
content: "\f072";
}
.icon-calendar:before {
content: "\f073";
}
.icon-random:before {
content: "\f074";
}
.icon-comment:before {
content: "\f075";
}
.icon-magnet:before {
content: "\f076";
}
.icon-chevron-up:before {
content: "\f077";
}
.icon-chevron-down:before {
content: "\f078";
}
.icon-retweet:before {
content: "\f079";
}
.icon-shopping-cart:before {
content: "\f07a";
}
.icon-folder-close:before {
content: "\f07b";
}
.icon-folder-open:before {
content: "\f07c";
}
.icon-resize-vertical:before {
content: "\f07d";
}
.icon-resize-horizontal:before {
content: "\f07e";
}
.icon-bar-chart:before {
content: "\f080";
}
.icon-twitter-sign:before {
content: "\f081";
}
.icon-facebook-sign:before {
content: "\f082";
}
.icon-camera-retro:before {
content: "\f083";
}
.icon-key:before {
content: "\f084";
}
.icon-cogs:before {
content: "\f085";
}
.icon-comments:before {
content: "\f086";
}
.icon-thumbs-up:before {
content: "\f087";
}
.icon-thumbs-down:before {
content: "\f088";
}
.icon-star-half:before {
content: "\f089";
}
.icon-heart-empty:before {
content: "\f08a";
}
.icon-signout:before {
content: "\f08b";
}
.icon-linkedin-sign:before {
content: "\f08c";
}
.icon-pushpin:before {
content: "\f08d";
}
.icon-external-link:before {
content: "\f08e";
}
.icon-signin:before {
content: "\f090";
}
.icon-trophy:before {
content: "\f091";
}
.icon-github-sign:before {
content: "\f092";
}
.icon-upload-alt:before {
content: "\f093";
}
.icon-lemon:before {
content: "\f094";
}
.icon-phone:before {
content: "\f095";
}
.icon-check-empty:before {
content: "\f096";
}
.icon-bookmark-empty:before {
content: "\f097";
}
.icon-phone-sign:before {
content: "\f098";
}
.icon-twitter:before {
content: "\f099";
}
.icon-facebook:before {
content: "\f09a";
}
.icon-github:before {
content: "\f09b";
}
.icon-unlock:before {
content: "\f09c";
}
.icon-credit-card:before {
content: "\f09d";
}
.icon-rss:before {
content: "\f09e";
}
.icon-hdd:before {
content: "\f0a0";
}
.icon-bullhorn:before {
content: "\f0a1";
}
.icon-bell:before {
content: "\f0a2";
}
.icon-certificate:before {
content: "\f0a3";
}
.icon-hand-right:before {
content: "\f0a4";
}
.icon-hand-left:before {
content: "\f0a5";
}
.icon-hand-up:before {
content: "\f0a6";
}
.icon-hand-down:before {
content: "\f0a7";
}
.icon-circle-arrow-left:before {
content: "\f0a8";
}
.icon-circle-arrow-right:before {
content: "\f0a9";
}
.icon-circle-arrow-up:before {
content: "\f0aa";
}
.icon-circle-arrow-down:before {
content: "\f0ab";
}
.icon-globe:before {
content: "\f0ac";
}
.icon-wrench:before {
content: "\f0ad";
}
.icon-tasks:before {
content: "\f0ae";
}
.icon-filter:before {
content: "\f0b0";
}
.icon-briefcase:before {
content: "\f0b1";
}
.icon-fullscreen:before {
content: "\f0b2";
}
.icon-group:before {
content: "\f0c0";
}
.icon-link:before {
content: "\f0c1";
}
.icon-cloud:before {
content: "\f0c2";
}
.icon-beaker:before {
content: "\f0c3";
}
.icon-cut:before {
content: "\f0c4";
}
.icon-copy:before {
content: "\f0c5";
}
.icon-paper-clip:before {
content: "\f0c6";
}
.icon-save:before {
content: "\f0c7";
}
.icon-sign-blank:before {
content: "\f0c8";
}
.icon-reorder:before {
content: "\f0c9";
}
.icon-list-ul:before {
content: "\f0ca";
}
.icon-list-ol:before {
content: "\f0cb";
}
.icon-strikethrough:before {
content: "\f0cc";
}
.icon-underline:before {
content: "\f0cd";
}
.icon-table:before {
content: "\f0ce";
}
.icon-magic:before {
content: "\f0d0";
}
.icon-truck:before {
content: "\f0d1";
}
.icon-pinterest:before {
content: "\f0d2";
}
.icon-pinterest-sign:before {
content: "\f0d3";
}
.icon-google-plus-sign:before {
content: "\f0d4";
}
.icon-google-plus:before {
content: "\f0d5";
}
.icon-money:before {
content: "\f0d6";
}
.icon-caret-down:before {
content: "\f0d7";
}
.icon-caret-up:before {
content: "\f0d8";
}
.icon-caret-left:before {
content: "\f0d9";
}
.icon-caret-right:before {
content: "\f0da";
}
.icon-columns:before {
content: "\f0db";
}
.icon-sort:before {
content: "\f0dc";
}
.icon-sort-down:before {
content: "\f0dd";
}
.icon-sort-up:before {
content: "\f0de";
}
.icon-envelope-alt:before {
content: "\f0e0";
}
.icon-linkedin:before {
content: "\f0e1";
}
.icon-undo:before,
.icon-rotate-left:before {
content: "\f0e2";
}
.icon-legal:before {
content: "\f0e3";
}
.icon-dashboard:before {
content: "\f0e4";
}
.icon-comment-alt:before {
content: "\f0e5";
}
.icon-comments-alt:before {
content: "\f0e6";
}
.icon-bolt:before {
content: "\f0e7";
}
.icon-sitemap:before {
content: "\f0e8";
}
.icon-umbrella:before {
content: "\f0e9";
}
.icon-paste:before {
content: "\f0ea";
}
.icon-lightbulb:before {
content: "\f0eb";
}
.icon-exchange:before {
content: "\f0ec";
}
.icon-cloud-download:before {
content: "\f0ed";
}
.icon-cloud-upload:before {
content: "\f0ee";
}
.icon-user-md:before {
content: "\f0f0";
}
.icon-stethoscope:before {
content: "\f0f1";
}
.icon-suitcase:before {
content: "\f0f2";
}
.icon-bell-alt:before {
content: "\f0f3";
}
.icon-coffee:before {
content: "\f0f4";
}
.icon-food:before {
content: "\f0f5";
}
.icon-file-alt:before {
content: "\f0f6";
}
.icon-building:before {
content: "\f0f7";
}
.icon-hospital:before {
content: "\f0f8";
}
.icon-ambulance:before {
content: "\f0f9";
}
.icon-medkit:before {
content: "\f0fa";
}
.icon-fighter-jet:before {
content: "\f0fb";
}
.icon-beer:before {
content: "\f0fc";
}
.icon-h-sign:before {
content: "\f0fd";
}
.icon-plus-sign-alt:before {
content: "\f0fe";
}
.icon-double-angle-left:before {
content: "\f100";
}
.icon-double-angle-right:before {
content: "\f101";
}
.icon-double-angle-up:before {
content: "\f102";
}
.icon-double-angle-down:before {
content: "\f103";
}
.icon-angle-left:before {
content: "\f104";
}
.icon-angle-right:before {
content: "\f105";
}
.icon-angle-up:before {
content: "\f106";
}
.icon-angle-down:before {
content: "\f107";
}
.icon-desktop:before {
content: "\f108";
}
.icon-laptop:before {
content: "\f109";
}
.icon-tablet:before {
content: "\f10a";
}
.icon-mobile-phone:before {
content: "\f10b";
}
.icon-circle-blank:before {
content: "\f10c";
}
.icon-quote-left:before {
content: "\f10d";
}
.icon-quote-right:before {
content: "\f10e";
}
.icon-spinner:before {
content: "\f110";
}
.icon-circle:before {
content: "\f111";
}
.icon-reply:before,
.icon-mail-reply:before {
content: "\f112";
}
.icon-folder-close-alt:before {
content: "\f114";
}
.icon-folder-open-alt:before {
content: "\f115";
}
.icon-expand-alt:before {
content: "\f116";
}
.icon-collapse-alt:before {
content: "\f117";
}
.icon-smile:before {
content: "\f118";
}
.icon-frown:before {
content: "\f119";
}
.icon-meh:before {
content: "\f11a";
}
.icon-gamepad:before {
content: "\f11b";
}
.icon-keyboard:before {
content: "\f11c";
}
.icon-flag-alt:before {
content: "\f11d";
}
.icon-flag-checkered:before {
content: "\f11e";
}
.icon-terminal:before {
content: "\f120";
}
.icon-code:before {
content: "\f121";
}
.icon-reply-all:before {
content: "\f122";
}
.icon-mail-reply-all:before {
content: "\f122";
}
.icon-star-half-full:before,
.icon-star-half-empty:before {
content: "\f123";
}
.icon-location-arrow:before {
content: "\f124";
}
.icon-crop:before {
content: "\f125";
}
.icon-code-fork:before {
content: "\f126";
}
.icon-unlink:before {
content: "\f127";
}
.icon-question:before {
content: "\f128";
}
.icon-info:before {
content: "\f129";
}
.icon-exclamation:before {
content: "\f12a";
}
.icon-superscript:before {
content: "\f12b";
}
.icon-subscript:before {
content: "\f12c";
}
.icon-eraser:before {
content: "\f12d";
}
.icon-puzzle-piece:before {
content: "\f12e";
}
.icon-microphone:before {
content: "\f130";
}
.icon-microphone-off:before {
content: "\f131";
}
.icon-shield:before {
content: "\f132";
}
.icon-calendar-empty:before {
content: "\f133";
}
.icon-fire-extinguisher:before {
content: "\f134";
}
.icon-rocket:before {
content: "\f135";
}
.icon-maxcdn:before {
content: "\f136";
}
.icon-chevron-sign-left:before {
content: "\f137";
}
.icon-chevron-sign-right:before {
content: "\f138";
}
.icon-chevron-sign-up:before {
content: "\f139";
}
.icon-chevron-sign-down:before {
content: "\f13a";
}
.icon-html5:before {
content: "\f13b";
}
.icon-css3:before {
content: "\f13c";
}
.icon-anchor:before {
content: "\f13d";
}
.icon-unlock-alt:before {
content: "\f13e";
}
.icon-bullseye:before {
content: "\f140";
}
.icon-ellipsis-horizontal:before {
content: "\f141";
}
.icon-ellipsis-vertical:before {
content: "\f142";
}
.icon-rss-sign:before {
content: "\f143";
}
.icon-play-sign:before {
content: "\f144";
}
.icon-ticket:before {
content: "\f145";
}
.icon-minus-sign-alt:before {
content: "\f146";
}
.icon-check-minus:before {
content: "\f147";
}
.icon-level-up:before {
content: "\f148";
}
.icon-level-down:before {
content: "\f149";
}
.icon-check-sign:before {
content: "\f14a";
}
.icon-edit-sign:before {
content: "\f14b";
}
.icon-external-link-sign:before {
content: "\f14c";
}
.icon-share-sign:before {
content: "\f14d";
}
lms/templates/discussion/_discussion_course_navigation.html
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
<%block name="extratabs"> <%block name="extratabs">
% if has_permission(user, 'create_thread', course.id): % if has_permission(user, 'create_thread', course.id):
<li class="right"><a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a></li> <li class="right"><a href="#" class="new-post-btn"><span class="icon icon-edit new-post-icon"></span>New Post</a></li>
% endif % endif
</%block> </%block>
\ No newline at end of file
lms/templates/discussion/_discussion_module.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="discussion-module" data-discussion-id="${discussion_id | h}"> <div class="discussion-module" data-discussion-id="${discussion_id | h}">
<a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a> <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
<a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a> <a href="#" class="new-post-btn"><span class="icon icon-edit new-post-icon"></span>New Post</a>
</div> </div>
lms/templates/discussion/_filter_dropdown.html
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
</%def> </%def>
<%def name="render_entry(entries, entry)"> <%def name="render_entry(entries, entry)">
<li><a href="#"><span class="board-name" data-discussion_id='${json.dumps(entries[entry])}' cohorted = "${entries[entry]['id'] in cohorted_commentables}">${entry}</span></a></li> <li><a href="#" class="drop-menu-entry"><span class="board-name" data-discussion_id='${json.dumps(entries[entry])}' cohorted = "${entries[entry]['id'] in cohorted_commentables}">${entry}</span></a></li>
</%def> </%def>
<%def name="render_category(categories, category)"> <%def name="render_category(categories, category)">
<li> <li>
<a href="#"><span class="board-name">${category}</span></a> <a href="#" class="drop-menu-parent-category"><span class="board-name">${category}</span></a>
<ul> <ul>
${render_dropdown(categories[category])} ${render_dropdown(categories[category])}
</ul> </ul>
...@@ -29,21 +29,21 @@ ...@@ -29,21 +29,21 @@
</div> </div>
<ul class="browse-topic-drop-menu"> <ul class="browse-topic-drop-menu">
<li> <li>
<a href="#"> <a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#all'>Show All Discussions</span> <span class="board-name" data-discussion_id='#all'>Show All Discussions</span>
</a> </a>
</li> </li>
%if flag_moderator: %if flag_moderator:
<li> <li>
<a href="#"> <a href="#">
<span class="board-name" data-discussion_id='#flagged'>Show Flagged Discussions</span> <span class="board-name" data-discussion_id='#flagged'><i class="icon-flag" style="padding-right:5px;"></i>Show Flagged Discussions</span>
</a> </a>
</li> </li>
%endif %endif
<li> <li>
<a href="#"> <a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#following'>Following</span> <span class="board-name" data-discussion_id='#following'><i class="icon-star" style="padding-right:5px;"></i>Posts I'm Following</span>
</a> </a>
</li> </li>
${render_dropdown(category_map)} ${render_dropdown(category_map)}
......
lms/templates/discussion/_thread_list_template.html
<script type="text/template" id="thread-list-template"> <script type="text/template" id="thread-list-template">
<div class="browse-search"> <div class="browse-search">
<div class="home">
<a href="#" class="home-icon">
<i class="icon-home"></i>
</a>
</div>
<div class="browse is-open"> <div class="browse is-open">
<a href="#" class="browse-topic-drop-icon"></a> <a href="#" class="browse-topic-drop-icon"></a>
<a href="#" class="browse-topic-drop-btn"><span class="current-board">Show All Discussions</span> <span class="drop-arrow">▾</span></a> <a href="#" class="browse-topic-drop-btn"><span class="current-board">Show All Discussions</span> <span class="drop-arrow">▾</span></a>
......
lms/templates/discussion/_underscore_templates.html
...@@ -48,17 +48,17 @@ ...@@ -48,17 +48,17 @@
<div class="post-body">${'<%- body %>'}</div> <div class="post-body">${'<%- body %>'}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse"> <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse">
<i class="icon"></i><span class="flag-label">Report Misuse</span></div> <i class="icon icon-flag"></i><span class="flag-label">Report Misuse</span></div>
% if course and has_permission(user, 'openclose_thread', course.id): % if course and has_permission(user, 'openclose_thread', course.id):
<div class="admin-pin discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread"> <div class="admin-pin discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread">
<i class="icon"></i><span class="pin-label">Pin Thread</span></div> <i class="icon icon-pushpin"></i><span class="pin-label">Pin Thread</span></div>
%else: %else:
${"<% if (pinned) { %>"} ${"<% if (pinned) { %>"}
<div class="discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread"> <div class="discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread">
<i class="icon"></i><span class="pin-label">Pin Thread</span></div> <i class="icon icon-pushpin"></i><span class="pin-label">Pin Thread</span></div>
${"<% } %>"} ${"<% } %>"}
% endif % endif
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
</header> </header>
<div class="response-local"><div class="response-body">${"<%- body %>"}</div> <div class="response-local"><div class="response-body">${"<%- body %>"}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse"> <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse">
<i class="icon"></i><span class="flag-label">Report Misuse</span></div> <i class="icon icon-flag"></i><span class="flag-label">Report Misuse</span></div>
</div> </div>
<ul class="moderator-actions response-local"> <ul class="moderator-actions response-local">
<li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li> <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
...@@ -150,8 +150,8 @@ ...@@ -150,8 +150,8 @@
<script type="text/template" id="response-comment-show-template"> <script type="text/template" id="response-comment-show-template">
<div id="comment_${'<%- id %>'}"> <div id="comment_${'<%- id %>'}">
<div class="response-body">${'<%- body %>'}</div> <div class="response-body">${'<%- body %>'}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse"> <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse">
<i class="icon"></i><span class="flag-label"></span></div> <i class="icon icon-flag"></i><span class="flag-label"></span></div>
<p class="posted-details">&ndash;posted <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by <p class="posted-details">&ndash;posted <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by
${"<% if (obj.username) { %>"} ${"<% if (obj.username) { %>"}
<a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a> <a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a>
......
lms/templates/discussion/index.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<%block name="headextra"> <%block name="headextra">
<%static:css group='course'/> <%static:css group='course'/>
<%include file="_js_head_dependencies.html" /> <%include file="_js_head_dependencies.html" />
</%block> </%block>
<%block name="js_extra"> <%block name="js_extra">
...@@ -26,12 +26,75 @@ ...@@ -26,12 +26,75 @@
<div class="sidebar"></div> <div class="sidebar"></div>
<div class="discussion-column"> <div class="discussion-column">
<div class="discussion-article blank-slate"> <div class="discussion-article blank-slate">
<h1>${course.display_name_with_default} Discussion</h1> <section class="home-header">
<span class="label">DISCUSSION HOME:</span>
<h1 class="home-title">${course.display_name_with_default}</h1>
</section>
<section class="home-stats">
<div class="label-area">
<span class="label"> PROFILE, PARTICIPATION</span>
<a href="#" class="profile-link">Your profile Name</a>
</div>
<div class="stats-grouping">
<div class="profile-stat profile-stat-posts">
<span class="count count-posts">5</span>
<span class="profile-stat-label">POSTS</span>
</div>
<div class="profile-stat profile-stat-comments">
<span class="count count-comments">12</span>
<span class="profile-stat-label">COMMENTS</span>
</div>
<div class="profile-stat profile-stat-following">
<span class="count count-following">9</span>
<span class="profile-stat-label">FOLLOWING</span>
</div>
</div>
</section>
<span class="label label-settings">HOW TO USE EDX DISCUSSIONS</span>
<table class="home-helpgrid">
<tr class="helpgrid-row helpgrid-row-navigation">
<td class="row-title">Find discussions</td>
<td class="row-item">
<i class="icon icon-reorder"></i>
<span class="row-description">Focus in on specific topics</span>
</td>
<td class="row-item">
<i class="icon icon-search"></i>
<span class="row-description">Search for specific posts </span>
</td>
<td class="row-item">
<i class="icon icon-sort"></i>
<span class="row-description">Sort by date, vote, or comments </span>
</td>
</tr>
<tr class="helpgrid-row helpgrid-row-participation">
<td class="row-title">Engage with posts</td>
<td class="row-item">
<i class="icon icon-plus"></i>
<span class="row-description">Upvote posts and good responses</span>
</td>
<td class="row-item">
<i class="icon icon-flag"></i>
<span class="row-description">Report Forum Misuse</span>
</td>
<td class="row-item">
<i class="icon icon-star"></i>
<span class="row-description">Follow posts for updates</span>
</td>
</tr>
<tr class="helpgrid-row helpgrid-row-notification">
<td class="row-title">Receive updates</td>
<td class="row-item-full" colspan="3">
<i class="icon icon-envelope"></i>
<span class="row-setting"><input type="checkbox" name="email-notification"></input></span>
<span class="row-description"> If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following. </span>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<%include file="_underscore_templates.html" /> <%include file="_underscore_templates.html" />
<%include file="_thread_list_template.html" /> <%include file="_thread_list_template.html" />
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