記述をscssに変更

Im-not-yoneda · Nov 19, 2023 · c356160 · c356160
1 parent 2998853
commit c356160
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 142 deletions.
diff --git a/src/pages/editList.scss b/src/pages/editList.scss
@@ -3,15 +3,20 @@
 .edit-list {
 	width: 1000px;
 	margin: 0 auto;
-}
-
-.edit-list-form {
-	color: #555555;
-}
-
-.edit-list-title {
-	width: 300px;
-	margin-bottom: 25px;
+	&-form {
+		color: #555555;
+	}
+	&-title {
+		width: 300px;
+		margin-bottom: 25px;
+	}
+	&-button {
+		background-color: #242f9b;
+		color: #ffffff;
+		width: 80px;
+		height: 40px;
+		border-radius: 5px;
+	}
 }
 
 .delete-list-button {
@@ -23,14 +28,6 @@
 	border-radius: 5px;
 }
 
-.edit-list-button {
-	background-color: #242f9b;
-	color: #ffffff;
-	width: 80px;
-	height: 40px;
-	border-radius: 5px;
-}
-
 .error-message {
 	color: #ff3333;
 }
diff --git a/src/pages/editTask.scss b/src/pages/editTask.scss
@@ -3,16 +3,21 @@
 .edit-task {
 	width: 1000px;
 	margin: 0 auto;
-}
-
-.edit-task-form {
-	color: #555555;
-}
-
-.edit-task-title,
-.edit-task-detail {
-	width: 300px;
-	margin-bottom: 25px;
+	&-form {
+		color: #555555;
+	}
+	&-button {
+		background-color: #242f9b;
+		color: #ffffff;
+		width: 80px;
+		height: 40px;
+		border-radius: 5px;
+	}
+	&-title,
+	&-detail {
+		width: 300px;
+		margin-bottom: 25px;
+	}
 }
 
 .delete-task-button {
@@ -24,14 +29,6 @@
 	border-radius: 5px;
 }
 
-.edit-task-button {
-	background-color: #242f9b;
-	color: #ffffff;
-	width: 80px;
-	height: 40px;
-	border-radius: 5px;
-}
-
 .error-message {
 	color: #ff3333;
 }
diff --git a/src/pages/home.scss b/src/pages/home.scss
@@ -3,31 +3,29 @@
 	list-style: none;
 	width: 1000px;
 }
-
-.list-header {
-	display: flex;
-	justify-content: space-between;
-}
-
-.list-menu {
-	text-align: right;
-}
-
-.list-tab {
-	list-style: none;
-	display: flex;
-	overflow-x: auto;
-}
-
-.list-tab-item {
-	flex-shrink: 0;
-	width: 100px;
-	padding: 0 25px;
-	text-overflow: normal;
-	margin-right: 5px;
-	border: solid 1px #242f9b;
-	justify-content: center;
-	align-items: center;
+.list {
+	&-header {
+		display: flex;
+		justify-content: space-between;
+	}
+	&-menu {
+		text-align: right;
+	}
+	&-tab {
+		list-style: none;
+		display: flex;
+		overflow-x: auto;
+		&-item {
+			flex-shrink: 0;
+			width: 100px;
+			padding: 0 25px;
+			text-overflow: normal;
+			margin-right: 5px;
+			border: solid 1px #242f9b;
+			justify-content: center;
+			align-items: center;
+		}
+	}
 }
 
 .active {
@@ -37,11 +35,10 @@
 
 .tasks {
 	margin-top: 25px;
-}
-
-.tasks-header {
-	display: flex;
-	justify-content: space-between;
+	&-header {
+		display: flex;
+		justify-content: space-between;
+	}
 }
 
 .task-item {
@@ -52,25 +49,23 @@
 	padding-left: 25px;
 	font-size: large;
 	border: solid 1px #ffffff;
-}
-
-.task-item-link {
-	display: block;
-	width: 100%;
-	height: 100%;
-	text-decoration: none;
-	color: #000000;
+	&-link {
+		display: block;
+		width: 100%;
+		height: 100%;
+		text-decoration: none;
+		color: #000000;
+	}
 }
 
 .error-message {
 	color: #ff3333;
 }
 
-.display-select-wrapper {
-	width: 100px;
-	margin: 0 0 25px auto;
-}
-
 .display-select {
 	width: 100%;
+	&-wrapper {
+		width: 100px;
+		margin: 0 0 25px auto;
+	}
 }
diff --git a/src/pages/newList.scss b/src/pages/newList.scss
@@ -3,21 +3,18 @@
 .new-list {
 	width: 1000px;
 	margin: 0 auto;
-}
-
-.new-list-form {
-	color: #555555;
-}
-
-.new-list-title {
-	width: 300px;
-	margin-bottom: 25px;
-}
-
-.new-list-button {
-	background-color: #242f9b;
-	color: #ffffff;
-	width: 80px;
-	height: 40px;
-	border-radius: 5px;
+	&-form {
+		color: #555555;
+	}
+	&-title {
+		width: 300px;
+		margin-bottom: 25px;
+	}
+	&-button {
+		background-color: #242f9b;
+		color: #ffffff;
+		width: 80px;
+		height: 40px;
+		border-radius: 5px;
+	}
 }
diff --git a/src/pages/newTask.scss b/src/pages/newTask.scss
@@ -3,29 +3,25 @@
 .new-task {
 	width: 1000px;
 	margin: 0 auto;
-}
-
-.new-task-form {
-	color: #555555;
-}
-
-.new-task-select-list,
-.new-task-title,
-.new-task-detail {
-	width: 300px;
-	margin-bottom: 25px;
-}
-
-.new-task-detail {
-	height: 200px;
-}
-
-.new-task-button {
-	background-color: #242f9b;
-	color: #ffffff;
-	width: 80px;
-	height: 40px;
-	border-radius: 5px;
+	&-form {
+		color: #555555;
+	}
+	&-detail {
+		height: 200px;
+	}
+	&-button {
+		background-color: #242f9b;
+		color: #ffffff;
+		width: 80px;
+		height: 40px;
+		border-radius: 5px;
+	}
+	&-select-list,
+	&-title,
+	&-detail {
+		width: 300px;
+		margin-bottom: 25px;
+	}
 }
 
 .error-message {

diff --git a/src/pages/signUp.scss b/src/pages/signUp.scss
@@ -3,10 +3,17 @@
 .signup {
 	width: 500px;
 	margin: 0 auto;
-}
-.signup-form {
-	margin: 25px 0;
-	color: #555555;
+	&-form {
+		margin: 25px 0;
+		color: #555555;
+	}
+	&-button {
+		background-color: #242f9b;
+		color: #ffffff;
+		width: 100px;
+		height: 40px;
+		border-radius: 5px;
+	}
 }
 
 .email-input,
@@ -18,14 +25,6 @@
 	margin-bottom: 25px;
 }
 
-.signup-button {
-	background-color: #242f9b;
-	color: #ffffff;
-	width: 100px;
-	height: 40px;
-	border-radius: 5px;
-}
-
 .error-message {
 	color: #ff3333;
 }
diff --git a/src/pages/signin.scss b/src/pages/signin.scss
@@ -3,10 +3,16 @@
 .signin {
 	width: 500px;
 	margin: 0 auto;
-}
-
-.signin-form {
-	margin: 25px 0;
+	&-form {
+		margin: 25px 0;
+	}
+	&-button {
+		background-color: #242f9b;
+		color: #ffffff;
+		width: 100px;
+		height: 40px;
+		border-radius: 5px;
+	}
 }
 
 .email-label,
@@ -22,14 +28,6 @@
 	margin-bottom: 25px;
 }
 
-.signin-button {
-	background-color: #242f9b;
-	color: #ffffff;
-	width: 100px;
-	height: 40px;
-	border-radius: 5px;
-}
-
 .error-message {
 	color: #ff3333;
 }