コンポーネントのスタイルを調整

Author: kaizumaki

components/ActionButton.vue

@@ -71,7 +71,7 @@ export default class ActionButton extends Vue {
   display: inline-block;
   width: 100%;
   font-weight: 600;
-  padding: 0.8em 1em;
+  padding: 0.8em 1.5em;
   border-radius: 0.5em;
   border: none;
   color: $white;
@@ -97,7 +97,7 @@ export default class ActionButton extends Vue {
   &-outline {
     background-color: $white;
     color: $primary;
-    border: 2px solid currentColor;
+    box-shadow: 0 0 0 2px currentColor inset;
   }
   &-text {
     background-color: transparent;

components/InputField.vue

@@ -190,6 +190,9 @@ export default Vue.extend({
   &::placeholder {
     color: $gray-2;
   }
+  &[type='datetime-local'] {
+    padding: 12px 16px;
+  }
 }
 .labelText {
   display: block;

components/ModalBase.vue

@@ -6,7 +6,11 @@
       @click="showContent ? (showContent = false) : $emit('close')"
     >
       <transition name="modalContentTransition" @after-leave="$emit('close')">
-        <div v-if="showContent" class="modalContent" @click.stop>
+        <div
+          v-if="showContent"
+          :class="['modalContent', wide ? 'wide' : '']"
+          @click.stop
+        >
           <div class="closeButton" @click="showContent = false">
             <CloseIcon />
           </div>
@@ -41,6 +45,10 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
   },
   data(): {
     showContent: boolean
@@ -75,17 +83,19 @@ export default Vue.extend({
 }
 .modalContent {
   position: absolute;
-  top: 0;
+  top: 50%;
   left: 50%;
   width: 80%;
   max-width: 520px;
-  min-height: 50%;
   max-height: calc(100vh - 100px);
   padding: 22px 10px 40px;
-  margin: 50px 0;
   background-color: $white;
   border-radius: 10px;
-  transform: translate(-50%, 0);
+  transform: translate(-50%, -50%);
+
+  &.wide {
+    max-width: 800px;
+  }
 
   &Transition {
     &-enter,