Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -516,7 +516,6 @@ input[type="number"] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: #{$border-radius-medium};
|
||||
outline: none;
|
||||
margin: 12px 8px;
|
||||
|
||||
@@ -1275,49 +1275,49 @@
|
||||
}
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(9) {
|
||||
&:nth-child(8) {
|
||||
&::after {
|
||||
@include gradient-by-child(1); // First child uses the first color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(10) {
|
||||
&:nth-child(9) {
|
||||
&::after {
|
||||
@include gradient-by-child(2); // Second child uses the second color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(11) {
|
||||
&:nth-child(10) {
|
||||
&::after {
|
||||
@include gradient-by-child(3); // Third child uses the third color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4),
|
||||
&:nth-child(12) {
|
||||
&:nth-child(11) {
|
||||
&::after {
|
||||
@include gradient-by-child(4); // Fourth child uses the fourth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5),
|
||||
&:nth-child(13) {
|
||||
&:nth-child(12) {
|
||||
&::after {
|
||||
@include gradient-by-child(5); // Fifth child uses the fifth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6),
|
||||
&:nth-child(14) {
|
||||
&:nth-child(13) {
|
||||
&::after {
|
||||
@include gradient-by-child(6); // Fifth child uses the fifth color
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7),
|
||||
&:nth-child(15) {
|
||||
&:nth-child(14) {
|
||||
&::after {
|
||||
@include gradient-by-child(7); // Fifth child uses the fifth color
|
||||
}
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
|
||||
animation: scaleFadeIn 0.4s forwards;
|
||||
.kebab {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@@ -237,7 +237,6 @@
|
||||
gap: 6px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
|
||||
.btn {
|
||||
@@ -390,7 +389,6 @@
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
}
|
||||
|
||||
.active {
|
||||
@@ -414,7 +412,6 @@
|
||||
color: var(--background-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
|
||||
.add-icon {
|
||||
@include flex-center;
|
||||
transition: rotate 0.2s;
|
||||
@@ -434,7 +431,7 @@
|
||||
|
||||
path {
|
||||
stroke: #f65648;
|
||||
strokeWidth: 1.3;
|
||||
strokewidth: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -530,7 +527,6 @@
|
||||
height: 10px;
|
||||
background: var(--primary-color);
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -553,7 +549,6 @@
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -615,7 +610,6 @@
|
||||
gap: 6px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
|
||||
.icon {
|
||||
@@ -953,4 +947,14 @@
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes scaleFadeIn {
|
||||
from {
|
||||
scale: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user