Farmbot-Web-App/frontend/css/farm_designer/farm_designer_panels.scss

1116 lines
20 KiB
SCSS

.panel-nav,
.farm-designer-panels {
position: fixed;
top: 8.9rem;
width: 30rem;
@media screen and (max-width: 450px) {
width: 100%;
}
}
@keyframes panel-pullout {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
.farm-designer-panels {
bottom: 0;
z-index: 1;
&.panel-closed {
display: none !important;
}
&.short-panel {
height: 24rem;
}
.panel-container {
width: 100%;
height: 100%;
overflow-x: hidden;
font-size: 1.6rem;
padding-bottom: 3rem;
label {
font-size: 1.3rem;
margin-top: 2rem;
}
}
div {
animation: panel-pullout 0s ease;
}
}
.panel-container {
overflow: hidden;
div[class*="search-item"] {
&:hover,
&.hovered {
transition: background 0.2s ease;
}
}
&.green-panel {
background-color: $panel_light_green;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_green, 10%);
}
}
}
&.cyan-panel {
background-color: $light_cyan;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($light_cyan, 10%);
}
}
}
&.brown-panel {
background-color: $panel_light_brown;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_brown, 10%);
}
}
}
&.magenta-panel {
background-color: $light_magenta;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($light_magenta, 10%);
}
}
}
&.light-gray-panel,
&.gray-panel {
background-color: $panel_light_gray;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_gray, 10%);
}
}
}
&.yellow-panel {
background-color: $panel_light_yellow;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_yellow, 10%);
}
}
}
&.blue-panel {
background-color: $panel_light_blue;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_blue, 10%);
}
}
}
&.navy-panel {
background-color: $panel_light_navy;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_navy, 10%);
}
}
}
&.teal-panel {
background-color: $panel_light_teal;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_teal, 10%);
}
}
}
&.red-panel {
background-color: $panel_light_red;
div[class*="search-item"] {
&:hover,
&.hovered {
background: darken($panel_light_red, 10%);
}
}
}
}
.panel-nav,
.panel-header {
color: $light_gray;
&.green-panel {
background-color: $panel_green;
}
&.cyan-panel {
background-color: $cyan;
}
&.brown-panel {
background-color: $panel_brown;
}
&.magenta-panel {
background-color: $magenta;
}
&.gray-panel {
background-color: $panel_gray;
}
&.light-gray-panel{
background-color: $panel_medium_light_gray;
}
&.yellow-panel {
background-color: $panel_yellow;
}
&.blue-panel {
background-color: $panel_blue;
}
&.navy-panel {
background-color: $panel_navy;
}
&.teal-panel {
background-color: $panel_teal;
}
&.red-panel {
background-color: $panel_red;
}
}
.panel-tabs {
display: flex;
img {
filter: brightness(0%) invert(100%);
opacity: 0.8;
}
a {
display: block;
flex: 1;
text-align: center;
text-transform: uppercase;
font-size: 1.4rem;
line-height: 5rem;
height: 5rem;
color: $light_gray;
&.active {
border-bottom: 3px solid $white;
font-weight: bold;
color: $white;
img {
opacity: 1;
}
}
&:hover {
color: $off_white;
text-decoration: none;
font-weight: bold;
}
&:focus {
color: $off_white;
text-decoration: none;
font-weight: bold;
}
}
}
.panel-title {
height: 50px;
.back-arrow {
&.black-text{
color: $medium_gray;
}
float: left;
text-align: center;
font-size: 1.8rem;
width: 50px;
line-height: 50px;
&:hover {
&.black-text{
color: $darker_gray !important;
}
&.white-text{
color: $white;
}
}
}
.title {
float: left;
font-size: 1.8rem;
white-space: nowrap;
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
line-height: 50px;
}
.right-button {
position: absolute;
right: 0;
float: right;
text-transform: uppercase;
font-size: 1rem;
border: 1px solid;
padding: 0.4rem 1.2rem;
font-weight: bold;
letter-spacing: 1px;
border-radius: 4px;
color: $off_white;
margin-top: 1.25rem;
margin-right: 1.5rem;
&:hover {
color: $white;
}
}
button {
margin-left: 4px;
}
}
.white-text{
color: $off_white;
}
.black-text{
color: $black;
}
.point-inventory-panel,
.plant-inventory-panel {
.panel-content {
padding: 0;
max-height: calc(100vh - 19rem);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 5rem;
}
}
.plant-selection-panel {
.panel-action-buttons {
position: absolute;
z-index: 9;
height: 19rem;
width: 100%;
background: $panel_medium_light_gray;
padding: 0.5rem;
button {
margin: 0.5rem;
float: left;
}
label {
min-width: -webkit-fill-available;
margin-bottom: 0px;
margin-left: .5rem;
}
.button-row {
float: left;
width: 100%;
}
.filter-search {
padding-right: 1rem;
}
.plant-status-bulk-update {
display: inline-flex;
width: 100%;
margin-left: 1rem;
.filter-search {
margin-left: 0.5rem;
}
p {
font-size: 1.2rem;
line-height: 4.1rem;
}
}
}
.panel-content {
padding-top: 19rem;
padding-right: 0;
padding-left: 0;
padding-bottom: 5rem;
max-height: calc(100vh - 13rem);
overflow-y: auto;
overflow-x: hidden;
}
}
.weed-info-panel,
.point-info-panel,
.plant-info-panel {
.panel-content {
max-height: calc(100vh - 14rem);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 5rem;
}
}
.point-creation-panel {
.panel-content {
ul {
margin-bottom: 0;
}
margin-top: 1rem;
label {
margin-top: 0;
}
p {
margin-top: 1rem;
}
.fb-button {
&.green {
margin-right: 1.5rem;
}
&.delete {
float: left;
margin-top: 1rem;
}
}
.saucer {
margin: 1rem;
margin-left: 2rem;
}
.delete-row {
margin: 1.5rem;
}
}
}
.weed-info-panel-content,
.point-info-panel-content {
.point-color-input {
div[class*=col-] {
padding-left: 0.5rem;
}
.saucer {
margin-top: 4.5rem;
}
}
.fb-button & .red {
display: block;
margin-top: 3rem;
}
p {
margin-top: 1rem;
}
}
.crop-catalog-panel {
.panel-content {
padding: 1rem 1rem 6rem;
}
}
.panel-top {
&.with-button {
display: flex;
margin-top: 5rem;
.fb-button {
margin: 1rem;
margin-left: 0;
}
a {
margin-top: 0.5rem;
}
i:not(.fa-stack-2x) {
font-size: 1.5rem;
}
}
}
.panel-content {
padding: 0 1rem;
a {
color: $black;
text-decoration: underline !important;
}
}
.edit-farm-event-panel,
.add-farm-event-panel {
input {
background: $white;
}
.save-btn {
margin: 1rem;
}
.location-form {
width: 100% !important;
}
.note {
margin-top: 4rem;
}
.bp3-popover-wrapper {
display: inline;
margin-left: 0.5rem;
}
}
.farm-event-form {
.farm-event-repeat-options {
input[type=checkbox] {
margin-right: 0.5rem;
margin-top: 0;
vertical-align: middle;
}
.farm-event-repeat-form {
.add-event-repeat-frequency {
min-height: 34px;
}
}
}
}
.add-farm-event-panel button.red,
.edit-farm-event-panel button.red {
margin-top: 1rem;
margin-left: 1rem;
margin-right: 0.5rem;
}
.panel-nav {
position: fixed;
z-index: 2;
}
.panel-header {
.panel-header-description,
.crop-info-description {
font-size: 1.2rem;
padding: 0 1.4rem 1rem;
}
.crop-info-description {
max-height: 10rem;
overflow-y: auto;
overflow-x: hidden;
}
}
.crop-info-panel {
.panel-header {
position: inherit;
background-size: 144% !important;
background-repeat: no-repeat !important;
background-position: top center !important;
}
.panel-content {
max-height: calc(100vh - 19rem);
overflow-y: auto;
overflow-x: hidden;
padding: 2rem 1rem 6rem;
padding-bottom: 10rem;
li {
margin-bottom: 1rem;
p {
font-size: 1.25rem;
}
}
}
.edit-on-openfarm {
margin-bottom: 1rem;
}
}
.plants-panel-content {
li {
margin-top: 1rem;
p {
font-size: 1.25rem;
}
}
input {
background: $white;
}
}
.add-plant-panel,
.move-to-panel {
padding-bottom: 0 !important;
}
.add-plant-panel {
.panel-header {
height: 100%;
}
}
.move-to-panel-content {
margin-top: 1rem;
margin-left: 1rem;
margin-right: 1rem;
button {
margin: 1rem;
margin-left: 2rem;
width: 88%;
float: left;
}
input {
min-width: 7rem;
}
}
.tool-slots-panel,
.tools-panel {
.panel-top {
display: flex;
margin-top: 5rem;
}
.tool-slots-panel-content,
.tools-panel-content {
max-height: calc(100vh - 19rem);
overflow-y: auto;
overflow-x: hidden;
.tool-search-item,
.tool-slot-search-item {
margin-left: -15px;
margin-right: -15px;
.filter-search {
.bp3-button {
min-height: 2.5rem;
max-height: 2.5rem;
span {
line-height: 1.5rem;
}
}
i {
line-height: 2rem;
}
}
}
.mounted-tool-header {
display: flex;
margin-top: 1rem;
label {
margin: 0;
}
.help-icon {
margin-left: 1rem;
vertical-align: top;
font-size: 1.4rem;
}
}
.tools-header,
.tool-slots-header {
display: flex;
margin-top: 1rem;
margin-bottom: 1rem;
label {
margin: 0;
line-height: 2.1rem;
}
a {
margin-left: auto;
}
.fa-plus {
font-size: 1.5rem;
}
}
button:not(.bp3-button) {
display: block;
margin-left: auto;
float: none;
margin-top: 1rem;
}
.tool-verification-status {
display: flex;
margin-top: 1rem;
margin-bottom: 2rem;
button {
margin-top: 0;
}
}
}
}
.add-tool-panel-content,
.edit-tool-panel-content {
max-height: calc(100vh - 14rem);
overflow-y: auto;
overflow-x: hidden;
button {
display: block;
margin-left: auto;
float: none;
margin-top: 1rem;
&.red {
float: left;
margin-bottom: 1rem;
}
}
svg {
display: block;
margin: auto;
width: 10rem;
height: 10rem;
margin-top: 2rem;
}
.edit-tool,
.add-new-tool {
margin-bottom: 3rem;
.name-error {
margin-top: 1.2rem;
margin-right: 1rem;
color: $dark_red;
float: right;
}
.save-btn {
float: right;
}
}
.add-stock-tools {
.filter-search {
margin-bottom: 1rem;
button {
margin-top: 0.2rem;
}
}
ul {
font-size: 1.2rem;
padding-left: 1rem;
li {
margin-top: 0.5rem;
line-height: 2rem;
cursor: pointer;
width: 50%;
&:hover {
font-weight: bold;
}
.fb-checkbox {
display: inline;
}
p {
display: inline;
line-height: 2.25rem;
font-size: 1.2rem;
vertical-align: top;
margin-left: 1rem;
}
}
}
button {
margin-bottom: 2rem;
.fa-plus {
margin-right: 0.5rem;
}
}
}
}
.add-tool-slot-panel-content,
.edit-tool-slot-panel-content {
svg {
display: block;
margin: auto;
width: 10rem;
height: 10rem;
margin-top: 2rem;
}
label {
margin-top: 0 !important;
}
.row, fieldset {
margin-top: 2rem;
}
fieldset button {
margin: 0;
}
.direction-icon {
margin-left: 1rem;
}
.help-icon {
color: $dark_gray;
}
.tool-slot-location-input {
.axis-inputs {
padding-left: 0;
}
.use-current-location {
padding: 0;
margin-left: -1rem;
}
button {
margin-top: 0.5rem;
margin-right: 0.5rem;
height: 2.5rem;
.fa {
font-size: 1.5rem;
}
}
}
.gantry-mounted-input {
label {
margin-top: 0;
}
input[type="checkbox"] {
float: left;
margin-right: 1rem;
}
}
}
.settings-panel-content {
max-height: calc(100vh - 15rem);
overflow-y: auto;
overflow-x: hidden;
margin-top: 5rem;
padding-bottom: 5rem;
button {
margin-top: 1.75rem;
}
p {
padding: 0.5rem;
margin-left: 1rem;
margin-right: 1rem;
}
.map-size-inputs {
.row {
margin-bottom: 1rem;
}
label {
margin-top: 0.5rem;
}
}
.designer-setting {
&.disabled {
input {
background: $gray;
}
}
}
}
.saved-garden-panel-content {
padding: 0;
.row {
margin: 0;
margin-top: 1rem;
margin-left: 1rem;
margin-right: 1rem;
}
hr {
width: 100%;
padding-top: 1rem;
}
button {
margin-left: 0.5rem;
&.wide {
margin: 1rem;
margin-left: 2rem;
width: 88%;
float: left;
}
}
input {
min-width: 7rem;
}
}
.weed-item-icon,
.group-item-icon {
display: inline-block;
position: relative;
.weed-icon {
position: absolute;
top: 13%;
left: 12%;
width: 70%;
height: 70%;
}
}
.weeds-inventory-panel,
.zones-inventory-panel,
.groups-panel {
.panel-content {
max-height: calc(100vh - 19rem);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 5rem;
}
}
.group-detail-panel {
.panel-content {
max-height: calc(100vh - 14rem);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 5rem;
.group-member-display {
i[class*=fa-caret-] {
float: right;
font-size: 2rem;
margin-top: 1.5rem;
}
.groups-list-wrapper {
padding: 0.5em 0em;
}
}
.group-member-display,
.group-sort-section {
.bp3-popover-wrapper {
display: inline;
margin-left: 1rem;
}
}
.group-delete-btn {
float: left;
margin-top: 1em;
}
.group-criteria {
margin-top: 1rem;
.criteria-heading {
margin-top: 0;
}
.fb-button {
margin-top: 0.5rem;
}
.point-type-checkboxes {
.point-type-section {
.fb-checkbox {
display: inline;
margin-right: 1rem;
vertical-align: top;
}
p {
display: inline;
text-transform: uppercase;
}
.point-type-checkbox {
position: relative;
height: 2rem;
margin-top: 0.75rem;
cursor: pointer;
.fb-checkbox {
display: inline-block;
height: 2rem;
}
i[class*=fa-caret-] {
position: absolute;
right: -0.5rem;
width: 3rem;
font-size: 2rem;
padding-left: 1rem;
}
}
.plant-criteria-options,
.point-criteria-options,
.tool-criteria-options {
margin-left: 3rem;
p {
&.category {
display: block;
padding-top: 1rem;
padding-bottom: 1rem;
text-transform: none;
font-size: 1.2rem;
font-weight: bold;
}
}
hr {
margin: 0.5rem;
}
.lt-gt-criteria {
margin-bottom: 1rem;
.row {
margin-left: 0 !important;
}
}
}
}
}
.criteria-radio-presets {
input[type="radio"] {
width: auto;
margin-right: 1rem;
}
p {
display: inline;
text-transform: uppercase;
}
}
.criteria-string,
.criteria-pointer-type,
.criteria-plant-status,
.criteria-slug {
margin-top: 1rem;
}
.day-criteria {
p {
display: inline;
vertical-align: bottom;
}
input {
line-height: 1.75rem;
}
}
.string-eq-criteria {
margin-top: 1rem;
.row {
margin-top: 1rem;
}
code {
display: inline-block;
margin-top: 2rem;
font-size: 1.2rem;
font-weight: bold;
color: $black;
background: none;
}
}
.number-eq-criteria,
.number-gt-lt-criteria {
margin-top: 1rem;
.row {
margin-top: 1rem;
}
p {
text-align: center;
line-height: 2.75rem;
font-size: 1.2rem;
}
}
.fb-toggle-button {
width: 85px;
margin-top: 0;
&.red {
background: $dark_gray !important;
}
}
.clear-criteria {
margin-top: 2rem;
}
.basic,
.advanced {
margin-left: 1rem;
.day-criteria {
.row {
margin-left: 0;
}
div[class*=col-] {
padding: 0;
padding-right: 0.75rem;
}
}
}
.advanced {
.row {
margin-left: 0;
}
div[class*=col-] {
padding: 0;
}
.col-xs-9 {
margin-right: 0.5rem;
}
.col-xs-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
margin-top: 0.4rem;
text-align: center;
}
}
}
.criteria-point-count-breakdown {
margin-bottom: 1rem;
.manual-group-member-count,
.criteria-group-member-count {
margin-left: 2rem;
div {
display: inline;
padding: 0.25rem;
font-size: 1.2rem;
border: 1px solid $panel_light_blue;
}
p {
display: inline;
margin-left: 1rem;
}
}
.criteria-group-member-count {
div {
border: 1px solid gray;
border-radius: 5px;
}
}
}
}
}
.lt-gt-criteria,
.location-criteria {
display: inline-block;
.row {
margin-left: 0;
div[class*=col-] {
padding: 0;
text-align: center;
}
margin-top: 1rem;
p {
display: block !important;
text-transform: uppercase;
font-size: 1.1rem;
margin-top: 0.75rem;
}
label {
margin-top: 0.5rem;
}
}
.edit-in-map {
float: right;
button {
margin: 1rem !important;
width: 5rem !important;
}
label {
margin-top: 1.1rem !important;
}
}
}
.weeds-inventory-panel,
.zones-inventory-panel,
.groups-panel {
.panel-content {
padding: 0;
}
}
.saved-garden-edit-panel-content {
button {
margin-left: 0.5rem;
margin-top: 1rem;
}
p {
font-size: 1.2rem;
text-align: center;
padding: 3rem;
}
.row {
margin: 0;
}
}
.preview-button,
.cancel-button,
.save-button {
text-transform: uppercase;
font-size: 1rem;
border: 1px solid;
padding: 0.4rem 1.2rem;
font-weight: bold;
letter-spacing: 1px;
border-radius: 4px;
color: $off_white;
margin-top: 1.25rem;
margin-right: 1.5rem;
&:hover { color: $white; }
}
.desktop-hide {
display: none !important;
@media screen and (max-width: 1075px) {
display: block !important;
}
}