' );
$notice.find( '.dops-notice__content' ).before( icon );
$notice.find( '.vp-message' ).removeClass( 'vp-message' ).addClass( 'dops-notice__text' );
diff --git a/_inc/client/components/global-notices/style.scss b/_inc/client/components/global-notices/style.scss
index a43ebe6430e9b..71b0e3ec616cf 100644
--- a/_inc/client/components/global-notices/style.scss
+++ b/_inc/client/components/global-notices/style.scss
@@ -3,9 +3,8 @@
@import '../../scss/z-index';
.global-notices {
- overflow: hidden;
text-align: right;
- //pointer-events: none;
+ pointer-events: none;
z-index: z-index( 'root', '.global-notices' );
position: fixed;
@@ -39,28 +38,23 @@
margin-bottom: 0;
text-align: left;
pointer-events: auto;
+ border-radius: 0;
+ box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.2 ),
+ 0 0 56px rgba( 0, 0, 0, 0.15 );
+
+ .dops-notice__icon-wrapper {
+ border-radius: 0;
+ }
@include breakpoint( ">660px" ) {
display: flex;
- border-radius: 20px;
overflow: hidden;
margin-bottom: 24px;
- }
-}
-
-.global-notices .dops-notice__icon {
-
- @include breakpoint( ">660px" ) {
- padding: 8px 0 8px 16px;
- }
-}
+ border-radius: 3px;
-.global-notices .dops-notice__content {
- flex-basis: auto;
- flex-grow: 1;
-
- @include breakpoint( ">660px" ) {
- padding: 9px 13px;
+ .dops-notice__icon-wrapper {
+ border-radius: 3px 0 0 3px;
+ }
}
}
@@ -68,7 +62,7 @@
@include breakpoint( ">660px" ) {
font-size: 14px;
- padding: 9px 16px;
+ padding: 13px 16px;
}
}
@@ -76,6 +70,6 @@
flex-shrink: 0;
@include breakpoint( ">660px" ) {
- padding: 8px 16px;
+ padding: 13px 16px 0;
}
-}
\ No newline at end of file
+}
diff --git a/_inc/client/components/notice/index.jsx b/_inc/client/components/notice/index.jsx
index f051d8ecc40f2..98c058647c3eb 100644
--- a/_inc/client/components/notice/index.jsx
+++ b/_inc/client/components/notice/index.jsx
@@ -78,32 +78,37 @@ export default class SimpleNotice extends React.Component {
};
render() {
- const { status, className, isCompact, showDismiss } = this.props;
+ const {
+ children,
+ className,
+ icon,
+ isCompact,
+ onDismissClick,
+ showDismiss = ! isCompact, // by default, show on normal notices, don't show on compact ones
+ status,
+ text,
+ dismissText
+ } = this.props;
const classes = classnames( 'dops-notice', status, className, {
'is-compact': isCompact,
- 'is-dismissable': showDismiss
+ 'is-dismissable': showDismiss,
} );
- const { icon, text, children, onDismissClick, dismissText } = this.props;
-
return (
-
+
+
+
-
- { text ? text : children }
-
+ { text ? text : children }
{ text ? children : null }
{ showDismiss && (
-
+
- { dismissText }
+
+ { dismissText }
+
) }
diff --git a/_inc/client/components/notice/style.scss b/_inc/client/components/notice/style.scss
index a7a11af6c6dc2..6a48bc57f0e5a 100644
--- a/_inc/client/components/notice/style.scss
+++ b/_inc/client/components/notice/style.scss
@@ -5,120 +5,111 @@
.dops-notice {
display: flex;
- flex-direction: column;
position: relative;
width: 100%;
margin-bottom: 24px;
- background: lighten( $gray, 30 );
box-sizing: border-box;
animation: appear .3s ease-in-out;
-
- @include breakpoint( ">480px" ) {
- flex-direction: row;
- }
+ background: $gray-dark;
+ color: $white;
+ border-radius: 3px;
+ line-height: 1.5;
// Success!
&.is-success {
- background: $alert-green;
+ .dops-notice__icon-wrapper {
+ background: $alert-green;
+ }
}
// Warning
&.is-warning {
- background: $alert-yellow;
+ .dops-notice__icon-wrapper {
+ background: $alert-yellow;
+ }
}
// Error! OHNO!
&.is-error {
- background: $alert-red;
+ .dops-notice__icon-wrapper {
+ background: $alert-red;
+ }
}
// General notice
&.is-info {
- background: $blue-wordpress;
+ .dops-notice__icon-wrapper {
+ background: $blue-medium;
+ }
+ }
+
+ .dops-notice__dismiss {
+ overflow: hidden;
}
&.is-success,
&.is-error,
&.is-warning,
&.is-info {
- color: $white;
-
- .dops-notice__text a {
- color: $white;
- }
-
.dops-notice__dismiss {
- color: $white;
+ overflow: hidden;
}
}
-
- // Basic - Unobtrusive, no icon
- &.is-basic {
- background: $white;
- color: $gray;
- box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
- 0 1px 2px lighten( $gray, 30% );
-
- .dops-notice__dismiss:focus {
- box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
- 0 1px 2px lighten( $gray, 30% );
- }
-
- @include breakpoint( ">660px" ) {
- &:before {
- display: none;
- }
- }
-
-
- }
}
-.dops-notice__icon {
- position: absolute;
- top: 0;
- left: 0;
+.dops-notice__icon-wrapper {
+ background: $gray-text-min;
+ color: $white;
display: flex;
+ align-items: baseline;
+ width: 47px;
+ justify-content: center;
+ border-radius: 3px 0 0 3px;
flex-shrink: 0;
- width: 18px;
- height: 18px;
- padding: 14px 16px;
+ align-self: stretch;
- @include breakpoint( ">480px" ) {
- position: relative;
- padding: 13px 0 13px 16px;
- width: 24px;
- height: 24px;
+ .gridicon {
+ margin-top: 10px;
+
+ @include breakpoint( ">480px" ) {
+ margin-top: 12px;
+ }
}
}
.dops-notice__content {
- display: flex;
- flex-grow: 1;
- padding: 14px 48px;
+ padding: 13px;
font-size: 12px;
+ flex-grow: 1;
@include breakpoint( ">480px" ) {
font-size: 14px;
- padding: 13px;
}
}
.dops-notice__text {
- max-width: 680px;
+ a.dops-notice__text-no-underline {
+ text-decoration: none;
+ }
- a {
+ a,
+ a:visited {
text-decoration: underline;
+ color: $white;
+
+ &:hover {
+ color: $white;
+ text-decoration: none;
+ }
}
ul {
margin-bottom: 0;
margin-left: 0;
- list-style: disc;
}
li {
- margin-left: 1.2em;
+ margin-left: 2em;
margin-top: 0.5em;
}
@@ -139,14 +130,10 @@
// "X" for dismissing a notice
.dops-notice__dismiss {
- position: absolute;
- top: 0;
- right: 0;
- display: flex;
flex-shrink: 0;
- padding: 14px 16px;
+ padding: 12px;
cursor: pointer;
- color: $gray;
+ padding-bottom: 0;
.gridicon {
width: 18px;
@@ -154,8 +141,8 @@
}
@include breakpoint( ">480px" ) {
- position: relative;
- padding: 13px 16px;
+ padding: 11px;
+ padding-bottom: 0;
.gridicon {
width: 24px;
@@ -163,38 +150,27 @@
}
}
- &:hover,
- &:focus {
- color: $gray-dark;
- }
-
.dops-notice & {
- color: $gray;
- opacity: 0.85;
+ color: $gray-lighten-10;
&:hover,
&:focus {
- opacity: 1;
+ color: $white;
}
}
}
// specificity for general `a` elements within notice is too great
a.dops-notice__action {
- display: flex;
- justify-content: center;
- flex-shrink: 0;
- flex-grow: 1;
- box-sizing: border-box;
- margin: 0 8px 8px 8px;
- padding: 8px;
- border-radius: 3px;
cursor: pointer;
font-size: 12px;
font-weight: 400;
text-decoration: none;
white-space: nowrap;
- background: lighten( $gray, 28 );
+ color: $gray-lighten-10;
+ padding: 13px;
+ display: flex;
+ align-items: center;
@include breakpoint( ">480px" ) {
flex-shrink: 1;
@@ -211,17 +187,13 @@ a.dops-notice__action {
}
}
- .is-success &,
- .is-error &,
- .is-warning &,
- .is-info & {
- color: $white;
+ &:visited {
+ color: $gray-lighten-10;
}
- .is-success & { background: darken( $alert-green, 15 ); }
- .is-error & { background: darken( $alert-red, 15 ); }
- .is-warning & { background: darken( $alert-yellow, 15 ); }
- .is-info & { background: darken( $blue-wordpress, 15 ); }
+ &:hover {
+ color: $white;
+ }
.gridicon {
margin-left: 8px;
@@ -229,11 +201,6 @@ a.dops-notice__action {
width: 18px;
height: 18px;
}
-
- &:hover,
- &:focus {
- background: rgba( 255, 255, 255, 0.2 );
- }
}
// Compact notices
@@ -242,43 +209,45 @@ a.dops-notice__action {
flex-wrap: nowrap;
flex-direction: row;
width: auto;
- border-radius: 2px;
+ border-radius: 3px;
min-height: 20px;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: none;
vertical-align: middle;
-
- &.is-success,
- &.is-error,
- &.is-warning,
- &.is-info {
- color: $white;
- }
+ line-height: 1.5;
.dops-notice__content {
font-size: 12px;
- padding: 6px 8px;
+ padding: 6px 10px;
}
- .dops-notice__text {
- line-height: 1;
+ .dops-notice__icon-wrapper {
+ width: 28px;
+
+ .dops-notice__icon {
+ width: 18px;
+ height: 18px;
+ margin: 0;
+ }
+
+ .gridicon {
+ margin-top: 6px;
+ }
}
- .dops-notice__icon {
+ .dops-notice__dismiss {
position: relative;
align-self: center;
- flex-shrink: 0;
- margin: 0 0 0 8px;
+ flex: none;
+ margin: 0 8px 0 0;
padding: 0;
- width: 18px;
- height: 18px;
- vertical-align: middle;
- }
- .dops-notice__dismiss {
- display: none;
+ .gridicon {
+ width: 18px;
+ height: 18px;
+ }
}
a.dops-notice__action {
@@ -286,18 +255,14 @@ a.dops-notice__action {
display: inline-block;
margin: 0;
font-size: 12px;
- font-weight: 600;
align-self: center;
margin-left: 16px;
- padding: 0 8px;
- text-decoration: underline;
- text-transform: uppercase;
+ padding: 0 10px;
&:hover,
&:active,
&:focus {
background: transparent;
- text-decoration: none;
}
.gridicon {
diff --git a/_inc/client/pro-status/index.jsx b/_inc/client/pro-status/index.jsx
index f9f744f1ebce3..45d6e7a31f2a0 100644
--- a/_inc/client/pro-status/index.jsx
+++ b/_inc/client/pro-status/index.jsx
@@ -7,7 +7,6 @@ import { connect } from 'react-redux';
import { translate as __ } from 'i18n-calypso';
import Button from 'components/button';
import SimpleNotice from 'components/notice';
-import NoticeAction from 'components/notice/notice-action';
import analytics from 'lib/analytics';
import get from 'lodash/get';
@@ -116,7 +115,7 @@ class ProStatus extends React.Component {
message
}
{
- action && { action }
+ action && { action }
}
);
diff --git a/_inc/client/scss/calypso-colors.scss b/_inc/client/scss/calypso-colors.scss
index 76ab9618d8fa0..a6660b23ce411 100644
--- a/_inc/client/scss/calypso-colors.scss
+++ b/_inc/client/scss/calypso-colors.scss
@@ -21,6 +21,19 @@ $gray: #87a6bc;
$gray-light: lighten( $gray, 33% ); //#f3f6f8
$gray-dark: darken( $gray, 38% ); //#2e4453
+// $gray-text: ideal for standard, non placeholder text
+// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
+$gray-text: $gray-dark;
+$gray-text-min: darken( $gray, 18% ); //#537994
+
+// Shades of gray
+$gray-lighten-10: lighten( $gray, 10% ); // #a8bece
+$gray-lighten-20: lighten( $gray, 20% ); // #c8d7e1
+$gray-lighten-30: lighten( $gray, 30% ); // #e9eff3
+$gray-darken-10: darken( $gray, 10% ); // #668eaa
+$gray-darken-20: darken( $gray, 20% ); // #4f748e
+$gray-darken-30: darken( $gray, 30% ); // #3d596d
+
// Oranges
$orange-jazzy: #f0821e;
$orange-fire: #d54e21;