From 220a6223f9b145ea8007694413811e31240e80ee Mon Sep 17 00:00:00 2001 From: VitorCarvalho67 Date: Thu, 23 May 2024 18:00:05 -0300 Subject: [PATCH] Move scss from vue files to scss files Co-authored-by: Daniel-Alvarenga --- client/src/components/Cards.vue | 142 +------- client/src/components/ContactUs.vue | 88 +---- client/src/components/Footer.vue | 38 +-- client/src/components/Header.vue | 92 +----- client/src/components/Slides.vue | 129 +------- client/src/scss/App.scss | 8 + client/src/scss/components/Cards.scss | 140 ++++++++ client/src/scss/components/ContactUs.scss | 86 +++++ client/src/scss/components/Footer.scss | 36 ++ client/src/scss/components/Header.scss | 175 ++++++++++ client/src/scss/components/Slides.scss | 125 +++++++ client/src/scss/views/admin/Dashboard.scss | 11 + client/src/scss/views/admin/Login.scss | 203 ++++++++++++ .../scss/views/admin/RegisterCoordenador.scss | 0 .../src/scss/views/admin/RegisterCurso.scss | 0 .../scss/views/admin/RegisterFuncionario.scss | 0 .../scss/views/admin/RegisterProfessor.scss | 0 .../src/scss/views/admin/RegisterTurma.scss | 0 client/src/scss/views/aluno/Complete.scss | 204 ++++++++++++ client/src/scss/views/aluno/Home.scss | 11 + client/src/scss/views/aluno/Login.scss | 204 ++++++++++++ client/src/scss/views/aluno/Profile.scss | 5 + client/src/scss/views/aluno/Recovery.scss | 171 ++++++++++ client/src/scss/views/aluno/Register.scss | 204 ++++++++++++ .../scss/views/aluno/ValidateRecovery.scss | 310 +++++++++++++++++ .../scss/views/aluno/ValidateRegister.scss | 226 +++++++++++++ client/src/scss/views/empresa/Dashboard.scss | 11 + client/src/scss/views/empresa/Login.scss | 192 +++++++++++ client/src/scss/views/empresa/Recovery.scss | 171 ++++++++++ client/src/scss/views/empresa/Register.scss | 204 ++++++++++++ client/src/scss/views/empresa/Validate.scss | 226 +++++++++++++ .../scss/views/empresa/ValidateRecovery.scss | 310 +++++++++++++++++ .../src/scss/views/funcionario/Dashboard.scss | 11 + client/src/scss/views/funcionario/Init.scss | 173 ++++++++++ client/src/scss/views/funcionario/Login.scss | 206 ++++++++++++ .../src/scss/views/funcionario/Recovery.scss | 171 ++++++++++ .../src/scss/views/funcionario/Validate.scss | 305 +++++++++++++++++ .../views/funcionario/ValidateRecovery.scss | 310 +++++++++++++++++ .../src/scss/views/professor/Dashboard.scss | 11 + client/src/scss/views/professor/Init.scss | 154 +++++++++ client/src/scss/views/professor/Login.scss | 206 ++++++++++++ client/src/scss/views/professor/Profile.scss | 5 + client/src/scss/views/professor/Recovery.scss | 171 ++++++++++ client/src/scss/views/professor/Validate.scss | 305 +++++++++++++++++ .../views/professor/ValidateRecovery.scss | 310 +++++++++++++++++ client/src/services/api.js | 2 +- client/src/views/admin/Dashboard.vue | 13 +- client/src/views/admin/Login.vue | 204 +----------- .../src/views/admin/RegisterCoordenador.vue | 4 +- client/src/views/admin/RegisterCurso.vue | 4 +- .../src/views/admin/RegisterFuncionario.vue | 4 +- client/src/views/admin/RegisterProfessor.vue | 4 +- client/src/views/admin/RegisterTurma.vue | 4 +- client/src/views/aluno/Complete.vue | 206 +----------- client/src/views/aluno/Home.vue | 13 +- client/src/views/aluno/Login.vue | 206 +----------- client/src/views/aluno/Profile.vue | 8 +- client/src/views/aluno/Recovery.vue | 173 +--------- client/src/views/aluno/Register.vue | 206 +----------- client/src/views/aluno/ValidateRecovery.vue | 311 +----------------- client/src/views/aluno/ValidateRegister.vue | 227 +------------ client/src/views/empresa/Dashboard.vue | 12 +- client/src/views/empresa/Login.vue | 193 +---------- client/src/views/empresa/Recovery.vue | 172 +--------- client/src/views/empresa/Register.vue | 205 +----------- client/src/views/empresa/Validate.vue | 227 +------------ client/src/views/empresa/ValidateRecovery.vue | 311 +----------------- client/src/views/funcionario/Dashboard.vue | 12 +- client/src/views/funcionario/Init.vue | 174 +--------- client/src/views/funcionario/Login.vue | 207 +----------- client/src/views/funcionario/Recovery.vue | 173 +--------- client/src/views/funcionario/Validate.vue | 306 +---------------- .../views/funcionario/ValidateRecovery.vue | 311 +----------------- client/src/views/professor/Dashboard.vue | 12 +- client/src/views/professor/Init.vue | 156 +-------- client/src/views/professor/Login.vue | 207 +----------- client/src/views/professor/Profile.vue | 7 +- client/src/views/professor/Recovery.vue | 172 +--------- client/src/views/professor/Validate.vue | 306 +---------------- .../src/views/professor/ValidateRecovery.vue | 311 +----------------- 80 files changed, 5624 insertions(+), 5499 deletions(-) create mode 100644 client/src/scss/components/Cards.scss create mode 100644 client/src/scss/components/ContactUs.scss create mode 100644 client/src/scss/components/Footer.scss create mode 100644 client/src/scss/components/Header.scss create mode 100644 client/src/scss/components/Slides.scss create mode 100644 client/src/scss/views/admin/Dashboard.scss create mode 100644 client/src/scss/views/admin/Login.scss create mode 100644 client/src/scss/views/admin/RegisterCoordenador.scss create mode 100644 client/src/scss/views/admin/RegisterCurso.scss create mode 100644 client/src/scss/views/admin/RegisterFuncionario.scss create mode 100644 client/src/scss/views/admin/RegisterProfessor.scss create mode 100644 client/src/scss/views/admin/RegisterTurma.scss create mode 100644 client/src/scss/views/aluno/Complete.scss create mode 100644 client/src/scss/views/aluno/Home.scss create mode 100644 client/src/scss/views/aluno/Login.scss create mode 100644 client/src/scss/views/aluno/Profile.scss create mode 100644 client/src/scss/views/aluno/Recovery.scss create mode 100644 client/src/scss/views/aluno/Register.scss create mode 100644 client/src/scss/views/aluno/ValidateRecovery.scss create mode 100644 client/src/scss/views/aluno/ValidateRegister.scss create mode 100644 client/src/scss/views/empresa/Dashboard.scss create mode 100644 client/src/scss/views/empresa/Login.scss create mode 100644 client/src/scss/views/empresa/Recovery.scss create mode 100644 client/src/scss/views/empresa/Register.scss create mode 100644 client/src/scss/views/empresa/Validate.scss create mode 100644 client/src/scss/views/empresa/ValidateRecovery.scss create mode 100644 client/src/scss/views/funcionario/Dashboard.scss create mode 100644 client/src/scss/views/funcionario/Init.scss create mode 100644 client/src/scss/views/funcionario/Login.scss create mode 100644 client/src/scss/views/funcionario/Recovery.scss create mode 100644 client/src/scss/views/funcionario/Validate.scss create mode 100644 client/src/scss/views/funcionario/ValidateRecovery.scss create mode 100644 client/src/scss/views/professor/Dashboard.scss create mode 100644 client/src/scss/views/professor/Init.scss create mode 100644 client/src/scss/views/professor/Login.scss create mode 100644 client/src/scss/views/professor/Profile.scss create mode 100644 client/src/scss/views/professor/Recovery.scss create mode 100644 client/src/scss/views/professor/Validate.scss create mode 100644 client/src/scss/views/professor/ValidateRecovery.scss diff --git a/client/src/components/Cards.vue b/client/src/components/Cards.vue index ad80b1d..5130c8e 100644 --- a/client/src/components/Cards.vue +++ b/client/src/components/Cards.vue @@ -129,146 +129,6 @@ export default { } }; - \ No newline at end of file diff --git a/client/src/components/ContactUs.vue b/client/src/components/ContactUs.vue index fa2ebba..c59edb1 100644 --- a/client/src/components/ContactUs.vue +++ b/client/src/components/ContactUs.vue @@ -51,92 +51,6 @@ export default defineComponent({ } }); - \ No newline at end of file diff --git a/client/src/components/Footer.vue b/client/src/components/Footer.vue index 86557de..0269735 100644 --- a/client/src/components/Footer.vue +++ b/client/src/components/Footer.vue @@ -40,42 +40,6 @@ export default defineComponent({ } }); - \ No newline at end of file diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue index fdd07a8..8a3017d 100644 --- a/client/src/components/Header.vue +++ b/client/src/components/Header.vue @@ -48,94 +48,6 @@ export default defineComponent({ } }); - - \ No newline at end of file diff --git a/client/src/components/Slides.vue b/client/src/components/Slides.vue index a2c3294..e1aee4f 100644 --- a/client/src/components/Slides.vue +++ b/client/src/components/Slides.vue @@ -91,133 +91,6 @@ export default defineComponent({ } }); - - - \ No newline at end of file diff --git a/client/src/scss/App.scss b/client/src/scss/App.scss index 322e658..4bc75cf 100644 --- a/client/src/scss/App.scss +++ b/client/src/scss/App.scss @@ -81,6 +81,14 @@ $secondary-color-orange: #deb99b; } } +@mixin prefixer($property, $value) { + #{$property}: $value; + -webkit-#{$property}: $value; + -moz-#{$property}: $value; + -ms-#{$property}: $value; + -o-#{$property}: $value; +} + * { margin: 0; padding: 0; diff --git a/client/src/scss/components/Cards.scss b/client/src/scss/components/Cards.scss new file mode 100644 index 0000000..d218e9c --- /dev/null +++ b/client/src/scss/components/Cards.scss @@ -0,0 +1,140 @@ +.Cards { + background-color: $terciary-color-dark; + padding: 100px; + min-height: 400px; + + @include flex(column, flex-start, center); + + h1, + h2 { + width: 80%; + } + + h1 { + font-size: 2rem; + @include font-inter(700); + color: $secondary-color-orange; + } + + h2 { + font-size: 1.3rem; + @include font-inter(300); + color: $font-color-dark-2; + } + + .wrapper { + max-width: 1100px; + width: 100%; + margin: 80px 0px 20px 0px; + position: relative; + } + + .wrapper i { + height: 100%; + width: 50px; + top: 0px; + cursor: pointer; + position: absolute; + background-image: url('../assets/icons/angulo.png'); + background-position: center; + background-size: 50px; + background-repeat: no-repeat; + filter: invert(100%); + opacity: .7; + transition: transform 0.1s linear; + } + + .wrapper i:first-child { + left: -22px; + } + + .wrapper i:last-child { + right: -22px; + transform: rotatey(180deg); + } + + .wrapper .carousel { + display: grid; + grid-auto-flow: column; + grid-auto-columns: calc((100% / 3) - 12px); + overflow-x: auto; + scroll-snap-type: x mandatory; + gap: 16px; + border-radius: 8px; + scroll-behavior: smooth; + @include prefixer(scrollbar-width, none); + + &::-webkit-scrollbar { + display: none; + } + + &.no-transition { + scroll-behavior: auto; + } + + &.dragging { + scroll-snap-type: none; + scroll-behavior: auto; + + .card { + cursor: grab; + @include prefixer(user-select, none); + } + } + + :where(.card, .img) { + @include flex(column, center, flex-start); + } + + .card { + scroll-snap-align: start; + height: 342px; + list-style: none; + background: $secondary-color-dark; + cursor: pointer; + padding-bottom: 15px; + flex-direction: column; + border-radius: 8px; + + .img { + background: $primary-color-dark; + height: 80%; + width: 100%; + border-radius: 8px 8px 0px 0px; + + img { + width: 140px; + height: 140px; + border-radius: 50%; + object-fit: cover; + } + } + + h2 { + @include font-inter(400); + font-size: 1.5rem; + color: $font-color-dark; + padding: 10px; + } + + span { + @include font-inter(200); + font-size: .9rem; + color: $font-color-dark-2; + padding: 10px; + } + } + } + + @media screen and (max-width: 900px) { + .wrapper .carousel { + grid-auto-columns: calc((100% / 2) - 9px); + } + } + + @media screen and (max-width: 600px) { + .wrapper .carousel { + grid-auto-columns: 100%; + } + } +} \ No newline at end of file diff --git a/client/src/scss/components/ContactUs.scss b/client/src/scss/components/ContactUs.scss new file mode 100644 index 0000000..ef029dd --- /dev/null +++ b/client/src/scss/components/ContactUs.scss @@ -0,0 +1,86 @@ +.contact-us { + background-color: $secondary-color-dark; + @include flex(row, space-around, center); + height: 50vh; + width: 100%; + + .box { + height: 100%; + width: 25%; + @include flex(column, center, flex-start); + @include font-inter(300); + + h1 { + color: $secondary-color-orange; + @include font-inter(500); + font-size: 2rem + } + + p:last-child { + color: $primary-color-orange; + } + + form { + @include flex(column, center, flex-start); + + input[type='text'] { + border: none; + border: solid 1px $font-color-dark; + background-color: transparent; + outline: none; + color: $font-color-dark; + padding: 8px; + min-width: 350px; + border-radius: 3px; + + &:focus { + border: solid 1px $secondary-color-orange; + } + } + + textarea { + border: none; + border: solid 1px $font-color-dark; + background-color: transparent; + outline: none; + color: $font-color-dark; + padding: 8px; + min-width: 350px; + border-radius: 3px; + resize: none; + + &:focus { + border: solid 1px $secondary-color-orange; + } + } + + .btn-box { + width: 100%; + @include flex(column, center, flex-end); + + button { + padding: 8px 25px; + border-radius: 3px; + font-size: 1rem; + color: $font-color-dark; + background-color: $primary-color-orange; + border: none; + border: solid 1px $primary-color-orange; + transition: .1s linear; + cursor: pointer; + + &:hover { + background-color: transparent; + border: solid 1px $primary-color-orange; + color: $primary-color-orange; + } + } + } + } + + * { + margin-top: 10px; + } + } + +} \ No newline at end of file diff --git a/client/src/scss/components/Footer.scss b/client/src/scss/components/Footer.scss new file mode 100644 index 0000000..a72a205 --- /dev/null +++ b/client/src/scss/components/Footer.scss @@ -0,0 +1,36 @@ +footer { + background-color: $primary-color-dark; + height: 25vh; + @include flex(column, space-evenly, center); + @include font-inter(200); + + img { + height: 40px; + } + + nav ul { + margin: 0px; + @include flex(row, center, center); + + li { + margin: 0px 10px; + + a { + margin: 0px; + text-decoration: none; + color: $font-color-dark; + transition: .1s linear; + + &:hover { + color: $secondary-color-orange; + } + } + } + } + + >li { + height: 1px; + background-color: $font-color-dark; + width: 90%; + } +} \ No newline at end of file diff --git a/client/src/scss/components/Header.scss b/client/src/scss/components/Header.scss new file mode 100644 index 0000000..6fb01b6 --- /dev/null +++ b/client/src/scss/components/Header.scss @@ -0,0 +1,175 @@ +header { + background-color: transparent; + padding: 10px 80px; + height: 80px; + @include flex(row, space-between, center); + background-color: $secondary-color-dark; + + div { + width: 100px; + + img { + height: 100%; + width: 100%; + @include flex(row, center, center); + } + } + + nav { + >ul { + @include flex(row, center, center); + list-style-type: none; + + li a { + margin-inline: 10px; + text-decoration: none; + text-transform: uppercase; + color: $font-color-dark; + font-size: .8rem; + @include flex(column, center, flex-start); + @include font-inter(400); + @include line; + } + + li:nth-child(2) { + cursor: pointer; + } + + >li:last-child a { + background-color: $primary-color-orange; + padding: 10px 20px; + border-radius: 20px; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + transition: .1s linear; + @include line; + @include flex-center; + + &:after { + height: 0; + } + + &:hover { + background-color: transparent; + header { + background-color: transparent; + padding: 10px 80px; + height: 80px; + @include flex(row, space-between, center); + background-color: $secondary-color-dark; + + div { + width: 100px; + + img { + height: 100%; + width: 100%; + @include flex(row, center, center); + } + } + + nav { + >ul { + @include flex(row, center, center); + list-style-type: none; + + li a { + margin-inline: 10px; + text-decoration: none; + text-transform: uppercase; + color: $font-color-dark; + font-size: .8rem; + @include flex(column, center, flex-start); + @include font-inter(400); + @include line; + } + + li:nth-child(2) { + cursor: pointer; + } + + >li:last-child a { + background-color: $primary-color-orange; + padding: 10px 20px; + border-radius: 20px; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + transition: .1s linear; + @include line; + @include flex-center; + + &:after { + height: 0; + } + + &:hover { + background-color: transparent; + border: solid 1px $primary-color-orange; + color: $primary-color-orange; + } + } + } + + div { + position: absolute; + margin-top: 10px; + background-color: $primary-color-dark; + @include flex(column, center, flex-start); + @include font-inter(200); + border-radius: 5px; + + ul { + list-style-type: none; + padding: 0; + + li { + padding: 10px 0px; + color: $font-color-dark; + cursor: pointer; + + a { + font-size: .7rem; + + &:after { + height: 0; + } + } + } + } + } + } +} border: solid 1px $primary-color-orange; + color: $primary-color-orange; + } + } + } + + div { + position: absolute; + margin-top: 10px; + background-color: $primary-color-dark; + @include flex(column, center, flex-start); + @include font-inter(200); + border-radius: 5px; + + ul { + list-style-type: none; + padding: 0; + + li { + padding: 10px 0px; + color: $font-color-dark; + cursor: pointer; + + a { + font-size: .7rem; + + &:after { + height: 0; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/components/Slides.scss b/client/src/scss/components/Slides.scss new file mode 100644 index 0000000..0147197 --- /dev/null +++ b/client/src/scss/components/Slides.scss @@ -0,0 +1,125 @@ +section { + padding: 30px; + background-color: $terciary-color-dark; + @include flex(row-reverse, space-around, center); +} + +.box { + width: 30%; + height: 100%; + @include flex(column, center, center); + @include font-inter(400); + + * { + margin: 20px 0; + } + + .info { + @include flex(column, center, flex-start); + width: 70%; + } + + h1 { + color: $secondary-color-orange; + @include font-inter(500); + } + + p { + width: 70%; + } + + a { + @include color($secondary-color-dark, $primary-color-orange); + border: solid 1px $primary-color-orange; + transition: .1s linear; + padding: 10px 20px; + border-radius: 20px; + text-decoration: none; + + &:hover { + background-color: transparent; + border: solid 1px $primary-color-orange; + color: $primary-color-orange; + } + } +} + +.carrossel { + position: relative; + width: 50%; + height: 70vh; + @include font-inter(400); + @include flex(column, center, center); + border-radius: 20px; + + .slides { + width: 100%; + height: 100%; + @include flex(column, center, center); + + .slide { + width: 100%; + height: 100%; + @include flex(row, center, center); + position: absolute; + opacity: 0; + transition: opacity 0.5s ease; + + img { + width: 100%; + height: 100%; + opacity: 0.7; + object-fit: cover; + border-radius: 20px; + } + + .slide-content { + width: 100%; + height: 100%; + @include flex(column, center, center); + position: absolute; + color: white; + text-align: center; + + h2 { + font-size: 3rem; + margin-bottom: 1rem; + } + + p { + font-size: 1.5rem; + } + } + } + + .slide.active { + opacity: 1; + } + } + + .buttons { + width: 100%; + height: 100%; + @include flex(row, space-between, center); + position: absolute; + bottom: 0; + padding: 1rem; + + button { + padding: 0.5rem; + border-radius: 5px; + border: 1px solid rgb(68, 75, 77); + transition: .1s linear; + background-color: transparent; + color: #fff; + cursor: pointer; + width: 50px; + height: 100%; + opacity: 0.2; + + &:hover { + background-color: rgb(53, 57, 59); + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/admin/Dashboard.scss b/client/src/scss/views/admin/Dashboard.scss new file mode 100644 index 0000000..3be7aa0 --- /dev/null +++ b/client/src/scss/views/admin/Dashboard.scss @@ -0,0 +1,11 @@ +nav { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + height: 30px; + + a { + text-decoration: none; + } +} diff --git a/client/src/scss/views/admin/Login.scss b/client/src/scss/views/admin/Login.scss new file mode 100644 index 0000000..d94eeb5 --- /dev/null +++ b/client/src/scss/views/admin/Login.scss @@ -0,0 +1,203 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 50px; + } + + p{ + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 50px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + .input-box:last-child { + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover{ + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} + +#box1 { + background-color: $secondary-color-dark; +} + +#box2 { + @include flex-center; + + img { + height: 80%; + } +} \ No newline at end of file diff --git a/client/src/scss/views/admin/RegisterCoordenador.scss b/client/src/scss/views/admin/RegisterCoordenador.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/scss/views/admin/RegisterCurso.scss b/client/src/scss/views/admin/RegisterCurso.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/scss/views/admin/RegisterFuncionario.scss b/client/src/scss/views/admin/RegisterFuncionario.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/scss/views/admin/RegisterProfessor.scss b/client/src/scss/views/admin/RegisterProfessor.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/scss/views/admin/RegisterTurma.scss b/client/src/scss/views/admin/RegisterTurma.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/scss/views/aluno/Complete.scss b/client/src/scss/views/aluno/Complete.scss new file mode 100644 index 0000000..450863b --- /dev/null +++ b/client/src/scss/views/aluno/Complete.scss @@ -0,0 +1,204 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex(row-reverse, center, center); +} + +.alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 10px; + } + + .input-box { + height: 65px; + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 15px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + .password { + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + } +} + +p { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } +} + +.button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } +} + + +#box1 { + @include flex-center; + + img { + height: 80%; + transform: rotatey(180deg); + } +} + +#box2 { + background-color: $secondary-color-dark; +} \ No newline at end of file diff --git a/client/src/scss/views/aluno/Home.scss b/client/src/scss/views/aluno/Home.scss new file mode 100644 index 0000000..911fccb --- /dev/null +++ b/client/src/scss/views/aluno/Home.scss @@ -0,0 +1,11 @@ +nav { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + height: 30px; + + a { + text-decoration: none; + } +} \ No newline at end of file diff --git a/client/src/scss/views/aluno/Login.scss b/client/src/scss/views/aluno/Login.scss new file mode 100644 index 0000000..88b0acd --- /dev/null +++ b/client/src/scss/views/aluno/Login.scss @@ -0,0 +1,204 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 50px; + } + + p{ + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 50px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + .input-box:last-child { + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover{ + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} + +#box1 { + background-color: $secondary-color-dark; +} + +#box2 { + @include flex-center; + + img { + height: 80%; + transform: rotatey(180deg); + } +} \ No newline at end of file diff --git a/client/src/scss/views/aluno/Profile.scss b/client/src/scss/views/aluno/Profile.scss new file mode 100644 index 0000000..3f99c0b --- /dev/null +++ b/client/src/scss/views/aluno/Profile.scss @@ -0,0 +1,5 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} diff --git a/client/src/scss/views/aluno/Recovery.scss b/client/src/scss/views/aluno/Recovery.scss new file mode 100644 index 0000000..2973376 --- /dev/null +++ b/client/src/scss/views/aluno/Recovery.scss @@ -0,0 +1,171 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-left: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + >p:last-child { + width: 200px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 30px; + } + + p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 50px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + p { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/aluno/Register.scss b/client/src/scss/views/aluno/Register.scss new file mode 100644 index 0000000..450863b --- /dev/null +++ b/client/src/scss/views/aluno/Register.scss @@ -0,0 +1,204 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex(row-reverse, center, center); +} + +.alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 10px; + } + + .input-box { + height: 65px; + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 15px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + .password { + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + } +} + +p { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } +} + +.button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } +} + + +#box1 { + @include flex-center; + + img { + height: 80%; + transform: rotatey(180deg); + } +} + +#box2 { + background-color: $secondary-color-dark; +} \ No newline at end of file diff --git a/client/src/scss/views/aluno/ValidateRecovery.scss b/client/src/scss/views/aluno/ValidateRecovery.scss new file mode 100644 index 0000000..e7ecced --- /dev/null +++ b/client/src/scss/views/aluno/ValidateRecovery.scss @@ -0,0 +1,310 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + + } + + p:last-child{ + width: 170px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2rem; + margin-top: 10px; + } + + >p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 20px; + } + + .input-box { + height: 65px; + @include flex(column, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + margin: 20px 0px; + border-radius: 0px 5px 5px 0px; + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + &.focused { + border-left: solid 3px $secondary-color-orange; + } + + label { + letter-spacing: 1.5px; + width: 100%; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + display: inline-block; + } + + .d1 { + width: 95%; + + .alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } + } + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + .alerts { + @include flex(column, center, flex-start); + font-size: .8rem; + color: rgb(158, 20, 20); + } + } + + .email { + background-color: transparent; + @include flex(row, flex-start, center); + height: 40px; + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + } + + .password{ + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 65px; + width: 12%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + + text-transform: uppercase + } + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/aluno/ValidateRegister.scss b/client/src/scss/views/aluno/ValidateRegister.scss new file mode 100644 index 0000000..4f67ae7 --- /dev/null +++ b/client/src/scss/views/aluno/ValidateRegister.scss @@ -0,0 +1,226 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + background-color: $secondary-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 10px; + } + + p { + @include font-inter(200); + font-size: .8rem; + margin-top: 10px; + color: $font-color-dark-2; + } + + .input-box { + height: 65px; + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + div input:last-child { + font-size: 1rem; + } + + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 95px; + width: 15%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + } + } + } + + .voltar { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/empresa/Dashboard.scss b/client/src/scss/views/empresa/Dashboard.scss new file mode 100644 index 0000000..911fccb --- /dev/null +++ b/client/src/scss/views/empresa/Dashboard.scss @@ -0,0 +1,11 @@ +nav { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + height: 30px; + + a { + text-decoration: none; + } +} \ No newline at end of file diff --git a/client/src/scss/views/empresa/Login.scss b/client/src/scss/views/empresa/Login.scss new file mode 100644 index 0000000..10fef20 --- /dev/null +++ b/client/src/scss/views/empresa/Login.scss @@ -0,0 +1,192 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + background-color: $secondary-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 50px; + } + + p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 50px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + .input-box:last-child { + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/empresa/Recovery.scss b/client/src/scss/views/empresa/Recovery.scss new file mode 100644 index 0000000..2973376 --- /dev/null +++ b/client/src/scss/views/empresa/Recovery.scss @@ -0,0 +1,171 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-left: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + >p:last-child { + width: 200px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 30px; + } + + p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 50px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + p { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/empresa/Register.scss b/client/src/scss/views/empresa/Register.scss new file mode 100644 index 0000000..450863b --- /dev/null +++ b/client/src/scss/views/empresa/Register.scss @@ -0,0 +1,204 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex(row-reverse, center, center); +} + +.alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 10px; + } + + .input-box { + height: 65px; + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 15px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + .password { + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + } +} + +p { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } +} + +.button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } +} + + +#box1 { + @include flex-center; + + img { + height: 80%; + transform: rotatey(180deg); + } +} + +#box2 { + background-color: $secondary-color-dark; +} \ No newline at end of file diff --git a/client/src/scss/views/empresa/Validate.scss b/client/src/scss/views/empresa/Validate.scss new file mode 100644 index 0000000..4f67ae7 --- /dev/null +++ b/client/src/scss/views/empresa/Validate.scss @@ -0,0 +1,226 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + background-color: $secondary-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 10px; + } + + p { + @include font-inter(200); + font-size: .8rem; + margin-top: 10px; + color: $font-color-dark-2; + } + + .input-box { + height: 65px; + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + div input:last-child { + font-size: 1rem; + } + + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 95px; + width: 15%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + } + } + } + + .voltar { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/empresa/ValidateRecovery.scss b/client/src/scss/views/empresa/ValidateRecovery.scss new file mode 100644 index 0000000..e7ecced --- /dev/null +++ b/client/src/scss/views/empresa/ValidateRecovery.scss @@ -0,0 +1,310 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + + } + + p:last-child{ + width: 170px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2rem; + margin-top: 10px; + } + + >p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 20px; + } + + .input-box { + height: 65px; + @include flex(column, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + margin: 20px 0px; + border-radius: 0px 5px 5px 0px; + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + &.focused { + border-left: solid 3px $secondary-color-orange; + } + + label { + letter-spacing: 1.5px; + width: 100%; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + display: inline-block; + } + + .d1 { + width: 95%; + + .alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } + } + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + .alerts { + @include flex(column, center, flex-start); + font-size: .8rem; + color: rgb(158, 20, 20); + } + } + + .email { + background-color: transparent; + @include flex(row, flex-start, center); + height: 40px; + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + } + + .password{ + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 65px; + width: 12%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + + text-transform: uppercase + } + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/funcionario/Dashboard.scss b/client/src/scss/views/funcionario/Dashboard.scss new file mode 100644 index 0000000..911fccb --- /dev/null +++ b/client/src/scss/views/funcionario/Dashboard.scss @@ -0,0 +1,11 @@ +nav { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + height: 30px; + + a { + text-decoration: none; + } +} \ No newline at end of file diff --git a/client/src/scss/views/funcionario/Init.scss b/client/src/scss/views/funcionario/Init.scss new file mode 100644 index 0000000..7424355 --- /dev/null +++ b/client/src/scss/views/funcionario/Init.scss @@ -0,0 +1,173 @@ + +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 50px; + } + + .p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 60px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + .input-box2 { + width: 180px; + + select { + background-color: transparent; + border: none; + color: $font-color-dark; + @include font-inter(400); + + option { + border: none; + color: $terciary-color-dark; + @include font-inter(400); + } + } + + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/funcionario/Login.scss b/client/src/scss/views/funcionario/Login.scss new file mode 100644 index 0000000..30aad36 --- /dev/null +++ b/client/src/scss/views/funcionario/Login.scss @@ -0,0 +1,206 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + background-color: $secondary-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 10px; + } + + p { + width: 100%; + font-size: .8rem; + color: $font-color-dark-2; + @include flex(row, flex-start, center); + @include font-inter(200); + margin-bottom: 50px; + + width: 100%; + margin-bottom: 10px; + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + + } + + p:last-child { + @include flex(row, flex-end, center); + } + + .input-box { + @include flex(row, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 90%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + @include flex(row, flex-start, center); + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + + a.editMail { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-image: url('../../assets/icons/lapis.png'); + cursor: pointer; + filter: invert(100%); + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover{ + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/funcionario/Recovery.scss b/client/src/scss/views/funcionario/Recovery.scss new file mode 100644 index 0000000..55d0cfd --- /dev/null +++ b/client/src/scss/views/funcionario/Recovery.scss @@ -0,0 +1,171 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-left: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + >p:last-child { + width: 200px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 30px; + } + + p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 50px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + p { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} diff --git a/client/src/scss/views/funcionario/Validate.scss b/client/src/scss/views/funcionario/Validate.scss new file mode 100644 index 0000000..49e813e --- /dev/null +++ b/client/src/scss/views/funcionario/Validate.scss @@ -0,0 +1,305 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2rem; + margin-top: 10px; + } + + >p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 20px; + } + + .input-box { + height: 65px; + @include flex(column, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + margin: 20px 0px; + border-radius: 0px 5px 5px 0px; + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + &.focused { + border-left: solid 3px $secondary-color-orange; + } + + label { + letter-spacing: 1.5px; + width: 100%; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + display: inline-block; + } + + .d1 { + width: 95%; + + .alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } + } + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + .alerts { + @include flex(column, center, flex-start); + font-size: .8rem; + color: rgb(158, 20, 20); + } + } + + .email { + background-color: transparent; + @include flex(row, flex-start, center); + height: 40px; + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + } + + .password{ + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 65px; + width: 12%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + + text-transform: uppercase + } + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/funcionario/ValidateRecovery.scss b/client/src/scss/views/funcionario/ValidateRecovery.scss new file mode 100644 index 0000000..e7ecced --- /dev/null +++ b/client/src/scss/views/funcionario/ValidateRecovery.scss @@ -0,0 +1,310 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + + } + + p:last-child{ + width: 170px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2rem; + margin-top: 10px; + } + + >p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 20px; + } + + .input-box { + height: 65px; + @include flex(column, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + margin: 20px 0px; + border-radius: 0px 5px 5px 0px; + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + &.focused { + border-left: solid 3px $secondary-color-orange; + } + + label { + letter-spacing: 1.5px; + width: 100%; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + display: inline-block; + } + + .d1 { + width: 95%; + + .alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } + } + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + .alerts { + @include flex(column, center, flex-start); + font-size: .8rem; + color: rgb(158, 20, 20); + } + } + + .email { + background-color: transparent; + @include flex(row, flex-start, center); + height: 40px; + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + } + + .password{ + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 65px; + width: 12%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + + text-transform: uppercase + } + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/professor/Dashboard.scss b/client/src/scss/views/professor/Dashboard.scss new file mode 100644 index 0000000..911fccb --- /dev/null +++ b/client/src/scss/views/professor/Dashboard.scss @@ -0,0 +1,11 @@ +nav { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + height: 30px; + + a { + text-decoration: none; + } +} \ No newline at end of file diff --git a/client/src/scss/views/professor/Init.scss b/client/src/scss/views/professor/Init.scss new file mode 100644 index 0000000..f3e6629 --- /dev/null +++ b/client/src/scss/views/professor/Init.scss @@ -0,0 +1,154 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 50px; + } + + .p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 60px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/professor/Login.scss b/client/src/scss/views/professor/Login.scss new file mode 100644 index 0000000..30aad36 --- /dev/null +++ b/client/src/scss/views/professor/Login.scss @@ -0,0 +1,206 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + background-color: $secondary-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 10px; + } + + p { + width: 100%; + font-size: .8rem; + color: $font-color-dark-2; + @include flex(row, flex-start, center); + @include font-inter(200); + margin-bottom: 50px; + + width: 100%; + margin-bottom: 10px; + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + + } + + p:last-child { + @include flex(row, flex-end, center); + } + + .input-box { + @include flex(row, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 90%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + @include flex(row, flex-start, center); + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + + a.editMail { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-image: url('../../assets/icons/lapis.png'); + cursor: pointer; + filter: invert(100%); + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover{ + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/professor/Profile.scss b/client/src/scss/views/professor/Profile.scss new file mode 100644 index 0000000..6dc3d12 --- /dev/null +++ b/client/src/scss/views/professor/Profile.scss @@ -0,0 +1,5 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} \ No newline at end of file diff --git a/client/src/scss/views/professor/Recovery.scss b/client/src/scss/views/professor/Recovery.scss new file mode 100644 index 0000000..2973376 --- /dev/null +++ b/client/src/scss/views/professor/Recovery.scss @@ -0,0 +1,171 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-left: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + >p:last-child { + width: 200px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2.5rem; + margin-top: 30px; + } + + p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 50px; + } + + .input-box { + @include flex(column, center, flex-start); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + border-left: solid 3px $terciary-color-dark; + margin: 25px 0px; + + &.focused { + border-left: solid 3px $secondary-color-orange; + border-radius: 0px 5px 5px 0px; + } + + label { + letter-spacing: 1.5px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + div input:last-child { + font-size: 1rem; + } + } + + >p { + width: 100%; + margin-bottom: 10px; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + p { + width: 100%; + @include flex(row, flex-end, center); + + a { + text-decoration: none; + color: $font-color-dark-2; + @include font-inter(300); + font-size: .8rem; + } + } + + .button-box { + width: 100%; + margin-top: 40px; + @include flex(row, flex-start, center); + + button { + height: 40px; + width: 140px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/professor/Validate.scss b/client/src/scss/views/professor/Validate.scss new file mode 100644 index 0000000..49e813e --- /dev/null +++ b/client/src/scss/views/professor/Validate.scss @@ -0,0 +1,305 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2rem; + margin-top: 10px; + } + + >p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 20px; + } + + .input-box { + height: 65px; + @include flex(column, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + margin: 20px 0px; + border-radius: 0px 5px 5px 0px; + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + &.focused { + border-left: solid 3px $secondary-color-orange; + } + + label { + letter-spacing: 1.5px; + width: 100%; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + display: inline-block; + } + + .d1 { + width: 95%; + + .alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } + } + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + .alerts { + @include flex(column, center, flex-start); + font-size: .8rem; + color: rgb(158, 20, 20); + } + } + + .email { + background-color: transparent; + @include flex(row, flex-start, center); + height: 40px; + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + } + + .password{ + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 65px; + width: 12%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + + text-transform: uppercase + } + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/scss/views/professor/ValidateRecovery.scss b/client/src/scss/views/professor/ValidateRecovery.scss new file mode 100644 index 0000000..e7ecced --- /dev/null +++ b/client/src/scss/views/professor/ValidateRecovery.scss @@ -0,0 +1,310 @@ +main { + height: calc(100vh - 80px); + background-color: $primary-color-dark; + @include flex-center; +} + +.box { + background-color: $secondary-color-dark; + height: 65%; + width: 30%; + border-radius: 20px; + padding: 20px; + color: $font-color-dark; + + nav { + width: 100%; + + ul { + @include flex(row, flex-start, center); + + li { + font-size: .9rem; + @include font-inter(300); + margin-inline: 20px; + + p { + @include flex(column, center, center); + @include font-inter(400); + width: 80px; + @include line; + + &:after { + width: 100%; + height: 3px; + margin-top: 3px; + background-color: $secondary-color-orange; + } + + &:hover::after { + animation: none; + } + + } + + p:last-child{ + width: 170px; + } + + a { + text-decoration: none; + color: $font-color-dark-2; + @include flex(column, center, center); + @include font-inter(400); + width: 60px; + @include line; + + &:after { + margin-top: 3px; + height: 3px; + background-color: $secondary-color-orange; + } + } + } + } + } + + form { + padding: 20px; + + h1 { + @include font-inter(300); + font-size: 2rem; + margin-top: 10px; + } + + >p { + width: 100%; + font-size: .8rem; + @include flex(row, flex-start, center); + color: $font-color-dark-2; + @include font-inter(200); + margin-bottom: 20px; + } + + .input-box { + height: 65px; + @include flex(column, flex-start, center); + width: 100%; + padding: 10px; + border-radius: 5px; + background-color: $terciary-color-dark; + margin: 20px 0px; + border-radius: 0px 5px 5px 0px; + + input { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + &.focused { + border-left: solid 3px $secondary-color-orange; + } + + label { + letter-spacing: 1.5px; + width: 100%; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + p { + background-color: transparent; + width: 100%; + margin-top: 5px; + outline: none; + color: $font-color-dark; + border: none; + @include font-inter(400); + font-size: 1rem; + } + + a { + height: 18px; + width: 18px; + border: none; + background-color: transparent; + background-position: center; + background-image: url('../../assets/icons/lapis.png'); + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + display: inline-block; + } + + .d1 { + width: 95%; + + .alert { + font-size: .8rem; + color: rgb(158, 20, 20); + + & .input-box input { + margin-top: 2px; + } + } + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + .alerts { + @include flex(column, center, flex-start); + font-size: .8rem; + color: rgb(158, 20, 20); + } + } + + .email { + background-color: transparent; + @include flex(row, flex-start, center); + height: 40px; + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + } + + } + + .password{ + @include flex(row, flex-start, center); + + div { + @include flex(column, center, flex-start) + } + + .d1 { + width: 95%; + } + + .d2 { + width: 5%; + + button { + height: 20px; + width: 20px; + border: none; + background-color: transparent; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: invert(100%); + cursor: pointer; + } + + .show { + background-image: url('../../assets/icons/olho-1.png'); + } + + .hide { + background-image: url('../../assets/icons/olho-2.png'); + } + } + } + + .token { + width: 100%; + @include flex(column, center, flex-start); + + label { + padding-inline: 10px; + letter-spacing: 1.5px; + margin-top: 10px; + @include font-inter(200); + font-size: .8rem; + color: $font-color-dark-2; + } + + .box-token { + @include flex(row, space-around, center); + margin: 5px 0px 10px 0px; + + input { + border: none; + outline: none; + border-radius: 7px; + height: 65px; + width: 12%; + font-size: 1.8rem; + text-align: center; + @include flex-center; + color: $font-color-dark; + caret-color: $font-color-dark; + @include font-inter(500); + background-color: $terciary-color-dark; + + &:focus { + border: solid 2px $primary-color-orange; + } + + text-transform: uppercase + } + } + } + + .button-box { + width: 100%; + margin-top: 10px; + @include flex(row, flex-start, center); + + button { + padding: 12px 75px; + background-color: $primary-color-orange; + border: none; + border-radius: 3px; + @include font-inter(400); + font-size: .9rem; + color: $secondary-color-dark; + border: solid 1px $primary-color-orange; + cursor: pointer; + transition: .1s linear; + + &:hover { + background-color: $secondary-color-dark; + color: $primary-color-orange; + } + } + } + } +} \ No newline at end of file diff --git a/client/src/services/api.js b/client/src/services/api.js index e27fc53..e008785 100644 --- a/client/src/services/api.js +++ b/client/src/services/api.js @@ -1,7 +1,7 @@ import axios from 'axios'; const api = axios.create({ - // baseURL: 'https://536a8c3ee76a5fd349ca5407510dde61.serveo.net' + // baseURL: 'https://536a8c3ee76a5fd349ca5407510dde345.serveo.net' baseURL: 'http://localhost:3333/' }); diff --git a/client/src/views/admin/Dashboard.vue b/client/src/views/admin/Dashboard.vue index 86b2a75..2441bdf 100644 --- a/client/src/views/admin/Dashboard.vue +++ b/client/src/views/admin/Dashboard.vue @@ -40,19 +40,8 @@ export default { this.getToken(); } } - \ No newline at end of file diff --git a/client/src/views/admin/Login.vue b/client/src/views/admin/Login.vue index 11bad3c..e86f7ad 100644 --- a/client/src/views/admin/Login.vue +++ b/client/src/views/admin/Login.vue @@ -110,207 +110,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/admin/RegisterCoordenador.vue b/client/src/views/admin/RegisterCoordenador.vue index ea04a9e..51d0e0b 100644 --- a/client/src/views/admin/RegisterCoordenador.vue +++ b/client/src/views/admin/RegisterCoordenador.vue @@ -75,4 +75,6 @@ export default { - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/views/admin/RegisterCurso.vue b/client/src/views/admin/RegisterCurso.vue index dd30a36..598596f 100644 --- a/client/src/views/admin/RegisterCurso.vue +++ b/client/src/views/admin/RegisterCurso.vue @@ -113,4 +113,6 @@ export default { - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/views/admin/RegisterFuncionario.vue b/client/src/views/admin/RegisterFuncionario.vue index 06ad8f2..ed70405 100644 --- a/client/src/views/admin/RegisterFuncionario.vue +++ b/client/src/views/admin/RegisterFuncionario.vue @@ -102,4 +102,6 @@ export default { - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/views/admin/RegisterProfessor.vue b/client/src/views/admin/RegisterProfessor.vue index 4fac37b..1d59360 100644 --- a/client/src/views/admin/RegisterProfessor.vue +++ b/client/src/views/admin/RegisterProfessor.vue @@ -80,4 +80,6 @@ export default { - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/views/admin/RegisterTurma.vue b/client/src/views/admin/RegisterTurma.vue index 5460a0b..ad33ff9 100644 --- a/client/src/views/admin/RegisterTurma.vue +++ b/client/src/views/admin/RegisterTurma.vue @@ -103,4 +103,6 @@ export default { - \ No newline at end of file + \ No newline at end of file diff --git a/client/src/views/aluno/Complete.vue b/client/src/views/aluno/Complete.vue index ea9dad4..7919f61 100644 --- a/client/src/views/aluno/Complete.vue +++ b/client/src/views/aluno/Complete.vue @@ -111,210 +111,6 @@ export default { } } - \ No newline at end of file diff --git a/client/src/views/aluno/Home.vue b/client/src/views/aluno/Home.vue index 7f0c902..e2c7a48 100644 --- a/client/src/views/aluno/Home.vue +++ b/client/src/views/aluno/Home.vue @@ -37,17 +37,6 @@ export default { } - \ No newline at end of file diff --git a/client/src/views/aluno/Login.vue b/client/src/views/aluno/Login.vue index a9e0327..892b928 100644 --- a/client/src/views/aluno/Login.vue +++ b/client/src/views/aluno/Login.vue @@ -117,210 +117,6 @@ export default { } } - \ No newline at end of file diff --git a/client/src/views/aluno/Profile.vue b/client/src/views/aluno/Profile.vue index 9482a2c..92d53c0 100644 --- a/client/src/views/aluno/Profile.vue +++ b/client/src/views/aluno/Profile.vue @@ -24,12 +24,6 @@ export default { } } - \ No newline at end of file diff --git a/client/src/views/aluno/Recovery.vue b/client/src/views/aluno/Recovery.vue index dcc92e2..c855893 100644 --- a/client/src/views/aluno/Recovery.vue +++ b/client/src/views/aluno/Recovery.vue @@ -90,177 +90,6 @@ export default { } } - \ No newline at end of file diff --git a/client/src/views/aluno/Register.vue b/client/src/views/aluno/Register.vue index 31de877..e1f344b 100644 --- a/client/src/views/aluno/Register.vue +++ b/client/src/views/aluno/Register.vue @@ -229,210 +229,6 @@ export default { } } - \ No newline at end of file diff --git a/client/src/views/aluno/ValidateRecovery.vue b/client/src/views/aluno/ValidateRecovery.vue index 5cd5d70..d354458 100644 --- a/client/src/views/aluno/ValidateRecovery.vue +++ b/client/src/views/aluno/ValidateRecovery.vue @@ -141,314 +141,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/aluno/ValidateRegister.vue b/client/src/views/aluno/ValidateRegister.vue index 1be3576..66504f0 100644 --- a/client/src/views/aluno/ValidateRegister.vue +++ b/client/src/views/aluno/ValidateRegister.vue @@ -187,230 +187,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/empresa/Dashboard.vue b/client/src/views/empresa/Dashboard.vue index dd6c2c8..5d7bd2a 100644 --- a/client/src/views/empresa/Dashboard.vue +++ b/client/src/views/empresa/Dashboard.vue @@ -39,15 +39,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/empresa/Login.vue b/client/src/views/empresa/Login.vue index 0d4abe7..008a4a9 100644 --- a/client/src/views/empresa/Login.vue +++ b/client/src/views/empresa/Login.vue @@ -115,196 +115,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/empresa/Recovery.vue b/client/src/views/empresa/Recovery.vue index 74a89e6..bdcdd38 100644 --- a/client/src/views/empresa/Recovery.vue +++ b/client/src/views/empresa/Recovery.vue @@ -96,175 +96,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/empresa/Register.vue b/client/src/views/empresa/Register.vue index 239101f..642cc88 100644 --- a/client/src/views/empresa/Register.vue +++ b/client/src/views/empresa/Register.vue @@ -243,208 +243,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/empresa/Validate.vue b/client/src/views/empresa/Validate.vue index 45ad87e..8bfbfc3 100644 --- a/client/src/views/empresa/Validate.vue +++ b/client/src/views/empresa/Validate.vue @@ -189,230 +189,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/empresa/ValidateRecovery.vue b/client/src/views/empresa/ValidateRecovery.vue index dd20dd9..7e18352 100644 --- a/client/src/views/empresa/ValidateRecovery.vue +++ b/client/src/views/empresa/ValidateRecovery.vue @@ -209,314 +209,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/funcionario/Dashboard.vue b/client/src/views/funcionario/Dashboard.vue index 84daf42..2faf090 100644 --- a/client/src/views/funcionario/Dashboard.vue +++ b/client/src/views/funcionario/Dashboard.vue @@ -39,15 +39,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/funcionario/Init.vue b/client/src/views/funcionario/Init.vue index 2a463ef..d90223c 100644 --- a/client/src/views/funcionario/Init.vue +++ b/client/src/views/funcionario/Init.vue @@ -87,177 +87,7 @@ export default { } } - \ No newline at end of file diff --git a/client/src/views/funcionario/Login.vue b/client/src/views/funcionario/Login.vue index f901431..4a3132b 100644 --- a/client/src/views/funcionario/Login.vue +++ b/client/src/views/funcionario/Login.vue @@ -120,210 +120,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/funcionario/Recovery.vue b/client/src/views/funcionario/Recovery.vue index c33751c..eedb572 100644 --- a/client/src/views/funcionario/Recovery.vue +++ b/client/src/views/funcionario/Recovery.vue @@ -90,177 +90,6 @@ export default { } - \ No newline at end of file diff --git a/client/src/views/funcionario/Validate.vue b/client/src/views/funcionario/Validate.vue index 3014b69..48661fe 100644 --- a/client/src/views/funcionario/Validate.vue +++ b/client/src/views/funcionario/Validate.vue @@ -219,309 +219,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/funcionario/ValidateRecovery.vue b/client/src/views/funcionario/ValidateRecovery.vue index 2320a39..6ac0223 100644 --- a/client/src/views/funcionario/ValidateRecovery.vue +++ b/client/src/views/funcionario/ValidateRecovery.vue @@ -137,314 +137,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/professor/Dashboard.vue b/client/src/views/professor/Dashboard.vue index 931678c..216f042 100644 --- a/client/src/views/professor/Dashboard.vue +++ b/client/src/views/professor/Dashboard.vue @@ -40,15 +40,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/professor/Init.vue b/client/src/views/professor/Init.vue index acef75c..f578111 100644 --- a/client/src/views/professor/Init.vue +++ b/client/src/views/professor/Init.vue @@ -74,159 +74,7 @@ export default { } } - \ No newline at end of file diff --git a/client/src/views/professor/Login.vue b/client/src/views/professor/Login.vue index 88ba278..ef9b523 100644 --- a/client/src/views/professor/Login.vue +++ b/client/src/views/professor/Login.vue @@ -122,210 +122,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/professor/Profile.vue b/client/src/views/professor/Profile.vue index 5b528bb..a11e78b 100644 --- a/client/src/views/professor/Profile.vue +++ b/client/src/views/professor/Profile.vue @@ -26,10 +26,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/professor/Recovery.vue b/client/src/views/professor/Recovery.vue index 0a8a87c..8767be3 100644 --- a/client/src/views/professor/Recovery.vue +++ b/client/src/views/professor/Recovery.vue @@ -91,175 +91,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/professor/Validate.vue b/client/src/views/professor/Validate.vue index 0414aa5..4091fd9 100644 --- a/client/src/views/professor/Validate.vue +++ b/client/src/views/professor/Validate.vue @@ -210,309 +210,5 @@ export default { \ No newline at end of file diff --git a/client/src/views/professor/ValidateRecovery.vue b/client/src/views/professor/ValidateRecovery.vue index 4439dc3..d0c1801 100644 --- a/client/src/views/professor/ValidateRecovery.vue +++ b/client/src/views/professor/ValidateRecovery.vue @@ -137,314 +137,5 @@ export default { \ No newline at end of file