Skip to content

E
edx-platform
Commit 394292ec by Brian Talbot
Options

Studio: revises static dashboard states for all authorship rights scenarios

parent 4d9d6a45
Showing with 381 additions and 42 deletions
cms/static/sass/_base.scss
......@@ -368,42 +368,6 @@ p, ul, ol, dl {
color: $gray-d3;
}
}
.introduction {
@include box-sizing(border-box);
@extend .t-copy-sub1;
width: flex-grid(12);
margin: 0 0 $baseline 0;
.copy strong {
font-weight: 600;
}
&.has-links {
@include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.nav-introduction-supplementary {
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
}
.content-primary, .content-supplementary {
......
cms/static/sass/elements/_system-help.scss
// studio - elements - system help
// ====================
// view introductions - common greeting/starting points for the UI
.content .introduction {
@include box-sizing(border-box);
margin-bottom: $baseline;
.title {
@extend .t-title4;
font-weight: 600;
}
.copy {
@extend .t-copy-sub1;
}
strong {
font-weight: 600;
}
// CASE: has links alongside
&.has-links {
@include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.nav-introduction-supplementary {
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
// notices - in-context: to be used as notices to users within the context of a form/action
.notice-incontext {
@extend .ui-well;
border-radius: ($baseline/10);
position: relative;
overflow: hidden;
margin-bottom: $baseline;
.title {
@extend .t-title7;
margin-bottom: ($baseline/4);
font-weight: 600;
font-weight: 700;
}
.copy {
@extend .t-copy-sub1;
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.75;
margin-bottom: $baseline;
&:last-child {
margin-bottom: 0;
}
}
strong {
font-weight: 600;
}
&:hover {
&.has-status {
.copy {
opacity: 1.0;
.status-indicator {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: ($baseline/4);
opacity: 0.40;
}
}
// CASE: notice has actions {
&.has-actions {
.list-actions {
margin-top: ($baseline*0.75);
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
}
}
}
// particular warnings around a workflow for something
// particular notice - warnings around a workflow for something
.notice-workflow {
background: $yellow-l5;
.status-indicator {
background: $yellow;
}
title {
color: $gray-d1;
}
.copy {
color: $gray;
}
}
// particular notice - instructional
.notice-instruction {
background-color: $gray-l4;
.title {
color: $gray-d1;
}
.copy {
color: $gray;
}
&.has-actions {
.list-actions {
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
}
}
}
// particular notice - confirmation
.notice-confirmation {
background-color: $green-l5;
.status-indicator {
background: $green-s1;
}
.title {
color: $green;
}
.copy {
color: $gray;
}
}
cms/static/sass/views/_dashboard.scss
......@@ -3,8 +3,254 @@
body.dashboard {
// temp
.content {
margin-bottom: ($baseline*5);
&:last-child {
margin-bottom: 0;
}
}
// ====================
// basic layout
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
width: flex-grid(9, 12);
margin-right: flex-gutter();
}
.content-supplementary {
width: flex-grid(3, 12);
}
// ====================
// elements - notices
.content .notice-incontext {
width: flexgrid(9, 9);
// CASE: notice has actions {
&.has-actions {
.msg, .list-actions {
display: inline-block;
vertical-align: middle;
}
.msg {
width: flex-grid(6, 9);
margin-right: flex-gutter();
}
.list-actions {
width: flex-grid(3, 9);
text-align: right;
margin-top: 0;
.action-item {
}
.action-create-course {
@extend .btn-primary-green;
}
}
}
}
// elements - authorship controls
.wrapper-authorshiprights {
overflow: hidden;
.ui-toggle-control {
@extend .depth2;
@extend .btn-secondary-gray;
@include clearfix();
display: block;
text-align: left;
// STATE: hover - syncing up colors with current so transition is smoother
&:hover {
background: $gray-d1;
color: $white;
}
.label {
@extend .t-action3;
float: left;
width: flex-grid(8, 9);
margin: 3px flex-gutter() 0 0;
}
.icon-remove-sign {
@extend .t-action1;
@include transition(rotate 10.0s ease-in-out 0s);
@include transform(rotate(45deg));
@include transform-origin(center center);
float: right;
text-align: right;
}
}
.ui-toggle-target {
@extend .depth1;
@include transition(opacity 0.50s ease-in-out 0s);
position: relative;
top: -2px;
display: none;
opacity: 0;
}
// CASE: when the content area is shown
&.is-shown {
.ui-toggle-control {
@include border-bottom-radius(0);
.icon-remove-sign {
@include transform(rotate(90deg));
@include transform-origin(center center);
}
}
.ui-toggle-target {
display: block;
opacity: 1.0;
}
}
}
// elements - authorship controls
.status-authorship {
margin-top: $baseline;
.title {
@extend .t-title7;
margin-bottom: ($baseline/4);
font-weight: 700;
color: $gray-d1;
}
.copy {
}
.list-actions {
margin-top: ($baseline*0.75);
.action-item {
}
.action-primary {
@extend .btn-primary-blue;
@extend .t-action3;
}
}
.status-update {
.label {
@extend .text-sr;
}
.value {
@include border-radius(($baseline/4));
position: relative;
overflow: hidden;
padding: ($baseline/5) ($baseline/2);
background: $gray;
.status-indicator {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: ($baseline/4);
opacity: 0.40;
}
}
.value-formal, .value-description {
@include border-radius(($baseline/10));
display: inline-block;
vertical-align: middle;
color: $white;
}
.value-formal {
@extend .t-title5;
margin: ($baseline/2);
font-weight: 700;
[class^="icon-"] {
margin-right: ($baseline/4);
}
}
.value-description {
@extend .t-copy-sub1;
position: relative;
color: $white;
opacity: 0.65;
}
}
// CASE: rights are not requested yet
&.is-unrequested {
.title {
@extend .text-sr;
}
}
// CASE: status is pending
&.is-pending {
.status-update {
.value {
background: $orange;
}
.status-indicator {
background: $orange-d1;
}
}
}
// CASE: status is rejected
&.is-rejected {
.status-update {
.value {
background: $red-l1;
}
.status-indicator {
background: $red-s1;
}
}
}
}
// ====================
.my-classes {
margin-top: $baseline;
margin: $baseline 0;
}
.class-list {
......
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