Skip to content

Commit

Permalink
Move scss from vue files to scss files
Browse files Browse the repository at this point in the history 
Co-authored-by: Daniel-Alvarenga <[email protected]>
  • Loading branch information
@VitorCarvalho67 @Daniel-Alvarenga
VitorCarvalho67 and Daniel-Alvarenga committed May 23, 2024
1 parent 74a0206 commit 220a622
Show file tree
Hide file tree
Showing 80 changed files with 5,624 additions and 5,499 deletions.
142 changes: 1 addition & 141 deletions client/src/components/Cards.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,146 +129,6 @@ export default {
}
};
</script>

<style lang="scss" scoped>
.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;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&.no-transition {
scroll-behavior: auto;
}
&.dragging {
scroll-snap-type: none;
scroll-behavior: auto;
.card {
cursor: grab;
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%;
}
}
}
@import "../scss/components/Cards.scss";
</style>
88 changes: 1 addition & 87 deletions client/src/components/ContactUs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,92 +51,6 @@ export default defineComponent({
}
});
</script>

<style lang="scss" scoped>
.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;
}
}
}
@import "../scss/components/ContactUs.scss";
</style>
38 changes: 1 addition & 37 deletions client/src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,42 +40,6 @@ export default defineComponent({
}
});
</script>

<style lang="scss" scoped>
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%;
}
}
@import "../scss/components/Footer.scss";
</style>
92 changes: 2 additions & 90 deletions client/src/components/Header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,94 +48,6 @@ export default defineComponent({
}
});
</script>

<style scoped lang="scss">
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;
}
}
}
}
}
}
}
<style lang="scss" scoped>
@import "../scss/components/Header.scss";
</style>
Loading

0 comments on commit 220a622

Please sign in to comment.