diff --git a/cms/static/sass/_checklists.scss b/cms/static/sass/_checklists.scss index 66601fcf2a..ca5424967e 100644 --- a/cms/static/sass/_checklists.scss +++ b/cms/static/sass/_checklists.scss @@ -23,7 +23,9 @@ body.course.checklists { header { @include clearfix(); + @include box-shadow(inset 0 -1px 1px $shadow-l1); margin-bottom: 0; + border-bottom: 1px solid $gray-l3; padding: $baseline ($baseline*1.5); .checklist-title { @@ -32,6 +34,14 @@ body.course.checklists { margin: 0 flex-gutter() 0 0; float: left; + .icon-confirm { + @include font-size(20); + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + color: $gray-l4; + } + &.is-selectable { cursor: pointer; @@ -105,6 +115,10 @@ body.course.checklists { // state - collapsed &.is-collapsed { + header { + @include box-shadow(none); + } + .list-tasks { height: 0; } @@ -115,8 +129,8 @@ body.course.checklists { header { - .checklist-title { - color: $gray-l1; + .checklist-title, .icon-confirm { + color: $green; } .checklist-status { @@ -147,7 +161,8 @@ body.course.checklists { overflow: hidden; .task { - @include transition(background .15s ease-in-out .25s, border .15s ease-in-out .25s); + @include transition(background .15s ease-in-out .25s); + @include transition(border .15s ease-in-out .25s); @include clearfix(); position: relative; border-top: 1px solid $white; @@ -169,13 +184,13 @@ body.course.checklists { .task-input { display: inline-block; - vertical-align: middle; - margin-right: flex-gutter(); + vertical-align: text-top; + margin: ($baseline/2) flex-gutter() 0 0; } .task-details { display: inline-block; - vertical-align: middle; + vertical-align: text-top; width: flex-grid(6,7); .task-name { @@ -234,6 +249,7 @@ body.course.checklists { opacity: 1.0; .task-details { + .task-support { opacity: 1.0; pointer-events: auto; @@ -253,14 +269,17 @@ body.course.checklists { border-top-color: $gray-l5; border-bottom-color: $gray-l5; - .task-details { - opacity: 0.50; + .task-name { + color: $gray-l2; } &:hover { + background: $blue-l5; + border-bottom-color: $blue-l4; + border-top-color: $blue-l4; .task-details { - opacity: 1.0; + opacity:1.0; } } } diff --git a/cms/templates/ux-checklists.html b/cms/templates/ux-checklists.html index d0a5ab8fa4..3f7a947111 100644 --- a/cms/templates/ux-checklists.html +++ b/cms/templates/ux-checklists.html @@ -20,8 +20,8 @@
-

Getting Started with Studio

- Tasks Completed: 2/5 +

Getting Started with Studio

+ Tasks Completed: 0/4
-
  • +
  • @@ -64,14 +64,14 @@
    -

    Add Course Team Members

    -

    Grant your collaborators permission to edit your course so you can work together.

    +

    Draft Your Course's Grading Policy

    +

    Regardless of whether you have all your course assignments written, you can immediately get started setting up assignment types and a grade computation scheme.

    @@ -81,16 +81,146 @@
    -

    Add Course Team Members

    -

    Grant your collaborators permission to edit your course so you can work together.

    +

    Explore the other Studio Checklists

    +

    They'll help you learn the other course authoring tools available to you, and will also help you find help when you need it.

    +
    + + + - See Also: How manage your course team in edX101 + +
    + +
    +
    +

    Draft a Rough Course Outline

    + Tasks Completed: 0/7 +
    + +
    -
    +
    -

    Getting Started with Studio

    - Tasks Completed: 2/5 +

    Explore edX's Support Tools

    + Tasks Completed: 0/4
    - See Also: How manage your course team in edX101 + +
    + +
    +
    +

    Draft your Course Introduction

    + Tasks Completed: 0/4 +
    + +