application/css/top.css.scss
@import "definitions.css.scss";
$navigation-color: #555;
#top {
@extend .container-padding;
@extend .controls-gradient;
@extend .clearfix;
@include display-box;
@include box-align(center);
position: fixed;
height: 31px;
top: 0;
right: 0;
left: 0;
#navigation {
@include box-flex;
font-size: 11px;
font-weight: bold;
color: #999999;
width: 100%;
li {
@include no-select;
padding-left: 10px;
padding-right: 15px;
background: url("/@spontaneous/static/location-arrow-c1c1d3ca472481c61a0a5f8cb289d743.png") right 0 no-repeat;
float: left;
display: block;
font-weight: bold;
cursor: pointer;
position: relative;
padding-right: 30px;
select {
@include box-sizing;
@include interface;
text-transform: none;
font-size: 11px;
line-height: 13px;
-webkit-appearance: none;
cursor: pointer;
display: block;
background: none;
// background: url("/@spontaneous/static/select-arrow-83cb131e0a646a7956141b7791351b97") 95% 50% no-repeat;
border: none;
outline: none;
position: relative;
padding-top: 0px;
padding-right: 25px;
height: 31px;
color: #ccc;
font-weight: bold;
width: 100%;
}
.unselected {
color: #888;
font-weight: normal;
font-style: italic;
max-width: 90px;
optgroup, optgroup option {
font-style: normal !important;
}
}
a {
@include box-sizing;
cursor: pointer;
// color: #888888;
color: #ddd;
height: 31px;
padding-top: 8px;
display: block;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
}
a:hover, select:hover {
color: white;
}
}
li:before {
@include awesome-icon("\f0dc");
position: absolute;
right: 10px;
top: 50%;
margin-top: -6px;
font-size: 118.2%;
color: $navigation-color;
}
li:hover:before {
color: #fff;
}
li.disabled:hover:before {
color: $navigation-color;
}
li.root {
min-width: 100px;
}
li.singular:before {
display: none;
content: "";
}
}
#spontaneous-root {
background-image: url("/@spontaneous/static/spontaneous-states-e91ec89db525c62da0105b97cdd781ce.png"), url("/@spontaneous/static/location-arrow-c1c1d3ca472481c61a0a5f8cb289d743.png");
background-position: 0 5px, right 0;
background-repeat: no-repeat;
padding-right: 12px;
cursor: pointer;
height: 31px;
span {
padding-right: 28px;
}
&:hover {
background-position: 0 -83px, right 0;
}
&.active {
background-position: 0 -39px, right 0;
}
}
#service-outer {
@include box-flex;
}
#cms-navigation-view {
@include display-box;
@include box-align(center);
}
#service-navigation {
@include display-box;
@include box-align(center);
h2 {
@include box-flex;
@include interface;
text-transform: none;
font-size: 11px;
padding-left: $unit;
color: #fff;
font-weight: bold;
}
a {
display: block;
width: 64px;
}
}
#switch-mode, #open-publish {
@include button;
@include display-box;
@include box-orient(column);
@include box-align(center);
margin: 0;
width: 70px;
&.disabled {
opacity: 0.5;
@include button-color(#666);
}
}
#open-publish {
position: relative;
margin-right: $unit;
#publish-progress {
position: absolute;
left: 4px;
top: 1px;
}
&.disabled {
}
}
#open-publish.progress {
padding-left: 20px;
padding-right: 20px;
width: 124px;
@include button-color(#666666);
color: #999999;
}
}
#navigation-page-browser {
@include interface;
@include box-sizing;
.search {
@include rounded-top();
background-color: #666;
padding: 2px;
input {
display: block;
margin: 0;
width: 100%;
}
}
.frame {
max-height: 508px;
overflow: auto;
}
.pages {
@include rounded-bottom();
background-color: #fff;
color: #333;
font-size: 110.0%;
padding: 4px 0;
h4, .page {
padding: 2px 4px;
}
h4 {
border-bottom: solid 1px #999;
color: #666;
}
h3 {
padding: 4px;
text-transform: none;
color: #666;
}
.page {
padding-top: 3px;
padding-bottom: 3px;
cursor: pointer;
text-transform: none;
border-bottom: dotted 1px #eee;
}
.page:hover {
color: $action;
}
.page.current {
color: $highlight;
}
.box {
margin-top: 8px;
}
.box:first-child {
margin-top: 0px;
}
}
}