project done

2025-10-13 00:02:52 +00:00 · 2021-12-08 12:18:51 -03:00
commit 9c851f711a
6 changed files with 494 additions and 0 deletions
--- a/style.scss
+++ b/style.scss
@@ -0,0 +1,199 @@
+@mixin applyInputStyles($backgroundColor) {
+
+    background-color: $backgroundColor;
+    border: none;
+
+    border: 1px solid adjust-color($color: $backgroundColor, $saturation: 100%);
+    border-radius: 2px;
+}
+
+body {
+
+    margin: 0;
+    padding: 0;
+
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    min-width: 300px;
+}
+
+header {
+    
+    margin: 0;
+    padding: 0;
+
+    h1 {
+        
+        background-color: #0099ff;
+
+        margin: 0;
+        padding-top: 3vh;
+        padding-bottom: 3vh;
+
+        color: #fff;
+        text-align: center;
+
+        user-select: none;
+        
+    }
+}
+
+#root {
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+
+    #library {
+        
+        min-height: 50vh;
+
+        width: 100%;
+        max-width: calc(250px * 4);
+        padding: 5vh 5vw;
+        
+        display: flex;
+        justify-content: space-around;
+
+        flex-wrap: wrap;
+
+        .book {
+
+            background-color: #E3FDFD;
+            
+            font-family: 'Times New Roman', Times, serif;
+
+            width: 236px;
+            padding: 123px 0vw;
+
+            display: flex;
+            flex-direction: column;
+            
+            align-items: center;
+
+            margin-bottom: 5vh;
+
+            @mixin hxStyles() {
+
+                margin: 0;
+                text-align: center;
+            }
+
+            h3 {
+                
+                @include hxStyles()
+            }
+
+            h5 {
+
+                @include hxStyles();
+
+                margin-bottom: 2vh;
+            }
+
+            h4 {
+                
+                @include hxStyles();
+
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+                
+                margin-bottom: 1vh;
+            }
+
+            button {
+
+                height: 3vh;
+                width: 80%;
+
+                max-width: 126px;
+
+                margin-top: 0.5vh;
+                user-select: none;
+
+                &.delete {
+
+                    @include applyInputStyles(#F38181)
+                }
+
+                &.not-readed {
+
+                    @include applyInputStyles(#FCE38A)
+                }
+
+                &.readed {
+
+                    @include applyInputStyles(#95E1D3)
+                }
+            }
+        }
+    }
+
+    .add-new-book {
+
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+
+        h2 {
+
+            width: 70%;
+
+            padding-bottom: 1vh;
+            text-align: center;
+
+            border-bottom: 1px solid #393E46;
+
+            user-select: none;
+        }
+
+
+        form {
+
+            display: flex;
+            flex-direction: column;
+
+            input {
+
+                width: 40vw;
+                height: 4vh;
+
+                margin-bottom: 1vh;
+
+                box-sizing: content-box;
+                outline: none;
+                
+                padding: 0;
+                
+                color: #fff;
+
+                &::placeholder {
+
+                    color: rgb(201, 201, 201);
+                    user-select: none;
+                }
+            }
+
+            input[type="text"] {
+
+                @include applyInputStyles(#222831) 
+            }
+
+            input[type="number"] {
+
+                @include applyInputStyles(#393E46)
+            }
+
+            input[type="submit"] {
+
+                @include applyInputStyles(#00ADB5)
+            }
+        }
+    }
+}
+
+footer {
+
+    padding: 5vh 0vw 2vh 2vw;
+}