application/css/dialogue.css.scss
@import "definitions.css.scss";
$dialogue-title-height: 32px;
#dialogue-wrap {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
z-index: 1001;
$dialogue-frame-width: 2px;
#dialogue-outer {
@include rounded;
@include display-box;
@include box-orient($direction: vertical);
@extend .shadow;
background-color: $chrome-bg;
position: absolute;
top: 50px;
bottom: 50px;
left: 25%;
right: 25%;
#dialogue-title {
@include box-sizing;
@extend .controls-gradient;
@include header;
@include rounded-top;
position: absolute;
right: 0;
left: 0;
height: $dialogue-title-height;
color: #fff;
padding: 0 $unit 0 ($unit+$dialogue-frame-width);
padding-top: 6px;
font-weight: 100;
}
#dialogue-body {
position: absolute;
top: $dialogue-title-height;
right: 0;
left: 0;
bottom: $dialogue-title-height;
// min-height: 100px;
overflow: auto;
margin: 0 $dialogue-frame-width;
background-color: #fff;
// max-height: 70%;
// margin-top: 32px;
// margin-bottom: 32px;
}
#dialogue-control-wrap {
position: absolute;
bottom: 0;
width: 100%;
// z-index: 1002;
#dialogue-controls {
position: relative;
// display: block;
// height: 46px;
.dialogue-actions {
@include display-box;
.spacer {
@include box-flex;
}
.button {
display: block;
width: 128px;
margin: $unit 0;
& + .button {
margin-left: $unit;
}
}
.button:last-child {
margin-right: $unit;
}
.cancel {
@include button-color(#6b6b6b);
}
.save {
background-color: $action;
float: right;
}
.disabled, .disabled:hover {
@include button-color(#333, #333);
color: #6b6b6b !important;
}
}
}
}
}
}
.dialogue-wrapper {
@include rounded;
@include box-sizing;
position: relative;
// top: 32px;
background-color: #cccccc;
width: $dialogue-width;
// margin: 32px auto;
}
#create-home-dialogue {
.instructions {
@include interface;
margin: 0;
background-color: #f2f2f2;
color: #666;
padding: $unit/2 $unit;
margin-bottom: $unit;
.button {
padding-left: 2px;
padding-right: 2px;
}
}
.type {
@include rounded;
@include display-box;
cursor: pointer;
padding: $unit/2 $unit;
background-color: #fbfbfb;
border: solid 1px #f2f2f2;
margin: $unit;
margin-top: 0;
color: #333333;
&:hover {
background-color: #666;
color: #fff;
}
&.selected {
background-color: $action;
color: #fff;
}
}
}
#dialogue-wrap #dialogue-outer.publishing {
left: 5%;
right: 5%;
.dialogue-actions {
.button.rerender {
position: absolute;
left: 0;
}
}
}
#publishing-dialogue {
@include fullsize;
@include display-box;
@include box-orient(row);
.spinner {
position: absolute;
width: 48px;
height: 48px;
left: 50%;
top: 40%;
canvas {
position: relative;
left: -50%;
}
div {
left: -50%;
width: 100%;
p {
@include interface;
width: 200px;
position: relative;
left: -100px;
top: 10px;
text-align: center;
color: #ccc;
margin: 0;
}
}
}
input[type="search"] {
@include rounded;
border: solid 1px #e0e0e0;
outline: none;
margin-right: $unit;
&:focus {
border: solid 1px $highlight;
}
}
.change-list {
@include box-flex;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
&#changes {
border-right: solid 2px #000;
}
.actions {
@include interface;
@include display-box;
@include box-orient(row);
@include box-align(center);
@include box-sizing;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 25px;
color: #666;
background-color: #f2f2f2;
padding: $unit/2 $unit;
div {
@include box-flex;
}
.button {
padding-left: $unit;
padding-right: $unit;
}
}
&#to-publish {
position: absolute;
left: auto;
right: 0;
.actions {
left: 2px;
}
}
.change-sets {
@include fullsize(25px, 0, 0, 0);
overflow: auto;
padding-bottom: $unit;
padding-top: $unit;
.instructions {
font-family: $headline-font-family;
color: #999;
text-align: center;
position: relative;
padding-top: 50px;
}
}
}
// background-color: #fff;
// width: 600px;
// @extend .dialogue-wrapper;
// padding-top: $container-padding / 2;
// padding-bottom: $container-padding / 2;
.publish-up-to-date {
@include rounded;
@extend .shadow;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 60px 200px 60px 200px;
text-align: center;
background-color: #333;
opacity: 0.95;
font-family: $headline-font-family;
font-size: 24px;
padding-top: 24px;
color: #fff;
max-height: 55px;
}
.change-set {
cursor: pointer;
// padding: $unit $unit 0 $unit;
.inner {
@include rounded;
@include display-box;
// border: solid 3px transparent;
background-color: #fbfbfb;
// border: solid 1px #f2f2f2;
// border: solid 1px #f2f2f2;
margin-left: $unit;
margin-right: $unit;
margin-bottom: 2 * $unit;
}
.pages {
@include box-flex;
.title {
padding: $unit/2 $unit;
color: #333;
font-size: $target-name-size;
& + .title {
border-top: solid 1px #f2f2f2;
}
}
.title.dependent {
color: #666;
font-size: 0.7em;
}
.title:hover {
color: $action;
}
.url, .dates {
margin-top: 4px;
font-size: 10px;
color: #888;
}
.dates {
color: transparent;
}
.url {
font-size: 11px;
}
.dates {
color: #bbb;
}
.modification-date, .publication-date {
display: inline-block;
}
.modification-date {
width: 40%;
}
.publication-date {
margin-left: 4px;
.never {
font-weight: bold;
}
}
}
// &:hover {
// .dates {
// color: #999;
// }
// }
.add {
@include rounded-right;
@include display-box;
@include no-select;
@include box-pack(center);
@include box-align(center);
min-width: $container-padding;
max-width: $container-padding;
width: $container-padding;
background-color: #f2f2f2;
position: relative;
color: #999;
span {
position: relative;
top: 1px;
&:before {
@include awesome-icon("\f054");
}
&.active {
top: 0px;
&:before {
@include awesome-icon("\f00d");
}
}
}
&:hover {
background-color: $action;
color: #fff;
}
}
.titles a {
display: block;
margin-bottom: 2px;
span {
font-size: 11px;
margin-left: 1em;
}
}
&.unpublished {
.page-title__unpublished {
@include interface;
line-height: 10px;
color: $highlight;
margin-left: $unit/2;
font-weight: 100;
&:before {
@include awesome-icon("\f005");
margin-right: 2px;
}
}
.title.dependent .page-title {
&:after {
content: "";
}
}
}
}
.change-set:hover {
border-color: $action;
}
.change-set.selected {
}
.change-set.locked {
.pages {
position: relative;
}
.info {
@include rounded-left;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
bottom: 0;
width: 0;
background-color: rgba(33, 33, 33, 0.9);
color: #aaaaaa;
font-size: 0.7em;
z-index: 1;
.lock-state {
overflow: auto;
padding: $unit/2;
}
.locks {
strong {
margin-right: $unit/2;
&:after {
content: ":";
}
}
p {
margin: 0 0 $unit/2 0;
}
}
h3 {
font-size: 1em;
font-weight: normal;
margin: 0;
color: #fafafa;
margin: 0;
margin-bottom: $unit/2;
}
}
.page-title {
color: #999;
}
.add {
span {
&:before {
@include awesome-icon("\f023");
}
}
}
}
&.first-publish {
#changes {
display: none;
}
#to-publish {
position: absolute;
left: 0;
right: 0;
width: auto;
}
}
}
#root-menu {
ul {
margin-bottom: 2 * $unit;
li {
@include interface;
font-size: 11px;
color: #999;
margin-bottom: $unit/2;
a {
font-family: $content-font-family;
text-transform: none;
color: #fff;
cursor: pointer;
&:hover {
color: $action;
}
}
}
.title {
padding-bottom: $unit/2;
border-bottom: solid 1px #333;
}
}
li.user:before {
@include awesome-icon("\f007");
}
.external-services li.title:before {
@include awesome-icon("\f013");
}
li.user:before, .external-services li.title:before {
position: relative;
top: 1px;
font-size: 1.3em;
width: 2*$unit;
}
}