added market placeCards
This commit is contained in:
Nalvazhuthi
@@ -1,89 +1,185 @@
|
||||
@use "../../abstracts/variables" as *;
|
||||
@use "../../abstracts/mixins.scss" as *;
|
||||
|
||||
|
||||
.marketPlace {
|
||||
width: calc((100vw) - (320px + 270px + 100px));
|
||||
background-color: #FCFDFD;
|
||||
.marketplace-wrapper {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
z-index: #{$z-index-marketplace};
|
||||
background-color: var(--background-color-secondary);
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: calc(240px + 45px);
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
left: 0;
|
||||
padding: 100px 50px;
|
||||
|
||||
.filter-search-container {
|
||||
.marketplace-container {
|
||||
padding: 20px 2px;
|
||||
height: calc(100vh - 120px);
|
||||
background-color: var(--background-color);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
}
|
||||
|
||||
.marketPlace {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
left: calc(120px / 2);
|
||||
top: 100px;
|
||||
padding: 14px;
|
||||
padding-bottom: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
.search-wrapper {
|
||||
min-width: 40%;
|
||||
.filter-search-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
width: 684px;
|
||||
padding: 0;
|
||||
.search-wrapper {
|
||||
min-width: 60%;
|
||||
max-width: 684px;
|
||||
padding: 0;
|
||||
border-radius: $border-radius-large ;
|
||||
|
||||
.search-container {
|
||||
border: none !important;
|
||||
box-shadow: 0px 2px 10.5px 0px #0000000D;
|
||||
|
||||
input {
|
||||
.search-container {
|
||||
border: none !important;
|
||||
outline: none;
|
||||
box-shadow: $box-shadow-medium;
|
||||
border-radius: $border-radius-large ;
|
||||
|
||||
input {
|
||||
border: none !important;
|
||||
outline: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.regularDropdown-container {
|
||||
max-width: 159px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 5px 20px;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.rating-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.regularDropdown-container {
|
||||
max-width: 159px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 5px 20px;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.rating-container {
|
||||
.cards-container-container {
|
||||
padding: 0px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header {
|
||||
color: var(--text-color);
|
||||
font-weight: $medium-weight;
|
||||
font-size: $xlarge;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards-container-container {
|
||||
.header {
|
||||
color: var(--text-color);
|
||||
font-weight: $medium-weight;
|
||||
font-size: $xlarge;
|
||||
}
|
||||
.cards-wrapper-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 28px;
|
||||
|
||||
.cards-wrapper-container {
|
||||
.card-container {
|
||||
width: 316px;
|
||||
height: 309px;
|
||||
border-radius: 18px;
|
||||
padding: 12px;
|
||||
box-shadow: 0px 2px 10.5px 0px #0000000D;
|
||||
border: 1px solid var(--background-accent-transparent, #E0DFFF80);
|
||||
position: relative;
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
background-color: var(--accent-color);
|
||||
.card-container {
|
||||
width: calc(25% - 23px);
|
||||
border-radius: 18px;
|
||||
padding: 12px;
|
||||
box-shadow: 0px 2px 10.5px 0px #0000000D;
|
||||
border: 1px solid var(--background-accent-transparent, #E0DFFF80);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.assets-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
|
||||
.asstes-container {
|
||||
font-weight: #{$bold-weight};
|
||||
font-size: $regular ;
|
||||
}
|
||||
|
||||
.assets-date {
|
||||
color: var(--accent-color);
|
||||
font-size: $small;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vendor-icon {
|
||||
|
||||
font-weight: #{$bold-weight};
|
||||
font-size: $regular ;
|
||||
}
|
||||
|
||||
.stars-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.buy-now-button {
|
||||
width: 100%;
|
||||
background-color: var(--background-color-secondary);
|
||||
border-radius: $border-radius-extra-large ;
|
||||
padding: 8px 0;
|
||||
@include flex-center;
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user