frontend/css/steps.scss
// Styles for ALL STEPS
.step-wrapper {
box-shadow: 0px 0px 10px $gray;
border-radius: 3px;
.bottom-content {
display: flex;
fieldset {
text-align: right;
}
.channel-options {
flex: 1;
margin-top: 2rem;
}
.channel-fields {
flex: 1;
input,
label {
display: inline-block;
width: auto;
cursor: pointer;
}
input {
margin-left: 1rem;
box-shadow: none;
}
input[type="radio"] {
margin-right: 0.25rem;
margin-bottom: 0.25rem;
margin-top: 0;
vertical-align: middle;
}
form {
padding-top: 0.5rem;
.options {
display: inline;
label {
margin-left: 0.25rem;
}
}
}
}
}
pre {
border: none;
border-radius: 0;
}
}
.step-header {
letter-spacing: .05rem;
padding: .75rem 1rem;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
.step-header-flex {
display: flex;
}
&.sequence-selected.no-inputs {
border-radius: 3px;
}
margin-bottom: -1px;
.step-comment {
display: inline;
width: 100%;
overflow: hidden;
::-webkit-input-placeholder {
color: $dark_gray;
font-weight: bold;
text-transform: uppercase;
}
::-moz-placeholder {
color: $dark_gray;
font-weight: bold;
text-transform: uppercase;
}
:-ms-input-placeholder {
color: $dark_gray;
font-weight: bold;
text-transform: uppercase;
}
}
.input {
width: 100%;
}
.step-label {
height: auto !important;
}
input {
width: 100%;
padding: 0rem;
background-color: transparent;
box-shadow: none;
color: $dark_gray;
font-weight: bold;
text-overflow: ellipsis;
}
p {
font-size: 1rem;
font-style: italic;
}
&.computed-move-step {
background: $blue;
}
&.move-absolute-step {
background: $blue;
}
&.move-relative-step {
background: $green;
}
&.write-pin-step {
background: $orange;
}
&.read-pin-step {
background: $yellow;
}
&.wait-step {
background: $brown;
}
&.send-message-step {
background: $brown;
}
&.find-home-step {
background: $blue;
}
&.if-step {
background: $purple;
}
&.assertion-step {
background: $purple;
}
&.lua-step {
background: $purple;
}
&.execute-step {
background: $gray;
}
&.execute-script-step {
background: $pink;
}
&.take-photo-step {
background: $brown;
}
&.update-resource-step {
background: $brown;
}
&.set-servo-angle-step {
background: $blue;
}
&.toggle-pin-step {
background: $orange;
}
&.set-zero-step {
background: $blue;
}
&.calibrate-step {
background: $blue;
}
&.move-home-step {
background: $blue;
}
&.firmware-action-step {
background: $brown;
}
&.system-action-step {
background: $brown;
}
&.emergency-stop-step {
background: $red;
}
&.reboot-step {
background: $brown;
}
&.shutdown-step {
background: $brown;
}
&.unknown-step {
background: $gray;
}
&.blue {
background: $blue;
}
&.orange {
background: $orange;
}
&.yellow {
background: $yellow;
}
&.red {
background: $red;
}
&.purple {
background: $purple;
}
&.pink {
background: $pink;
}
&.gray {
background: $gray;
}
.help {
float: right;
}
.step-warning {
i {
color: $darkest_red;
font-size: 1.2rem;
}
}
.input {
display: inline-block;
}
.prompt-wrapper {
margin-top: 1rem;
textarea {
font-size: 1rem;
height: 8rem;
}
.generate-code {
display: flex;
height: 3rem;
.feedback {
width: 7rem;
margin-top: 0.75rem;
transition: opacity 2s ease;
i:first-of-type {
margin-right: 0.5rem;
}
}
p {
display: inline-block;
width: 100%;
line-height: 1rem;
color: $medium_gray;
padding: 0.75rem;
}
button {
margin-top: 0.5rem;
}
}
}
}
.step-up-down-arrows {
display: inline-block;
text-align: center;
font-size: 2rem;
i {
margin-right: 0.35rem;
margin-left: 0 !important;
}
.fa-arrow-circle-up {
margin-bottom: 1rem;
}
}
.step-control-icons {
display: flex;
i {
&.fa-code {
font-weight: bold;
}
&.fa-thumb-tack,
&.fa-font,
&.fa-code {
color: $placeholder_gray;
&.enabled {
color: $dark_gray;
}
}
}
}
.step-content {
border-color: $light_gray;
color: $dark_gray;
padding: 1.25rem 1.25rem;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
&.computed-move-step {
background: $light_blue;
}
&.move-absolute-step {
background: $light_blue;
}
&.move-relative-step {
background: $light_green;
}
&.write-pin-step {
background: $light_orange;
}
&.read-pin-step {
background: $light_yellow;
}
&.wait-step {
background: $light_brown;
}
&.send-message-step {
background: $light_brown;
}
&.find-home-step {
background: $light_blue;
}
&.if-step {
background: $light_purple;
input {
height: 3rem;
}
.execute-row {
margin-top: 1rem;
}
.locals-list {
margin-top: 1rem;
margin-left: -1rem;
margin-right: -0.5rem;
}
}
&.assertion-step {
background: $light_purple;
.lua-input {
margin-bottom: 1rem;
}
}
&.lua-step {
padding: 0;
background: $light_purple;
}
&.execute-step {
background: $light_gray;
padding-bottom: 1rem;
.row {
margin: 0;
}
.locals-list {
margin-left: -1rem;
margin-right: 0;
}
.location-form:not(:first-of-type) {
margin-top: 1rem;
}
.location-form {
.row:not(:first-of-type) {
margin-top: 1rem;
}
}
&.pinned-view {
.location-form {
background: none;
margin-top: 0;
max-width: unset;
box-shadow: none;
.location-form-content {
padding: 0;
}
.row {
margin-top: 1rem;
}
label {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.row {
margin-top: 0.5rem;
margin-left: -15px;
margin-right: -15px;
}
}
}
&:empty {
display: none;
}
}
&.execute-script-step {
background: $light_magenta;
padding-bottom: 1rem;
}
&.execute-script-step a {
color: $magenta;
text-decoration: none !important;
}
&.take-photo-step {
background: $light_brown;
}
&.take-photo-step a {
color: $dark_brown;
text-decoration: none !important;
}
&.update-resource-step {
background: $light_brown;
}
&.set-servo-angle-step {
background: $light_blue;
}
&.toggle-pin-step {
background: $light_orange;
}
&.set-zero-step {
background: $light_blue;
}
&.calibrate-step {
background: $light_blue;
}
&.move-home-step {
background: $light_blue;
}
&.firmware-action-step {
background: $light_brown;
}
&.system-action-step {
background: $light_brown;
}
&.emergency-stop-step {
background: $light_red;
}
&.shutdown-step {
background: $light_brown;
}
&.reboot-step {
background: $light_brown;
}
&.unknown-step {
background: $light_gray;
}
&.blue {
background: $light_blue !important;
}
&.green {
background: $light_green !important;
}
&.orange {
background: $light_orange !important;
}
&.yellow {
background: $light_yellow !important;
}
&.red {
background: $light_red !important;
}
&.purple {
background: $light_purple !important;
}
&.pink {
background: $light_pink !important;
}
&.gray {
background: $light_gray !important;
}
input,
select {
width: 100%;
}
.expandable-header {
font-size: 1.6rem;
}
.bp5-collapse {
overflow: hidden;
}
p {
font-size: 1.3rem;
}
}