From 080a63df6a5b1a95e05eeea3c66d3a41fa431e82 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 17 Oct 2022 13:08:14 +0200 Subject: [PATCH] Job Details: Style UI for setting job priority --- web/app/src/assets/base.css | 14 ++- .../components/PopoverEditableJobPriority.vue | 102 ++++++++++++++++-- 2 files changed, 105 insertions(+), 11 deletions(-) diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css index ba143c45..f9d02abd 100644 --- a/web/app/src/assets/base.css +++ b/web/app/src/assets/base.css @@ -48,6 +48,11 @@ --transition-speed: 240ms; --transition-speed-fast: 60ms; + --box-shadow-float: 2px 2px 5px rgba(0,0,0,.5), 0 5px 25px rgba(0,0,0,.5); + + /* Popovers. */ + --color-background-popover: var(--color-background-column-highlight); + --color-danger: hsl(352 100% 56%); --color-success: hsl(102 70% 56%); @@ -348,7 +353,8 @@ fieldset { border-radius: var(--border-radius); } -input[type="text"] { +input[type="text"], +input[type="number"] { appearance: none; background-color: var(--color-background); border-radius: var(--border-radius); @@ -361,11 +367,13 @@ input[type="text"] { width: 100%; } -input[type="text"]:focus { +input[type="text"]:focus, +input[type="number"]:focus { border-color: var(--color-accent); } -input[type="text"].is-invalid { +input[type="text"].is-invalid, +input[type="number"].is-invalid { border-color: var(--color-danger); } diff --git a/web/app/src/components/PopoverEditableJobPriority.vue b/web/app/src/components/PopoverEditableJobPriority.vue index 13a59438..ca619c2b 100644 --- a/web/app/src/components/PopoverEditableJobPriority.vue +++ b/web/app/src/components/PopoverEditableJobPriority.vue @@ -1,22 +1,108 @@ + +