diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index 21edc5b5ed..c4f298f58e 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -12,8 +12,8 @@ .bar-mod-title { @extend %t-title6; display: block; - background-color: $gray-l4; padding: ($baseline/2) ($baseline*.75); + background-color: $gray-l4; font-weight: 600; } @@ -267,12 +267,39 @@ // outline: utilities $outline-indent-width: $baseline; +// UI: general outline +.outline-content { + margin-top: 5px; + + .unit-content { + margin-top: 0; + } + + // add/new items + .add-item { + margin-top: ($baseline*0.75); + + .button-new { + @extend %ui-btn-flat-outline; + padding: ($baseline/2) $baseline; + display: block; + + .icon { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/2); + } + } + } +} + + // UI: section %outline-section { @include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s, padding-left $tmg-f2 linear 0s); border-left: 1px solid $color-draft; margin-bottom: $baseline; - padding: ($baseline*0.75) $baseline ($baseline*0.75) ($baseline + 4); + padding: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2); // STATE: is-collapsed &.is-collapsed { @@ -314,7 +341,7 @@ $outline-indent-width: $baseline; border-left: ($baseline/4) solid $color-draft; border-top-left-radius: 0; border-bottom-left-radius: 0; - padding: ($baseline*0.75); + padding: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2); // CASE: is ready to be live &.is-ready { diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index 18b137d6d1..f94353118c 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -240,6 +240,29 @@ .wrapper-unit-tree-location { // tree location-specific styles should go here + + .outline-section{ + box-shadow: none; + border: 0; + padding: 0; + } + + .outline-subsection { + border-left: 1px solid $gray-l4; + padding: ($baseline/2); + + .subsection-header { + margin-bottom: ($baseline/2); + } + } + + .item-title a { + color: $color-heading-base; + + &:hover { + color: $blue; + } + } } } } diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index a92893d0e0..9f20818d91 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -180,6 +180,10 @@ // -------------------- .outline { + .outline-content { + margin-top: 0; + } + // add/new items .add-item { margin-top: ($baseline*0.75); @@ -261,6 +265,7 @@ // outline: sections // -------------------- .outline-section { + padding: ($baseline*0.75) $baseline ($baseline*0.75) ($baseline + 4); // header .section-header { @@ -344,6 +349,7 @@ } .outline-subsection { + padding: ($baseline*0.75); // header .subsection-header { diff --git a/cms/templates/container.html b/cms/templates/container.html index d8a7f745c9..3cc167da39 100644 --- a/cms/templates/container.html +++ b/cms/templates/container.html @@ -136,14 +136,14 @@ templates = ["basic-modal", "modal-button", "edit-xblock-modal",