changed marketplace assets

This commit is contained in:
2025-04-01 14:27:08 +05:30
92 changed files with 4152 additions and 2071 deletions

View File

@@ -1,6 +1,22 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
// global input style
input {
width: 100%;
padding: 2px 4px;
border-radius: #{$border-radius-small};
border: 1px solid var(--border-color);
outline: none;
background: transparent;
&:focus,
&:active {
border: 1px solid var(--accent-color);
}
}
.input-value {
color: var(--input-text-color);
font-size: var(--font-size-regular);
@@ -155,16 +171,6 @@
}
}
.project-dropdowm-container {
position: relative;
height: 32px;
.project-name {
line-height: 32px;
height: 100%;
}
}
.regularDropdown-container {
width: 100%;
min-width: 80px;
@@ -179,7 +185,6 @@
display: flex;
justify-content: space-between;
cursor: pointer;
border: 1px solid var(--primary-color);
border-radius: 6px;
background-color: var(--background-color);
}
@@ -224,8 +229,8 @@
position: relative;
.dropdown {
top: 3px;
right: 3px;
top: 2px;
right: 2px;
position: absolute;
background: var(--highlight-accent-color);
border-radius: #{$border-radius-small};
@@ -238,19 +243,6 @@
}
}
input {
width: 100%;
padding: 2px 4px;
border-radius: #{$border-radius-small};
border: 1px solid var(--border-color);
outline: none;
&:focus,
&:active {
border: 1px solid var(--accent-color);
}
}
.eye-dropper-input-container {
display: flex;
align-items: center;
@@ -617,6 +609,7 @@ input {
input {
border: none;
background: transparent;
&::placeholder {
color: var(--text-disabled);
@@ -655,4 +648,4 @@ input {
.multi-email-invite-input.active {
border: 1px solid var(--accent-color);
}
}
}

View File

@@ -1,25 +1,58 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins" as *;
.project-dropdowm-container {
display: flex;
align-items: center;
gap: 2px;
position: relative;
height: 32px;
.project-name {
line-height: 32px;
height: 100%;
}
.more-options-button {
@include flex-center;
border-radius: #{$border-radius-small};
height: 28px;
position: relative;
&:hover {
background: var(--highlight-accent-color);
path {
fill: var(--accent-color);
}
}
}
.more-options-button.active {
background: var(--highlight-accent-color);
path {
fill: var(--accent-color);
}
}
}
.menu-bar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 32px;
left: 0;
z-index: 5;
background-color: var(--background-color);
color: var(--text-color);
box-shadow: var(--box-shadow-light);
border-radius: 8px;
border: 1px solid var(--border-color);
.menu-buttons {
display: flex;
flex-direction: column;
height: 100%;
padding: 8px 4px;
padding: 4px;
min-width: 178px;
.menu-button-container {
position: relative;
height: 100%;
padding: 8px;
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
.menu-button {
width: 100%;
cursor: pointer;
@@ -32,7 +65,7 @@
.dropdown-icon {
margin-left: 5px;
font-size: var(--font-size-small);
color: #666666;
rotate: -90deg;
}
}
@@ -46,23 +79,27 @@
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 100;
padding: 5px 0;
padding: 4px;
.menu-item-container {
position: relative;
.menu-item {
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
cursor: pointer;
white-space: nowrap;
color: var(--text-color);
.dropdown-icon {
rotate: -90deg;
}
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
span,
.menu-item-right span {
color: var(--accent-color);
}
}
.menu-item-right {
@@ -92,19 +129,22 @@
box-shadow: var(--box-shadow-light);
border: 1px solid var(--background-color);
z-index: 101;
padding: 4px;
.submenu-item {
padding: 8px 20px;
cursor: pointer;
padding: 4px 8px 4px 12px;
border-radius: #{$border-radius-small};
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
white-space: nowrap;
color: var(--text-color);
&:hover {
background-color: var(--background-color-gray);
color: var(--highlight-accent-color);
background-color: var(--highlight-accent-color);
span {
color: var(--accent-color);
}
}
.shortcut {
color: var(--text-color);
}
@@ -115,13 +155,16 @@
&:hover {
background-color: var(--highlight-accent-color);
color: var(--highlight-accent-color);
.menu-button {
color: var(--accent-color);
}
}
}
}
.split {
width: 100%;
height: 1px;
background-color: #e0dfff;
background-color: var(--highlight-accent-color);
margin: 2px 0;
}
}