frontend/css/sequences.scss
.sequence-page {
max-width: unset;
padding: 8.6rem 0rem 0;
background: $dark_gray;
}
.sequence-editor-panel {
margin-left: -3.5rem;
margin-top: 0.4rem;
height: calc(100vh - 8.95rem);
background: $light_gray;
@media screen and (max-width: 767px) {
display: none;
&.open {
display: block;
&.inserting-item,
&.inserting-step {
display: none;
}
}
}
padding: 0 2rem;
h3 {
margin-top: 1rem;
}
.sequence-editor-tools {
.row {
flex: 1;
}
.button-group {
width: unset;
}
}
overflow: hidden;
.bp5-popover-target .saucer {
float: left;
}
@media screen and (max-width: 767px) {
h3,
p {
margin-left: 15px;
margin-right: 15px;
}
h3 {
max-width: 60%;
margin-left: 0;
margin-right: 0;
margin-bottom: 2.5rem;
padding-left: 0 !important;
}
.button-group {
margin-right: 15px;
margin-top: -1rem;
}
.title-help-text {
padding-left: 15px;
padding-right: 15px;
}
}
.sequence-editor-content {
margin-right: -15px;
.sequence-description {
.description-input {
padding-right: 1rem;
}
a {
text-decoration: underline !important;
}
}
}
.copy-item {
&:hover {
background: $lighter_gray !important;
}
}
}
.farm-event-form-content,
.designer-regimen-editor-panel,
.sequence-editor-panel {
.sequence-section-header {
&:hover {
background: $lighter_gray !important;
}
}
}
.designer-sequence-editor-panel,
.sequence-editor-panel {
.assertion-step {
.locals-list {
margin: 1rem;
}
}
}
.farm-event-form-content {
.sequence-section-header {
margin-left: -1rem;
margin-right: -1rem;
margin-top: 1rem;
height: 4rem;
.fa-caret-up,
.fa-caret-down,
label {
margin-top: 0;
line-height: 4rem;
}
&:hover {
background: darken($panel_light_yellow, 10%) !important;
}
}
}
.sequence-editor-content,
.regimen-editor-content {
margin-right: -10px;
margin-left: -10px;
.regimen {
padding-left: 1rem;
}
.sequence {
margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
margin-left: 5px;
margin-right: 0;
padding-right: 2rem;
.regimen {
padding-left: 0;
}
}
}
.regimen-editor-content {
@media screen and (max-width: 767px) {
padding-right: 0;
}
}
.sequence-editor-content {
hr {
margin-right: 15px;
margin-bottom: 0;
margin-top: 0.5rem;
margin-left: 15px;
}
.import-banners {
margin-bottom: 1rem;
}
.public-copy-toolbar {
margin: 1rem;
text-align: right;
p {
float: left;
max-width: 50%;
line-height: 2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a {
vertical-align: middle;
margin-left: 1rem;
}
button {
float: none;
vertical-align: top;
}
.fa-code {
float: none;
margin-right: 1rem;
}
}
.upgrade-compare-banner {
display: flex;
margin-left: -15px;
box-shadow: 0 5px 10px -5px $translucent;
.copy-item {
width: 100%;
height: 3.5rem;
padding: 0.75rem;
text-align: center;
cursor: pointer;
&:hover {
background: $light_gray;
}
label {
cursor: pointer;
}
.bp5-popover-wrapper {
display: inline;
}
.bp5-button-text,
p {
display: inline-block;
width: max-content;
height: 2rem;
margin-left: 0.5rem;
padding: 5px;
padding-top: 3px;
border-radius: 3px;
color: $white;
background: $panel_blue;
font-weight: bold;
font-size: 1rem;
i {
margin-left: 0.5rem;
}
}
.filter-search {
display: inline-block;
button {
min-height: 0;
height: 2rem !important;
margin-left: 0.5rem;
background: $panel_blue !important;
border-radius: 3px;
color: $white !important;
font-weight: bold;
font-size: 1rem !important;
}
.fa-caret-down {
right: 0;
line-height: 2.25rem;
color: $white;
}
.bp5-button {
padding-left: 0.5rem;
}
.bp5-button-text {
margin-left: 0;
padding-left: 0;
line-height: 1.5rem;
}
}
&.selected {
border-bottom: 3px solid $dark_gray;
}
}
}
.padding {
height: 12rem;
}
}
.sequence-editor-sections {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 17.5rem);
pre {
margin-top: 2rem;
}
.sequence {
pre {
margin-top: 0;
}
}
.sequence-description {
position: relative;
width: 100%;
padding-right: 3rem;
textarea {
margin-left: 2rem;
height: 100%;
box-shadow: 0px 0px 10px $gray;
padding-bottom: 2rem;
}
.description-editor-tools {
position: absolute;
bottom: 0;
right: 3.5rem;
.fa-pencil {
margin-bottom: 1rem;
}
.char-limit {
font-size: 1rem;
line-height: 1.75rem;
margin-left: 1rem;
color: $medium_gray;
&.over {
color: $darkest_red;
}
}
}
}
}
.sequence-description-wrapper {
position: relative;
.fa-magic,
.fa-spinner {
position: absolute;
top: 1rem;
right: 6.5rem;
}
.fa-pencil,
.fa-eye {
position: absolute;
top: 1rem;
right: 4rem;
}
}
.sequence-description {
.markdown {
display: block;
min-height: 10rem;
max-height: 20rem;
overflow-y: auto;
border: 2px solid $gray;
padding: 0.5rem;
margin-left: 1.5rem;
margin-right: -1.5rem;
p {
display: revert;
margin: revert;
width: 100%;
color: $dark_gray;
overflow: revert;
white-space: revert;
text-transform: revert;
font-size: 16px;
line-height: 140%;
margin: 1rem 0;
margin-bottom: 0.5rem !important;
}
img {
max-width: 100%;
border-radius: 5px;
border: 3px solid $lighter_gray;
}
ul {
list-style-type: revert !important;
padding: revert;
font-size: 1.1rem;
}
li {
font-size: 1.6rem;
}
:first-child {
margin-top: 0;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
h1, h2, h3 {
display: block;
margin-top: 2rem;
}
}
}
.sequence-item-help {
li {
font-size: 1rem;
}
}
.sequence-item-help,
.sequence-description {
.markdown {
p {
margin-bottom: 0.5rem !important;
}
ul {
list-style-type: revert !important;
padding: revert;
font-size: 1.1rem;
}
}
h1 {
font-size: 2.2rem;
}
h2,
h3,
h4,
h5,
h6 {
font-size: 1.8rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
display: block;
font-weight: bold;
line-height: 1;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
}
.sequence-description {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $black;
}
}
.sequence-item-help {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white;
}
}
.designer-sequence-list-panel-content {
.panel-top {
display: none;
}
.sequence-section-header {
margin-left: -15px;
margin-right: -10px;
padding-right: 0.85rem;
.fa-caret-up,
.fa-caret-down {
margin: 1rem !important;
margin-top: 0.5rem !important;
margin-left: 1rem !important;
margin-right: 1.2rem !important;
}
&.featured-sequence-header {
.fa-caret-up,
.fa-caret-down {
position: absolute;
right: 0.75rem;
}
}
label {
margin: 0;
font-size: 1.3rem;
}
}
.show-on-hover {
display: none !important;
}
@media screen and (max-width: 450px) {
.show-on-hover {
display: flex !important;
}
}
.sequence-list-item {
&:hover {
.show-on-hover {
display: flex !important;
}
}
&.hovered {
.fa-question-circle,
.run-btn,
.fa-ellipsis-v {
display: block;
}
}
}
}
.folder-icon-wrapper {
display: inline;
button {
height: 2rem;
margin-left: 1rem;
margin-top: 0.75rem;
padding: 0 0.75rem;
i {
display: block;
}
}
}
.farm-event-form-content,
.regimen-editor-content,
.designer-sequence-list-panel-content,
.sequence-editor-sections {
.sequence-section-header {
position: relative;
cursor: pointer;
padding-left: 1.5rem;
height: 4rem;
line-height: 3.75rem;
&:hover {
background: $light_gray;
}
label {
cursor: pointer;
margin-top: 0;
}
.fa-caret-up,
.fa-caret-down {
float: right;
line-height: 3rem;
font-size: 2rem;
margin-right: 2rem;
margin-top: 0.5rem;
color: $dark_gray;
}
.add-variable-btn {
position: absolute;
right: 4rem;
width: 2.8rem;
height: 2rem;
line-height: 1rem;
margin-top: 0.75rem;
margin-right: 0.25rem;
padding: 0.25rem;
.fa-plus {
vertical-align: top;
padding-top: 0.1rem;
padding-left: 0.1rem;
font-size: 1.5rem;
}
}
.bp5-popover-wrapper {
position: absolute;
top: 0;
right: 4rem;
.add-variable-btn {
position: relative;
right: unset;
text-align: center;
}
.bp5-popover-content {
background: $off_white;
height: 100%;
align-content: center;
.add-variable-options {
text-align: center;
line-height: 0;
}
.fb-button {
float: none;
height: 2rem;
}
}
}
}
}
.designer-regimen-editor-panel-content {
padding: 0;
}
.regimen-editor-content {
margin-left: -1rem;
.regimen {
margin-left: 2rem;
padding-right: 3rem;
}
.button-group {
padding-right: 1rem;
}
.regimen-editor-tools {
margin-left: 1rem;
margin-right: 1rem;
}
.location-form-content {
.row {
white-space: nowrap;
padding-right: 1rem;
.trash {
display: inline;
float: none;
}
}
}
.sequence-section-header {
&:hover {
background: $light_gray !important;
}
}
}
.preview-description {
.sequence-description {
.markdown {
border: none;
}
}
}
.sequence-editor-tools {
display: flex;
margin-left: -1rem;
margin-right: -1rem !important;
padding-right: 2rem;
.row {
margin-left: 0;
}
.title,
input {
flex: 1;
}
input {
margin: 0.75rem;
margin-left: 2.75rem;
}
.title {
padding: 1.25rem;
font-size: 1.6rem;
font-weight: bold;
margin-left: 1.5rem;
}
&.page {
i {
color: $white;
&.inactive {
color: $gray;
}
}
.publish-button {
span {
margin: 0;
}
}
.color-picker {
span,
i {
margin: 0;
}
}
&.blue,
&.yellow,
&.orange,
&.purple,
&.pink,
&.gray {
i,
.title {
color: $dark_gray;
&.inactive {
color: $placeholder_gray;
}
}
}
&.blue {
background: $blue;
}
&.green {
background: $green;
}
&.yellow {
background: $yellow;
}
&.orange {
background: $orange;
}
&.purple {
background: $purple;
}
&.pink {
background: $pink;
}
&.gray {
background: $gray;
}
&.red {
background: $red;
}
}
}
.sequence-editor-tools,
.regimen-editor-tools {
margin-right: 15px;
@media screen and (max-width: 767px) {
margin-right: 10px;
}
hr {
margin: 0.5rem 0;
}
.sequence-name {
margin-top: 1rem;
}
&.preview {
.filter-search,
.input,
input {
pointer-events: none;
}
}
}
.preview-variables {
.locals-list {
pointer-events: none;
}
}
.regimen-editor-tools {
.button-group {
margin-bottom: 1rem;
.save-btn {
margin-left: 0.5rem;
}
}
}
.locals-list {
margin-left: 1.5rem;
margin-right: 2rem;
.location-form {
label {
margin-top: 0;
}
}
.location-form-content {
.row {
display: flex;
}
.bp5-popover-wrapper {
display: inline-block;
margin-left: 1rem;
}
.variable-icon {
cursor: default !important;
margin-top: 0.5rem;
}
p {
display: inline;
font-size: 1.2rem;
}
.variable-label {
font-weight: bold;
}
.fa-trash {
color: $darkest_red;
margin-top: 0.5rem;
margin-left: -1rem;
}
.numeric-variable-input,
.text-variable-input {
padding-right: 0.5rem;
padding-left: 2.5rem;
}
}
}
.regimen {
width: 100%;
height: calc(100vh - 25rem);
overflow-y: auto;
overflow-x: hidden;
}
.license {
p {
padding-bottom: 1rem;
line-height: 1.5rem;
margin-right: 1rem;
margin-left: 1.5rem;
}
}
.sequence-steps {
margin-right: 30px;
margin-left: 10px;
margin-top: 10px;
.sequence-step {
&.hovered {
box-shadow: 0px 0px 15px #ff7700;
}
&.read-only {
margin-top: 1rem;
margin-bottom: 1rem;
.bp5-control,
.filter-search,
textarea,
.input,
input {
pointer-events: none;
}
}
}
}
.step-button-cluster {
margin-right: -15px;
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 8rem);
.text-input-wrapper {
input {
padding-left: 0.5rem !important;
}
.fa-times {
color: $red !important;
&:hover {
color: $medium_dark_red !important;
}
}
}
.step-button {
label {
cursor: pointer;
}
.step-block-wrapper {
margin-bottom: 1rem;
}
.clustered {
margin: 0.5rem;
float: left;
margin-bottom: 0.25rem;
box-shadow: none;
padding-bottom: 0;
label {
margin-bottom: 3px;
}
&.gray {
background: $light_gray !important;
}
}
&.highlight {
.fb-button {
box-shadow: 0px 0px 3px $light_gray;
}
}
}
&.designer-cluster {
margin: 0;
background: $dark_gray;
margin-bottom: 1rem;
border-radius: 5px;
box-shadow: 0px 0px 10px $gray;
overflow: unset;
padding: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0;
.commands {
height: 10rem;
overflow-y: auto;
overflow-x: hidden;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.text-input-wrapper {
margin: 0;
input {
color: $white;
}
border-bottom-color: $white !important;
&:before,
&:after {
background: $white !important;
}
.fa-times {
color: $red;
}
}
}
}
.step-button-cluster-panel {
@media screen and (max-width: 767px) {
display: none;
&.inserting-step {
display: block;
}
margin-left: 15px;
margin-right: 15px;
}
.row {
margin-left: -2.5rem;
margin-right: 3rem;
}
h3 {
margin-top: 1rem;
margin-left: -1rem;
color: $white;
}
.bp5-popover-wrapper {
display: inline;
margin-left: 1rem;
i {
color: $white;
}
}
.text-input-wrapper {
border-bottom-color: $white !important;
&:before,
&:after {
background: $white !important;
}
input {
color: $white;
}
}
.thin-search-wrapper {
position: sticky;
top: 0;
z-index: 9;
padding: 0.5rem;
background: $dark_gray;
}
}
.step-button-cluster {
@media screen and (max-width: 767px) {
margin-left: 0;
margin-right: 0;
}
}
.farmware-list-items,
.sequence-list-item {
button {
text-align: left;
label {
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 0.5rem;
float: left;
cursor: pointer;
}
}
i {
float: right;
margin-top: 0.75rem;
}
}
.folders-panel {
margin-left: -30px;
margin-right: -20px;
margin-bottom: 4rem;
@media screen and (max-width: 767px) {
margin-left: -15px;
}
.panel-top {
margin-left: 1rem !important;
button {
margin-top: 0.7rem !important;
}
}
.panel-top,
.folder-button-cluster {
i {
font-size: 1.5rem;
}
.fa-stack {
font-size: 1rem;
transform: scale(0.8);
}
.fa-stack-2x {
font-size: 2rem;
}
.fa-stack-1x {
font-size: 1.5rem;
line-height: 1.5rem;
margin-left: 0.75rem;
filter: drop-shadow(0 0 0.2rem $dark_green);
text-align: center;
}
}
.folder-button-cluster {
display: flex;
.cluster-icon {
padding: 0.5rem;
border-radius: 3px;
line-height: 2rem !important;
color: $off_white;
&:hover {
background: $medium_gray;
}
.fa-stack-2x {
width: unset;
line-height: unset;
}
.fa-stack-1x {
width: unset;
}
}
}
ul {
margin-bottom: 0;
}
.folder-drop-area {
height: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2rem;
padding-right: 2rem;
transition: height 0.5s ease-out,
padding-top 0.5s ease-out,
padding-bottom 0.5s ease-out;
transition-delay: 0.4s;
color: $gray;
font-weight: bold;
background: $white;
text-align: center;
cursor: pointer;
&.visible {
transition: height 0.3s ease-in,
padding-top 0.3s ease-in,
padding-bottom 0.3s ease-in;
transition-delay: 0.2s;
height: 3rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
&:hover, &.hovered {
color: $medium_gray;
}
}
.folders {
.folder > div:not(:first-child), ul {
margin-left: 1rem;
}
.folder-list-item {
&.moving {
.drop-visual {
position: absolute;
width: 75%;
height: 75%;
margin-top: 0.5rem;
margin-left: 3rem;
border: 2px dashed $gray;
background: $white;
}
}
&.hovered {
.drop-visual {
border-color: $medium_gray !important;
}
}
&.not-dragging {
&:hover {
.drop-visual {
border-color: $medium_gray !important;
}
}
}
}
}
.folder-list-item,
.sequence-list-item {
display: flex;
position: relative;
width: 100%;
height: 3.5rem;
border-bottom: 1px solid $light_gray;
cursor: pointer;
background: $lighter_gray;
border-left: 4px solid transparent;
&.active {
border-left: 4px solid $dark_gray;
p {
font-weight: bold;
}
}
.fa-chevron-down, .fa-chevron-right {
position: absolute;
z-index: 2;
width: 3rem;
font-size: 1.1rem;
}
.folder-settings-icon {
position: absolute;
right: 0;
.bp5-popover-target {
i {
color: $dark_gray;
}
}
}
.fb-button-popover-wrapper {
margin-right: 0.25rem;
button {
margin-top: 0.65rem;
}
}
.fa-question-circle,
.run-btn,
.fa-ellipsis-v {
display: none;
}
.fa-question-circle,
.run-btn,
.fa-ellipsis-v {
&.open {
display: block;
}
}
@media screen and (max-width: 450px) {
.fa-question-circle,
.run-btn,
.fa-ellipsis-v {
display: block;
margin-right: 0.5rem;
}
}
&:hover {
.fa-question-circle,
.run-btn,
.fa-ellipsis-v {
display: block;
}
}
i {
margin: 0;
line-height: 3.5rem;
width: 3rem;
text-align: center;
}
.saucer, .icon-saucer {
position: absolute;
margin: 0.5rem;
width: 1.2rem;
height: 1.2rem;
}
a {
overflow: hidden;
flex-grow: 1;
}
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.4rem;
font-weight: normal;
padding: 0.5rem;
padding-left: 0;
margin-left: 3rem;
line-height: 2.5rem;
}
.folder-name {
position: relative;
width: 100%;
margin-right: 3rem;
margin-left: 6rem;
p {
margin-left: 0;
}
.folder-name-input {
display: flex;
button {
margin-top: 0.75rem;
width: auto;
height: 2rem;
i {
line-height: 0;
width: 1rem;
}
}
.input {
margin: 0.3rem;
width: 90%;
}
}
}
.sequence-list-item-icons {
display: flex;
position: absolute;
right: 0;
}
button {
margin-left: 0.5rem;
}
&.move-source {
box-shadow: 0 0 0 2px $dark_gray inset;
}
&.move-target {
background: $white;
}
}
.folder-list-item,
.sequence-list-item {
.bp5-popover-wrapper.color-picker {
position: absolute;
line-height: 0;
.bp5-popover-target {
width: 2rem;
height: 3.5rem;
}
}
padding-left: 3rem;
.saucer, .icon-saucer {
position: relative;
top: 0.55rem;
margin: auto;
margin-top: 0.6rem;
margin-right: 0;
}
}
.folder-list-item {
padding-left: 0;
.bp5-popover-wrapper.color-picker {
margin-left: 3rem;
}
.color-picker {
.icon-saucer {
top: 0;
margin-top: 0;
margin-left: 0.4rem;
}
}
}
.matched {
background: transparentize($yellow, 0.5);
}
.non-empty-state {
width: 100%;
}
}
.sequence-list-item {
&:hover:active {
cursor: grab;
}
}
.sequence-item-help {
.info-grid-wrapper {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 0.75rem;
align-items: center;
i {
cursor: default !important;
}
p {
line-height: 1.75rem;
color: $off_white;
}
.fa-exclamation-triangle {
color: $orange;
}
}
hr {
border-color: $medium_gray;
margin-left: -1rem;
margin-top: 1rem;
margin-bottom: 1rem;
width: 106.5%;
}
label {
display: block;
color: $off_white;
}
img {
max-width: 100%;
border-radius: 5px;
border: 2px solid $medium_gray;
}
}
.folder-settings-icon,
.sequence-item-action-menu {
.bp5-popover-content {
padding: 0.5rem;
}
}
.folder-settings-icon,
.sequence-item-description,
.sequence-item-action-menu {
.bp5-popover-arrow-fill {
fill: $dark_gray;
}
.bp5-popover-content {
background: $dark_gray;
}
}
.sequence-item-description {
.bp5-popover-content {
max-height: 20rem;
overflow-y: auto;
width: 32rem;
color: $white;
background: $dark_gray;
}
}
.featured-sequence-list {
.saucer {
margin-left: 0.4rem !important;
}
p {
margin-left: 1.5rem !important;
}
}
.sequence-list-panel {
padding-top: 0.4rem;
margin-right: 5px;
@media screen and (max-width: 1075px) {
margin-left: 15px;
}
.empty-state {
display: none;
.empty-state-graphic {
margin-top: 25%;
}
}
@media screen and (max-width: 767px) {
&.open {
display: none;
}
margin-left: 15px;
margin-right: 15px;
.empty-state {
display: block;
}
}
.panel-top {
margin: 0;
}
}
.designer-regimen-list-panel {
label {
margin-top: 0 !important;
}
.add-regimen {
height: 2rem;
}
.panel-content {
overflow-y: auto;
overflow-x: hidden;
margin-left: -15px;
padding: 0;
}
}
.farmware-list-items {
margin-left: -15px;
}
.back-to-sequences {
display: none;
&.open {
@media screen and (max-width: 767px) {
display: block;
margin-top: -2rem;
float: left !important;
height: 6rem;
width: 4rem;
font-size: 2rem;
text-align: center;
line-height: 6rem;
margin-left: 15px;
&.inserting-step,
&.inserting-item {
margin-left: 0;
}
}
}
}
.drag-drop-area {
@media screen and (max-width: 767px) {
display: none;
}
}
.add-command-button-container {
display: none;
position: absolute;
z-index: 9;
width: 100%;
height: 0;
&.first,
&.middle,
&.last {
.add-command {
width: 20px;
height: 20px;
padding: 0.25rem;
border-radius: 2rem;
box-shadow: none !important;
background: $dark_gray !important;
i {
font-size: 1.2rem;
padding-top: 1px;
}
}
}
&.middle {
.add-command {
transform: rotate(-45deg);
margin-top: -1.5rem;
margin-right: 1.5rem;
border-top-left-radius: 0;
i {
transform: rotate(45deg);
}
}
}
&.first {
.add-command {
margin-top: -0.25rem;
margin-right: 1.5rem;
border-top-left-radius: 0;
}
}
&.last {
.bp5-collapse {
margin-left: 1rem;
margin-right: 3rem;
}
.add-command {
margin-top: -1.75rem;
margin-right: 0.5rem;
border-bottom-left-radius: 0;
}
}
&.only {
position: relative;
margin: auto;
text-align: center;
height: 3rem;
&.open {
margin-left: 1rem;
padding-right: 3rem;
}
.add-command {
float: none;
}
}
@media screen and (max-width: 767px) {
display: block;
.add-command {
display: block;
}
}
&.open {
position: relative;
height: 100%;
.add-command {
position: absolute;
top: 50%;
right: -4rem;
transform: rotate(-45deg);
i {
transform: rotate(0);
}
}
&.last {
.add-command {
right: 0;
transform: rotate(45deg);
}
}
}
}
.imported-banner,
.import-banner {
margin: 0 -15px 0 -15px;
padding: 1rem 1.5rem 1rem 2rem;
background: transparentize($orange, 0.4);
button {
margin-right: 1rem;
}
label {
display: inline-block;
padding-left: 1rem;
}
.bp5-popover-wrapper {
display: inline-block;
margin-left: 1rem;
}
p {
margin-left: 1rem;
}
}
.import-banner {
margin-bottom: 1rem;
}
.imported-banner {
background: transparentize($blue, 0.4);
}
$border_width: 1.4px;
.transparent-button {
text-transform: uppercase;
font-size: 1.1rem;
border: none;
padding: 0.4rem 0.8rem;
font-weight: bold;
letter-spacing: 1px;
border-radius: 5px;
color: $dark_gray;
background: none;
box-shadow: inset 0 0 0 $border_width $dark_gray;
float: right;
&:hover {
background: $translucent1_white;
box-shadow: inset 0 0 0 $border_width $dark_gray, 0 0 5px $translucent15, inset 0 0 5px $translucent3_white;
}
&:active {
background: $translucent1;
box-shadow: inset 0 0 0 $border_width $dark_gray;
}
&.light {
box-shadow: inset 0 0 0 $border_width $off_white;
&:hover {
box-shadow: inset 0 0 0 $border_width $off_white, 0 0 5px $translucent15, inset 0 0 5px $translucent3_white;
}
&:active {
box-shadow: inset 0 0 0 $border_width $off_white;
}
}
}