From 7785ed2b1dfe63c2e1ea67681d8d4ee05166d7c1 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 15 Jul 2021 01:01:05 -0700 Subject: [PATCH] Adjust OptionalInput widget design to add back its right border --- client/web/src/App.vue | 2 +- .../src/components/widgets/buttons/PopoverButton.vue | 2 +- .../src/components/widgets/inputs/OptionalInput.vue | 12 +----------- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/client/web/src/App.vue b/client/web/src/App.vue index c5695c72..f117c2a8 100644 --- a/client/web/src/App.vue +++ b/client/web/src/App.vue @@ -40,7 +40,7 @@ // TODO: Replace with CSS color() function to calculate alpha when browsers support it // See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function - // E6 = 90% alpha + // F2 = 95% alpha --floating-menu-opacity-color-2-mildblack: #222222f2; --floating-menu-shadow: rgba(0, 0, 0, 50%); } diff --git a/client/web/src/components/widgets/buttons/PopoverButton.vue b/client/web/src/components/widgets/buttons/PopoverButton.vue index f019f0fa..baf3ae52 100644 --- a/client/web/src/components/widgets/buttons/PopoverButton.vue +++ b/client/web/src/components/widgets/buttons/PopoverButton.vue @@ -37,7 +37,7 @@ } // TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last - div[class*="-input"]:not(.optional-input) + & { + div[class*="-input"] + & { margin-left: 1px; .icon-button { diff --git a/client/web/src/components/widgets/inputs/OptionalInput.vue b/client/web/src/components/widgets/inputs/OptionalInput.vue index a6e8113d..bdf86bf6 100644 --- a/client/web/src/components/widgets/inputs/OptionalInput.vue +++ b/client/web/src/components/widgets/inputs/OptionalInput.vue @@ -11,13 +11,11 @@ align-items: center; white-space: nowrap; justify-content: center; - margin-right: 1px; - width: 23px; + width: 24px; height: 24px; border: 1px solid var(--color-7-middlegray); border-radius: 2px 0 0 2px; box-sizing: border-box; - border-right: none; &:hover { background: var(--color-6-lowergray); @@ -26,19 +24,11 @@ input:checked + label { border: 1px solid var(--color-accent); - border-right: none; &:hover { border: 1px solid var(--color-accent-hover); - border-right: none; background: none; } - // border: none; - // background: var(--color-e-nearwhite); - - // &:hover { - // background: var(--color-f-white); - // } } }