test-scribe
Version:
Your sidekick for analog machine development. Run machines interactively and generate automated test scripts based on the outcome.
477 lines (453 loc) • 10.7 kB
text/less
// General styleguide
////////////////////////////////////////////////////////////////////////////
@nav-sidebar-width: 220px;
.scribe {
.borderBox();
background-color: darken(#585858, 5%);
height: 100%;
width: 100%;
font-family: @mainFont;
position: relative;
padding-left: @nav-sidebar-width;
padding-top: @header-upper-height + @circuit-header-lower-height;
color: @white;
.main-container {
.borderBox();
background-color: darken(#585858, 5%);
position: fixed;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
padding-top: @header-upper-height + @circuit-header-lower-height + 20;
padding-right: 15px;
padding-bottom: 55px;
padding-left: @nav-sidebar-width + 20;
&.sidebar-hidden {
padding-left: 20px;
.nav-sidebar {
left: -@nav-sidebar-width;
}
}
h1 {
position: absolute;
left: @nav-sidebar-width + 20;
top: @header-upper-height + @circuit-header-lower-height + 5;
color: @white;
font-size: 22px;
height: 40px;
line-height: 42px;
vertical-align: middle;
color: @white;
padding-right: 300px;
}
.scribe-content {
.borderBox();
.borderRadius(5px);
position: relative;
height: 100%;
width: 100%;
color: darken(@white, 15%);
.scribe-header {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid @trueBlack;
h2 {
text-align: center;
margin-bottom: 0px;
padding-top: 0px;
}
p {
margin-bottom: 0px;
}
}
.scribe-inner {
position: relative;
padding-top: 20px;
padding-bottom: 20px;
}
.type-icon {
.typeIconWithText(lighten(@dashboardMedGreen, 5%));
}
//The 'results' popup
.scribe-header.preview-results-header {
background-color: @black;
padding-left: 10px;
padding-right: 10px;
}
.preview-results {
.borderBox();
.borderRadius(5px);
background-color: lighten(@black, 3%);
border: 1px solid @trueBlack;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
.borderBox();
position: absolute;
width: 100%;
height: 100%;
background-color: lighten(@black, 3%);
top: 0px;
left: 0px;
z-index: 100;
.dismiss-results {
.transition(all 250ms);
font-size: 15px;
cursor: pointer;
position: absolute;
left: 20px;
top: 14px;
height: 20px;
// width: 35px;
line-height: 20px;
text-align: center;
vertical-align: middle;
color: @dashboardMedGreen;
>i {
margin-right: 3px;
}
&:hover {
color: darken(@dashboardMedGreen, 5%);
}
}
.scribe-inner {
padding-left: 20px;
padding-right: 20px;
}
.result-content {
.outcome {
margin-bottom: 0px;
strong {
color: @dashboardMedGreen;
}
}
.duration {
color: @medGray;
margin-bottom: 10px;
}
.type-icon {
margin-top: 5px;
margin-bottom: 10px;
}
.returns {
position: relative;
pre {
margin-bottom: 35px;
}
}
.test-label {
.borderBox();
padding-top: 35px;
border-top: 3px solid rgba(255,255,255,0.1);
margin-bottom: 5px;
padding-right: 125px;
}
p {
margin-bottom: 5px;
color: @medGray;
}
}
}
.intro, .empty-message {
.borderRadius(7px);
padding: 25px;
background-color: @black;
border: 1px solid @trueBlack;
margin-bottom: 25px;
span {
color: @brightTurquoise;
}
}
.empty-message {
text-align: center;
}
.help-text {
.borderBox();
.borderRadius(5px);
background-color: rgba(255,255,255,0.2);
padding: 10px;
margin: 10px 0;
}
h2 {
font-size: 22px;
// color: @brightTurquoise;
margin-bottom: 20px;
padding-top: 15px;
}
h3 {
padding-top: 15px;
font-size: 24px;
color: @medGray;
margin-bottom: 15px;
}
h4 {
font-size: 20px;
padding-top: 10px;
margin-bottom: 10px;
}
h5 {
font-size: 18px;
margin-bottom: 10px;
padding-top: 10px;
}
p {
font-size: 15px;
line-height: 22px;
margin-bottom: 22px;
a {
text-decoration: underline;
}
}
a {
.transition(all 250ms);
color: @medGreen;
&:hover {
color: darken(@medGreen, 10%);
}
}
code {
font-size: 13px;
background: @medGray;
}
pre {
background: @trueBlack;
padding: 15px;
.borderRadius(4px);
code {
background: transparent;
}
}
blockquote {
.borderRadius(4px);
background: #e6e6e6;
padding: 14px;
margin: 0px 0px 22px;
p {
color: #222222;
&:last-child {
margin-bottom: 0px;
}
}
}
.dismiss-button {
.medRectangularButton(@medBlue);
}
.reload-button {
position: absolute;
top: 7px;
right: 15px;
background: transparent;
border: none;
font-size: 14px;
line-height: 32px;
vertical-align: middle;
font-family: @mainFont;
color: @medGray;
>i {
margin-left: 5px;
}
// &.success {
// color: @dashboardMedGreen;
// }
&.failed {
color: @medRed;
}
// &.warning {
// color: @medYellow;
// }
}
// Form styles
form {
.clearfix();
}
.form-section {
.borderBox();
padding-top: 25px;
padding-bottom: 25px;
max-width: 800px;
// border-top: 1px solid rgba(0,0,0,0.1);
// width: 50%;
// float: left;
// &:nth-child(odd) {
// padding-right: 15px;
// }
// &:nth-child(even) {
// padding-left: 15px;
// }
// &:first-child, &:nth-child(2) {
// padding-top: 0px;
// border-top: none;
// }
&:first-child {
padding-top: 0px;
border-top: none;
}
// Submit button row
&.submit-section {
.clearfix();
width: 100%;
float: none;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
clear: both;
}
// custom-dropdown, input {
// min-width: 300px;
// width: 50%;
// display: inline-block;
// clear: both;
// }
input {
.inputDk();
width: 100%;
}
textarea {
.inputDk();
height: 100px;
width: 100%;
}
label {
font-size: 15px;
display: block;
margin-bottom: 7px;
color: @white;
.type-icon {
margin-left: 5px;
top: -3px;
}
}
&.optional {
label {
opacity: 0.8;
}
}
}
}
.submit-button {
.medRectangularButton(@dashboardMedGreen);
margin-bottom: 20px;
// float: right;
min-width: 100px;
&.failed {
.medRectangularButton(@medRed);
}
&[data-purpose="saveAsTest"] {
margin-top: 10px;
&.abs-right {
position: absolute;
right: 20px;
bottom: 0px;
}
}
}
.scribe-footer {
.borderBox();
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
padding: 10px 0;
font-size: 12px;
background-color: rgba(0,0,0,0.8);
border-top: 1px solid @trueBlack;
text-align: center;
span {
color: @brightTurquoise;
}
.dismiss-footer-button {
.smRectangularButton(@brightTurquoise);
}
}
.nav-sidebar {
.borderBox();
color: @white;
background-color: lighten(@black, 3%);
border-right: 1px solid @trueBlack;
padding-top: @header-upper-height + @circuit-header-lower-height;
width: @nav-sidebar-width;
min-height: 100%;
position: fixed;
left: 0px;
top: 0px;
overflow-y: auto;
h3 {
.borderBox();
height: 40px;
line-height: 39px;
vertical-align: middle;
border-bottom: 1px solid @trueBlack;
// color: @brightTurquoise;
color: lighten(@dashboardMedGreen, 5%);
font-size: 15px;
padding: 0px 20px;
}
.nav-icon {
.squareIcon(lighten(@dashboardMedGreen, 5%));
position: relative;
top: 5px;
margin-right: 7px;
}
ul.nav {
.borderBox();
padding-left: 10px;
.nav-item {
.borderBox();
// margin-bottom: 15px;
font-size: 13px;
height: 26px;
display: block;
color: @white;
padding-left: 18px;
.text {
.transition(all 250ms);
line-height: 26px;
vertical-align: middle;
}
&:hover {
.text {
color: @dashboardMedGreen;
}
}
&.current {
>a {
color: @dashboardMedGreen;
border-right: 3px solid @dashboardMedGreen;
.nav-icon {
border: 2px solid @dashboardMedGreen;
&.default-icon {
background: url('/images/icon_treeline_green.png') no-repeat 3px center;
background-size: 11px;
}
}
}
}
}
}
}
}
}
em {
font-weight: normal;
}
// Ace editor containers:
.ace-editor-container {
position: relative;
overflow: auto;
height: 250px;
}
.run-btn {
.running {
opacity: 0.5;
}
}
.save-test-btn {
.busy {
opacity: 0.5;
}
}