テキストをマテリアルチックに。

diff --git a/src/components/todo.vue b/src/components/todo.vue
index 48a10c5..be84df4 100644 (file)
--- a/src/components/todo.vue
+++ b/src/components/todo.vue
@@ -10,7 +10,7 @@
     
     
       <label class="inline-block align-middle w-10/12" :for="data.id">
-        <input class="bg-transparent border-b block border-gray-500 mb-2 text-gray-900 pb-1 w-full"
+        <input class="bg-transparent border-b block border-gray-500 mb-2 text-gray-900 focus:outline-none focus:border-indigo-500 pb-1 w-full"
               placeholder="やること/やりたいこと" 
               v-model="data.name"
               @change="onTextChange(data)"/>

diff --git a/src/components/todoApp.vue b/src/components/todoApp.vue
index 6ace4c2..662be65 100644 (file)
--- a/src/components/todoApp.vue
+++ b/src/components/todoApp.vue
@@ -7,7 +7,14 @@
               list="todo_header" 
               v-model="titleName" 
               @input="onHeaderChange"
-              class="form-select w-11/12 px-3 py-2 mb-1 border-2 border-gray-200 rounded-md focus:outline-none focus:border-indigo-500 transition-colors cursor-pointer text-gray-900" />
+              class="w-10/12 px-3 py-2 mb-1 border-b border-gray-500 focus:outline-none focus:border-indigo-500 transition-colors cursor-pointer text-gray-900" />
+        <button class="bg-gray-200 w-10 h-10 p-2 ml-0 text-sm font-bold tracking-wider text-gray hover:bg-gray-400 inline-flex items-center justify-center"
+          v-if="selectedOption == null"
+          @click="addHeader">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-check" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
+          </svg>
+        </button>
         <button class="bg-blue-500 w-10 h-10 p-3 ml-3 text-sm font-bold tracking-wider text-white rounded-full hover:bg-red-600 inline-flex items-center justify-center"
           v-if="selectedOption == null"
           @click="addHeader">