reorganize styles

DanZalov · Mar 10, 2024 · 6f857aa · 6f857aa
1 parent 51c3047
commit 6f857aa
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -12,62 +12,47 @@ body {
   padding: 20px;
 }
 
-ul {
-  list-style: none;
-  padding: 0;
-}
-
-li {
-  display: flex;
-  margin-bottom: 10px;
-}
-
-hr {
-  margin: 10px 0px;
-}
-
 .task {
   display: flex;
   width: 100%;
 }
 
-span,
-input[type='text'] {
+.myinput {
   padding: 5px;
   margin-right: 10px;
   border-radius: 5px;
   border: 1px solid #ccc;
   flex: 1;
 }
 
-button {
+.mybtn {
   padding: 8px 15px;
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
-button.primary {
+.primary {
   background-color: #007bff;
 }
 
-button.danger {
+.danger {
   background-color: #ff0011;
 }
 
-button.green {
+.green {
   background-color: #00ff37;
 }
 
-button.primary:hover {
+.primary:hover {
   background-color: #0056b3;
 }
 
-button.danger:hover {
+.danger:hover {
   background-color: #bc020f;
 }
 
-button.green:hover {
+.green:hover {
   background-color: #02cf2e;
 }
diff --git a/src/components/TaskForm.vue b/src/components/TaskForm.vue
@@ -36,13 +36,14 @@ function escHandler() {
   <div class="task">
     <input
       type="text"
+      class="myinput"
       v-model="newTitle"
       placeholder="Название задачи"
       @keydown.enter="submitForm"
       @keydown.esc="escHandler"
       required
     />
-    <button type="submit" :class="isNew ? 'primary' : 'green'" @click="submitForm">
+    <button type="submit" class="mybtn" :class="isNew ? 'primary' : 'green'" @click="submitForm">
       {{ isNew ? 'Добавить' : 'Обновить' }}
     </button>
   </div>

diff --git a/src/views/TasksView.vue b/src/views/TasksView.vue
@@ -32,9 +32,9 @@ function openForm(id: string) {
           :taskId="task.id"
           @close="form.show = false"
         />
-        <span v-else @click="openForm(task.id)">{{ task.title }}</span>
+        <span v-else @click="openForm(task.id)" class="myinput">{{ task.title }}</span>
         <button
-          class="danger"
+          class="mybtn danger"
           v-show="!(form.show && form.id === task.id)"
           @click="deleteTask(task.id)"
         >
@@ -44,3 +44,19 @@ function openForm(id: string) {
     </ul>
   </div>
 </template>
+
+<style scoped>
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+hr {
+  margin: 10px 0px;
+}
+</style>