Scribd
Upload
3 views

gdscCSS

The document provides CSS styles for a todo application, including global styles, container settings, and specific styles for todo items, input fields, and buttons. It defines hover effects for various button types such as regular, link, delete, and edit buttons. Additionally, it includes styles for an edit component with similar layout properties as the main container.

Uploaded by

Shreyas Nagarkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

gdscCSS

The document provides CSS styles for a todo application, including global styles, container settings, and specific styles for todo items, input fields, and buttons. It defines hover effects for various button types such as regular, link, delete, and edit buttons. Additionally, it includes styles for an edit component with similar layout properties as the main container.

Uploaded by

Shreyas Nagarkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

/* Resetting defaults */

body,
h1,
ul {
margin: 0;
padding: 0;
}

/* Global styles */
body {
font-family: Arial, sans-serif;
}

.container {
max-width: 600px;
margin: 20px auto;
padding: 0 20px;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

/* Todo item styles */


li {
margin-bottom: 20px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
display: flex; /* Make list items flex containers */
align-items: center; /* Vertically center items */
justify-content: space-between; /* Space between todo text and buttons */
}

/* Input field styles */


.input-field {
width: calc(100% - 22px); /* Adjusting for padding and borders */
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

/* Regular button styles */


.button {
background-color: #4caf50;
color: white;
padding: 6px 12px; /* Reduced padding */
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}

/* Link button styles */


.link-button {
text-decoration: none;
background-color: #008cba;
color: white;
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
display: block;
text-align: center;
margin-top: 10px;
}

.link-button:hover {
background-color: #0077a3;
}

/* Delete button styles */


.delete-button {
background-color: #ff6347; /* Indian Red */
}

.delete-button:hover {
background-color: #d9534f; /* Red */
}

/* Edit button styles */


.edit-button {
background-color: #1e90ff; /* Dodger Blue */
}

.edit-button:hover {
background-color: #007bff; /* Darker Dodger Blue */
}

/* EditTodo component styles */


.edit-container {
max-width: 600px;
margin: 20px auto;
padding: 0 20px;
}

.edit-container h1 {
text-align: center;
margin-bottom: 20px;
}

You might also like