diff --git a/common/static/common/templates/discussion/customwmd-prompt.underscore b/common/static/common/templates/discussion/customwmd-prompt.underscore index 9a13d32509..765919a736 100644 --- a/common/static/common/templates/discussion/customwmd-prompt.underscore +++ b/common/static/common/templates/discussion/customwmd-prompt.underscore @@ -44,8 +44,8 @@ %>
- - + +
diff --git a/lms/static/sass/course/discussion/_form-wmd-toolbar.scss b/lms/static/sass/course/discussion/_form-wmd-toolbar.scss deleted file mode 100644 index 5b777be6a6..0000000000 --- a/lms/static/sass/course/discussion/_form-wmd-toolbar.scss +++ /dev/null @@ -1,142 +0,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; - } - } -} diff --git a/lms/static/sass/course/discussion/_form.scss b/lms/static/sass/course/discussion/_form.scss deleted file mode 100644 index 7f50f6e4b6..0000000000 --- a/lms/static/sass/course/discussion/_form.scss +++ /dev/null @@ -1,203 +0,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; - } -} diff --git a/lms/static/sass/discussion/_build-discussion.scss b/lms/static/sass/discussion/_build-discussion.scss index abcc25c4f2..c631d529bb 100644 --- a/lms/static/sass/discussion/_build-discussion.scss +++ b/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"; diff --git a/lms/static/sass/discussion/_discussion-v1.scss b/lms/static/sass/discussion/_discussion-v1.scss index 956e777932..a95051ee01 100644 --- a/lms/static/sass/discussion/_discussion-v1.scss +++ b/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; + } +} diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 299b8aafd8..c74425761a 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -2,179 +2,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; @@ -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%; - } -} diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index 1d935226d7..281237278d 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -1,4 +1,4 @@ -.discussion.container, .discussion-module { +.discussion { // discussion - elements - actions // ==================== diff --git a/lms/static/sass/discussion/elements/_editor.scss b/lms/static/sass/discussion/elements/_editor.scss index 664e222004..e248054b29 100644 --- a/lms/static/sass/discussion/elements/_editor.scss +++ b/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-preview-label { + @include discussion-wmd-preview-label; +} + +.wmd-preview { + @include discussion-wmd-preview; +} + +.wmd-button { + background: none; +} + +.wmd-button-bar { + width: 100%; +} + +.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-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:hover { + background: none; + box-shadow: none; +} + +.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-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-input { + @include discussion-wmd-input; + box-sizing: border-box; + width: 100%; + background: $forum-color-background; +} + +.wmd-prompt-background { + background-color: $black; +} + +.wmd-prompt-dialog { + @extend .modal; + background: $forum-color-background; + padding: $baseline; + + > div { + font-size: $forum-base-font-size; + font-family: arial, helvetica, sans-serif; } - .wmd-button-bar { - width: 100%; + b { + font-size: $forum-large-font-size; } - .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; + > form > input[type="text"] { + border-radius: $forum-border-radius; + color: #333; } - .wmd-spacer { - @include margin-left(14px); - position: absolute; - display: inline-block; - width: 1px; - height: 20px; - background-color: Silver; - list-style: none; + > form > input[type="button"] { + border: 1px solid #888; + font-family: $sans-serif; + font-size: $forum-x-large-font-size; } - .wmd-button { - position: absolute; - display: inline-block; - width: 20px; - height: 20px; - border: none; - background: none; - list-style: none; - cursor: pointer; - padding: 0; - } - - .wmd-button:hover { - background: none; - box-shadow: none; - } - - .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-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: arial, helvetica, sans-serif; - } - - b { - font-size: $forum-large-font-size; - } - - > form > input[type="text"] { - border-radius: $forum-border-radius; - color: #333; - } - - > form > input[type="button"] { - border: 1px solid #888; - font-family: $sans-serif; - font-size: $forum-x-large-font-size; - } - - > 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; - } - - .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; +} diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index 253cef89b7..27526b6e8e 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/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 { diff --git a/lms/static/sass/discussion/utilities/_variables-v2.scss b/lms/static/sass/discussion/utilities/_variables-v2.scss index b33d1f211a..058e70ba44 100644 --- a/lms/static/sass/discussion/utilities/_variables-v2.scss +++ b/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; diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss index f1e0d044a5..8e8ea20cad 100644 --- a/lms/static/sass/discussion/views/_create-edit-post.scss +++ b/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; - } -} diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss index 80cfd37add..bbe42275e4 100644 --- a/lms/static/sass/discussion/views/_home.scss +++ b/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 { diff --git a/lms/static/sass/discussion/views/_inline.scss b/lms/static/sass/discussion/views/_inline.scss index f629b2cefa..b4c28d1e15 100644 --- a/lms/static/sass/discussion/views/_inline.scss +++ b/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; diff --git a/lms/static/sass/discussion/views/_response.scss b/lms/static/sass/discussion/views/_response.scss index bf9c7dd587..5ab87a3a2e 100644 --- a/lms/static/sass/discussion/views/_response.scss +++ b/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%; + } +} diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index c8843a7c03..61efb57bb6 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/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