9f8f64cffe
Studio: adding course re-run-centric static template rendering * initial HTML for dashboard states * initial HTML for new course re-run view/form * initial HTML placeholder for outline alert UI Conflicts: cms/templates/index.html Studio: adding styling for course re-run-centric views * adding new view/page mast-wizard type * refactoring create course/element form styling * adding course re-run view specific styling * adding courses processing styling (w/ alerts and status) Course rerun server-side updates: support display_name and DuplicateCourseError. Studio: further design revisions and tweaks from feedback * removing new window attribute from re-run control * removing links from processing courses * revising look/feel of dismiss action on dashboard + alert * correcting font-weight of dashboard processing title * adding extra space to course rerun action on dashboard * re-wording secondary cancel action on rerun view Conflicts: cms/templates/index.html Added interation on unsucceeded courses in dashboard Studio: removing 'rel=external' property from course re-run actions Studio: removing hover styles for processing courses Fixed value bug in split and set course listing to display run moved task.py for rerun
935 lines
15 KiB
SCSS
935 lines
15 KiB
SCSS
// studio - base styling
|
|
// ====================
|
|
|
|
// basic setup
|
|
html {
|
|
font-size: 62.5%;
|
|
height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag
|
|
}
|
|
|
|
body {
|
|
@extend %t-copy-base;
|
|
min-width: $fg-min-width;
|
|
background: $gray-l5;
|
|
color: $gray-d2;
|
|
}
|
|
|
|
body, input, button {
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
|
|
a {
|
|
@include transition(color $tmg-f2 ease-in-out 0s);
|
|
text-decoration: none;
|
|
color: $blue;
|
|
|
|
&:hover {
|
|
color: $orange-d1;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
@extend %t-title4;
|
|
@extend %t-light;
|
|
}
|
|
|
|
.waiting {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.page-actions {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.wrapper {
|
|
@include clearfix();
|
|
@include box-sizing(border-box);
|
|
width: 100%;
|
|
}
|
|
|
|
// ====================
|
|
|
|
// typography - basic
|
|
.page-header {
|
|
@extend %t-title3;
|
|
@extend %t-strong;
|
|
display: block;
|
|
color: $gray-d3;
|
|
|
|
.navigation, .subtitle {
|
|
@extend %t-title7;
|
|
@extend %t-regular;
|
|
position: relative;
|
|
top: ($baseline/4);
|
|
display: block;
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.section-header {
|
|
@extend %t-title4;
|
|
@extend %t-strong;
|
|
|
|
.subtitle {
|
|
@extend %t-title7;
|
|
}
|
|
}
|
|
|
|
.area-header {
|
|
@extend %t-title6;
|
|
@extend %t-strong;
|
|
|
|
.subtitle {
|
|
@extend %t-title8;
|
|
}
|
|
}
|
|
|
|
.area-subheader {
|
|
@extend %t-title7;
|
|
@extend %t-strong;
|
|
|
|
.subtitle {
|
|
@extend %t-title9;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// typography - primary content
|
|
.content-primary {
|
|
|
|
.section-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.content-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.area-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.area-subheader {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// typography - primary content
|
|
.content-secondary {
|
|
|
|
.section-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.content-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.content-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// typography - loose headings (BT: needs to be removed once html is clean)
|
|
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
|
|
@extend %t-strong;
|
|
}
|
|
|
|
// typography - primary content
|
|
.content-secondary {
|
|
|
|
.section-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.content-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
|
|
.content-header {
|
|
color: $gray-d3;
|
|
|
|
.subtitle {
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// typography - loose headings (BT: needs to be removed once html is clean)
|
|
.title-1 {
|
|
@extend %t-title3;
|
|
margin-bottom: ($baseline*1.5);
|
|
}
|
|
|
|
.title-2 {
|
|
@extend %t-title4;
|
|
margin-bottom: $baseline;
|
|
}
|
|
|
|
.title-3 {
|
|
@extend %t-title5;
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
.title-4 {
|
|
@extend %t-title7;
|
|
@extend %t-regular;
|
|
margin-bottom: $baseline;
|
|
}
|
|
|
|
.title-5 {
|
|
@extend %t-title7;
|
|
@extend %t-regular;
|
|
color: $gray-l1;
|
|
margin-bottom: $baseline;
|
|
}
|
|
|
|
.title-6 {
|
|
@extend %t-title7;
|
|
@extend %t-regular;
|
|
color: $gray-l2;
|
|
margin-bottom: $baseline;
|
|
}
|
|
|
|
p, ul, ol, dl {
|
|
margin-bottom: ($baseline/2);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// layout - basic
|
|
.wrapper-view {
|
|
|
|
}
|
|
|
|
// ====================
|
|
|
|
// layout - basic page header
|
|
.wrapper-mast {
|
|
margin: ($baseline*1.5) 0 0 0;
|
|
padding: 0 $baseline;
|
|
position: relative;
|
|
|
|
.mast, .metadata {
|
|
@include clearfix();
|
|
position: relative;
|
|
max-width: $fg-max-width;
|
|
min-width: $fg-min-width;
|
|
width: flex-grid(12);
|
|
margin: 0 auto $baseline auto;
|
|
color: $gray-d2;
|
|
}
|
|
|
|
.mast {
|
|
border-bottom: 1px solid $gray-l4;
|
|
padding-bottom: ($baseline/2);
|
|
|
|
// layout with actions
|
|
.page-header {
|
|
width: flex-grid(12);
|
|
}
|
|
|
|
// layout with actions
|
|
&.has-actions {
|
|
@include clearfix();
|
|
|
|
.page-header {
|
|
float: left;
|
|
width: flex-grid(6,12);
|
|
margin-right: flex-gutter();
|
|
}
|
|
|
|
.nav-actions {
|
|
position: relative;
|
|
bottom: -($baseline*0.75);
|
|
float: right;
|
|
width: flex-grid(6,12);
|
|
text-align: right;
|
|
|
|
.nav-item {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-right: ($baseline/2);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// buttons
|
|
.button {
|
|
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
|
|
}
|
|
|
|
.new-button {
|
|
|
|
}
|
|
|
|
.view-button {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// layout with actions
|
|
&.has-subtitle {
|
|
|
|
.nav-actions {
|
|
bottom: -($baseline*1.5);
|
|
}
|
|
}
|
|
|
|
// layout with navigation
|
|
&.has-navigation {
|
|
|
|
.nav-actions {
|
|
bottom: -($baseline*1.5);
|
|
}
|
|
|
|
.navigation-link {
|
|
@extend %cont-truncated;
|
|
display: inline-block;
|
|
vertical-align: bottom; // correct for extra padding in FF
|
|
max-width: 250px;
|
|
|
|
&.navigation-current {
|
|
@extend %ui-disabled;
|
|
color: $gray;
|
|
max-width: 250px;
|
|
|
|
&:before {
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigation-link:before {
|
|
content: " / ";
|
|
margin: ($baseline/4);
|
|
color: $gray;
|
|
|
|
&:hover {
|
|
color: $gray;
|
|
}
|
|
}
|
|
|
|
.navigation .navigation-link:first-child:before {
|
|
content: "";
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// CASE: wizard-based mast
|
|
.mast-wizard {
|
|
|
|
.page-header-sub {
|
|
@extend %t-title4;
|
|
color: $gray;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.page-header-super {
|
|
@extend %t-title4;
|
|
float: left;
|
|
width: flex-grid(12,12);
|
|
margin-top: ($baseline/2);
|
|
border-top: 1px solid $gray-l4;
|
|
padding-top: ($baseline/2);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
// page metadata/action bar
|
|
.metadata {
|
|
|
|
}
|
|
}
|
|
|
|
// layout - basic page content
|
|
.wrapper-content {
|
|
margin: 0;
|
|
padding: 0 $baseline;
|
|
position: relative;
|
|
}
|
|
|
|
.content {
|
|
@include clearfix();
|
|
@extend %t-copy-base;
|
|
max-width: $fg-max-width;
|
|
min-width: $fg-min-width;
|
|
width: flex-grid(12);
|
|
margin: 0 auto;
|
|
color: $gray-d2;
|
|
|
|
header {
|
|
position: relative;
|
|
margin-bottom: $baseline;
|
|
border-bottom: 1px solid $gray-l4;
|
|
padding-bottom: ($baseline/2);
|
|
|
|
.title-sub {
|
|
@extend %t-copy-sub1;
|
|
display: block;
|
|
margin: 0;
|
|
color: $gray-l2;
|
|
}
|
|
|
|
.title-1 {
|
|
@extend %t-title3;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: 600;
|
|
color: $gray-d3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-primary, .content-supplementary {
|
|
@include box-sizing(border-box);
|
|
}
|
|
|
|
// layout - primary content
|
|
.content-primary {
|
|
|
|
.title-1 {
|
|
@extend %t-title3;
|
|
}
|
|
|
|
.title-2 {
|
|
@extend %t-title4;
|
|
margin: 0 0 ($baseline/2) 0;
|
|
}
|
|
|
|
.title-3 {
|
|
@extend %t-title6;
|
|
margin: 0 0 ($baseline/2) 0;
|
|
}
|
|
|
|
header {
|
|
@include clearfix();
|
|
|
|
.title-2 {
|
|
width: flex-grid(5, 12);
|
|
margin: 0 flex-gutter() 0 0;
|
|
float: left;
|
|
}
|
|
|
|
.tip {
|
|
@extend %t-copy-sub2;
|
|
width: flex-grid(7, 12);
|
|
float: right;
|
|
margin-top: ($baseline/2);
|
|
text-align: right;
|
|
color: $gray-l2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// layout - supplemental content
|
|
.content-supplementary {
|
|
|
|
> section {
|
|
margin: 0 0 $baseline 0;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// layout - grandfathered
|
|
.main-wrapper {
|
|
position: relative;
|
|
margin: 0 ($baseline*2);
|
|
}
|
|
|
|
.inner-wrapper {
|
|
@include clearfix();
|
|
position: relative;
|
|
max-width: 1280px;
|
|
margin: auto;
|
|
|
|
> article {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.main-column {
|
|
clear: both;
|
|
float: left;
|
|
width: 70%;
|
|
}
|
|
|
|
.sidebar {
|
|
float: right;
|
|
width: 28%;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
}
|
|
|
|
// ====================
|
|
|
|
// UI - actions
|
|
.new-unit-item,
|
|
.new-subsection-item,
|
|
.new-policy-item {
|
|
@include grey-button();
|
|
@extend %t-action5;
|
|
margin: ($baseline/2);
|
|
padding: 3px ($baseline/2) 4px ($baseline/2);
|
|
|
|
.new-folder-icon,
|
|
.new-policy-icon,
|
|
.new-unit-icon {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
.item-actions {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
|
|
.edit-button,
|
|
.delete-button,
|
|
.visibility-toggle {
|
|
float: left;
|
|
margin-right: 13px;
|
|
color: #a4aab7;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// misc
|
|
hr.divide {
|
|
@extend %cont-text-sr;
|
|
}
|
|
|
|
.item-details {
|
|
float: left;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.details {
|
|
@extend %t-copy-sub1;
|
|
display: none;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.window {
|
|
// border-radius: 3px;
|
|
// box-shadow: 0 1px 1px $shadow-l1;
|
|
// margin-bottom: $baseline;
|
|
// border: 1px solid $gray-l2;
|
|
// background: $white;
|
|
|
|
.window-contents {
|
|
padding: 20px;
|
|
}
|
|
|
|
.header {
|
|
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
|
@extend %t-title7;
|
|
padding: 6px 14px;
|
|
border-bottom: 1px solid $mediumGrey;
|
|
border-radius: 2px 2px 0 0;
|
|
background-color: $lightBluishGrey;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
@extend %t-strong;
|
|
|
|
&.inline-label {
|
|
display: inline;
|
|
}
|
|
|
|
.description {
|
|
@extend %t-copy-sub2;
|
|
@extend %t-regular;
|
|
display: block;
|
|
font-style: italic;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #cbd1db;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// system notifications
|
|
.toast-notification {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
@include linear-gradient(top, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
|
|
@extend %t-copy-sub1;
|
|
display: none;
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 99999;
|
|
max-width: 350px;
|
|
padding: 15px 20px 17px;
|
|
border-radius: 3px;
|
|
border: 1px solid #333;
|
|
background-color: rgba(30, 30, 30, .92);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
|
|
text-align: center;
|
|
color: #fff;
|
|
|
|
p, span {
|
|
color: #fff;
|
|
}
|
|
|
|
strong {
|
|
@extend %t-copy-base;
|
|
@extend %t-strong;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.close-button {
|
|
@extend %t-action1;
|
|
@extend %t-strong;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 27px;
|
|
height: 27px;
|
|
line-height: 25px;
|
|
color: #aaa;
|
|
text-align: center;
|
|
|
|
.close-icon {
|
|
@extend %t-action2;
|
|
@extend %t-strong;
|
|
}
|
|
}
|
|
|
|
.action-button {
|
|
@include blue-button;
|
|
@include box-sizing(border-box);
|
|
@extend %t-action4;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.waiting {
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999998;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: rgba(255, 255, 255, .9);
|
|
}
|
|
|
|
&:after {
|
|
@extend .spinner-icon;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -10px;
|
|
margin-top: -10px;
|
|
z-index: 999999;
|
|
}
|
|
}
|
|
|
|
.waiting-inline {
|
|
&:after {
|
|
content: '';
|
|
@extend .spinner-icon;
|
|
}
|
|
}
|
|
|
|
.new-button {
|
|
@include green-button;
|
|
@extend %t-action4;
|
|
padding: 8px 20px 10px;
|
|
text-align: center;
|
|
|
|
&.big {
|
|
display: block;
|
|
}
|
|
|
|
.icon-plus {
|
|
margin-top: -2px;
|
|
line-height: 0;
|
|
}
|
|
}
|
|
|
|
.view-button {
|
|
@include blue-button;
|
|
@extend %t-action4;
|
|
text-align: center;
|
|
|
|
&.big {
|
|
display: block;
|
|
}
|
|
|
|
.icon-eye-open {
|
|
@extend %t-action2;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
margin-top: -3px;
|
|
line-height: 0;
|
|
}
|
|
}
|
|
|
|
.edit-button.standard,
|
|
.delete-button.standard,
|
|
.duplicate-button.standard {
|
|
@include white-button;
|
|
@extend %t-regular;
|
|
@extend %t-action4;
|
|
float: left;
|
|
padding: 3px 10px 4px;
|
|
margin-left: 7px;
|
|
|
|
.edit-icon,
|
|
.delete-icon,
|
|
.duplicate-icon{
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
.delete-button.standard {
|
|
|
|
&:hover {
|
|
background-color: tint($orange, 75%);
|
|
}
|
|
}
|
|
|
|
.tooltip {
|
|
@include transition(opacity $tmg-f3 ease-out 0s);
|
|
@include font-size(12);
|
|
@extend %t-regular;
|
|
@extend %ui-depth5;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0 10px;
|
|
border-radius: 3px;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
line-height: 26px;
|
|
color: $white;
|
|
pointer-events: none;
|
|
opacity: 0.0;
|
|
|
|
&:after {
|
|
@include font-size(20);
|
|
content: '▾';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -14px;
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// basic utility
|
|
|
|
// UI - semantically hide text
|
|
.sr {
|
|
@extend %cont-text-sr;
|
|
}
|
|
|
|
// UI - faking a link's behavior
|
|
.fake-link {
|
|
@extend %ui-fake-link;
|
|
}
|
|
|
|
// UI - disabled
|
|
.is-disabled {
|
|
@extend %ui-disabled;
|
|
}
|
|
|
|
.non-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.wrap {
|
|
text-wrap: wrap;
|
|
white-space: pre-wrap;
|
|
white-space: -moz-pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
// ui - semantic + visual divider
|
|
hr.divider {
|
|
@extend %cont-text-sr;
|
|
}
|
|
|
|
// ui - skipnav
|
|
.nav-skip {
|
|
@extend %t-action3;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: -($baseline*30);
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
background: $white;
|
|
border-bottom: 1px solid $gray-l4;
|
|
padding: ($baseline*0.75) ($baseline/2);
|
|
|
|
&:focus, &:active {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// js dependant
|
|
body.js {
|
|
|
|
// lean/simple modal window
|
|
.content-modal {
|
|
@include border-bottom-radius(2px);
|
|
@include box-sizing(border-box);
|
|
box-shadow: 0 2px 4px $shadow-d1;
|
|
position: relative;
|
|
display: none;
|
|
width: 700px;
|
|
overflow: hidden;
|
|
border: 1px solid $gray-d1;
|
|
padding: ($baseline);
|
|
background: $white;
|
|
|
|
.action-modal-close {
|
|
@include transition(top $tmg-f3 ease-in-out 0s);
|
|
@include border-bottom-radius(3px);
|
|
position: absolute;
|
|
top: -3px;
|
|
right: $baseline;
|
|
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
|
|
background: $gray-l3;
|
|
text-align: center;
|
|
|
|
.label {
|
|
@extend %cont-text-sr;
|
|
}
|
|
|
|
[class^="icon-"] {
|
|
@extend %t-action1;
|
|
color: $white;
|
|
}
|
|
|
|
&:hover {
|
|
background: $blue;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
img {
|
|
@include box-sizing(border-box);
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
padding: ($baseline/10);
|
|
border: 1px solid $gray-l4;
|
|
}
|
|
|
|
.title {
|
|
@extend %t-title5;
|
|
@extend %t-strong;
|
|
margin: 0 0 ($baseline/2) 0;
|
|
color: $gray-d3;
|
|
}
|
|
|
|
.description {
|
|
@extend %t-copy-sub2;
|
|
margin-top: ($baseline/2);
|
|
color: $gray-l1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// works in progress & testing
|
|
body.hide-wip {
|
|
|
|
.wip-box {
|
|
display: none;
|
|
}
|
|
}
|