FrontEnd Angular - v0.0.1-alpha

2022-09-04 04:22:18 -03:00
parent 9640501195
commit 4a0ff02e2a
116 changed files with 27771 additions and 19001 deletions
--- a/src/app/header/header-popup/login/login.component.css
+++ b/src/app/header/header-popup/login/login.component.css
@@ -0,0 +1,141 @@
+* {
+    margin: 0;
+}
+
+.authentication-container {
+    max-width: 400px;
+}
+
+.authentication-body {
+    justify-content: space-around;
+    display: flex !important;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    height: 200px;
+    width: 100%;
+}
+
+.authentication-body .btn {
+    background-color: #D8291C !important;
+    text-decoration: none;
+    border-radius: 8px;
+    color: #ffffff;
+    font-weight: 500;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    height: 45px;
+    width: 80px;
+}
+
+.authentication-body form {
+    justify-content: space-around;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    height: inherit;
+    display: flex;
+}
+
+.separator-line {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    margin: 30px 0;
+    display: flex;
+    width: 100%;
+}
+
+.line {
+    width: 100%;
+    border-bottom: 3px solid #80808076;
+    border-radius: 50px;
+}
+
+.input-div {
+    display: flex;
+    align-items: center;
+    position: relative;
+    border-bottom: 2px solid #7676769b;
+}
+.input-div:after {
+    content: '';
+    left: 0;
+    right: 0;
+    width: 0;
+    height: 3px;
+    bottom: -2px;
+    margin: 0 auto;
+    position: absolute;
+    background-color: #f44336;
+    border-radius: 15px;
+}
+.input-div:hover:after {
+    width: 100%;
+    transition: .4s;
+    overflow: hidden;
+}
+
+.input-div > .form-control, .input-div > .form-control:focus {
+    border: none;
+    border-color: inherit;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.input-div > .form-control::placeholder,
+.input-div > .form-control,
+.input-div > .input-div-icon {
+    font-size: 17px;
+    color: #767676;
+}
+.input-div >.form-control:-webkit-autofill {
+    -webkit-text-fill-color: #767676;
+    box-shadow: 0 0 0px 1000px #ffffff inset;
+    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
+}
+
+.input-div:hover > .form-control::placeholder,
+.input-div:hover > .input-div-icon {
+    color: #D8291C;
+    transition: .3s;
+}
+.input-div:hover > .form-control::placeholder {
+    font-weight: 500;
+    transition: .3s;
+}
+
+@media (min-width:767px) {
+
+    .authentication-container {
+        min-width: 630px;
+    }
+    
+    .authentication-body {
+        all: unset;
+        justify-content: space-around;
+        width: calc(49.7% - 60px);
+        flex-direction: column;
+        align-items: center;
+        display: flex;
+        height: 200px;
+        padding: 0;
+    }
+
+    .separator-line {
+        all: unset;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+        margin: 0px 60px;
+        display: flex;
+    }
+
+    .line {
+        all: unset;
+        border-right: 2px solid #80808076;
+        height: 100%;
+    }
+
+}