850 lines
15 KiB
SCSS
850 lines
15 KiB
SCSS
// studio - elements - system feedback
|
|
// ====================
|
|
|
|
// messages
|
|
.message {
|
|
@extend .t-copy-sub1;
|
|
display: block;
|
|
}
|
|
|
|
.message-status {
|
|
display: none;
|
|
@include border-top-radius(2px);
|
|
@include box-sizing(border-box);
|
|
border-bottom: 2px solid $yellow-d2;
|
|
margin: 0 0 $baseline 0;
|
|
padding: ($baseline/2) $baseline;
|
|
font-weight: 500;
|
|
background: $yellow-d1;
|
|
color: $white;
|
|
|
|
[class^="icon-"] {
|
|
position: relative;
|
|
top: 1px;
|
|
@include font-size(16);
|
|
display: inline-block;
|
|
margin-right: ($baseline/2);
|
|
}
|
|
|
|
.text {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.error {
|
|
border-color: $red-d3;
|
|
background: $red-l1;
|
|
}
|
|
|
|
&.is-shown {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
// alerts, notifications, prompts, and status communication
|
|
// ====================
|
|
|
|
// shared
|
|
.wrapper-notification, .wrapper-alert, .prompt {
|
|
@include box-sizing(border-box);
|
|
|
|
.copy {
|
|
@extend .t-copy-sub1;
|
|
}
|
|
}
|
|
|
|
.wrapper-notification, .wrapper-alert, .prompt {
|
|
background: $gray-d3;
|
|
|
|
.copy {
|
|
color: $gray-l2;
|
|
|
|
.title {
|
|
color: $white;
|
|
}
|
|
|
|
.nav-actions {
|
|
|
|
.action-primary {
|
|
color: $gray-d4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert, .notification, .prompt {
|
|
|
|
// types - confirm
|
|
&.confirm {
|
|
|
|
.nav-actions .action-primary {
|
|
@include blue-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $blue-d2;
|
|
}
|
|
|
|
a {
|
|
color: $blue;
|
|
|
|
&:hover {
|
|
color: $blue-s2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// types - warning
|
|
&.warning {
|
|
|
|
.nav-actions .action-primary {
|
|
@include orange-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $orange-d2;
|
|
color: $gray-d4;
|
|
}
|
|
|
|
a {
|
|
color: $orange;
|
|
|
|
&:hover {
|
|
color: $orange-s2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// types - error
|
|
&.error {
|
|
|
|
.nav-actions .action-primary {
|
|
@include red-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $red-d2;
|
|
}
|
|
|
|
a {
|
|
color: $red-l1;
|
|
|
|
&:hover {
|
|
color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
// types - announcement
|
|
&.announcement {
|
|
|
|
.nav-actions .action-primary {
|
|
@include blue-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $blue-d2;
|
|
}
|
|
|
|
a {
|
|
color: $blue;
|
|
|
|
&:hover {
|
|
color: $blue-s2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// types - confirmation
|
|
&.confirmation {
|
|
|
|
.nav-actions .action-primary {
|
|
@include green-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $green-d2;
|
|
}
|
|
|
|
a {
|
|
color: $green;
|
|
|
|
&:hover {
|
|
color: $green-s2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// types - step required
|
|
&.step-required {
|
|
|
|
.nav-actions .action-primary {
|
|
@include pink-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $pink-d2;
|
|
}
|
|
|
|
a {
|
|
color: $pink;
|
|
|
|
&:hover {
|
|
color: $pink-s1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// prompts
|
|
.wrapper-prompt {
|
|
@extend .ui-depth5;
|
|
@include transition(all $tmg-f3 ease-in-out 0s);
|
|
position: fixed;
|
|
top: 0;
|
|
background: $black-t0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
margin-right: -0.25em; /* Adjusts for spacing */
|
|
}
|
|
|
|
.prompt {
|
|
border-radius: ($baseline/5);
|
|
box-shadow: 0 0 3px $shadow-d1;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: $baseline*17.5;
|
|
border: 4px solid $black;
|
|
text-align: left;
|
|
|
|
.copy {
|
|
border-top: 4px solid $blue;
|
|
padding: $baseline;
|
|
}
|
|
|
|
.nav-actions {
|
|
box-shadow: inset 0 1px 2px $shadow-d1;
|
|
border-top: 1px solid $black-t1;
|
|
padding: ($baseline*0.75) $baseline;
|
|
background: $gray-d4;
|
|
|
|
.nav-item {
|
|
display: inline-block;
|
|
margin-right: ($baseline*0.75);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.action-primary {
|
|
@extend .t-action4;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.action-secondary {
|
|
@extend .t-action4;
|
|
}
|
|
}
|
|
}
|
|
|
|
// types of prompts - error
|
|
.prompt.error {
|
|
|
|
[class^="icon"] {
|
|
color: $red-l1;
|
|
}
|
|
|
|
.copy {
|
|
border-top-color: $red-l1;
|
|
}
|
|
}
|
|
|
|
// types of prompts - confirmation
|
|
.prompt.confirmation {
|
|
|
|
[class^="icon"] {
|
|
color: $green;
|
|
}
|
|
|
|
.copy {
|
|
border-top-color: $green;
|
|
}
|
|
}
|
|
|
|
// types of prompts - error
|
|
.prompt.warning {
|
|
|
|
[class^="icon"] {
|
|
color: $orange;
|
|
}
|
|
|
|
.copy {
|
|
border-top-color: $orange;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// notifications
|
|
.wrapper-notification {
|
|
@extend .ui-depth5;
|
|
@include clearfix();
|
|
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $blue;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: $baseline ($baseline*2);
|
|
|
|
&.wrapper-notification-warning {
|
|
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $orange;
|
|
|
|
[class^="icon"] {
|
|
color: $orange;
|
|
}
|
|
}
|
|
|
|
&.wrapper-notification-error {
|
|
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $red-l1;
|
|
|
|
[class^="icon"] {
|
|
color: $red-l1;
|
|
}
|
|
}
|
|
|
|
&.wrapper-notification-confirmation {
|
|
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $green;
|
|
|
|
[class^="icon"] {
|
|
color: $green;
|
|
}
|
|
}
|
|
|
|
&.wrapper-notification-mini {
|
|
box-shadow: 0 -1px 3px $shadow, inset 0 3px 1px $pink;
|
|
}
|
|
|
|
// shorter/status notifications
|
|
&.wrapper-notification-status {
|
|
@include border-top-radius(3px);
|
|
width: ($baseline*8);
|
|
right: ($baseline);
|
|
border: 4px solid $black;
|
|
border-bottom: none;
|
|
padding: ($baseline/2) $baseline;
|
|
|
|
.notification {
|
|
@include box-sizing(border-box);
|
|
@include clearfix();
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: none;
|
|
|
|
[class^="icon"], .copy {
|
|
float: none;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
[class^="icon"] {
|
|
width: $baseline;
|
|
height: ($baseline*1.25);
|
|
margin-right: ($baseline*0.75);
|
|
line-height: 3rem;
|
|
}
|
|
|
|
.copy {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// help notifications
|
|
&.wrapper-notification-help {
|
|
@include border-top-radius(3px);
|
|
width: ($baseline*14);
|
|
right: ($baseline);
|
|
border: 4px solid $black;
|
|
border-bottom: none;
|
|
padding: $baseline;
|
|
|
|
.notification {
|
|
@include box-sizing(border-box);
|
|
@include clearfix();
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: none;
|
|
|
|
[class^="icon"] {
|
|
width: $baseline;
|
|
margin-right: ($baseline*0.75);
|
|
}
|
|
|
|
.action-notification-close {
|
|
right: 0;
|
|
}
|
|
|
|
.copy {
|
|
width: ($baseline*10);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification {
|
|
@include box-sizing(border-box);
|
|
@include clearfix();
|
|
margin: 0 auto;
|
|
width: flex-grid(12);
|
|
max-width: $fg-max-width;
|
|
min-width: $fg-min-width;
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
[class^="icon"], .copy {
|
|
float: left;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
[class^="icon"] {
|
|
@include transition (color 0.50s ease-in-out 0s);
|
|
@include font-size(22);
|
|
width: flex-grid(1, 12);
|
|
height: ($baseline*1.25);
|
|
margin-top: ($baseline/4);
|
|
margin-right: flex-gutter();
|
|
text-align: right;
|
|
color: $white;
|
|
}
|
|
|
|
.copy {
|
|
@extend .t-copy-sub1;
|
|
width: flex-grid(10, 12);
|
|
color: $gray-l2;
|
|
|
|
.title {
|
|
@extend .t-title7;
|
|
margin-bottom: 0;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// with actions
|
|
&.has-actions {
|
|
|
|
[class^="icon"] {
|
|
width: flex-grid(1, 12);
|
|
}
|
|
|
|
.copy {
|
|
width: flex-grid(7, 12);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.nav-actions {
|
|
width: flex-grid(4, 12);
|
|
float: right;
|
|
margin-top: ($baseline/4);
|
|
text-align: right;
|
|
|
|
.nav-item {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: ($baseline/2);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-primary {
|
|
@include blue-button();
|
|
border-color: $blue-d2;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.action-secondary {
|
|
|
|
@extend .t-action4;
|
|
}
|
|
}
|
|
|
|
&.confirmation {
|
|
|
|
.copy {
|
|
margin-top: ($baseline/5);
|
|
}
|
|
}
|
|
|
|
&.mini {
|
|
|
|
[class^="icon"] {
|
|
@include animation(rotateCW $tmg-s3 linear infinite);
|
|
width: 25px;
|
|
margin: -4px 10px 0 0;
|
|
@include transform-origin(52% 60%);
|
|
}
|
|
|
|
.copy p {
|
|
@extend .cont-text-sr;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// alerts
|
|
.wrapper-alert {
|
|
@extend .ui-depth2;
|
|
@include box-sizing(border-box);
|
|
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-top: 1px solid $black;
|
|
padding: $baseline ($baseline*2) ($baseline*1.5) ($baseline*2);
|
|
background: $gray-d3;
|
|
|
|
// needed since page load is very slow
|
|
display: none;
|
|
|
|
// needed since page load is very slow
|
|
&.is-shown {
|
|
display: block;
|
|
}
|
|
|
|
&.wrapper-alert-warning {
|
|
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $orange;
|
|
|
|
[class^="icon"] {
|
|
color: $orange;
|
|
}
|
|
}
|
|
|
|
&.wrapper-alert-error {
|
|
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $red-l1;
|
|
|
|
[class^="icon"] {
|
|
color: $red-l1;
|
|
}
|
|
}
|
|
|
|
&.wrapper-alert-confirmation {
|
|
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $green;
|
|
|
|
[class^="icon"] {
|
|
color: $green;
|
|
}
|
|
}
|
|
|
|
&.wrapper-alert-announcement {
|
|
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue;
|
|
|
|
[class^="icon"] {
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
&.wrapper-alert-step-required {
|
|
box-shadow: 0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $pink;
|
|
|
|
[class^="icon"] {
|
|
color: $pink;
|
|
}
|
|
}
|
|
}
|
|
|
|
// adopted alerts
|
|
.alert {
|
|
@include box-sizing(border-box);
|
|
@include clearfix();
|
|
margin: 0 auto;
|
|
width: flex-grid(12);
|
|
max-width: $fg-max-width;
|
|
min-width: $fg-min-width;
|
|
color: $white;
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
[class^="icon"], .copy {
|
|
float: left;
|
|
}
|
|
|
|
[class^="icon"] {
|
|
@include transition (color 0.50s ease-in-out 0s);
|
|
@include font-size(22);
|
|
width: flex-grid(1, 12);
|
|
margin: ($baseline/4) flex-gutter() 0 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.copy {
|
|
width: flex-grid(10, 12);
|
|
color: $gray-l2;
|
|
|
|
.title {
|
|
@extend .t-title7;
|
|
margin-bottom: 0;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// with actions
|
|
&.has-actions {
|
|
|
|
[class^="icon"] {
|
|
width: flex-grid(1, 12);
|
|
}
|
|
|
|
.copy {
|
|
width: flex-grid(7, 12);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.nav-actions {
|
|
width: flex-grid(4, 12);
|
|
float: right;
|
|
margin-top: ($baseline/2);
|
|
text-align: right;
|
|
|
|
.nav-item {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: ($baseline/2);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.action-primary {
|
|
@extend .t-action4;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.action-secondary {
|
|
@extend .t-action4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// with cancel
|
|
.action-alert-close {
|
|
@include border-bottom-radius(($baseline/5));
|
|
position: absolute;
|
|
top: -($baseline/10);
|
|
right: $baseline;
|
|
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
|
|
background: $gray-d4;
|
|
text-align: center;
|
|
|
|
.label {
|
|
@extend .cont-text-sr;
|
|
}
|
|
|
|
[class^="icon"] {
|
|
@include font-size(14);
|
|
color: $white;
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 2px;
|
|
}
|
|
|
|
&:hover {
|
|
background: $gray-d1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// js enabled
|
|
.js {
|
|
|
|
// prompt set-up
|
|
.wrapper-prompt {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
|
|
.prompt {
|
|
|
|
}
|
|
}
|
|
|
|
// prompt showing
|
|
&.prompt-is-shown {
|
|
|
|
.wrapper-view {
|
|
-webkit-filter: blur(($baseline/10)) grayscale(25%);
|
|
filter: blur(($baseline/10)) grayscale(25%);
|
|
}
|
|
|
|
.wrapper-prompt.is-shown {
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
|
|
.prompt {
|
|
@include animation(bounceIn $tmg-f1 ease-in-out 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// prompt hiding
|
|
&.prompt-is-hiding {
|
|
|
|
.wrapper-view {
|
|
-webkit-filter: blur(($baseline/10)) grayscale(25%);
|
|
filter: blur(($baseline/10)) grayscale(25%);
|
|
}
|
|
|
|
.wrapper-prompt {
|
|
|
|
.prompt {
|
|
@include animation(bounceOut $tmg-f1 ease-in-out 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// alert showing/hiding done by jQuery
|
|
.wrapper-alert { }
|
|
|
|
// notification showing/hiding
|
|
.wrapper-notification {
|
|
bottom: -($notification-height);
|
|
|
|
// varying animations
|
|
&.is-shown {
|
|
@include animation(notificationSlideUp $tmg-s1 ease-in-out 1);
|
|
@include animation-fill-mode(forwards);
|
|
}
|
|
|
|
&.is-hiding {
|
|
@include animation(notificationSlideDown $tmg-s1 ease-in-out 1);
|
|
@include animation-fill-mode(forwards);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// temporary
|
|
body.uxdesign.alerts {
|
|
|
|
.content-primary, .content-supplementary {
|
|
@include box-sizing(border-box);
|
|
float: left;
|
|
}
|
|
|
|
.content-primary {
|
|
@extend .ui-window;
|
|
width: flex-grid(12, 12);
|
|
margin-right: flex-gutter();
|
|
padding: $baseline ($baseline*1.5);
|
|
|
|
> section {
|
|
margin-bottom: ($baseline*2);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
|
|
li {
|
|
@include clearfix();
|
|
width: flex-grid(12, 12);
|
|
margin-bottom: ($baseline/4);
|
|
border-bottom: 1px solid $gray-l4;
|
|
padding-bottom: ($baseline/4);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
a {
|
|
float: left;
|
|
width: flex-grid(5, 12);
|
|
margin-right: flex-gutter();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// artifact styles
|
|
.main-wrapper {
|
|
.alert {
|
|
padding: 15px 20px;
|
|
margin-bottom: 30px;
|
|
border-radius: 3px;
|
|
border: 1px solid #edbd3c;
|
|
border-radius: 3px;
|
|
background: #fbf6e1;
|
|
// background: #edbd3c;
|
|
font-size: 14px;
|
|
@include clearfix;
|
|
|
|
.alert-message {
|
|
float: left;
|
|
margin: 4px 0 0 0;
|
|
color: $gray-d3;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.alert-action {
|
|
float: right;
|
|
|
|
&.secondary {
|
|
@include orange-button;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body.error {
|
|
background: $gray-d4;
|
|
color: $gray-d3;
|
|
|
|
.primary-header {
|
|
display: none;
|
|
}
|
|
|
|
.error-prompt {
|
|
width: 700px;
|
|
margin: 150px auto;
|
|
padding: 60px 50px 90px;
|
|
border-radius: 3px;
|
|
background: $white;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
float: none;
|
|
margin: 0;
|
|
font-size: 60px;
|
|
font-weight: 300;
|
|
color: $gray-d3;
|
|
}
|
|
|
|
.description {
|
|
margin-bottom: 50px;
|
|
font-size: 21px;
|
|
}
|
|
|
|
.back-button {
|
|
@include blue-button;
|
|
padding: 14px 40px 18px;
|
|
font-size: 18px;
|
|
}
|
|
}
|