test-scribe
Version:
Your sidekick for analog machine development. Run machines interactively and generate automated test scripts based on the outcome.
349 lines (335 loc) • 7.12 kB
text/less
.modal-overlay {
width: 100%;
height: 100%;
position: fixed;
z-index: @zeModal;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.7);
opacity: 0;
overflow-y: auto;
.transition(opacity 500ms);
&.active {
opacity: 1;
.transition(opacity 250ms);
}
}
.modal-window {
position: relative;
z-index: 99;
.modal-content {
.borderBox();
.borderRadius(7px);
position: relative;
border: 1px solid #cccccc;
background-color: #fafafa;
width: 400px;
margin: 75px auto;
button.close {
position: absolute;
right: 20px;
top: 10px;
font-size: 28px;
color: @black;
cursor: pointer;
background: transparent;
border: none;
.transition(all 250ms);
&:hover {
color: @dashboardMedGreen;
}
}
.settings-button {
.borderBox();
position: absolute;
right: 50px;
top: 24px;
width: 30px;
height: 26px;
text-align: center;
>span {
font-size: 24px;
color: @medGray;
}
.popover {
@popoverWidth: 225px;
.borderBox();
.borderRadius(5px);
.transition(height 150ms);
color: @darkGray;
height: 0px;
overflow: hidden;
z-index: 0;
text-align: left;
position: absolute;
width: @popoverWidth;
left: 0px;
top: 100%;
background-color: @white;
padding: 0px 10px;
border: 1px solid transparent;
>div {
opacity: 0;
.transition(opacity 100ms);
}
div.checkbox-section {
.label {
font-size: 12px;
.cacheing-toggle {
margin-right: 5px;
color: @medBlue;
cursor: pointer;
font-size: 14px;
&.fa-square {
opacity: 0.6;
}
}
}
}
div.form-field-section {
padding-top: 15px;
border-top: 1px solid lighten(@medGray, 25%);
margin-top: 15px;
margin-bottom: 5px;
input {
width: @popoverWidth - 50;
}
label {
display: block;
margin-bottom: 10px;
font-size: 14px;
padding-left: 1px;
}
span.unit {
display: inline-block;
margin-left: 3px;
color: @medGray;
}
}
&.open {
height: 42px;
padding: 10px;
z-index: 100;
border: 1px solid lighten(@medGray, 10%);
>div {
opacity: 1;
}
&.form-visible {
height: 133px;
}
}
}
}
&#edit-profile {
width: 550px;
.modal-inner {
.clearfix();
.column {
.borderBox();
float: left;
&.left-column {
width: 30%;
padding-right: 15px;
.avatar {
.borderBox();
.borderRadius(5px);
width: 100%;
margin-bottom: 10px;
}
p {
text-align: center;
color: @medGray;
font-size: 12px;
>i {
margin-right: 3px;
color: lighten(@medGray, 10%);
}
a {
.transition(all 250ms);
color: @dashboardMedGreen;
text-decoration: underline;
&:hover {
color: darken(@dashboardMedGreen, 10%);
}
}
}
}
&.right-column {
width: 70%;
padding-left: 15px;
}
}
}
}
}
&.big-modal {
width: 800px;
.placed-machine-detail li [r-editor] {
width: 610px;
margin-left: 25px;
}
}
}
.modal-content {
// padding: 25px 50px;
h2 {
.borderBox();
.detailedBorderRadius(7px, 7px, 0px, 0px);
padding: 25px 50px;
background-color: @white;
font-size: 16px;
border-bottom: 1px solid #cccccc;
font-weight: 700;
.machine-icon {
.borderRadius(3px);
height: 34px;
display: inline-block;
position: relative;
top: 8px;
margin-right: 5px;
}
}
.modal-inner {
padding: 25px 50px;
font-size: 13px;
}
.form-section {
margin-bottom: 20px;
label {
.label();
margin-bottom: 5px;
}
input, >textarea {
.input();
display: block;
width: 100%;
}
>textarea {
height: 100px;
}
}
.pro-tip {
.borderRadius(5px);
padding: 15px;
background-color: #f1f1f1;
border: 1px solid #cccccc;
>span {
color: @dashboardMedGreen;
}
}
.machine-info {
.borderRadius(5px);
padding: 15px;
background-color: #f1f1f1;
border: 1px solid #cccccc;
font-size: 15px;
line-height: 18px;
.machine-name {
color: @dashboardMedGreen;
font-size: 16px;
margin-bottom: 5px;
position: relative;
top: -3px;
.machine-icon {
.borderBox();
width: 18px;
height: 18px;
display: inline-block;
position: relative;
top: 3px;
margin-right: 6px;
img {
width: 100%;
}
}
}
p {
font-size: 14px;
}
}
.delete-header {
text-align: center;
font-size: 24px;
color: @dashboardMedRed;
}
.error-message {
margin-top: 20px;
color: @dashboardMedRed;
margin-bottom: 25px;
text-align: center;
.icon {
margin-right: 5px;
}
}
.buttons {
.clearfix();
.detailedBorderRadius(0px, 0px, 7px, 7px);
padding: 25px 50px;
background: @white;
border-top: 1px solid #cccccc;
button {
.borderBox();
.transition(all 250ms);
cursor: pointer;
&.cancel {
.textButton();
float: right;
&.disabled {
opacity: 0.5;
}
}
}
.save >button, button.save{
.smRectangularButton();
width: 135px;
display: block;
float: right;
.loader {
margin-top: 3px;
}
}
}
&.delete-modal {
h2 {
color: @dashboardMedRed;
}
.modal-inner {
text-align: center;
.warning-icon {
width: 40px;
margin: 0 auto 20px;
}
h3 {
font-weight: 700;
margin-bottom: 10px;
span {
text-transform: uppercase;
}
}
label {
display: block;
font-size: 16px;
margin-bottom: 20px;
color: @medGray;
>i {
font-size: 20px;
margin-right: 5px;
position: relative;
top: 2px;
}
&.error {
color: @dashboardMedRed;
}
}
}
.delete >button, button.delete {
.smRectangularButton(@dashboardMedRed);
width: 135px;
display: block;
float: right;
.loader {
margin-top: 3px;
}
}
}
}