From 1171f0a517c8e36cb6ae919258336546f9ab7274 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Tue, 15 Aug 2023 21:26:18 +1200 Subject: [PATCH] some final modularising of the CSS --- src/web/stylesheets/components/_op-list.css | 5 + src/web/stylesheets/components/_operation.css | 315 +----------------- src/web/stylesheets/components/_recipe.css | 30 -- .../components/recipe/_ingredients.css | 219 ++++++++++++ .../components/recipe/_recipe-list.css | 110 ++++++ .../stylesheets/components/recipe/_recipe.css | 13 + src/web/stylesheets/index.css | 5 +- 7 files changed, 356 insertions(+), 341 deletions(-) delete mode 100644 src/web/stylesheets/components/_recipe.css create mode 100644 src/web/stylesheets/components/recipe/_ingredients.css create mode 100644 src/web/stylesheets/components/recipe/_recipe-list.css create mode 100644 src/web/stylesheets/components/recipe/_recipe.css diff --git a/src/web/stylesheets/components/_op-list.css b/src/web/stylesheets/components/_op-list.css index fae1b64c..77813280 100755 --- a/src/web/stylesheets/components/_op-list.css +++ b/src/web/stylesheets/components/_op-list.css @@ -6,6 +6,11 @@ * @license Apache-2.0 */ +/* + Note: .op-list is used in the 'edit favourites' modal & for each + category > c-operation-list in the Operations component +*/ + .op-list { list-style-type: none; margin: 0; diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index d9da213c..d140bf10 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -6,6 +6,11 @@ * @license Apache-2.0 */ +/* + Note: .operation is used in the c-operation-li custom web components, but also + for list items in #recipe-list +*/ + .operation { padding: 10px; list-style-type: none; @@ -65,320 +70,10 @@ li.operation.favourite > .op-icon.star-icon { font-weight: var(--op-title-font-weight); } -.ingredients { - display: flex; - flex-flow: row wrap; - justify-content: flex-start; - column-gap: 14px; - row-gap: 0; -} - -.ing-very-wide { - flex: 4 400px; -} - -.ing-wide { - flex: 3 200px; -} - -.ing-medium { - flex: 2 120px; -} - -.ing-short { - flex: 1 80px; -} - -.ing-flexible { - flex-grow: 1; -} - -.ingredients .form-group { - margin-top: 1rem; - padding-top: 0; -} - -.arg { - font-family: var(--fixed-width-font-family); - text-overflow: ellipsis; -} - -select.arg { - font-family: var(--primary-font-family); - min-width: 100px; -} - -textarea.arg { - min-height: 74px; - resize: vertical; -} - -div.toggle-string { - flex: 1; -} - -input.toggle-string { - border-top-right-radius: 0 !important; - height: 42px !important; -} - -.operation [class^='bmd-label'], -.operation [class*=' bmd-label'] { - top: 13px !important; - left: 12px; - z-index: 10; -} - -.operation label, -.operation .checkbox label { - color: var(--arg-label-colour); -} - -.operation .is-focused [class^='bmd-label'], -.operation .is-focused [class*=' bmd-label'], -.operation .is-focused [class^='bmd-label'], -.operation .is-focused [class*=' bmd-label'], -.operation .is-focused label, -.operation .checkbox label:hover { - color: var(--input-highlight-colour); -} - -.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, -.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before { - border-color: var(--input-border-colour); - color: var(--input-highlight-colour); -} - -.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, -.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { - border-color: var(--input-highlight-colour); - color: var(--input-highlight-colour); -} - -.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, -.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, -.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, -.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { - border-color: var(--disabled-font-colour); - color: var(--disabled-font-colour); -} - -.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, -.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, -.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, -.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { - border-color: var(--breakpoint-font-colour); - color: var(--breakpoint-font-colour); -} - -.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, -.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, -.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, -.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { - border-color: var(--fc-breakpoint-operation-font-colour); - color: var(--fc-breakpoint-operation-font-colour); -} - -.operation .form-control { - padding: 20px 12px 6px 12px !important; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - background-image: none; - background-color: var(--arg-background); - background-position-y: 100%, 100%; - color: var(--arg-font-colour); -} - -.operation .form-control:hover { - background-image: - linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px), - linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px); - filter: brightness(97%); -} - -.operation .form-control:focus { - background-color: var(--arg-background); - background-image: - linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px), - linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px); - filter: brightness(100%); -} - -.operation .bmd-form-group.is-filled label.bmd-label-floating, -.operation .bmd-form-group.is-focused label.bmd-label-floating { - top: 4px !important; - left: 12px; -} - -.operation label.bmd-label-floating { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - width: calc(100% - 13px); -} - -.input-group .form-control { - border-top-left-radius: 4px; -} - -.input-group-append button { - border-top-right-radius: 4px; - background-color: var(--arg-background) !important; - margin: unset; -} - -.input-group-append button:hover { - filter: brightness(97%); -} - -.editable-option-menu { - height: auto; - max-height: 350px; - overflow-x: hidden; -} - -.editable-option-menu .dropdown-item { - padding: 0.3rem 1rem 0.3rem 1rem; - min-height: 1.6rem; - max-width: 20rem; -} - -.ingredients .dropdown-toggle-split { - height: 40px !important; -} - -.boolean-arg { - height: 46px; -} - -.boolean-arg .checkbox { - height: 100%; -} - -.boolean-arg .checkbox label { - height: 100%; - display: flex; - align-items: center; -} - -.boolean-arg .checkbox-decorator { - top: 13px; -} - -.custom-control-label { - line-height: 1.5rem; -} - -.custom-control-label:hover { - cursor: pointer; -} - -.custom-control-label::before { - height: 20px; - width: 20px; - border: 1px solid var(--input-border-colour); -} - -.custom-control-input:checked + .custom-control-label::before { - background-color: var(--input-highlight-colour); - border: 1px solid var(--input-highlight-colour); -} - -.custom-control-label::after { - height: 20px; - width: 20px; -} - -.register-list { - background-color: var(--fc-operation-border-colour); - font-family: var(--fixed-width-font-family); - padding: 10px; - word-break: break-all; -} - -.recipe-icons { - position: absolute; - top: 13px; - right: 10px; - height: 16px; -} - -.recipe-icons i { - height: 30px; - width: 30px; - text-align: center; - vertical-align: baseline; - float: right; - font-size: 18px; - cursor: pointer; -} - -.recipe-icons i:last-child { - margin-right: 10px; -} - -.disable-icon { - color: var(--disable-icon-colour); -} - -.disable-icon-selected { - color: var(--disable-icon-selected-colour); -} - -.breakpoint-icon { - color: var(--breakpoint-icon-colour); -} - -.breakpoint-selected { - color: var(--breakpoint-icon-selected-colour); -} - -.break { - color: var(--breakpoint-font-colour) !important; - background-color: var(--breakpoint-bg-colour) !important; - border-color: var(--breakpoint-border-colour) !important; -} - -.break .form-group * { color: var(--breakpoint-font-colour) !important; } - c-operation-li li.operation.focused-op { color: var(--focused-operation-font-color) !important; background-color: var(--focused-operation-bg-colour) !important; border-color: var(--focused-operation-border-colour) !important; } -/*.focused-op .form-group * { color: var(--focused-operation-font-color) !important; }*/ -.flow-control-op { - color: var(--fc-operation-font-colour) !important; - background-color: var(--fc-operation-bg-colour) !important; - border-color: var(--fc-operation-border-colour) !important; -} - -.flow-control-op .form-group *:not(.arg) { color: var(--fc-operation-font-colour) } - -.flow-control-op.break { - color: var(--fc-breakpoint-operation-font-colour) !important; - background-color: var(--fc-breakpoint-operation-bg-colour) !important; - border-color: var(--fc-breakpoint-operation-border-colour) !important; -} - -.flow-control-op.break .form-group * { color: var(--fc-breakpoint-operation-font-colour) !important; } - -.disabled { - color: var(--disabled-font-colour) !important; - background-color: var(--disabled-bg-colour) !important; - border-color: var(--disabled-border-colour) !important; -} - -.disabled .form-group * { color: var(--disabled-font-colour) !important; } - -.break .register-list { - color: var(--fc-breakpoint-operation-font-colour) !important; - background-color: var(--fc-breakpoint-operation-border-colour) !important; -} - -.disabled .register-list { - color: var(--disabled-font-colour) !important; - background-color: var(--disabled-border-colour) !important; -} diff --git a/src/web/stylesheets/components/_recipe.css b/src/web/stylesheets/components/_recipe.css deleted file mode 100644 index 3b8aba68..00000000 --- a/src/web/stylesheets/components/_recipe.css +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Recipe area styles - * - * @author n1474335 [n1474335@gmail.com] - * @copyright Crown Copyright 2017 - * @license Apache-2.0 - */ - -#recipe { - position: relative; - background-color: var(--primary-background-colour); - border-bottom: 1px solid var(--primary-border-colour); -} - -#rec-list { - overflow-y: auto; -} - -#rec-list .operation { - color: var(--rec-list-operation-font-colour); - background-color: var(--rec-list-operation-bg-colour); - border-color: var(--rec-list-operation-border-colour); - padding: 14px; - cursor: grab; -} - -#rec-list li.sortable-chosen{ - filter: brightness(0.8); -} - diff --git a/src/web/stylesheets/components/recipe/_ingredients.css b/src/web/stylesheets/components/recipe/_ingredients.css new file mode 100644 index 00000000..5b9389fb --- /dev/null +++ b/src/web/stylesheets/components/recipe/_ingredients.css @@ -0,0 +1,219 @@ +.ingredients { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + column-gap: 14px; + row-gap: 0; +} + +.ing-very-wide { + flex: 4 400px; +} + +.ing-wide { + flex: 3 200px; +} + +.ing-medium { + flex: 2 120px; +} + +.ing-short { + flex: 1 80px; +} + + +.ing-flexible { + flex-grow: 1; +} + +.ingredients .form-group { + margin-top: 1rem; + padding-top: 0; +} + +.arg { + font-family: var(--fixed-width-font-family); + text-overflow: ellipsis; +} + +select.arg { + font-family: var(--primary-font-family); + min-width: 100px; +} + +textarea.arg { + min-height: 74px; + resize: vertical; +} + +div.toggle-string { + flex: 1; +} + +input.toggle-string { + border-top-right-radius: 0 !important; + height: 42px !important; +} + + +.operation label, +.operation .checkbox label { + color: var(--arg-label-colour); +} + +.operation .is-focused [class^='bmd-label'], +.operation .is-focused [class*=' bmd-label'], +.operation .is-focused [class^='bmd-label'], +.operation .is-focused [class*=' bmd-label'], +.operation .is-focused label, +.operation .checkbox label:hover { + color: var(--input-highlight-colour); +} + +.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before { + border-color: var(--input-border-colour); + color: var(--input-highlight-colour); +} + +.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--input-highlight-colour); + color: var(--input-highlight-colour); +} + +.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.disabled .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, +.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.disabled .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--disabled-font-colour); + color: var(--disabled-font-colour); +} + +.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, +.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--breakpoint-font-colour); + color: var(--breakpoint-font-colour); +} + +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check, +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]+.checkbox-decorator .check::before, +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check, +.flow-control-op.break .ingredients .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check::before { + border-color: var(--fc-breakpoint-operation-font-colour); + color: var(--fc-breakpoint-operation-font-colour); +} + +.operation .form-control { + padding: 20px 12px 6px 12px !important; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + background-image: none; + background-color: var(--arg-background); + background-position-y: 100%, 100%; + color: var(--arg-font-colour); +} + +.operation .form-control:hover { + background-image: + linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px), + linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px); + filter: brightness(97%); +} + +.operation .form-control:focus { + background-color: var(--arg-background); + background-image: + linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(25, 118, 210, 0) 2px), + linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px); + filter: brightness(100%); +} + + +.operation .bmd-form-group.is-filled label.bmd-label-floating, +.operation .bmd-form-group.is-focused label.bmd-label-floating { + top: 4px !important; + left: 12px; +} + +.operation label.bmd-label-floating { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: calc(100% - 13px); +} + +.input-group .form-control { + border-top-left-radius: 4px; +} + +.input-group-append button { + border-top-right-radius: 4px; + background-color: var(--arg-background) !important; + margin: unset; +} + +.input-group-append button:hover { + filter: brightness(97%); +} + +.editable-option-menu { + height: auto; + max-height: 350px; + overflow-x: hidden; +} + +.editable-option-menu .dropdown-item { + padding: 0.3rem 1rem 0.3rem 1rem; + min-height: 1.6rem; + max-width: 20rem; +} + +.ingredients .dropdown-toggle-split { + height: 40px !important; +} + +.boolean-arg { + height: 46px; +} + +.boolean-arg .checkbox { + height: 100%; +} + +.boolean-arg .checkbox label { + height: 100%; + display: flex; + align-items: center; +} + +.boolean-arg .checkbox-decorator { + top: 13px; +} + +.custom-control-label { + line-height: 1.5rem; +} + +.custom-control-label:hover { + cursor: pointer; +} + +.custom-control-label::before { + height: 20px; + width: 20px; + border: 1px solid var(--input-border-colour); +} + +.custom-control-input:checked + .custom-control-label::before { + background-color: var(--input-highlight-colour); + border: 1px solid var(--input-highlight-colour); +} + +.custom-control-label::after { + height: 20px; + width: 20px; +} diff --git a/src/web/stylesheets/components/recipe/_recipe-list.css b/src/web/stylesheets/components/recipe/_recipe-list.css new file mode 100644 index 00000000..38fec58f --- /dev/null +++ b/src/web/stylesheets/components/recipe/_recipe-list.css @@ -0,0 +1,110 @@ +#rec-list { + overflow-y: auto; +} + +#rec-list .operation { + color: var(--rec-list-operation-font-colour); + background-color: var(--rec-list-operation-bg-colour); + border-color: var(--rec-list-operation-border-colour); + padding: 14px; + cursor: grab; +} + +#rec-list li.sortable-chosen{ + filter: brightness(0.8); +} + +.operation [class^='bmd-label'], +.operation [class*=' bmd-label'] { + top: 13px !important; + left: 12px; + z-index: 10; +} + +.register-list { + background-color: var(--fc-operation-border-colour); + font-family: var(--fixed-width-font-family); + padding: 10px; + word-break: break-all; +} + +.recipe-icons { + position: absolute; + top: 13px; + right: 10px; + height: 16px; +} + +.recipe-icons i { + height: 30px; + width: 30px; + text-align: center; + vertical-align: baseline; + float: right; + font-size: 18px; + cursor: pointer; +} + +.recipe-icons i:last-child { + margin-right: 10px; +} + +.disable-icon { + color: var(--disable-icon-colour); +} + +.disable-icon-selected { + color: var(--disable-icon-selected-colour); +} + +.breakpoint-icon { + color: var(--breakpoint-icon-colour); +} + +.breakpoint-selected { + color: var(--breakpoint-icon-selected-colour); +} + +.break { + color: var(--breakpoint-font-colour) !important; + background-color: var(--breakpoint-bg-colour) !important; + border-color: var(--breakpoint-border-colour) !important; +} + +.break .form-group * { color: var(--breakpoint-font-colour) !important; } + +/*.focused-op .form-group * { color: var(--focused-operation-font-color) !important; }*/ + +.flow-control-op { + color: var(--fc-operation-font-colour) !important; + background-color: var(--fc-operation-bg-colour) !important; + border-color: var(--fc-operation-border-colour) !important; +} + +.flow-control-op .form-group *:not(.arg) { color: var(--fc-operation-font-colour) } + +.flow-control-op.break { + color: var(--fc-breakpoint-operation-font-colour) !important; + background-color: var(--fc-breakpoint-operation-bg-colour) !important; + border-color: var(--fc-breakpoint-operation-border-colour) !important; +} + +.flow-control-op.break .form-group * { color: var(--fc-breakpoint-operation-font-colour) !important; } + +.disabled { + color: var(--disabled-font-colour) !important; + background-color: var(--disabled-bg-colour) !important; + border-color: var(--disabled-border-colour) !important; +} + +.disabled .form-group * { color: var(--disabled-font-colour) !important; } + +.break .register-list { + color: var(--fc-breakpoint-operation-font-colour) !important; + background-color: var(--fc-breakpoint-operation-border-colour) !important; +} + +.disabled .register-list { + color: var(--disabled-font-colour) !important; + background-color: var(--disabled-border-colour) !important; +} diff --git a/src/web/stylesheets/components/recipe/_recipe.css b/src/web/stylesheets/components/recipe/_recipe.css new file mode 100644 index 00000000..7157effe --- /dev/null +++ b/src/web/stylesheets/components/recipe/_recipe.css @@ -0,0 +1,13 @@ +/** + * Recipe area styles + * + * @author n1474335 [n1474335@gmail.com] + * @copyright Crown Copyright 2017 + * @license Apache-2.0 + */ + +#recipe { + position: relative; + background-color: var(--primary-background-colour); + border-bottom: 1px solid var(--primary-border-colour); +} diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css index 9eae64fe..cf0a5282 100755 --- a/src/web/stylesheets/index.css +++ b/src/web/stylesheets/index.css @@ -31,12 +31,15 @@ @import "./components/_dividers.css"; @import "./components/_modals.css"; @import "./components/_banner.css"; -@import "./components/_recipe.css"; @import "./components/_controls.css"; /* Components: Operations */ @import "./components/operations/_operations.css"; @import "./components/operations/_search.css"; @import "./components/operations/_categories.css"; +/* Components: Recipe */ +@import "./components/recipe/_recipe.css"; +@import "./components/recipe/_recipe-list.css"; +@import "./components/recipe/_ingredients.css"; /* Components: IO */ @import "./components/io/_io.css"; @import "./components/io/_search-results.css";