Merge pull request #279 from lapras-inc/release-20241025125249

Release 20241025125249

src/components/ContentLoader/ContentLoader.vue

@@ -76,14 +76,14 @@ const lines = computed(() => {
 }
 
 .line {
-  background-color: #ccc;
+  background-color: $line-color-light;
   animation: pulse 1.5s ease-in-out infinite;
   border-radius: 0.25rem;
   flex-grow: 1;
 }
 
 .circle {
-  background-color: #ccc;
+  background-color: $line-color-light;
   border-radius: 50%;
   animation: pulse 1.5s ease-in-out infinite;
 }

src/components/TextInput/TextInput.vue

@@ -92,29 +92,33 @@ export default defineComponent({
 <style lang="scss" scoped>
 .text-input {
   font: inherit;
-  font-size: 14px;
+  // mobile safariでのfocus時の拡大を防ぐため16px以上が必要
+  font-size: 16px;
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   color: $text-base;
   border: 0;
-  outline: 0;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid $line-color;
 
   &.has-error {
     border-color: $red;
+    background-color: $red-100;
+  }
+
+  @include mq-up(md) {
+    font-size: 14px;
   }
 }
 
 .is-single-line {
   line-height: 1;
-  padding: 7px 2px;
-  border-bottom: 1px solid $line-color;
+  border-radius: $corner-r;
 }
 
 .is-multi-line {
   line-height: 1.5;
-  padding: 7px 9px;
-  border: 1px solid $line-color;
   border-radius: $corner-r;
 }
 

src/stylesheets/variables/_index.scss

@@ -37,6 +37,7 @@ $black-000: #FFFFFF;
 $blue-green: #18B0A8;
 $green: #18BF69;
 $red: #FF5A5F;
+$red-100: #FDEEEE;
 $yellow: #FFD600;
 $gold: #AE9301;
 $gold-100: #F7F4E6;
@@ -90,25 +91,24 @@ $font-family-en: 'Roboto', 'Noto Sans JP', sans-serif;
 // `md`: iPad幅（ポートレート・縦）
 // `lg`: iPad幅（ランドスケープ・横）
 // `xl`: デスクトップ想定
-$breakpoint-up: (
-  'sm': 'print, screen and (min-width: 300px)',
-  'md': 'print, screen and (min-width: 768px)',
-  'lg': 'print, screen and (min-width: 1024px)',
-  'xl': 'print, screen and (min-width: 1440px)',
+$breakpoints: (
+  'sm': '300px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1440px',
 ) !default;
 
 @mixin mq-up($breakpoint) {
-  @if map-has-key($breakpoint-up, $breakpoint) {
-    @media #{inspect(map-get($breakpoint-up, $breakpoint))} {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media print, screen and (min-width: #{map-get($breakpoints, $breakpoint)}) {
       @content;
     }
   } @else {
     @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-    + "Please make sure it is defined in `$breakpoint-up` map.";
+    + "Please make sure it is defined in `$breakpoints` map.";
   }
 }
 
-
 // ==========================================================================
 // Layout
 // ==========================================================================