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 59 additions and 86 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/_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