Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Update dropdown items to include active state, enhance List and DropDownList components, and improve sidebar styles for better layout and accessibility

Browse Source
This commit is contained in:
Vishnu
2025-04-30 10:10:39 +05:30
parent 5297717123
commit 4152e611a9
6 changed files with 139 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/styles/abstracts/variables.scss
View File

@@ -16,7 +16,7 @@ $text-button-color: #f3f3fd;
$text-color-dark: #f3f3fd;
$text-disabled-dark: #6f6f7a;
$input-text-color-dark: #b5b5c8;
$highlight-text-color-dark: #b392f0;
$highlight-text-color-dark: #d2baff;
$text-button-color-dark: #f3f3fd;
// background colors
@@ -105,8 +105,8 @@ $color5: #c7a8ff;
// old variables
$accent-color: #6f42c1;
$accent-color-dark: #c4abf1;
$highlight-accent-color: #e0dfff;
$highlight-accent-color-dark: #403e6a;
// $highlight-accent-color: #e0dfff;
// $highlight-accent-color-dark: #403e6a;
// $background-color: #fcfdfd;
// $background-color-dark: #19191d;

26
app/src/styles/components/lists.scss
View File

@@ -34,9 +34,8 @@
padding: 12px;
}
.list-container {
li.list-container {
padding: 2px;
// margin-left: 10px;
overflow: hidden;
.list-item {
@@ -45,11 +44,13 @@
text-align: center;
padding: 4px 8px;
border-radius: #{$border-radius-large};
.value {
width: 100%;
text-align: start;
max-width: 180px;
.zone-header{
@include flex-center;
.value {
width: 100%;
text-align: start;
max-width: 180px;
}
}
.options-container {
@@ -61,11 +62,18 @@
cursor: pointer;
}
}
&:first-child{
background: var(--highlight-accent-color);
.input-value{
color: var(--highlight-text-color);
}
}
}
.active {
background: var(--highlight-accent-color);
color: var(--primary-color);
.input-value{
color: var(--highlight-text-color);
}
}
}

140
app/src/styles/layout/sidebar.scss
View File

@@ -434,7 +434,7 @@
button {
path {
stroke: var(--accent-color);
strokeWidth: 1.5px;
stroke-width: 1.5px;
}
color: var(--accent-color);
&:before {
@@ -456,6 +456,9 @@
.sidebar-right-content-container {
.dataSideBar {
.inputs-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
.datas {
.input-value {
padding: 5px 10px;
@@ -487,6 +490,7 @@
.datas__class {
display: flex;
align-items: center;
gap: 12px;
.multi-level-dropdown {
width: 170px;
@@ -496,22 +500,13 @@
justify-content: space-between;
gap: 6px;
}
}
}
.datas__class {
display: flex;
gap: 12px;
// .datas__separator {
// }
.disable {
cursor: not-allowed;
pointer-events: none;
/* Disables all mouse interactions */
opacity: 0.5;
/* Optional: Makes the button look visually disabled */
.disable {
cursor: not-allowed;
pointer-events: none;
/* Disables all mouse interactions */
opacity: 0.5;
/* Optional: Makes the button look visually disabled */
}
}
}
}
@@ -522,12 +517,6 @@
padding-bottom: 6px;
}
.inputs-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
}
.selectedMain-container {
display: flex;
flex-direction: column;
@@ -627,10 +616,8 @@
width: 100%;
height: 150px;
background: #f0f0f0;
// border-radius: 8px;
display: flex;
align-items: center;
// justify-content: center;
}
.optionsContainer {
@@ -713,7 +700,7 @@
path {
stroke: var(--accent-color);
strokeWidth: 1.5px;
stroke-width: 1.5px;
}
&:hover {
@@ -742,14 +729,14 @@
.add-button {
@include flex-center;
padding: 2px 4px;
background: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-button);
color: var(--text-button-color);
border-radius: #{$border-radius-small};
cursor: pointer;
outline: none;
border: none;
path {
stroke: var(--primary-color);
stroke: var(--text-button-color);
}
&:disabled {
background: var(--text-disabled);
@@ -804,11 +791,10 @@
}
.lists-main-container {
margin: 2px 8px;
width: calc(100% - 12px);
margin-right: 4px;
margin: 2px;
width: calc(100% - 4px);
background: var(--background-color-gray);
border-radius: #{$border-radius-small};
border-radius: 8px;
min-height: 120px;
.list-container {
@@ -818,10 +804,10 @@
.list-item {
@include flex-space-between;
padding: 2px 12px;
padding: 4px 12px;
width: 100%;
margin: 2px 0;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-medium};
.value {
display: flex;
justify-content: flex-start;
@@ -1156,7 +1142,13 @@
}
.assets-container {
padding: 0 6px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
.assets-wrapper {
width: 100%;
@@ -1175,14 +1167,16 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 8px;
gap: 0px 4px;
padding: 10px 0;
.category {
width: 121px;
width: 123px;
height: 95px;
border-radius: 3.59px;
background: var(--background-color-gray);
border-radius: #{$border-radius-large};
background: var(--background-color);
outline: 1px solid var(--border-color);
outline-offset: -1px;
padding: 8px;
padding-top: 12px;
font-weight: $bold-weight;
@@ -1193,8 +1187,6 @@
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
// -webkit-text-fill-color: transparent;
// -webkit-text-stroke: 1px black;
}
&::after {
@@ -1260,7 +1252,6 @@
.category-image {
position: absolute;
// top: 50%;
bottom: 0;
right: -10px;
transform: translate(0, 0%) scale(0.8);
@@ -1276,14 +1267,15 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
gap: 0px 4px;
padding: 10px 0;
.assets {
width: 117px;
width: 123px;
height: 95px;
border-radius: #{$border-radius-small};
background: var(--background-color-gray);
border-radius: #{$border-radius-large};
background: var(--background-color);
outline: 1px solid var(--border-color);
font-weight: $medium-weight;
position: relative;
overflow: hidden;
@@ -1301,18 +1293,16 @@
z-index: 3;
padding: 8px;
width: 100%;
max-height: 38px;
height: 100%;
font-size: var(--font-size-regular);
background: color-mix(
in srgb,
var(--background-color) 40%,
transparent
);
backdrop-filter: blur(5px);
background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%);
pointer-events: none;
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.3s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
@@ -1337,46 +1327,6 @@
}
}
.assets-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
.assets {
width: 117px;
height: 95px;
border-radius: 3.59px;
background: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $medium-weight;
position: relative;
overflow: hidden;
.asset-name {
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
}
.asset-image {
height: 100%;
width: 100%;
position: absolute;
// top: 50%;
// right: 5px;
// transform: translate(0, -50%);
top: 0;
left: 0;
z-index: 2;
}
}
}
.assets-result {
width: 100%;
height: 100%;