From b11db037d7f309930e13d5f5de3c83f2c6a248b0 Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Mon, 8 Nov 2021 14:07:31 +0100 Subject: [PATCH] chg: [css:metafields] Improved responsiveness --- .../additional/bootstrap-additional.css | 5 ++- webroot/css/themes/theme-darkly.css | 5 ++- webroot/css/themes/theme-default.css | 5 ++- webroot/css/themes/theme-flatly.css | 5 ++- webroot/css/themes/theme-minty.css | 5 ++- webroot/css/themes/theme-quartz.css | 5 ++- webroot/css/themes/theme-slate.css | 5 ++- webroot/css/themes/theme-vapor.css | 5 ++- webroot/scss/custom.scss | 31 +++++++------------ 9 files changed, 44 insertions(+), 27 deletions(-) diff --git a/webroot/css/themes/additional/bootstrap-additional.css b/webroot/css/themes/additional/bootstrap-additional.css index efab752..4267558 100644 --- a/webroot/css/themes/additional/bootstrap-additional.css +++ b/webroot/css/themes/additional/bootstrap-additional.css @@ -324,8 +324,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/css/themes/theme-darkly.css b/webroot/css/themes/theme-darkly.css index b8e9bd0..9d21c6d 100644 --- a/webroot/css/themes/theme-darkly.css +++ b/webroot/css/themes/theme-darkly.css @@ -324,8 +324,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/css/themes/theme-default.css b/webroot/css/themes/theme-default.css index 18f7f2b..5847c4d 100644 --- a/webroot/css/themes/theme-default.css +++ b/webroot/css/themes/theme-default.css @@ -324,8 +324,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/css/themes/theme-flatly.css b/webroot/css/themes/theme-flatly.css index 7129d84..693cacb 100644 --- a/webroot/css/themes/theme-flatly.css +++ b/webroot/css/themes/theme-flatly.css @@ -324,8 +324,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/css/themes/theme-minty.css b/webroot/css/themes/theme-minty.css index 635279a..e12d74d 100644 --- a/webroot/css/themes/theme-minty.css +++ b/webroot/css/themes/theme-minty.css @@ -324,8 +324,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/css/themes/theme-quartz.css b/webroot/css/themes/theme-quartz.css index 29c4396..0dea675 100644 --- a/webroot/css/themes/theme-quartz.css +++ b/webroot/css/themes/theme-quartz.css @@ -324,8 +324,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/css/themes/theme-slate.css b/webroot/css/themes/theme-slate.css index 5609005..52a92e9 100644 --- a/webroot/css/themes/theme-slate.css +++ b/webroot/css/themes/theme-slate.css @@ -320,8 +320,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/css/themes/theme-vapor.css b/webroot/css/themes/theme-vapor.css index f517138..5ce1483 100644 --- a/webroot/css/themes/theme-vapor.css +++ b/webroot/css/themes/theme-vapor.css @@ -324,8 +324,11 @@ opacity: 0.5; position: absolute; width: 0.25rem; - transform: translateX(calc(1.5rem * -.5 + 5px)); + transform: translateX(calc(1.5rem * -.5 + 3px)); height: calc(100% + 4px); } } + @media (max-width: 575.98px) { + .multi-metafields-container > .multi-metafield-container:not(:first-child) label.form-label { + display: none; } } .multi-metafields-container > .multi-metafield-container:first-child > .multi-metafield-input-container::before { border-top-left-radius: 3px; border-top-right-radius: 3px; } diff --git a/webroot/scss/custom.scss b/webroot/scss/custom.scss index ac45ee4..ba2dbe1 100644 --- a/webroot/scss/custom.scss +++ b/webroot/scss/custom.scss @@ -1,5 +1,5 @@ $secondary: #6c757d !default; -$translateX: calc(1.5rem * -.5 + 5px); +$translateX: calc(1.5rem * -.5 + 3px); $rectHeight: calc(100% + 4px); $borderRadius: 3px; @@ -24,22 +24,6 @@ $borderRadius: 3px; transform: translate(0px, 18px); } - // @include media-breakpoint-up(sm) { - // &::before { - // content: none !important; - // } - // } - // &::before { - // content: ' '; - // background-color: $secondary; - // opacity: 0.5; - // position: absolute; - // width: 0.25rem; - // transform: translate(5px, 10px); - // height: calc(100% - 17px); - // border-radius: $borderRadius; - // } - & > .multi-metafield-container { position: relative; @@ -48,16 +32,25 @@ $borderRadius: 3px; } @include media-breakpoint-up(sm) { - & > .multi-metafield-input-container::before { + & > .multi-metafield-input-container::before { background-color: $secondary; opacity: 0.5; position: absolute; width: 0.25rem; transform: translateX($translateX); height: $rectHeight; - } + } + + } + @include media-breakpoint-down(sm) { + &:not(:first-child) label.form-label { + display: none; + } + } + + &:first-child > .multi-metafield-input-container::before { border-top-left-radius: $borderRadius; border-top-right-radius: $borderRadius;