Merge pull request stopcovid19-okayama#1328 from tokyo-metropolitan-g…

…ov/dev-a11y-flow [WIP] Dev-a11y-flow を development に取り込む
hagume · Mar 14, 2020 · 91d5b73 · 91d5b73
2 parents 6a47054 + 36aef8f
commit 91d5b73
Show file tree

Hide file tree

Showing 22 changed files with 840 additions and 1,054 deletions.
diff --git a/components/flow/FlowSpAccording.vue b/components/flow/FlowSpAccording.vue
diff --git a/components/flow/FlowSpAdvisory.vue b/components/flow/FlowSpAdvisory.vue
@@ -1,20 +1,21 @@
 <template>
-  <div :class="$style.SpAdvisory">
-    <h4 id="consult" :class="['mb-4 mt-n6', $style.Heading]">
+  <div :class="$style.container">
+    <h4 id="consult" :class="[$style.heading, $style.fzXLarge]">
       {{ $t('新型コロナ受診相談窓口') }}
-      <small>{{ $t('帰国者・接触者電話相談センター') }}</small>
+      <small :class="[$style.break, $style.fzRegular, $style.mt5]">{{
+        $t('帰国者・接触者電話相談センター')
+      }}</small>
     </h4>
-    <div :class="['px-6 py-2 mb-4', $style.ConsultationChip]">
-      {{ $t('24時間対応') }}
-    </div>
+    <p :class="[$style.open, $style.fzMedium]">
+      <span>{{ $t('24時間対応') }}</span>
+    </p>
     <dl>
-      <div :class="['py-3', $style.ConsultationDaytime]">
-        <dt :class="$style.ConsultationDaytimeTitle">
+      <div :class="$style.daytime">
+        <dt :class="[$style.title, $style.fzMedium]">
           {{ $t('平日（日中）') }}
         </dt>
-        <dd :class="$style.ConsultationDaytimeLink">
+        <dd :class="$style.link">
           <a
-            :class="$style.Link"
             href="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/coronasodan.html"
             target="_blank"
             rel="noopener"
@@ -26,21 +27,29 @@
           </a>
         </dd>
       </div>
-      <div :class="['pt-3', $style.ConsultationWeekend]">
-        <dt :class="['mb-3', $style.ConsultationWeekendDescription]">
-          <span :class="$style.ConsultationWeekendTitle">
-            {{ $t('平日（夜間）') }}
-          </span>
-          {{ $t('午後5時から翌朝午前9時') }}
-          <span :class="$style.ConsultationWeekendTitle">
-            {{ $t('土日祝 終日') }}
-          </span>
+      <div>
+        <dt>
+          <ul :class="[$style.night]">
+            <li>
+              <span :class="[$style.fzMedium, $style.break, $style.mb10]">
+                {{ $t('平日（夜間）') }}
+              </span>
+              {{ $t('午後5時から翌朝午前9時') }}
+            </li>
+            <li>
+              <span :class="$style.fzMedium">
+                {{ $t('土日祝 終日') }}
+              </span>
+            </li>
+          </ul>
         </dt>
-        <dd :class="$style.TelLink">
-          <PhoneIcon :class="$style.TelLinkImg" alt="Phone" />
-          <a href="tel:0353204592">
-            03-5320-4592
-          </a>
+        <dd>
+          <div :class="[$style.phone, $style.fzNumeric]">
+            <span :class="$style.icon">
+              <PhoneIcon alt="Phone" />
+            </span>
+            <a href="tel:0353204592">03-5320-4592</a>
+          </div>
         </dd>
       </div>
     </dl>
@@ -50,97 +59,86 @@
 <i18n src="./FlowSpAdvisory.i18n.json"></i18n>
 
 <script lang="ts">
-import PhoneIcon from '@/static/flow/phone-24px.svg'
+import PhoneIcon from '@/static/flow/responsive/phone.svg'
 
 export default {
   components: { PhoneIcon }
 }
 </script>
 
 <style module lang="scss">
-.SpAdvisory {
-  color: $gray-2;
-  text-align: center;
-}
-.Heading {
-  @include lessThan($small) {
-    @include font-size(22);
-  }
-  @include largerThan($small) {
-    @include font-size(24);
-  }
-  line-height: 1.5rem;
-  white-space: pre-line;
-  small {
-    @include font-size(16);
-  }
-}
-.Consultation {
-  &Chip {
-    display: inline-block;
+@import '@/components/flow/flow_sp.scss';
+
+// advisory
+.open {
+  margin-top: px2vw(20);
+  display: flex;
+  justify-content: center;
+  > span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     background-color: $white;
-    border-radius: 4px;
     color: $green-1;
-    font-weight: bold;
+    padding: px2vw(20) px2vw(40);
+    border-radius: px2vw(6);
   }
-  &Daytime {
+}
+.daytime {
+  margin-top: px2vw(20);
+  display: flex;
+  border-top: 1px solid $gray-4;
+  border-bottom: 1px solid $gray-4;
+  > * {
+    padding: px2vw(30) px2vw(10);
     display: flex;
     align-items: center;
-    border-width: 0.5px 0;
-    border-style: solid;
-    border-color: $gray-4;
-    font-weight: bold;
-    justify-content: space-around;
-    &Title {
-      flex-basis: 40%;
-      @include lessThan($small) {
-        @include font-size(16);
-      }
-      @include largerThan($small) {
-        @include font-size(18);
-      }
-    }
-    &Link {
-      flex-basis: 55%;
-      a {
-        color: $gray-2;
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
+    justify-content: center;
+  }
+  .title {
+    text-align: center;
+    flex-basis: 40%;
   }
-  &Weekend {
-    font-weight: bold;
-    &Description {
-      white-space: pre-line;
+  .link {
+    flex-basis: 60%;
+    > a {
+      text-decoration: none;
     }
-    &Title {
-      @include lessThan($small) {
-        @include font-size(16);
-      }
-      @include largerThan($small) {
-        @include font-size(18);
-      }
+  }
+}
+.night {
+  margin: px2vw(30) auto;
+  padding-left: 0 !important;
+  text-align: center;
+  > li {
+    list-style-type: none;
+    &:not(:first-child) {
+      margin-top: px2vw(20);
     }
   }
 }
 
-.TelLink {
-  @include font-size(24);
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &Img {
-    width: 2rem;
+@include largerThan($small) {
+  $vw: 960;
+  .open {
+    margin-top: px2vw(20, $vw);
+    > span {
+      padding: px2vw(20) px2vw(40, $vw);
+      border-radius: px2vw(6, $vw);
+    }
   }
-  a {
-    color: $gray-2;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
+  .daytime {
+    margin-top: px2vw(20, $vw);
+    > * {
+      padding: px2vw(30) px2vw(10, $vw);
+    }
+  }
+  .night {
+    margin: px2vw(30, $vw) auto;
+    > li {
+      &:not(:first-child) {
+        margin-top: px2vw(20, $vw);
+      }
     }
   }
 }