shopping-list/style.css at main · SanTheDeveloper/shopping-list · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/* ? Import Google Fonts Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

/* ? Resetting default styles for all elements */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ? Setting styles for the body element */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #f5f5f5;
}

/* ? Setting styles for the header element */
header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

/* ? Setting styles for the h1 element within the header */
header h1 {
  font-weight: 300;
  margin-left: 10px;
}

/* ? Setting styles for the container element */
.container {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
}

/* ? Adding a class for the edit mode */
.edit-mode {
  color: #ccc;
}

/** Form & Input */
/* ? Setting styles for the form input element */
.form-input {
  width: 100%;
  font-size: 18px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

/* ? Setting styles for the form input filter element */
.form-input-filter {
  margin-top: 20px;
  width: 100%;
  font-size: 18px;
  margin-bottom: 20px;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  outline: none;
}

/** Buttons */
/* ? Setting styles for the buttons */
.btn {
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

/* ? Setting styles for the hover effect on buttons */
.btn:hover {
  background-color: #444;
}

/* ? Setting styles for the link button */
.btn-link {
  font-size: 16px;
  background-color: transparent;
  color: #333;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ? Setting styles for the clear button */
.btn-clear {
  margin-top: 20px;
  width: 100%;
  font-size: 16px;
  background-color: transparent;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

/* ? Setting styles for the hover effect on clear button */
.btn-clear:hover {
  background-color: #f1f1f1;
}

/* ? Setting styles for the text with red color */
.text-red {
  color: red;
}

/** Items */
/* ? Setting styles for the items section */
.items {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

/* ? Setting styles for each item in the items list */
.items li {
  display: flex;
  justify-content: space-between;
  width: 45%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 15px;
  margin: 0 5px 20px;
  font-weight: 700;
}

/* ? Responsive styles for items section on smaller screens */
@media (max-width: 500px) {
  .items li {
    width: 100%;
  }
}