From 3b2c970248947758fc45882d9a7762f397aa8bdc Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 8 Mar 2013 11:47:11 -0500 Subject: [PATCH 01/17] studio - reorganized and documented used Sass for studio --- cms/static/sass/_account.scss | 294 --------- cms/static/sass/_alerts.scss | 162 ----- cms/static/sass/_assets.scss | 186 ------ cms/static/sass/_base.scss | 4 +- cms/static/sass/_calendar.scss | 367 ----------- cms/static/sass/_cms_mixins.scss | 3 + cms/static/sass/_content-types.scss | 69 --- cms/static/sass/_course-info.scss | 218 ------- cms/static/sass/_courseware.scss | 689 --------------------- cms/static/sass/_dashboard.scss | 114 ---- cms/static/sass/_export.scss | 123 ---- cms/static/sass/_extends.scss | 78 --- cms/static/sass/_fonts.scss | 36 -- cms/static/sass/_footer.scss | 48 -- cms/static/sass/_graphics.scss | 336 ---------- cms/static/sass/_header.scss | 562 ----------------- cms/static/sass/_import.scss | 102 ---- cms/static/sass/_index.scss | 353 ----------- cms/static/sass/_jquery-ui-calendar.scss | 53 -- cms/static/sass/_keyframes.scss | 27 - cms/static/sass/_landing.scss | 126 ---- cms/static/sass/_layout.scss | 125 ---- cms/static/sass/_lms.scss | 69 --- cms/static/sass/_login.scss | 139 ----- cms/static/sass/_modal.scss | 69 --- cms/static/sass/_module-header.scss | 128 ---- cms/static/sass/_problem.scss | 24 - cms/static/sass/_reset.scss | 3 + cms/static/sass/_section.scss | 239 -------- cms/static/sass/_settings.scss | 740 ----------------------- cms/static/sass/_static-pages.scss | 153 ----- cms/static/sass/_subsection.scss | 295 --------- cms/static/sass/_unit.scss | 667 -------------------- cms/static/sass/_users.scss | 78 --- cms/static/sass/_variables.scss | 3 + cms/static/sass/_video.scss | 33 - cms/static/sass/_week.scss | 256 -------- cms/static/sass/base-style.scss | 68 ++- common/static/sass/_mixins.scss | 89 ++- 39 files changed, 138 insertions(+), 6990 deletions(-) delete mode 100644 cms/static/sass/_account.scss delete mode 100644 cms/static/sass/_alerts.scss delete mode 100644 cms/static/sass/_assets.scss delete mode 100644 cms/static/sass/_calendar.scss delete mode 100644 cms/static/sass/_content-types.scss delete mode 100644 cms/static/sass/_course-info.scss delete mode 100644 cms/static/sass/_courseware.scss delete mode 100644 cms/static/sass/_dashboard.scss delete mode 100644 cms/static/sass/_export.scss delete mode 100644 cms/static/sass/_extends.scss delete mode 100644 cms/static/sass/_fonts.scss delete mode 100644 cms/static/sass/_footer.scss delete mode 100644 cms/static/sass/_graphics.scss delete mode 100644 cms/static/sass/_header.scss delete mode 100644 cms/static/sass/_import.scss delete mode 100644 cms/static/sass/_index.scss delete mode 100644 cms/static/sass/_jquery-ui-calendar.scss delete mode 100644 cms/static/sass/_keyframes.scss delete mode 100644 cms/static/sass/_landing.scss delete mode 100644 cms/static/sass/_layout.scss delete mode 100644 cms/static/sass/_lms.scss delete mode 100644 cms/static/sass/_login.scss delete mode 100644 cms/static/sass/_modal.scss delete mode 100644 cms/static/sass/_module-header.scss delete mode 100644 cms/static/sass/_problem.scss delete mode 100644 cms/static/sass/_section.scss delete mode 100644 cms/static/sass/_settings.scss delete mode 100644 cms/static/sass/_static-pages.scss delete mode 100644 cms/static/sass/_subsection.scss delete mode 100644 cms/static/sass/_unit.scss delete mode 100644 cms/static/sass/_users.scss delete mode 100644 cms/static/sass/_video.scss delete mode 100644 cms/static/sass/_week.scss diff --git a/cms/static/sass/_account.scss b/cms/static/sass/_account.scss deleted file mode 100644 index 650743979f..0000000000 --- a/cms/static/sass/_account.scss +++ /dev/null @@ -1,294 +0,0 @@ -// Studio - Sign In/Up -// ==================== -body.signup, body.signin { - - .wrapper-content { - margin: 0; - padding: 0 $baseline; - position: relative; - width: 100%; - } - - .content { - @include clearfix(); - @include font-size(16); - max-width: $fg-max-width; - min-width: $fg-min-width; - width: flex-grid(12); - margin: 0 auto; - color: $gray-d2; - - header { - position: relative; - margin-bottom: $baseline; - border-bottom: 1px solid $gray-l4; - padding-bottom: ($baseline/2); - - h1 { - @include font-size(32); - margin: 0; - padding: 0; - font-weight: 600; - } - - .action { - @include font-size(13); - position: absolute; - right: 0; - top: 40%; - } - } - - .introduction { - @include font-size(14); - margin: 0 0 $baseline 0; - } - } - - .content-primary, .content-supplementary { - @include box-sizing(border-box); - float: left; - } - - .content-primary { - width: flex-grid(8, 12); - margin-right: flex-gutter(); - - form { - @include box-sizing(border-box); - @include box-shadow(0 1px 2px $shadow-l1); - @include border-radius(2px); - width: 100%; - border: 1px solid $gray-l2; - padding: $baseline ($baseline*1.5); - background: $white; - - .form-actions { - margin-top: $baseline; - - .action-primary { - @include blue-button; - @include transition(all .15s); - @include font-size(15); - display:block; - width: 100%; - padding: ($baseline*0.75) ($baseline/2); - font-weight: 600; - text-transform: uppercase; - } - } - - .list-input { - margin: 0; - padding: 0; - list-style: none; - - .field { - margin: 0 0 ($baseline*0.75) 0; - - &:last-child { - margin-bottom: 0; - } - - &.required { - - label { - font-weight: 600; - } - - label:after { - margin-left: ($baseline/4); - content: "*"; - } - } - - label, input, textarea { - display: block; - } - - label { - @include font-size(14); - @include transition(color, 0.15s, ease-in-out); - margin: 0 0 ($baseline/4) 0; - - &.is-focused { - color: $blue; - } - } - - input, textarea { - @include font-size(16); - height: 100%; - width: 100%; - padding: ($baseline/2); - - &.long { - width: 100%; - } - - &.short { - width: 25%; - } - - ::-webkit-input-placeholder { - color: $gray-l4; - } - - :-moz-placeholder { - color: $gray-l3; - } - - ::-moz-placeholder { - color: $gray-l3; - } - - :-ms-input-placeholder { - color: $gray-l3; - } - - &:focus { - - + .tip { - color: $gray; - } - } - } - - textarea.long { - height: ($baseline*5); - } - - input[type="checkbox"] { - display: inline-block; - margin-right: ($baseline/4); - width: auto; - height: auto; - - & + label { - display: inline-block; - } - } - - .tip { - @include transition(color, 0.15s, ease-in-out); - @include font-size(13); - display: block; - margin-top: ($baseline/4); - color: $gray-l3; - } - } - - .field-group { - @include clearfix(); - margin: 0 0 ($baseline/2) 0; - - .field { - display: block; - width: 47%; - border-bottom: none; - margin: 0 $baseline 0 0; - padding-bottom: 0; - - &:nth-child(odd) { - float: left; - } - - &:nth-child(even) { - float: right; - margin-right: 0; - } - - input, textarea { - width: 100%; - } - } - } - } - } - } - - .content-supplementary { - width: flex-grid(4, 12); - - .bit { - @include font-size(13); - margin: 0 0 $baseline 0; - border-bottom: 1px solid $gray-l4; - padding: 0 0 $baseline 0; - color: $gray-l1; - - &:last-child { - margin-bottom: 0; - border: none; - padding-bottom: 0; - } - - h3 { - @include font-size(14); - margin: 0 0 ($baseline/4) 0; - color: $gray-d2; - font-weight: 600; - } - - } - } -} - -.signup { - -} - -.signin { - - #field-password { - position: relative; - - .action-forgotpassword { - @include font-size(13); - position: absolute; - top: 0; - right: 0; - } - } -} - -// ==================== - -// messages -.message { - @include font-size(14); - display: block; -} - -.message-status { - display: none; - @include border-top-radius(2px); - @include box-sizing(border-box); - border-bottom: 2px solid $yellow-d2; - margin: 0 0 $baseline 0; - padding: ($baseline/2) $baseline; - font-weight: 500; - background: $yellow-d1; - color: $white; - - .ss-icon { - position: relative; - top: 3px; - @include font-size(16); - display: inline-block; - margin-right: ($baseline/2); - } - - .text { - display: inline-block; - } - - &.error { - border-color: shade($red, 50%); - background: tint($red, 20%); - } - - &.is-shown { - display: block; - } -} diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss deleted file mode 100644 index bd7f687f67..0000000000 --- a/cms/static/sass/_alerts.scss +++ /dev/null @@ -1,162 +0,0 @@ -// notifications -.wrapper-notification { - @include clearfix(); - @include box-sizing(border-box); - @include transition (bottom 2.0s ease-in-out 5s); - @include box-shadow(0 -1px 2px rgba(0,0,0,0.1)); - position: fixed; - bottom: -100px; - z-index: 1000; - width: 100%; - overflow: hidden; - opacity: 0; - border-top: 1px solid $darkGrey; - padding: 20px 40px; - - &.is-shown { - bottom: 0; - opacity: 1.0; - } - - &.wrapper-notification-warning { - border-color: shade($yellow, 25%); - background: tint($yellow, 25%); - } - - &.wrapper-notification-error { - border-color: shade($red, 50%); - background: tint($red, 20%); - color: $white; - } - - &.wrapper-notification-confirm { - border-color: shade($green, 30%); - background: tint($green, 40%); - color: shade($green, 30%); - } -} - -.notification { - @include box-sizing(border-box); - margin: 0 auto; - width: flex-grid(12); - max-width: $fg-max-width; - min-width: $fg-min-width; - - .copy { - float: left; - width: flex-grid(9, 12); - margin-right: flex-gutter(); - margin-top: 5px; - font-size: 14px; - - .icon { - display: inline-block; - vertical-align: top; - margin-right: 5px; - font-size: 20px; - } - - p { - width: flex-grid(8, 9); - display: inline-block; - vertical-align: top; - } - } - - .actions { - float: right; - width: flex-grid(3, 12); - margin-top: ($baseline/2); - text-align: right; - - li { - display: inline-block; - vertical-align: middle; - margin-right: 10px; - - &:last-child { - margin-right: 0; - } - } - - .save-button { - @include blue-button; - } - - .cancel-button { - @include white-button; - } - } - - strong { - font-weight: 700; - } -} - -// adopted alerts -.alert { - padding: 15px 20px; - margin-bottom: 30px; - border-radius: 3px; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - // background: #edbd3c; - font-size: 14px; - @include clearfix; - - .alert-message { - float: left; - margin-top: 4px; - } - - strong { - font-weight: 700; - } - - .alert-action { - float: right; - - &.secondary { - @include orange-button; - } - } -} - -body.error { - background: $darkGrey; - color: #3c3c3c; - - .primary-header { - display: none; - } - - .error-prompt { - width: 700px; - margin: 150px auto; - padding: 60px 50px 90px; - border-radius: 3px; - background: #fff; - text-align: center; - } - - h1 { - float: none; - margin: 0; - font-size: 60px; - font-weight: 300; - color: #3c3c3c; - } - - .description { - margin-bottom: 50px; - font-size: 21px; - } - - .back-button { - @include blue-button; - padding: 14px 40px 18px; - font-size: 18px; - } -} \ No newline at end of file diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/_assets.scss deleted file mode 100644 index d9b215faec..0000000000 --- a/cms/static/sass/_assets.scss +++ /dev/null @@ -1,186 +0,0 @@ -.uploads { - input.asset-search-input { - float: left; - width: 260px; - background-color: #fff; - } - - .asset-library { - @include clearfix; - - table { - width: 100%; - border-radius: 3px 3px 0 0; - border: 1px solid #c5cad4; - - td, - th { - padding: 10px 20px; - text-align: left; - vertical-align: middle; - } - - thead th { - @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); - background-color: #ced2db; - font-size: 12px; - font-weight: 700; - text-shadow: 0 1px 0 rgba(255, 255, 255, .5); - } - - tbody { - background: #fff; - - tr { - border-top: 1px solid #c5cad4; - - &:first-child { - border-top: none; - } - } - - .name-col { - font-size: 14px; - } - - .date-col { - font-size: 12px; - } - } - - .thumb-col { - width: 100px; - } - - .date-col { - width: 220px; - } - - .embed-col { - width: 250px; - } - - .embeddable-xml-input { - @include box-shadow(none); - width: 100%; - } - - .thumb { - width: 100px; - max-height: 80px; - - img { - width: 100%; - } - } - } - - .pagination { - float: right; - margin: 15px 10px; - - ol, li { - display: inline; - } - - a { - display: inline-block; - height: 25px; - padding: 0 4px; - text-align: center; - line-height: 25px; - } - } - } - .show-xml { - @include blue-button; - } -} - -.upload-modal { - display: none; - width: 640px !important; - margin-left: -320px !important; - - .modal-body { - height: auto !important; - overflow-y: auto !important; - text-align: center; - } - - .file-input { - display: none; - } - - .choose-file-button { - @include blue-button; - padding: 10px 82px 12px; - font-size: 17px; - } - - .progress-bar { - display: none; - width: 350px; - height: 50px; - margin: 30px auto 10px; - border: 1px solid $blue; - - &.loaded { - border-color: #66b93d; - - .progress-fill { - background: #66b93d; - } - } - } - - .progress-fill { - width: 0%; - height: 50px; - background: $blue; - color: #fff; - line-height: 48px; - } - - h1 { - float: none; - margin: 40px 0 30px; - font-size: 34px; - font-weight: 300; - } - - .close-button { - @include white-button; - position: absolute; - top: 0; - right: 15px; - width: 29px; - height: 29px; - padding: 0 !important; - border-radius: 17px !important; - line-height: 29px; - text-align: center; - } - - .embeddable { - display: none; - margin: 30px 0 130px; - - label { - display: block; - margin-bottom: 10px; - font-weight: 700; - } - } - - .embeddable-xml-input { - @include box-shadow(none); - width: 400px; - } - - .copy-button { - @include white-button; - display: none; - margin-bottom: 100px; - } -} \ No newline at end of file diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 5d4bc7c773..1bf9119654 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -1,4 +1,4 @@ -// studio base styling +// studio - base styling // ==================== // basic reset @@ -9,7 +9,7 @@ html { body { @include font-size(16); - min-width: 980px; + min-width: $fg-min-width; background: $gray-l5; line-height: 1.6; color: $baseFontColor; diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss deleted file mode 100644 index 4c007bb561..0000000000 --- a/cms/static/sass/_calendar.scss +++ /dev/null @@ -1,367 +0,0 @@ -section.cal { - @include box-sizing(border-box); - @include clearfix; - padding: 20px; - - > header { - display: none; - @include clearfix; - margin-bottom: 10px; - opacity: .4; - @include transition; - text-shadow: 0 1px 0 #fff; - - &:hover { - opacity: 1; - } - - h2 { - @include inline-block(); - text-transform: uppercase; - letter-spacing: 1px; - font-size: 14px; - padding: 6px 6px 6px 0; - font-size: 12px; - margin: 0; - } - - ul { - @include inline-block; - float: right; - margin: 0; - padding: 0; - - &.actions { - float: left; - } - - li { - @include inline-block; - margin-right: 6px; - border-right: 1px solid #ddd; - padding: 0 6px 0 0; - - &:last-child { - border-right: 0; - margin-right: 0; - padding-right: 0; - } - - a { - @include inline-block(); - font-size: 12px; - @include inline-block; - margin: 0 6px; - font-style: italic; - } - - ul { - @include inline-block(); - margin: 0; - - li { - @include inline-block(); - padding: 0; - border-left: 0; - } - } - } - } - } - - ol { - list-style: none; - @include clearfix; - border: 1px solid lighten( $dark-blue , 30% ); - background: #FFF; - width: 100%; - @include box-sizing(border-box); - margin: 0; - padding: 0; - @include box-shadow(0 0 5px lighten($dark-blue, 45%)); - @include border-radius(3px); - overflow: hidden; - - > li { - border-right: 1px solid lighten($dark-blue, 40%); - border-bottom: 1px solid lighten($dark-blue, 40%); - @include box-sizing(border-box); - float: left; - width: flex-grid(3) + ((flex-gutter() * 3) / 4); - background-color: $light-blue; - @include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%)); - - &:hover { - li.create-module { - opacity: 1; - } - } - - &:nth-child(4n) { - border-right: 0; - } - - header { - border-bottom: 1px solid lighten($dark-blue, 40%); - @include box-shadow(0 2px 2px $light-blue); - display: block; - margin-bottom: 2px; - background: #FFF; - - h1 { - font-size: 14px; - text-transform: uppercase; - border-bottom: 1px solid lighten($dark-blue, 60%); - padding: 6px; - color: $bright-blue; - margin: 0; - - a { - color: $bright-blue; - display: block; - padding: 6px; - margin: -6px; - - &:hover { - color: darken($bright-blue, 10%); - background: lighten($yellow, 10%); - } - } - } - - ul { - margin: 0; - padding: 0; - - li { - background: #fff; - color: #888; - border-bottom: 0; - font-size: 12px; - @include box-shadow(none); - } - } - } - - ul { - list-style: none; - margin: 0 0 1px 0; - padding: 0; - - li { - border-bottom: 1px solid darken($light-blue, 6%); - // @include box-shadow(0 1px 0 lighten($light-blue, 4%)); - overflow: hidden; - position: relative; - text-shadow: 0 1px 0 #fff; - - &:hover { - background-color: lighten($yellow, 14%); - - a.draggable { - background-color: lighten($yellow, 14%); - opacity: 1; - } - } - - &.editable { - padding: 3px 6px; - } - - a { - color: lighten($dark-blue, 10%); - display: block; - padding: 6px 35px 6px 6px; - - &:hover { - background-color: lighten($yellow, 10%); - } - - &.draggable { - background-color: $light-blue; - opacity: .3; - padding: 0; - - &:hover { - background-color: lighten($yellow, 10%); - } - } - } - - &.create-module { - position: relative; - opacity: 0; - @include transition(all 3s ease-in-out); - background: darken($light-blue, 2%); - - > div { - background: $dark-blue; - @include box-shadow(0 0 5px darken($light-blue, 60%)); - @include box-sizing(border-box); - display: none; - margin-left: 3%; - padding: 10px; - @include position(absolute, 30px 0 0 0); - width: 90%; - z-index: 99; - - ul { - li { - border-bottom: 0; - background: none; - - input { - @include box-sizing(border-box); - width: 100%; - } - - select { - @include box-sizing(border-box); - width: 100%; - - option { - font-size: 14px; - } - } - - div { - margin-top: 10px; - } - - a { - color: $light-blue; - float: right; - - &:first-child { - float: left; - } - - &:hover { - color: #fff; - } - } - } - } - } - } - } - } - } - } - - section.new-section { - margin: 10px 0 40px; - @include inline-block(); - position: relative; - - > a { - @extend .button; - display: block; - } - - section { - display: none; - @include position(absolute, 30px 0 0 0); - background: rgba(#000, .8); - min-width: 300px; - padding: 10px; - @include box-sizing(border-box); - @include border-radius(3px); - z-index: 99; - - &:before { - content: " "; - display: block; - background: rgba(#000, .8); - width: 10px; - height: 10px; - @include position(absolute, -5px 0 0 20%); - @include transform(rotate(45deg)); - } - - form { - - ul { - list-style: none; - - li { - border-bottom: 0; - background: none; - margin-bottom: 6px; - - input { - width: 100%; - @include box-sizing(border-box); - border-color: #000; - padding: 6px; - } - - select { - width: 100%; - @include box-sizing(border-box); - - option { - font-size: 14px; - } - } - - a { - float: right; - - &:first-child { - float: left; - } - } - } - } - } - } - } -} - -body.content -section.cal { - width: flex-grid(3); - float: left; - overflow: scroll; - @include box-sizing(border-box); - opacity: .4; - @include transition(); - - &:hover { - opacity: 1; - } - - > header { - @include transition; - overflow: hidden; - - > a { - display: none; - } - - ul { - float: none; - display: block; - - li { - - ul { - display: inline; - } - } - } - } - - ol { - li { - @include box-sizing(border-box); - width: 100%; - border-right: 0; - - &.create-module { - display: none; - } - } - } -} diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss index b8d9a8ae2e..015a94b762 100644 --- a/cms/static/sass/_cms_mixins.scss +++ b/cms/static/sass/_cms_mixins.scss @@ -1,3 +1,6 @@ +// studio - utilities - mixins and extends +// ==================== + @mixin clearfix { &:after { content: ''; diff --git a/cms/static/sass/_content-types.scss b/cms/static/sass/_content-types.scss deleted file mode 100644 index 7cca469350..0000000000 --- a/cms/static/sass/_content-types.scss +++ /dev/null @@ -1,69 +0,0 @@ -.content-type { - display: inline-block; - width: 14px; - height: 16px; - padding-left: 14px; - background-position: 8px center; - background-repeat: no-repeat; - vertical-align: middle; -} - -.videosequence-icon { - @extend .content-type; - background-image: url('../img/content-types/videosequence.png'); -} - -.video-icon { - @extend .content-type; - background-image: url('../img/content-types/video.png'); -} - -.problemset-icon { - @extend .content-type; - background-image: url('../img/content-types/problemset.png'); -} - -.problem-icon { - @extend .content-type; - background-image: url('../img/content-types/problem.png'); -} - -.lab-icon { - @extend .content-type; - background-image: url('../img/content-types/lab.png'); -} - -.tab-icon { - @extend .content-type; - background-image: url('../img/content-types/lab.png'); -} - -.html-icon { - @extend .content-type; - background-image: url('../img/content-types/html.png'); -} - -.vertical-icon { - @extend .content-type; - background-image: url('../img/content-types/vertical.png'); -} - -.sequential-icon { - @extend .content-type; - background-image: url('../img/content-types/sequential.png'); -} - -.chapter-icon { - @extend .content-type; - background-image: url('../img/content-types/chapter.png'); -} - -.module-icon { - @extend .content-type; - background-image: url('../img/content-types/module.png'); -} - -.module-icon { - @extend .content-type; - background-image: url('../img/content-types/module.png'); -} diff --git a/cms/static/sass/_course-info.scss b/cms/static/sass/_course-info.scss deleted file mode 100644 index 5a2a5a9432..0000000000 --- a/cms/static/sass/_course-info.scss +++ /dev/null @@ -1,218 +0,0 @@ -.course-info { - h2 { - margin-bottom: 24px; - font-size: 22px; - font-weight: 300; - } - - .course-info-wrapper { - display: table; - width: 100%; - clear: both; - } - - .main-column, - .course-handouts { - float: none; - display: table-cell; - } - - .main-column { - border-radius: 3px 0 0 3px; - border-right-color: $mediumGrey; - } - - .CodeMirror { - border: 1px solid #3c3c3c; - background: #fff; - color: #3c3c3c; - } -} - -.course-updates { - padding: 30px 40px; - margin: 0; - - .update-list > li { - padding: 34px 0 42px; - border-top: 1px solid #cbd1db; - - &:first-child { - padding-top: 0; - border: none; - } - - &.editing { - position: relative; - z-index: 1001; - padding: 0; - border-top: none; - border-radius: 3px; - background: #fff; - - .post-preview { - display: none; - } - } - - h1 { - float: none; - font-size: 24px; - font-weight: 300; - } - - h2 { - margin-bottom: 18px; - font-size: 14px; - font-weight: 700; - line-height: 30px; - color: #646464; - letter-spacing: 1px; - text-transform: uppercase; - } - - h3 { - margin: 34px 0 11px; - font-size: 16px; - font-weight: 700; - } - } - - .update-contents { - p { - font-size: 16px; - line-height: 25px; - } - - p + p { - margin-top: 25px; - } - - .primary { - border: 1px solid #ddd; - background: #f6f6f6; - padding: 20px; - } - - ol, ul { - margin: 1em 0; - padding: 0 0 0 1em; - color: $baseFontColor; - - li { - margin-bottom: 0.708em; - } - } - - ol { - list-style: decimal outside none; - } - - ul { - list-style: disc outside none; - } - - pre { - margin: 1em 0; - color: $baseFontColor; - font-family: monospace, serif; - font-size: 1em; - white-space: pre-wrap; - word-wrap: break-word; - } - - code { - color: $baseFontColor; - font-family: monospace, serif; - background: none; - padding: 0; - } - } - - .new-update-button { - @include blue-button; - display: block; - text-align: center; - padding: 18px 0; - margin-bottom: 28px; - } - - .new-update-form { - @include edit-box; - margin-bottom: 24px; - padding: 30px; - border: none; - - textarea { - height: 180px; - } - } - - .post-actions { - float: right; - - .edit-button, - .delete-button{ - float: left; - @include white-button; - padding: 3px 10px 4px; - margin-left: 7px; - font-size: 12px; - font-weight: 400; - - .edit-icon, - .delete-icon { - margin-right: 4px; - } - } - } -} - -.course-handouts { - width: 30%; - padding: 20px 30px; - margin: 0; - border-radius: 0 3px 3px 0; - border-left: none; - background: $lightGrey; - - h2 { - font-size: 18px; - font-weight: 700; - } - - .edit-button { - float: right; - @include white-button; - padding: 3px 10px 4px; - margin-left: 7px; - font-size: 12px; - font-weight: 400; - - .edit-icon, - .delete-icon { - margin-right: 4px; - } - } - - .handouts-content { - font-size: 14px; - } - - .treeview-handoutsnav li { - margin-bottom: 12px; - } -} - -.edit-handouts-form { - @include edit-box; - position: absolute; - right: 0; - z-index: 10001; - width: 800px; - padding: 30px; - - textarea { - height: 300px; - } -} \ No newline at end of file diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss deleted file mode 100644 index 45ea111b6f..0000000000 --- a/cms/static/sass/_courseware.scss +++ /dev/null @@ -1,689 +0,0 @@ - -input.courseware-unit-search-input { - float: left; - width: 260px; - background-color: #fff; -} - -.branch { - - .section-item { - @include clearfix(); - - .details { - display: block; - float: left; - margin-bottom: 0; - width: 650px; - } - - .gradable-status { - float: right; - position: relative; - top: -4px; - right: 50px; - width: 145px; - - .status-label { - position: absolute; - top: 2px; - right: -5px; - display: none; - width: 110px; - padding: 5px 40px 5px 10px; - @include border-radius(3px); - color: $lightGrey; - text-align: right; - font-size: 12px; - font-weight: bold; - line-height: 16px; - } - - .menu-toggle { - z-index: 10; - position: absolute; - top: 0; - right: 5px; - padding: 5px; - color: $mediumGrey; - - &:hover, &.is-active { - color: $blue; - } - } - - .menu { - z-index: 1; - display: none; - opacity: 0.0; - position: absolute; - top: -1px; - left: 5px; - margin: 0; - padding: 8px 12px; - background: $white; - border: 1px solid $mediumGrey; - font-size: 12px; - @include border-radius(4px); - @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); - @include transition(opacity .15s); - - - li { - width: 115px; - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; - - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; - - a { - color: $darkGrey; - } - } - } - - a { - color: $blue; - - &.is-selected { - font-weight: bold; - } - } - } - - // dropdown state - &.is-active { - - .menu { - z-index: 1000; - display: block; - opacity: 1.0; - } - - .menu-toggle { - z-index: 10000; - } - } - - // set state - &.is-set { - - .menu-toggle { - color: $blue; - } - - .status-label { - display: block; - color: $blue; - } - } - } - } - } - - -.courseware-section { - position: relative; - background: #fff; - border-radius: 3px; - border: 1px solid $mediumGrey; - margin-top: 15px; - padding-bottom: 12px; - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); - - &:first-child { - margin-top: 0; - } - - &.collapsed { - padding-bottom: 0; - } - - label { - float: left; - line-height: 29px; - } - - .datepair { - float: left; - margin-left: 10px; - } - - .section-published-date { - position: absolute; - top: 19px; - right: 90px; - padding: 4px 10px; - border-radius: 3px; - background: $lightGrey; - text-align: right; - - .published-status { - font-size: 12px; - margin-right: 15px; - - strong { - font-weight: bold; - } - } - - .schedule-button { - @include blue-button; - } - - .edit-button { - @include blue-button; - } - - .schedule-button, - .edit-button { - font-size: 11px; - padding: 3px 15px 5px; - } - } - - .datepair .date, - .datepair .time { - padding-left: 0; - padding-right: 0; - border: none; - background: none; - @include box-shadow(none); - font-size: 13px; - font-weight: bold; - color: $blue; - cursor: pointer; - } - - .datepair .date { - width: 80px; - } - - .datepair .time { - width: 65px; - } - - &.collapsed .subsection-list, - .collapsed .subsection-list, - .collapsed > ol { - display: none !important; - } - - header { - min-height: 75px; - @include clearfix(); - - .item-details, .section-published-date { - - } - - .item-details { - display: inline-block; - padding: 20px 0 10px 0; - @include clearfix(); - - .section-name { - float: left; - margin-right: 10px; - width: 350px; - font-size: 19px; - font-weight: bold; - color: $blue; - } - - .section-name-span { - cursor: pointer; - @include transition(color .15s); - - &:hover { - color: $orange; - } - } - - .section-name-edit { - position: relative; - width: 400px; - background: $white; - - input { - font-size: 16px; - } - - .save-button { - @include blue-button; - padding: 7px 20px 7px; - margin-right: 5px; - } - - .cancel-button { - @include white-button; - padding: 7px 20px 7px; - } - } - - .section-published-date { - float: right; - width: 265px; - margin-right: 220px; - @include border-radius(3px); - background: $lightGrey; - - .published-status { - font-size: 12px; - margin-right: 15px; - - strong { - font-weight: bold; - } - } - - .schedule-button { - @include blue-button; - } - - .edit-button { - @include blue-button; - } - - .schedule-button, - .edit-button { - font-size: 11px; - padding: 3px 15px 5px; - - } - } - - .gradable-status { - position: absolute; - top: 20px; - right: 70px; - width: 145px; - - .status-label { - position: absolute; - top: 0; - right: 2px; - display: none; - width: 100px; - padding: 10px 35px 10px 10px; - @include border-radius(3px); - background: $lightGrey; - color: $lightGrey; - text-align: right; - font-size: 12px; - font-weight: bold; - line-height: 16px; - } - - .menu-toggle { - z-index: 10; - position: absolute; - top: 2px; - right: 5px; - padding: 5px; - color: $lightGrey; - - &:hover, &.is-active { - color: $blue; - } - } - - .menu { - z-index: 1; - display: none; - opacity: 0.0; - position: absolute; - top: -1px; - left: 2px; - margin: 0; - padding: 8px 12px; - background: $white; - border: 1px solid $mediumGrey; - font-size: 12px; - @include border-radius(4px); - @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); - @include transition(opacity .15s); - @include transition(display .15s); - - - li { - width: 115px; - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; - - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; - - a { - color: $darkGrey; - } - } - } - - a { - - &.is-selected { - font-weight: bold; - } - } - } - - // dropdown state - &.is-active { - - .menu { - z-index: 1000; - display: block; - opacity: 1.0; - } - - - .menu-toggle { - z-index: 10000; - } - } - - // set state - &.is-set { - - .menu-toggle { - color: $blue; - } - - .status-label { - display: block; - color: $blue; - } - } - - float: left; - padding: 21px 0 0; - } - } - - .item-actions { - margin-top: 21px; - margin-right: 12px; - - .edit-button, - .delete-button { - margin-top: -3px; - } - } - - .expand-collapse-icon { - float: left; - margin: 29px 6px 16px 16px; - @include transition(none); - - &.expand { - background-position: 0 0; - } - - &.collapsed { - - } - } - - .drag-handle { - margin-left: 11px; - } - } - - h3 { - font-size: 19px; - font-weight: 700; - color: $blue; - } - - .section-name-span { - cursor: pointer; - @include transition(color .15s); - - &:hover { - color: $orange; - } - } - - .section-name-form { - margin-bottom: 15px; - } - - .section-name-edit { - input { - font-size: 16px; - } - - .save-button { - @include blue-button; - padding: 7px 20px 7px; - margin-right: 5px; - } - - .cancel-button { - @include white-button; - padding: 7px 20px 7px; - } - } - - h4 { - font-size: 12px; - color: #878e9d; - - strong { - font-weight: bold; - } - } - - .list-header { - @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); - background-color: #ced2db; - border-radius: 3px 3px 0 0; - } - - .subsection-list { - margin: 0 12px; - - > ol { - @include tree-view; - border-top-width: 0; - } - } - - &.new-section { - - header { - height: auto; - @include clearfix(); - } - - .expand-collapse-icon { - visibility: hidden; - } - - .item-details { - padding: 25px 0 0 0; - - .section-name { - float: none; - width: 100%; - } - } - } -} - -.toggle-button-sections { - display: none; - position: relative; - float: right; - margin-top: 10px; - - font-size: 13px; - color: $darkGrey; - - &.is-shown { - display: block; - } - - .ss-icon { - @include border-radius(20px); - position: relative; - top: -1px; - display: inline-block; - margin-right: 2px; - line-height: 5px; - font-size: 11px; - } - - .label { - display: inline-block; - } -} - -.new-section-name, -.new-subsection-name-input { - width: 515px; -} - -.new-section-name-save, -.new-subsection-name-save { - @include blue-button; - padding: 4px 20px 7px; - margin: 0 5px; - color: #fff !important; -} - -.new-section-name-cancel, -.new-subsection-name-cancel { - @include white-button; - padding: 4px 20px 7px; - color: #8891a1 !important; -} - -.dummy-calendar { - display: none; - position: absolute; - top: 55px; - left: 110px; - z-index: 9999; - border: 1px solid #3C3C3C; - @include box-shadow(0 1px 15px rgba(0, 0, 0, .2)); -} - -.unit-name-input { - padding: 20px 40px; - - label { - display: block; - } - - input { - width: 100%; - font-size: 20px; - } -} - -.preview { - background: url(../img/preview.jpg) center top no-repeat; -} - -.edit-subsection-publish-settings { - display: none; - position: fixed; - top: 100px; - left: 50%; - z-index: 99999; - width: 600px; - margin-left: -300px; - background: #fff; - text-align: center; - - .settings { - padding: 40px; - } - - h3 { - font-size: 34px; - font-weight: 300; - } - - .picker { - margin: 30px 0 65px; - } - - .description { - margin-top: 30px; - font-size: 14px; - line-height: 20px; - } - - strong { - font-weight: 700; - } - - .start-date, - .start-time { - font-size: 19px; - } - - .save-button { - @include blue-button; - margin-right: 10px; - } - - .cancel-button { - @include white-button; - } - - .save-button, - .cancel-button { - font-size: 16px; - } -} - -.collapse-all-button { - float: right; - margin-top: 10px; - font-size: 13px; - color: $darkGrey; -} - -// sort/drag and drop -.ui-droppable { - @include transition (padding 0.5s ease-in-out 0s); - min-height: 20px; - padding: 0; - - &.dropover { - padding: 15px 0; - } -} - -.ui-draggable-dragging { - @include box-shadow(0 1px 2px rgba(0, 0, 0, .3)); - border: 1px solid $darkGrey; - opacity : 0.2; - &:hover { - opacity : 1.0; - .section-item { - background: $yellow !important; - } - } - - // hiding unit button - temporary fix until this semantically corrected - .new-unit-item { - display: none; - } -} - -ol.ui-droppable .branch:first-child .section-item { - border-top: none; -} - diff --git a/cms/static/sass/_dashboard.scss b/cms/static/sass/_dashboard.scss deleted file mode 100644 index 0d4d046e57..0000000000 --- a/cms/static/sass/_dashboard.scss +++ /dev/null @@ -1,114 +0,0 @@ -.class-list { - margin-top: 20px; - border-radius: 3px; - border: 1px solid $darkGrey; - background: #fff; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); - - li { - position: relative; - border-bottom: 1px solid $mediumGrey; - - &:last-child { - border-bottom: none; - } - - .class-link { - z-index: 100; - display: block; - padding: 20px 25px; - line-height: 1.3; - - &:hover { - background: $paleYellow; - - + .view-live-button { - opacity: 1.0; - pointer-events: auto; - } - } - } - } - - .class-name { - display: block; - font-size: 19px; - font-weight: 300; - } - - .detail { - font-size: 14px; - font-weight: 400; - margin-right: 20px; - color: #3c3c3c; - } - - // view live button - .view-live-button { - z-index: 10000; - position: absolute; - top: 15px; - right: $baseline; - padding: ($baseline/4) ($baseline/2); - opacity: 0; - pointer-events: none; - - &:hover { - opacity: 1.0; - pointer-events: auto; - } - } -} - -.new-course { - padding: 15px 25px; - margin-top: 20px; - border-radius: 3px; - border: 1px solid $darkGrey; - background: #fff; - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); - @include clearfix; - - .row { - margin-bottom: 15px; - @include clearfix; - } - - .column { - float: left; - width: 48%; - } - - .column:first-child { - margin-right: 4%; - } - - .course-info { - width: 600px; - } - - label { - display: block; - font-size: 13px; - font-weight: 700; - } - - .new-course-org, - .new-course-number, - .new-course-name { - width: 100%; - } - - .new-course-name { - font-size: 19px; - font-weight: 300; - } - - .new-course-save { - @include blue-button; - } - - .new-course-cancel { - @include white-button; - } -} \ No newline at end of file diff --git a/cms/static/sass/_export.scss b/cms/static/sass/_export.scss deleted file mode 100644 index e1ab7eb605..0000000000 --- a/cms/static/sass/_export.scss +++ /dev/null @@ -1,123 +0,0 @@ -.export { - .export-overview { - @extend .window; - @include clearfix; - padding: 30px 40px; - } - - .description { - float: left; - width: 62%; - margin-right: 3%; - font-size: 14px; - - h2 { - font-weight: 700; - font-size: 19px; - margin-bottom: 20px; - } - - strong { - font-weight: 700; - } - - p + p { - margin-top: 20px; - } - - ul { - margin: 20px 0; - list-style: disc inside; - - li { - margin: 0 0 5px 0; - } - } - } - - .export-form-wrapper { - - .export-form { - float: left; - width: 35%; - padding: 25px 30px 35px; - @include box-sizing(border-box); - border: 1px solid $mediumGrey; - border-radius: 3px; - background: $lightGrey; - text-align: center; - - h2 { - margin-bottom: 30px; - font-size: 26px; - font-weight: 300; - } - - .error-block { - display: none; - margin-bottom: 15px; - font-size: 13px; - } - - .error-block { - color: $error-red; - } - - .button-export { - @include green-button; - padding: 10px 50px 11px; - font-size: 17px; - } - - .message-status { - margin-top: 10px; - font-size: 12px; - } - - .progress-bar { - display: none; - width: 350px; - height: 30px; - margin: 30px auto 10px; - border: 1px solid $blue; - - &.loaded { - border-color: #66b93d; - - .progress-fill { - background: #66b93d; - } - } - } - - .progress-fill { - width: 0%; - height: 30px; - background: $blue; - color: #fff; - line-height: 48px; - } - } - - // downloading state - &.is-downloading { - - .progress-bar { - display: block; - } - - .button-export { - padding: 10px 50px 11px; - font-size: 17px; - - &.disabled { - - pointer-events: none; - cursor: default; - } - } - } - } - - -} \ No newline at end of file diff --git a/cms/static/sass/_extends.scss b/cms/static/sass/_extends.scss deleted file mode 100644 index 5907481bd1..0000000000 --- a/cms/static/sass/_extends.scss +++ /dev/null @@ -1,78 +0,0 @@ -.faded-hr-divider { - @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, - rgba(200,200,200, 1) 50%, - rgba(200,200,200, 0))); - height: 1px; - width: 100%; -} - -.faded-hr-divider-medium { - @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%, - rgba(240,240,240, 1) 50%, - rgba(240,240,240, 0))); - height: 1px; - width: 100%; -} - -.faded-hr-divider-light { - @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, - rgba(255,255,255, 0.8) 50%, - rgba(255,255,255, 0))); - height: 1px; - width: 100%; -} - -.faded-vertical-divider { - @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%, - rgba(200,200,200, 1) 50%, - rgba(200,200,200, 0))); - height: 100%; - width: 1px; -} - -.faded-vertical-divider-light { - @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, - rgba(255,255,255, 0.6) 50%, - rgba(255,255,255, 0))); - height: 100%; - width: 1px; -} - -.vertical-divider { - @extend .faded-vertical-divider; - position: relative; - - &::after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - position: absolute; - left: 1px; - } -} - -.horizontal-divider { - border: none; - @extend .faded-hr-divider; - position: relative; - - &::after { - @extend .faded-hr-divider-light; - content: ""; - display: block; - position: absolute; - top: 1px; - } -} - -.fade-right-hr-divider { - @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, - rgba(200,200,200, 1))); - border: none; -} - -.fade-left-hr-divider { - @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%, - rgba(200,200,200, 0))); - border: none; -} \ No newline at end of file diff --git a/cms/static/sass/_fonts.scss b/cms/static/sass/_fonts.scss deleted file mode 100644 index 92a2e185b7..0000000000 --- a/cms/static/sass/_fonts.scss +++ /dev/null @@ -1,36 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 700; - src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 300; - src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 700; - src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 300; - src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 400; - src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff'); -} -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); -} diff --git a/cms/static/sass/_footer.scss b/cms/static/sass/_footer.scss deleted file mode 100644 index 66a9ce0e95..0000000000 --- a/cms/static/sass/_footer.scss +++ /dev/null @@ -1,48 +0,0 @@ -//studio global footer -.wrapper-footer { - margin: ($baseline*1.5) 0 $baseline 0; - padding: $baseline; - position: relative; - width: 100%; - - footer.primary { - @include clearfix(); - @include font-size(13); - max-width: $fg-max-width; - min-width: $fg-min-width; - width: flex-grid(12); - margin: 0 auto; - padding-top: $baseline; - border-top: 1px solid $gray-l4; - color: $gray-l2; - - .colophon { - width: flex-grid(4, 12); - float: left; - margin-right: flex-gutter(2); - } - - .nav-peripheral { - width: flex-grid(6, 12); - float: right; - text-align: right; - - .nav-item { - display: inline-block; - margin-right: ($baseline/2); - - &:last-child { - margin-right: 0; - } - } - } - - a { - color: $gray-l1; - - &:hover, &:active { - color: $blue; - } - } - } -} \ No newline at end of file diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss deleted file mode 100644 index 300cf3b692..0000000000 --- a/cms/static/sass/_graphics.scss +++ /dev/null @@ -1,336 +0,0 @@ -.expand-collapse-icon { - position: relative; - display: inline-block; - width: 9px; - height: 11px; - margin-right: 10px; - background: url(../img/expand-collapse-icons.png) no-repeat; - @include transition(none); - - &.expand { - top: 1px; - background-position: 0 0; - } - - &.collapse { - top: -1px; - background-position: 0 -11px; - } -} - -.sequence-icon { - display: inline-block; - width: 15px; - height: 9px; - margin-right: 5px; - background: url(../img/sequence-icon.png) no-repeat; -} - -.video-icon { - display: inline-block; - width: 14px; - height: 12px; - margin-right: 5px; - background: url(../img/video-icon.png) no-repeat; -} - -.upload-icon { - display: inline-block; - width: 22px; - height: 13px; - margin-right: 5px; - background: url(../img/upload-icon.png) no-repeat; -} - -.list-icon { - display: inline-block; - width: 14px; - height: 10px; - margin-right: 5px; - background: url(../img/list-icon.png) no-repeat; -} - -.close-icon { - display: inline-block; - width: 13px; - height: 12px; - background: url(../img/close-icon.png) no-repeat; -} - -.home-icon { - display: inline-block; - width: 19px; - height: 16px; - background: url(../img/home-icon.png) no-repeat; -} - -.small-home-icon { - display: inline-block; - width: 16px; - height: 14px; - background: url(../img/small-home-icon.png) no-repeat; -} - -.log-out-icon { - display: inline-block; - width: 15px; - height: 13px; - background: url(../img/log-out-icon.png) no-repeat; -} - -.collapse-all-icon { - display: inline-block; - width: 15px; - height: 9px; - background: url(../img/collapse-all-icon.png) no-repeat; -} - -.calendar-icon { - display: inline-block; - width: 12px; - height: 11px; - margin-right: 5px; - background: url(../img/calendar-icon.png) no-repeat; -} - -.edit-icon { - display: inline-block; - width: 12px; - height: 12px; - margin-right: 2px; - background: url(../img/edit-icon.png) no-repeat; - - &.white { - background: url(../img/edit-icon-white.png) no-repeat; - } -} - -.visibility-toggle { - .toggle-icon { - display: inline-block; - width: 27px; - height: 20px; - background: url(../img/small-toggle-icons.png) no-repeat; - background-position: 0 -34px; - } - - &.hidden .toggle-icon { - background-position: 0 -4px; - } - - &.both .toggle-icon { - background-position: 0 -64px; - } -} - - -.delete-icon { - display: inline-block; - width: 10px; - height: 11px; - margin-right: 2px; - background: url(../img/delete-icon.png) no-repeat; - - &.white { - background: url(../img/delete-icon-white.png) no-repeat; - } -} - -.drag-handle { - display: inline-block; - float: right; - width: 7px; - height: 22px; - margin-left: 10px; - background: url(../img/drag-handles.png) no-repeat; - cursor: move; -} - -.draft-tag, -.public-tag, -.private-tag { - margin-left: 3px; - font-size: 9px; - font-weight: 600; - text-transform: uppercase; - color: #a4aab7; -} - -.draft-tag { - color: #9f7d10; -} - -.plus-icon { - display: inline-block; - width: 11px; - height: 11px; - margin-right: 8px; - background: url(../img/plus-icon.png) no-repeat; - - &.white { - background: url(../img/plus-icon-white.png) no-repeat; - } -} - -.plus-icon-small { - display: inline-block; - width: 6px; - height: 6px; - margin-right: 8px; - background: url(../img/plus-icon-small.png) no-repeat center; -} - -.folder-icon { - display: inline-block; - width: 15px; - height: 11px; - margin-right: 4px; - background: url(../img/folder-icon.png) no-repeat; -} - -.new-folder-icon { - display: inline-block; - width: 23px; - height: 11px; - margin-right: 8px; - background: url(../img/new-folder-icon.png) no-repeat; -} - -.file-icon { - display: inline-block; - width: 10px; - height: 11px; - margin-right: 8px; - background: url(../img/file-icon.png) no-repeat; -} - -.new-unit-icon { - display: inline-block; - width: 23px; - height: 12px; - margin-right: 8px; - background: url(../img/new-unit-icon.png) right no-repeat; -} - -.new-policy-icon { - display: inline-block; - width: 23px; - height: 12px; - margin-right: 8px; - background: url(../img/new-unit-icon.png) right no-repeat; -} - -.textbook-icon { - display: inline-block; - width: 32px; - height: 32px; - margin-right: 8px; - vertical-align: middle; - background: url(../img/textbook-icon.png) no-repeat; -} - -.slides-icon { - display: inline-block; - width: 32px; - height: 32px; - margin-right: 8px; - vertical-align: middle; - background: url(../img/slides-icon.png) no-repeat; -} - -.large-slide-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-slide-icon.png) center no-repeat; -} - -.large-html-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/html-icon.png) center no-repeat; -} - -.large-openended-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-openended-icon.png) center no-repeat; -} - -.large-annotations-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-annotations-icon.png) center no-repeat; -} - -.large-advanced-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-advanced-icon.png) center no-repeat; -} - -.large-textbook-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-textbook-icon.png) center no-repeat; -} - -.large-discussion-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-discussion-icon.png) center no-repeat; -} - -.large-freeform-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-freeform-icon.png) center no-repeat; -} - -.large-problem-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-problem-icon.png) center no-repeat; -} - -.large-video-icon { - display: inline-block; - width: 100px; - height: 60px; - margin-right: 5px; - background: url(../img/large-video-icon.png) center no-repeat; -} - -.spinner-icon { - display: inline-block; - width: 20px; - height: 20px; - margin-left: 10px; - vertical-align: middle; - background: url(../img/blue-spinner.gif) no-repeat; -} - -.spinner-in-field-icon { - display: inline-block; - width: 14px; - height: 14px; - vertical-align: middle; - background: url(../img/spinner-in-field.gif) no-repeat; -} diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss deleted file mode 100644 index ca1092f44b..0000000000 --- a/cms/static/sass/_header.scss +++ /dev/null @@ -1,562 +0,0 @@ -// studio global header and navigation -// ==================== - -.wrapper-header { - margin: 0 0 ($baseline*1.5) 0; - padding: $baseline; - border-bottom: 1px solid $gray; - @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); - background: $white; - height: 76px; - position: relative; - width: 100%; - z-index: 10; - - a { - color: $baseFontColor; - display: block; - - &:hover, &:active { - color: $blue; - } - } - - header.primary { - @include clearfix(); - max-width: $fg-max-width; - min-width: $fg-min-width; - width: flex-grid(12); - margin: 0 auto; - color: $gray-l1; - } - - nav .nav-item { - display: inline-block; - } -} - -// ==================== - -// basic layout -.wrapper-left, .wrapper-right { - @include box-sizing(border-box); -} - -.wrapper-left { - width: flex-grid(10, 12); - float: left; - margin-right: flex-gutter(); -} - -.wrapper-right { - width: flex-grid(2, 12); - float: right; -} - -// ==================== - -// specific elements - branding -.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch { - display: inline-block; - vertical-align: top; -} - -.branding { - position: relative; - margin: 0 ($baseline/2) 0 0; - padding-right: ($baseline*0.75); - - a { - @include text-hide(); - display: block; - width: 164px; - height: 32px; - background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat; - } -} - -// ==================== - -// specific elements - course name/info -.info-course { - @include font-size(14); - position: relative; - margin: -3px ($baseline/2) 0 0; - padding-right: ($baseline*0.75); - - &:before { - @extend .faded-vertical-divider; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 1px; - top: -8px; - width: 1px; - } - - &:after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 0px; - top: -12px; - width: 1px; - } - - .course-org { - margin-right: ($baseline/4); - } - - .course-number, .course-org { - @include font-size(12); - display: inline-block; - } - - .course-title { - display: block; - width: 100%; - max-width: 220px; - overflow: hidden; - margin-top: -4px; - white-space: nowrap; - text-overflow: ellipsis; - @include font-size(16); - font-weight: 600; - } -} - -// ==================== - -// specific elements - course nav -.nav-course { - width: 335px; - margin-top: -($baseline/4); - @include font-size(14); - - > ol > .nav-item { - vertical-align: bottom; - margin: 0 ($baseline/2) 0 0; - - &:last-child { - margin-right: 0; - } - - .title { - display: block; - padding: 5px; - text-transform: uppercase; - font-weight: 600; - color: $gray-d3; - - .label-prefix { - display: block; - @include font-size(11); - font-weight: 400; - } - } - - // specific nav items - &.nav-course-courseware { - } - - &.nav-course-settings { - } - - &.nav-course-tools { - } - } -} - -// ==================== - -// specific elements - account-based nav -.nav-account { - width: 100%; - margin-top: ($baseline*0.75); - @include font-size(14); - text-align: right; - - .nav-account-username { - width: 100%; - - .icon-user { - display: inline-block; - vertical-align: middle; - margin-right: 3px; - @include font-size(12); - } - - .account-username { - display: inline-block; - vertical-align: middle; - width: 80%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .icon-expand { - display: inline-block; - vertical-align: middle; - } - } -} - -// ==================== - -// UI - dropdown -.nav-dropdown { - - .nav-item { - position: relative; - - .icon-expand { - @include font-size(14); - @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out); - display: inline-block; - margin-left: 2px; - opacity: 0.5; - color: $gray-l2; - } - - &:hover { - - .icon-expand { - color: $blue; - opacity: 1.0; - } - } - } - - .wrapper-nav-sub { - position: absolute; - left: -7px; - top: 47px; - width: 140px; - opacity: 0; - pointer-events: none; - } - - .nav-sub { - @include border-radius(2px); - @include box-sizing(border-box); - @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); - position: relative; - width: 100%; - border: 1px solid $gray-l2; - padding: ($baseline/4) ($baseline/2); - background: $white; - - &:after, &:before { - bottom: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - &:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #fff; - border-width: 5px; - right: 3px; - margin-left: -5px; - } - - &:before { - border-color: rgba(178, 178, 178, 0); - border-bottom-color: $gray-l2; - border-width: 6px; - right: 3px; - margin-left: -6px; - } - - .nav-item { - display: block; - margin: 0 0 ($baseline/4) 0; - border-bottom: 1px solid $gray-l5; - padding: 0 0($baseline/4) 0; - @include font-size(13); - - &:last-child { - margin-bottom: 0; - border-bottom: none; - padding-bottom: 0; - } - - a { - display: block; - } - } - } - - // UI - dropdown - specific navs - &.nav-account { - - .wrapper-nav-sub { - top: 27px; - left: auto; - right: -13px; - width: 110px; - } - - .nav-sub { - text-align: left; - - .icon-expand { - top: -2px; - } - } - - .nav-sub:after { - left: auto; - right: 11px; - } - - .nav-sub:before { - left: auto; - right: 10px; - } - } - - &.nav-course { - - .nav-course-courseware { - - .nav-sub:after { - left: 88px; - } - - .nav-sub:before { - left: 88px; - } - } - - .nav-course-settings { - - .nav-sub:after { - left: 88px; - } - - .nav-sub:before { - left: 88px; - } - } - - .nav-course-tools { - - .wrapper-nav-sub { - top: ($baseline*1.5); - width: 100px; - } - - .nav-sub:after { - left: 68px; - } - - .nav-sub:before { - left: 68px; - } - } - } -} - -// ==================== - -// STATE: is-signed in -.is-signedin { - - &.course .branding { - - &:before { - @extend .faded-vertical-divider; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 1px; - top: -8px; - width: 1px; - } - - &:after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - height: 50px; - position: absolute; - right: 0px; - top: -12px; - width: 1px; - } - } -} - -// ==================== - -// STATE: not signed in -.not-signedin { - - .wrapper-left { - width: flex-grid(4, 12); - } - - .wrapper-right { - width: flex-grid(8, 12); - } - - // STATE: not signed in - unauthenticated nav - .nav-not-signedin { - float: right; - margin-top: ($baseline/4); - - .nav-item { - @include font-size(16); - vertical-align: middle; - margin: 0 $baseline 0 0; - - &:last-child { - margin-right: 0; - } - - .action { - margin-top: -($baseline/4); - display: inline-block; - padding: ($baseline/4) ($baseline/2); - } - } - - // STATE: not signed in - specific items - .nav-not-signedin-help { - - } - - .nav-not-signedin-signup { - margin-right: ($baseline/2); - - .action-signup { - @include blue-button; - @include transition(all .15s); - @include font-size(14); - padding: ($baseline/4) ($baseline/2); - text-transform: uppercase; - font-weight: 600; - } - } - - .nav-not-signedin-signin { - - .action-signin { - @include white-button; - @include transition(all .15s); - @include font-size(14); - padding: ($baseline/4) ($baseline/2); - text-transform: uppercase; - font-weight: 600; - } - } - } -} - -// ==================== - -// STATE: active/current nav states - -.nav-item.is-current, -body.howitworks .nav-not-signedin-hiw, - -// dashboard -body.dashboard .nav-account-dashboard, - -// course content -body.course.outline .nav-course-courseware .title, -body.course.updates .nav-course-courseware .title, -body.course.pages .nav-course-courseware .title, -body.course.uploads .nav-course-courseware .title, - -body.course.outline .nav-course-courseware-outline, -body.course.updates .nav-course-courseware-updates, -body.course.pages .nav-course-courseware-pages, -body.course.uploads .nav-course-courseware-uploads, - -// course settings -body.course.schedule .nav-course-settings .title, -body.course.grading .nav-course-settings .title, -body.course.team .nav-course-settings .title, -body.course.advanced .nav-course-settings .title, - -body.course.schedule .nav-course-settings-schedule, -body.course.grading .nav-course-settings-grading, -body.course.team .nav-course-settings-team, -body.course.advanced .nav-course-settings-advanced, - -// course tools -body.course.import .nav-course-tools .title, -body.course.export .nav-course-tools .title, - -body.course.import .nav-course-tools-import, -body.course.export .nav-course-tools-export, - -{ - - color: $blue; - - a { - color: $blue; - pointer-events: none; - } -} - -body.signup .nav-not-signedin-signin { - - a { - background-color: #d9e3ee; - color: #6d788b; - } -} - -body.signin .nav-not-signedin-signup { - - a { - background-color: #62aaf5; - color: #fff; - } -} - -// ==================== - -// STATE: js enabled -.js { - - .nav-dropdown { - - .nav-item .title { - outline: 0; - cursor: pointer; - - &:hover, &:active, &.is-selected { - color: $blue; - - .icon-expand { - color: $blue; - } - } - } - } - - .wrapper-nav-sub { - @include transition (opacity 1.0s ease-in-out 0s); - opacity: 0; - pointer-events: none; - - &.is-shown { - opacity: 1.0; - pointer-events: auto; - } - } -} \ No newline at end of file diff --git a/cms/static/sass/_import.scss b/cms/static/sass/_import.scss deleted file mode 100644 index a0a1f5e512..0000000000 --- a/cms/static/sass/_import.scss +++ /dev/null @@ -1,102 +0,0 @@ -.import { - .import-overview { - @extend .window; - @include clearfix; - padding: 30px 40px; - } - - .description { - float: left; - width: 62%; - margin-right: 3%; - font-size: 14px; - - h2 { - font-weight: 700; - font-size: 19px; - margin-bottom: 20px; - } - - strong { - font-weight: 700; - } - - p + p { - margin-top: 20px; - } - } - - .import-form { - float: left; - width: 35%; - padding: 25px 30px 35px; - @include box-sizing(border-box); - border: 1px solid $mediumGrey; - border-radius: 3px; - background: $lightGrey; - text-align: center; - - h2 { - margin-bottom: 30px; - font-size: 26px; - font-weight: 300; - } - - .file-name-block, - .error-block { - display: none; - margin-bottom: 15px; - font-size: 13px; - } - - .error-block { - color: $error-red; - } - - .choose-file-button { - @include blue-button; - padding: 10px 50px 11px; - font-size: 17px; - } - - .choose-file-button-inline { - display: block; - } - - .file-input { - display: none; - } - - .submit-button { - @include orange-button; - display: none; - max-width: 100%; - padding: 8px 20px 10px; - white-space: normal; - } - } - - .progress-bar { - display: none; - width: 350px; - height: 30px; - margin: 30px auto 10px; - border: 1px solid $blue; - - &.loaded { - border-color: #66b93d; - - .progress-fill { - background: #66b93d; - } - } - } - - .progress-fill { - width: 0%; - height: 30px; - background: $blue; - color: #fff; - line-height: 48px; - } -} \ No newline at end of file diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss deleted file mode 100644 index e0f6d0f2b7..0000000000 --- a/cms/static/sass/_index.scss +++ /dev/null @@ -1,353 +0,0 @@ -// how it works/not signed in index -.index { - - &.not-signedin { - - .wrapper-header { - margin-bottom: 0; - } - - .wrapper-footer { - margin: 0; - border-top: 2px solid $gray-l3; - - footer.primary { - border: none; - margin-top: 0; - padding-top: 0; - } - } - - .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta { - @include box-sizing(border-box); - margin: 0; - padding: 0 $baseline; - position: relative; - width: 100%; - } - - .content { - @include clearfix(); - @include font-size(16); - max-width: $fg-max-width; - min-width: $fg-min-width; - width: flex-grid(12); - margin: 0 auto; - color: $gray-d2; - - header { - border: none; - padding-bottom: 0; - margin-bottom: 0; - } - - h1, h2, h3, h4, h5, h6 { - color: $gray-d3; - } - - h2 { - - } - - h3 { - - } - - h4 { - - } - } - - // welcome content - .wrapper-content-header { - @include linear-gradient($blue-l1,$blue,$blue-d1); - padding-bottom: ($baseline*4); - padding-top: ($baseline*4); - } - - .content-header { - position: relative; - text-align: center; - color: $white; - - h1 { - @include font-size(52); - float: none; - margin: 0 0 ($baseline/2) 0; - border-bottom: 1px solid $blue-l1; - padding: 0; - font-weight: 500; - color: $white; - } - - .logo { - @include text-hide(); - position: relative; - top: 3px; - display: inline-block; - vertical-align: baseline; - width: 282px; - height: 57px; - background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat; - } - - .tagline { - @include font-size(24); - margin: 0; - color: $blue-l3; - } - } - - .arrow_box { - position: relative; - background: #fff; - border: 4px solid #000; - } - .arrow_box:after, .arrow_box:before { - top: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - .arrow_box:after { - border-color: rgba(255, 255, 255, 0); - border-top-color: #fff; - border-width: 30px; - left: 50%; - margin-left: -30px; - } - .arrow_box:before { - border-color: rgba(0, 0, 0, 0); - border-top-color: #000; - border-width: 36px; - left: 50%; - margin-left: -36px; - } - - // feature content - .wrapper-content-features { - @include box-shadow(0 -1px ($baseline/4) $shadow); - padding-bottom: ($baseline*2); - padding-top: ($baseline*3); - background: $white; - } - - .content-features { - - .list-features { - - } - - // indiv features - .feature { - @include clearfix(); - margin: 0 0 ($baseline*2) 0; - border-bottom: 1px solid $gray-l4; - padding: 0 0 ($baseline*2) 0; - - .img { - @include box-sizing(border-box); - float: left; - width: flex-grid(3, 12); - margin-right: flex-gutter(); - - a { - @include box-sizing(border-box); - @include box-shadow(0 1px ($baseline/10) $shadow-l1); - position: relative; - top: 0; - display: block; - overflow: hidden; - border: 1px solid $gray-l3; - padding: ($baseline/4); - background: $white; - - .action-zoom { - @include transition(bottom .50s ease-in-out); - position: absolute; - bottom: -30px; - right: ($baseline/2); - opacity: 0; - - .ss-icon { - @include font-size(18); - @include border-top-radius(3px); - display: inline-block; - padding: ($baseline/4) ($baseline/2); - background: $blue; - color: $white; - text-align: center; - } - } - - &:hover { - border-color: $blue; - - .action-zoom { - opacity: 1.0; - bottom: -2px; - } - } - } - - img { - display: block; - width: 100%; - height: 100%; - } - } - - .copy { - float: left; - width: flex-grid(9, 12); - margin-top: -($baseline/4); - - h3 { - margin: 0 0 ($baseline/2) 0; - @include font-size(24); - font-weight: 600; - } - - > p { - @include font-size(18); - color: $gray-d1; - } - - strong { - color: $gray-d2; - font-weight: 500; - } - - .list-proofpoints { - @include clearfix(); - @include font-size(14); - width: flex-grid(9, 9); - margin: ($baseline*1.5) 0 0 0; - - .proofpoint { - @include box-sizing(border-box); - @include border-radius(($baseline/4)); - @include transition(color .50s ease-in-out); - position: relative; - top: 0; - float: left; - width: flex-grid(3, 9); - min-height: ($baseline*8); - margin-right: flex-gutter(); - padding: ($baseline*0.75) $baseline; - color: $gray-l1; - - .title { - @include font-size(16); - margin: 0 0 ($baseline/4) 0; - font-weight: 500; - color: $gray-d3; - } - - &:hover { - @include box-shadow(0 1px ($baseline/10) $shadow-l1); - background: $blue-l5; - top: -($baseline/5); - - .title { - color: $blue; - } - } - - &:last-child { - margin-right: 0; - } - } - } - } - - - &:last-child { - margin-bottom: 0; - border: none; - padding-bottom: 0; - } - - &:nth-child(even) { - - .img { - float: right; - margin-right: 0; - margin-left: flex-gutter(); - } - - .copy { - float: right; - text-align: right; - } - - .list-proofpoints { - - .proofpoint { - float: right; - width: flex-grid(3, 9); - margin-left: flex-gutter(); - margin-right: 0; - - &:last-child { - margin-left: 0; - } - } - } - } - } - } - - // call to action content - .wrapper-content-cta { - padding-bottom: ($baseline*2); - padding-top: ($baseline*2); - background: $white; - } - - .content-cta { - border-top: 1px solid $gray-l4; - - header { - border: none; - margin: 0; - padding: 0; - } - - .list-actions { - position: relative; - margin-top: -($baseline*1.5); - - li { - width: flex-grid(6, 12); - margin: 0 auto; - } - - .action { - display: block; - width: 100%; - text-align: center; - } - - .action-primary { - @include blue-button; - @include transition(all .15s); - @include font-size(18); - padding: ($baseline*0.75) ($baseline/2); - font-weight: 600; - text-align: center; - text-transform: uppercase; - } - - .action-secondary { - @include font-size(14); - margin-top: ($baseline/2); - } - } - } - } -} \ No newline at end of file diff --git a/cms/static/sass/_jquery-ui-calendar.scss b/cms/static/sass/_jquery-ui-calendar.scss deleted file mode 100644 index 96cffc059f..0000000000 --- a/cms/static/sass/_jquery-ui-calendar.scss +++ /dev/null @@ -1,53 +0,0 @@ -.ui-datepicker { - border-color: $darkGrey; - border-radius: 2px; - background: #fff; - font-family: $sans-serif; - font-size: 12px; - @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1)); - - .ui-widget-header { - background: $darkGrey; - border: none; - border-radius: 2px; - } - - .ui-datepicker-next, - .ui-datepicker-prev { - @include transition(none); - - &.ui-state-hover { - border-color: transparent; - background: $mediumGrey; - - .ui-icon-circle-triangle-e, - .ui-icon-circle-triangle-w { - background-image: url(../css/vendor/ui-lightness/images/ui-icons_ffffff_256x240.png); - } - } - } - - .ui-state-default { - border-color: $mediumGrey; - color: $blue; - @include transition(none); - - &.ui-state-hover { - background: $orange; - border-color: $orange; - color: #fff; - } - } - - .ui-state-highlight { - background: $blue; - border-color: $blue; - color: #fff; - } - - .ui-state-active { - background: $orange; - border-color: $orange; - color: #fff; - } -} \ No newline at end of file diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss deleted file mode 100644 index 7661f18980..0000000000 --- a/cms/static/sass/_keyframes.scss +++ /dev/null @@ -1,27 +0,0 @@ -@mixin bounce-in { - 0% { - opacity: 0; - @include transform(scale(.3)); - } - - 50% { - opacity: 1; - @include transform(scale(1.05)); - } - - 100% { - @include transform(scale(1)); - } -} - -@-moz-keyframes bounce-in { @include bounce-in(); } -@-webkit-keyframes bounce-in { @include bounce-in(); } -@-o-keyframes bounce-in { @include bounce-in(); } -@keyframes bounce-in { @include bounce-in();} - -@mixin bounce-in-animation($duration, $timing: ease-in-out) { - @include animation-name(bounce-in); - @include animation-duration($duration); - @include animation-timing-function($timing); - @include animation-fill-mode(both); -} diff --git a/cms/static/sass/_landing.scss b/cms/static/sass/_landing.scss deleted file mode 100644 index 16f1b5b5a7..0000000000 --- a/cms/static/sass/_landing.scss +++ /dev/null @@ -1,126 +0,0 @@ -// This is a temporary page, which will be replaced once we have a more extensive course catalog and marketing site for edX labs. - -.class-landing { - - .main-wrapper { - width: 700px !important; - margin: 100px auto; - } - - .class-info { - padding: 30px 40px 40px; - @extend .window; - - hgroup { - padding-bottom: 26px; - border-bottom: 1px solid $mediumGrey; - } - - h1 { - float: none; - font-size: 30px; - font-weight: 300; - margin: 0; - } - - h2 { - color: #5d6779; - } - - .class-actions { - @include clearfix; - padding: 15px 0; - margin-bottom: 18px; - border-bottom: 1px solid $mediumGrey; - } - - .log-in-form { - @include clearfix; - padding: 15px 0 20px; - margin-bottom: 18px; - border-bottom: 1px solid $mediumGrey; - - .log-in-submit-button { - @include blue-button; - padding: 6px 20px 8px; - margin: 24px 0 0; - } - - .column { - float: left; - width: 41%; - margin-right: 1%; - - &.submit { - width: 16%; - margin-right: 0; - } - - label { - float: left; - } - } - - input { - width: 100%; - font-family: $sans-serif; - font-size: 13px; - } - - .forgot-button { - float: right; - margin-bottom: 6px; - font-size: 12px; - } - } - - .sign-up-button { - @include blue-button; - display: block; - width: 250px; - margin: auto; - } - - .log-in-button { - @include white-button; - float: right; - } - - .sign-up-button, - .log-in-button { - padding: 8px 0 12px; - font-size: 18px; - font-weight: 300; - text-align: center; - } - - .class-description { - margin-top: 30px; - font-size: 14px; - } - - p + p { - margin-top: 22px; - } - } - - .edx-labs-logo-small { - display: block; - width: 124px; - height: 30px; - margin: auto; - background: url(../img/edx-labs-logo-small.png) no-repeat; - text-indent: -9999px; - overflow: hidden; - } - - .edge-logo { - display: block; - width: 143px; - height: 39px; - margin: auto; - background: url(../images/edge-logo-small.png) no-repeat; - text-indent: -9999px; - overflow: hidden; - } -} \ No newline at end of file diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss deleted file mode 100644 index 43308a973c..0000000000 --- a/cms/static/sass/_layout.scss +++ /dev/null @@ -1,125 +0,0 @@ -body { - @include clearfix(); - height: 100%; - font: 14px $body-font-family; - background-color: lighten($dark-blue, 62%); - background-image: url('/static/img/noise.png'); - - > section { - display: table; - table-layout: fixed; - width: 100%; - } - - > header { - background: $dark-blue; - @include background-image(url('/static/img/noise.png'), linear-gradient(lighten($dark-blue, 10%), $dark-blue)); - border-bottom: 1px solid darken($dark-blue, 15%); - @include box-shadow(inset 0 -1px 0 lighten($dark-blue, 10%)); - @include box-sizing(border-box); - color: #fff; - display: block; - float: none; - padding: 0 20px; - text-shadow: 0 -1px 0 darken($dark-blue, 15%); - width: 100%; - - nav { - @include clearfix; - - > a { - @include hide-text; - background: url('/static/img/menu.png') 0 center no-repeat; - border-right: 1px solid darken($dark-blue, 10%); - @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); - display: block; - float: left; - height: 19px; - padding: 8px 10px 8px 0; - width: 14px; - - &:hover, &:focus { - opacity: .7; - } - } - - h2 { - border-right: 1px solid darken($dark-blue, 10%); - @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); - float: left; - font-size: 14px; - margin: 0; - text-transform: uppercase; - -webkit-font-smoothing: antialiased; - - a { - color: #fff; - padding: 8px 20px; - display: block; - - &:hover { - background-color: rgba(darken($dark-blue, 15%), .5); - color: $yellow; - } - } - } - - a { - color: rgba(#fff, .8); - - &:hover { - color: rgba(#fff, .6); - } - } - - ul { - float: left; - margin: 0; - padding: 0; - @include clearfix; - - &.user-nav { - float: right; - border-left: 1px solid darken($dark-blue, 10%); - } - - li { - border-right: 1px solid darken($dark-blue, 10%); - float: left; - @include box-shadow(1px 0 0 lighten($dark-blue, 10%)); - - a { - padding: 8px 20px; - display: block; - - &:hover { - background-color: rgba(darken($dark-blue, 15%), .5); - color: $yellow; - } - - &.new-module { - &:before { - @include inline-block; - content: "+"; - font-weight: bold; - margin-right: 10px; - } - } - } - } - } - } - } - - &.content { - section.main-content { - border-left: 2px solid $dark-blue; - @include box-sizing(border-box); - width: flex-grid(9) + flex-gutter(); - float: left; - @include box-shadow( -2px 0 0 lighten($dark-blue, 55%)); - @include transition(); - background: #FFF; - } - } -} diff --git a/cms/static/sass/_lms.scss b/cms/static/sass/_lms.scss deleted file mode 100644 index 1ddc48edaf..0000000000 --- a/cms/static/sass/_lms.scss +++ /dev/null @@ -1,69 +0,0 @@ -.component { - font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; - font-size: 16px; - line-height: 1.6; - color: #3c3c3c; - - a { - color: #1d9dd9; - text-decoration: none; - } - - p { - font-size: 16px; - line-height: 1.6; - } - - h1 { - float: none; - } - - h2 { - color: #646464; - font-size: 19px; - font-weight: 300; - letter-spacing: 1px; - margin-bottom: 15px; - margin-left: 0; - text-transform: uppercase; - } - - h3 { - font-size: 19px; - font-weight: 400; - } - - h4 { - background: none; - padding: 0; - border: none; - @include box-shadow(none); - font-size: 16px; - font-weight: 400; - } - - code { - margin: 0 2px; - padding: 0px 5px; - border-radius: 3px; - border: 1px solid #eaeaea; - white-space: nowrap; - font-family: Monaco, monospace; - font-size: 14px; - background-color: #f8f8f8; - } - - p + h2, ul + h2, ol + h2, p + h3 { - margin-top: 40px; - } - - p + p, ul + p, ol + p { - margin-top: 20px; - } - - p { - color: #3c3c3c; - font: normal 1em/1.6em; - margin: 0px; - } -} \ No newline at end of file diff --git a/cms/static/sass/_login.scss b/cms/static/sass/_login.scss deleted file mode 100644 index c2bff74638..0000000000 --- a/cms/static/sass/_login.scss +++ /dev/null @@ -1,139 +0,0 @@ -.edx-studio-logo-large { - display: block; - width: 224px; - height: 45px; - margin: 100px auto 30px; - background: url(../img/edx-studio-large.png) no-repeat; -} - -.sign-up-box, -.log-in-box { - width: 500px; - margin: auto; - border-radius: 3px; - - header { - height: 36px; - border-radius: 3px 3px 0 0; - border: 1px solid #2c2e33; - @include linear-gradient(top, #686b76, #54565e); - color: #fff; - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset); - - h1 { - float: none; - margin: 5px 0; - font-size: 15px; - font-weight: 300; - text-align: center; - } - } - - form { - padding: 40px; - border: 1px solid $darkGrey; - border-top-width: 0; - border-radius: 0 0 3px 3px; - background: #fff; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); - } - - label { - display: block; - margin-bottom: 5px; - font-size: 13px; - font-weight: 700; - } - - input[type="text"], - input[type="email"], - input[type="password"] { - width: 100%; - font-size: 20px; - font-weight: 300; - } - - .row { - @include clearfix; - margin-bottom: 24px; - - .split { - float: left; - width: 48%; - - &:first-child { - margin-right: 4%; - } - } - } - - .form-actions { - @include clearfix; - margin-top: 32px; - margin-bottom: 5px; - text-align: center; - } - - .log-in-button, - .create-account-button { - @include blue-button; - padding: 8px 0 10px; - font-family: $sans-serif; - @include transition(all .15s); - } - - .create-account-button { - padding: 10px 40px 12px; - margin-bottom: 10px; - } - - .enrolled { - font-size: 14px; - } - - .sign-up-button { - @include white-button; - padding: 7px 0 9px; - } - - .log-in-button, - .sign-up-button { - @include box-sizing(border-box); - float: left; - width: 45%; - } - - .or { - float: left; - display: inline-block; - width: 10%; - font-size: 15px; - line-height: 36px; - color: $darkGrey; - text-align: center; - } - - .forgot-button { - float: right; - font-size: 11px; - font-weight: 400; - line-height: 21px; - } - - .log-in-extra { - margin-top: 10px; - text-align: right; - font-size: 13px; - } - - #login_error, - #register_error { - display: none; - margin-bottom: 30px; - padding: 5px 10px; - border-radius: 3px; - background: $error-red; - font-size: 14px; - color: #fff; - } -} \ No newline at end of file diff --git a/cms/static/sass/_modal.scss b/cms/static/sass/_modal.scss deleted file mode 100644 index f9fbf81a8f..0000000000 --- a/cms/static/sass/_modal.scss +++ /dev/null @@ -1,69 +0,0 @@ -.modal-cover { - display: none; - position: fixed; - top: 0; - left: 0; - z-index: 1000; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, .8); -} - -.modal { - display: none; - position: fixed; - top: 60px; - left: 50%; - z-index: 1001; - width: 930px; - height: 540px; - margin-left: -465px; - background: #fff; - - .modal-body { - height: 400px; - padding: 40px; - overflow-y: scroll; - } - - .modal-actions { - height: 60px; - @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); - background-color: #d1dae3; - } - - h2 { - margin: 0 10px 30px; - color: #646464; - font-size: 19px; - font-weight: 300; - letter-spacing: 1px; - text-transform: uppercase; - } - - p { - margin: 20px; - } - - .revert-button { - @include blue-button; - margin: 13px 6px 0 13px; - } - - .close-button { - @include white-button; - margin-top: 13px; - } -} - -// lean modal alternative -#lean_overlay { - position: fixed; - z-index: 10000; - top: 0px; - left: 0px; - display: none; - height: 100%; - width: 100%; - background: $black; -} \ No newline at end of file diff --git a/cms/static/sass/_module-header.scss b/cms/static/sass/_module-header.scss deleted file mode 100644 index e2af263618..0000000000 --- a/cms/static/sass/_module-header.scss +++ /dev/null @@ -1,128 +0,0 @@ -section.video-new, section.video-edit, section.problem-new, section.problem-edit { - position: absolute; - top: 72px; - right: 0; - background: #fff; - width: flex-grid(6); - @include box-shadow(0 0 6px #666); - border: 1px solid #333; - border-right: 0; - z-index: 4; - - > header { - background: #666; - @include clearfix; - color: #fff; - padding: 6px; - border-bottom: 1px solid #333; - -webkit-font-smoothing: antialiased; - - h2 { - float: left; - font-size: 14px; - } - - a { - color: #fff; - - &.save-update { - float: right; - } - - &.cancel { - float: left; - } - } - - } - - > section { - padding: 20px; - - > header { - h1 { - font-size: 24px; - margin: 12px 0; - } - - section { - &.status-settings { - ul { - list-style: none; - @include border-radius(2px); - border: 1px solid #999; - @include inline-block(); - - li { - @include inline-block(); - border-right: 1px solid #999; - padding: 6px; - - &:last-child { - border-right: 0; - } - - &.current { - background: #eee; - } - } - } - - a.settings { - @include inline-block(); - margin: 0 20px; - border: 1px solid #999; - padding: 6px; - } - - select { - float: right; - } - } - - &.meta { - background: #eee; - padding: 10px; - margin: 20px 0; - @include clearfix(); - - div { - float: left; - margin-right: 20px; - - h2 { - font-size: 14px; - @include inline-block(); - } - - p { - @include inline-block(); - } - } - } - } - } - - section.notes { - margin-top: 20px; - padding: 6px; - background: #eee; - border: 1px solid #ccc; - - textarea { - @include box-sizing(border-box); - display: block; - width: 100%; - } - - h2 { - font-size: 14px; - margin-bottom: 6px; - } - - input[type="submit"]{ - margin-top: 10px; - } - } - } -} diff --git a/cms/static/sass/_problem.scss b/cms/static/sass/_problem.scss deleted file mode 100644 index 66acacf65c..0000000000 --- a/cms/static/sass/_problem.scss +++ /dev/null @@ -1,24 +0,0 @@ -section.problem-new, section.problem-edit { - > section { - textarea { - @include box-sizing(border-box); - display: block; - width: 100%; - } - - div.preview { - background: #eee; - @include box-sizing(border-box); - height: 40px; - padding: 10px; - width: 100%; - } - - a.save { - @extend .button; - @include inline-block(); - margin-top: 20px; - } - } -} - diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss index ee03a0fca3..8a7e7e9835 100644 --- a/cms/static/sass/_reset.scss +++ b/cms/static/sass/_reset.scss @@ -1,3 +1,6 @@ +// studio - utilities - reset +// ==================== + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss deleted file mode 100644 index 97818326be..0000000000 --- a/cms/static/sass/_section.scss +++ /dev/null @@ -1,239 +0,0 @@ -section#unit-wrapper { - section.filters { - @include clearfix; - display: none; - opacity: .4; - margin-bottom: 10px; - @include transition; - - &:hover { - opacity: 1; - } - - h2 { - @include inline-block(); - text-transform: uppercase; - letter-spacing: 1px; - font-size: 14px; - padding: 6px 6px 6px 0; - font-size: 12px; - margin: 0; - } - - ul { - @include clearfix(); - list-style: none; - margin: 0; - padding: 0; - - li { - @include inline-block; - margin-right: 6px; - border-right: 1px solid #ddd; - padding-right: 6px; - - &.search { - float: right; - border: 0; - } - - a { - &.more { - font-size: 12px; - @include inline-block; - margin: 0 6px; - font-style: italic; - } - } - } - } - } - - div.content { - display: table; - border: 1px solid lighten($dark-blue, 40%); - width: 100%; - @include border-radius(3px); - @include box-shadow(0 0 4px lighten($dark-blue, 50%)); - - section { - header { - background: #fff; - padding: 6px; - border-bottom: 1px solid lighten($dark-blue, 60%); - @include clearfix; - - h2 { - color: $bright-blue; - // float: left; - font-size: 14px; - letter-spacing: 1px; - // line-height: 20px; - text-transform: uppercase; - margin: 0; - } - } - - &.modules { - @include box-sizing(border-box); - display: table-cell; - width: flex-grid(6, 9); - border-right: 1px solid lighten($dark-blue, 40%); - - &.empty { - text-align: center; - vertical-align: middle; - - a { - @extend .button; - @include inline-block(); - margin-top: 10px; - } - } - - ol { - list-style: none; - margin: 0; - padding: 0; - - li { - border-bottom: 1px solid lighten($dark-blue, 60%); - - a { - color: #000; - } - - ol { - list-style: none; - margin: 0; - padding: 0; - - li { - padding: 6px; - position: relative; - - &:last-child { - border-bottom: 0; - } - - &:hover { - background-color: lighten($yellow, 10%); - - a.draggable { - opacity: 1; - } - } - - a.draggable { - float: right; - opacity: .4; - } - - &.group { - padding: 0; - - header { - padding: 6px; - background: none; - - h3 { - font-size: 14px; - margin: 0; - } - } - - ol { - border-left: 4px solid #999; - border-bottom: 0; - margin: 0; - padding: 0; - - li { - &:last-child { - border-bottom: 0; - } - } - } - } - } - } - } - } - } - - &.scratch-pad { - @include box-sizing(border-box); - display: table-cell; - width: flex-grid(3, 9) + flex-gutter(9); - vertical-align: top; - - ol { - list-style: none; - margin: 0; - padding: 0; - - li { - background: $light-blue; - - &:last-child { - border-bottom: 0; - } - - &.new-module a { - background-color: darken($light-blue, 2%); - border-bottom: 1px solid darken($light-blue, 8%); - - &:hover { - background-color: lighten($yellow, 10%); - } - } - - a { - color: $dark-blue; - } - - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - padding: 6px; - border-collapse: collapse; - border-bottom: 1px solid darken($light-blue, 8%); - position: relative; - - &:last-child { - border-bottom: 1px solid darken($light-blue, 8%); - } - - &:hover { - background-color: lighten($yellow, 10%); - - a.draggable { - opacity: 1; - } - } - - - &.empty { - padding: 12px; - - a { - @extend .button; - display: block; - text-align: center; - } - } - - a.draggable { - opacity: .3; - } - } - } - } - } - } - } - } -} diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss deleted file mode 100644 index d8011dd651..0000000000 --- a/cms/static/sass/_settings.scss +++ /dev/null @@ -1,740 +0,0 @@ -// Studio - Course Settings -// ==================== -body.course.settings { - - .content-primary, .content-supplementary { - @include box-sizing(border-box); - float: left; - } - - .content-primary { - @extend .window; - width: flex-grid(9, 12); - margin-right: flex-gutter(); - padding: $baseline ($baseline*1.5); - } - - // messages - should be synced up with global messages in the future - .message { - display: block; - font-size: 14px; - } - - .message-status { - display: none; - @include border-top-radius(2px); - @include box-sizing(border-box); - border-bottom: 2px solid $yellow; - margin: 0 0 20px 0; - padding: 10px 20px; - font-weight: 500; - background: $paleYellow; - - .text { - display: inline-block; - } - - &.error { - border-color: shade($red, 50%); - background: tint($red, 20%); - color: $white; - } - - &.confirm { - border-color: shade($green, 50%); - background: tint($green, 20%); - color: $white; - } - - &.is-shown { - display: block; - } - } - - // in form - elements - .group-settings { - margin: 0 0 ($baseline*2) 0; - - header { - @include clearfix(); - - .title-2 { - width: flex-grid(4, 9); - margin: 0 flex-gutter() 0 0; - float: left; - } - - .tip { - @include font-size(13); - width: flex-grid(5, 9); - float: right; - margin-top: ($baseline/2); - text-align: right; - color: $gray-l2; - } - } - - // basic layout/elements - .title-2 { - - } - - .title-3 { - - } - - // in form -UI hints/tips/messages - .instructions { - @include font-size(14); - margin: 0 0 $baseline 0; - } - - .tip { - @include transition(color, 0.15s, ease-in-out); - @include font-size(13); - display: block; - margin-top: ($baseline/4); - color: $gray-l3; - } - - .message-error { - @include font-size(13); - display: block; - margin-top: ($baseline/4); - margin-bottom: ($baseline/2); - color: $red; - } - - // buttons - .remove-item { - @include white-button; - @include font-size(13); - font-weight: 400; - } - - .new-button { - @include font-size(13); - } - - // form basics - .list-input { - margin: 0; - padding: 0; - list-style: none; - - .field { - margin: 0 0 $baseline 0; - - &:last-child { - margin-bottom: 0; - } - - &.required { - - label { - font-weight: 600; - } - - label:after { - margin-left: ($baseline/4); - content: "*"; - } - } - - label, input, textarea { - display: block; - } - - label { - @include font-size(14); - @include transition(color, 0.15s, ease-in-out); - margin: 0 0 ($baseline/4) 0; - font-weight: 400; - - &.is-focused { - color: $blue; - } - } - - input, textarea { - @include placeholder($gray-l4); - @include font-size(16); - @include size(100%,100%); - padding: ($baseline/2); - - &.long { - } - - &.short { - } - - &.error { - border-color: $red; - } - - &:focus { - - + .tip { - color: $gray; - } - } - } - - textarea.long { - height: ($baseline*5); - } - - input[type="checkbox"] { - display: inline-block; - margin-right: ($baseline/4); - width: auto; - height: auto; - - & + label { - display: inline-block; - } - } - } - - .field-group { - @include clearfix(); - margin: 0 0 ($baseline/2) 0; - } - - // enumerated/grouped lists - &.enum { - - .field-group { - @include box-sizing(border-box); - @include border-radius(3px); - background: $gray-l5; - padding: $baseline; - - &:last-child { - padding-bottom: $baseline; - } - - .actions { - @include clearfix(); - margin-top: ($baseline/2); - border-top: 1px solid $gray-l4; - padding-top: ($baseline/2); - - .remove-item { - float: right; - } - } - } - } - } - - // existing inputs - .input-existing { - margin: 0 0 $baseline 0; - - .actions { - margin: ($baseline/4) 0 0 0; - } - } - - // not editable fields - .field.is-not-editable { - - label, .label { - color: $gray-l3; - } - - input { - opacity: 0.25; - } - } - - // field with error - .field.error { - - input, textarea { - border-color: $red; - } - } - - // specific fields - basic - &.basic { - - .list-input { - @include clearfix(); - - .field { - margin-bottom: 0; - } - } - - #field-course-organization { - float: left; - width: flex-grid(2, 9); - margin-right: flex-gutter(); - } - - #field-course-number { - float: left; - width: flex-grid(2, 9); - margin-right: flex-gutter(); - } - - #field-course-name { - float: left; - width: flex-grid(5, 9); - } - } - - // specific fields - schedule - &.schedule { - - .list-input { - margin-bottom: ($baseline*1.5); - - &:last-child { - margin-bottom: 0; - } - } - - .field-group { - @include clearfix(); - border-bottom: 1px solid $gray-l5; - padding-bottom: ($baseline/2); - - &:last-child { - border: none; - padding-bottom: 0; - } - - .field { - float: left; - width: flex-grid(3, 9); - margin-bottom: ($baseline/4); - margin-right: flex-gutter(); - } - - .field.time { - position: relative; - - .tip { - position: absolute; - top: 0; - right: 0; - } - } - } - } - - // specific fields - overview - #field-course-overview { - - #course-overview { - height: ($baseline*20); - } - } - - // specific fields - video - #field-course-introduction-video { - - .input-existing { - @include box-sizing(border-box); - @include border-radius(3px); - background: $gray-l5; - padding: ($baseline/2); - - .actions { - @include clearfix(); - margin-top: ($baseline/2); - border-top: 1px solid $gray-l4; - padding-top: ($baseline/2); - - .remove-item { - float: right; - } - } - } - - .actions { - margin-top: ($baseline/2); - border-top: 1px solid $gray-l5; - padding-top: ($baseline/2); - } - } - - // specific fields - requirements - &.requirements { - - #field-course-effort { - width: flex-grid(3, 9); - } - } - - // specific fields - grading range (artifact styling) - &.grade-range { - margin-bottom: ($baseline*3); - - .grade-controls { - @include clearfix; - width: flex-grid(9,9); - } - - .new-grade-button { - @include box-sizing(border-box); - @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); - width: flex-grid(1,9); - height: ($baseline*2); - position: relative; - display: inline-block; - vertical-align: middle; - margin-right: flex-gutter(); - border-radius: 20px; - border: 1px solid $darkGrey; - background-color: #d1dae3; - color: #6d788b; - - .plus-icon { - position: absolute; - top: 50%; - left: 50%; - margin-left: -6px; - margin-top: -6px; - } - } - - .grade-slider { - @include box-sizing(border-box); - width: flex-grid(8,9); - display: inline-block; - vertical-align: middle; - - .grade-bar { - position: relative; - width: 100%; - height: ($baseline*2.5); - background: $lightGrey; - - .increments { - position: relative; - - li { - position: absolute; - top: 52px; - width: 30px; - margin-left: -15px; - font-size: 9px; - text-align: center; - - &.increment-0 { - left: 0; - } - - &.increment-10 { - left: 10%; - } - - &.increment-20 { - left: 20%; - } - - &.increment-30 { - left: 30%; - } - - &.increment-40 { - left: 40%; - } - - &.increment-50 { - left: 50%; - } - - &.increment-60 { - left: 60%; - } - - &.increment-70 { - left: 70%; - } - - &.increment-80 { - left: 80%; - } - - &.increment-90 { - left: 90%; - } - - &.increment-100 { - left: 100%; - } - } - } - - .grade-specific-bar { - height: 50px !important; - } - - .grades { - position: relative; - - li { - position: absolute; - top: 0; - height: 50px; - text-align: right; - @include border-radius(2px); - - &:hover, - &.is-dragging { - .remove-button { - display: block; - } - } - - &.is-dragging { - - } - - .remove-button { - display: none; - position: absolute; - top: -17px; - right: 1px; - height: 17px; - font-size: 10px; - } - - &:nth-child(1) { - background: #4fe696; - } - - &:nth-child(2) { - background: #ffdf7e; - } - - &:nth-child(3) { - background: #ffb657; - } - - &:nth-child(4) { - background: #ef54a1; - } - - &:nth-child(5), - &.bar-fail { - background: #fb336c; - } - - .letter-grade { - display: block; - margin: 10px 15px 0 0; - font-size: 16px; - font-weight: 700; - line-height: 14px; - } - - .range { - display: block; - margin-right: 15px; - font-size: 10px; - line-height: 12px; - } - - .drag-bar { - position: absolute; - top: 0; - right: -1px; - height: 50px; - width: 2px; - background-color: #fff; - @include box-shadow(-1px 0 3px rgba(0,0,0,0.1)); - - cursor: ew-resize; - @include transition(none); - - &:hover { - width: 6px; - right: -2px; - } - } - } - } - } - } - } - - // specific fields - grading rules - &.grade-rules { - - #field-course-grading-graceperiod { - width: flex-grid(3, 9); - } - } - - &.assignment-types { - - .list-input { - - &:last-child { - margin-bottom: 0; - } - } - - .field-group { - @include clearfix(); - width: flex-grid(9, 9); - margin-bottom: ($baseline*1.5); - border-bottom: 1px solid $gray-l5; - padding-bottom: ($baseline*1.5); - - &:last-child { - border: none; - padding-bottom: 0; - } - - .field { - display: inline-block; - vertical-align: top; - width: flex-grid(3, 6); - margin-bottom: ($baseline/2); - margin-right: flex-gutter(); - } - - #field-course-grading-assignment-shortname, - #field-course-grading-assignment-totalassignments, - #field-course-grading-assignment-gradeweight, - #field-course-grading-assignment-droppable { - width: flex-grid(2, 6); - } - } - - .actions { - float: left; - width: flex-grid(9, 9); - - .delete-button { - margin: 0; - } - } - } - - // specific fields - advanced settings - &.advanced-policies { - - .field-group { - margin-bottom: ($baseline*1.5); - - &:last-child { - border: none; - padding-bottom: 0; - } - } - - .course-advanced-policy-list-item { - @include clearfix(); - position: relative; - - .field { - - input { - width: 100%; - } - - .tip { - @include transition (opacity 0.5s ease-in-out 0s); - opacity: 0; - position: absolute; - bottom: ($baseline*1.25); - } - - input:focus { - - & + .tip { - opacity: 1.0; - } - } - - input.error { - - & + .tip { - opacity: 0; - } - } - } - - .key, .value { - float: left; - margin: 0 0 ($baseline/2) 0; - } - - .key { - width: flex-grid(3, 9); - margin-right: flex-gutter(); - } - - .value { - width: flex-grid(6, 9); - } - - .actions { - float: left; - width: flex-grid(9, 9); - - .delete-button { - margin: 0; - } - } - } - - .message-error { - position: absolute; - bottom: ($baseline*0.75); - } - - // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs - .CodeMirror { - @include font-size(16); - @include box-sizing(border-box); - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); - @include linear-gradient($lightGrey, tint($lightGrey, 90%)); - padding: 5px 8px; - border: 1px solid $mediumGrey; - border-radius: 2px; - background-color: $lightGrey; - font-family: 'Open Sans', sans-serif; - color: $baseFontColor; - outline: 0; - - &.CodeMirror-focused { - @include linear-gradient($paleYellow, tint($paleYellow, 90%)); - outline: 0; - } - - .CodeMirror-scroll { - overflow: hidden; - height: auto; - min-height: ($baseline*1.5); - max-height: ($baseline*10); - } - - // editor color changes just for JSON - .CodeMirror-lines { - - .cm-string { - color: #cb9c40; - } - - pre { - line-height: 2.0rem; - } - } - } - } - } - - .content-supplementary { - width: flex-grid(3, 12); - } -} \ No newline at end of file diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/_static-pages.scss deleted file mode 100644 index 138e817769..0000000000 --- a/cms/static/sass/_static-pages.scss +++ /dev/null @@ -1,153 +0,0 @@ -.static-pages { - .new-static-page-button { - @include grey-button; - display: block; - text-align: center; - padding: 12px 0; - } - - .unit-body { - padding: 0; - - .details { - display: block !important; - - h2 { - margin: 0 0 5px 0; - } - } - } - - .component-editor { - border: none; - border-radius: 0; - } - - .components > li { - margin: 0; - border-radius: 0; - - &.new-component-item { - background: transparent; - border: none; - @include box-shadow(none); - } - } - - .component { - border: 1px solid $mediumGrey; - border-top: none; - - &:first-child { - border-top: 1px solid $mediumGrey; - } - - &:hover { - border: 1px solid $mediumGrey; - border-top: none; - - &:first-child { - border-top: 1px solid $mediumGrey; - } - - .drag-handle { - background: url(../img/drag-handles.png) center no-repeat #fff; - } - } - - .drag-handle { - top: 0; - right: 0; - z-index: 11; - width: 35px; - border: none; - background: url(../img/drag-handles.png) center no-repeat #fff; - - &:hover { - background: url(../img/drag-handles.png) center no-repeat #fff; - } - } - - .component-actions { - top: 26px; - right: 44px; - } - } - - .component.editing { - border-left: 1px solid $mediumGrey; - border-right: 1px solid $mediumGrey; - - .xmodule_display { - display: none; - } - } - - .new .xmodule_display { - background: $yellow; - } - - .xmodule_display { - padding: 20px 20px 22px; - font-size: 24px; - font-weight: 300; - background: #fff; - @include transition(background-color 3s); - } - - .static-page-item { - position: relative; - margin: 10px 0; - padding: 22px 20px; - border: 1px solid $darkGrey; - border-radius: 3px; - background: #fff; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); - - .page-name { - font-size: 19px; - font-weight: 700; - } - - .item-actions { - margin-top: 19px; - margin-right: 12px; - } - } -} - -.edit-static-page { - .main-wrapper { - margin-top: 40px; - } - - .static-page-details { - @extend .window; - padding: 32px 40px; - - .row { - border: none; - } - } - - .page-display-name-input { - width: 100%; - font-size: 20px; - } - - .page-contents { - @include box-sizing(border-box); - width: 100%; - height: 360px; - padding: 15px; - border: 1px solid #b0b6c2; - border-radius: 2px; - @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); - background-color: #edf1f5; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); - font-family: Monaco, monospace; - font-size: 13px; - color: #3c3c3c; - outline: 0; - } -} \ No newline at end of file diff --git a/cms/static/sass/_subsection.scss b/cms/static/sass/_subsection.scss deleted file mode 100644 index a39c0d757a..0000000000 --- a/cms/static/sass/_subsection.scss +++ /dev/null @@ -1,295 +0,0 @@ -.subsection .main-wrapper { - margin: 40px; -} - -.subsection .inner-wrapper { - @include clearfix(); -} - -.subsection-body { - padding: 32px 40px; - @include clearfix; - - > div { - margin-bottom: 40px; - } - - input { - font-size: 14px; - } - - .unit-subtitle { - display: block; - width: 100%; - } - - .sortable-unit-list { - ol { - @include tree-view; - } - } - - .policy-list { - input[disabled] { - border: none; - @include box-shadow(none); - } - - .policy-list-name { - margin-right: 5px; - margin-bottom: 10px; - } - - .policy-list-value { - width: 320px; - margin-right: 10px; - } - } - - .policy-list-element { - .save-button, - .cancel-button { - display: none; - } - - .edit-icon { - margin-right: 8px; - } - - &.editing, - &.new-policy-list-element { - .policy-list-name, - .policy-list-value { - border: 1px solid #b0b6c2; - @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); - background-color: #edf1f5; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); - } - } - } - - .new-policy-list-element { - padding: 10px 10px 0; - margin: 0 -10px 10px; - border-radius: 3px; - background: $mediumGrey; - - .save-button { - @include blue-button; - margin-bottom: 10px; - } - - .cancel-button { - @include white-button; - } - - .edit-icon { - display: none; - } - - .delete-icon { - display: none; - } - } - - .new-policy-item { - margin: 10px 0; - - .plus-icon-small { - position: relative; - top: -1px; - vertical-align: middle; - } - } -} - -.subsection-name-input { - label { - display: block; - } - - input { - width: 100%; - font-size: 20px; - } -} - -.scheduled-date-input, -.due-date-input { - @include clearfix; - - .date-input, - .time-input { - display: inline-block; - width: 100px; - } - - .inherits-check { - label { - font-size: 13px; - } - } - - .notice { - margin-top: 6px; - font-size: 11px; - color: #999; - } -} - -.due-date-input { - label { - display: inline-block !important; - margin-right: 10px; - } - - a { - font-size: 11px; - font-weight: bold; - text-transform: uppercase; - } - - .date-setter { - @include clearfix; - display: none; - } - - .remove-date { - display: block; - } -} - -.row.visibility { - label { - display: inline-block !important; - margin-right: 10px; - line-height: 21px; - } - - a { - display: inline-block; - height: 31px; - margin-right: 8px; - vertical-align: middle; - font-size: 11px; - font-weight: 700; - line-height: 31px; - text-transform: uppercase; - } - - .large-toggle { - width: 41px; - background: url(../img/large-toggles.png) no-repeat; - background-position: 0 -50px; - - .hidden { - background-position: 0 -5px; - } - } -} - -.gradable { - - label { - display: inline-block; - vertical-align: top; - } - - .gradable-status { - position: relative; - top: -4px; - display: inline-block; - margin-left: 10px; - width: 65%; - - .status-label { - margin: 0; - padding: 0; - background: transparent; - color: $blue; - border: none; - font-size: 11px; - font-weight: bold; - text-transform: uppercase; - } - - .menu-toggle { - z-index: 100; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 20px; - background: transparent; - - &:hover, &.is-active { - color: $blue; - } - } - - .menu { - z-index: 1; - position: absolute; - top: -12px; - left: -7px; - display: none; - width: 100%; - margin: 0; - padding: 8px 12px; - opacity: 0.0; - background: $white; - border: 1px solid $mediumGrey; - font-size: 12px; - @include border-radius(4px); - @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); - @include transition(opacity .15s); - - - li { - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; - - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; - } - } - - a { - - &.is-selected { - font-weight: bold; - } - } - } - - // dropdown state - &.is-active { - - .menu { - z-index: 10000; - display: block; - opacity: 1.0; - } - - .menu-toggle { - z-index: 1000; - } - } - - // set state - &.is-set { - - .menu-toggle { - color: $blue; - } - - .status-label { - display: block; - color: $blue; - } - } - } -} \ No newline at end of file diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss deleted file mode 100644 index b7600e4205..0000000000 --- a/cms/static/sass/_unit.scss +++ /dev/null @@ -1,667 +0,0 @@ -.unit .main-wrapper { - @include clearfix(); - margin: 40px; -} - -//Problem Selector tab menu requirements -.js .tabs .tab { - display: none; -} -//end problem selector reqs - -.main-column { - clear: both; - float: left; - width: 70%; -} - -.unit-body.published { - .components > li { - border: none; - - .rendered-component { - padding: 0 20px; - } - } -} - -.unit-body { - .breadcrumbs { - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #cbd1db; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); - background-color: #edf1f5; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); - @include clearfix; - - li { - float: left; - } - - a, - .current-page { - display: block; - padding: 15px 35px 15px 30px; - font-size: 14px; - background: url(../img/breadcrumb-arrow.png) no-repeat right center; - } - } - - h2 { - margin: 30px 40px 30px 0; - color: #646464; - font-size: 19px; - font-weight: 300; - letter-spacing: 1px; - text-transform: uppercase; - } - - .components { - - > li { - position: relative; - z-index: 10; - margin: 20px 40px; - - - - .title { - margin: 0 0 15px 0; - color: $mediumGrey; - - .value { - } - } - - &.new-component-item { - margin: 20px 0px; - border-top: 1px solid $mediumGrey; - box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; - background-color: $lightGrey; - margin-bottom: 0px; - padding-bottom: 20px; - - .new-component-button { - display: block; - padding: 20px; - text-align: center; - color: #edf1f5; - } - - h5 { - margin: 20px 0px; - color: #fff; - font-weight: 600; - font-size: 18px; - } - - .rendered-component { - display: none; - background: #fff; - border-radius: 3px 3px 0 0; - } - - .new-component-type { - - a, - li { - display: inline-block; - } - - a { - border: 1px solid $mediumGrey; - width: 100px; - height: 100px; - color: #fff; - margin-right: 15px; - margin-bottom: 20px; - border-radius: 8px; - font-size: 15px; - line-height: 14px; - text-align: center; - @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); - - .name { - position: absolute; - bottom: 5px; - left: 0; - width: 100%; - padding: 10px; - @include box-sizing(border-box); - color: #fff; - } - } - } - - .new-component-templates { - display: none; - margin: 20px 40px 20px 40px; - border-radius: 3px; - border: 1px solid $mediumGrey; - background-color: #fff; - @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); - @include clearfix; - - .cancel-button { - margin: 20px 0px 10px 10px; - @include white-button; - } - - .problem-type-tabs { - display: none; - } - - // specific menu types - &.new-component-problem { - padding-bottom:10px; - - .ss-icon, .editor-indicator { - display: inline-block; - } - - .problem-type-tabs { - display: inline-block; - } - } - } - - .new-component-type, - .new-component-template { - @include clearfix; - - a { - position: relative; - border: 1px solid $darkGreen; - background: tint($green,20%); - color: #fff; - - &:hover { - background: $brightGreen; - } - } - } - - .problem-type-tabs { - list-style-type: none; - border-radius: 0; - width: 100%; - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: $lightBluishGrey; - @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); - - li:first-child { - margin-left: 20px; - } - - li { - float:left; - display:inline-block; - text-align:center; - width: auto; - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: tint($lightBluishGrey, 10%); - @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); - opacity:.8; - - &:hover { - opacity:1; - background-color: tint($lightBluishGrey, 20%); - } - - &.ui-state-active { - border: 0px; - @include active; - opacity:1; - } - } - - a{ - display: block; - padding: 15px 25px; - font-size: 15px; - line-height: 16px; - text-align: center; - color: #3c3c3c; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); - } - } - - .new-component-template { - - a { - background: #fff; - border: 0px; - color: #3c3c3c; - @include transition (none); - - &:hover { - background: tint($green,30%); - color: #fff; - @include transition(background-color .15s); - } - } - - li { - border:none; - border-bottom: 1px dashed $lightGrey; - color: #fff; - } - - li:first-child { - a { - border-top: 0px; - } - } - - li:nth-child(2) { - a { - border-radius: 0px; - } - } - - a { - @include clearfix(); - display: block; - padding: 7px 20px; - border-bottom: none; - font-weight: 500; - - .name { - float: left; - - .ss-icon { - @include transition(opacity .15s); - display: inline-block; - top: 1px; - margin-right: 5px; - opacity: 0.5; - width: 17; - height: 21px; - vertical-align: middle; - } - } - - .editor-indicator { - @include transition(opacity .15s); - float: right; - position: relative; - top: 3px; - font-size: 12px; - opacity: 0.3; - } - - .ss-icon, .editor-indicator { - display: none; - } - - &:hover { - color: #fff; - - .ss-icon { - opacity: 1.0; - } - - .editor-indicator { - opacity: 1.0; - } - } - } - - // specific editor types - .empty { - - a { - line-height: 1.4; - font-weight: 400; - background: #fff; - color: #3c3c3c; - - - &:hover { - background: tint($green,30%); - color: #fff; - } - } - } - } - - .new-component { - text-align: center; - - h5 { - color: $darkGreen; - } - - } - } - } - } - - .component { - border: 1px solid $lightBluishGrey2; - border-radius: 3px; - background: #fff; - @include transition(none); - - &:hover { - border-color: #6696d7; - - .drag-handle { - background-color: $blue; - border-color: $blue; - } - } - - &.editing { - border: 1px solid $lightBluishGrey2; - z-index: auto; - - .drag-handle, - .component-actions { - display: none; - } - } - - &.component-placeholder { - border-color: #6696d7; - } - - .component-actions { - position: absolute; - top: 7px; - right: 9px; - } - - .drag-handle { - position: absolute; - display: block; - top: -1px; - right: -16px; - z-index: 10; - width: 15px; - height: 100%; - border-radius: 0 3px 3px 0; - border: 1px solid $lightBluishGrey2; - background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2; - cursor: move; - @include transition(none); - } - } - - .xmodule_display { - padding: 40px 20px 20px; - overflow-x: auto; - - h1 { - float: none; - margin-left: 0; - } - } - - .wrapper-component-editor { - z-index: 9999; - position: relative; - background: $lightBluishGrey2; - } - - .component-editor { - @include edit-box; - @include box-shadow(none); - display: none; - padding: 20px; - border-radius: 2px 2px 0 0; - - .metadata_edit { - margin-bottom: 20px; - font-size: 13px; - - li { - margin-bottom: 10px; - } - - label { - display: inline-block; - margin-right: 10px; - } - } - - h3 { - margin-bottom: 10px; - font-size: 18px; - font-weight: 700; - } - - h5 { - margin-bottom: 8px; - color: #fff; - font-weight: 700; - } - - .save-button { - margin-top: 10px; - margin: 15px 8px 0 0; - } - } -} - -.unit-settings { - .window-contents { - padding: 10px 20px; - } - - .unit-actions { - border-bottom: none; - padding-bottom: 0; - } - - .published-alert { - display: none; - padding: 10px; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - font-size: 14px; - line-height: 1.4; - - div { - margin-top: 15px; - } - } - - input[type="radio"] { - margin-right: 7px; - } - - .status { - font-size: 12px; - - strong { - font-weight: 700; - } - } - - .preview-button, .view-button { - @include white-button; - margin-bottom: 10px; - } - - .publish-button { - @include orange-button; - } - - .delete-button { - @include blue-button; - } - - .delete-draft { - display: inline-block; - } - - .delete-button, - .preview-button, - .publish-button, - .view-button { - font-size: 11px; - margin-top: 10px; - padding: 6px 15px 8px; - } -} - -.unit-history { - &.collapsed { - h4 { - border-bottom: none; - border-radius: 3px; - } - - .window-contents { - display: none; - } - } - - ol { - border: 1px solid #ced2db; - - li { - display: block; - padding: 6px 8px 8px 10px; - background: #edf1f5; - font-size: 12px; - - &:hover { - background: #fffcf1; - - .item-actions { - display: block; - } - } - - &.checked { - background: #d1dae3; - } - - .item-actions { - display: none; - } - - input[type="radio"] { - margin-right: 7px; - } - } - } -} - -.unit-location { - .url { - width: 100%; - margin-bottom: 10px; - @include box-shadow(none); - } - - .draft-tag, - .hidden-tag, - .private-tag, - .has-new-draft-tag { - font-size: 8px; - } - - .window-contents > ol { - @include tree-view; - - .section-item { - display: inline-block; - width: 100%; - font-size: 11px; - padding: 2px 8px 4px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - @include box-sizing(border-box); - } - - ol { - .section-item { - padding-left: 20px; - } - - .new-unit-item { - margin-left: 20px; - } - } - - ol ol { - .section-item { - padding-left: 34px; - } - - .new-unit-item { - margin: 0 0 10px 41px; - } - } - } -} - -.edit-state-draft { - .visibility, - - .edit-draft-message, - .view-button { - display: none; - } - - .published-alert { - display: block; - } -} - -.edit-state-public { - .delete-draft, - .component-actions, - .new-component-item, - .editing-draft-alert, - .publish-draft-message, - .preview-button { - display: none; - } - - .published-alert { - display: block; - } - - .drag-handle { - display: none !important; - } -} - -.edit-state-private { - .delete-draft, - .publish-draft, - .editing-draft-alert, - .create-draft, - .view-button { - display: none; - } -} - -// editing units from courseware -body.unit { - - .component { - padding-top: 30px; - - .component-actions { - @include box-sizing(border-box); - position: absolute; - width: 100%; - padding: 15px; - top: 0; - left: 0; - border-bottom: 1px solid $lightBluishGrey2; - background: $lightGrey; - } - - &.editing { - padding-top: 0; - } - } -} diff --git a/cms/static/sass/_users.scss b/cms/static/sass/_users.scss deleted file mode 100644 index e107bdbb6d..0000000000 --- a/cms/static/sass/_users.scss +++ /dev/null @@ -1,78 +0,0 @@ -.users { - .new-user-form { - display: none; - padding: 15px 20px; - background-color: $lightBluishGrey2; - - #result { - display: none; - float: left; - margin-bottom: 15px; - padding: 3px 15px; - border-radius: 3px; - background: $error-red; - font-size: 14px; - color: #fff; - } - - .form-elements { - clear: both; - } - - label { - display: inline-block; - margin-right: 10px; - } - - .email-input { - width: 350px; - padding: 8px 8px 10px; - border-color: $darkGrey; - } - - .add-button { - @include blue-button; - padding: 5px 20px 9px; - } - - .cancel-button { - @include white-button; - padding: 5px 20px 9px; - } - } - - .user-list { - border: 1px solid $mediumGrey; - background: #fff; - - li { - position: relative; - padding: 20px; - border-bottom: 1px solid $mediumGrey; - - &:last-child { - border-bottom: none; - } - - span { - display: inline-block; - } - - .user-name { - margin-right: 10px; - font-size: 24px; - font-weight: 300; - } - - .user-email { - font-size: 14px; - font-style: italic; - color: $mediumGrey; - } - - .item-actions { - top: 24px; - } - } - } -} \ No newline at end of file diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 4d8e26b2f9..78b6f2b221 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -1,3 +1,6 @@ +// studio - utilities - variables +// ==================== + $baseline: 20px; // grid diff --git a/cms/static/sass/_video.scss b/cms/static/sass/_video.scss deleted file mode 100644 index b68176e2db..0000000000 --- a/cms/static/sass/_video.scss +++ /dev/null @@ -1,33 +0,0 @@ -section.video-new, section.video-edit { - > section { - - section.upload { - padding: 6px; - margin-bottom: 10px; - border: 1px solid #ddd; - - a.upload-button { - @extend .button; - @include inline-block(); - } - } - - section.in-use { - h2 { - font-size: 14px; - } - - div { - background: #eee; - text-align: center; - padding: 6px; - } - } - - a.save-update { - @extend .button; - @include inline-block(); - margin-top: 20px; - } - } -} diff --git a/cms/static/sass/_week.scss b/cms/static/sass/_week.scss deleted file mode 100644 index b638a36f5c..0000000000 --- a/cms/static/sass/_week.scss +++ /dev/null @@ -1,256 +0,0 @@ -section.week-edit, -section.week-new, -section.sequence-edit { - - > header { - border-bottom: 2px solid #333; - @include clearfix(); - - div { - @include clearfix(); - padding: 6px 20px; - - h1 { - font-size: 18px; - text-transform: uppercase; - letter-spacing: 1px; - float: left; - } - - p { - float: right; - } - - &.week { - background: #eee; - font-size: 12px; - border-bottom: 1px solid #ccc; - - h2 { - font-size: 12px; - @include inline-block(); - margin-right: 20px; - } - - ul { - list-style: none; - @include inline-block(); - - li { - @include inline-block(); - margin-right: 10px; - - p { - float: none; - } - } - } - } - } - - section.goals { - background: #eee; - padding: 6px 20px; - border-top: 1px solid #ccc; - - ul { - list-style: none; - color: #999; - - li { - margin-bottom: 6px; - - &:last-child { - margin-bottom: 0; - } - } - } - } - } - - > section.content { - @include box-sizing(border-box); - padding: 20px; - - section.filters { - @include clearfix; - margin-bottom: 10px; - background: #efefef; - border: 1px solid #ddd; - - ul { - @include clearfix(); - list-style: none; - padding: 6px; - - li { - @include inline-block(); - - &.advanced { - float: right; - } - } - } - } - - > div { - display: table; - border: 1px solid; - width: 100%; - - section { - header { - background: #eee; - padding: 6px; - border-bottom: 1px solid #ccc; - @include clearfix; - - h2 { - text-transform: uppercase; - letter-spacing: 1px; - font-size: 12px; - float: left; - } - } - - &.modules { - @include box-sizing(border-box); - display: table-cell; - width: flex-grid(6, 9); - border-right: 1px solid #333; - - &.empty { - text-align: center; - vertical-align: middle; - - a { - @extend .button; - @include inline-block(); - margin-top: 10px; - } - } - - ol { - list-style: none; - border-bottom: 1px solid #333; - - li { - border-bottom: 1px solid #333; - - &:last-child{ - border-bottom: 0; - } - - a { - color: #000; - } - - ol { - list-style: none; - - li { - padding: 6px; - - &:hover { - a.draggable { - opacity: 1; - } - } - - a.draggable { - float: right; - opacity: .5; - } - - &.group { - padding: 0; - - header { - padding: 6px; - background: none; - - h3 { - font-size: 14px; - } - } - - - ol { - border-left: 4px solid #999; - border-bottom: 0; - - li { - &:last-child { - border-bottom: 0; - } - } - } - } - } - } - } - } - } - - &.scratch-pad { - @include box-sizing(border-box); - display: table-cell; - width: flex-grid(3, 9) + flex-gutter(9); - vertical-align: top; - - ol { - list-style: none; - border-bottom: 1px solid #999; - - li { - border-bottom: 1px solid #999; - background: #f9f9f9; - - &:last-child { - border-bottom: 0; - } - - ul { - list-style: none; - - li { - padding: 6px; - - &:last-child { - border-bottom: 0; - } - - &:hover { - a.draggable { - opacity: 1; - } - } - - &.empty { - padding: 12px; - - a { - @extend .button; - display: block; - text-align: center; - } - } - - a.draggable { - float: right; - opacity: .3; - } - - a { - color: #000; - } - } - } - - } - } - } - } - } - } -} diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index dceac4233d..33b312d235 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -1,39 +1,49 @@ +// studio - css architecture +// ==================== + +// bourbon libs and resets @import 'bourbon/bourbon'; @import 'bourbon/addons/button'; @import 'vendor/normalize'; -@import 'keyframes'; - @import 'reset'; -@import 'mixins'; -@import "fonts"; +// utilities +@import 'mixins'; @import "variables"; @import "cms_mixins"; -@import "extends"; + +// assets +@import "assets/fonts"; +@import "assets/graphics"; +@import 'assets/keyframes'; + +// base @import "base"; -@import "header"; -@import "footer"; -@import "dashboard"; -@import "courseware"; -@import "subsection"; -@import "unit"; -@import "assets"; -@import "static-pages"; -@import "users"; -@import "import"; -@import "export"; -@import "settings"; -@import "course-info"; -@import "landing"; -@import "graphics"; -@import "modal"; -@import "alerts"; -@import "login"; -@import "account"; -@import "index"; -@import 'jquery-ui-calendar'; -@import 'content-types'; +// elements +@import "elements/header"; +@import "elements/footer"; +@import "elements/navigation"; +@import "elements/modal"; +@import "elements/alerts"; +@import 'elements/jquery-ui-calendar'; -@import 'module/module-styles.scss'; -@import 'descriptor/module-styles.scss'; +// specific views +@import "views/account"; +@import "views/assets"; +@import "views/updates"; +@import "views/dashboard"; +@import "views/export"; +@import "views/index"; +@import "views/import"; +@import "views/outline"; +@import "views/settings"; +@import "views/static-pages"; +@import "views/subsection"; +@import "views/unit"; +@import "views/users"; + +@import 'assets/content-types'; + +@import 'xmodule/module/module-styles.scss'; +@import 'xmodule/descriptor/module-styles.scss'; diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 76d52ed930..3145745906 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -1,3 +1,6 @@ +// all - utilities - mixins and extends +// ==================== + // font-sizing @function em($pxval, $base: 16) { @return #{$pxval / $base}em; @@ -64,4 +67,88 @@ :-ms-input-placeholder { color: $color; } -} \ No newline at end of file +} + +// ==================== + +// extends - visual +.faded-hr-divider { + @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, + rgba(200,200,200, 1) 50%, + rgba(200,200,200, 0))); + height: 1px; + width: 100%; +} + +.faded-hr-divider-medium { + @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%, + rgba(240,240,240, 1) 50%, + rgba(240,240,240, 0))); + height: 1px; + width: 100%; +} + +.faded-hr-divider-light { + @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, + rgba(255,255,255, 0.8) 50%, + rgba(255,255,255, 0))); + height: 1px; + width: 100%; +} + +.faded-vertical-divider { + @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%, + rgba(200,200,200, 1) 50%, + rgba(200,200,200, 0))); + height: 100%; + width: 1px; +} + +.faded-vertical-divider-light { + @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, + rgba(255,255,255, 0.6) 50%, + rgba(255,255,255, 0))); + height: 100%; + width: 1px; +} + +.vertical-divider { + @extend .faded-vertical-divider; + position: relative; + + &::after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + position: absolute; + left: 1px; + } +} + +.horizontal-divider { + border: none; + @extend .faded-hr-divider; + position: relative; + + &::after { + @extend .faded-hr-divider-light; + content: ""; + display: block; + position: absolute; + top: 1px; + } +} + +.fade-right-hr-divider { + @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, + rgba(200,200,200, 1))); + border: none; +} + +.fade-left-hr-divider { + @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%, + rgba(200,200,200, 0))); + border: none; +} + +// extends - ui \ No newline at end of file From 6418d033ddfa5514baa2b1216555dbc5d2b62b1d Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 8 Mar 2013 12:20:40 -0500 Subject: [PATCH 02/17] studio - adding files I forgot to add when cleaning up Sass and originally committing --- cms/static/sass/assets/_content-types.scss | 69 ++ cms/static/sass/assets/_fonts.scss | 36 + cms/static/sass/assets/_graphics.scss | 336 ++++++++ cms/static/sass/assets/_keyframes.scss | 27 + cms/static/sass/elements/_alerts.scss | 165 ++++ cms/static/sass/elements/_footer.scss | 50 ++ cms/static/sass/elements/_header.scss | 558 +++++++++++++ .../sass/elements/_jquery-ui-calendar.scss | 56 ++ cms/static/sass/elements/_modal.scss | 72 ++ cms/static/sass/elements/_navigation.scss | 31 + cms/static/sass/views/_account.scss | 295 +++++++ cms/static/sass/views/_assets.scss | 189 +++++ cms/static/sass/views/_dashboard.scss | 117 +++ cms/static/sass/views/_export.scss | 126 +++ cms/static/sass/views/_import.scss | 105 +++ cms/static/sass/views/_index.scss | 355 +++++++++ cms/static/sass/views/_outline.scss | 691 ++++++++++++++++ cms/static/sass/views/_settings.scss | 741 ++++++++++++++++++ cms/static/sass/views/_static-pages.scss | 156 ++++ cms/static/sass/views/_subsection.scss | 298 +++++++ cms/static/sass/views/_unit.scss | 670 ++++++++++++++++ cms/static/sass/views/_updates.scss | 221 ++++++ cms/static/sass/views/_users.scss | 81 ++ 23 files changed, 5445 insertions(+) create mode 100644 cms/static/sass/assets/_content-types.scss create mode 100644 cms/static/sass/assets/_fonts.scss create mode 100644 cms/static/sass/assets/_graphics.scss create mode 100644 cms/static/sass/assets/_keyframes.scss create mode 100644 cms/static/sass/elements/_alerts.scss create mode 100644 cms/static/sass/elements/_footer.scss create mode 100644 cms/static/sass/elements/_header.scss create mode 100644 cms/static/sass/elements/_jquery-ui-calendar.scss create mode 100644 cms/static/sass/elements/_modal.scss create mode 100644 cms/static/sass/elements/_navigation.scss create mode 100644 cms/static/sass/views/_account.scss create mode 100644 cms/static/sass/views/_assets.scss create mode 100644 cms/static/sass/views/_dashboard.scss create mode 100644 cms/static/sass/views/_export.scss create mode 100644 cms/static/sass/views/_import.scss create mode 100644 cms/static/sass/views/_index.scss create mode 100644 cms/static/sass/views/_outline.scss create mode 100644 cms/static/sass/views/_settings.scss create mode 100644 cms/static/sass/views/_static-pages.scss create mode 100644 cms/static/sass/views/_subsection.scss create mode 100644 cms/static/sass/views/_unit.scss create mode 100644 cms/static/sass/views/_updates.scss create mode 100644 cms/static/sass/views/_users.scss diff --git a/cms/static/sass/assets/_content-types.scss b/cms/static/sass/assets/_content-types.scss new file mode 100644 index 0000000000..7cca469350 --- /dev/null +++ b/cms/static/sass/assets/_content-types.scss @@ -0,0 +1,69 @@ +.content-type { + display: inline-block; + width: 14px; + height: 16px; + padding-left: 14px; + background-position: 8px center; + background-repeat: no-repeat; + vertical-align: middle; +} + +.videosequence-icon { + @extend .content-type; + background-image: url('../img/content-types/videosequence.png'); +} + +.video-icon { + @extend .content-type; + background-image: url('../img/content-types/video.png'); +} + +.problemset-icon { + @extend .content-type; + background-image: url('../img/content-types/problemset.png'); +} + +.problem-icon { + @extend .content-type; + background-image: url('../img/content-types/problem.png'); +} + +.lab-icon { + @extend .content-type; + background-image: url('../img/content-types/lab.png'); +} + +.tab-icon { + @extend .content-type; + background-image: url('../img/content-types/lab.png'); +} + +.html-icon { + @extend .content-type; + background-image: url('../img/content-types/html.png'); +} + +.vertical-icon { + @extend .content-type; + background-image: url('../img/content-types/vertical.png'); +} + +.sequential-icon { + @extend .content-type; + background-image: url('../img/content-types/sequential.png'); +} + +.chapter-icon { + @extend .content-type; + background-image: url('../img/content-types/chapter.png'); +} + +.module-icon { + @extend .content-type; + background-image: url('../img/content-types/module.png'); +} + +.module-icon { + @extend .content-type; + background-image: url('../img/content-types/module.png'); +} diff --git a/cms/static/sass/assets/_fonts.scss b/cms/static/sass/assets/_fonts.scss new file mode 100644 index 0000000000..92a2e185b7 --- /dev/null +++ b/cms/static/sass/assets/_fonts.scss @@ -0,0 +1,36 @@ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 700; + src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 300; + src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff'); +} +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); +} diff --git a/cms/static/sass/assets/_graphics.scss b/cms/static/sass/assets/_graphics.scss new file mode 100644 index 0000000000..300cf3b692 --- /dev/null +++ b/cms/static/sass/assets/_graphics.scss @@ -0,0 +1,336 @@ +.expand-collapse-icon { + position: relative; + display: inline-block; + width: 9px; + height: 11px; + margin-right: 10px; + background: url(../img/expand-collapse-icons.png) no-repeat; + @include transition(none); + + &.expand { + top: 1px; + background-position: 0 0; + } + + &.collapse { + top: -1px; + background-position: 0 -11px; + } +} + +.sequence-icon { + display: inline-block; + width: 15px; + height: 9px; + margin-right: 5px; + background: url(../img/sequence-icon.png) no-repeat; +} + +.video-icon { + display: inline-block; + width: 14px; + height: 12px; + margin-right: 5px; + background: url(../img/video-icon.png) no-repeat; +} + +.upload-icon { + display: inline-block; + width: 22px; + height: 13px; + margin-right: 5px; + background: url(../img/upload-icon.png) no-repeat; +} + +.list-icon { + display: inline-block; + width: 14px; + height: 10px; + margin-right: 5px; + background: url(../img/list-icon.png) no-repeat; +} + +.close-icon { + display: inline-block; + width: 13px; + height: 12px; + background: url(../img/close-icon.png) no-repeat; +} + +.home-icon { + display: inline-block; + width: 19px; + height: 16px; + background: url(../img/home-icon.png) no-repeat; +} + +.small-home-icon { + display: inline-block; + width: 16px; + height: 14px; + background: url(../img/small-home-icon.png) no-repeat; +} + +.log-out-icon { + display: inline-block; + width: 15px; + height: 13px; + background: url(../img/log-out-icon.png) no-repeat; +} + +.collapse-all-icon { + display: inline-block; + width: 15px; + height: 9px; + background: url(../img/collapse-all-icon.png) no-repeat; +} + +.calendar-icon { + display: inline-block; + width: 12px; + height: 11px; + margin-right: 5px; + background: url(../img/calendar-icon.png) no-repeat; +} + +.edit-icon { + display: inline-block; + width: 12px; + height: 12px; + margin-right: 2px; + background: url(../img/edit-icon.png) no-repeat; + + &.white { + background: url(../img/edit-icon-white.png) no-repeat; + } +} + +.visibility-toggle { + .toggle-icon { + display: inline-block; + width: 27px; + height: 20px; + background: url(../img/small-toggle-icons.png) no-repeat; + background-position: 0 -34px; + } + + &.hidden .toggle-icon { + background-position: 0 -4px; + } + + &.both .toggle-icon { + background-position: 0 -64px; + } +} + + +.delete-icon { + display: inline-block; + width: 10px; + height: 11px; + margin-right: 2px; + background: url(../img/delete-icon.png) no-repeat; + + &.white { + background: url(../img/delete-icon-white.png) no-repeat; + } +} + +.drag-handle { + display: inline-block; + float: right; + width: 7px; + height: 22px; + margin-left: 10px; + background: url(../img/drag-handles.png) no-repeat; + cursor: move; +} + +.draft-tag, +.public-tag, +.private-tag { + margin-left: 3px; + font-size: 9px; + font-weight: 600; + text-transform: uppercase; + color: #a4aab7; +} + +.draft-tag { + color: #9f7d10; +} + +.plus-icon { + display: inline-block; + width: 11px; + height: 11px; + margin-right: 8px; + background: url(../img/plus-icon.png) no-repeat; + + &.white { + background: url(../img/plus-icon-white.png) no-repeat; + } +} + +.plus-icon-small { + display: inline-block; + width: 6px; + height: 6px; + margin-right: 8px; + background: url(../img/plus-icon-small.png) no-repeat center; +} + +.folder-icon { + display: inline-block; + width: 15px; + height: 11px; + margin-right: 4px; + background: url(../img/folder-icon.png) no-repeat; +} + +.new-folder-icon { + display: inline-block; + width: 23px; + height: 11px; + margin-right: 8px; + background: url(../img/new-folder-icon.png) no-repeat; +} + +.file-icon { + display: inline-block; + width: 10px; + height: 11px; + margin-right: 8px; + background: url(../img/file-icon.png) no-repeat; +} + +.new-unit-icon { + display: inline-block; + width: 23px; + height: 12px; + margin-right: 8px; + background: url(../img/new-unit-icon.png) right no-repeat; +} + +.new-policy-icon { + display: inline-block; + width: 23px; + height: 12px; + margin-right: 8px; + background: url(../img/new-unit-icon.png) right no-repeat; +} + +.textbook-icon { + display: inline-block; + width: 32px; + height: 32px; + margin-right: 8px; + vertical-align: middle; + background: url(../img/textbook-icon.png) no-repeat; +} + +.slides-icon { + display: inline-block; + width: 32px; + height: 32px; + margin-right: 8px; + vertical-align: middle; + background: url(../img/slides-icon.png) no-repeat; +} + +.large-slide-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-slide-icon.png) center no-repeat; +} + +.large-html-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/html-icon.png) center no-repeat; +} + +.large-openended-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-openended-icon.png) center no-repeat; +} + +.large-annotations-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-annotations-icon.png) center no-repeat; +} + +.large-advanced-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-advanced-icon.png) center no-repeat; +} + +.large-textbook-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-textbook-icon.png) center no-repeat; +} + +.large-discussion-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-discussion-icon.png) center no-repeat; +} + +.large-freeform-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-freeform-icon.png) center no-repeat; +} + +.large-problem-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-problem-icon.png) center no-repeat; +} + +.large-video-icon { + display: inline-block; + width: 100px; + height: 60px; + margin-right: 5px; + background: url(../img/large-video-icon.png) center no-repeat; +} + +.spinner-icon { + display: inline-block; + width: 20px; + height: 20px; + margin-left: 10px; + vertical-align: middle; + background: url(../img/blue-spinner.gif) no-repeat; +} + +.spinner-in-field-icon { + display: inline-block; + width: 14px; + height: 14px; + vertical-align: middle; + background: url(../img/spinner-in-field.gif) no-repeat; +} diff --git a/cms/static/sass/assets/_keyframes.scss b/cms/static/sass/assets/_keyframes.scss new file mode 100644 index 0000000000..7661f18980 --- /dev/null +++ b/cms/static/sass/assets/_keyframes.scss @@ -0,0 +1,27 @@ +@mixin bounce-in { + 0% { + opacity: 0; + @include transform(scale(.3)); + } + + 50% { + opacity: 1; + @include transform(scale(1.05)); + } + + 100% { + @include transform(scale(1)); + } +} + +@-moz-keyframes bounce-in { @include bounce-in(); } +@-webkit-keyframes bounce-in { @include bounce-in(); } +@-o-keyframes bounce-in { @include bounce-in(); } +@keyframes bounce-in { @include bounce-in();} + +@mixin bounce-in-animation($duration, $timing: ease-in-out) { + @include animation-name(bounce-in); + @include animation-duration($duration); + @include animation-timing-function($timing); + @include animation-fill-mode(both); +} diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_alerts.scss new file mode 100644 index 0000000000..9c15f811e0 --- /dev/null +++ b/cms/static/sass/elements/_alerts.scss @@ -0,0 +1,165 @@ +// studio - elements - alerts, notifications, prompts +// ==================== + +// notifications +.wrapper-notification { + @include clearfix(); + @include box-sizing(border-box); + @include transition (bottom 2.0s ease-in-out 5s); + @include box-shadow(0 -1px 2px rgba(0,0,0,0.1)); + position: fixed; + bottom: -100px; + z-index: 1000; + width: 100%; + overflow: hidden; + opacity: 0; + border-top: 1px solid $darkGrey; + padding: 20px 40px; + + &.is-shown { + bottom: 0; + opacity: 1.0; + } + + &.wrapper-notification-warning { + border-color: shade($yellow, 25%); + background: tint($yellow, 25%); + } + + &.wrapper-notification-error { + border-color: shade($red, 50%); + background: tint($red, 20%); + color: $white; + } + + &.wrapper-notification-confirm { + border-color: shade($green, 30%); + background: tint($green, 40%); + color: shade($green, 30%); + } +} + +.notification { + @include box-sizing(border-box); + margin: 0 auto; + width: flex-grid(12); + max-width: $fg-max-width; + min-width: $fg-min-width; + + .copy { + float: left; + width: flex-grid(9, 12); + margin-right: flex-gutter(); + margin-top: 5px; + font-size: 14px; + + .icon { + display: inline-block; + vertical-align: top; + margin-right: 5px; + font-size: 20px; + } + + p { + width: flex-grid(8, 9); + display: inline-block; + vertical-align: top; + } + } + + .actions { + float: right; + width: flex-grid(3, 12); + margin-top: ($baseline/2); + text-align: right; + + li { + display: inline-block; + vertical-align: middle; + margin-right: 10px; + + &:last-child { + margin-right: 0; + } + } + + .save-button { + @include blue-button; + } + + .cancel-button { + @include white-button; + } + } + + strong { + font-weight: 700; + } +} + +// adopted alerts +.alert { + padding: 15px 20px; + margin-bottom: 30px; + border-radius: 3px; + border: 1px solid #edbd3c; + border-radius: 3px; + background: #fbf6e1; + // background: #edbd3c; + font-size: 14px; + @include clearfix; + + .alert-message { + float: left; + margin-top: 4px; + } + + strong { + font-weight: 700; + } + + .alert-action { + float: right; + + &.secondary { + @include orange-button; + } + } +} + +body.error { + background: $darkGrey; + color: #3c3c3c; + + .primary-header { + display: none; + } + + .error-prompt { + width: 700px; + margin: 150px auto; + padding: 60px 50px 90px; + border-radius: 3px; + background: #fff; + text-align: center; + } + + h1 { + float: none; + margin: 0; + font-size: 60px; + font-weight: 300; + color: #3c3c3c; + } + + .description { + margin-bottom: 50px; + font-size: 21px; + } + + .back-button { + @include blue-button; + padding: 14px 40px 18px; + font-size: 18px; + } +} \ No newline at end of file diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss new file mode 100644 index 0000000000..2c32de4bb3 --- /dev/null +++ b/cms/static/sass/elements/_footer.scss @@ -0,0 +1,50 @@ +// studio - global footer +// ==================== + +.wrapper-footer { + margin: ($baseline*1.5) 0 $baseline 0; + padding: $baseline; + position: relative; + width: 100%; + + footer.primary { + @include clearfix(); + @include font-size(13); + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto; + padding-top: $baseline; + border-top: 1px solid $gray-l4; + color: $gray-l2; + + .colophon { + width: flex-grid(4, 12); + float: left; + margin-right: flex-gutter(2); + } + + .nav-peripheral { + width: flex-grid(6, 12); + float: right; + text-align: right; + + .nav-item { + display: inline-block; + margin-right: ($baseline/2); + + &:last-child { + margin-right: 0; + } + } + } + + a { + color: $gray-l1; + + &:hover, &:active { + color: $blue; + } + } + } +} \ No newline at end of file diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss new file mode 100644 index 0000000000..1e09184801 --- /dev/null +++ b/cms/static/sass/elements/_header.scss @@ -0,0 +1,558 @@ +// studio - global header +// ==================== + +.wrapper-header { + margin: 0 0 ($baseline*1.5) 0; + padding: $baseline; + border-bottom: 1px solid $gray; + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); + background: $white; + height: 76px; + position: relative; + width: 100%; + z-index: 10; + + a { + color: $baseFontColor; + display: block; + + &:hover, &:active { + color: $blue; + } + } + + header.primary { + @include clearfix(); + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto; + color: $gray-l1; + } +} + +// ==================== + +// basic layout +.wrapper-left, .wrapper-right { + @include box-sizing(border-box); +} + +.wrapper-left { + width: flex-grid(10, 12); + float: left; + margin-right: flex-gutter(); +} + +.wrapper-right { + width: flex-grid(2, 12); + float: right; +} + +// ==================== + +// specific elements - branding +.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch { + display: inline-block; + vertical-align: top; +} + +.branding { + position: relative; + margin: 0 ($baseline/2) 0 0; + padding-right: ($baseline*0.75); + + a { + @include text-hide(); + display: block; + width: 164px; + height: 32px; + background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat; + } +} + +// ==================== + +// specific elements - course name/info +.info-course { + @include font-size(14); + position: relative; + margin: -3px ($baseline/2) 0 0; + padding-right: ($baseline*0.75); + + &:before { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 1px; + top: -8px; + width: 1px; + } + + &:after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 0px; + top: -12px; + width: 1px; + } + + .course-org { + margin-right: ($baseline/4); + } + + .course-number, .course-org { + @include font-size(12); + display: inline-block; + } + + .course-title { + display: block; + width: 100%; + max-width: 220px; + overflow: hidden; + margin-top: -4px; + white-space: nowrap; + text-overflow: ellipsis; + @include font-size(16); + font-weight: 600; + } +} + +// ==================== + +// specific elements - course nav +.nav-course { + width: 335px; + margin-top: -($baseline/4); + @include font-size(14); + + > ol > .nav-item { + vertical-align: bottom; + margin: 0 ($baseline/2) 0 0; + + &:last-child { + margin-right: 0; + } + + .title { + display: block; + padding: 5px; + text-transform: uppercase; + font-weight: 600; + color: $gray-d3; + + .label-prefix { + display: block; + @include font-size(11); + font-weight: 400; + } + } + + // specific nav items + &.nav-course-courseware { + } + + &.nav-course-settings { + } + + &.nav-course-tools { + } + } +} + +// ==================== + +// specific elements - account-based nav +.nav-account { + width: 100%; + margin-top: ($baseline*0.75); + @include font-size(14); + text-align: right; + + .nav-account-username { + width: 100%; + + .icon-user { + display: inline-block; + vertical-align: middle; + margin-right: 3px; + @include font-size(12); + } + + .account-username { + display: inline-block; + vertical-align: middle; + width: 80%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .icon-expand { + display: inline-block; + vertical-align: middle; + } + } +} + +// ==================== + +// UI - dropdown +.nav-dropdown { + + .nav-item { + position: relative; + + .icon-expand { + @include font-size(14); + @include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out); + display: inline-block; + margin-left: 2px; + opacity: 0.5; + color: $gray-l2; + } + + &:hover { + + .icon-expand { + color: $blue; + opacity: 1.0; + } + } + } + + .wrapper-nav-sub { + position: absolute; + left: -7px; + top: 47px; + width: 140px; + opacity: 0; + pointer-events: none; + } + + .nav-sub { + @include border-radius(2px); + @include box-sizing(border-box); + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); + position: relative; + width: 100%; + border: 1px solid $gray-l2; + padding: ($baseline/4) ($baseline/2); + background: $white; + + &:after, &:before { + bottom: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #fff; + border-width: 5px; + right: 3px; + margin-left: -5px; + } + + &:before { + border-color: rgba(178, 178, 178, 0); + border-bottom-color: $gray-l2; + border-width: 6px; + right: 3px; + margin-left: -6px; + } + + .nav-item { + display: block; + margin: 0 0 ($baseline/4) 0; + border-bottom: 1px solid $gray-l5; + padding: 0 0($baseline/4) 0; + @include font-size(13); + + &:last-child { + margin-bottom: 0; + border-bottom: none; + padding-bottom: 0; + } + + a { + display: block; + } + } + } + + // UI - dropdown - specific navs + &.nav-account { + + .wrapper-nav-sub { + top: 27px; + left: auto; + right: -13px; + width: 110px; + } + + .nav-sub { + text-align: left; + + .icon-expand { + top: -2px; + } + } + + .nav-sub:after { + left: auto; + right: 11px; + } + + .nav-sub:before { + left: auto; + right: 10px; + } + } + + &.nav-course { + + .nav-course-courseware { + + .nav-sub:after { + left: 88px; + } + + .nav-sub:before { + left: 88px; + } + } + + .nav-course-settings { + + .nav-sub:after { + left: 88px; + } + + .nav-sub:before { + left: 88px; + } + } + + .nav-course-tools { + + .wrapper-nav-sub { + top: ($baseline*1.5); + width: 100px; + } + + .nav-sub:after { + left: 68px; + } + + .nav-sub:before { + left: 68px; + } + } + } +} + +// ==================== + +// STATE: is-signed in +.is-signedin { + + &.course .branding { + + &:before { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 1px; + top: -8px; + width: 1px; + } + + &:after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 50px; + position: absolute; + right: 0px; + top: -12px; + width: 1px; + } + } +} + +// ==================== + +// STATE: not signed in +.not-signedin { + + .wrapper-left { + width: flex-grid(4, 12); + } + + .wrapper-right { + width: flex-grid(8, 12); + } + + // STATE: not signed in - unauthenticated nav + .nav-not-signedin { + float: right; + margin-top: ($baseline/4); + + .nav-item { + @include font-size(16); + vertical-align: middle; + margin: 0 $baseline 0 0; + + &:last-child { + margin-right: 0; + } + + .action { + margin-top: -($baseline/4); + display: inline-block; + padding: ($baseline/4) ($baseline/2); + } + } + + // STATE: not signed in - specific items + .nav-not-signedin-help { + + } + + .nav-not-signedin-signup { + margin-right: ($baseline/2); + + .action-signup { + @include blue-button; + @include transition(all .15s); + @include font-size(14); + padding: ($baseline/4) ($baseline/2); + text-transform: uppercase; + font-weight: 600; + } + } + + .nav-not-signedin-signin { + + .action-signin { + @include white-button; + @include transition(all .15s); + @include font-size(14); + padding: ($baseline/4) ($baseline/2); + text-transform: uppercase; + font-weight: 600; + } + } + } +} + +// ==================== + +// STATE: active/current nav states + +.nav-item.is-current, +body.howitworks .nav-not-signedin-hiw, + +// dashboard +body.dashboard .nav-account-dashboard, + +// course content +body.course.outline .nav-course-courseware .title, +body.course.updates .nav-course-courseware .title, +body.course.pages .nav-course-courseware .title, +body.course.uploads .nav-course-courseware .title, + +body.course.outline .nav-course-courseware-outline, +body.course.updates .nav-course-courseware-updates, +body.course.pages .nav-course-courseware-pages, +body.course.uploads .nav-course-courseware-uploads, + +// course settings +body.course.schedule .nav-course-settings .title, +body.course.grading .nav-course-settings .title, +body.course.team .nav-course-settings .title, +body.course.advanced .nav-course-settings .title, + +body.course.schedule .nav-course-settings-schedule, +body.course.grading .nav-course-settings-grading, +body.course.team .nav-course-settings-team, +body.course.advanced .nav-course-settings-advanced, + +// course tools +body.course.import .nav-course-tools .title, +body.course.export .nav-course-tools .title, + +body.course.import .nav-course-tools-import, +body.course.export .nav-course-tools-export, + +{ + + color: $blue; + + a { + color: $blue; + pointer-events: none; + } +} + +body.signup .nav-not-signedin-signin { + + a { + background-color: #d9e3ee; + color: #6d788b; + } +} + +body.signin .nav-not-signedin-signup { + + a { + background-color: #62aaf5; + color: #fff; + } +} + +// ==================== + +// STATE: js enabled +.js { + + .nav-dropdown { + + .nav-item .title { + outline: 0; + cursor: pointer; + + &:hover, &:active, &.is-selected { + color: $blue; + + .icon-expand { + color: $blue; + } + } + } + } + + .wrapper-nav-sub { + @include transition (opacity 1.0s ease-in-out 0s); + opacity: 0; + pointer-events: none; + + &.is-shown { + opacity: 1.0; + pointer-events: auto; + } + } +} \ No newline at end of file diff --git a/cms/static/sass/elements/_jquery-ui-calendar.scss b/cms/static/sass/elements/_jquery-ui-calendar.scss new file mode 100644 index 0000000000..3d20bde642 --- /dev/null +++ b/cms/static/sass/elements/_jquery-ui-calendar.scss @@ -0,0 +1,56 @@ +// studio - elements - JQUI calendar +// ==================== + +.ui-datepicker { + border-color: $darkGrey; + border-radius: 2px; + background: #fff; + font-family: $sans-serif; + font-size: 12px; + @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1)); + + .ui-widget-header { + background: $darkGrey; + border: none; + border-radius: 2px; + } + + .ui-datepicker-next, + .ui-datepicker-prev { + @include transition(none); + + &.ui-state-hover { + border-color: transparent; + background: $mediumGrey; + + .ui-icon-circle-triangle-e, + .ui-icon-circle-triangle-w { + background-image: url(../css/vendor/ui-lightness/images/ui-icons_ffffff_256x240.png); + } + } + } + + .ui-state-default { + border-color: $mediumGrey; + color: $blue; + @include transition(none); + + &.ui-state-hover { + background: $orange; + border-color: $orange; + color: #fff; + } + } + + .ui-state-highlight { + background: $blue; + border-color: $blue; + color: #fff; + } + + .ui-state-active { + background: $orange; + border-color: $orange; + color: #fff; + } +} \ No newline at end of file diff --git a/cms/static/sass/elements/_modal.scss b/cms/static/sass/elements/_modal.scss new file mode 100644 index 0000000000..b81baf4565 --- /dev/null +++ b/cms/static/sass/elements/_modal.scss @@ -0,0 +1,72 @@ +// studio - elements - modal windows +// ==================== + +.modal-cover { + display: none; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, .8); +} + +.modal { + display: none; + position: fixed; + top: 60px; + left: 50%; + z-index: 1001; + width: 930px; + height: 540px; + margin-left: -465px; + background: #fff; + + .modal-body { + height: 400px; + padding: 40px; + overflow-y: scroll; + } + + .modal-actions { + height: 60px; + @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); + background-color: #d1dae3; + } + + h2 { + margin: 0 10px 30px; + color: #646464; + font-size: 19px; + font-weight: 300; + letter-spacing: 1px; + text-transform: uppercase; + } + + p { + margin: 20px; + } + + .revert-button { + @include blue-button; + margin: 13px 6px 0 13px; + } + + .close-button { + @include white-button; + margin-top: 13px; + } +} + +// lean modal alternative +#lean_overlay { + position: fixed; + z-index: 10000; + top: 0px; + left: 0px; + display: none; + height: 100%; + width: 100%; + background: $black; +} \ No newline at end of file diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss new file mode 100644 index 0000000000..8c123db64f --- /dev/null +++ b/cms/static/sass/elements/_navigation.scss @@ -0,0 +1,31 @@ +// studio - elements - navigation +// ==================== + +// common + +// ==================== + +// primary +nav.primary { + + .nav-item { + display: inline-block; + } +} + + +// ==================== + +// right hand side + +// ==================== + +// tabs + +// ==================== + +// dropdown + +// ==================== + +// \ No newline at end of file diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss new file mode 100644 index 0000000000..1206db5e76 --- /dev/null +++ b/cms/static/sass/views/_account.scss @@ -0,0 +1,295 @@ +// studio - views - sign up/in +// ==================== + +body.signup, body.signin { + + .wrapper-content { + margin: 0; + padding: 0 $baseline; + position: relative; + width: 100%; + } + + .content { + @include clearfix(); + @include font-size(16); + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto; + color: $gray-d2; + + header { + position: relative; + margin-bottom: $baseline; + border-bottom: 1px solid $gray-l4; + padding-bottom: ($baseline/2); + + h1 { + @include font-size(32); + margin: 0; + padding: 0; + font-weight: 600; + } + + .action { + @include font-size(13); + position: absolute; + right: 0; + top: 40%; + } + } + + .introduction { + @include font-size(14); + margin: 0 0 $baseline 0; + } + } + + .content-primary, .content-supplementary { + @include box-sizing(border-box); + float: left; + } + + .content-primary { + width: flex-grid(8, 12); + margin-right: flex-gutter(); + + form { + @include box-sizing(border-box); + @include box-shadow(0 1px 2px $shadow-l1); + @include border-radius(2px); + width: 100%; + border: 1px solid $gray-l2; + padding: $baseline ($baseline*1.5); + background: $white; + + .form-actions { + margin-top: $baseline; + + .action-primary { + @include blue-button; + @include transition(all .15s); + @include font-size(15); + display:block; + width: 100%; + padding: ($baseline*0.75) ($baseline/2); + font-weight: 600; + text-transform: uppercase; + } + } + + .list-input { + margin: 0; + padding: 0; + list-style: none; + + .field { + margin: 0 0 ($baseline*0.75) 0; + + &:last-child { + margin-bottom: 0; + } + + &.required { + + label { + font-weight: 600; + } + + label:after { + margin-left: ($baseline/4); + content: "*"; + } + } + + label, input, textarea { + display: block; + } + + label { + @include font-size(14); + @include transition(color, 0.15s, ease-in-out); + margin: 0 0 ($baseline/4) 0; + + &.is-focused { + color: $blue; + } + } + + input, textarea { + @include font-size(16); + height: 100%; + width: 100%; + padding: ($baseline/2); + + &.long { + width: 100%; + } + + &.short { + width: 25%; + } + + ::-webkit-input-placeholder { + color: $gray-l4; + } + + :-moz-placeholder { + color: $gray-l3; + } + + ::-moz-placeholder { + color: $gray-l3; + } + + :-ms-input-placeholder { + color: $gray-l3; + } + + &:focus { + + + .tip { + color: $gray; + } + } + } + + textarea.long { + height: ($baseline*5); + } + + input[type="checkbox"] { + display: inline-block; + margin-right: ($baseline/4); + width: auto; + height: auto; + + & + label { + display: inline-block; + } + } + + .tip { + @include transition(color, 0.15s, ease-in-out); + @include font-size(13); + display: block; + margin-top: ($baseline/4); + color: $gray-l3; + } + } + + .field-group { + @include clearfix(); + margin: 0 0 ($baseline/2) 0; + + .field { + display: block; + width: 47%; + border-bottom: none; + margin: 0 $baseline 0 0; + padding-bottom: 0; + + &:nth-child(odd) { + float: left; + } + + &:nth-child(even) { + float: right; + margin-right: 0; + } + + input, textarea { + width: 100%; + } + } + } + } + } + } + + .content-supplementary { + width: flex-grid(4, 12); + + .bit { + @include font-size(13); + margin: 0 0 $baseline 0; + border-bottom: 1px solid $gray-l4; + padding: 0 0 $baseline 0; + color: $gray-l1; + + &:last-child { + margin-bottom: 0; + border: none; + padding-bottom: 0; + } + + h3 { + @include font-size(14); + margin: 0 0 ($baseline/4) 0; + color: $gray-d2; + font-weight: 600; + } + + } + } +} + +.signup { + +} + +.signin { + + #field-password { + position: relative; + + .action-forgotpassword { + @include font-size(13); + position: absolute; + top: 0; + right: 0; + } + } +} + +// ==================== + +// messages +.message { + @include font-size(14); + display: block; +} + +.message-status { + display: none; + @include border-top-radius(2px); + @include box-sizing(border-box); + border-bottom: 2px solid $yellow-d2; + margin: 0 0 $baseline 0; + padding: ($baseline/2) $baseline; + font-weight: 500; + background: $yellow-d1; + color: $white; + + .ss-icon { + position: relative; + top: 3px; + @include font-size(16); + display: inline-block; + margin-right: ($baseline/2); + } + + .text { + display: inline-block; + } + + &.error { + border-color: shade($red, 50%); + background: tint($red, 20%); + } + + &.is-shown { + display: block; + } +} diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss new file mode 100644 index 0000000000..2c1b435c44 --- /dev/null +++ b/cms/static/sass/views/_assets.scss @@ -0,0 +1,189 @@ +// studio - views - assets +// ==================== + +.uploads { + input.asset-search-input { + float: left; + width: 260px; + background-color: #fff; + } + + .asset-library { + @include clearfix; + + table { + width: 100%; + border-radius: 3px 3px 0 0; + border: 1px solid #c5cad4; + + td, + th { + padding: 10px 20px; + text-align: left; + vertical-align: middle; + } + + thead th { + @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); + background-color: #ced2db; + font-size: 12px; + font-weight: 700; + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + } + + tbody { + background: #fff; + + tr { + border-top: 1px solid #c5cad4; + + &:first-child { + border-top: none; + } + } + + .name-col { + font-size: 14px; + } + + .date-col { + font-size: 12px; + } + } + + .thumb-col { + width: 100px; + } + + .date-col { + width: 220px; + } + + .embed-col { + width: 250px; + } + + .embeddable-xml-input { + @include box-shadow(none); + width: 100%; + } + + .thumb { + width: 100px; + max-height: 80px; + + img { + width: 100%; + } + } + } + + .pagination { + float: right; + margin: 15px 10px; + + ol, li { + display: inline; + } + + a { + display: inline-block; + height: 25px; + padding: 0 4px; + text-align: center; + line-height: 25px; + } + } + } + .show-xml { + @include blue-button; + } +} + +.upload-modal { + display: none; + width: 640px !important; + margin-left: -320px !important; + + .modal-body { + height: auto !important; + overflow-y: auto !important; + text-align: center; + } + + .file-input { + display: none; + } + + .choose-file-button { + @include blue-button; + padding: 10px 82px 12px; + font-size: 17px; + } + + .progress-bar { + display: none; + width: 350px; + height: 50px; + margin: 30px auto 10px; + border: 1px solid $blue; + + &.loaded { + border-color: #66b93d; + + .progress-fill { + background: #66b93d; + } + } + } + + .progress-fill { + width: 0%; + height: 50px; + background: $blue; + color: #fff; + line-height: 48px; + } + + h1 { + float: none; + margin: 40px 0 30px; + font-size: 34px; + font-weight: 300; + } + + .close-button { + @include white-button; + position: absolute; + top: 0; + right: 15px; + width: 29px; + height: 29px; + padding: 0 !important; + border-radius: 17px !important; + line-height: 29px; + text-align: center; + } + + .embeddable { + display: none; + margin: 30px 0 130px; + + label { + display: block; + margin-bottom: 10px; + font-weight: 700; + } + } + + .embeddable-xml-input { + @include box-shadow(none); + width: 400px; + } + + .copy-button { + @include white-button; + display: none; + margin-bottom: 100px; + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss new file mode 100644 index 0000000000..2a995ffdc7 --- /dev/null +++ b/cms/static/sass/views/_dashboard.scss @@ -0,0 +1,117 @@ +// studio - views - user dashboard +// ==================== + +.class-list { + margin-top: 20px; + border-radius: 3px; + border: 1px solid $darkGrey; + background: #fff; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); + + li { + position: relative; + border-bottom: 1px solid $mediumGrey; + + &:last-child { + border-bottom: none; + } + + .class-link { + z-index: 100; + display: block; + padding: 20px 25px; + line-height: 1.3; + + &:hover { + background: $paleYellow; + + + .view-live-button { + opacity: 1.0; + pointer-events: auto; + } + } + } + } + + .class-name { + display: block; + font-size: 19px; + font-weight: 300; + } + + .detail { + font-size: 14px; + font-weight: 400; + margin-right: 20px; + color: #3c3c3c; + } + + // view live button + .view-live-button { + z-index: 10000; + position: absolute; + top: 15px; + right: $baseline; + padding: ($baseline/4) ($baseline/2); + opacity: 0; + pointer-events: none; + + &:hover { + opacity: 1.0; + pointer-events: auto; + } + } +} + +.new-course { + padding: 15px 25px; + margin-top: 20px; + border-radius: 3px; + border: 1px solid $darkGrey; + background: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, .1); + @include clearfix; + + .row { + margin-bottom: 15px; + @include clearfix; + } + + .column { + float: left; + width: 48%; + } + + .column:first-child { + margin-right: 4%; + } + + .course-info { + width: 600px; + } + + label { + display: block; + font-size: 13px; + font-weight: 700; + } + + .new-course-org, + .new-course-number, + .new-course-name { + width: 100%; + } + + .new-course-name { + font-size: 19px; + font-weight: 300; + } + + .new-course-save { + @include blue-button; + } + + .new-course-cancel { + @include white-button; + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss new file mode 100644 index 0000000000..27cb7f923b --- /dev/null +++ b/cms/static/sass/views/_export.scss @@ -0,0 +1,126 @@ +// studio - views - course export +// ==================== + +.export { + .export-overview { + @extend .window; + @include clearfix; + padding: 30px 40px; + } + + .description { + float: left; + width: 62%; + margin-right: 3%; + font-size: 14px; + + h2 { + font-weight: 700; + font-size: 19px; + margin-bottom: 20px; + } + + strong { + font-weight: 700; + } + + p + p { + margin-top: 20px; + } + + ul { + margin: 20px 0; + list-style: disc inside; + + li { + margin: 0 0 5px 0; + } + } + } + + .export-form-wrapper { + + .export-form { + float: left; + width: 35%; + padding: 25px 30px 35px; + @include box-sizing(border-box); + border: 1px solid $mediumGrey; + border-radius: 3px; + background: $lightGrey; + text-align: center; + + h2 { + margin-bottom: 30px; + font-size: 26px; + font-weight: 300; + } + + .error-block { + display: none; + margin-bottom: 15px; + font-size: 13px; + } + + .error-block { + color: $error-red; + } + + .button-export { + @include green-button; + padding: 10px 50px 11px; + font-size: 17px; + } + + .message-status { + margin-top: 10px; + font-size: 12px; + } + + .progress-bar { + display: none; + width: 350px; + height: 30px; + margin: 30px auto 10px; + border: 1px solid $blue; + + &.loaded { + border-color: #66b93d; + + .progress-fill { + background: #66b93d; + } + } + } + + .progress-fill { + width: 0%; + height: 30px; + background: $blue; + color: #fff; + line-height: 48px; + } + } + + // downloading state + &.is-downloading { + + .progress-bar { + display: block; + } + + .button-export { + padding: 10px 50px 11px; + font-size: 17px; + + &.disabled { + + pointer-events: none; + cursor: default; + } + } + } + } + + +} \ No newline at end of file diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss new file mode 100644 index 0000000000..fe7d65626b --- /dev/null +++ b/cms/static/sass/views/_import.scss @@ -0,0 +1,105 @@ +// studio - views - course import +// ==================== + +.import { + .import-overview { + @extend .window; + @include clearfix; + padding: 30px 40px; + } + + .description { + float: left; + width: 62%; + margin-right: 3%; + font-size: 14px; + + h2 { + font-weight: 700; + font-size: 19px; + margin-bottom: 20px; + } + + strong { + font-weight: 700; + } + + p + p { + margin-top: 20px; + } + } + + .import-form { + float: left; + width: 35%; + padding: 25px 30px 35px; + @include box-sizing(border-box); + border: 1px solid $mediumGrey; + border-radius: 3px; + background: $lightGrey; + text-align: center; + + h2 { + margin-bottom: 30px; + font-size: 26px; + font-weight: 300; + } + + .file-name-block, + .error-block { + display: none; + margin-bottom: 15px; + font-size: 13px; + } + + .error-block { + color: $error-red; + } + + .choose-file-button { + @include blue-button; + padding: 10px 50px 11px; + font-size: 17px; + } + + .choose-file-button-inline { + display: block; + } + + .file-input { + display: none; + } + + .submit-button { + @include orange-button; + display: none; + max-width: 100%; + padding: 8px 20px 10px; + white-space: normal; + } + } + + .progress-bar { + display: none; + width: 350px; + height: 30px; + margin: 30px auto 10px; + border: 1px solid $blue; + + &.loaded { + border-color: #66b93d; + + .progress-fill { + background: #66b93d; + } + } + } + + .progress-fill { + width: 0%; + height: 30px; + background: $blue; + color: #fff; + line-height: 48px; + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss new file mode 100644 index 0000000000..8d81ea33fd --- /dev/null +++ b/cms/static/sass/views/_index.scss @@ -0,0 +1,355 @@ +// studio - views - how it works +// ==================== + +.index { + + &.not-signedin { + + .wrapper-header { + margin-bottom: 0; + } + + .wrapper-footer { + margin: 0; + border-top: 2px solid $gray-l3; + + footer.primary { + border: none; + margin-top: 0; + padding-top: 0; + } + } + + .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta { + @include box-sizing(border-box); + margin: 0; + padding: 0 $baseline; + position: relative; + width: 100%; + } + + .content { + @include clearfix(); + @include font-size(16); + max-width: $fg-max-width; + min-width: $fg-min-width; + width: flex-grid(12); + margin: 0 auto; + color: $gray-d2; + + header { + border: none; + padding-bottom: 0; + margin-bottom: 0; + } + + h1, h2, h3, h4, h5, h6 { + color: $gray-d3; + } + + h2 { + + } + + h3 { + + } + + h4 { + + } + } + + // welcome content + .wrapper-content-header { + @include linear-gradient($blue-l1,$blue,$blue-d1); + padding-bottom: ($baseline*4); + padding-top: ($baseline*4); + } + + .content-header { + position: relative; + text-align: center; + color: $white; + + h1 { + @include font-size(52); + float: none; + margin: 0 0 ($baseline/2) 0; + border-bottom: 1px solid $blue-l1; + padding: 0; + font-weight: 500; + color: $white; + } + + .logo { + @include text-hide(); + position: relative; + top: 3px; + display: inline-block; + vertical-align: baseline; + width: 282px; + height: 57px; + background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat; + } + + .tagline { + @include font-size(24); + margin: 0; + color: $blue-l3; + } + } + + .arrow_box { + position: relative; + background: #fff; + border: 4px solid #000; + } + .arrow_box:after, .arrow_box:before { + top: 100%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .arrow_box:after { + border-color: rgba(255, 255, 255, 0); + border-top-color: #fff; + border-width: 30px; + left: 50%; + margin-left: -30px; + } + .arrow_box:before { + border-color: rgba(0, 0, 0, 0); + border-top-color: #000; + border-width: 36px; + left: 50%; + margin-left: -36px; + } + + // feature content + .wrapper-content-features { + @include box-shadow(0 -1px ($baseline/4) $shadow); + padding-bottom: ($baseline*2); + padding-top: ($baseline*3); + background: $white; + } + + .content-features { + + .list-features { + + } + + // indiv features + .feature { + @include clearfix(); + margin: 0 0 ($baseline*2) 0; + border-bottom: 1px solid $gray-l4; + padding: 0 0 ($baseline*2) 0; + + .img { + @include box-sizing(border-box); + float: left; + width: flex-grid(3, 12); + margin-right: flex-gutter(); + + a { + @include box-sizing(border-box); + @include box-shadow(0 1px ($baseline/10) $shadow-l1); + position: relative; + top: 0; + display: block; + overflow: hidden; + border: 1px solid $gray-l3; + padding: ($baseline/4); + background: $white; + + .action-zoom { + @include transition(bottom .50s ease-in-out); + position: absolute; + bottom: -30px; + right: ($baseline/2); + opacity: 0; + + .ss-icon { + @include font-size(18); + @include border-top-radius(3px); + display: inline-block; + padding: ($baseline/4) ($baseline/2); + background: $blue; + color: $white; + text-align: center; + } + } + + &:hover { + border-color: $blue; + + .action-zoom { + opacity: 1.0; + bottom: -2px; + } + } + } + + img { + display: block; + width: 100%; + height: 100%; + } + } + + .copy { + float: left; + width: flex-grid(9, 12); + margin-top: -($baseline/4); + + h3 { + margin: 0 0 ($baseline/2) 0; + @include font-size(24); + font-weight: 600; + } + + > p { + @include font-size(18); + color: $gray-d1; + } + + strong { + color: $gray-d2; + font-weight: 500; + } + + .list-proofpoints { + @include clearfix(); + @include font-size(14); + width: flex-grid(9, 9); + margin: ($baseline*1.5) 0 0 0; + + .proofpoint { + @include box-sizing(border-box); + @include border-radius(($baseline/4)); + @include transition(color .50s ease-in-out); + position: relative; + top: 0; + float: left; + width: flex-grid(3, 9); + min-height: ($baseline*8); + margin-right: flex-gutter(); + padding: ($baseline*0.75) $baseline; + color: $gray-l1; + + .title { + @include font-size(16); + margin: 0 0 ($baseline/4) 0; + font-weight: 500; + color: $gray-d3; + } + + &:hover { + @include box-shadow(0 1px ($baseline/10) $shadow-l1); + background: $blue-l5; + top: -($baseline/5); + + .title { + color: $blue; + } + } + + &:last-child { + margin-right: 0; + } + } + } + } + + + &:last-child { + margin-bottom: 0; + border: none; + padding-bottom: 0; + } + + &:nth-child(even) { + + .img { + float: right; + margin-right: 0; + margin-left: flex-gutter(); + } + + .copy { + float: right; + text-align: right; + } + + .list-proofpoints { + + .proofpoint { + float: right; + width: flex-grid(3, 9); + margin-left: flex-gutter(); + margin-right: 0; + + &:last-child { + margin-left: 0; + } + } + } + } + } + } + + // call to action content + .wrapper-content-cta { + padding-bottom: ($baseline*2); + padding-top: ($baseline*2); + background: $white; + } + + .content-cta { + border-top: 1px solid $gray-l4; + + header { + border: none; + margin: 0; + padding: 0; + } + + .list-actions { + position: relative; + margin-top: -($baseline*1.5); + + li { + width: flex-grid(6, 12); + margin: 0 auto; + } + + .action { + display: block; + width: 100%; + text-align: center; + } + + .action-primary { + @include blue-button; + @include transition(all .15s); + @include font-size(18); + padding: ($baseline*0.75) ($baseline/2); + font-weight: 600; + text-align: center; + text-transform: uppercase; + } + + .action-secondary { + @include font-size(14); + margin-top: ($baseline/2); + } + } + } + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss new file mode 100644 index 0000000000..2957b57849 --- /dev/null +++ b/cms/static/sass/views/_outline.scss @@ -0,0 +1,691 @@ +// studio - views - course outline +// ==================== + +input.courseware-unit-search-input { + float: left; + width: 260px; + background-color: #fff; +} + +.branch { + + .section-item { + @include clearfix(); + + .details { + display: block; + float: left; + margin-bottom: 0; + width: 650px; + } + + .gradable-status { + float: right; + position: relative; + top: -4px; + right: 50px; + width: 145px; + + .status-label { + position: absolute; + top: 2px; + right: -5px; + display: none; + width: 110px; + padding: 5px 40px 5px 10px; + @include border-radius(3px); + color: $lightGrey; + text-align: right; + font-size: 12px; + font-weight: bold; + line-height: 16px; + } + + .menu-toggle { + z-index: 10; + position: absolute; + top: 0; + right: 5px; + padding: 5px; + color: $mediumGrey; + + &:hover, &.is-active { + color: $blue; + } + } + + .menu { + z-index: 1; + display: none; + opacity: 0.0; + position: absolute; + top: -1px; + left: 5px; + margin: 0; + padding: 8px 12px; + background: $white; + border: 1px solid $mediumGrey; + font-size: 12px; + @include border-radius(4px); + @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); + @include transition(opacity .15s); + + + li { + width: 115px; + margin-bottom: 3px; + padding-bottom: 3px; + border-bottom: 1px solid $lightGrey; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border: none; + + a { + color: $darkGrey; + } + } + } + + a { + color: $blue; + + &.is-selected { + font-weight: bold; + } + } + } + + // dropdown state + &.is-active { + + .menu { + z-index: 1000; + display: block; + opacity: 1.0; + } + + .menu-toggle { + z-index: 10000; + } + } + + // set state + &.is-set { + + .menu-toggle { + color: $blue; + } + + .status-label { + display: block; + color: $blue; + } + } + } + } + } + + +.courseware-section { + position: relative; + background: #fff; + border-radius: 3px; + border: 1px solid $mediumGrey; + margin-top: 15px; + padding-bottom: 12px; + @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); + + &:first-child { + margin-top: 0; + } + + &.collapsed { + padding-bottom: 0; + } + + label { + float: left; + line-height: 29px; + } + + .datepair { + float: left; + margin-left: 10px; + } + + .section-published-date { + position: absolute; + top: 19px; + right: 90px; + padding: 4px 10px; + border-radius: 3px; + background: $lightGrey; + text-align: right; + + .published-status { + font-size: 12px; + margin-right: 15px; + + strong { + font-weight: bold; + } + } + + .schedule-button { + @include blue-button; + } + + .edit-button { + @include blue-button; + } + + .schedule-button, + .edit-button { + font-size: 11px; + padding: 3px 15px 5px; + } + } + + .datepair .date, + .datepair .time { + padding-left: 0; + padding-right: 0; + border: none; + background: none; + @include box-shadow(none); + font-size: 13px; + font-weight: bold; + color: $blue; + cursor: pointer; + } + + .datepair .date { + width: 80px; + } + + .datepair .time { + width: 65px; + } + + &.collapsed .subsection-list, + .collapsed .subsection-list, + .collapsed > ol { + display: none !important; + } + + header { + min-height: 75px; + @include clearfix(); + + .item-details, .section-published-date { + + } + + .item-details { + display: inline-block; + padding: 20px 0 10px 0; + @include clearfix(); + + .section-name { + float: left; + margin-right: 10px; + width: 350px; + font-size: 19px; + font-weight: bold; + color: $blue; + } + + .section-name-span { + cursor: pointer; + @include transition(color .15s); + + &:hover { + color: $orange; + } + } + + .section-name-edit { + position: relative; + width: 400px; + background: $white; + + input { + font-size: 16px; + } + + .save-button { + @include blue-button; + padding: 7px 20px 7px; + margin-right: 5px; + } + + .cancel-button { + @include white-button; + padding: 7px 20px 7px; + } + } + + .section-published-date { + float: right; + width: 265px; + margin-right: 220px; + @include border-radius(3px); + background: $lightGrey; + + .published-status { + font-size: 12px; + margin-right: 15px; + + strong { + font-weight: bold; + } + } + + .schedule-button { + @include blue-button; + } + + .edit-button { + @include blue-button; + } + + .schedule-button, + .edit-button { + font-size: 11px; + padding: 3px 15px 5px; + + } + } + + .gradable-status { + position: absolute; + top: 20px; + right: 70px; + width: 145px; + + .status-label { + position: absolute; + top: 0; + right: 2px; + display: none; + width: 100px; + padding: 10px 35px 10px 10px; + @include border-radius(3px); + background: $lightGrey; + color: $lightGrey; + text-align: right; + font-size: 12px; + font-weight: bold; + line-height: 16px; + } + + .menu-toggle { + z-index: 10; + position: absolute; + top: 2px; + right: 5px; + padding: 5px; + color: $lightGrey; + + &:hover, &.is-active { + color: $blue; + } + } + + .menu { + z-index: 1; + display: none; + opacity: 0.0; + position: absolute; + top: -1px; + left: 2px; + margin: 0; + padding: 8px 12px; + background: $white; + border: 1px solid $mediumGrey; + font-size: 12px; + @include border-radius(4px); + @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); + @include transition(opacity .15s); + @include transition(display .15s); + + + li { + width: 115px; + margin-bottom: 3px; + padding-bottom: 3px; + border-bottom: 1px solid $lightGrey; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border: none; + + a { + color: $darkGrey; + } + } + } + + a { + + &.is-selected { + font-weight: bold; + } + } + } + + // dropdown state + &.is-active { + + .menu { + z-index: 1000; + display: block; + opacity: 1.0; + } + + + .menu-toggle { + z-index: 10000; + } + } + + // set state + &.is-set { + + .menu-toggle { + color: $blue; + } + + .status-label { + display: block; + color: $blue; + } + } + + float: left; + padding: 21px 0 0; + } + } + + .item-actions { + margin-top: 21px; + margin-right: 12px; + + .edit-button, + .delete-button { + margin-top: -3px; + } + } + + .expand-collapse-icon { + float: left; + margin: 29px 6px 16px 16px; + @include transition(none); + + &.expand { + background-position: 0 0; + } + + &.collapsed { + + } + } + + .drag-handle { + margin-left: 11px; + } + } + + h3 { + font-size: 19px; + font-weight: 700; + color: $blue; + } + + .section-name-span { + cursor: pointer; + @include transition(color .15s); + + &:hover { + color: $orange; + } + } + + .section-name-form { + margin-bottom: 15px; + } + + .section-name-edit { + input { + font-size: 16px; + } + + .save-button { + @include blue-button; + padding: 7px 20px 7px; + margin-right: 5px; + } + + .cancel-button { + @include white-button; + padding: 7px 20px 7px; + } + } + + h4 { + font-size: 12px; + color: #878e9d; + + strong { + font-weight: bold; + } + } + + .list-header { + @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); + background-color: #ced2db; + border-radius: 3px 3px 0 0; + } + + .subsection-list { + margin: 0 12px; + + > ol { + @include tree-view; + border-top-width: 0; + } + } + + &.new-section { + + header { + height: auto; + @include clearfix(); + } + + .expand-collapse-icon { + visibility: hidden; + } + + .item-details { + padding: 25px 0 0 0; + + .section-name { + float: none; + width: 100%; + } + } + } +} + +.toggle-button-sections { + display: none; + position: relative; + float: right; + margin-top: 10px; + + font-size: 13px; + color: $darkGrey; + + &.is-shown { + display: block; + } + + .ss-icon { + @include border-radius(20px); + position: relative; + top: -1px; + display: inline-block; + margin-right: 2px; + line-height: 5px; + font-size: 11px; + } + + .label { + display: inline-block; + } +} + +.new-section-name, +.new-subsection-name-input { + width: 515px; +} + +.new-section-name-save, +.new-subsection-name-save { + @include blue-button; + padding: 4px 20px 7px; + margin: 0 5px; + color: #fff !important; +} + +.new-section-name-cancel, +.new-subsection-name-cancel { + @include white-button; + padding: 4px 20px 7px; + color: #8891a1 !important; +} + +.dummy-calendar { + display: none; + position: absolute; + top: 55px; + left: 110px; + z-index: 9999; + border: 1px solid #3C3C3C; + @include box-shadow(0 1px 15px rgba(0, 0, 0, .2)); +} + +.unit-name-input { + padding: 20px 40px; + + label { + display: block; + } + + input { + width: 100%; + font-size: 20px; + } +} + +.preview { + background: url(../img/preview.jpg) center top no-repeat; +} + +.edit-subsection-publish-settings { + display: none; + position: fixed; + top: 100px; + left: 50%; + z-index: 99999; + width: 600px; + margin-left: -300px; + background: #fff; + text-align: center; + + .settings { + padding: 40px; + } + + h3 { + font-size: 34px; + font-weight: 300; + } + + .picker { + margin: 30px 0 65px; + } + + .description { + margin-top: 30px; + font-size: 14px; + line-height: 20px; + } + + strong { + font-weight: 700; + } + + .start-date, + .start-time { + font-size: 19px; + } + + .save-button { + @include blue-button; + margin-right: 10px; + } + + .cancel-button { + @include white-button; + } + + .save-button, + .cancel-button { + font-size: 16px; + } +} + +.collapse-all-button { + float: right; + margin-top: 10px; + font-size: 13px; + color: $darkGrey; +} + +// sort/drag and drop +.ui-droppable { + @include transition (padding 0.5s ease-in-out 0s); + min-height: 20px; + padding: 0; + + &.dropover { + padding: 15px 0; + } +} + +.ui-draggable-dragging { + @include box-shadow(0 1px 2px rgba(0, 0, 0, .3)); + border: 1px solid $darkGrey; + opacity : 0.2; + &:hover { + opacity : 1.0; + .section-item { + background: $yellow !important; + } + } + + // hiding unit button - temporary fix until this semantically corrected + .new-unit-item { + display: none; + } +} + +ol.ui-droppable .branch:first-child .section-item { + border-top: none; +} + diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss new file mode 100644 index 0000000000..8fc9540a57 --- /dev/null +++ b/cms/static/sass/views/_settings.scss @@ -0,0 +1,741 @@ +// studio - views - course settings +// ==================== + +body.course.settings { + + .content-primary, .content-supplementary { + @include box-sizing(border-box); + float: left; + } + + .content-primary { + @extend .window; + width: flex-grid(9, 12); + margin-right: flex-gutter(); + padding: $baseline ($baseline*1.5); + } + + // messages - should be synced up with global messages in the future + .message { + display: block; + font-size: 14px; + } + + .message-status { + display: none; + @include border-top-radius(2px); + @include box-sizing(border-box); + border-bottom: 2px solid $yellow; + margin: 0 0 20px 0; + padding: 10px 20px; + font-weight: 500; + background: $paleYellow; + + .text { + display: inline-block; + } + + &.error { + border-color: shade($red, 50%); + background: tint($red, 20%); + color: $white; + } + + &.confirm { + border-color: shade($green, 50%); + background: tint($green, 20%); + color: $white; + } + + &.is-shown { + display: block; + } + } + + // in form - elements + .group-settings { + margin: 0 0 ($baseline*2) 0; + + header { + @include clearfix(); + + .title-2 { + width: flex-grid(4, 9); + margin: 0 flex-gutter() 0 0; + float: left; + } + + .tip { + @include font-size(13); + width: flex-grid(5, 9); + float: right; + margin-top: ($baseline/2); + text-align: right; + color: $gray-l2; + } + } + + // basic layout/elements + .title-2 { + + } + + .title-3 { + + } + + // in form -UI hints/tips/messages + .instructions { + @include font-size(14); + margin: 0 0 $baseline 0; + } + + .tip { + @include transition(color, 0.15s, ease-in-out); + @include font-size(13); + display: block; + margin-top: ($baseline/4); + color: $gray-l3; + } + + .message-error { + @include font-size(13); + display: block; + margin-top: ($baseline/4); + margin-bottom: ($baseline/2); + color: $red; + } + + // buttons + .remove-item { + @include white-button; + @include font-size(13); + font-weight: 400; + } + + .new-button { + @include font-size(13); + } + + // form basics + .list-input { + margin: 0; + padding: 0; + list-style: none; + + .field { + margin: 0 0 $baseline 0; + + &:last-child { + margin-bottom: 0; + } + + &.required { + + label { + font-weight: 600; + } + + label:after { + margin-left: ($baseline/4); + content: "*"; + } + } + + label, input, textarea { + display: block; + } + + label { + @include font-size(14); + @include transition(color, 0.15s, ease-in-out); + margin: 0 0 ($baseline/4) 0; + font-weight: 400; + + &.is-focused { + color: $blue; + } + } + + input, textarea { + @include placeholder($gray-l4); + @include font-size(16); + @include size(100%,100%); + padding: ($baseline/2); + + &.long { + } + + &.short { + } + + &.error { + border-color: $red; + } + + &:focus { + + + .tip { + color: $gray; + } + } + } + + textarea.long { + height: ($baseline*5); + } + + input[type="checkbox"] { + display: inline-block; + margin-right: ($baseline/4); + width: auto; + height: auto; + + & + label { + display: inline-block; + } + } + } + + .field-group { + @include clearfix(); + margin: 0 0 ($baseline/2) 0; + } + + // enumerated/grouped lists + &.enum { + + .field-group { + @include box-sizing(border-box); + @include border-radius(3px); + background: $gray-l5; + padding: $baseline; + + &:last-child { + padding-bottom: $baseline; + } + + .actions { + @include clearfix(); + margin-top: ($baseline/2); + border-top: 1px solid $gray-l4; + padding-top: ($baseline/2); + + .remove-item { + float: right; + } + } + } + } + } + + // existing inputs + .input-existing { + margin: 0 0 $baseline 0; + + .actions { + margin: ($baseline/4) 0 0 0; + } + } + + // not editable fields + .field.is-not-editable { + + label, .label { + color: $gray-l3; + } + + input { + opacity: 0.25; + } + } + + // field with error + .field.error { + + input, textarea { + border-color: $red; + } + } + + // specific fields - basic + &.basic { + + .list-input { + @include clearfix(); + + .field { + margin-bottom: 0; + } + } + + #field-course-organization { + float: left; + width: flex-grid(2, 9); + margin-right: flex-gutter(); + } + + #field-course-number { + float: left; + width: flex-grid(2, 9); + margin-right: flex-gutter(); + } + + #field-course-name { + float: left; + width: flex-grid(5, 9); + } + } + + // specific fields - schedule + &.schedule { + + .list-input { + margin-bottom: ($baseline*1.5); + + &:last-child { + margin-bottom: 0; + } + } + + .field-group { + @include clearfix(); + border-bottom: 1px solid $gray-l5; + padding-bottom: ($baseline/2); + + &:last-child { + border: none; + padding-bottom: 0; + } + + .field { + float: left; + width: flex-grid(3, 9); + margin-bottom: ($baseline/4); + margin-right: flex-gutter(); + } + + .field.time { + position: relative; + + .tip { + position: absolute; + top: 0; + right: 0; + } + } + } + } + + // specific fields - overview + #field-course-overview { + + #course-overview { + height: ($baseline*20); + } + } + + // specific fields - video + #field-course-introduction-video { + + .input-existing { + @include box-sizing(border-box); + @include border-radius(3px); + background: $gray-l5; + padding: ($baseline/2); + + .actions { + @include clearfix(); + margin-top: ($baseline/2); + border-top: 1px solid $gray-l4; + padding-top: ($baseline/2); + + .remove-item { + float: right; + } + } + } + + .actions { + margin-top: ($baseline/2); + border-top: 1px solid $gray-l5; + padding-top: ($baseline/2); + } + } + + // specific fields - requirements + &.requirements { + + #field-course-effort { + width: flex-grid(3, 9); + } + } + + // specific fields - grading range (artifact styling) + &.grade-range { + margin-bottom: ($baseline*3); + + .grade-controls { + @include clearfix; + width: flex-grid(9,9); + } + + .new-grade-button { + @include box-sizing(border-box); + @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); + width: flex-grid(1,9); + height: ($baseline*2); + position: relative; + display: inline-block; + vertical-align: middle; + margin-right: flex-gutter(); + border-radius: 20px; + border: 1px solid $darkGrey; + background-color: #d1dae3; + color: #6d788b; + + .plus-icon { + position: absolute; + top: 50%; + left: 50%; + margin-left: -6px; + margin-top: -6px; + } + } + + .grade-slider { + @include box-sizing(border-box); + width: flex-grid(8,9); + display: inline-block; + vertical-align: middle; + + .grade-bar { + position: relative; + width: 100%; + height: ($baseline*2.5); + background: $lightGrey; + + .increments { + position: relative; + + li { + position: absolute; + top: 52px; + width: 30px; + margin-left: -15px; + font-size: 9px; + text-align: center; + + &.increment-0 { + left: 0; + } + + &.increment-10 { + left: 10%; + } + + &.increment-20 { + left: 20%; + } + + &.increment-30 { + left: 30%; + } + + &.increment-40 { + left: 40%; + } + + &.increment-50 { + left: 50%; + } + + &.increment-60 { + left: 60%; + } + + &.increment-70 { + left: 70%; + } + + &.increment-80 { + left: 80%; + } + + &.increment-90 { + left: 90%; + } + + &.increment-100 { + left: 100%; + } + } + } + + .grade-specific-bar { + height: 50px !important; + } + + .grades { + position: relative; + + li { + position: absolute; + top: 0; + height: 50px; + text-align: right; + @include border-radius(2px); + + &:hover, + &.is-dragging { + .remove-button { + display: block; + } + } + + &.is-dragging { + + } + + .remove-button { + display: none; + position: absolute; + top: -17px; + right: 1px; + height: 17px; + font-size: 10px; + } + + &:nth-child(1) { + background: #4fe696; + } + + &:nth-child(2) { + background: #ffdf7e; + } + + &:nth-child(3) { + background: #ffb657; + } + + &:nth-child(4) { + background: #ef54a1; + } + + &:nth-child(5), + &.bar-fail { + background: #fb336c; + } + + .letter-grade { + display: block; + margin: 10px 15px 0 0; + font-size: 16px; + font-weight: 700; + line-height: 14px; + } + + .range { + display: block; + margin-right: 15px; + font-size: 10px; + line-height: 12px; + } + + .drag-bar { + position: absolute; + top: 0; + right: -1px; + height: 50px; + width: 2px; + background-color: #fff; + @include box-shadow(-1px 0 3px rgba(0,0,0,0.1)); + + cursor: ew-resize; + @include transition(none); + + &:hover { + width: 6px; + right: -2px; + } + } + } + } + } + } + } + + // specific fields - grading rules + &.grade-rules { + + #field-course-grading-graceperiod { + width: flex-grid(3, 9); + } + } + + &.assignment-types { + + .list-input { + + &:last-child { + margin-bottom: 0; + } + } + + .field-group { + @include clearfix(); + width: flex-grid(9, 9); + margin-bottom: ($baseline*1.5); + border-bottom: 1px solid $gray-l5; + padding-bottom: ($baseline*1.5); + + &:last-child { + border: none; + padding-bottom: 0; + } + + .field { + display: inline-block; + vertical-align: top; + width: flex-grid(3, 6); + margin-bottom: ($baseline/2); + margin-right: flex-gutter(); + } + + #field-course-grading-assignment-shortname, + #field-course-grading-assignment-totalassignments, + #field-course-grading-assignment-gradeweight, + #field-course-grading-assignment-droppable { + width: flex-grid(2, 6); + } + } + + .actions { + float: left; + width: flex-grid(9, 9); + + .delete-button { + margin: 0; + } + } + } + + // specific fields - advanced settings + &.advanced-policies { + + .field-group { + margin-bottom: ($baseline*1.5); + + &:last-child { + border: none; + padding-bottom: 0; + } + } + + .course-advanced-policy-list-item { + @include clearfix(); + position: relative; + + .field { + + input { + width: 100%; + } + + .tip { + @include transition (opacity 0.5s ease-in-out 0s); + opacity: 0; + position: absolute; + bottom: ($baseline*1.25); + } + + input:focus { + + & + .tip { + opacity: 1.0; + } + } + + input.error { + + & + .tip { + opacity: 0; + } + } + } + + .key, .value { + float: left; + margin: 0 0 ($baseline/2) 0; + } + + .key { + width: flex-grid(3, 9); + margin-right: flex-gutter(); + } + + .value { + width: flex-grid(6, 9); + } + + .actions { + float: left; + width: flex-grid(9, 9); + + .delete-button { + margin: 0; + } + } + } + + .message-error { + position: absolute; + bottom: ($baseline*0.75); + } + + // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs + .CodeMirror { + @include font-size(16); + @include box-sizing(border-box); + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); + @include linear-gradient($lightGrey, tint($lightGrey, 90%)); + padding: 5px 8px; + border: 1px solid $mediumGrey; + border-radius: 2px; + background-color: $lightGrey; + font-family: 'Open Sans', sans-serif; + color: $baseFontColor; + outline: 0; + + &.CodeMirror-focused { + @include linear-gradient($paleYellow, tint($paleYellow, 90%)); + outline: 0; + } + + .CodeMirror-scroll { + overflow: hidden; + height: auto; + min-height: ($baseline*1.5); + max-height: ($baseline*10); + } + + // editor color changes just for JSON + .CodeMirror-lines { + + .cm-string { + color: #cb9c40; + } + + pre { + line-height: 2.0rem; + } + } + } + } + } + + .content-supplementary { + width: flex-grid(3, 12); + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss new file mode 100644 index 0000000000..83856c773e --- /dev/null +++ b/cms/static/sass/views/_static-pages.scss @@ -0,0 +1,156 @@ +// studio - views - course static pages +// ==================== + +.static-pages { + .new-static-page-button { + @include grey-button; + display: block; + text-align: center; + padding: 12px 0; + } + + .unit-body { + padding: 0; + + .details { + display: block !important; + + h2 { + margin: 0 0 5px 0; + } + } + } + + .component-editor { + border: none; + border-radius: 0; + } + + .components > li { + margin: 0; + border-radius: 0; + + &.new-component-item { + background: transparent; + border: none; + @include box-shadow(none); + } + } + + .component { + border: 1px solid $mediumGrey; + border-top: none; + + &:first-child { + border-top: 1px solid $mediumGrey; + } + + &:hover { + border: 1px solid $mediumGrey; + border-top: none; + + &:first-child { + border-top: 1px solid $mediumGrey; + } + + .drag-handle { + background: url(../img/drag-handles.png) center no-repeat #fff; + } + } + + .drag-handle { + top: 0; + right: 0; + z-index: 11; + width: 35px; + border: none; + background: url(../img/drag-handles.png) center no-repeat #fff; + + &:hover { + background: url(../img/drag-handles.png) center no-repeat #fff; + } + } + + .component-actions { + top: 26px; + right: 44px; + } + } + + .component.editing { + border-left: 1px solid $mediumGrey; + border-right: 1px solid $mediumGrey; + + .xmodule_display { + display: none; + } + } + + .new .xmodule_display { + background: $yellow; + } + + .xmodule_display { + padding: 20px 20px 22px; + font-size: 24px; + font-weight: 300; + background: #fff; + @include transition(background-color 3s); + } + + .static-page-item { + position: relative; + margin: 10px 0; + padding: 22px 20px; + border: 1px solid $darkGrey; + border-radius: 3px; + background: #fff; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); + + .page-name { + font-size: 19px; + font-weight: 700; + } + + .item-actions { + margin-top: 19px; + margin-right: 12px; + } + } +} + +.edit-static-page { + .main-wrapper { + margin-top: 40px; + } + + .static-page-details { + @extend .window; + padding: 32px 40px; + + .row { + border: none; + } + } + + .page-display-name-input { + width: 100%; + font-size: 20px; + } + + .page-contents { + @include box-sizing(border-box); + width: 100%; + height: 360px; + padding: 15px; + border: 1px solid #b0b6c2; + border-radius: 2px; + @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); + background-color: #edf1f5; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); + font-family: Monaco, monospace; + font-size: 13px; + color: #3c3c3c; + outline: 0; + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss new file mode 100644 index 0000000000..9b0789ba52 --- /dev/null +++ b/cms/static/sass/views/_subsection.scss @@ -0,0 +1,298 @@ +// studio - views - course subsection +// ==================== + +.subsection .main-wrapper { + margin: 40px; +} + +.subsection .inner-wrapper { + @include clearfix(); +} + +.subsection-body { + padding: 32px 40px; + @include clearfix; + + > div { + margin-bottom: 40px; + } + + input { + font-size: 14px; + } + + .unit-subtitle { + display: block; + width: 100%; + } + + .sortable-unit-list { + ol { + @include tree-view; + } + } + + .policy-list { + input[disabled] { + border: none; + @include box-shadow(none); + } + + .policy-list-name { + margin-right: 5px; + margin-bottom: 10px; + } + + .policy-list-value { + width: 320px; + margin-right: 10px; + } + } + + .policy-list-element { + .save-button, + .cancel-button { + display: none; + } + + .edit-icon { + margin-right: 8px; + } + + &.editing, + &.new-policy-list-element { + .policy-list-name, + .policy-list-value { + border: 1px solid #b0b6c2; + @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); + background-color: #edf1f5; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); + } + } + } + + .new-policy-list-element { + padding: 10px 10px 0; + margin: 0 -10px 10px; + border-radius: 3px; + background: $mediumGrey; + + .save-button { + @include blue-button; + margin-bottom: 10px; + } + + .cancel-button { + @include white-button; + } + + .edit-icon { + display: none; + } + + .delete-icon { + display: none; + } + } + + .new-policy-item { + margin: 10px 0; + + .plus-icon-small { + position: relative; + top: -1px; + vertical-align: middle; + } + } +} + +.subsection-name-input { + label { + display: block; + } + + input { + width: 100%; + font-size: 20px; + } +} + +.scheduled-date-input, +.due-date-input { + @include clearfix; + + .date-input, + .time-input { + display: inline-block; + width: 100px; + } + + .inherits-check { + label { + font-size: 13px; + } + } + + .notice { + margin-top: 6px; + font-size: 11px; + color: #999; + } +} + +.due-date-input { + label { + display: inline-block !important; + margin-right: 10px; + } + + a { + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + } + + .date-setter { + @include clearfix; + display: none; + } + + .remove-date { + display: block; + } +} + +.row.visibility { + label { + display: inline-block !important; + margin-right: 10px; + line-height: 21px; + } + + a { + display: inline-block; + height: 31px; + margin-right: 8px; + vertical-align: middle; + font-size: 11px; + font-weight: 700; + line-height: 31px; + text-transform: uppercase; + } + + .large-toggle { + width: 41px; + background: url(../img/large-toggles.png) no-repeat; + background-position: 0 -50px; + + .hidden { + background-position: 0 -5px; + } + } +} + +.gradable { + + label { + display: inline-block; + vertical-align: top; + } + + .gradable-status { + position: relative; + top: -4px; + display: inline-block; + margin-left: 10px; + width: 65%; + + .status-label { + margin: 0; + padding: 0; + background: transparent; + color: $blue; + border: none; + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + } + + .menu-toggle { + z-index: 100; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 20px; + background: transparent; + + &:hover, &.is-active { + color: $blue; + } + } + + .menu { + z-index: 1; + position: absolute; + top: -12px; + left: -7px; + display: none; + width: 100%; + margin: 0; + padding: 8px 12px; + opacity: 0.0; + background: $white; + border: 1px solid $mediumGrey; + font-size: 12px; + @include border-radius(4px); + @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); + @include transition(opacity .15s); + + + li { + margin-bottom: 3px; + padding-bottom: 3px; + border-bottom: 1px solid $lightGrey; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border: none; + } + } + + a { + + &.is-selected { + font-weight: bold; + } + } + } + + // dropdown state + &.is-active { + + .menu { + z-index: 10000; + display: block; + opacity: 1.0; + } + + .menu-toggle { + z-index: 1000; + } + } + + // set state + &.is-set { + + .menu-toggle { + color: $blue; + } + + .status-label { + display: block; + color: $blue; + } + } + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss new file mode 100644 index 0000000000..bcd3fdb912 --- /dev/null +++ b/cms/static/sass/views/_unit.scss @@ -0,0 +1,670 @@ +// studio - views - course unit +// ==================== + +.unit .main-wrapper { + @include clearfix(); + margin: 40px; +} + +//Problem Selector tab menu requirements +.js .tabs .tab { + display: none; +} +//end problem selector reqs + +.main-column { + clear: both; + float: left; + width: 70%; +} + +.unit-body.published { + .components > li { + border: none; + + .rendered-component { + padding: 0 20px; + } + } +} + +.unit-body { + .breadcrumbs { + border-radius: 3px 3px 0 0; + border-bottom: 1px solid #cbd1db; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); + background-color: #edf1f5; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); + @include clearfix; + + li { + float: left; + } + + a, + .current-page { + display: block; + padding: 15px 35px 15px 30px; + font-size: 14px; + background: url(../img/breadcrumb-arrow.png) no-repeat right center; + } + } + + h2 { + margin: 30px 40px 30px 0; + color: #646464; + font-size: 19px; + font-weight: 300; + letter-spacing: 1px; + text-transform: uppercase; + } + + .components { + + > li { + position: relative; + z-index: 10; + margin: 20px 40px; + + + + .title { + margin: 0 0 15px 0; + color: $mediumGrey; + + .value { + } + } + + &.new-component-item { + margin: 20px 0px; + border-top: 1px solid $mediumGrey; + box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; + background-color: $lightGrey; + margin-bottom: 0px; + padding-bottom: 20px; + + .new-component-button { + display: block; + padding: 20px; + text-align: center; + color: #edf1f5; + } + + h5 { + margin: 20px 0px; + color: #fff; + font-weight: 600; + font-size: 18px; + } + + .rendered-component { + display: none; + background: #fff; + border-radius: 3px 3px 0 0; + } + + .new-component-type { + + a, + li { + display: inline-block; + } + + a { + border: 1px solid $mediumGrey; + width: 100px; + height: 100px; + color: #fff; + margin-right: 15px; + margin-bottom: 20px; + border-radius: 8px; + font-size: 15px; + line-height: 14px; + text-align: center; + @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); + + .name { + position: absolute; + bottom: 5px; + left: 0; + width: 100%; + padding: 10px; + @include box-sizing(border-box); + color: #fff; + } + } + } + + .new-component-templates { + display: none; + margin: 20px 40px 20px 40px; + border-radius: 3px; + border: 1px solid $mediumGrey; + background-color: #fff; + @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); + @include clearfix; + + .cancel-button { + margin: 20px 0px 10px 10px; + @include white-button; + } + + .problem-type-tabs { + display: none; + } + + // specific menu types + &.new-component-problem { + padding-bottom:10px; + + .ss-icon, .editor-indicator { + display: inline-block; + } + + .problem-type-tabs { + display: inline-block; + } + } + } + + .new-component-type, + .new-component-template { + @include clearfix; + + a { + position: relative; + border: 1px solid $darkGreen; + background: tint($green,20%); + color: #fff; + + &:hover { + background: $brightGreen; + } + } + } + + .problem-type-tabs { + list-style-type: none; + border-radius: 0; + width: 100%; + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + background-color: $lightBluishGrey; + @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); + + li:first-child { + margin-left: 20px; + } + + li { + float:left; + display:inline-block; + text-align:center; + width: auto; + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + background-color: tint($lightBluishGrey, 10%); + @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); + opacity:.8; + + &:hover { + opacity:1; + background-color: tint($lightBluishGrey, 20%); + } + + &.ui-state-active { + border: 0px; + @include active; + opacity:1; + } + } + + a{ + display: block; + padding: 15px 25px; + font-size: 15px; + line-height: 16px; + text-align: center; + color: #3c3c3c; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); + } + } + + .new-component-template { + + a { + background: #fff; + border: 0px; + color: #3c3c3c; + @include transition (none); + + &:hover { + background: tint($green,30%); + color: #fff; + @include transition(background-color .15s); + } + } + + li { + border:none; + border-bottom: 1px dashed $lightGrey; + color: #fff; + } + + li:first-child { + a { + border-top: 0px; + } + } + + li:nth-child(2) { + a { + border-radius: 0px; + } + } + + a { + @include clearfix(); + display: block; + padding: 7px 20px; + border-bottom: none; + font-weight: 500; + + .name { + float: left; + + .ss-icon { + @include transition(opacity .15s); + display: inline-block; + top: 1px; + margin-right: 5px; + opacity: 0.5; + width: 17; + height: 21px; + vertical-align: middle; + } + } + + .editor-indicator { + @include transition(opacity .15s); + float: right; + position: relative; + top: 3px; + font-size: 12px; + opacity: 0.3; + } + + .ss-icon, .editor-indicator { + display: none; + } + + &:hover { + color: #fff; + + .ss-icon { + opacity: 1.0; + } + + .editor-indicator { + opacity: 1.0; + } + } + } + + // specific editor types + .empty { + + a { + line-height: 1.4; + font-weight: 400; + background: #fff; + color: #3c3c3c; + + + &:hover { + background: tint($green,30%); + color: #fff; + } + } + } + } + + .new-component { + text-align: center; + + h5 { + color: $darkGreen; + } + + } + } + } + } + + .component { + border: 1px solid $lightBluishGrey2; + border-radius: 3px; + background: #fff; + @include transition(none); + + &:hover { + border-color: #6696d7; + + .drag-handle { + background-color: $blue; + border-color: $blue; + } + } + + &.editing { + border: 1px solid $lightBluishGrey2; + z-index: auto; + + .drag-handle, + .component-actions { + display: none; + } + } + + &.component-placeholder { + border-color: #6696d7; + } + + .component-actions { + position: absolute; + top: 7px; + right: 9px; + } + + .drag-handle { + position: absolute; + display: block; + top: -1px; + right: -16px; + z-index: 10; + width: 15px; + height: 100%; + border-radius: 0 3px 3px 0; + border: 1px solid $lightBluishGrey2; + background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2; + cursor: move; + @include transition(none); + } + } + + .xmodule_display { + padding: 40px 20px 20px; + overflow-x: auto; + + h1 { + float: none; + margin-left: 0; + } + } + + .wrapper-component-editor { + z-index: 9999; + position: relative; + background: $lightBluishGrey2; + } + + .component-editor { + @include edit-box; + @include box-shadow(none); + display: none; + padding: 20px; + border-radius: 2px 2px 0 0; + + .metadata_edit { + margin-bottom: 20px; + font-size: 13px; + + li { + margin-bottom: 10px; + } + + label { + display: inline-block; + margin-right: 10px; + } + } + + h3 { + margin-bottom: 10px; + font-size: 18px; + font-weight: 700; + } + + h5 { + margin-bottom: 8px; + color: #fff; + font-weight: 700; + } + + .save-button { + margin-top: 10px; + margin: 15px 8px 0 0; + } + } +} + +.unit-settings { + .window-contents { + padding: 10px 20px; + } + + .unit-actions { + border-bottom: none; + padding-bottom: 0; + } + + .published-alert { + display: none; + padding: 10px; + border: 1px solid #edbd3c; + border-radius: 3px; + background: #fbf6e1; + font-size: 14px; + line-height: 1.4; + + div { + margin-top: 15px; + } + } + + input[type="radio"] { + margin-right: 7px; + } + + .status { + font-size: 12px; + + strong { + font-weight: 700; + } + } + + .preview-button, .view-button { + @include white-button; + margin-bottom: 10px; + } + + .publish-button { + @include orange-button; + } + + .delete-button { + @include blue-button; + } + + .delete-draft { + display: inline-block; + } + + .delete-button, + .preview-button, + .publish-button, + .view-button { + font-size: 11px; + margin-top: 10px; + padding: 6px 15px 8px; + } +} + +.unit-history { + &.collapsed { + h4 { + border-bottom: none; + border-radius: 3px; + } + + .window-contents { + display: none; + } + } + + ol { + border: 1px solid #ced2db; + + li { + display: block; + padding: 6px 8px 8px 10px; + background: #edf1f5; + font-size: 12px; + + &:hover { + background: #fffcf1; + + .item-actions { + display: block; + } + } + + &.checked { + background: #d1dae3; + } + + .item-actions { + display: none; + } + + input[type="radio"] { + margin-right: 7px; + } + } + } +} + +.unit-location { + .url { + width: 100%; + margin-bottom: 10px; + @include box-shadow(none); + } + + .draft-tag, + .hidden-tag, + .private-tag, + .has-new-draft-tag { + font-size: 8px; + } + + .window-contents > ol { + @include tree-view; + + .section-item { + display: inline-block; + width: 100%; + font-size: 11px; + padding: 2px 8px 4px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + @include box-sizing(border-box); + } + + ol { + .section-item { + padding-left: 20px; + } + + .new-unit-item { + margin-left: 20px; + } + } + + ol ol { + .section-item { + padding-left: 34px; + } + + .new-unit-item { + margin: 0 0 10px 41px; + } + } + } +} + +.edit-state-draft { + .visibility, + + .edit-draft-message, + .view-button { + display: none; + } + + .published-alert { + display: block; + } +} + +.edit-state-public { + .delete-draft, + .component-actions, + .new-component-item, + .editing-draft-alert, + .publish-draft-message, + .preview-button { + display: none; + } + + .published-alert { + display: block; + } + + .drag-handle { + display: none !important; + } +} + +.edit-state-private { + .delete-draft, + .publish-draft, + .editing-draft-alert, + .create-draft, + .view-button { + display: none; + } +} + +// editing units from courseware +body.unit { + + .component { + padding-top: 30px; + + .component-actions { + @include box-sizing(border-box); + position: absolute; + width: 100%; + padding: 15px; + top: 0; + left: 0; + border-bottom: 1px solid $lightBluishGrey2; + background: $lightGrey; + } + + &.editing { + padding-top: 0; + } + } +} diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss new file mode 100644 index 0000000000..1a4a54ca5e --- /dev/null +++ b/cms/static/sass/views/_updates.scss @@ -0,0 +1,221 @@ +// studio - views - course updates +// ==================== + +.course-info { + h2 { + margin-bottom: 24px; + font-size: 22px; + font-weight: 300; + } + + .course-info-wrapper { + display: table; + width: 100%; + clear: both; + } + + .main-column, + .course-handouts { + float: none; + display: table-cell; + } + + .main-column { + border-radius: 3px 0 0 3px; + border-right-color: $mediumGrey; + } + + .CodeMirror { + border: 1px solid #3c3c3c; + background: #fff; + color: #3c3c3c; + } +} + +.course-updates { + padding: 30px 40px; + margin: 0; + + .update-list > li { + padding: 34px 0 42px; + border-top: 1px solid #cbd1db; + + &:first-child { + padding-top: 0; + border: none; + } + + &.editing { + position: relative; + z-index: 1001; + padding: 0; + border-top: none; + border-radius: 3px; + background: #fff; + + .post-preview { + display: none; + } + } + + h1 { + float: none; + font-size: 24px; + font-weight: 300; + } + + h2 { + margin-bottom: 18px; + font-size: 14px; + font-weight: 700; + line-height: 30px; + color: #646464; + letter-spacing: 1px; + text-transform: uppercase; + } + + h3 { + margin: 34px 0 11px; + font-size: 16px; + font-weight: 700; + } + } + + .update-contents { + p { + font-size: 16px; + line-height: 25px; + } + + p + p { + margin-top: 25px; + } + + .primary { + border: 1px solid #ddd; + background: #f6f6f6; + padding: 20px; + } + + ol, ul { + margin: 1em 0; + padding: 0 0 0 1em; + color: $baseFontColor; + + li { + margin-bottom: 0.708em; + } + } + + ol { + list-style: decimal outside none; + } + + ul { + list-style: disc outside none; + } + + pre { + margin: 1em 0; + color: $baseFontColor; + font-family: monospace, serif; + font-size: 1em; + white-space: pre-wrap; + word-wrap: break-word; + } + + code { + color: $baseFontColor; + font-family: monospace, serif; + background: none; + padding: 0; + } + } + + .new-update-button { + @include blue-button; + display: block; + text-align: center; + padding: 18px 0; + margin-bottom: 28px; + } + + .new-update-form { + @include edit-box; + margin-bottom: 24px; + padding: 30px; + border: none; + + textarea { + height: 180px; + } + } + + .post-actions { + float: right; + + .edit-button, + .delete-button{ + float: left; + @include white-button; + padding: 3px 10px 4px; + margin-left: 7px; + font-size: 12px; + font-weight: 400; + + .edit-icon, + .delete-icon { + margin-right: 4px; + } + } + } +} + +.course-handouts { + width: 30%; + padding: 20px 30px; + margin: 0; + border-radius: 0 3px 3px 0; + border-left: none; + background: $lightGrey; + + h2 { + font-size: 18px; + font-weight: 700; + } + + .edit-button { + float: right; + @include white-button; + padding: 3px 10px 4px; + margin-left: 7px; + font-size: 12px; + font-weight: 400; + + .edit-icon, + .delete-icon { + margin-right: 4px; + } + } + + .handouts-content { + font-size: 14px; + } + + .treeview-handoutsnav li { + margin-bottom: 12px; + } +} + +.edit-handouts-form { + @include edit-box; + position: absolute; + right: 0; + z-index: 10001; + width: 800px; + padding: 30px; + + textarea { + height: 300px; + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss new file mode 100644 index 0000000000..6423bddd75 --- /dev/null +++ b/cms/static/sass/views/_users.scss @@ -0,0 +1,81 @@ +// studio - views - course users +// ==================== + +.users { + .new-user-form { + display: none; + padding: 15px 20px; + background-color: $lightBluishGrey2; + + #result { + display: none; + float: left; + margin-bottom: 15px; + padding: 3px 15px; + border-radius: 3px; + background: $error-red; + font-size: 14px; + color: #fff; + } + + .form-elements { + clear: both; + } + + label { + display: inline-block; + margin-right: 10px; + } + + .email-input { + width: 350px; + padding: 8px 8px 10px; + border-color: $darkGrey; + } + + .add-button { + @include blue-button; + padding: 5px 20px 9px; + } + + .cancel-button { + @include white-button; + padding: 5px 20px 9px; + } + } + + .user-list { + border: 1px solid $mediumGrey; + background: #fff; + + li { + position: relative; + padding: 20px; + border-bottom: 1px solid $mediumGrey; + + &:last-child { + border-bottom: none; + } + + span { + display: inline-block; + } + + .user-name { + margin-right: 10px; + font-size: 24px; + font-weight: 300; + } + + .user-email { + font-size: 14px; + font-style: italic; + color: $mediumGrey; + } + + .item-actions { + top: 24px; + } + } + } +} \ No newline at end of file From e9a2413c0483f0b15dff6882f015777ccfd9dbba Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 8 Mar 2013 12:35:28 -0500 Subject: [PATCH 03/17] studio - further small cleanup on Sass --- cms/static/sass/base-style.scss | 46 +++++++++++------------ cms/static/sass/elements/_header.scss | 4 ++ cms/static/sass/elements/_navigation.scss | 7 ---- 3 files changed, 27 insertions(+), 30 deletions(-) diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 33b312d235..4b9edea40c 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -9,39 +9,39 @@ // utilities @import 'mixins'; -@import "variables"; -@import "cms_mixins"; +@import 'variables'; +@import 'cms_mixins'; // assets -@import "assets/fonts"; -@import "assets/graphics"; +@import 'assets/fonts'; +@import 'assets/graphics'; @import 'assets/keyframes'; // base -@import "base"; +@import 'base'; // elements -@import "elements/header"; -@import "elements/footer"; -@import "elements/navigation"; -@import "elements/modal"; -@import "elements/alerts"; +@import 'elements/header'; +@import 'elements/footer'; +@import 'elements/navigation'; +@import 'elements/modal'; +@import 'elements/alerts'; @import 'elements/jquery-ui-calendar'; // specific views -@import "views/account"; -@import "views/assets"; -@import "views/updates"; -@import "views/dashboard"; -@import "views/export"; -@import "views/index"; -@import "views/import"; -@import "views/outline"; -@import "views/settings"; -@import "views/static-pages"; -@import "views/subsection"; -@import "views/unit"; -@import "views/users"; +@import 'views/account'; +@import 'views/assets'; +@import 'views/updates'; +@import 'views/dashboard'; +@import 'views/export'; +@import 'views/index'; +@import 'views/import'; +@import 'views/outline'; +@import 'views/settings'; +@import 'views/static-pages'; +@import 'views/subsection'; +@import 'views/unit'; +@import 'views/users'; @import 'assets/content-types'; diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 1e09184801..432e78895a 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -29,6 +29,10 @@ margin: 0 auto; color: $gray-l1; } + + nav .nav-item { + display: inline-block; + } } // ==================== diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss index 8c123db64f..066c47298b 100644 --- a/cms/static/sass/elements/_navigation.scss +++ b/cms/static/sass/elements/_navigation.scss @@ -6,13 +6,6 @@ // ==================== // primary -nav.primary { - - .nav-item { - display: inline-block; - } -} - // ==================== From 786ffd10925774f6dbd255338720325b5cc7bf81 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 8 Mar 2013 12:44:24 -0500 Subject: [PATCH 04/17] studio - further small cleanup on Sass --- cms/static/sass/_base.scss | 8 -------- common/static/sass/_mixins.scss | 22 ++++++++++++++++++++-- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 1bf9119654..e5d389e6d2 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -455,14 +455,6 @@ code { // ==================== // UI - chrome -.window { - @include clearfix(); - @include border-radius(3px); - @include box-shadow(0 1px 1px $shadow-l1); - margin-bottom: $baseline; - border: 1px solid $gray-l2; - background: $white; -} // ==================== diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 3145745906..64eaf20591 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -1,4 +1,4 @@ -// all - utilities - mixins and extends +// studio - utilities - mixins and extends // ==================== // font-sizing @@ -151,4 +151,22 @@ border: none; } -// extends - ui \ No newline at end of file +// extends - ui +.window { + @include clearfix(); + @include border-radius(3px); + @include box-shadow(0 1px 1px $shadow-l1); + margin-bottom: $baseline; + border: 1px solid $gray-l2; + background: $white; +} + +.elem-d1 { + @include clearfix(); + @include box-sizing(border-box); +} + +.elem-d2 { + @include clearfix(); + @include box-sizing(border-box); +} \ No newline at end of file From 3bc73de1b494adac6342bc1300b69c415780ba38 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 8 Mar 2013 12:56:00 -0500 Subject: [PATCH 05/17] studio - changed order of Sass import to account for variables needed in architecture --- cms/static/sass/base-style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 4b9edea40c..750fa9071a 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -8,8 +8,8 @@ @import 'reset'; // utilities -@import 'mixins'; @import 'variables'; +@import 'mixins'; @import 'cms_mixins'; // assets From 7a9fdb90696688ae97d75a9bb7bfd9f8ca5b9643 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 11 Mar 2013 11:04:43 -0400 Subject: [PATCH 06/17] studio - sass clean up: in progress business with git ignore issues --- cms/static/sass/base-style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 750fa9071a..46885864ac 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -45,5 +45,5 @@ @import 'assets/content-types'; -@import 'xmodule/module/module-styles.scss'; -@import 'xmodule/descriptor/module-styles.scss'; +@import 'module/module-styles.scss'; +@import 'descriptor/module-styles.scss'; From a496cc0a1e64d1c8c74ccbddba7cd0f3fcf70655 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 11 Mar 2013 13:28:28 -0400 Subject: [PATCH 07/17] studio - Sass Cleanup: moved all page/view specific css to their own views and created forms specific sheet --- cms/static/sass/_base.scss | 99 +- cms/static/sass/base-style.scss | 1 + cms/static/sass/elements/_footer.scss | 2 +- cms/static/sass/elements/_forms.scss | 76 ++ cms/static/sass/elements/_header.scss | 2 +- cms/static/sass/views/_assets.scss | 3 +- cms/static/sass/views/_dashboard.scss | 203 ++-- cms/static/sass/views/_export.scss | 5 +- cms/static/sass/views/_import.scss | 3 +- cms/static/sass/views/_index.scss | 2 +- cms/static/sass/views/_outline.scss | 1211 +++++++++++----------- cms/static/sass/views/_static-pages.scss | 3 +- cms/static/sass/views/_subsection.scss | 672 +++++++----- cms/static/sass/views/_unit.scss | 1187 ++++++++++----------- cms/static/sass/views/_updates.scss | 3 +- cms/static/sass/views/_users.scss | 3 +- 16 files changed, 1819 insertions(+), 1656 deletions(-) create mode 100644 cms/static/sass/elements/_forms.scss diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index e5d389e6d2..bdafbad09a 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -350,10 +350,11 @@ h1 { // layout - grandfathered .main-wrapper { position: relative; - margin: 0 40px; + margin: 40px; } .inner-wrapper { + @include clearfix(); position: relative; max-width: 1280px; margin: auto; @@ -363,6 +364,12 @@ h1 { } } +.main-column { + clear: both; + float: left; + width: 70%; +} + .sidebar { float: right; width: 28%; @@ -378,86 +385,6 @@ h1 { // ==================== -// forms -input[type="text"], -input[type="email"], -input[type="password"], -textarea.text { - padding: 6px 8px 8px; - @include box-sizing(border-box); - border: 1px solid $mediumGrey; - border-radius: 2px; - @include linear-gradient($lightGrey, tint($lightGrey, 90%)); - background-color: $lightGrey; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); - font-family: 'Open Sans', sans-serif; - font-size: 11px; - color: $baseFontColor; - outline: 0; - - &::-webkit-input-placeholder, - &:-moz-placeholder, - &:-ms-input-placeholder { - color: #979faf; - } - - &:focus { - @include linear-gradient($paleYellow, tint($paleYellow, 90%)); - outline: 0; - } -} - -// forms - specific -input.search { - padding: 6px 15px 8px 30px; - @include box-sizing(border-box); - border: 1px solid $darkGrey; - border-radius: 20px; - background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5; - font-family: 'Open Sans', sans-serif; - color: $baseFontColor; - outline: 0; - - &::-webkit-input-placeholder { - color: #979faf; - } -} - -label { - font-size: 12px; -} - -code { - padding: 0 4px; - border-radius: 3px; - background: #eee; - font-family: Monaco, monospace; -} - -.CodeMirror { - font-size: 13px; - border: 1px solid $darkGrey; - background: #fff; -} - -.text-editor { - width: 100%; - min-height: 80px; - padding: 10px; - @include box-sizing(border-box); - border: 1px solid $mediumGrey; - @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); - background-color: #edf1f5; - @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset); - font-family: Monaco, monospace; -} - -// ==================== - -// UI - chrome - -// ==================== - // UI - actions .new-unit-item, .new-subsection-item, @@ -838,14 +765,4 @@ body.hide-wip { .wip-box { display: none; } -} - -// ==================== - -// needed fudges for now -body.dashboard { - - .my-classes { - margin-top: $baseline; - } } \ No newline at end of file diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 46885864ac..b092f0054b 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -24,6 +24,7 @@ @import 'elements/header'; @import 'elements/footer'; @import 'elements/navigation'; +@import 'elements/forms'; @import 'elements/modal'; @import 'elements/alerts'; @import 'elements/jquery-ui-calendar'; diff --git a/cms/static/sass/elements/_footer.scss b/cms/static/sass/elements/_footer.scss index 2c32de4bb3..b1c0f57bb2 100644 --- a/cms/static/sass/elements/_footer.scss +++ b/cms/static/sass/elements/_footer.scss @@ -1,4 +1,4 @@ -// studio - global footer +// studio - elements - global footer // ==================== .wrapper-footer { diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss new file mode 100644 index 0000000000..384ffc0509 --- /dev/null +++ b/cms/static/sass/elements/_forms.scss @@ -0,0 +1,76 @@ +// studio - elements - forms +// ==================== + +// forms - general +input[type="text"], +input[type="email"], +input[type="password"], +textarea.text { + padding: 6px 8px 8px; + @include box-sizing(border-box); + border: 1px solid $mediumGrey; + border-radius: 2px; + @include linear-gradient($lightGrey, tint($lightGrey, 90%)); + background-color: $lightGrey; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); + font-family: 'Open Sans', sans-serif; + font-size: 11px; + color: $baseFontColor; + outline: 0; + + &::-webkit-input-placeholder, + &:-moz-placeholder, + &:-ms-input-placeholder { + color: #979faf; + } + + &:focus { + @include linear-gradient($paleYellow, tint($paleYellow, 90%)); + outline: 0; + } +} + +// forms - specific +input.search { + padding: 6px 15px 8px 30px; + @include box-sizing(border-box); + border: 1px solid $darkGrey; + border-radius: 20px; + background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5; + font-family: 'Open Sans', sans-serif; + color: $baseFontColor; + outline: 0; + + &::-webkit-input-placeholder { + color: #979faf; + } +} + +label { + font-size: 12px; +} + +code { + padding: 0 4px; + border-radius: 3px; + background: #eee; + font-family: Monaco, monospace; +} + +.CodeMirror { + font-size: 13px; + border: 1px solid $darkGrey; + background: #fff; +} + +.text-editor { + width: 100%; + min-height: 80px; + padding: 10px; + @include box-sizing(border-box); + border: 1px solid $mediumGrey; + @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); + background-color: #edf1f5; + @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset); + font-family: Monaco, monospace; +} \ No newline at end of file diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss index 432e78895a..e8df37f57f 100644 --- a/cms/static/sass/elements/_header.scss +++ b/cms/static/sass/elements/_header.scss @@ -1,4 +1,4 @@ -// studio - global header +// studio - elements - global header // ==================== .wrapper-header { diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index 2c1b435c44..779dc56684 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -1,7 +1,8 @@ // studio - views - assets // ==================== -.uploads { +body.course.uploads { + input.asset-search-input { float: left; width: 260px; diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index 2a995ffdc7..a02c4e0c29 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -1,117 +1,124 @@ // studio - views - user dashboard // ==================== -.class-list { - margin-top: 20px; - border-radius: 3px; - border: 1px solid $darkGrey; - background: #fff; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); +body.dashboard { - li { - position: relative; - border-bottom: 1px solid $mediumGrey; + .my-classes { + margin-top: $baseline; + } - &:last-child { - border-bottom: none; + .class-list { + margin-top: 20px; + border-radius: 3px; + border: 1px solid $darkGrey; + background: #fff; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); + + li { + position: relative; + border-bottom: 1px solid $mediumGrey; + + &:last-child { + border-bottom: none; + } + + .class-link { + z-index: 100; + display: block; + padding: 20px 25px; + line-height: 1.3; + + &:hover { + background: $paleYellow; + + + .view-live-button { + opacity: 1.0; + pointer-events: auto; + } + } + } } - .class-link { - z-index: 100; + .class-name { display: block; - padding: 20px 25px; - line-height: 1.3; - - &:hover { - background: $paleYellow; + font-size: 19px; + font-weight: 300; + } - + .view-live-button { - opacity: 1.0; - pointer-events: auto; - } + .detail { + font-size: 14px; + font-weight: 400; + margin-right: 20px; + color: #3c3c3c; + } + + // view live button + .view-live-button { + z-index: 10000; + position: absolute; + top: 15px; + right: $baseline; + padding: ($baseline/4) ($baseline/2); + opacity: 0; + pointer-events: none; + + &:hover { + opacity: 1.0; + pointer-events: auto; } } } - .class-name { - display: block; - font-size: 19px; - font-weight: 300; - } + .new-course { + padding: 15px 25px; + margin-top: 20px; + border-radius: 3px; + border: 1px solid $darkGrey; + background: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, .1); + @include clearfix; - .detail { - font-size: 14px; - font-weight: 400; - margin-right: 20px; - color: #3c3c3c; - } + .row { + margin-bottom: 15px; + @include clearfix; + } - // view live button - .view-live-button { - z-index: 10000; - position: absolute; - top: 15px; - right: $baseline; - padding: ($baseline/4) ($baseline/2); - opacity: 0; - pointer-events: none; + .column { + float: left; + width: 48%; + } - &:hover { - opacity: 1.0; - pointer-events: auto; + .column:first-child { + margin-right: 4%; + } + + .course-info { + width: 600px; + } + + label { + display: block; + font-size: 13px; + font-weight: 700; + } + + .new-course-org, + .new-course-number, + .new-course-name { + width: 100%; + } + + .new-course-name { + font-size: 19px; + font-weight: 300; + } + + .new-course-save { + @include blue-button; + } + + .new-course-cancel { + @include white-button; } } -} - -.new-course { - padding: 15px 25px; - margin-top: 20px; - border-radius: 3px; - border: 1px solid $darkGrey; - background: #fff; - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); - @include clearfix; - - .row { - margin-bottom: 15px; - @include clearfix; - } - - .column { - float: left; - width: 48%; - } - - .column:first-child { - margin-right: 4%; - } - - .course-info { - width: 600px; - } - - label { - display: block; - font-size: 13px; - font-weight: 700; - } - - .new-course-org, - .new-course-number, - .new-course-name { - width: 100%; - } - - .new-course-name { - font-size: 19px; - font-weight: 300; - } - - .new-course-save { - @include blue-button; - } - - .new-course-cancel { - @include white-button; - } } \ No newline at end of file diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss index 27cb7f923b..933bb50252 100644 --- a/cms/static/sass/views/_export.scss +++ b/cms/static/sass/views/_export.scss @@ -1,7 +1,8 @@ // studio - views - course export // ==================== -.export { +body.course.export { + .export-overview { @extend .window; @include clearfix; @@ -121,6 +122,4 @@ } } } - - } \ No newline at end of file diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss index fe7d65626b..e5fb955348 100644 --- a/cms/static/sass/views/_import.scss +++ b/cms/static/sass/views/_import.scss @@ -1,7 +1,8 @@ // studio - views - course import // ==================== -.import { +body.course.import { + .import-overview { @extend .window; @include clearfix; diff --git a/cms/static/sass/views/_index.scss b/cms/static/sass/views/_index.scss index 8d81ea33fd..f4087a8605 100644 --- a/cms/static/sass/views/_index.scss +++ b/cms/static/sass/views/_index.scss @@ -1,7 +1,7 @@ // studio - views - how it works // ==================== -.index { +body.index { &.not-signedin { diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index 2957b57849..0d72e2d2bf 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -1,380 +1,102 @@ // studio - views - course outline // ==================== -input.courseware-unit-search-input { - float: left; - width: 260px; - background-color: #fff; -} +body.course.outline { -.branch { - - .section-item { - @include clearfix(); - - .details { - display: block; - float: left; - margin-bottom: 0; - width: 650px; - } - - .gradable-status { - float: right; - position: relative; - top: -4px; - right: 50px; - width: 145px; - - .status-label { - position: absolute; - top: 2px; - right: -5px; - display: none; - width: 110px; - padding: 5px 40px 5px 10px; - @include border-radius(3px); - color: $lightGrey; - text-align: right; - font-size: 12px; - font-weight: bold; - line-height: 16px; - } - - .menu-toggle { - z-index: 10; - position: absolute; - top: 0; - right: 5px; - padding: 5px; - color: $mediumGrey; - - &:hover, &.is-active { - color: $blue; - } - } - - .menu { - z-index: 1; - display: none; - opacity: 0.0; - position: absolute; - top: -1px; - left: 5px; - margin: 0; - padding: 8px 12px; - background: $white; - border: 1px solid $mediumGrey; - font-size: 12px; - @include border-radius(4px); - @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); - @include transition(opacity .15s); - - - li { - width: 115px; - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; - - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; - - a { - color: $darkGrey; - } - } - } - - a { - color: $blue; - - &.is-selected { - font-weight: bold; - } - } - } - - // dropdown state - &.is-active { - - .menu { - z-index: 1000; - display: block; - opacity: 1.0; - } - - .menu-toggle { - z-index: 10000; - } - } - - // set state - &.is-set { - - .menu-toggle { - color: $blue; - } - - .status-label { - display: block; - color: $blue; - } - } - } - } + input.courseware-unit-search-input { + float: left; + width: 260px; + background-color: #fff; } + .branch { -.courseware-section { - position: relative; - background: #fff; - border-radius: 3px; - border: 1px solid $mediumGrey; - margin-top: 15px; - padding-bottom: 12px; - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); - - &:first-child { - margin-top: 0; - } - - &.collapsed { - padding-bottom: 0; - } - - label { - float: left; - line-height: 29px; - } - - .datepair { - float: left; - margin-left: 10px; - } - - .section-published-date { - position: absolute; - top: 19px; - right: 90px; - padding: 4px 10px; - border-radius: 3px; - background: $lightGrey; - text-align: right; - - .published-status { - font-size: 12px; - margin-right: 15px; - - strong { - font-weight: bold; - } - } - - .schedule-button { - @include blue-button; - } - - .edit-button { - @include blue-button; - } - - .schedule-button, - .edit-button { - font-size: 11px; - padding: 3px 15px 5px; - } - } - - .datepair .date, - .datepair .time { - padding-left: 0; - padding-right: 0; - border: none; - background: none; - @include box-shadow(none); - font-size: 13px; - font-weight: bold; - color: $blue; - cursor: pointer; - } - - .datepair .date { - width: 80px; - } - - .datepair .time { - width: 65px; - } - - &.collapsed .subsection-list, - .collapsed .subsection-list, - .collapsed > ol { - display: none !important; - } - - header { - min-height: 75px; + .section-item { @include clearfix(); - .item-details, .section-published-date { - + .details { + display: block; + float: left; + margin-bottom: 0; + width: 650px; } - .item-details { - display: inline-block; - padding: 20px 0 10px 0; - @include clearfix(); - - .section-name { - float: left; - margin-right: 10px; - width: 350px; - font-size: 19px; - font-weight: bold; - color: $blue; - } - - .section-name-span { - cursor: pointer; - @include transition(color .15s); - - &:hover { - color: $orange; - } - } - - .section-name-edit { - position: relative; - width: 400px; - background: $white; - - input { - font-size: 16px; - } - - .save-button { - @include blue-button; - padding: 7px 20px 7px; - margin-right: 5px; - } - - .cancel-button { - @include white-button; - padding: 7px 20px 7px; - } - } - - .section-published-date { + .gradable-status { float: right; - width: 265px; - margin-right: 220px; - @include border-radius(3px); - background: $lightGrey; + position: relative; + top: -4px; + right: 50px; + width: 145px; - .published-status { - font-size: 12px; - margin-right: 15px; - - strong { - font-weight: bold; - } - } - - .schedule-button { - @include blue-button; - } - - .edit-button { - @include blue-button; - } - - .schedule-button, - .edit-button { - font-size: 11px; - padding: 3px 15px 5px; - - } - } - - .gradable-status { + .status-label { position: absolute; - top: 20px; - right: 70px; - width: 145px; + top: 2px; + right: -5px; + display: none; + width: 110px; + padding: 5px 40px 5px 10px; + @include border-radius(3px); + color: $lightGrey; + text-align: right; + font-size: 12px; + font-weight: bold; + line-height: 16px; + } - .status-label { - position: absolute; - top: 0; - right: 2px; - display: none; - width: 100px; - padding: 10px 35px 10px 10px; - @include border-radius(3px); - background: $lightGrey; - color: $lightGrey; - text-align: right; - font-size: 12px; - font-weight: bold; - line-height: 16px; - } + .menu-toggle { + z-index: 10; + position: absolute; + top: 0; + right: 5px; + padding: 5px; + color: $mediumGrey; - .menu-toggle { - z-index: 10; - position: absolute; - top: 2px; - right: 5px; - padding: 5px; - color: $lightGrey; - - &:hover, &.is-active { - color: $blue; + &:hover, &.is-active { + color: $blue; + } } - } - .menu { - z-index: 1; - display: none; - opacity: 0.0; - position: absolute; - top: -1px; - left: 2px; - margin: 0; - padding: 8px 12px; - background: $white; - border: 1px solid $mediumGrey; - font-size: 12px; - @include border-radius(4px); - @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); - @include transition(opacity .15s); - @include transition(display .15s); + .menu { + z-index: 1; + display: none; + opacity: 0.0; + position: absolute; + top: -1px; + left: 5px; + margin: 0; + padding: 8px 12px; + background: $white; + border: 1px solid $mediumGrey; + font-size: 12px; + @include border-radius(4px); + @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); + @include transition(opacity .15s); - li { - width: 115px; - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; + li { + width: 115px; + margin-bottom: 3px; + padding-bottom: 3px; + border-bottom: 1px solid $lightGrey; - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border: none; - a { - color: $darkGrey; + a { + color: $darkGrey; + } } } - } - a { + a { + color: $blue; - &.is-selected { - font-weight: bold; - } + &.is-selected { + font-weight: bold; } + } } // dropdown state @@ -386,306 +108,573 @@ input.courseware-unit-search-input { opacity: 1.0; } + .menu-toggle { + z-index: 10000; + } + } - .menu-toggle { - z-index: 10000; + // set state + &.is-set { + + .menu-toggle { + color: $blue; + } + + .status-label { + display: block; + color: $blue; + } } } - - // set state - &.is-set { - - .menu-toggle { - color: $blue; - } - - .status-label { - display: block; - color: $blue; - } - } - - float: left; - padding: 21px 0 0; } } - .item-actions { - margin-top: 21px; - margin-right: 12px; - .edit-button, - .delete-button { - margin-top: -3px; - } - } + .courseware-section { + position: relative; + background: #fff; + border-radius: 3px; + border: 1px solid $mediumGrey; + margin-top: 15px; + padding-bottom: 12px; + @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); - .expand-collapse-icon { - float: left; - margin: 29px 6px 16px 16px; - @include transition(none); + &:first-child { + margin-top: 0; + } - &.expand { - background-position: 0 0; - } + &.collapsed { + padding-bottom: 0; + } - &.collapsed { - - } - } + label { + float: left; + line-height: 29px; + } - .drag-handle { - margin-left: 11px; - } - } + .datepair { + float: left; + margin-left: 10px; + } - h3 { - font-size: 19px; - font-weight: 700; - color: $blue; - } + .section-published-date { + position: absolute; + top: 19px; + right: 90px; + padding: 4px 10px; + border-radius: 3px; + background: $lightGrey; + text-align: right; - .section-name-span { - cursor: pointer; - @include transition(color .15s); + .published-status { + font-size: 12px; + margin-right: 15px; - &:hover { - color: $orange; - } - } - - .section-name-form { - margin-bottom: 15px; - } - - .section-name-edit { - input { - font-size: 16px; - } - - .save-button { - @include blue-button; - padding: 7px 20px 7px; - margin-right: 5px; - } - - .cancel-button { - @include white-button; - padding: 7px 20px 7px; - } - } - - h4 { - font-size: 12px; - color: #878e9d; - - strong { - font-weight: bold; - } - } - - .list-header { - @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); - background-color: #ced2db; - border-radius: 3px 3px 0 0; - } - - .subsection-list { - margin: 0 12px; - - > ol { - @include tree-view; - border-top-width: 0; - } - } - - &.new-section { - - header { - height: auto; - @include clearfix(); - } - - .expand-collapse-icon { - visibility: hidden; - } - - .item-details { - padding: 25px 0 0 0; - - .section-name { - float: none; - width: 100%; + strong { + font-weight: bold; + } } + + .schedule-button { + @include blue-button; + } + + .edit-button { + @include blue-button; + } + + .schedule-button, + .edit-button { + font-size: 11px; + padding: 3px 15px 5px; + } + } + + .datepair .date, + .datepair .time { + padding-left: 0; + padding-right: 0; + border: none; + background: none; + @include box-shadow(none); + font-size: 13px; + font-weight: bold; + color: $blue; + cursor: pointer; + } + + .datepair .date { + width: 80px; + } + + .datepair .time { + width: 65px; + } + + &.collapsed .subsection-list, + .collapsed .subsection-list, + .collapsed > ol { + display: none !important; + } + + header { + min-height: 75px; + @include clearfix(); + + .item-details, .section-published-date { + + } + + .item-details { + display: inline-block; + padding: 20px 0 10px 0; + @include clearfix(); + + .section-name { + float: left; + margin-right: 10px; + width: 350px; + font-size: 19px; + font-weight: bold; + color: $blue; + } + + .section-name-span { + cursor: pointer; + @include transition(color .15s); + + &:hover { + color: $orange; + } + } + + .section-name-edit { + position: relative; + width: 400px; + background: $white; + + input { + font-size: 16px; + } + + .save-button { + @include blue-button; + padding: 7px 20px 7px; + margin-right: 5px; + } + + .cancel-button { + @include white-button; + padding: 7px 20px 7px; + } + } + + .section-published-date { + float: right; + width: 265px; + margin-right: 220px; + @include border-radius(3px); + background: $lightGrey; + + .published-status { + font-size: 12px; + margin-right: 15px; + + strong { + font-weight: bold; + } + } + + .schedule-button { + @include blue-button; + } + + .edit-button { + @include blue-button; + } + + .schedule-button, + .edit-button { + font-size: 11px; + padding: 3px 15px 5px; + + } + } + + .gradable-status { + position: absolute; + top: 20px; + right: 70px; + width: 145px; + + .status-label { + position: absolute; + top: 0; + right: 2px; + display: none; + width: 100px; + padding: 10px 35px 10px 10px; + @include border-radius(3px); + background: $lightGrey; + color: $lightGrey; + text-align: right; + font-size: 12px; + font-weight: bold; + line-height: 16px; + } + + .menu-toggle { + z-index: 10; + position: absolute; + top: 2px; + right: 5px; + padding: 5px; + color: $lightGrey; + + &:hover, &.is-active { + color: $blue; + } + } + + .menu { + z-index: 1; + display: none; + opacity: 0.0; + position: absolute; + top: -1px; + left: 2px; + margin: 0; + padding: 8px 12px; + background: $white; + border: 1px solid $mediumGrey; + font-size: 12px; + @include border-radius(4px); + @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); + @include transition(opacity .15s); + @include transition(display .15s); + + + li { + width: 115px; + margin-bottom: 3px; + padding-bottom: 3px; + border-bottom: 1px solid $lightGrey; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border: none; + + a { + color: $darkGrey; + } + } + } + + a { + + &.is-selected { + font-weight: bold; + } + } + } + + // dropdown state + &.is-active { + + .menu { + z-index: 1000; + display: block; + opacity: 1.0; + } + + + .menu-toggle { + z-index: 10000; + } + } + + // set state + &.is-set { + + .menu-toggle { + color: $blue; + } + + .status-label { + display: block; + color: $blue; + } + } + + float: left; + padding: 21px 0 0; } - } -} + } -.toggle-button-sections { - display: none; - position: relative; - float: right; - margin-top: 10px; + .item-actions { + margin-top: 21px; + margin-right: 12px; - font-size: 13px; - color: $darkGrey; + .edit-button, + .delete-button { + margin-top: -3px; + } + } - &.is-shown { - display: block; - } + .expand-collapse-icon { + float: left; + margin: 29px 6px 16px 16px; + @include transition(none); - .ss-icon { - @include border-radius(20px); - position: relative; - top: -1px; - display: inline-block; - margin-right: 2px; - line-height: 5px; - font-size: 11px; - } + &.expand { + background-position: 0 0; + } - .label { - display: inline-block; - } -} + &.collapsed { + + } + } -.new-section-name, -.new-subsection-name-input { - width: 515px; -} + .drag-handle { + margin-left: 11px; + } + } -.new-section-name-save, -.new-subsection-name-save { - @include blue-button; - padding: 4px 20px 7px; - margin: 0 5px; - color: #fff !important; -} + h3 { + font-size: 19px; + font-weight: 700; + color: $blue; + } -.new-section-name-cancel, -.new-subsection-name-cancel { - @include white-button; - padding: 4px 20px 7px; - color: #8891a1 !important; -} + .section-name-span { + cursor: pointer; + @include transition(color .15s); -.dummy-calendar { - display: none; - position: absolute; - top: 55px; - left: 110px; - z-index: 9999; - border: 1px solid #3C3C3C; - @include box-shadow(0 1px 15px rgba(0, 0, 0, .2)); -} + &:hover { + color: $orange; + } + } -.unit-name-input { - padding: 20px 40px; + .section-name-form { + margin-bottom: 15px; + } - label { - display: block; - } + .section-name-edit { + input { + font-size: 16px; + } + + .save-button { + @include blue-button; + padding: 7px 20px 7px; + margin-right: 5px; + } - input { - width: 100%; - font-size: 20px; - } -} + .cancel-button { + @include white-button; + padding: 7px 20px 7px; + } + } -.preview { - background: url(../img/preview.jpg) center top no-repeat; -} + h4 { + font-size: 12px; + color: #878e9d; -.edit-subsection-publish-settings { - display: none; - position: fixed; - top: 100px; - left: 50%; - z-index: 99999; - width: 600px; - margin-left: -300px; - background: #fff; - text-align: center; + strong { + font-weight: bold; + } + } - .settings { - padding: 40px; - } + .list-header { + @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); + background-color: #ced2db; + border-radius: 3px 3px 0 0; + } - h3 { - font-size: 34px; - font-weight: 300; - } + .subsection-list { + margin: 0 12px; - .picker { - margin: 30px 0 65px; - } + > ol { + @include tree-view; + border-top-width: 0; + } + } - .description { - margin-top: 30px; - font-size: 14px; - line-height: 20px; - } + &.new-section { - strong { - font-weight: 700; - } + header { + height: auto; + @include clearfix(); + } - .start-date, - .start-time { - font-size: 19px; - } + .expand-collapse-icon { + visibility: hidden; + } - .save-button { - @include blue-button; - margin-right: 10px; - } + .item-details { + padding: 25px 0 0 0; - .cancel-button { - @include white-button; - } + .section-name { + float: none; + width: 100%; + } + } + } + } - .save-button, - .cancel-button { - font-size: 16px; - } -} - -.collapse-all-button { - float: right; - margin-top: 10px; - font-size: 13px; - color: $darkGrey; -} - -// sort/drag and drop -.ui-droppable { - @include transition (padding 0.5s ease-in-out 0s); - min-height: 20px; - padding: 0; - - &.dropover { - padding: 15px 0; - } -} - -.ui-draggable-dragging { - @include box-shadow(0 1px 2px rgba(0, 0, 0, .3)); - border: 1px solid $darkGrey; - opacity : 0.2; - &:hover { - opacity : 1.0; - .section-item { - background: $yellow !important; - } - } - - // hiding unit button - temporary fix until this semantically corrected - .new-unit-item { + .toggle-button-sections { display: none; - } -} + position: relative; + float: right; + margin-top: 10px; -ol.ui-droppable .branch:first-child .section-item { - border-top: none; -} + font-size: 13px; + color: $darkGrey; + &.is-shown { + display: block; + } + + .ss-icon { + @include border-radius(20px); + position: relative; + top: -1px; + display: inline-block; + margin-right: 2px; + line-height: 5px; + font-size: 11px; + } + + .label { + display: inline-block; + } + } + + .new-section-name, + .new-subsection-name-input { + width: 515px; + } + + .new-section-name-save, + .new-subsection-name-save { + @include blue-button; + padding: 4px 20px 7px; + margin: 0 5px; + color: #fff !important; + } + + .new-section-name-cancel, + .new-subsection-name-cancel { + @include white-button; + padding: 4px 20px 7px; + color: #8891a1 !important; + } + + .dummy-calendar { + display: none; + position: absolute; + top: 55px; + left: 110px; + z-index: 9999; + border: 1px solid #3C3C3C; + @include box-shadow(0 1px 15px rgba(0, 0, 0, .2)); + } + + .preview { + background: url(../img/preview.jpg) center top no-repeat; + } + + .edit-subsection-publish-settings { + display: none; + position: fixed; + top: 100px; + left: 50%; + z-index: 99999; + width: 600px; + margin-left: -300px; + background: #fff; + text-align: center; + + .settings { + padding: 40px; + } + + h3 { + font-size: 34px; + font-weight: 300; + } + + .picker { + margin: 30px 0 65px; + } + + .description { + margin-top: 30px; + font-size: 14px; + line-height: 20px; + } + + strong { + font-weight: 700; + } + + .start-date, + .start-time { + font-size: 19px; + } + + .save-button { + @include blue-button; + margin-right: 10px; + } + + .cancel-button { + @include white-button; + } + + .save-button, + .cancel-button { + font-size: 16px; + } + } + + .collapse-all-button { + float: right; + margin-top: 10px; + font-size: 13px; + color: $darkGrey; + } + + // sort/drag and drop + .ui-droppable { + @include transition (padding 0.5s ease-in-out 0s); + min-height: 20px; + padding: 0; + + &.dropover { + padding: 15px 0; + } + } + + .ui-draggable-dragging { + @include box-shadow(0 1px 2px rgba(0, 0, 0, .3)); + border: 1px solid $darkGrey; + opacity : 0.2; + &:hover { + opacity : 1.0; + .section-item { + background: $yellow !important; + } + } + + // hiding unit button - temporary fix until this semantically corrected + .new-unit-item { + display: none; + } + } + + ol.ui-droppable .branch:first-child .section-item { + border-top: none; + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index 83856c773e..bc9bccf1bb 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -1,7 +1,8 @@ // studio - views - course static pages // ==================== -.static-pages { +body.course.static-pages { + .new-static-page-button { @include grey-button; display: block; diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss index 9b0789ba52..3c6bfa9f11 100644 --- a/cms/static/sass/views/_subsection.scss +++ b/cms/static/sass/views/_subsection.scss @@ -1,297 +1,449 @@ // studio - views - course subsection // ==================== -.subsection .main-wrapper { - margin: 40px; -} +body.course.subsection { -.subsection .inner-wrapper { - @include clearfix(); -} + .unit-settings { + .window-contents { + padding: 10px 20px; + } -.subsection-body { - padding: 32px 40px; - @include clearfix; + .unit-actions { + border-bottom: none; + padding-bottom: 0; + } - > div { - margin-bottom: 40px; - } + .published-alert { + display: none; + padding: 10px; + border: 1px solid #edbd3c; + border-radius: 3px; + background: #fbf6e1; + font-size: 14px; + line-height: 1.4; - input { - font-size: 14px; - } + div { + margin-top: 15px; + } + } - .unit-subtitle { - display: block; - width: 100%; - } + input[type="radio"] { + margin-right: 7px; + } - .sortable-unit-list { - ol { - @include tree-view; - } - } + .status { + font-size: 12px; - .policy-list { - input[disabled] { - border: none; - @include box-shadow(none); - } + strong { + font-weight: 700; + } + } - .policy-list-name { - margin-right: 5px; - margin-bottom: 10px; - } + .preview-button, .view-button { + @include white-button; + margin-bottom: 10px; + } - .policy-list-value { - width: 320px; - margin-right: 10px; - } - } + .publish-button { + @include orange-button; + } - .policy-list-element { - .save-button, - .cancel-button { - display: none; - } + .delete-button { + @include blue-button; + } - .edit-icon { - margin-right: 8px; - } + .delete-draft { + display: inline-block; + } - &.editing, - &.new-policy-list-element { - .policy-list-name, - .policy-list-value { - border: 1px solid #b0b6c2; - @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); - background-color: #edf1f5; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); - } - } - } - - .new-policy-list-element { - padding: 10px 10px 0; - margin: 0 -10px 10px; - border-radius: 3px; - background: $mediumGrey; - - .save-button { - @include blue-button; - margin-bottom: 10px; - } - - .cancel-button { - @include white-button; - } - - .edit-icon { - display: none; - } - - .delete-icon { - display: none; - } - } - - .new-policy-item { - margin: 10px 0; - - .plus-icon-small { - position: relative; - top: -1px; - vertical-align: middle; - } - } -} - -.subsection-name-input { - label { - display: block; - } - - input { - width: 100%; - font-size: 20px; - } -} - -.scheduled-date-input, -.due-date-input { - @include clearfix; - - .date-input, - .time-input { - display: inline-block; - width: 100px; - } - - .inherits-check { - label { - font-size: 13px; - } - } - - .notice { - margin-top: 6px; - font-size: 11px; - color: #999; - } -} - -.due-date-input { - label { - display: inline-block !important; - margin-right: 10px; - } - - a { - font-size: 11px; - font-weight: bold; - text-transform: uppercase; - } - - .date-setter { - @include clearfix; - display: none; - } - - .remove-date { - display: block; - } -} - -.row.visibility { - label { - display: inline-block !important; - margin-right: 10px; - line-height: 21px; - } - - a { - display: inline-block; - height: 31px; - margin-right: 8px; - vertical-align: middle; - font-size: 11px; - font-weight: 700; - line-height: 31px; - text-transform: uppercase; - } - - .large-toggle { - width: 41px; - background: url(../img/large-toggles.png) no-repeat; - background-position: 0 -50px; - - .hidden { - background-position: 0 -5px; - } - } -} - -.gradable { - - label { - display: inline-block; - vertical-align: top; + .delete-button, + .preview-button, + .publish-button, + .view-button { + font-size: 11px; + margin-top: 10px; + padding: 6px 15px 8px; + } } - .gradable-status { - position: relative; - top: -4px; - display: inline-block; - margin-left: 10px; - width: 65%; + .unit-history { + &.collapsed { + h4 { + border-bottom: none; + border-radius: 3px; + } - .status-label { - margin: 0; - padding: 0; - background: transparent; - color: $blue; - border: none; + .window-contents { + display: none; + } + } + + ol { + border: 1px solid #ced2db; + + li { + display: block; + padding: 6px 8px 8px 10px; + background: #edf1f5; + font-size: 12px; + + &:hover { + background: #fffcf1; + + .item-actions { + display: block; + } + } + + &.checked { + background: #d1dae3; + } + + .item-actions { + display: none; + } + + input[type="radio"] { + margin-right: 7px; + } + } + } + } + + .unit-location { + .url { + width: 100%; + margin-bottom: 10px; + @include box-shadow(none); + } + + .draft-tag, + .hidden-tag, + .private-tag, + .has-new-draft-tag { + font-size: 8px; + } + + .window-contents > ol { + @include tree-view; + + .section-item { + display: inline-block; + width: 100%; + font-size: 11px; + padding: 2px 8px 4px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + @include box-sizing(border-box); + } + + ol { + .section-item { + padding-left: 20px; + } + + .new-unit-item { + margin-left: 20px; + } + } + + ol ol { + .section-item { + padding-left: 34px; + } + + .new-unit-item { + margin: 0 0 10px 41px; + } + } + } + } + + .subsection-body { + padding: 32px 40px; + @include clearfix; + + > div { + margin-bottom: 40px; + } + + input { + font-size: 14px; + } + + .unit-subtitle { + display: block; + width: 100%; + } + + .sortable-unit-list { + ol { + @include tree-view; + } + } + + .policy-list { + input[disabled] { + border: none; + @include box-shadow(none); + } + + .policy-list-name { + margin-right: 5px; + margin-bottom: 10px; + } + + .policy-list-value { + width: 320px; + margin-right: 10px; + } + } + + .policy-list-element { + .save-button, + .cancel-button { + display: none; + } + + .edit-icon { + margin-right: 8px; + } + + &.editing, + &.new-policy-list-element { + .policy-list-name, + .policy-list-value { + border: 1px solid #b0b6c2; + @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); + background-color: #edf1f5; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); + } + } + } + + .new-policy-list-element { + padding: 10px 10px 0; + margin: 0 -10px 10px; + border-radius: 3px; + background: $mediumGrey; + + .save-button { + @include blue-button; + margin-bottom: 10px; + } + + .cancel-button { + @include white-button; + } + + .edit-icon { + display: none; + } + + .delete-icon { + display: none; + } + } + + .new-policy-item { + margin: 10px 0; + + .plus-icon-small { + position: relative; + top: -1px; + vertical-align: middle; + } + } + } + + .subsection-name-input { + label { + display: block; + } + + input { + width: 100%; + font-size: 20px; + } + } + + .scheduled-date-input, + .due-date-input { + @include clearfix; + + .date-input, + .time-input { + display: inline-block; + width: 100px; + } + + .inherits-check { + label { + font-size: 13px; + } + } + + .notice { + margin-top: 6px; + font-size: 11px; + color: #999; + } + } + + .due-date-input { + label { + display: inline-block !important; + margin-right: 10px; + } + + a { font-size: 11px; font-weight: bold; text-transform: uppercase; } - .menu-toggle { - z-index: 100; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 20px; - background: transparent; - - &:hover, &.is-active { - color: $blue; - } - } - - .menu { - z-index: 1; - position: absolute; - top: -12px; - left: -7px; + .date-setter { + @include clearfix; display: none; - width: 100%; - margin: 0; - padding: 8px 12px; - opacity: 0.0; - background: $white; - border: 1px solid $mediumGrey; - font-size: 12px; - @include border-radius(4px); - @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); - @include transition(opacity .15s); - - - li { - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; - - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; - } - } - - a { - - &.is-selected { - font-weight: bold; - } - } } - // dropdown state - &.is-active { + .remove-date { + display: block; + } + } - .menu { - z-index: 10000; - display: block; - opacity: 1.0; - } - - .menu-toggle { - z-index: 1000; - } + .row.visibility { + label { + display: inline-block !important; + margin-right: 10px; + line-height: 21px; } - // set state - &.is-set { + a { + display: inline-block; + height: 31px; + margin-right: 8px; + vertical-align: middle; + font-size: 11px; + font-weight: 700; + line-height: 31px; + text-transform: uppercase; + } - .menu-toggle { - color: $blue; + .large-toggle { + width: 41px; + background: url(../img/large-toggles.png) no-repeat; + background-position: 0 -50px; + + .hidden { + background-position: 0 -5px; } + } + } + + .gradable { + + label { + display: inline-block; + vertical-align: top; + } + + .gradable-status { + position: relative; + top: -4px; + display: inline-block; + margin-left: 10px; + width: 65%; .status-label { - display: block; + margin: 0; + padding: 0; + background: transparent; color: $blue; + border: none; + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + } + + .menu-toggle { + z-index: 100; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 20px; + background: transparent; + + &:hover, &.is-active { + color: $blue; + } + } + + .menu { + z-index: 1; + position: absolute; + top: -12px; + left: -7px; + display: none; + width: 100%; + margin: 0; + padding: 8px 12px; + opacity: 0.0; + background: $white; + border: 1px solid $mediumGrey; + font-size: 12px; + @include border-radius(4px); + @include box-shadow(0 1px 2px rgba(0, 0, 0, .2)); + @include transition(opacity .15s); + + + li { + margin-bottom: 3px; + padding-bottom: 3px; + border-bottom: 1px solid $lightGrey; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border: none; + } + } + + a { + + &.is-selected { + font-weight: bold; + } + } + } + + // dropdown state + &.is-active { + + .menu { + z-index: 10000; + display: block; + opacity: 1.0; + } + + .menu-toggle { + z-index: 1000; + } + } + + // set state + &.is-set { + + .menu-toggle { + color: $blue; + } + + .status-label { + display: block; + color: $blue; + } } } } diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index bcd3fdb912..a9ce1c8c4d 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -1,670 +1,687 @@ -// studio - views - course unit +// studio - views - unit // ==================== -.unit .main-wrapper { - @include clearfix(); - margin: 40px; -} +body.course.unit { -//Problem Selector tab menu requirements -.js .tabs .tab { - display: none; -} -//end problem selector reqs - -.main-column { - clear: both; - float: left; - width: 70%; -} - -.unit-body.published { - .components > li { - border: none; - - .rendered-component { - padding: 0 20px; - } + .unit .main-wrapper { + @include clearfix(); + margin: 40px; } -} -.unit-body { - .breadcrumbs { - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #cbd1db; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); - background-color: #edf1f5; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); - @include clearfix; + //Problem Selector tab menu requirements + .js .tabs .tab { + display: none; + } + //end problem selector reqs - li { - float: left; - } + .main-column { + clear: both; + float: left; + width: 70%; + } - a, - .current-page { - display: block; - padding: 15px 35px 15px 30px; - font-size: 14px; - background: url(../img/breadcrumb-arrow.png) no-repeat right center; + .unit-body.published { + .components > li { + border: none; + + .rendered-component { + padding: 0 20px; + } } } - h2 { - margin: 30px 40px 30px 0; - color: #646464; - font-size: 19px; - font-weight: 300; - letter-spacing: 1px; - text-transform: uppercase; - } + .unit-body { + + .unit-name-input { + padding: 20px 40px; - .components { - - > li { - position: relative; - z-index: 10; - margin: 20px 40px; - - - - .title { - margin: 0 0 15px 0; - color: $mediumGrey; - - .value { - } + label { + display: block; } - &.new-component-item { - margin: 20px 0px; - border-top: 1px solid $mediumGrey; - box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; - background-color: $lightGrey; - margin-bottom: 0px; - padding-bottom: 20px; + input { + width: 100%; + font-size: 20px; + } + } + + .breadcrumbs { + border-radius: 3px 3px 0 0; + border-bottom: 1px solid #cbd1db; + @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); + background-color: #edf1f5; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); + @include clearfix; - .new-component-button { - display: block; - padding: 20px; - text-align: center; - color: #edf1f5; + li { + float: left; + } + + a, + .current-page { + display: block; + padding: 15px 35px 15px 30px; + font-size: 14px; + background: url(../img/breadcrumb-arrow.png) no-repeat right center; + } + } + + h2 { + margin: 30px 40px 30px 0; + color: #646464; + font-size: 19px; + font-weight: 300; + letter-spacing: 1px; + text-transform: uppercase; + } + + .components { + + > li { + position: relative; + z-index: 10; + margin: 20px 40px; + + + + .title { + margin: 0 0 15px 0; + color: $mediumGrey; + + .value { + } } - h5 { + &.new-component-item { margin: 20px 0px; - color: #fff; - font-weight: 600; - font-size: 18px; - } + border-top: 1px solid $mediumGrey; + box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; + background-color: $lightGrey; + margin-bottom: 0px; + padding-bottom: 20px; - .rendered-component { - display: none; - background: #fff; - border-radius: 3px 3px 0 0; - } - - .new-component-type { - - a, - li { - display: inline-block; + .new-component-button { + display: block; + padding: 20px; + text-align: center; + color: #edf1f5; } - a { - border: 1px solid $mediumGrey; - width: 100px; - height: 100px; + h5 { + margin: 20px 0px; color: #fff; - margin-right: 15px; - margin-bottom: 20px; - border-radius: 8px; - font-size: 15px; - line-height: 14px; - text-align: center; - @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); + font-weight: 600; + font-size: 18px; + } - .name { - position: absolute; - bottom: 5px; - left: 0; - width: 100%; - padding: 10px; - @include box-sizing(border-box); + .rendered-component { + display: none; + background: #fff; + border-radius: 3px 3px 0 0; + } + + .new-component-type { + + a, + li { + display: inline-block; + } + + a { + border: 1px solid $mediumGrey; + width: 100px; + height: 100px; color: #fff; + margin-right: 15px; + margin-bottom: 20px; + border-radius: 8px; + font-size: 15px; + line-height: 14px; + text-align: center; + @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); + + .name { + position: absolute; + bottom: 5px; + left: 0; + width: 100%; + padding: 10px; + @include box-sizing(border-box); + color: #fff; + } } } - } - .new-component-templates { - display: none; - margin: 20px 40px 20px 40px; - border-radius: 3px; - border: 1px solid $mediumGrey; - background-color: #fff; - @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); - @include clearfix; - - .cancel-button { - margin: 20px 0px 10px 10px; - @include white-button; - } - - .problem-type-tabs { + .new-component-templates { display: none; - } + margin: 20px 40px 20px 40px; + border-radius: 3px; + border: 1px solid $mediumGrey; + background-color: #fff; + @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset); + @include clearfix; - // specific menu types - &.new-component-problem { - padding-bottom:10px; - - .ss-icon, .editor-indicator { - display: inline-block; + .cancel-button { + margin: 20px 0px 10px 10px; + @include white-button; } .problem-type-tabs { - display: inline-block; - } - } - } - - .new-component-type, - .new-component-template { - @include clearfix; - - a { - position: relative; - border: 1px solid $darkGreen; - background: tint($green,20%); - color: #fff; - - &:hover { - background: $brightGreen; - } - } - } - - .problem-type-tabs { - list-style-type: none; - border-radius: 0; - width: 100%; - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: $lightBluishGrey; - @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); - - li:first-child { - margin-left: 20px; - } - - li { - float:left; - display:inline-block; - text-align:center; - width: auto; - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: tint($lightBluishGrey, 10%); - @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); - opacity:.8; - - &:hover { - opacity:1; - background-color: tint($lightBluishGrey, 20%); - } - - &.ui-state-active { - border: 0px; - @include active; - opacity:1; - } - } - - a{ - display: block; - padding: 15px 25px; - font-size: 15px; - line-height: 16px; - text-align: center; - color: #3c3c3c; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); - } - } - - .new-component-template { - - a { - background: #fff; - border: 0px; - color: #3c3c3c; - @include transition (none); - - &:hover { - background: tint($green,30%); - color: #fff; - @include transition(background-color .15s); - } - } - - li { - border:none; - border-bottom: 1px dashed $lightGrey; - color: #fff; - } - - li:first-child { - a { - border-top: 0px; - } - } - - li:nth-child(2) { - a { - border-radius: 0px; - } - } - - a { - @include clearfix(); - display: block; - padding: 7px 20px; - border-bottom: none; - font-weight: 500; - - .name { - float: left; - - .ss-icon { - @include transition(opacity .15s); - display: inline-block; - top: 1px; - margin-right: 5px; - opacity: 0.5; - width: 17; - height: 21px; - vertical-align: middle; - } - } - - .editor-indicator { - @include transition(opacity .15s); - float: right; - position: relative; - top: 3px; - font-size: 12px; - opacity: 0.3; - } - - .ss-icon, .editor-indicator { display: none; } - &:hover { - color: #fff; + // specific menu types + &.new-component-problem { + padding-bottom:10px; - .ss-icon { - opacity: 1.0; + .ss-icon, .editor-indicator { + display: inline-block; + } + + .problem-type-tabs { + display: inline-block; + } + } + } + + .new-component-type, + .new-component-template { + @include clearfix; + + a { + position: relative; + border: 1px solid $darkGreen; + background: tint($green,20%); + color: #fff; + + &:hover { + background: $brightGreen; + } + } + } + + .problem-type-tabs { + list-style-type: none; + border-radius: 0; + width: 100%; + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + background-color: $lightBluishGrey; + @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); + + li:first-child { + margin-left: 20px; + } + + li { + float:left; + display:inline-block; + text-align:center; + width: auto; + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + background-color: tint($lightBluishGrey, 10%); + @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); + opacity:.8; + + &:hover { + opacity:1; + background-color: tint($lightBluishGrey, 20%); + } + + &.ui-state-active { + border: 0px; + @include active; + opacity:1; + } + } + + a{ + display: block; + padding: 15px 25px; + font-size: 15px; + line-height: 16px; + text-align: center; + color: #3c3c3c; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); + } + } + + .new-component-template { + + a { + background: #fff; + border: 0px; + color: #3c3c3c; + @include transition (none); + + &:hover { + background: tint($green,30%); + color: #fff; + @include transition(background-color .15s); + } + } + + li { + border:none; + border-bottom: 1px dashed $lightGrey; + color: #fff; + } + + li:first-child { + a { + border-top: 0px; + } + } + + li:nth-child(2) { + a { + border-radius: 0px; + } + } + + a { + @include clearfix(); + display: block; + padding: 7px 20px; + border-bottom: none; + font-weight: 500; + + .name { + float: left; + + .ss-icon { + @include transition(opacity .15s); + display: inline-block; + top: 1px; + margin-right: 5px; + opacity: 0.5; + width: 17; + height: 21px; + vertical-align: middle; + } } .editor-indicator { - opacity: 1.0; + @include transition(opacity .15s); + float: right; + position: relative; + top: 3px; + font-size: 12px; + opacity: 0.3; + } + + .ss-icon, .editor-indicator { + display: none; + } + + &:hover { + color: #fff; + + .ss-icon { + opacity: 1.0; + } + + .editor-indicator { + opacity: 1.0; + } + } + } + + // specific editor types + .empty { + + a { + line-height: 1.4; + font-weight: 400; + background: #fff; + color: #3c3c3c; + + + &:hover { + background: tint($green,30%); + color: #fff; + } } } } - // specific editor types - .empty { + .new-component { + text-align: center; - a { - line-height: 1.4; - font-weight: 400; - background: #fff; - color: #3c3c3c; - - - &:hover { - background: tint($green,30%); - color: #fff; - } + h5 { + color: $darkGreen; } + } } - - .new-component { - text-align: center; - - h5 { - color: $darkGreen; - } - - } - } - } - } - - .component { - border: 1px solid $lightBluishGrey2; - border-radius: 3px; - background: #fff; - @include transition(none); - - &:hover { - border-color: #6696d7; - - .drag-handle { - background-color: $blue; - border-color: $blue; } } - &.editing { + .component { border: 1px solid $lightBluishGrey2; - z-index: auto; - - .drag-handle, - .component-actions { - display: none; - } - } - - &.component-placeholder { - border-color: #6696d7; - } - - .component-actions { - position: absolute; - top: 7px; - right: 9px; - } - - .drag-handle { - position: absolute; - display: block; - top: -1px; - right: -16px; - z-index: 10; - width: 15px; - height: 100%; - border-radius: 0 3px 3px 0; - border: 1px solid $lightBluishGrey2; - background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2; - cursor: move; - @include transition(none); - } - } - - .xmodule_display { - padding: 40px 20px 20px; - overflow-x: auto; - - h1 { - float: none; - margin-left: 0; - } - } - - .wrapper-component-editor { - z-index: 9999; - position: relative; - background: $lightBluishGrey2; - } - - .component-editor { - @include edit-box; - @include box-shadow(none); - display: none; - padding: 20px; - border-radius: 2px 2px 0 0; - - .metadata_edit { - margin-bottom: 20px; - font-size: 13px; - - li { - margin-bottom: 10px; - } - - label { - display: inline-block; - margin-right: 10px; - } - } - - h3 { - margin-bottom: 10px; - font-size: 18px; - font-weight: 700; - } - - h5 { - margin-bottom: 8px; - color: #fff; - font-weight: 700; - } - - .save-button { - margin-top: 10px; - margin: 15px 8px 0 0; - } - } -} - -.unit-settings { - .window-contents { - padding: 10px 20px; - } - - .unit-actions { - border-bottom: none; - padding-bottom: 0; - } - - .published-alert { - display: none; - padding: 10px; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - font-size: 14px; - line-height: 1.4; - - div { - margin-top: 15px; - } - } - - input[type="radio"] { - margin-right: 7px; - } - - .status { - font-size: 12px; - - strong { - font-weight: 700; - } - } - - .preview-button, .view-button { - @include white-button; - margin-bottom: 10px; - } - - .publish-button { - @include orange-button; - } - - .delete-button { - @include blue-button; - } - - .delete-draft { - display: inline-block; - } - - .delete-button, - .preview-button, - .publish-button, - .view-button { - font-size: 11px; - margin-top: 10px; - padding: 6px 15px 8px; - } -} - -.unit-history { - &.collapsed { - h4 { - border-bottom: none; border-radius: 3px; - } - - .window-contents { - display: none; - } - } - - ol { - border: 1px solid #ced2db; - - li { - display: block; - padding: 6px 8px 8px 10px; - background: #edf1f5; - font-size: 12px; + background: #fff; + @include transition(none); &:hover { - background: #fffcf1; + border-color: #6696d7; - .item-actions { - display: block; + .drag-handle { + background-color: $blue; + border-color: $blue; } } - &.checked { - background: #d1dae3; + &.editing { + border: 1px solid $lightBluishGrey2; + z-index: auto; + + .drag-handle, + .component-actions { + display: none; + } } - .item-actions { - display: none; + &.component-placeholder { + border-color: #6696d7; } - input[type="radio"] { - margin-right: 7px; + .component-actions { + position: absolute; + top: 7px; + right: 9px; + } + + .drag-handle { + position: absolute; + display: block; + top: -1px; + right: -16px; + z-index: 10; + width: 15px; + height: 100%; + border-radius: 0 3px 3px 0; + border: 1px solid $lightBluishGrey2; + background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2; + cursor: move; + @include transition(none); + } + } + + .xmodule_display { + padding: 40px 20px 20px; + overflow-x: auto; + + h1 { + float: none; + margin-left: 0; + } + } + + .wrapper-component-editor { + z-index: 9999; + position: relative; + background: $lightBluishGrey2; + } + + .component-editor { + @include edit-box; + @include box-shadow(none); + display: none; + padding: 20px; + border-radius: 2px 2px 0 0; + + .metadata_edit { + margin-bottom: 20px; + font-size: 13px; + + li { + margin-bottom: 10px; + } + + label { + display: inline-block; + margin-right: 10px; + } + } + + h3 { + margin-bottom: 10px; + font-size: 18px; + font-weight: 700; + } + + h5 { + margin-bottom: 8px; + color: #fff; + font-weight: 700; + } + + .save-button { + margin-top: 10px; + margin: 15px 8px 0 0; } } } -} -.unit-location { - .url { - width: 100%; - margin-bottom: 10px; - @include box-shadow(none); - } + .unit-settings { + .window-contents { + padding: 10px 20px; + } - .draft-tag, - .hidden-tag, - .private-tag, - .has-new-draft-tag { - font-size: 8px; - } + .unit-actions { + border-bottom: none; + padding-bottom: 0; + } - .window-contents > ol { - @include tree-view; + .published-alert { + display: none; + padding: 10px; + border: 1px solid #edbd3c; + border-radius: 3px; + background: #fbf6e1; + font-size: 14px; + line-height: 1.4; - .section-item { + div { + margin-top: 15px; + } + } + + input[type="radio"] { + margin-right: 7px; + } + + .status { + font-size: 12px; + + strong { + font-weight: 700; + } + } + + .preview-button, .view-button { + @include white-button; + margin-bottom: 10px; + } + + .publish-button { + @include orange-button; + } + + .delete-button { + @include blue-button; + } + + .delete-draft { display: inline-block; - width: 100%; + } + + .delete-button, + .preview-button, + .publish-button, + .view-button { font-size: 11px; - padding: 2px 8px 4px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - @include box-sizing(border-box); + margin-top: 10px; + padding: 6px 15px 8px; + } + } + + .unit-history { + &.collapsed { + h4 { + border-bottom: none; + border-radius: 3px; + } + + .window-contents { + display: none; + } } ol { - .section-item { - padding-left: 20px; - } + border: 1px solid #ced2db; - .new-unit-item { - margin-left: 20px; - } - } + li { + display: block; + padding: 6px 8px 8px 10px; + background: #edf1f5; + font-size: 12px; - ol ol { - .section-item { - padding-left: 34px; - } + &:hover { + background: #fffcf1; - .new-unit-item { - margin: 0 0 10px 41px; + .item-actions { + display: block; + } + } + + &.checked { + background: #d1dae3; + } + + .item-actions { + display: none; + } + + input[type="radio"] { + margin-right: 7px; + } } } } -} -.edit-state-draft { - .visibility, - - .edit-draft-message, - .view-button { - display: none; - } - - .published-alert { - display: block; - } -} - -.edit-state-public { - .delete-draft, - .component-actions, - .new-component-item, - .editing-draft-alert, - .publish-draft-message, - .preview-button { - display: none; - } - - .published-alert { - display: block; - } - - .drag-handle { - display: none !important; - } -} - -.edit-state-private { - .delete-draft, - .publish-draft, - .editing-draft-alert, - .create-draft, - .view-button { - display: none; - } -} - -// editing units from courseware -body.unit { - - .component { - padding-top: 30px; - - .component-actions { - @include box-sizing(border-box); - position: absolute; + .unit-location { + .url { width: 100%; - padding: 15px; - top: 0; - left: 0; - border-bottom: 1px solid $lightBluishGrey2; - background: $lightGrey; + margin-bottom: 10px; + @include box-shadow(none); } - &.editing { - padding-top: 0; + .draft-tag, + .hidden-tag, + .private-tag, + .has-new-draft-tag { + font-size: 8px; + } + + .window-contents > ol { + @include tree-view; + + .section-item { + display: inline-block; + width: 100%; + font-size: 11px; + padding: 2px 8px 4px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + @include box-sizing(border-box); + } + + ol { + .section-item { + padding-left: 20px; + } + + .new-unit-item { + margin-left: 20px; + } + } + + ol ol { + .section-item { + padding-left: 34px; + } + + .new-unit-item { + margin: 0 0 10px 41px; + } + } } } -} + + .edit-state-draft { + .visibility, + + .edit-draft-message, + .view-button { + display: none; + } + + .published-alert { + display: block; + } + } + + .edit-state-public { + .delete-draft, + .component-actions, + .new-component-item, + .editing-draft-alert, + .publish-draft-message, + .preview-button { + display: none; + } + + .published-alert { + display: block; + } + + .drag-handle { + display: none !important; + } + } + + .edit-state-private { + .delete-draft, + .publish-draft, + .editing-draft-alert, + .create-draft, + .view-button { + display: none; + } + } + + // editing units from courseware + body.unit { + + .component { + padding-top: 30px; + + .component-actions { + @include box-sizing(border-box); + position: absolute; + width: 100%; + padding: 15px; + top: 0; + left: 0; + border-bottom: 1px solid $lightBluishGrey2; + background: $lightGrey; + } + + &.editing { + padding-top: 0; + } + } + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss index 1a4a54ca5e..8d92c9d860 100644 --- a/cms/static/sass/views/_updates.scss +++ b/cms/static/sass/views/_updates.scss @@ -1,7 +1,8 @@ // studio - views - course updates // ==================== -.course-info { +body.course.updates { + h2 { margin-bottom: 24px; font-size: 22px; diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss index 6423bddd75..ecaa319707 100644 --- a/cms/static/sass/views/_users.scss +++ b/cms/static/sass/views/_users.scss @@ -1,7 +1,8 @@ // studio - views - course users // ==================== -.users { +body.course.users { + .new-user-form { display: none; padding: 15px 20px; From 06b118ae33f8b1d5e7abd8b4c1a400e26f98c738 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 15 Mar 2013 15:23:03 -0400 Subject: [PATCH 08/17] studio - sass cleanup: resolved static pages display issue after local merge master --- cms/static/sass/views/_static-pages.scss | 50 ++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index bc9bccf1bb..759b03cfc7 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -20,6 +20,51 @@ body.course.static-pages { margin: 0 0 5px 0; } } + + .wrapper-component-editor { + z-index: 9999; + position: relative; + background: $lightBluishGrey2; + } + + .component-editor { + @include edit-box; + @include box-shadow(none); + display: none; + padding: 20px; + border-radius: 2px 2px 0 0; + + .metadata_edit { + margin-bottom: 20px; + font-size: 13px; + + li { + margin-bottom: 10px; + } + + label { + display: inline-block; + margin-right: 10px; + } + } + + h3 { + margin-bottom: 10px; + font-size: 18px; + font-weight: 700; + } + + h5 { + margin-bottom: 8px; + color: #fff; + font-weight: 700; + } + + .save-button { + margin-top: 10px; + margin: 15px 8px 0 0; + } + } } .component-editor { @@ -39,6 +84,7 @@ body.course.static-pages { } .component { + position: relative; border: 1px solid $mediumGrey; border-top: none; @@ -60,10 +106,13 @@ body.course.static-pages { } .drag-handle { + position: absolute; + display: block; top: 0; right: 0; z-index: 11; width: 35px; + height: 100%; border: none; background: url(../img/drag-handles.png) center no-repeat #fff; @@ -73,6 +122,7 @@ body.course.static-pages { } .component-actions { + position: absolute; top: 26px; right: 44px; } From a1ba97376a04644f30fb765fdd14becc98e6fdf6 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Sat, 16 Mar 2013 12:18:35 -0400 Subject: [PATCH 09/17] studio - sass cleanup: further revisions and box-sizing all elements for consistency --- cms/static/sass/_base.scss | 2 +- cms/static/sass/_reset.scss | 46 ++++++++----------------------------- 2 files changed, 11 insertions(+), 37 deletions(-) diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index bdafbad09a..438b4460ac 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -1,7 +1,7 @@ // studio - base styling // ==================== -// basic reset +// basic setup html { font-size: 62.5%; overflow-y: scroll; diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss index 8a7e7e9835..4d87d65a07 100644 --- a/cms/static/sass/_reset.scss +++ b/cms/static/sass/_reset.scss @@ -1,6 +1,10 @@ // studio - utilities - reset // ==================== +* { + @include box-sizing(border-box); +} + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -21,7 +25,7 @@ time, mark, audio, video { font: inherit; vertical-align: baseline; } -/* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; @@ -41,12 +45,6 @@ q:before, q:after { content: none; } -/* remember to define visible focus styles! -:focus { - outline: ?????; -} */ - -/* remember to highlight inserts somehow! */ ins { text-decoration: none; } @@ -59,10 +57,11 @@ table { border-spacing: 0; } -/* Reset styles to remove ui-lightness jquery ui theme -from the tabs component (used in the add component problem tab menu) -*/ +// ==================== +// grandfathered styles + +// reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu) .ui-tabs { padding: 0; white-space: normal; @@ -121,10 +120,7 @@ from the tabs component (used in the add component problem tab menu) padding: 0; } -/* reapplying the tab styles from unit.scss after -removing jquery ui ui-lightness styling -*/ - +// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling .problem-type-tabs { border:none; list-style-type: none; @@ -149,26 +145,4 @@ removing jquery ui ui-lightness styling border: 0px; } } -/* - li { - float:left; - display:inline-block; - text-align:center; - width: auto; - //@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - //background-color: tint($lightBluishGrey, 20%); - //@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); - opacity:.8; - - &:hover { - opacity:1; - } - - &.current { - border: 0px; - //@include active; - opacity:1; - } - } -*/ } \ No newline at end of file From af136e75ca77e0ec3c4dfb343102ba549e4918ae Mon Sep 17 00:00:00 2001 From: Don Mitchell Date: Tue, 19 Mar 2013 18:07:46 -0400 Subject: [PATCH 10/17] Fix bug 249 the ugly way (decerebrate the moronically impotent model) --- cms/static/coffee/src/views/unit.coffee | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee index 7f5fa4adce..3bf049d31b 100644 --- a/cms/static/coffee/src/views/unit.coffee +++ b/cms/static/coffee/src/views/unit.coffee @@ -109,7 +109,14 @@ class CMS.Views.UnitEdit extends Backbone.View id: $component.data('id') }, => $component.remove() - @model.save(children: @components()) + # b/c we don't vigilantly keep children up to date + # get rid of it before it hurts someone + # sorry for the js, i couldn't figure out the coffee equivalent + `_this.model.save({children: _this.components()}, + {success: function(model) { + model.unset('children'); + }} + );` ) deleteDraft: (event) -> From 8cf2cc6f78c34b8f16506e291c7993f71b3ccb32 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 20 Mar 2013 10:42:35 -0400 Subject: [PATCH 11/17] studio - sass cleanup: local merge with master and small comment/organization tweaks to variables and base-styles --- cms/static/sass/_variables.scss | 4 ++-- cms/static/sass/base-style.scss | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 78b6f2b221..15654fe3c4 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -15,7 +15,6 @@ $fg-min-width: 900px; // type $sans-serif: 'Open Sans', $verdana; $body-line-height: golden-ratio(.875em, 1); -$error-red: rgb(253, 87, 87); // colors - new for re-org $black: rgb(0,0,0); @@ -97,4 +96,5 @@ $brightGreen: rgb(22, 202, 87); $disabledGreen: rgb(124, 206, 153); $darkGreen: rgb(52, 133, 76); $lightBluishGrey: rgb(197, 207, 223); -$lightBluishGrey2: rgb(213, 220, 228); \ No newline at end of file +$lightBluishGrey2: rgb(213, 220, 228); +$error-red: rgb(253, 87, 87); \ No newline at end of file diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index b092f0054b..c7ec38e756 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -46,5 +46,6 @@ @import 'assets/content-types'; +// xblock-related @import 'module/module-styles.scss'; @import 'descriptor/module-styles.scss'; From 3b80a90bd015de2b66c23054558c99dead98d1ce Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 20 Mar 2013 16:54:14 -0400 Subject: [PATCH 12/17] studio - sass cleanup: adding in more color variables, proofing box-sizing and older/rougher unit scss --- cms/static/sass/_reset.scss | 6 +-- cms/static/sass/_variables.scss | 68 +++++++++++++++++++++++++++++++- cms/static/sass/views/_unit.scss | 40 ++++++++----------- 3 files changed, 86 insertions(+), 28 deletions(-) diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss index 4d87d65a07..87a6e51232 100644 --- a/cms/static/sass/_reset.scss +++ b/cms/static/sass/_reset.scss @@ -1,9 +1,9 @@ // studio - utilities - reset // ==================== -* { - @include box-sizing(border-box); -} +// * { +// @include box-sizing(border-box); +// } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 15654fe3c4..c43286de72 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -18,7 +18,15 @@ $body-line-height: golden-ratio(.875em, 1); // colors - new for re-org $black: rgb(0,0,0); +$black-t0: rgba(0,0,0,0.125); +$black-t1: rgba(0,0,0,0.25); +$black-t2: rgba(0,0,0,0.50); +$black-t3: rgba(0,0,0,0.75); $white: rgb(255,255,255); +$white-t0: rgba(255,255,255,0.125); +$white-t1: rgba(255,255,255,0.25); +$white-t2: rgba(255,255,255,0.50); +$white-t3: rgba(255,255,255,0.75); $gray: rgb(127,127,127); $gray-l1: tint($gray,20%); @@ -41,6 +49,12 @@ $blue-d1: shade($blue,20%); $blue-d2: shade($blue,40%); $blue-d3: shade($blue,60%); $blue-d4: shade($blue,80%); +$blue-s1: saturate($blue,15%); +$blue-s2: saturate($blue,30%); +$blue-s3: saturate($blue,45%); +$blue-u1: desaturate($blue,15%); +$blue-u2: desaturate($blue,30%); +$blue-u3: desaturate($blue,45%); $pink: rgb(183, 37, 103); $pink-l1: tint($pink,20%); @@ -52,6 +66,29 @@ $pink-d1: shade($pink,20%); $pink-d2: shade($pink,40%); $pink-d3: shade($pink,60%); $pink-d4: shade($pink,80%); +$pink-s1: saturate($pink,15%); +$pink-s2: saturate($pink,30%); +$pink-s3: saturate($pink,45%); +$pink-u1: desaturate($pink,15%); +$pink-u2: desaturate($pink,30%); +$pink-u3: desaturate($pink,45%); + +$red: rgb(178, 6, 16); +$red-l1: tint($red,20%); +$red-l2: tint($red,40%); +$red-l3: tint($red,60%); +$red-l4: tint($red,80%); +$red-l5: tint($red,90%); +$red-d1: shade($red,20%); +$red-d2: shade($red,40%); +$red-d3: shade($red,60%); +$red-d4: shade($red,80%); +$red-s1: saturate($red,15%); +$red-s2: saturate($red,30%); +$red-s3: saturate($red,45%); +$red-u1: desaturate($red,15%); +$red-u2: desaturate($red,30%); +$red-u3: desaturate($red,45%); $green: rgb(37, 184, 90); $green-l1: tint($green,20%); @@ -63,6 +100,12 @@ $green-d1: shade($green,20%); $green-d2: shade($green,40%); $green-d3: shade($green,60%); $green-d4: shade($green,80%); +$green-s1: saturate($green,15%); +$green-s2: saturate($green,30%); +$green-s3: saturate($green,45%); +$green-u1: desaturate($green,15%); +$green-u2: desaturate($green,30%); +$green-u3: desaturate($green,45%); $yellow: rgb(231, 214, 143); $yellow-l1: tint($yellow,20%); @@ -74,6 +117,29 @@ $yellow-d1: shade($yellow,20%); $yellow-d2: shade($yellow,40%); $yellow-d3: shade($yellow,60%); $yellow-d4: shade($yellow,80%); +$yellow-s1: saturate($yellow,15%); +$yellow-s2: saturate($yellow,30%); +$yellow-s3: saturate($yellow,45%); +$yellow-u1: desaturate($yellow,15%); +$yellow-u2: desaturate($yellow,30%); +$yellow-u3: desaturate($yellow,45%); + +$orange: rgb(237, 189, 60); +$orange-l1: tint($orange,20%); +$orange-l2: tint($orange,40%); +$orange-l3: tint($orange,60%); +$orange-l4: tint($orange,80%); +$orange-l5: tint($orange,90%); +$orange-d1: shade($orange,20%); +$orange-d2: shade($orange,40%); +$orange-d3: shade($orange,60%); +$orange-d4: shade($orange,80%); +$orange-s1: saturate($orange,15%); +$orange-s2: saturate($orange,30%); +$orange-s3: saturate($orange,45%); +$orange-u1: desaturate($orange,15%); +$orange-u2: desaturate($orange,30%); +$orange-u3: desaturate($orange,45%); $shadow: rgba(0,0,0,0.2); $shadow-l1: rgba(0,0,0,0.1); @@ -82,8 +148,6 @@ $shadow-d1: rgba(0,0,0,0.4); // colors - inherited $baseFontColor: #3c3c3c; $offBlack: #3c3c3c; -$orange: #edbd3c; -$red: #b20610; $green: #108614; $lightGrey: #edf1f5; $mediumGrey: #b0b6c2; diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index a9ce1c8c4d..e74690d9ec 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -385,12 +385,6 @@ body.course.unit { border-color: #6696d7; } - .component-actions { - position: absolute; - top: 7px; - right: 9px; - } - .drag-handle { position: absolute; display: block; @@ -661,27 +655,27 @@ body.course.unit { display: none; } } +} - // editing units from courseware - body.unit { +// editing units from courseware +body.unit { - .component { - padding-top: 30px; + .component { + padding-top: 30px; - .component-actions { - @include box-sizing(border-box); - position: absolute; - width: 100%; - padding: 15px; - top: 0; - left: 0; - border-bottom: 1px solid $lightBluishGrey2; - background: $lightGrey; - } + .component-actions { + @include box-sizing(border-box); + position: absolute; + width: 100%; + padding: 15px; + top: 0; + left: 0; + border-bottom: 1px solid $lightBluishGrey2; + background: $lightGrey; + } - &.editing { - padding-top: 0; - } + &.editing { + padding-top: 0; } } } \ No newline at end of file From bd2dd9408d2402e09b51f9f53faa304eb351cef7 Mon Sep 17 00:00:00 2001 From: Don Mitchell Date: Wed, 20 Mar 2013 17:49:03 -0400 Subject: [PATCH 13/17] Unit tests and minor fixes to course_info_updates. Main fix was returning the content in same form as it was saved rather than parroting it back. --- .../contentstore/course_info_model.py | 52 +++++--- .../contentstore/tests/test_course_updates.py | 116 ++++++++++++++++-- cms/djangoapps/contentstore/views.py | 40 +++--- 3 files changed, 163 insertions(+), 45 deletions(-) diff --git a/cms/djangoapps/contentstore/course_info_model.py b/cms/djangoapps/contentstore/course_info_model.py index 8c8aed549d..589db4ac56 100644 --- a/cms/djangoapps/contentstore/course_info_model.py +++ b/cms/djangoapps/contentstore/course_info_model.py @@ -1,13 +1,15 @@ from xmodule.modulestore.exceptions import ItemNotFoundError from xmodule.modulestore import Location from xmodule.modulestore.django import modulestore -from lxml import html, etree +from lxml import html import re from django.http import HttpResponseBadRequest import logging +import django.utils -## TODO store as array of { date, content } and override course_info_module.definition_from_xml -## This should be in a class which inherits from XmlDescriptor +# # TODO store as array of { date, content } and override course_info_module.definition_from_xml +# # This should be in a class which inherits from XmlDescriptor +log = logging.getLogger(__name__) def get_course_updates(location): @@ -26,9 +28,11 @@ def get_course_updates(location): # purely to handle free formed updates not done via editor. Actually kills them, but at least doesn't break. try: - course_html_parsed = etree.fromstring(course_updates.data) - except etree.XMLSyntaxError: - course_html_parsed = etree.fromstring("
    ") + course_html_parsed = html.fromstring(course_updates.data) + except: + log.error("Cannot parse: " + course_updates.data) + escaped = django.utils.html.escape(course_updates.data) + course_html_parsed = html.fromstring("
    1. " + escaped + "
    ") # Confirm that root is
      , iterate over
    1. , pull out

      subs and then rest of val course_upd_collection = [] @@ -64,9 +68,11 @@ def update_course_updates(location, update, passed_id=None): # purely to handle free formed updates not done via editor. Actually kills them, but at least doesn't break. try: - course_html_parsed = etree.fromstring(course_updates.data) - except etree.XMLSyntaxError: - course_html_parsed = etree.fromstring("
        ") + course_html_parsed = html.fromstring(course_updates.data) + except: + log.error("Cannot parse: " + course_updates.data) + escaped = django.utils.html.escape(course_updates.data) + course_html_parsed = html.fromstring("
        1. " + escaped + "
        ") # No try/catch b/c failure generates an error back to client new_html_parsed = html.fromstring('

      1. ' + update['date'] + '

        ' + update['content'] + '
        2. ') @@ -85,12 +91,19 @@ def update_course_updates(location, update, passed_id=None): passed_id = course_updates.location.url() + "/" + str(idx) # update db record - course_updates.data = etree.tostring(course_html_parsed) + course_updates.data = html.tostring(course_html_parsed) modulestore('direct').update_item(location, course_updates.data) - return {"id" : passed_id, - "date" : update['date'], - "content" :update['content']} + if (len(new_html_parsed) == 1): + content = new_html_parsed[0].tail + else: + content = "\n".join([html.tostring(ele) + for ele in new_html_parsed[1:]]) + + return {"id": passed_id, + "date": update['date'], + "content": content} + def delete_course_update(location, update, passed_id): """ @@ -108,9 +121,11 @@ def delete_course_update(location, update, passed_id): # TODO use delete_blank_text parser throughout and cache as a static var in a class # purely to handle free formed updates not done via editor. Actually kills them, but at least doesn't break. try: - course_html_parsed = etree.fromstring(course_updates.data) - except etree.XMLSyntaxError: - course_html_parsed = etree.fromstring("
          ") + course_html_parsed = html.fromstring(course_updates.data) + except: + log.error("Cannot parse: " + course_updates.data) + escaped = django.utils.html.escape(course_updates.data) + course_html_parsed = html.fromstring("
          1. " + escaped + "
          ") if course_html_parsed.tag == 'ol': # ??? Should this use the id in the json or in the url or does it matter? @@ -121,7 +136,7 @@ def delete_course_update(location, update, passed_id): course_html_parsed.remove(element_to_delete) # update db record - course_updates.data = etree.tostring(course_html_parsed) + course_updates.data = html.tostring(course_html_parsed) store = modulestore('direct') store.update_item(location, course_updates.data) @@ -132,7 +147,6 @@ def get_idx(passed_id): """ From the url w/ idx appended, get the idx. """ - # TODO compile this regex into a class static and reuse for each call - idx_matcher = re.search(r'.*/(\d+)$', passed_id) + idx_matcher = re.search(r'.*?/?(\d+)$', passed_id) if idx_matcher: return int(idx_matcher.group(1)) diff --git a/cms/djangoapps/contentstore/tests/test_course_updates.py b/cms/djangoapps/contentstore/tests/test_course_updates.py index 6a3a1e21f7..29f387b3e6 100644 --- a/cms/djangoapps/contentstore/tests/test_course_updates.py +++ b/cms/djangoapps/contentstore/tests/test_course_updates.py @@ -1,31 +1,127 @@ from contentstore.tests.test_course_settings import CourseTestCase from django.core.urlresolvers import reverse import json +from webob.exc import HTTPServerError +from django.http import HttpResponseBadRequest class CourseUpdateTest(CourseTestCase): def test_course_update(self): # first get the update to force the creation - url = reverse('course_info', kwargs={'org': self.course_location.org, 'course': self.course_location.course, - 'name': self.course_location.name}) + url = reverse('course_info', + kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'name': self.course_location.name}) self.client.get(url) - content = '' + init_content = '' payload = {'content': content, 'date': 'January 8, 2013'} - url = reverse('course_info', kwargs={'org': self.course_location.org, 'course': self.course_location.course, - 'provided_id': ''}) + url = reverse('course_info_json', kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'provided_id': ''}) resp = self.client.post(url, json.dumps(payload), "application/json") payload = json.loads(resp.content) - self.assertHTMLEqual(content, payload['content'], "single iframe") + self.assertHTMLEqual(payload['content'], content) - url = reverse('course_info', kwargs={'org': self.course_location.org, 'course': self.course_location.course, - 'provided_id': payload['id']}) - content += '
          div

          p

          ' + first_update_url = reverse('course_info_json', + kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'provided_id': payload['id']}) + content += '
          div

          p

          ' payload['content'] = content + resp = self.client.post(first_update_url, json.dumps(payload), + "application/json") + + self.assertHTMLEqual(content, json.loads(resp.content)['content'], + "iframe w/ div") + + # now put in an evil update + content = '
            ' + payload = {'content': content, + 'date': 'January 11, 2013'} + url = reverse('course_info_json', + kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'provided_id': ''}) + resp = self.client.post(url, json.dumps(payload), "application/json") - self.assertHTMLEqual(content, json.loads(resp.content)['content'], "iframe w/ div") + payload = json.loads(resp.content) + + self.assertHTMLEqual(content, payload['content'], "self closing ol") + + url = reverse('course_info_json', + kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'provided_id': ''}) + resp = self.client.get(url) + payload = json.loads(resp.content) + self.assertTrue(len(payload) == 2) + + # now try to update a non-existent update + url = reverse('course_info_json', kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'provided_id': '9'}) + content = 'blah blah' + payload = {'content': content, + 'date': 'January 21, 2013'} + self.assertContains( + self.client.post(url, json.dumps(payload), "application/json"), + 'Failed to save', status_code=400) + + # update w/ malformed html + content = 'error' + payload = {'content': content, + 'date': 'January 11, 2013'} + url = reverse('course_info_json', kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'provided_id': ''}) + + resp = self.client.post(url, json.dumps(payload), "application/json") + + payload = json.loads(resp.content) + + self.assertContains( + self.client.post(url, json.dumps(payload), "application/json"), + ' Date: Wed, 20 Mar 2013 17:59:24 -0400 Subject: [PATCH 14/17] Also clean up children after sort saved. --- cms/static/coffee/src/views/unit.coffee | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee index 3bf049d31b..13c7e53f02 100644 --- a/cms/static/coffee/src/views/unit.coffee +++ b/cms/static/coffee/src/views/unit.coffee @@ -34,7 +34,10 @@ class CMS.Views.UnitEdit extends Backbone.View @$('.components').sortable( handle: '.drag-handle' - update: (event, ui) => @model.save(children: @components()) + update: (event, ui) => + payload = children : @components() + options = success : => @model.unset('children') + @model.save(payload, options) helper: 'clone' opacity: '0.5' placeholder: 'component-placeholder' From 9413364e55a8546c36a4f4a21f74b218a5b4818b Mon Sep 17 00:00:00 2001 From: Don Mitchell Date: Wed, 20 Mar 2013 18:00:25 -0400 Subject: [PATCH 15/17] Disambiguate the course_info url names. --- cms/urls.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cms/urls.py b/cms/urls.py index 69ce4a540d..4d46325a68 100644 --- a/cms/urls.py +++ b/cms/urls.py @@ -43,7 +43,7 @@ urlpatterns = ('', url(r'^(?P[^/]+)/(?P[^/]+)/course/(?P[^/]+)/remove_user$', 'contentstore.views.remove_user', name='remove_user'), url(r'^(?P[^/]+)/(?P[^/]+)/info/(?P[^/]+)$', 'contentstore.views.course_info', name='course_info'), - url(r'^(?P[^/]+)/(?P[^/]+)/course_info/updates/(?P.*)$', 'contentstore.views.course_info_updates', name='course_info'), + url(r'^(?P[^/]+)/(?P[^/]+)/course_info/updates/(?P.*)$', 'contentstore.views.course_info_updates', name='course_info_json'), url(r'^(?P[^/]+)/(?P[^/]+)/settings-details/(?P[^/]+)$', 'contentstore.views.get_course_settings', name='course_settings'), url(r'^(?P[^/]+)/(?P[^/]+)/settings-grading/(?P[^/]+)$', 'contentstore.views.course_config_graders_page', name='course_settings'), url(r'^(?P[^/]+)/(?P[^/]+)/settings-details/(?P[^/]+)/section/(?P
            [^/]+).*$', 'contentstore.views.course_settings_updates', name='course_settings'), @@ -100,12 +100,12 @@ urlpatterns += ( ) if settings.ENABLE_JASMINE: - ## Jasmine + # # Jasmine urlpatterns = urlpatterns + (url(r'^_jasmine/', include('django_jasmine.urls')),) urlpatterns = patterns(*urlpatterns) -#Custom error pages +# Custom error pages handler404 = 'contentstore.views.render_404' handler500 = 'contentstore.views.render_500' From 9cd38d115e422d4144096c97518bbf8324e6c3ba Mon Sep 17 00:00:00 2001 From: Chris Dodge Date: Wed, 20 Mar 2013 21:37:09 -0400 Subject: [PATCH 16/17] import needs to enumerate through the fields for all content scopes. Also add unit test --- .../contentstore/tests/test_contentstore.py | 14 ++++++++++++++ .../xmodule/modulestore/xml_importer.py | 18 +++++++++++++++--- common/test/data/full/vertical/vertical_89.xml | 5 +++++ 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/cms/djangoapps/contentstore/tests/test_contentstore.py b/cms/djangoapps/contentstore/tests/test_contentstore.py index d04e1a6332..615ffb6ed0 100644 --- a/cms/djangoapps/contentstore/tests/test_contentstore.py +++ b/cms/djangoapps/contentstore/tests/test_contentstore.py @@ -101,6 +101,20 @@ class ContentStoreToyCourseTest(ModuleStoreTestCase): self.assertEqual(reverse_tabs, course_tabs) + def test_import_polls(self): + import_from_xml(modulestore(), 'common/test/data/', ['full']) + + module_store = modulestore('direct') + found = False + + item = None + items = module_store.get_items(['i4x', 'edX', 'full', 'poll_question', None, None]) + found = len(items) > 0 + + self.assertTrue(found) + # check that there's actually content in the 'question' field + self.assertGreater(len(items[0].question),0) + def test_delete(self): import_from_xml(modulestore(), 'common/test/data/', ['full']) diff --git a/common/lib/xmodule/xmodule/modulestore/xml_importer.py b/common/lib/xmodule/xmodule/modulestore/xml_importer.py index 89ec1116ae..6a4ce5131b 100644 --- a/common/lib/xmodule/xmodule/modulestore/xml_importer.py +++ b/common/lib/xmodule/xmodule/modulestore/xml_importer.py @@ -4,6 +4,8 @@ import mimetypes from lxml.html import rewrite_links as lxml_rewrite_links from path import path +from xblock.core import Scope + from .xml import XMLModuleStore from .exceptions import DuplicateItemError from xmodule.modulestore import Location @@ -273,8 +275,18 @@ def import_from_xml(store, data_dir, course_dirs=None, if verbose: log.debug('importing module location {0}'.format(module.location)) - if hasattr(module, 'data'): - module_data = module.data + content = {} + for field in module.fields: + if field.scope != Scope.content: + continue + try: + content[field.name] = module._model_data[field.name] + except KeyError: + # Ignore any missing keys in _model_data + pass + + if 'data' in content: + module_data = content['data'] # cdodge: now go through any link references to '/static/' and make sure we've imported # it as a StaticContent asset @@ -298,7 +310,7 @@ def import_from_xml(store, data_dir, course_dirs=None, except Exception, e: logging.exception("failed to rewrite links on {0}. Continuing...".format(module.location)) - store.update_item(module.location, module_data) + store.update_item(module.location, content) if hasattr(module, 'children') and module.children != []: store.update_children(module.location, module.children) diff --git a/common/test/data/full/vertical/vertical_89.xml b/common/test/data/full/vertical/vertical_89.xml index c2b68b6bc2..cf2dd23462 100644 --- a/common/test/data/full/vertical/vertical_89.xml +++ b/common/test/data/full/vertical/vertical_89.xml @@ -7,4 +7,9 @@ + +

            Have you changed your mind?

            + Yes + No +             From ae55cd7533d178cffaa2eb3c57d190d9341ece6f Mon Sep 17 00:00:00 2001 From: Don Mitchell Date: Thu, 21 Mar 2013 09:40:57 -0400 Subject: [PATCH 17/17] One more unit test for json not containing expected fields. --- .../contentstore/tests/test_course_updates.py | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/cms/djangoapps/contentstore/tests/test_course_updates.py b/cms/djangoapps/contentstore/tests/test_course_updates.py index 29f387b3e6..38608ee94d 100644 --- a/cms/djangoapps/contentstore/tests/test_course_updates.py +++ b/cms/djangoapps/contentstore/tests/test_course_updates.py @@ -63,10 +63,18 @@ class CourseUpdateTest(CourseTestCase): payload = json.loads(resp.content) self.assertTrue(len(payload) == 2) + # can't test non-json paylod b/c expect_json throws error + # try json w/o required fields + self.assertContains( + self.client.post(url, json.dumps({'garbage': 1}), + "application/json"), + 'Failed to save', status_code=400) + # now try to update a non-existent update - url = reverse('course_info_json', kwargs={'org': self.course_location.org, - 'course': self.course_location.course, - 'provided_id': '9'}) + url = reverse('course_info_json', + kwargs={'org': self.course_location.org, + 'course': self.course_location.course, + 'provided_id': '9'}) content = 'blah blah' payload = {'content': content, 'date': 'January 21, 2013'}