From 51e0ee70e39b8560a5e38129190ba40e4a63c1aa Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Fri, 30 Sep 2022 11:49:50 -0400
Subject: [PATCH] ISTWCMS-5759: css to clean up the bleed into layout builder
forms
---
src/patterns/01-core/elements/_option.scss | 2 +-
src/patterns/01-core/elements/_select.scss | 14 ++++++++++----
src/patterns/01-core/mixins/_button.scss | 4 ++--
.../layout-builder/_layout-builder.scss | 5 -----
src/patterns/04-components/filters/_filters.scss | 3 ++-
5 files changed, 15 insertions(+), 13 deletions(-)
diff --git a/src/patterns/01-core/elements/_option.scss b/src/patterns/01-core/elements/_option.scss
index ad161da6..603e4673 100644
--- a/src/patterns/01-core/elements/_option.scss
+++ b/src/patterns/01-core/elements/_option.scss
@@ -27,5 +27,5 @@ label.option,
font-weight: normal;
letter-spacing:inherit;
margin-left: var(--size-05);
- padding: var(--size-1) 0 var(--size-1) var(--size-4);
+ padding: var(--size-1) 0;
}
diff --git a/src/patterns/01-core/elements/_select.scss b/src/patterns/01-core/elements/_select.scss
index 0ab4b54d..29cf29e3 100644
--- a/src/patterns/01-core/elements/_select.scss
+++ b/src/patterns/01-core/elements/_select.scss
@@ -6,11 +6,12 @@
:where(select) {
@include svg-background(select-arrows);
appearance: none;
- background-color: var(--gray-2);
+ background-color: var(--gray-1);
background-position: right 10px center; // LTR
background-repeat: no-repeat;
background-size: 20px;
- border-radius: var(--radius-2);
+ border: var(--size-xs) solid var(--gray-3);
+ border-radius: var(--radius-1);
color: inherit;
cursor: pointer;
font-family: var(--font-systemmedium);
@@ -18,14 +19,19 @@
letter-spacing: inherit;
padding-block: .75ch;
padding-inline: 1.25ch 0;
- padding-right: 10px; // LTR
+ padding-right: var(--size-4); // LTR
touch-action: manipulation;
+ width: 100%;
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
-
&::-ms-expand {
display: none;
}
}
+.form-item-moderation-state-0-state{
+ .form-select{
+ width: auto;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
index e6c8ff2a..506c7433 100644
--- a/src/patterns/01-core/mixins/_button.scss
+++ b/src/patterns/01-core/mixins/_button.scss
@@ -149,7 +149,7 @@ $button-font-size: var(--font-size-1) !default;
background: var(--uw-white) !important;
color: var(--uw-black) !important;
padding: var(--size-1) var(--size-2);
- width:auto;
+ width: auto;
&:hover,
&:focus {
border: 1px solid transparent !important;
@@ -167,7 +167,7 @@ $button-font-size: var(--font-size-1) !default;
color: var(--uw-white) !important;
background: var(--uw-black) !important;
padding: var(--size-1) var(--size-2);
- width:auto;
+ width: auto;
&:hover,
&:focus {
border: 1px solid transparent !important;
diff --git a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index 817a9862..8102abf5 100644
--- a/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/src/patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -134,11 +134,6 @@ form {
padding: 0 var(--size-2);
text-align: center;
}
- // Removes gap at bottom of editor in dialogue
- .odd .form-item,
- .even .form-item {
- margin-bottom: 0 !important;
- }
// Resets the min width.
.field-multiple-table {
diff --git a/src/patterns/04-components/filters/_filters.scss b/src/patterns/04-components/filters/_filters.scss
index a7383172..d643437f 100644
--- a/src/patterns/04-components/filters/_filters.scss
+++ b/src/patterns/04-components/filters/_filters.scss
@@ -5,7 +5,7 @@
*/
@use '../../01-core' as *;
-.views-exposed-form{
+.views-exposed-form.bef-exposed-form{
margin: 0 !important;
padding: 0 !important;
.form-actions{
@@ -86,6 +86,7 @@
display: block;
font-family: inherit;
font-size: inherit;
+ padding: var(--size-1) 0 var(--size-1) var(--size-4);
position: relative;
&::before,
&::after {
--
GitLab