* {
|
box-sizing: border-box;
|
}
|
|
html,
|
body {
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
font-family: $fontFamily;
|
font-size: 16px;
|
background: #F8F8F8;
|
}
|
|
fieldset {
|
border: 0;
|
margin: 0;
|
padding: 0;
|
}
|
|
.laboratory {
|
font-size: 0;
|
height: 100%;
|
padding-top: $headerHeight;
|
}
|
|
.control {
|
width: $sidebarWidth;
|
height: 100%;
|
display: inline-block;
|
vertical-align: top;
|
font-size: 16px;
|
background: $sidebarBackground;
|
position: relative;
|
}
|
|
.render {
|
background: #F8F8F8;
|
display: inline-block;
|
font-size: 14px;
|
padding: $renderPadding;
|
position: relative;
|
height: 100%;
|
width: "calc(100% - %s)" % $sidebarWidth;
|
vertical-align: top;
|
z-index: 2;
|
}
|
|
.tabControl {
|
line-height: 31px;
|
color: #144C66;
|
position: relative;
|
font-weight: bold;
|
}
|
|
|
/*
|
* Header
|
*/
|
|
.header {
|
position: absolute;
|
top:0;
|
left:0;
|
width: 100%;
|
background: white;
|
overflow: hidden;
|
font-size: 24px;
|
font-weight: 100;
|
height: $headerHeight;
|
color: white;
|
vertical-align: middle;
|
box-shadow: 0px 4px 10px -2px #0B1E2A;
|
z-index: 3;
|
|
.controlHeader {
|
background: #1284CC;
|
width: $sidebarWidth;
|
display: inline-block;
|
}
|
|
.logoLink {
|
box-shadow: 1px 0 6px 0px #0E6AA4;
|
display: inline-block;
|
vertical-align: middle;
|
margin-right: 10px;
|
}
|
|
.menuLink {
|
color: black;
|
font-size: 18px;
|
margin-left: 16px;
|
text-decoration: none;
|
}
|
.logo {
|
width: 98px;
|
padding: 15px;
|
}
|
|
.splogo {
|
position: absolute;
|
top: 10px;
|
right: 30px;
|
}
|
|
}
|
|
|
|
/*
|
* Icon font
|
*/
|
|
@font-face {
|
font-family: 'icomoon';
|
src:url('fonts/icomoon.eot?kn321z');
|
src:url('fonts/icomoon.eot?#iefixkn321z') format('embedded-opentype'),
|
url('fonts/icomoon.woff?kn321z') format('woff'),
|
url('fonts/icomoon.ttf?kn321z') format('truetype'),
|
url('fonts/icomoon.svg?kn321z#icomoon') format('svg');
|
font-weight: normal;
|
font-style: normal;
|
}
|
|
[class^="icon-"], [class*=" icon-"] {
|
font-family: 'icomoon';
|
speak: none;
|
font-style: normal;
|
font-weight: normal;
|
font-variant: normal;
|
text-transform: none;
|
line-height: 1;
|
transition: color 0.5s;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
&:hover {
|
cursor:pointer;
|
}
|
}
|
|
.icon-times:before {
|
content: $closeIcon;
|
}
|
|
.icon-gear:before {
|
content: $gearIcon;
|
}
|
|
.icon-info-circle:before {
|
content: $infoIcon;
|
}
|
.icon-external-link:before {
|
content: $externalLinkIcon;
|
}
|
.icon-navicon:before {
|
content: $navIcon;
|
}
|
.icon-angle-up:before {
|
content: $angleUpIcon;
|
}
|
.icon-angle-down:before {
|
content: $angleDownIcon;
|
}
|
.icon-mail-reply:before {
|
content: $replyIcon;
|
}
|
|
.icon-grid:before {
|
content: $gridIcon;
|
}
|
|
.icon-code:before {
|
content: $codeIcon;
|
}
|
|
|
/*
|
* Tabs
|
*/
|
.tabs {
|
font-size: 0;
|
background: $sidebarTabStripBg;
|
}
|
|
.tab {
|
color: #C3F1FF;
|
font-size: 12px;
|
padding: 15px 10px;
|
display: inline-block;
|
cursor: pointer;
|
transition: background 0.4s;
|
|
&.active {
|
background: $sidebarTabActiveBg;
|
&:hover {
|
background: $sidebarTabActiveBg;
|
}
|
}
|
|
&:hover {
|
background: lighten($sidebarTabStripBg, 10%);
|
}
|
}
|
|
.tabContent {
|
display: none;
|
overflow: auto;
|
position: absolute;
|
bottom: 0;
|
top: $tabHeight;
|
|
&.active {
|
display: block;
|
}
|
}
|
|
/*
|
* About Dialog
|
*/
|
.claro .aboutDialog {
|
overflow: visible;
|
width:60%;
|
border-radius: 8px;
|
border:none;
|
background:#fff;
|
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.70);
|
padding:2em;
|
|
// dijit/Dialog's sizing logic does not expect border-box, so reset it
|
* {
|
box-sizing: content-box;
|
|
}
|
|
.dijitDialogCloseIcon {
|
background-image: url("img/lab.png");
|
background-position: 0 0;
|
width:286px;
|
height: 241px;
|
top:-130px;
|
right:-60px;
|
z-index: 951;
|
position: absolute;
|
}
|
|
.dijitDialogTitleBar,
|
.dijitDialogPaneContent {
|
background: none;
|
border:none;
|
}
|
|
.dijitDialogTitleBar {
|
text-align:center;
|
font-size:42px;
|
}
|
}
|
