Skip to content

E
edx-platform
Commit accbda34 by Andy Armstrong
Options

Clean up discussion styling issues 

TNL-6184
parent c1cf4e78
Showing with 225 additions and 841 deletions
common/static/common/templates/discussion/customwmd-prompt.underscore
......@@ -44,8 +44,8 @@
%></div>
</fieldset>
<div class="form-actions">
<input type="button" id="new-link-image-ok" class="btn btn-primary btn-base form-btn" value="<%- okText %>" />
<input type="button" id="new-link-image-cancel" class="btn btn-primary btn-base form-btn" value="<%- cancelText %>" >
<input type="button" id="new-link-image-ok" class="btn-brand form-btn" value="<%- okText %>" />
<input type="button" id="new-link-image-cancel" class="btn form-btn" value="<%- cancelText %>" >
</div>
</form>
</div>
lms/static/sass/course/discussion/_form-wmd-toolbar.scss deleted 100644 → 0
// Styles for the WYSIWYG question/answer editor
.wmd-panel
{
}
#wmd-button-bar {
border: 1px solid #ddd;
height:36px;
float:left;
width:99%;
}
#wmd-input {
height: 500px;
background-color: Gainsboro;
border: 1px solid DarkGray;
margin-top: -($baseline);
}
#wmd-preview {
background-color: LightSkyBlue;
}
#wmd-output {
background-color: Pink;
}
#wmd-button-row {
position: relative;
margin-left: ($baseline/4);
margin-right: ($baseline/4);
margin-bottom: 0px;
margin-top: ($baseline/2);
padding: 0px;
height: 20px;
}
.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;
margin-left: ($baseline/4);
margin-right: ($baseline/4);
position: absolute;
background-image: url('#{$static-path}/images/wmd-buttons.png');
background-repeat: no-repeat;
background-position: 0px 0px;
display: inline-block;
list-style: none;
}
.wmd-button > a {
width: 20px;
height: 20px;
margin-left: ($baseline/4);
margin-right: ($baseline/4);
position: absolute;
display: inline-block;
}
/* sprite button slicing style information */
#wmd-bold-button {left: 0px; background-position: 0px 0;}
#wmd-italic-button {left: 25px; background-position: -20px 0;}
#wmd-spacer1 {left: 50px;}
#wmd-link-button {left: 75px; background-position: -40px 0;}
#wmd-quote-button {left: 100px; background-position: -60px 0;}
#wmd-code-button {left: 125px; background-position: -80px 0;}
#wmd-image-button {left: 150px; background-position: -100px 0;}
#wmd-attachment-button {left: 175px; background-position: -120px 0;}
#wmd-spacer2 {left: 200px;}
#wmd-olist-button {left: 225px; background-position: -140px 0;}
#wmd-ulist-button {left: 250px; background-position: -160px 0;}
#wmd-heading-button {left: 275px; background-position: -180px 0;}
#wmd-hr-button {left: 300px; background-position: -200px 0;}
#wmd-spacer3 {left: 325px;}
#wmd-undo-button {left: 350px; background-position: -220px 0;}
#wmd-redo-button {left: 375px; background-position: -240px 0;}
#wmd-help-button {right: 0px; background-position: -260px 0;}
.wmd-prompt-background
{
background-color: Black;
}
.wmd-prompt-dialog
{
border: 1px solid #999999;
background-color: #F5F5F5;
}
.wmd-prompt-dialog > div {
font-size: 1em;
font-family: arial, helvetica, sans-serif;
}
.wmd-prompt-dialog {
.form {
width: 400px;
margin: 0 auto;
}
.form-actions {
text-align: center;
}
.input-text {
width: 400px;
padding: 0px 12px;
}
.field-hint,
.field-message.has-error {
width: 380px;
}
.file-upload {
.input-text {
width: 230px;
}
.field-message.has-error {
margin-top: -1px;
width: 210px;
}
.form-btn {
margin: 0 0 0 10px;
height: 35px;
width: 130px;
padding: 6px;
}
}
}
lms/static/sass/course/discussion/_form.scss deleted 100644 → 0
// ------------------------------
// edX Pattern Library: Components - Forms
// About: Contains base styling for forms
// #SETTINGS
// #GLOBAL
// #INPUT TEXT
// #INPUT RADIO/CHECKBOX
// ------------------------------
// ------------------------------
// IMPORTANT: This is meant for the modals in the discussion forum
// when doing updates on them we added the classes to make it compatible
// with the pattern library. So, it is modified and scoped to that modal.
// TODO: Remove this file once the pattern library it implemented.
// ------------------------------
.wmd-prompt-dialog {
// ----------------------------
// #SETTINGS
// ----------------------------
$spacing-vertical-x-small: ($baseline/2);
$spacing-vertical-base: ($baseline*2);
$spacing-vertical-mid-small: ($baseline*1.5);
$spacing-vertical-small: $baseline;
$font-size-large: 18px;
$font-size-base: 16px;
$font-size-small: 14px;
$component-border-radius: 3px !default;
$error-base: rgb(178, 6, 16);
$error-dark: rgb(125, 9, 16);
$grayscale-x-dark: rgb(77, 75, 75);
$grayscale-x-light: rgb(231, 230, 230);
$grayscale-white: rgb(252, 252, 252);
$grayscale-cool-x-dark: rgb(52, 56, 58);
$grayscale-cool-x-light: rgb(229, 233, 235);
$primary-accent: rgb(14, 166, 236);
$transparent: rgba(167, 164, 164, 0.498039);
$text-base-color: $grayscale-x-dark !default;
$label-color: $text-base-color !default;
$label-color-active: $grayscale-x-dark !default;
$input-placeholder-text: $grayscale-cool-x-light !default;
$input-default-background: $grayscale-white !default;
$input-default-border-color: $grayscale-x-light !default;
$input-default-focus-border-color: $primary-accent !default;
$input-default-color: $grayscale-cool-x-dark !default;
$input-default-focus-color: $grayscale-cool-x-dark !default;
$input-alt-background: $transparent !default;
$input-alt-focus-border-color: $grayscale-x-dark !default;
// ----------------------------
// #GLOBAL
// ----------------------------
// sections of a form
.form-group {
margin-bottom: $spacing-vertical-mid-small;
// section title or legend
.form-group-hd {
margin-bottom: $spacing-vertical-small;
font-size: $font-size-large;
}
.field {
margin-bottom: $spacing-vertical-base;
&:last-child {
margin-bottom: 0;
}
}
}
// radio button and checkbox fieldsets
.field-group {
margin-bottom: $spacing-vertical-small;
// group title or legend
.field-group-hd {
margin-bottom: $spacing-vertical-small;
font-size: $font-size-large;
}
.field {
margin-bottom: $spacing-vertical-x-small;
&:last-child {
margin-bottom: 0;
}
}
}
.field-label {
display: block;
width: auto;
margin-bottom: $spacing-vertical-x-small;
font-size: $font-size-base;
line-height: 100%;
color: $label-color;
// presents the label inline with the form control
&.label-inline {
display: inline-block;
margin-bottom: 0;
}
// STATE: is selected
.field-input:checked + .field-input-label,
.field-radio:checked + .field-input-label,
&.is-active,
&.is-selected {
color: $label-color-active;
}
}
.field-message {
font-size: $font-size-small;
border-bottom-left-radius: $component-border-radius;
border-bottom-right-radius: $component-border-radius;
&.has-error {
padding: $spacing-vertical-x-small;
background: $error-base;
color: $grayscale-white;
}
}
.field-input,
.field-select,
.field-textarea {
display: inline-block;
padding: rem($baseline/2);
border: 1px solid $input-default-border-color;
background: $input-default-background;
font-size: $font-size-base;
color: $input-default-color;
// STATE: is active or has focus
&:focus,
&.is-active {
border-color: $input-default-focus-border-color;
color: $input-default-focus-color;
}
// STATE: has an error
&.has-error {
border-color: $error-base;
& + .field-hint {
color: $error-dark;
}
.icon {
fill: $error-base;
}
}
}
// ----------------------------
// #INPUT TEXT
// ----------------------------
.input-text {
&.input-alt {
padding: $spacing-vertical-small 0;
border-width: 0 0 2px 0;
background: $input-alt-background;
// STATE: is active or has focus
&:focus,
&.is-active {
border-color: $input-alt-focus-border-color;
background: $input-alt-background;
}
&.has-error {
border-width: 1px 1px 2px 1px;
border-color: $error-base;
}
}
}
// ----------------------------
// Buttons
// ----------------------------
.form-btn {
display: inline-block;
margin: 10px;
border-style: solid;
border-radius: $component-border-radius;
border-width: 1px;
padding: $spacing-vertical-x-small $baseline;
font-size: $font-size-base;
font-weight: 600;
}
}
lms/static/sass/discussion/_build-discussion.scss
......@@ -21,7 +21,3 @@ $static-path: '../..';
@import "views/response";
@import 'utilities/developer';
@import 'utilities/shame';
// Styles for WYSIWYG Markdown editor
@import "../course/discussion/form-wmd-toolbar";
@import "../course/discussion/form";
lms/static/sass/discussion/_discussion-v1.scss
......@@ -41,21 +41,19 @@
&:hover,
&:active,
&:focus {
border-color: $forum-color-hover;
background-color: $forum-color-hover;
background-image: none;
box-shadow: none;
color: $forum-color-active-text;
text-decoration: none; // Don't show underlines on links that are styled as buttons
// Note:these rules all need !important in order to beat out
// the base button styling defined in the courseware.
border-color: $forum-color-hover !important;
background-color: $forum-color-hover !important;
background-image: none !important;
box-shadow: none !important;
color: $forum-color-active-text !important;
text-decoration: none !important; // Don't show underlines on links that are styled as buttons
}
}
// Layout control for discussion modules that does not apply to the discussion board
.discussion-module {
.discussion {
clear: both;
}
// Use pattern library buttons for discussion components
.discussion-module, .wmd-prompt-dialog {
.btn {
@extend %pattern-library-btn;
background-color: $forum-color-background;
......@@ -68,3 +66,10 @@
color: $forum-color-active-text;
}
}
// Layout control for discussion modules that does not apply to the discussion board
.discussion-module {
.discussion {
clear: both;
}
}
lms/static/sass/discussion/_discussion.scss
......@@ -3,179 +3,6 @@
// NOTE: this file is deprecated, and we should not continue to add to this file. Use other partials as appropriate.
.discussion-body {
.edit-post-form {
@include clearfix();
box-sizing: border-box;
width: 100%;
padding-top: 0;
h1 {
font-size: $forum-x-large-font-size;
}
.form-row {
margin-top: $baseline;
}
.post-cancel {
@include float(left);
@include margin($baseline/2, 0, 0, $baseline*0.75);
}
.post-update {
@include float(left);
margin-top: ($baseline/2);
&:hover, &:focus {
border-color: #222;
}
}
.edit-post-title {
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
padding: 0 ($baseline/2);
width: 100%;
height: 40px;
box-shadow: 0 1px 3px $shadow-l1 inset;
color: $dark-gray;
font-size: $forum-large-font-size;
font-family: $sans-serif;
}
}
.comments .edit-post-form h1 {
font-size: $forum-large-font-size;
}
.thread-title {
display: block;
margin-bottom: $baseline;
color: $gray-d3;
font-weight: 700;
font-size: $forum-x-large-font-size;
}
.wmd-panel {
width: 100%;
}
.wmd-button-bar {
width: 100%;
background-color: Silver;
}
.wmd-input {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
border: 1px solid $forum-color-border;
width: 100%;
height: 150px;
background-color: $gray-l4;
font-style: normal;
font-size: $forum-base-font-size;
font-family: $f-sans-serif;
line-height: 1.6em;
&::-webkit-input-placeholder {
color: #888;
}
}
.wmd-button-row {
@include transition(all .2s ease-out 0s);
@include margin(($baseline/2), ($baseline/4), ($baseline/4), ($baseline/4));
position: relative;
overflow: hidden;
padding: 0;
height: 20px;
}
.wmd-spacer {
@include margin-left(14px);
position: absolute;
display: inline-block;
width: 1px;
height: 20px;
background-color: Silver;
list-style: none;
}
.wmd-button {
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
border: none;
background: none;
list-style: none;
cursor: pointer;
padding: 0;
}
.wmd-button > span {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
background-repeat: no-repeat;
}
.wmd-spacer1 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 50px;
}
.wmd-spacer2 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 175px;
}
.wmd-spacer3 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 300px;
}
.wmd-prompt-background {
background-color: Black;
}
.wmd-prompt-dialog {
@extend .modal;
background: $forum-color-background;
}
.wmd-prompt-dialog {
padding: $baseline;
> div {
font-size: $forum-base-font-size;
font-family: $sans-serif;
}
b {
font-size: $forum-large-font-size;
}
> form > input[type="text"] {
border-radius: $forum-border-radius;
color: $gray-d3;
}
> form > input[type="button"] {
border: 1px solid #888;
font-size: $forum-base-font-size;
font-family: $sans-serif;
}
> form > input[type="file"] {
margin-bottom: 18px;
}
}
}
.discussion-body {
@include clearfix();
border: none;
background: transparent;
......@@ -197,44 +24,6 @@
}
}
blockquote {
background: $forum-color-background-light;
border-radius: $forum-border-radius;
padding: ($baseline/4) ($baseline/2);
font-size: $forum-base-font-size;
}
.comment-form {
padding: ($baseline/2) 0;
.wmd-input {
@include transition(all .2s linear 0s);
}
.wmd-button {
background: transparent;
span {
background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
}
}
}
.comment-form-input {
width: 100%;
height: 31px;
padding: 0 ($baseline/2);
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
box-shadow: 0 1px 3px $shadow-l1 inset;
@include transition(border-color .1s linear 0s);
&:focus {
border-color: #4697c1;
}
}
.main-article.new {
display: none;
padding: ($baseline*2.5);
......@@ -250,33 +39,9 @@
}
}
.wmd-button-bar {
border: none;
}
.wmd-input {
@include discussion-wmd-input;
}
.wmd-preview-container {
@include discussion-wmd-preview-container;
}
.wmd-preview-label {
@include discussion-wmd-preview-label;
}
.wmd-preview {
@include discussion-wmd-preview;
}
.reply-post-control {
margin-top: $baseline;
}
.discussion-submit-post {
@include float(left);
}
}
// ====================
......@@ -336,7 +101,6 @@
background-color: $btn-default-background-color;
color: $uxpl-primary-blue;
}
}
section.discussion {
......@@ -344,45 +108,15 @@ section.discussion {
}
.new-post-article {
.forum-new-post-form {
padding: $baseline;
}
.inner-wrapper {
max-width: 1180px;
min-width: 760px;
margin: auto;
}
.thread-title {
display: block;
margin-bottom: $baseline;
font-size: $forum-x-large-font-size;
color: $gray-d3;
font-weight: 600;
}
}
.edit-post-form {
@include clearfix();
width: 100%;
margin-bottom: $baseline;
box-sizing: border-box;
.form-row {
margin-top: $baseline;
}
.edit-post-title {
width: 100%;
height: 40px;
padding: 0 ($baseline/2);
box-sizing: border-box;
border-radius: $forum-border-radius;
border: 1px solid $forum-color-border;
font-size: $forum-large-font-size;
font-family: $sans-serif;
color: $gray-d3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
}
}
.xblock-student_view-discussion {
......@@ -423,32 +157,3 @@ section.discussion-pagination {
}
}
}
.response-count {
@include float(right);
color: $forum-color-response-count;
font-size: $forum-base-font-size;
}
.response-pagination {
visibility: visible;
padding: 0 ($baseline/2);
&:empty {
visibility: hidden;
}
.response-display-count {
display: block;
padding: ($baseline/2) 0;
color: $forum-color-response-count;
font-size: $forum-base-font-size;
}
.load-response-button {
@include text-align(left);
position: relative;
margin: ($baseline/2) 0;
width: 100%;
}
}
lms/static/sass/discussion/elements/_actions.scss
.discussion.container, .discussion-module {
.discussion {
// discussion - elements - actions
// ====================
......
lms/static/sass/discussion/elements/_editor.scss
......@@ -10,153 +10,139 @@
// CASE: new post
.forum-new-post-form {
.wmd-input {
@include discussion-wmd-input;
box-sizing: border-box;
position: relative;
z-index: 1;
width: 100%;
height: 150px;
background: $forum-color-background;
}
.wmd-preview-container {
@include discussion-new-post-wmd-preview-container;
}
.wmd-preview-label {
@include discussion-wmd-preview-label;
}
.wmd-preview {
@include discussion-wmd-preview;
}
.wmd-button {
background: none;
}
}
// =========================
// CASE: inline styling
// TO-DO: additional styling cleanup here necessary, for now this case was ported over from _discussion.scss
.discussion-module {
// WMD styling
.wmd-panel {
width: 100%;
}
.wmd-preview-container {
@include discussion-new-post-wmd-preview-container;
}
.wmd-button-bar {
width: 100%;
}
.wmd-preview-label {
@include discussion-wmd-preview-label;
}
.wmd-button-row {
@include transition(all .2s ease-out 0s);
position: relative;
overflow: hidden;
margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
padding: 0;
height: 30px;
}
.wmd-preview {
@include discussion-wmd-preview;
}
.wmd-spacer {
@include margin-left(14px);
position: absolute;
display: inline-block;
width: 1px;
height: 20px;
background-color: Silver;
list-style: none;
}
.wmd-button {
background: none;
}
.wmd-button {
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
border: none;
background: none;
list-style: none;
cursor: pointer;
padding: 0;
}
.wmd-button-bar {
width: 100%;
}
.wmd-button:hover {
background: none;
box-shadow: none;
}
.wmd-button-row {
@include transition(all .2s ease-out 0s);
position: relative;
overflow: hidden;
margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
padding: 0;
height: 30px;
}
.wmd-button > span {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
background-position: 0 0;
background-repeat: no-repeat;
}
.wmd-spacer {
@include margin-left(14px);
position: absolute;
display: inline-block;
width: 1px;
height: 20px;
background-color: Silver;
list-style: none;
}
.wmd-spacer1 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 50px;
}
.wmd-button {
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
border: none;
background: none;
list-style: none;
cursor: pointer;
padding: 0;
}
.wmd-spacer2 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 175px;
}
.wmd-button:hover {
background: none;
box-shadow: none;
}
.wmd-spacer3 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 300px;
}
.wmd-button > span {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('#{$static-path}/images/wmd-buttons-transparent.png');
background-position: 0 0;
background-repeat: no-repeat;
}
.wmd-prompt-background {
background-color: Black;
}
.wmd-spacer1 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 50px;
}
.wmd-prompt-dialog {
@extend .modal;
background: $forum-color-background;
}
.wmd-spacer2 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 175px;
}
.wmd-prompt-dialog {
padding: $baseline;
.wmd-spacer3 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 300px;
}
> div {
font-size: $forum-base-font-size;
font-family: arial, helvetica, sans-serif;
}
.wmd-input {
@include discussion-wmd-input;
box-sizing: border-box;
width: 100%;
background: $forum-color-background;
}
.wmd-prompt-background {
background-color: $black;
}
b {
font-size: $forum-large-font-size;
}
.wmd-prompt-dialog {
@extend .modal;
background: $forum-color-background;
padding: $baseline;
> form > input[type="text"] {
border-radius: $forum-border-radius;
color: #333;
}
> div {
font-size: $forum-base-font-size;
font-family: arial, helvetica, sans-serif;
}
> form > input[type="button"] {
border: 1px solid #888;
font-family: $sans-serif;
font-size: $forum-x-large-font-size;
}
b {
font-size: $forum-large-font-size;
}
> form > input[type="file"] {
margin-bottom: 18px;
}
> form > input[type="text"] {
border-radius: $forum-border-radius;
color: #333;
}
.wmd-button-row {
// this is being hidden now because the inline styles to position the icons are not being written
position: relative;
height: 25px;
> form > input[type="button"] {
border: 1px solid #888;
font-family: $sans-serif;
font-size: $forum-x-large-font-size;
}
.wmd-button {
span {
background-image: url("#{$static-path}/images/wmd-buttons.png");
display: inline-block;
}
> 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
position: relative;
height: 25px;
}
lms/static/sass/discussion/utilities/_shame.scss
......@@ -80,27 +80,11 @@ li[class*=forum-nav-thread-label-] {
}
}
// -------------
// new post form
// -------------
.forum-new-post-form,
.edit-post-form {
// Override global label rules
.post-type {
text-shadow: none;
}
.post-type {
margin-bottom: 0;
}
}
// -------
// Actions
// -------
.discussion.container, .discussion-module {
.discussion {
// Override courseware
.post-actions-list, .response-actions-list, .comment-actions-list {
......
lms/static/sass/discussion/utilities/_variables-v2.scss
......@@ -44,7 +44,6 @@ $forum-small-font-size: font-size(x-small);
// borders
$forum-border-radius: $component-border-radius;
// btn colors
$uxpl-primary-blue: palette(primary, base) !default;
$btn-default-background-color: $lms-container-background-color;
lms/static/sass/discussion/views/_create-edit-post.scss
......@@ -8,7 +8,6 @@
box-sizing: border-box;
margin: 0;
border-radius: $forum-border-radius;
padding: $baseline;
max-width: 1180px;
label,
......@@ -16,7 +15,16 @@
-webkit-font-smoothing: initial;
}
.post-type {
text-shadow: none;
}
.post-type {
margin-bottom: 0;
}
.post-errors {
margin: 0 0 $baseline;
padding: 0 !important;
list-style: none !important;
}
......@@ -77,6 +85,48 @@
}
}
.edit-post-form {
@include clearfix();
box-sizing: border-box;
width: 100%;
padding-top: 0;
h1 {
font-size: $forum-large-font-size;
}
.form-row {
margin-top: $baseline;
}
.post-cancel {
@include float(left);
@include margin($baseline/2, 0, 0, $baseline*0.75);
}
.post-update {
@include float(left);
margin-top: ($baseline/2);
&:hover, &:focus {
border-color: #222;
}
}
.edit-post-title {
box-sizing: border-box;
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
padding: 0 ($baseline/2);
width: 100%;
height: 40px;
box-shadow: 0 1px 3px $shadow-l1 inset;
color: $dark-gray;
font-size: $forum-large-font-size;
font-family: $sans-serif;
}
}
// CASE: inline styling
.discussion-module .forum-new-post-form {
background: $forum-color-background;
......@@ -155,25 +205,3 @@
}
}
}
// ====================
// UI: actions
.forum-new-post-form,
.edit-post-form {
.submit {
@include margin-right($baseline/2);
}
}
// ====================
// UI: errors - new post creation
.forum-new-post-form,
.edit-post-form {
.post-errors {
padding: 0;
margin: 0 0 $baseline 0;
list-style: none;
}
}
lms/static/sass/discussion/views/_home.scss
......@@ -2,7 +2,7 @@
// ====================
// home - layout
.container .view-discussion-home {
.view-discussion-home {
@include padding-left($baseline);
section {
......
lms/static/sass/discussion/views/_inline.scss
......@@ -31,19 +31,6 @@
}
}
.wmd-preview-container {
@include discussion-new-post-wmd-preview-container;
margin-bottom: $baseline;
}
.wmd-preview-label {
@include discussion-wmd-preview-label;
}
.wmd-preview {
@include discussion-wmd-preview;
}
.new-post-article {
position: relative;
border: 1px solid $forum-color-border;
......
lms/static/sass/discussion/views/_response.scss
......@@ -11,7 +11,7 @@
// * +comments styling
// +wrapper - response list
.container .discussion-body .responses {
.discussion .responses {
@extend %ui-no-list;
&:empty {
......@@ -60,7 +60,7 @@
}
// +element - add response area
.container .discussion-body .add-response {
.discussion .add-response {
display: inline;
padding: $baseline/2;
}
......@@ -78,7 +78,7 @@
// +response - labels and banners
// NOTE - these styles seem to no longer be in use. They have been isolated here, but should be ideally removed or fixed.
.container .discussion-body .responses .forum-response {
.discussion .responses .forum-response {
// CASE: label - staff response
&.staff {
......@@ -135,7 +135,7 @@
}
// +comments styling
.container .discussion-body .comments {
.discussion .comments {
@extend %ui-no-list;
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
background: $gray-l6;
......@@ -148,7 +148,7 @@
}
blockquote {
background: $gray-l4;
background: $forum-color-background-light;
border-radius: $forum-border-radius;
padding: ($baseline/4) ($baseline/2);
font-size: $forum-base-font-size;
......@@ -156,6 +156,7 @@
.comment-form {
@include clearfix();
padding: ($baseline/2) 0;
.comment-form-input {
padding: ($baseline/4) ($baseline/2);
......@@ -169,6 +170,7 @@
}
.wmd-input {
@include transition(all .2s linear 0s);
height: 40px;
}
......@@ -177,3 +179,32 @@
}
}
}
.response-count {
@include float(right);
color: $forum-color-response-count;
font-size: $forum-base-font-size;
}
.response-pagination {
visibility: visible;
padding: 0 ($baseline/2);
&:empty {
visibility: hidden;
}
.response-display-count {
display: block;
padding: ($baseline/2) 0;
color: $forum-color-response-count;
font-size: $forum-base-font-size;
}
.load-response-button {
@include text-align(left);
position: relative;
margin: ($baseline/2) 0;
width: 100%;
}
}
lms/static/sass/discussion/views/_thread.scss
......@@ -37,6 +37,14 @@
}
}
.thread-title {
display: block;
margin-bottom: $baseline;
font-size: $forum-x-large-font-size;
color: $gray-d3;
font-weight: 600;
}
.thread-responses-wrapper {
padding: 0 ($baseline/2);
}
......@@ -55,7 +63,7 @@
@include float(right);
@include right($baseline);
position: absolute;
top: $baseline;
top: ($baseline/2);
}
// response body
......
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