Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Pattern Library pages to use new color scheme

Browse Source 
TNL-5135
This commit is contained in:
Andy Armstrong
2016-08-01 17:22:45 -04:00
parent c8f0e00ec8
commit 2e12214a17
21 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cms/static/sass/programs/_components.scss
View File

@@ -42,7 +42,7 @@
&:focus,
&.is-focused {
background: shade($success, 33%);
color: $btn-default-focus-color;
color: palette(primary, accent);
}
// STATE: is pressed or active
@@ -94,6 +94,6 @@
.form-group {
&.bg-white {
background-color: palette(grayscale, white);
background-color: $white;
}
}

16
cms/static/sass/programs/_modals.scss
View File

@@ -8,7 +8,7 @@
right: 0;
bottom: 0;
left: 0;
background-color: palette(grayscale-cool, x-dark);
background-color: palette(grayscale, dark);
opacity: 0.5;
z-index: 1000;
}
@@ -25,15 +25,15 @@
.modal-content {
margin: 5px;
padding: 20px;
background-color: palette(grayscale-cool, x-dark);
background-color: palette(grayscale, dark);
border-top: 5px solid palette(warning, base);
.copy {
color: palette(grayscale, white);
color: $white;
}
.emphasized {
color: palette(grayscale, white-t);
color: $white;
font-weight: font-weight(bold);
}
}
@@ -42,7 +42,7 @@
padding: 10px 20px;
.btn {
color: palette(grayscale, white-t);
color: palette(grayscale, back);
}
.btn-brand {
@@ -52,8 +52,8 @@
&:hover,
&:focus,
&:active {
background: palette(warning, dark);
border-color: palette(warning, dark);;
background: palette(warning, back);
border-color: palette(warning, accent);
}
}
@@ -63,7 +63,7 @@
&:hover,
&:focus,
&:active {
border-color: palette(grayscale-cool, light)
border-color: palette(grayscale, back)
}
}
}

2
lms/djangoapps/teams/static/teams/templates/team-profile.underscore
View File

@@ -5,7 +5,7 @@
data-user-create-comment="<%- !readOnly %>"
data-user-create-subcomment="<%- !readOnly %>">
<% if ( !readOnly) { %>
<button type="button" class="btn-neutral btn-small new-post-btn">
<button type="button" class="btn btn-small new-post-btn">
<%- gettext("Add a Post") %>
</button>
<% } %>

2
lms/static/certificates/sass/_base.scss
View File

@@ -14,7 +14,7 @@ html, body {
height: 100%;
margin: 0;
padding: 0;
background: palette(grayscale, white);
background: $white;
}
// ------------------------------

52
lms/static/certificates/sass/_components.scss
View File

@@ -22,7 +22,7 @@
// ------------------------------
%hd-subsection {
margin-bottom: spacing-vertical(mid-small);
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(x-small);
}
@@ -30,20 +30,20 @@
// #DEPTH
// ------------------------------
%depth-base-focus {
background: palette(grayscale, white-t);
background: $white;
padding: spacing-vertical(small) spacing-horizontal(base);
}
%depth-well {
box-shadow: 0 rem(1) rem(3) 0 palette(grayscale-cool, light) inset;
box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
padding: spacing-vertical(small) spacing-horizontal(base);
background: palette(grayscale, x-light);
background: palette(grayscale, x-back);
}
%depth-card {
box-shadow: 0 rem(1) rem(2) 0 palette(grayscale-cool, light);
box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
padding: spacing-vertical(small) spacing-horizontal(base);
background: palette(grayscale, white-t);
background: $white;
}
.depth-base-focus {
@@ -76,8 +76,8 @@
// ------------------------------
.wrapper-header {
@extend %divider-2;
border-bottom-color: palette(grayscale, xx-trans);
background: palette(grayscale, white-t);
border-bottom-color: palette(grayscale, x-back);
background: $white;
}
.header-app {
@@ -96,19 +96,19 @@
// message to user-centric banner
.wrapper-banner-user {
box-shadow: inset 0 rem(2) rem(2) 0 palette(grayscale, black-t);
background: palette(grayscale-cool, x-dark);
box-shadow: inset 0 rem(2) rem(2) 0 palette(grayscale, black);
background: palette(grayscale, dark);
}
.banner-user {
.message-title {
color: palette(grayscale, white-t);
color: $white;
font-weight: font-weight(semi-bold);
}
.message-copy {
color: palette(grayscale, white);
color: $white;
}
.message-actions .action {
@@ -116,7 +116,7 @@
// STATE: hover, active, focus
&:hover, &:active, &:focus {
// customizations from UXPL
color: palette(grayscale-cool, x-dark);
color: palette(grayscale, dark);
}
.icon {
@@ -161,7 +161,7 @@
// main accomplishment
.accomplishment-main {
background: palette(grayscale-cool, x-trans);
background: transparentize(palette(grayscale, back), 0.75);
}
// brief accomplishment
@@ -198,13 +198,13 @@
%rendering-section {
margin-bottom: spacing-vertical(base);
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(base);
}
%rendering-hd-section {
margin-bottom: spacing-vertical(mid-small);
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(x-small);
color: $cert-base-color;
@include text-align(center);
@@ -344,7 +344,7 @@
.value {
@extend %copy-base;
font-weight: font-weight(semi-bold);
color: palette(grayscale, x-dark);
color: palette(grayscale, dark);
}
}
@@ -360,7 +360,7 @@
.src {
max-height: 100%;
border: rem(4) solid palette(grayscale, white-t);
border: rem(4) solid $white;
}
}
@@ -384,7 +384,7 @@
.accomplishment-metadata-title {
@extend %hd-subsection;
border-bottom-color: palette(grayscale-cool, light);
border-bottom-color: palette(grayscale, back);
}
// ------------------------------
@@ -467,7 +467,7 @@
}
.accomplishment-main {
background: transparentize(palette(grayscale-cool, dark), 0.9);
background: transparentize(palette(grayscale, dark), 0.9);
}
.accomplishment-rendering {
@@ -496,7 +496,7 @@
}
.accomplishment-rendering {
background: palette(grayscale, white-t) url('../images/bg-verified.png') center no-repeat;
background: $white url('../images/bg-verified.png') center no-repeat;
background-size: 65%;
.deco-corner-tl {
@@ -537,7 +537,7 @@
// #FOOTER
// ------------------------------
.footer-app {
border-top: rem(4) solid palette(grayscale, xx-trans);
border-top: rem(4) solid transparentize(palette(grayscale, base), 0.95);
padding-top: spacing-vertical(base);
}
@@ -556,7 +556,7 @@
top: 0;
left: 0;
z-index: z-index(front);
background-color: palette(grayscale, trans); /* dim the background */
background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
width: 100%;
height: 100%;
vertical-align: middle;
@@ -572,8 +572,8 @@
max-width: 50%;
margin-right: auto;
margin-left: auto;
border-top: rem(10) solid palette(primary, light);
background: palette(grayscale, white);
border-top: rem(10) solid palette(primary, back);
background: palette(grayscale, x-back);
padding-right: spacing-horizontal(large);
padding-left: spacing-horizontal(large);
overflow-x: hidden;
@@ -612,7 +612,7 @@
.modal-hr {
display: block;
border: none;
background-color: palette(grayscale, light);
background-color: palette(grayscale, back);
height: rem(2);
width: 100%;
}

8
lms/static/certificates/sass/_config.scss
View File

@@ -7,12 +7,12 @@
// ------------------------------
// certificate characteristics
$cert-base-color: palette(grayscale-cool, dark);
$cert-base-color: palette(grayscale, dark);
$cert-distinguished-color: palette(primary, accent);
$cert-decorative-color: palette(grayscale-cool, light);
$cert-decorative-color-de-emphasized: palette(grayscale-cool, x-trans);
$cert-decorative-color-emphasized: palette(grayscale-cool, mid-light);
$cert-decorative-color: palette(grayscale, back);
$cert-decorative-color-de-emphasized: transparentize(palette(grayscale, base), 0.75);
$cert-decorative-color-emphasized: palette(grayscale, accent);
// typography: config
@include font-face(

2
lms/static/certificates/sass/_layouts.scss
View File

@@ -292,7 +292,7 @@
.wrapper-metadata .metadata {
@extend %divider-2;
margin-bottom: spacing-vertical(small);
border-bottom-color: palette(grayscale, x-light);
border-bottom-color: palette(grayscale, x-back);
padding-bottom: spacing-vertical(small);
&:last-child {

8
lms/static/certificates/sass/_print.scss
View File

@@ -30,8 +30,8 @@
}
%print-black-on-white {
background: palette(grayscale, white-t) !important;
color: palette(grayscale, black-t) !important;
background: $white !important;
color: $black !important;
}
%print-layout-wrapper {
@@ -191,7 +191,7 @@
.accomplishment-rendering {
top: 0 !important;
border: rem(1) solid palette(grayscale, light);
border: rem(1) solid palette(grayscale, back);
border-top: rem(2) solid $cert-base-color;
box-shadow: none;
padding: spacing-vertical(small) spacing-horizontal(mid-large);
@@ -207,7 +207,7 @@
}
.wrapper-statement-and-signatories {
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
}
.accomplishment-statement {

4
lms/static/sass/elements/_banners.scss
View File

@@ -10,7 +10,7 @@ $full-width-banner-margin: 20px;
width: 100%;
overflow: hidden;
position: relative;
background: palette(grayscale, black-t);
background: palette(grayscale, black);
&:before {
content: '';
@@ -19,7 +19,7 @@ $full-width-banner-margin: 20px;
right: 0;
bottom: 0;
left: 0;
background: palette(grayscale, black-t);
background: palette(grayscale, black);
opacity: 0.65;
@include susy-media($bp-screen-md) {

2
lms/static/sass/elements/_course-card.scss
View File

@@ -138,7 +138,7 @@
.upgrade-message,
.certificate-status {
border-top: 1px solid palette(grayscale, x-trans);
border-top: 1px solid transparentize(palette(grayscale, base), 0.75);
padding-top: $baseline;
@include susy-media($bp-screen-md) {

2
lms/static/sass/elements/_icons.scss
View File

@@ -6,7 +6,7 @@
width: 23px;
height: 20px;
padding: 2px;
background-color: palette(grayscale, white-t);
background-color: $white;
border-style: solid;
border-width: 2px;
}

4
lms/static/sass/elements/_program-card.scss
View File

@@ -109,7 +109,7 @@
}
.hd-3 {
color: palette(grayscale, x-dark);
color: palette(grayscale, dark);
min-height: ($baseline*3);
line-height: 1;
}
@@ -146,7 +146,7 @@
.progress {
height: 5px;
background: palette(grayscale-cool, x-light);
background: palette(grayscale, x-back);
.bar {
@include float(left);

2
lms/static/sass/shared-v2/_footer.scss
View File

@@ -5,7 +5,7 @@
@include clearfix();
@extend %ui-print-excluded;
box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid tint(palette(grayscale, light), 50%);
border-top: 1px solid tint(palette(grayscale, back), 50%);
padding: 25px ($baseline/2) ($baseline*1.5);
background: $footer-bg;

10
lms/static/sass/shared-v2/_help-tab.scss
View File

@@ -12,8 +12,8 @@
border: 1px solid $lms-border-color;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize(palette(grayscale, white-t), 0.25);
color: transparentize(palette(grayscale-cool, x-dark), 0.25);
background: transparentize($white, 0.25);
color: transparentize(palette(grayscale, dark), 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
@@ -21,7 +21,7 @@
&:hover,
&:focus {
color: palette(grayscale, white-t);
color: $white;
background: palette(primary, base);
}
}
@@ -35,7 +35,7 @@
padding: ($baseline*0.75) 0;
text-align: center;
cursor: pointer;
background: palette(grayscale, white-t);
background: $white;
text-decoration: none;
display: block;
border: 1px solid $lms-border-color;
@@ -52,7 +52,7 @@
&:hover,
&:focus {
color: palette(grayscale, white-t);
color: $white;
background: palette(primary, base);
}
}

8
lms/static/sass/shared-v2/_modal.scss
View File

@@ -122,7 +122,7 @@
}
.modal-form-error {
background: palette(error, xx-trans);
background: transparentize(palette(error, back), 0.95);
border: 1px solid palette(error, dark);
color: palette(error, dark);
display: none;
@@ -155,7 +155,7 @@
.input-group {
@include clearfix();
border-bottom: 1px solid palette(grayscale, light);
border-bottom: 1px solid palette(grayscale, back);
box-shadow: 0 1px 0 0 $white-opacity-60;
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
@@ -186,7 +186,7 @@
}
textarea {
background: palette(grayscale, white-t);
background: $white;
display: block;
height: 45px;
margin-bottom: $baseline;
@@ -196,7 +196,7 @@
input[type="email"],
input[type="text"],
input[type="password"] {
background: palette(grayscale, white-t);
background: $white;
display: block;
height: 45px;
margin-bottom: $baseline;

8
lms/static/sass/shared-v2/_variables.scss
View File

@@ -1,9 +1,9 @@
// LMS variables
$lms-gray: palette(grayscale, base);
$lms-background-color: palette(grayscale, white); // Why is the Pattern Library default background different?
$lms-container-background-color: palette(grayscale, white-t);
$lms-border-color: palette(grayscale, light);
$lms-background-color: palette(grayscale, x-back); // Why is the Pattern Library default background different?
$lms-container-background-color: $white;
$lms-border-color: palette(grayscale, back);
$lms-label-color: palette(grayscale, black);
$lms-active-color: palette(primary, base);
@@ -17,5 +17,5 @@ $light-grey-transparent: rgba(200,200,200, 0);
$light-grey-solid: rgba(200,200,200, 1);
// Icons
$lms-dark-icon-color: palette(grayscale, white-t);
$lms-dark-icon-color: $white;
$lms-dark-icon-background-color: palette(grayscale, black);

6
lms/static/sass/views/_program-details.scss
View File

@@ -16,14 +16,14 @@
.title,
.subtitle {
color: palette(grayscale, white-t);
color: $white;
font-weight: font-weight(semi-bold);
}
.org-wrapper {
position: absolute;
top: 0;
background: palette(grayscale, white-t);
background: $white;
opacity: 0.7;
left: 0;
padding: 20px;
@@ -54,7 +54,7 @@
color: palette(grayscale, dark);
&.active {
color: palette(grayscale, x-dark);
color: palette(grayscale, dark);
}
}

2
lms/templates/discussion/_discussion_course_navigation.html
View File

@@ -8,7 +8,7 @@ from django_comment_client.permissions import has_permission
<%block name="extratabs">
% if has_permission(user, 'create_thread', course.id):
<li class="right">
<button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
<button class="new-post-btn btn btn-small">${_("Add a Post")}</button>
</li>
% endif
</%block>

2
lms/templates/discussion/_discussion_inline.html
View File

@@ -11,7 +11,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
<span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span>
</a>
% if can_create_thread:
<button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
<button class="new-post-btn btn btn-small">${_("Add a Post")}</button>
% endif
</div>
<script type="text/javascript">

2
lms/templates/ux/reference/course-skeleton.html
View File

@@ -42,7 +42,7 @@
</div>
<div class="page-header-secondary">
<div class="form-actions">
<button class="btn-neutral btn-small">Click Me!</button>
<button class="btn btn-small">Click Me!</button>
## TODO: note that this search component markup is provisional
## - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
## - update the Pattern Library's markup to match

2
package.json
View File

@@ -5,7 +5,7 @@
"backbone": "~1.3.2",
"backbone-validation": "~0.11.5",
"coffee-script": "1.6.1",
"edx-pattern-library": "0.16.1",
"edx-pattern-library": "0.16.3",
"edx-ui-toolkit": "1.4.1",
"jquery": "~2.2.0",
"jquery-migrate": "^1.4.1",