541d20ef83
This commit implements STUD-1490, allowing creation of components on the container page. It also enables the delete and duplicate buttons now that new content can be created that would benefit. Note that it also creates shared functionality for adding components, and refactors the unit page to use it too.
840 lines
14 KiB
SCSS
840 lines
14 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-t1;
|
|
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-prompt.is-shown {
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
|
|
.prompt {
|
|
@include animation(bounceIn $tmg-f1 ease-in-out 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// prompt hiding
|
|
&.prompt-is-hiding {
|
|
|
|
.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: -($ui-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;
|
|
}
|
|
}
|