Merge pull request #130 from vuejs-jp/fix/contact-form-design

Fix/form page section design
vuejs-jp · Apr 29, 2024 · 4ea8213 · 4ea8213
2 parents 74df8de + f6bd2eb
commit 4ea8213
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/apps/web/app/components/FormPageSection.vue b/apps/web/app/components/FormPageSection.vue
@@ -100,9 +100,22 @@ const updateDetail = (e: any) => {
 @import url("~/assets/media.css");
 
 section {
+  position: relative;
   padding: 120px 20px 120px;
-  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(235, 240, 245, 0.8));
-  background-blend-mode: soft-light;
+  background-color: #fff;
+  &::before {
+    content: "";
+    position: absolute;
+    display: block;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('/form-bg.png'), linear-gradient(#fff, #ebf0f5);
+    background-size: auto;
+    background-repeat: repeat;
+    background-position: top left;
+    background-blend-mode: soft-light;
+  }
 }
 
 .form-root {
@@ -112,6 +125,7 @@ section {
   margin: 0 auto;
   width: 100%;
   grid-template-columns: minmax(0, 1fr);
+  isolation: isolate;
 }
 
 .title {

diff --git a/packages/css/base.css b/packages/css/base.css
@@ -15,8 +15,8 @@
   --color-vue-blue-gradation: linear-gradient(to right, #35495e 0%, #353b5e 100%);
 
   /* box-shadow */
-  --box-shadow: 0 2px 10px rgb(53, 73, 95, 0.14);
-  --box-shadow-input: 0 1px 10px 0 rgb(53, 73, 94, 0.12);
+  --box-shadow-button: 0 2px 10px color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 14%));
+  --box-shadow-card: 0 6px 6px 0 color-mix(in srgb, var(--color-vue-blue), transparent calc(100% - 18%));
 
   /* font */
   --font-size-heading800: 5.625rem;

diff --git a/packages/ui/components/Button.vue b/packages/ui/components/Button.vue
@@ -107,7 +107,6 @@ const bindProps = computed(() => {
   --color-vue-green: #42b983;
   --color-vue-blue: #35495e;
   --color-disabled: #c6cacf;
-  --box-shadow: 0 2px 10px rgb(53, 73, 95, 0.14);
 
   display: inline-flex;
   justify-content: center;
@@ -122,7 +121,7 @@ const bindProps = computed(() => {
   border: none;
   box-sizing: border-box;
   text-decoration: none;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-button);
   font-family: 'din-2014', 'Yu Gothic Medium', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic',
     sans-serif;
 }
@@ -131,7 +130,7 @@ const bindProps = computed(() => {
   background: white;
   color: var(--color-vue-green);
   box-shadow:
-    var(--box-shadow),
+    var(--box-shadow-button),
     inset 0px 0px 0px 2px var(--color-vue-green);
 }
 
@@ -144,7 +143,7 @@ const bindProps = computed(() => {
 .button.-secondary {
   background: white;
   box-shadow:
-    var(--box-shadow),
+    var(--box-shadow-button),
     inset 0px 0px 0px 2px var(--color-vue-blue);
   color: var(--color-vue-blue);
 
@@ -158,14 +157,14 @@ const bindProps = computed(() => {
 .button[disabled] {
   pointer-events: none;
   background: var(--color-disabled);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-button);
   color: white;
 }
 
 .button.-secondary[disabled] {
   color: var(--color-disabled);
   box-shadow:
-    var(--box-shadow),
+    var(--box-shadow-button),
     inset 0px 0px 0px 2px var(--color-disabled);
   background: white;
 }

diff --git a/packages/ui/components/forms/InputField.vue b/packages/ui/components/forms/InputField.vue
@@ -90,7 +90,7 @@ const { fontWeight, fontSize } = useTypography()
 .form-input {
   padding: 22px 24px;
   border-radius: 6px;
-  box-shadow: var(--box-shadow-input);
+  box-shadow: var(--box-shadow-button);
   border: var(--border);
   outline: none;
   color: var(--color-vue-blue);

diff --git a/packages/ui/components/forms/TextAreaField.vue b/packages/ui/components/forms/TextAreaField.vue
@@ -87,7 +87,7 @@ const { fontWeight, fontSize } = useTypography()
 .form-textarea {
   padding: 22px 24px;
   border-radius: 6px;
-  box-shadow: var(--box-shadow-input);
+  box-shadow: var(--box-shadow-button);
   border: var(--border);
   outline: none;
   color: var(--color-vue-blue);

diff --git a/packages/ui/components/link/LinkButton.vue b/packages/ui/components/link/LinkButton.vue
@@ -87,7 +87,7 @@ const iconColor = computed(() => {
   border-radius: var(--height-button);
   text-decoration: none;
   cursor: pointer;
-  box-shadow: 0 2px 10px rgb(53, 73, 95, 0.14);
+  box-shadow: var(--box-shadow-button);
 }
 .link-button:hover {
   transition: 0.2s;