From 9fe41e768b8c86cfbcb145d24734225959db9d86 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Thu, 10 Jul 2014 14:10:38 -0400 Subject: [PATCH] improved buttons styles in studio - updated unit sass to include new styles --- cms/static/sass/elements/_controls.scss | 4 +- cms/static/sass/elements/_layout.scss | 24 +- cms/static/sass/elements/_xblocks.scss | 8 + cms/static/sass/views/_checklists.scss | 12 +- cms/static/sass/views/_container.scss | 23 +- cms/static/sass/views/_settings.scss | 6 +- cms/static/sass/views/_static-pages.scss | 15 +- cms/static/sass/views/_textbooks.scss | 15 +- cms/static/sass/views/_unit.scss | 1486 +-------------------- cms/static/sass/views/_users.scss | 3 +- cms/templates/container.html | 6 +- cms/templates/ux/reference/container.html | 8 +- common/static/sass/_mixins.scss | 21 +- 13 files changed, 61 insertions(+), 1570 deletions(-) diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 0e1725227e..163c128dff 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -54,8 +54,8 @@ color: $white; &:hover, &:active { - background: $blue-s2; - border-color: $blue-s2; + background: $blue-l1; + border-color: $blue-l1; } &.current, &.active { diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index 048078e46e..cbf615836b 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -63,26 +63,9 @@ } // buttons - .action-button { + .button { @extend %btn-primary-blue; @extend %sizing; - } - - .new-button { - @extend %btn-primary-green; - @extend %sizing; - } - - .view-button { - @extend %btn-primary-blue; - @extend %sizing; - } - - .edit-button { - @include blue-button; - @extend %sizing; - padding: ($baseline/4) ($baseline/2); - text-align: center; .action-button-text { display: inline-block; @@ -93,6 +76,11 @@ display: inline-block; vertical-align: baseline; } + + &.new-button { + @extend %btn-primary-green; + @extend %sizing; + } } } } diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss index aba4f085c7..c33c804548 100644 --- a/cms/static/sass/elements/_xblocks.scss +++ b/cms/static/sass/elements/_xblocks.scss @@ -781,3 +781,11 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler { display: none; } + +.wrapper-xblock { + + .discussion-preview { + background-color: $gray-l5; + font-style: italic; + } +} diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss index 3e7ad7f021..806f453af2 100644 --- a/cms/static/sass/views/_checklists.scss +++ b/cms/static/sass/views/_checklists.scss @@ -272,10 +272,8 @@ text-align: right; .action-primary { - @include blue-button; - @extend %t-action4; - font-weight: 600; - text-align: center; + @extend %btn-primary-blue; + @extend %t-action3; } .action-secondary { @@ -319,10 +317,8 @@ .task-actions { .action-primary { - @include grey-button; - @extend %t-action4; - font-weight: 600; - text-align: center; + @extend %btn-secondary-blue; + @extend %t-action3; } } diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index efc6d2e27e..92f0fe4489 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -36,19 +36,10 @@ .nav-actions { .button { - @extend %btn-primary-blue; @extend %t-action3; - box-shadow: none; padding: ($baseline/4) ($baseline*.75); font-weight: 400; - - &.is-disabled { - // TO-DO: will review styling before merge to master - // background-color: $gray-l2; - // border-color: $gray-l2; - } } - } } } @@ -108,15 +99,18 @@ .bit-publishing { @extend %bar-module; - &.published { + &.published, + &.is-published { @extend %bar-module-green; } - &.draft { + &.draft , + &.is-draft { @extend %bar-module-yellow; } - &.staff-only { + &.staff-only, + &.is-staff-only { @extend %bar-module-black; } @@ -165,11 +159,6 @@ @extend %btn-primary-blue; display: block; padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2); - - &.is-disabled { - border: 1px solid $gray-l2; - background-color: $gray-l2; - } } .action-discard { diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index 6d18778d21..46d2a18b0d 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -336,7 +336,7 @@ background: $gray-l5; .action-primary { - @include blue-button(); + @extend %btn-primary-blue; @extend %t-action3; font-weight: 600; @@ -739,6 +739,10 @@ float: left; width: flex-grid(9, 9); + .new-button { + @extend %btn-primary-green; + } + .delete-button { margin: 0; } diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index e3aaf52919..6d9b838672 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -15,21 +15,8 @@ margin-right: flex-gutter(); .add-pages { - @extend %ui-well; + @extend %no-content; margin: ($baseline*1.5) 0; - background-color: $gray-l4; - padding: ($baseline*2); - text-align: center; - color: $gray; - - .new-button { - @include font-size(14); - margin-left: $baseline; - - [class^="icon-"] { - margin-right: ($baseline/2); - } - } } .notice-incontext { diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index d064c2f965..2acf08f9ab 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/cms/static/sass/views/_textbooks.scss @@ -13,20 +13,7 @@ margin-right: flex-gutter(); .no-textbook-content { - @extend %ui-well; - padding: ($baseline*2); - background-color: $gray-l4; - text-align: center; - color: $gray; - - .new-button { - @include font-size(14); - margin-left: $baseline; - - [class^="icon-"] { - margin-right: ($baseline/2); - } - } + @extend %no-content; } .textbook { diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 68b97fc388..4a3467a675 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -1,1489 +1,7 @@ // studio - views - unit // ==================== +// .view-unit styles will go here once we split it from container -body.course.unit, .view-unit { - - .main-wrapper { - margin-top: ($baseline*2); - } - - //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 $baseline; - } - } - } - - .unit-body { - - .unit-name-input { - padding: $baseline 2*$baseline; - - label { - display: block; - } - - 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; - 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; - } - // ==================== - - // Component List Meta - .components { - - > li { - position: relative; - z-index: 10; - margin: $baseline 2*$baseline; - - .title { - margin: 0 0 15px 0; - color: $mediumGrey; - - .value { - } - } - - .wrapper-alert-error { - margin-top: ($baseline*1.25); - box-shadow: none; - border-top: 5px solid $red-l1; - - .copy, - .title { - color: $white; - } - } - } - } - - // ==================== - - // Component Drag and Drop, Non-Edit Module Rendering, Styling - .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; - } - - .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); - } - } - - // Special xBlock and xModule styling - .xblock-type-container { - - .xblock-header-elementlevel { - line-height: $baseline*2; - min-height: $baseline*2; - } - - .xblock-render-elementlevel { - display: none; - } - } - - .xblock-student_view { - padding: 2*$baseline $baseline $baseline; - overflow-x: auto; - - h1 { - float: none; - margin-left: 0; - } - } - - .xblock-message-area { - .xblock-student_view { - padding: 0px; - } - - .xmodule_DiscussionModule, - .xmodule_HtmlModule, - .xblock { - margin-top: 0px; - } - - .xblock-message { - border-radius: 0 0 0 2px; - - .edit-button { - color: $orange-l1; - - .icon-pencil { - display: none; - } - } - - &.information { - @extend %t-copy-sub2; - padding-top: 0; - color: $gray-l1; - } - - &.has-warnings { - border: 0; - border-top: 3px solid $orange; - } - - &.has-errors { - border: 0; - border-top: 3px solid $red-l2; - } - } - } - - // UI: DnD - specific elems/cases - unit - .courseware-unit { - - // STATE: was dropped - &.was-dropped { - - > .section-item { - background-color: $ui-update-color !important; // nasty, but needed for specificity - } - } - } - - // ==================== - - // Component Editing - .wrapper-component-editor { - z-index: 9999; - position: relative; - background: $white; - } - - .component-editor { - @include edit-box; - box-shadow: none; - display: none; - padding: 0; - border-radius: 2px 2px 0 0; - - h3 { - margin-bottom: $baseline/2; - font-size: 18px; - font-weight: 700; - } - - h5 { - margin-bottom: 8px; - color: #fff; - font-weight: 700; - } - - .row { - margin-bottom: 0px; - overflow: hidden; - } - - // Module Actions, also used for Pages - .module-actions { - box-shadow: inset 0 1px 2px $shadow; - border-top: 1px solid $gray-l1; - padding: ($baseline*0.75) $baseline; - background: $gray-l6; - - .action { - display: inline-block; - vertical-align: middle; - margin-right: ($baseline/4); - - &:last-child { - margin-right: 0; - } - } - - .action-primary { - @include blue-button; - @extend %t-action2; - @include transition(all .15s); - display: inline-block; - padding: ($baseline/5) $baseline; - font-weight: 600; - text-transform: uppercase; - } - - .action-secondary { - @include grey-button; - @extend %t-action2; - @include transition(all .15s); - display: inline-block; - padding: ($baseline/5) $baseline; - font-weight: 600; - text-transform: uppercase; - } - } - } - } - - - // Edit Header (Component Name, Mode-Editor, Mode-Settings) - .component-edit-header { - @include box-sizing(border-box); - padding: 18px 0 18px $baseline; - top: 0; - right: 0; - background-color: $blue; - border-bottom: 1px solid $blue-d2; - color: $white; - - //Component Name - .component-name { - @extend %t-copy-sub1; - width: 50%; - color: $white; - font-weight: 600; - - em { - display: inline-block; - margin-right: ($baseline/4); - font-weight: 400; - color: $white; - } - } - - //Nav-Edit Modes - .nav-edit-modes { - list-style: none; - right: 0; - top: 0; - position: absolute; - padding: 12px ($baseline*0.75); - - .mode { - display: inline-block; - margin-left: 8px; - - &.inactive-mode{ - display: none; - } - - &.active-mode a { - - @include blue-button; - - &.is-set { - @include linear-gradient($blue, $blue); - color: $blue-d1; - box-shadow: inset 0 1px 2px 1px $shadow-l1; - background-color: $blue-d4; - cursor: default; - - &:hover { - box-shadow: inset 0 1px 2px 1px $shadow; - } - } - } - } - } - } - - // xblock Editor tab wrapper - .wrapper-comp-editor { - display: block; - - // Because the editor may be a CodeMirror editor (which must be visible at the time it is created - // in order for it to properly initialize), we must toggle "is-inactive" instead of the more common "is-active" - &.is-inactive { - display: none; - } - } - - // xblock Settings tab wrapper - .wrapper-comp-settings { - display: none; - - &.is-active { - display: block; - } - - .file-uploader { - .upload-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - @include box-sizing(border-box); - display: inline-block; - padding: ($baseline/2); - font-weight: 600; - width: 49%; - margin-right: 2%; - } - - .download-setting { - @extend %ui-btn-non; - @extend %t-action4; - @include box-sizing(border-box); - display: inline-block; - padding: ($baseline/2); - font-weight: 600; - width: 49%; - text-align: center; - color: $blue; - - &:hover { - background-color: $blue; - } - } - - .wrapper-uploader-actions { - width: 45%; - display: inline-block; - min-width: ($baseline*5); - } - } - - //settings-list - .list-input.settings-list { - margin: 0; - padding: 0; - list-style: none; - - overflow: auto; - max-height: 400px; - - //chrome scrollbar visibility correction - &::-webkit-scrollbar { - -webkit-appearance: none; - width: 11px; - height: 11px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 8px; - border: 2px solid $gray-l2; - background-color: rgba(0, 0, 0, .5); - } - - //component-setting-entry - .field.comp-setting-entry { - opacity: 0.7; - margin: 0 $baseline; - border-top: 1px solid $gray-l4; - background-color: $white; - padding: $baseline ($baseline/2); - - &:first-child { - border-top: 0; - } - } - - &:hover { - opacity: 1.0; - } - - &.is-set { - opacity: 1.0; - background-color: $white; - - .setting-input { - color: $blue-l1; - } - } - - .wrapper-comp-setting { - min-width: 300px; - top: 0; - vertical-align: top; - margin-bottom:5px; - position: relative; - } - - .setting-label { - @extend %t-copy-sub1; - @include transition(color $tmg-f2 ease-in-out 0s); - vertical-align: middle; - display: inline-block; - position: relative; - left: 0; - width: 25%; - min-width: 100px; - margin-right: ($baseline/2); - font-weight: 600; - - &.is-focused { - color: $blue; - } - } - - input, select, input[type="number"] { - @include placeholder($gray-l4); - @include font-size(16); - @include size(100%,100%); - width: 45%; - min-width: 100px; - padding: ($baseline/2); - border-radius: 3px; - border: 1px solid $gray-l2; - text-overflow: ellipsis; - } - - //Allows users to copy full value of disabled inputs. - input.is-disabled { - text-overflow: clip; - opacity: .5; - } - - input[type="number"] { - width: 42%; - box-shadow: 0 1px 2px $shadow-l1 inset; - //For webkit browsers which render number fields differently, make input wider. - -moz-column-width: { - width: 32%; - } - - &:active { - background-color: #FFFCF1; - } - } - - select { - - &:focus { - box-shadow: 0 0 1px $shadow; - @include transition(opacity $tmg-f2 ease-in-out 0s); - background-color: $yellow; - } - - &:active { - background-color: $yellow; - } - } - - .action.setting-clear { - @include font-size(11); - color: $gray; - width: 25px; - height: 25px; - vertical-align: middle; - padding: 5px; - border-radius: 50%; - margin: 0 $baseline/2; - box-shadow: none; - text-shadow: none; - border: 1px solid $gray-l1; - background-color: $gray-l4; - - &:hover { - box-shadow: 0 1px 1px $shadow; - @include transition(opacity $tmg-f2 ease-in-out 0s); - background-color: $blue-s3; - border: 1px solid $blue-s3; - color: $white; - } - - &.inactive { - visibility: hidden; - } - } - - .setting-help { - @include font-size(12); - display: inline-block; - font-color: $gray-l6; - min-width: ($baseline*10); - vertical-align: top; - } - - - - // TYPE: enumerated lists of metadata sets - .metadata-list-enum { - - * { - @include box-sizing(border-box); - } - - // label - .setting-label { - vertical-align: top; - margin-top: ($baseline/2); - } - - // inputs and labels - .wrapper-list-settings { - @include size(45%,100%); - display: inline-block; - min-width: ($baseline*5); - - // enumerated fields - .list-settings { - margin: 0; - - .list-settings-item { - margin-bottom: ($baseline/2); - } - - // inputs - .input { - width: 80%; - margin-right: ($baseline/2); - vertical-align: middle; - } - } - } - - .setting-clear { - vertical-align: top; - margin-top: ($baseline/4); - } - - .create-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - display: block; - width: 100%; - padding: ($baseline/2); - font-weight: 600; - - *[class^="icon-"] { - margin-right: ($baseline/4); - } - } - - .remove-setting { - @include transition(color 0.25s ease-in-out); - @include font-size(20); - display: inline-block; - background: transparent; - color: $blue-l3; - - &:hover { - color: $blue; - } - } - } - - // TYPE: Dict - .metadata-dict { - * { - @include box-sizing(border-box); - } - - // label - .setting-label { - vertical-align: top; - margin-top: ($baseline*.75); - } - - // inputs and labels - .wrapper-dict-settings { - width: 55%; - display: inline-block; - min-width: 240px; - - // enumerated fields - .list-settings { - margin: ($baseline/2) 0 0; - - .list-settings-item { - margin-bottom: ($baseline/2); - } - - // inputs - .input { - width: 43%; - margin-right: ($baseline/4); - vertical-align: middle; - display: inline-block; - - &.input-value { - margin-right: ($baseline/2); - } - } - } - } - - .setting-clear { - vertical-align: top; - margin: ($baseline*.75) 0 0 0; - } - - .create-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - display: block; - width: 88%; - padding: ($baseline/2); - font-weight: 600; - - *[class^="icon-"] { - margin-right: ($baseline/4); - } - } - - .remove-setting { - @include transition(color 0.25s ease-in-out); - @include font-size(20); - display: inline-block; - background: transparent; - color: $blue-l3; - - &:hover { - color: $blue; - } - } - - } - } - } -} -// ==================== - -// Editing Units from Courseware -//uses similar styling as static-pages.scss -body.unit { - - .component { - - - .wrapper-component-action-header { - @include box-sizing(border-box); - position: absolute; - top: 0; - left: 0; - padding: $baseline/4 $baseline/2; - width: 100%; - border-bottom: 1px solid $gray-l4; - background-color: $gray-l6; - } - - .component-header { - display: inline-block; - overflow: hidden; - padding: $baseline/2 0px 0px $baseline/4; - max-width: 60%; - color: $gray-l1; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: 300; - } - - .component-actions { - display: inline-block; - float: right; - max-width: 40%; - vertical-align: middle; - text-align: center; - } - - &.editing { - padding-top: 0; - } - } -} - -// ==================== - -// Component Header Actions -// uses similar styling as assets.scss, static-pages.scss - -body.unit { - - .component-actions, - .xblock-header-secondary .actions-list { - - .action-item { - display: inline-block; - margin: ($baseline/4) 0 ($baseline/4) ($baseline/4); - - .action-button { - @include transition(all $tmg-f3 linear 0s); - display: block; - padding: ($baseline/5) ($baseline/2); - width: auto; - height: auto; - border-radius: 3px; - color: $gray-l1; - - &:hover { - background-color: $blue; - color: $gray-l6; - } - - .action-button-text { - display: inline-block; - vertical-align: baseline; - padding: 0 1px; - text-transform: uppercase; - } - - &.delete-button:hover { - background-color: $gray-l1; - } - } - - [class^="icon-"] { - display: inline-block; - vertical-align: baseline; - } - } - } - - // ==================== - - // Unit Page Sidebar - - .sidebar { - - label { - @extend %t-title8; - } - } - - .unit-settings { - - .window-contents { - padding: $baseline/2 $baseline; - } - - - .unit-actions { - border-bottom: none; - padding-bottom: 0; - } - - .published-alert { - display: none; - padding: $baseline/2; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - font-size: 14px; - line-height: 1.4; - - div { - margin-top: 15px; - } - - // actions - publish/edit - .publish-draft { - @extend %action; - } - - .create-draft { - @extend %action; - } - } - - - input[type="radio"] { - margin-right: 7px; - } - - .status { - @extend %t-copy-sub2; - - strong { - font-weight: 700; - } - } - - .preview-button, .view-button { - @include white-button; - margin-bottom: $baseline/2; - } - - .publish-button { - @include orange-button; - } - - .delete-button { - @include blue-button; - } - - .delete-draft { - display: inline-block; - vertical-align: top; - } - - .delete-button, - .preview-button, - .publish-button, - .view-button { - font-size: 11px; - margin-top: $baseline/2; - 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 $baseline/2; - 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 { - - // unit id - .wrapper-unit-id { - - .unit-id { - - .label { - @extend %t-title7; - margin-bottom: ($baseline/4); - color: $gray-d1; - } - - .value { - margin-bottom: 0; - } - } - } - - .url { - box-shadow: none; - width: 100%; - margin-bottom: $baseline/2; - } - - .draft-tag, - .hidden-tag, - .private-tag, - .has-new-draft-tag { - font-size: 8px; - } - - .unit-tree-location { - - .section-name { - @extend %t-title8; - } - - - .subsection, - .courseware-unit { - margin: ($baseline/4) 0 0 ($baseline); - } - - .courseware-unit .section-item { - background-color: transparent; - } - - .section-item { - @include transition(background $tmg-avg ease-in-out 0); - @include box-sizing(border-box); - @extend %t-copy-sub2; - display: inline-block; - width: 100%; - background: $gray-l5; - padding: 6px 8px 8px 16px; - vertical-align: top; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - color: $gray; - - &:hover { - background: $blue-l5; - color: $blue; - } - - &.editing { - background-color: $orange-l3; - } - - .public-item { - color: $black; - } - - .private-item { - color: $gray-l1; - } - - .draft-item { - color: $yellow-d1; - } - - .public-item:hover, - .private-item:hover, - .draft-item:hover { - color: $blue; - } - - .draft-item:after, - .public-item:after, - .private-item:after { - @include font-size(9); - margin-left: 3px; - font-weight: 600; - text-transform: uppercase; - } - - .draft-item:after { - content: "- draft"; - } - - .private-item:after { - content: "- private"; - } - } - - .new-unit-item { - @extend %ui-btn-flat-outline; - @extend %t-action4; - width: 90%; - margin: 0 0 ($baseline/2) ($baseline/4); - border: 1px solid transparent; - padding: ($baseline/4) ($baseline/2); - font-weight: normal; - color: $gray-l2; - text-align: left; - - &:hover { - box-shadow: none; - background-image: none; - } - } - } - } - - .edit-state-draft { - .visibility, - - .edit-draft-message, - .view-button { - display: none; - } - - .published-alert { - display: block; - } - } - - .edit-state-public { - .delete-draft, - .wrapper-component-action-header, - .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; - } - } -} - -// ==================== - -// Latex Compiler - -.wrapper-comp-editor.latex-problem { - margin-top: ($baseline*2.5); -} - -.launch-latex-compiler { - position: absolute; - width: 100%; - top: 0; - background-color: $white; - padding: $baseline/2 0 $baseline/2 $baseline; - border-bottom: 1px solid $gray-l2; -} - -// hides latex compiler button if settings mode is-active -div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{ - display: none; -} - -// ==================== - -// xblock - unit page container - -body.unit .xblock-type-container { - margin: 0; - border: none; - box-shadow: none; - - &:hover { - border-color: $blue; - - .container-drag { - background-color: $blue; - border-color: $blue; - } - } - - .xblock-header-primary { - border-bottom: 0; - border-radius: ($baseline/5); - - .xblock-details { - font-size: .9em; - } - } - - // UI: container xblock drag handle - - // TODO: abstract out drag handles into generic control used on unit, container, outline pages. - .container-drag { - position: absolute; - display: block; - top: 0px; - right: -16px; - z-index: 10; - width: 16px; - height: 50px; - 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); - } - - .xblock-render { - display: none; - } -} - -// UI: special case discussion, HTML xmodule styling - -body.unit .component { - .xmodule_DiscussionModule, .xmodule_HtmlModule, .xblock { - margin-top: ($baseline*1.5); - } - .discussion-preview { - font-style: italic; - color: $mediumGrey; - } -} - -body.unit .component.editing { - .xmodule_DiscussionModule, .xmodule_HtmlModule, .xblock { - margin-top: 0; - } -} - -// UI: special case xblock with no preview, ex. experiment blocks - -body.unit .component { - - .wrapper-component-action-header.nopreview { - position: relative; - border-bottom: 0; - } - - .xblock-header-secondary { - overflow: hidden; - border-top: 1px solid $gray-l3; - background-color: $gray-l5; - padding: ($baseline/2); - - .meta-info { - display: inline-block; - vertical-align: middle; - width: 65%; - padding-left: ($baseline/4); - font-style: italic; - color: $gray; - } - - .actions-list { - display: inline-block; - vertical-align: middle; - width: 33%; - text-align: right; - - .action-item { - margin: 0; - } - } - } -} - - - -body.view-unit .main-column .unit-body { - - // New Components - .new-component-item { - margin: $baseline 0 0 0; - border-top: 1px solid $gray-l3; - box-shadow: 0 2px 1px $shadow-l1 inset; - background-color: $lightGrey; - padding: $baseline; - - .new-component { - text-align: center; - - h5 { - color: $darkGreen; - } - } - - .new-component-button { - display: block; - padding: $baseline; - text-align: center; - color: $green; - } - - h5 { - @extend %t-title5; - margin: 0 0 $baseline 0; - color: $white; - font-weight: 600; - } - - .rendered-component { - display: none; - background: $white; - border-radius: 3px 3px 0 0; - } - - .new-component-type { - - a, - li { - display: inline-block; - } - - a { - @extend %t-action3; - width: ($baseline*5); - height: ($baseline*5); - margin-right: ($baseline*.75); - margin-bottom: $baseline; - border: 1px solid $mediumGrey; - border-radius: ($baseline/4); - box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset; - text-align: center; - color: $white; - - .name { - @include box-sizing(border-box); - display: block; - color: $white; - } - } - } - - .new-component-templates { - @include clearfix; - display: none; - margin: $baseline ($baseline*2); - border-radius: 3px; - border: 1px solid $mediumGrey; - background-color: $white; - box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset; - - .cancel-button { - @include white-button; - margin: $baseline 0 ($baseline/2) ($baseline/2); - } - - .problem-type-tabs { - display: none; - } - - // specific menu types - &.new-component-problem { - padding-bottom: ($baseline/2); - - [class^="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 $green-d2; - background-color: $green-l1; - color: $white; - - &:hover { - background: $green-s1; - } - } - } - - .problem-type-tabs { - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - list-style-type: none; - width: 100%; - border-radius: 0; - background-color: $lightBluishGrey; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset; - - li:first-child { - margin-left: $baseline; - } - - li { - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - opacity: 0.8; - float: left; - display: inline-block; - width: auto; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 $shadow inset; - background-color: tint($lightBluishGrey, 10%); - text-align: center; - - &:hover { - opacity: 0.9; - background-color: tint($lightBluishGrey, 20%); - } - - &.ui-state-active { - @include active; - border: 0px; - opacity: 1.0; - } - } - - a { - @extend %t-action3; - display: block; - padding: ($baseline*.75) ($baseline*1.25); - text-align: center; - color: $gray-d3; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); - } - } - - .new-component-template { - - a { - @include transition(none); - border: 0px; - background: $white; - color: $gray-d3; - - &:hover { - @include transition(background-color $tmg-f2 linear 0s); - background: tint($green,30%); - color: $white; - } - } - - li { - border:none; - border-bottom: 1px dashed $lightGrey; - color: $white; - } - - li:first-child a { - border-top: 0; - } - - li:nth-child(2) a { - border-radius: 0; - } - - a { - @include clearfix(); - display: block; - padding: 7px $baseline; - border-bottom: none; - font-weight: 500; - - .name { - float: left; - - [class^="icon-"] { - @include transition(opacity $tmg-f2 linear 0s); - display: inline-block; - top: 1px; - margin-right: 5px; - opacity: 0.5; - width: 17; - height: 21px; - vertical-align: middle; - } - } - - .editor-indicator { - @extend %t-copy-sub2; - @include transition(opacity $tmg-f2 linear 0s); - float: right; - position: relative; - top: 3px; - opacity: 0.3; - } - - [class^="icon-"], .editor-indicator { - display: none; - } - - &:hover { - color: $white; - - [class^="icon-"] { - opacity: 1.0; - } - - .editor-indicator { - opacity: 1.0; - } - } - } - - // specific editor types - .empty { - - a { - - background: $white; - line-height: 1.4; - font-weight: 400; - color: $gray-d3; - - - &:hover { - background: tint($green,30%); - color: $white; - } - } - } - } - } + } diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss index 240cd758dc..b9c41cdf1f 100644 --- a/cms/static/sass/views/_users.scss +++ b/cms/static/sass/views/_users.scss @@ -55,8 +55,7 @@ } .action-primary { - @include green-button(); // overwriting for the sake of syncing older green button styles for now - @extend %t-action3; + @extend %btn-primary-green; padding: ($baseline/2) $baseline; } } diff --git a/cms/templates/container.html b/cms/templates/container.html index e6e42abf97..e9450e5145 100644 --- a/cms/templates/container.html +++ b/cms/templates/container.html @@ -88,18 +88,18 @@ templates = ["basic-modal", "modal-button", "edit-xblock-modal",