Skip to content

E
edx-platform
Commit 9fe41e76 by Frances Botsford Committed by cahrens
Options

improved buttons styles in studio - updated unit sass to include new styles

parent 0230ee40
Showing with 61 additions and 1570 deletions
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 {
......
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;
}
}
}
}
......
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;
}
}
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;
}
}
......
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 {
......
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;
}
......
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 {
......
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 {
......
cms/static/sass/views/_unit.scss
// 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;
}
}
}
}
}
}
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;
}
}
......
cms/templates/container.html
......@@ -88,18 +88,18 @@ templates = ["basic-modal", "modal-button", "edit-xblock-modal",
<ul>
% if is_unit_page:
<li class="action-item action-view nav-item">
<a href="${published_preview_link}" class="button view-button action-button is-disabled">
<a href="${published_preview_link}" class="button button-view action-button is-disabled">
<span class="action-button-text">${_("View Published Version")}</span>
</a>
</li>
<li class="action-item action-preview nav-item">
<a href="${draft_preview_link}" class="button preview-button action-button is-disabled">
<a href="${draft_preview_link}" class="button button-preview action-button is-disabled">
<span class="action-button-text">${_("Preview Changes")}</span>
</a>
</li>
% else:
<li class="action-item action-edit nav-item">
<a href="#" class="button edit-button action-button">
<a href="#" class="button button-edit action-button edit-button">
<i class="icon-pencil"></i>
<span class="action-button-text">${_("Edit")}</span>
</a>
......
cms/templates/ux/reference/container.html
......@@ -503,7 +503,7 @@
<!-- case published no changes, future release no staff lock -->
<div class="bit-publishing published">
<div class="bit-publishing is-published">
<h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Published")}</h3>
<div class="wrapper-last-draft bar-mod-content">
......@@ -549,7 +549,7 @@
<!-- case unpubbed changes, future release no staff lock -->
<div class="bit-publishing draft">
<div class="bit-publishing is-draft">
<h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Draft (Unpublished changes)")}</h3>
<div class="wrapper-last-draft bar-mod-content">
......@@ -595,7 +595,7 @@
<!-- case unpubbed changes, future release with staff lock -->
<div class="bit-publishing draft staff-only">
<div class="bit-publishing is-draft is-staff-only">
<h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Draft (Unpublished changes)")}</h3>
<div class="wrapper-last-draft bar-mod-content">
......@@ -641,7 +641,7 @@
<!-- case published no changes, release in past no staff lock -->
<div class="bit-publishing published">
<div class="bit-publishing is-published">
<h3 class="bar-mod-title pub-status"><span class="sr">${_("Publishing Status")} </span>${_("Published")}</h3>
<div class="wrapper-last-draft bar-mod-content">
......
common/static/sass/_mixins.scss
......@@ -152,7 +152,9 @@
&.disabled, &[disabled], &.is-disabled {
cursor: default;
pointer-events: none;
opacity: 0.5;
border: 1px solid $gray-l3;
background-color: $gray-l3;
color: $gray-l5;
}
.icon-inline {
......@@ -178,11 +180,13 @@
padding:($baseline/2) $baseline;
border-width: 1px;
border-style: solid;
box-shadow: none;
font-weight: 600;
line-height: 1.5em;
text-align: center;
&:hover, &:active, &:focus {
box-shadow: 0 2px 1px $shadow-l1;
box-shadow: 0 2px 1px $shadow;
}
&.current, &.active {
......@@ -268,10 +272,21 @@
%no-content {
@extend %ui-well;
padding: $baseline;
padding: ($baseline*2);
background-color: $gray-l4;
text-align: center;
color: $gray;
.button,
.action {
@extend %btn-primary-green;
@include font-size(14);
margin-left: $baseline;
[class^="icon-"] {
margin-right: ($baseline/2);
}
}
}
.ui-loading {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment