└── App.css


/App.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
  2 | :root {
  3 |   --primaryColor: #f15025;
  4 |   --mainWhite: #fff;
  5 |   --mainBlack: #222;
  6 |   --mainGrey: #9e9e9e;
  7 |   --mainRed: #d50000;
  8 |   --mainGreen: #4caf50;
  9 | }
 10 | * {
 11 |   margin: 0;
 12 |   box-sizing: border-box;
 13 | }
 14 | body {
 15 |   background: var(--mainGrey);
 16 |   color: var(--mainBlack);
 17 |   font-family: "Roboto", sans-serif;
 18 | }
 19 | h1 {
 20 |   text-align: center;
 21 |   text-transform: capitalize;
 22 |   margin: 2rem 0;
 23 |   color: var(--mainWhite);
 24 |   letter-spacing: 5px;
 25 | }
 26 | .App {
 27 |   margin: 0 auto;
 28 |   max-width: 1280px;
 29 |   width: 90%;
 30 |   background: var(--mainWhite);
 31 |   padding-bottom: 2rem;
 32 |   border-radius: 2px;
 33 | }
 34 | .form-center {
 35 |   display: flex;
 36 |   padding: 0 1rem;
 37 | }
 38 | .form-group {
 39 |   padding: 1rem 0.75rem;
 40 |   flex: 0 0 50%;
 41 | }
 42 | label {
 43 |   display: block;
 44 |   color: var(--mainGrey);
 45 |   font-size: 1rem;
 46 |   text-transform: capitalize;
 47 | }
 48 | 
 49 | .form-control {
 50 |   background-color: transparent;
 51 |   border: none;
 52 |   border-bottom: 1px solid var(--mainGrey);
 53 |   border-radius: 0;
 54 |   outline: none;
 55 |   height: 3rem;
 56 |   width: 100%;
 57 |   font-size: 16px;
 58 |   margin: 0 0 8px 0;
 59 |   padding: 0;
 60 | }
 61 | .btn {
 62 |   text-decoration: none;
 63 |   color: var(--mainWhite);
 64 |   background-color: var(--primaryColor);
 65 |   text-align: center;
 66 |   letter-spacing: 0.5px;
 67 |   font-size: 14px;
 68 |   outline: 0;
 69 |   border: none;
 70 |   border-radius: 2px;
 71 |   display: block;
 72 |   height: 36px;
 73 |   line-height: 36px;
 74 |   padding: 0 16px;
 75 |   text-transform: uppercase;
 76 |   margin: 0 auto;
 77 |   cursor: pointer;
 78 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 79 |   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 80 |   display: flex;
 81 |   align-items: center;
 82 | }
 83 | .btn:hover {
 84 |   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 85 | }
 86 | .btn-icon {
 87 |   margin-left: 0.75rem;
 88 |   font-size: 1.2rem;
 89 | }
 90 | .list {
 91 |   margin: 2rem 0.75rem 0 0.75rem;
 92 |   list-style-type: none;
 93 |   border: none;
 94 |   padding: 0;
 95 | }
 96 | .item {
 97 |   background-color: var(--mainWhite);
 98 |   line-height: 1.5rem;
 99 |   padding: 10px 20px;
100 |   margin-bottom: 1rem;
101 |   border: 1px solid #e0e0e0;
102 |   display: flex;
103 |   justify-content: space-between;
104 |   transition: all 0.3s linear;
105 | }
106 | .item:hover {
107 |   box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
108 |   transform: scale(1.05);
109 | }
110 | .info {
111 |   flex: 0 0 60%;
112 |   display: flex;
113 |   justify-content: space-between;
114 | }
115 | .expense {
116 |   margin-right: 2rem;
117 |   text-transform: capitalize;
118 | }
119 | .amount {
120 |   font-weight: 300;
121 |   font-size: 1rem;
122 |   color: var(--mainWhite);
123 |   background-color: var(--primaryColor);
124 |   border-radius: 2px;
125 |   padding: 1px 3px;
126 | }
127 | .clear-btn,
128 | .edit-btn {
129 |   background: none;
130 |   border: none;
131 |   font-size: 1.2rem;
132 |   outline: none;
133 |   cursor: pointer;
134 | }
135 | .clear-btn {
136 |   color: var(--mainRed);
137 | }
138 | .edit-btn {
139 |   color: var(--mainGreen);
140 | }
141 | .total {
142 |   font-weight: 300;
143 |   color: var(--mainWhite);
144 |   background-color: var(--primaryColor);
145 |   border-radius: 2px;
146 |   padding: 2px 5px;
147 | }
148 | .alert {
149 |   padding: 0.75rem 1.25rem;
150 |   color: var(--mainWhite);
151 |   text-align: center;
152 |   text-transform: capitalize;
153 |   width: 90%;
154 |   margin: 2rem auto 0 auto;
155 |   border-radius: 2px;
156 |   text-transform: capitalize;
157 | }
158 | .alert-danger {
159 |   background: var(--mainRed);
160 | }
161 | .alert-success {
162 |   background: var(--mainGreen);
163 | }
164 | @media screen and (min-width: 601px) {
165 |   .App,
166 |   .list,
167 |   .alert {
168 |     width: 85%;
169 |   }
170 | 
171 |   .list {
172 |     margin: 2rem auto 0 auto;
173 |   }
174 | }
175 | @media screen and (min-width: 993px) {
176 |   .App,
177 |   .list,
178 |   .alert {
179 |     width: 70%;
180 |   }
181 |   .list {
182 |     margin: 2rem auto 0 auto;
183 |   }
184 |   .info {
185 |     flex: 0 0 50%;
186 |   }
187 | }
188 | 


--------------------------------------------------------------------------------