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

style: Update styles in analysis component for improved consistency and appearance; adjust colors, padding, and border-radius

This commit is contained in:
Vishnu 2025-05-03 18:12:13 +05:30
parent d41a4849e1
commit d551241ff0
1 changed files with 20 additions and 11 deletions
app/src/styles/components/simulation
analysis.scss

31
app/src/styles/components/simulation/analysis.scss
View File

@ -45,7 +45,8 @@
.sub-header { .sub-header {
font-weight: 300; font-weight: 300;
font-size: var(--font-size-tiny); font-size: var(--font-size-tiny);
color: var(--text-button-color); color: var(--text-color);
opacity: 0.8;
} }
} }
@ -97,7 +98,7 @@
.metrics-section { .metrics-section {
padding-top: 16px; padding-top: 16px;
border-top: 1px solid var(--background-color-gray); border-top: 1px solid var(--border-color);
.metric { .metric {
display: flex; display: flex;
@ -144,7 +145,7 @@
max-width: 200px; max-width: 200px;
height: 100px; height: 100px;
position: relative; position: relative;
background-image: radial-gradient(#d3d3d3 1px, transparent 1px); background-image: radial-gradient(#8d8d8da4 1px, transparent 1px);
background-size: 10px 10px; background-size: 10px 10px;
border-radius: 8px; border-radius: 8px;
@ -174,8 +175,8 @@
.footer-card { .footer-card {
width: 100%; width: 100%;
background: var(--background-color); background: var(--background-color);
border-radius: 6px; border-radius: #{$border-radius-large};
padding: 8px; padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
@ -262,7 +263,8 @@
} }
label { label {
font-size: var(--font-size-small); font-weight: 200;
font-size: var(--font-size-tiny);
position: relative; position: relative;
} }
@ -299,6 +301,10 @@
padding: 6px 12px; padding: 6px 12px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
svg {
scale: 0.8;
}
.info { .info {
span { span {
font-size: var(--font-size-xlarge); font-size: var(--font-size-xlarge);
@ -394,7 +400,7 @@
.cost-breakdown { .cost-breakdown {
background: var(--background-color); background: var(--background-color);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: #{$border-radius-large}; border-radius: #{$border-radius-extra-large};
max-height: 20vh; max-height: 20vh;
padding: 16px; padding: 16px;
overflow: auto; overflow: auto;
@ -407,7 +413,7 @@
.section-wrapper { .section-wrapper {
display: flex; display: flex;
gap: 4px; gap: 6px;
align-items: center; align-items: center;
} }
@ -458,7 +464,7 @@
.tips-section { .tips-section {
background: var(--background-color); background: var(--background-color);
border-radius: #{$border-radius-large}; border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color); outline: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -468,7 +474,10 @@
.tip-header { .tip-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px;
.lightbulb-icon{
@include flex-center;
}
.tip-title { .tip-title {
color: var(--text-color); color: var(--text-color);
font-weight: 600; font-weight: 600;
@ -555,4 +564,4 @@
} }
} }
// Breakdown Table Open/Close Logic // Breakdown Table Open/Close Logic