From 63557aed6035293a4030d0ccfbb8a72b1f02089a Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 18 Aug 2022 14:01:12 -0400
Subject: [PATCH] ISTWCMS-5725: additional css for the height of the input as
well as base form-text form-item styles
---
src/patterns/01-core/elements/_input.scss | 19 ++++++++++++++++++-
.../form-view-search/_form-view-search.scss | 15 +++++++++++++--
2 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/src/patterns/01-core/elements/_input.scss b/src/patterns/01-core/elements/_input.scss
index 6f3c4f4e..faae7b08 100644
--- a/src/patterns/01-core/elements/_input.scss
+++ b/src/patterns/01-core/elements/_input.scss
@@ -110,7 +110,24 @@ input[type="radio"]) {
// :where(input[type='search']) {}
// :where(input[type='submit']) {}
// :where(input[type='tel']) {}
-// :where(input[type='text']) {}
+ :where(input[type='text']) {
+ border: var(--size-xs) solid var(--gray-3);
+ box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
+ box-sizing: border-box;
+ color: inherit;
+ cursor: pointer;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ letter-spacing: inherit;
+ padding: $uw-input-padding;
+ max-width: inherit;
+ touch-action: manipulation;
+ &:focus {
+ border: var(--size-xs) solid var(--gray-5) !important;
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
+ outline: var(--gray-5);
+ }
+ }
// :where(input[type='time']) {}
// :where(input[type='url']) {}
// :where(input[type='week']) {}
diff --git a/src/patterns/04-components/form-view-search/_form-view-search.scss b/src/patterns/04-components/form-view-search/_form-view-search.scss
index fe3eb929..44f19852 100644
--- a/src/patterns/04-components/form-view-search/_form-view-search.scss
+++ b/src/patterns/04-components/form-view-search/_form-view-search.scss
@@ -1,7 +1,7 @@
@use '../../01-core' as *;
.uw-search-form {
- margin:0 0 var(--size-sm) 0;
+ margin:0 0 var(--size-2) 0;
.catalog-search-form,
.service-search-form,
@@ -13,13 +13,24 @@
.form-item {
.description {
- margin: var(--size-xs) 0;
+ margin: var(--size-1) 0;
}
}
.form-text {
+ border: var(--size-xs) solid var(--gray-3);
border-bottom-right-radius: 0;
border-top-right-radius: 0;
+ box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
+ box-sizing: border-box;
+ color: inherit;
+ cursor: pointer;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-0);
+ letter-spacing: inherit;
+ padding: 0.46667rem;
+ max-width: inherit;
+ touch-action: manipulation;
width: 100%;
}
--
GitLab