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

Refactor event properties components to use section elements for better semantics and styling consistency; update mechanics components to enhance layout and improve user experience; modify simulation component to manage open/close state for event lists; enhance file menu with project icon; improve input toggle styles; standardize color variables in SCSS; adjust sidebar styles for better visual hierarchy; implement backdrop filters for improved UI aesthetics; and refine overall component styling for consistency across the application.

Browse Source
This commit is contained in:
Vishnu
2025-04-29 18:19:03 +05:30
parent 45fea9465e
commit 0b0e1e3d8b
26 changed files with 680 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/src/styles/components/input.scss
View File

@@ -5,12 +5,12 @@
input {
width: 100%;
padding: 2px 4px;
border-radius: #{$border-radius-small};
outline: 1px solid var(--border-color);
padding: 4px 8px;
border-radius: #{$border-radius-large};
outline: 1px solid var(--input-border-color);
outline-offset: -1px;
border: none;
background: transparent;
background: var(--background-color-input);
color: var(--input-text-color);
&:focus,
@@ -44,6 +44,18 @@ input {
}
}
input[type="number"] {
// Chrome, Safari, Edge, Opera
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
// Firefox
-moz-appearance: textfield;
}
.input-value {
color: var(--input-text-color);
font-size: var(--font-size-regular);
@@ -61,9 +73,7 @@ input {
color: var(--input-text-color);
font-size: var(--font-size-regular);
font-weight: var(--font-weight-regular);
border: 1px solid var(--accent-color);
outline: none;
border-radius: #{$border-radius-small};
line-height: 26px;
padding: 0 8px;
}
@@ -102,10 +112,11 @@ input {
.search-container {
@include flex-center;
width: 100%;
border-radius: #{$border-radius-small};
padding: 6px 2px;
border-radius: #{$border-radius-extra-large};
padding: 3px 2px;
position: relative;
border: 1px solid var(--border-color);
background: var(--background-color-input-focus);
.icon-container {
@include flex-center;
@@ -220,7 +231,6 @@ input {
justify-content: space-between;
cursor: pointer;
border-radius: 6px;
background: var(--background-color);
}
.dropdown-options {
@@ -469,7 +479,7 @@ input {
.check-box {
height: 24px;
width: 38px;
background: var(--background-color-secondary);
background: var(--background-color);
border-radius: #{$border-radius-large};
position: relative;
cursor: pointer;
@@ -480,7 +490,7 @@ input {
width: 20px;
top: 2px;
left: 2px;
background: var(--accent-color);
background: var(--text-button-color);
border-radius: #{$border-radius-circle};
transition: left 0.3s ease;
}
@@ -726,17 +736,17 @@ input {
@include flex-center;
}
}
.upload-custom-asset-button{
.upload-custom-asset-button {
padding: 6px 12px;
@include flex-space-between;
.title{
.title {
white-space: nowrap;
width: 40%;
}
input{
input {
display: none;
}
.upload-button{
.upload-button {
width: 60%;
background: var(--highlight-accent-color);
color: var(--accent-color);