diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index ae72f8c1ad..cdb15d324e 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -2,6 +2,7 @@ @include box-sizing(border-box); float: left; position: relative; + width: 31%; border: 1px solid #aaa; border-radius: 3px; } @@ -95,11 +96,18 @@ } .forum-nav-browse-submenu { + padding-left: $baseline; list-style: none; } .forum-nav-browse-title { display: block; + border-bottom: 1px solid $gray-l3; + padding: ($baseline/2) ($baseline/2); + + &:hover, &:focus { + background: $forum-color-active-thread; + } } .forum-nav-browse-title .icon { @@ -147,10 +155,20 @@ .forum-nav-thread { border-bottom: 1px solid $gray-l3; + background-color: $gray-l5; + + &.is-unread { + background-color: $white; + } } .forum-nav-thread-link { display: block; + padding: ($baseline/4) ($baseline/2); + + &.is-active, &:hover, &:focus { + background-color: $forum-color-active-thread; + } } %forum-nav-thread-wrapper { @@ -178,8 +196,10 @@ @extend %t-weight4; @include font-size(9); display: inline; + margin-top: ($baseline/4); border: 1px solid; border-radius: 3px; + padding: 1px 6px; text-transform: uppercase; white-space: nowrap; @@ -281,14 +301,25 @@ } } +.forum-nav-load-more { + border-bottom: 1px solid $gray-l3; + background-color: $gray-l5; +} + %forum-nav-load-more-content { display: block; + padding: $baseline 0; text-align: center; } .forum-nav-load-more-link { @extend %forum-nav-load-more-content; color: $link-color; + + &:hover, &:focus { + color: $link-color; + background-color: $forum-color-active-thread; + } } .forum-nav-loading { diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss index d91ca1667e..347ae0d683 100644 --- a/lms/static/sass/discussion/utilities/_shame.scss +++ b/lms/static/sass/discussion/utilities/_shame.scss @@ -29,15 +29,6 @@ position: relative; } -// The sidebar class does a lot of things that we don't want in the thread list; -// the following rules contain styling that is necessary and would otherwise -// reside in elements/_navigation.scss if the sidebar styling did not make the -// !important directive necessary. - -.forum-nav { - width: 31% !important; -} - // ------------------------ // navigation - browse menu // ------------------------ @@ -65,27 +56,12 @@ // Override global ul rules .forum-nav-browse-menu, .forum-nav-browse-submenu { margin: 0; +} + +.forum-nav-browse-menu { padding-left: 0; } -// The sidebar class does a lot of things that we don't want in the thread list; -// the following rules contain styling that is necessary and would otherwise -// reside in elements/_navigation.scss if the sidebar styling did not make the -// !important directive necessary. - -.forum-nav-browse-title { - border-bottom: 1px solid $gray-l3 !important; - padding: ($baseline/2) ($baseline/2) !important; - - &:hover, &:focus { - background: $forum-color-active-thread !important; - } -} - -.forum-nav-browse-submenu { - padding-left: $baseline !important; -} - // -------------------------------- // navigation - sort and filter bar // -------------------------------- @@ -99,48 +75,6 @@ // navigation - thread list // -------------------------------- -// The sidebar class does a lot of things that we don't want in the thread list; -// the following rules contain styling that is necessary and would otherwise -// reside in elements/_navigation.scss if the sidebar styling did not make the -// !important directive necessary. - -.forum-nav-thread { - background-color: $gray-l5 !important; - - &.is-unread { - background-color: $white !important; - } -} - -.forum-nav-thread-link { - padding: ($baseline/4) ($baseline/2) !important; - - &.is-active, &:hover, &:focus { - background-color: $forum-color-active-thread !important; - } -} - -li[class*=forum-nav-thread-label-] { - margin-top: ($baseline/4) !important; - padding: 1px 6px !important; -} - -.forum-nav-load-more { - border-bottom: 1px solid $gray-l3 !important; - background-color: $gray-l5 !important; -} - -.forum-nav-load-more-link { - &:hover, &:focus { - color: $link-color !important; - background-color: $forum-color-active-thread !important; - } -} - -.forum-nav-load-more-link, .forum-nav-loading { - padding: $baseline 0 !important; -} - // The following rules would be unnecessary but for broadly scoped rules defined // elsewhere in our CSS.