.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: 16rem; width: 100%; background: $panel_medium_light_gray; padding: 0.5rem; &.status { height: 20rem; } &.more { height: 23rem; } &.more.status { height: 26rem; } button { margin: 0.5rem; float: left; } label { min-width: -webkit-fill-available; margin-bottom: 0px; margin-left: .5rem; margin-top: 0; } .button-row { float: left; width: 100%; margin-bottom: 1rem; } .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; } } .more { float: right; cursor: pointer; margin-right: 1rem; line-height: 2.5rem; p { display: inline; font-size: 1.4rem; margin-right: 1rem; } } } .panel-content { padding-top: 16rem; padding-right: 0; padding-left: 0; padding-bottom: 5rem; max-height: calc(100vh - 13rem); overflow-y: auto; overflow-x: hidden; &.status { padding-top: 20rem; } &.more { padding-top: 23rem; } &.more.status { padding-top: 26rem; } } } .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; } } .point-color-input { div[class*=col-] { padding-left: 0.5rem; } .saucer { margin-top: 2.75rem; } } .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; } font-size: 1.4rem; p { margin-top: 1rem; margin-bottom: 0.5rem !important; font-size: 1.2rem; } .weed-removal-method-section { .weed-removal-method { display: flex; input { margin: 0; width: 10%; box-shadow: none; } label { margin: 0; margin-top: auto; font-size: 1.25rem; font-weight: normal; } } } } .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; margin-bottom: 0.5rem !important; } } 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; } } } .no-pad { padding: 0; } .settings-panel-content { padding: 0; margin-top: 6rem; padding-bottom: 5rem; .section { margin-bottom: 2rem; } .bulk-expand-controls { margin-left: 1rem; } .row:first-child { margin-right: 0; margin-top: 1rem; } .row:nth-child(2) { padding-left: 1.5rem; padding-right: 3rem; } .label-headings { margin-right: 2rem; label { line-height: 1rem; } } .release-notes-wrapper { float: right !important; } .network-not-found-timer { margin-top: 1rem; } .pin-guard-input-row { .row { margin-left: -15px; margin-right: -15px; padding-left: 0; padding-right: 1rem; margin-bottom: 1rem; } } .pin-bindings { margin-right: 1rem; .row { padding-left: 0; padding-right: 0; margin-left: 1rem; margin-right: 0; margin-top: 1rem; } div[class*=col-] { padding: 0; padding-right: 1rem; } .bindings-list { margin-left: -5px; .binding-action { font-weight: bold; font-size: 1.2rem; } } .pin-binding-input-rows { margin-right: 1rem; margin-left: -15px; label { margin-left: 1rem !important; } .green { float: left; margin-left: 1rem; } .row:last-child { margin-top: 0; } } .stock-pin-bindings-button { display: inline; button { margin: 0; margin-top: 0.5rem; } } } .fb-button { margin-top: 0.5rem; } label { margin: 0 !important; line-height: 3rem; } .bp3-popover-wrapper { display: inline; float: none; } .map-size-inputs { .row { margin-bottom: 1rem; } label { margin-top: 0.5rem; } } .help-icon { margin-left: 1rem; } .all-settings-content { max-height: calc(100vh - 22rem); overflow-y: auto; overflow-x: hidden; margin-top: 1rem; padding-left: 1rem; .expandable-header { margin-top: 1.5rem; margin-bottom: 0; } .section { margin-bottom: 0; } } .designer-settings { max-height: calc(100vh - 14rem); overflow-y: auto; overflow-x: hidden; margin-right: -10px; padding-right: 1rem; padding-left: 1rem; } .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; .clear-day-criteria, .clear-point-ids, .clear-criteria { margin-top: 0.2rem; } .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; } .alpha-icon { display: inline; float: none !important; margin-left: 1rem; color: $orange; font-size: 1.4rem; } p { &.category { display: block; padding-top: 1rem; padding-bottom: 1rem; text-transform: none; font-size: 1.2rem; font-weight: bold; } } .bp3-popover-wrapper { float: right; } .fb-button { margin-top: 0.5rem; } .point-type-section, .criteria-checkbox-list-item { .fb-checkbox { display: inline; margin-right: 1rem; vertical-align: top; } p { display: inline; text-transform: uppercase; } input[type="text"] { width: 50%; height: 2rem; } } .point-type-checkboxes { .point-type-section { .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, .weed-criteria-options, .point-criteria-options, .tool-criteria-options { 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 { .criteria-checkbox-list-item { margin-bottom: 1rem; p { vertical-align: middle; } } .days-old-text { display: inline; vertical-align: bottom; } input { line-height: 1.75rem; } } .number-eq-criteria, .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; } } .basic, .advanced { margin-left: 1rem; .filter-search { height: 3rem; margin-bottom: 1rem; } .day-criteria { .row { margin-left: 0; } div[class*=col-] { padding: 0; padding-right: 0.75rem; } } } .advanced { .bp3-popover-wrapper { display: inline; float: none; margin-left: 1rem; font-size: 1.4rem; } .filter-search { .bp3-popover-wrapper { margin-left: 0; } } .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; } } } } } .group-member-count-breakdown { margin-bottom: 1rem; .manual-group-member-count, .criteria-group-member-count { div { display: inline; padding: 0.25rem; font-size: 1.2rem; } p { display: inline; margin-left: 0.5rem; } } } .criteria-options-menu { label { margin-right: 1rem; } } .lt-gt-criteria, .location-criteria { display: inline-block; .row { margin-left: 0; margin-right: -2.5rem; 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; } } button { margin-top: 2rem !important; } .edit-in-map { float: right; button { margin: 1rem !important; width: 5rem !important; margin-right: 0 !important; } label { margin-top: 1.1rem !important; } } .location-selection-warning { i, p { display: inline; margin-right: 1rem; color: $darkest_red; } } } .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; } }