Refactor styles across components to utilize variable-based border-radius for consistency and improved maintainability. Added SkeletonUI component and corresponding styles for loading states.
This commit is contained in:
Nalvazhuthi
@@ -5,6 +5,7 @@
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: var(--background-color-solid);
|
||||
|
||||
.loading-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@@ -15,6 +16,7 @@
|
||||
justify-content: space-between;
|
||||
padding: 28px;
|
||||
z-index: 5;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -26,22 +28,26 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
filter: blur(200px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
|
||||
.loading-hero-container {
|
||||
.logo {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
margin-bottom: 35px;
|
||||
|
||||
circle {
|
||||
fill: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: #{$font-josefin-sans};
|
||||
font-size: #{$xxlarge};
|
||||
@@ -51,6 +57,7 @@
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
.progress-value {
|
||||
font-family: #{$font-josefin-sans};
|
||||
@@ -59,12 +66,14 @@
|
||||
margin-bottom: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-indicator-container {
|
||||
height: 6px;
|
||||
width: 60vw;
|
||||
background: var(--highlight-accent-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
position: relative;
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: var(--accent-color);
|
||||
@@ -74,4 +83,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -51,12 +51,15 @@
|
||||
|
||||
.active {
|
||||
background: var(--background-color-accent);
|
||||
|
||||
rect {
|
||||
stroke: var(--icon-default-color-active);
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: var(--icon-default-color-active);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: saturate(0.8);
|
||||
background: var(--background-color-accent);
|
||||
@@ -85,7 +88,8 @@
|
||||
|
||||
.template-item {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
padding: 1rem;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
@@ -100,7 +104,8 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
@@ -122,7 +127,8 @@
|
||||
background: #ff4444;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
@@ -130,8 +136,15 @@
|
||||
.no-templates {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 2rem;
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.widgets-wrapper {
|
||||
@@ -178,7 +191,8 @@
|
||||
.stock {
|
||||
padding: 13px 5px;
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: 6.33px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -230,10 +244,12 @@
|
||||
|
||||
.outline-container {
|
||||
height: 100%;
|
||||
|
||||
.outline-content-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
|
||||
.overflow {
|
||||
height: calc(100% - 16px);
|
||||
max-height: 46vh;
|
||||
@@ -298,7 +314,8 @@
|
||||
width: 26px;
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: white;
|
||||
text-transform: capitalize;
|
||||
@@ -315,7 +332,8 @@
|
||||
width: 26px;
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
background: var(--highlight-accent-color);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--accent-color);
|
||||
@@ -336,7 +354,8 @@
|
||||
height: 26px;
|
||||
width: 52px;
|
||||
max-width: 52px;
|
||||
border-radius: 20px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
|
||||
overflow: hidden;
|
||||
margin-left: 2px;
|
||||
|
||||
@@ -391,8 +410,10 @@
|
||||
color: #666;
|
||||
padding: 16px;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
.products-list {
|
||||
padding-top: 1rem;
|
||||
|
||||
.product-item {
|
||||
text-align: start;
|
||||
margin-top: 8px;
|
||||
@@ -401,6 +422,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
|
||||
button {
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
@@ -410,10 +432,12 @@
|
||||
padding: 8px 12px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
outline: 1px solid var(--border-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-button-color);
|
||||
outline: none;
|
||||
|
||||
path {
|
||||
stroke: var(--text-button-color);
|
||||
strokeWidth: 1.3;
|
||||
@@ -421,6 +445,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products-list-title {
|
||||
text-align: start;
|
||||
color: var(--accent-color);
|
||||
@@ -441,6 +466,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
.datas {
|
||||
.input-value {
|
||||
padding: 5px 10px;
|
||||
@@ -482,6 +508,7 @@
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.disable {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
@@ -555,12 +582,13 @@
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
color: #444;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
font-size: var(--font-weight-regular);
|
||||
|
||||
.infoIcon {
|
||||
padding: 0px 7px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
@@ -640,7 +668,7 @@
|
||||
background: none;
|
||||
width: 24px;
|
||||
height: 26px;
|
||||
border-radius: 3.2px;
|
||||
border-radius: #{$border-radius-small};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -703,6 +731,7 @@
|
||||
max-height: calc(60vh - (47px - 35px));
|
||||
width: calc(100% - 4px);
|
||||
overflow-x: hidden;
|
||||
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
padding: 6px 12px;
|
||||
@@ -717,9 +746,11 @@
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
path {
|
||||
stroke: var(--text-button-color);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
@@ -731,9 +762,11 @@
|
||||
.property-item {
|
||||
.value-field-container {
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
@@ -748,10 +781,13 @@
|
||||
padding: 8px 12px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.selected-actions-list {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.eye-dropper-input-container {
|
||||
padding: 6px 12px;
|
||||
|
||||
.regularDropdown-container {
|
||||
padding: 5px 8px;
|
||||
outline: 1px solid var(--border-color);
|
||||
@@ -759,11 +795,14 @@
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.value-field-container {
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
padding: 5px 4px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
@@ -776,7 +815,8 @@
|
||||
margin: 2px;
|
||||
width: calc(100% - 4px);
|
||||
background: var(--background-color-gray);
|
||||
border-radius: 8px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
min-height: 120px;
|
||||
|
||||
.list-container {
|
||||
@@ -789,12 +829,14 @@
|
||||
padding: 4px 12px;
|
||||
width: 100%;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 80%;
|
||||
gap: 6px;
|
||||
|
||||
.input-value {
|
||||
text-align: start;
|
||||
}
|
||||
@@ -926,6 +968,7 @@
|
||||
padding: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.value-field-container {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -984,6 +1027,7 @@
|
||||
@include flex-space-between;
|
||||
padding: 10px 12px;
|
||||
color: var(--text-color);
|
||||
|
||||
.input-value {
|
||||
color: inherit;
|
||||
}
|
||||
@@ -991,6 +1035,7 @@
|
||||
|
||||
.input-container {
|
||||
@include flex-center;
|
||||
|
||||
.remove-button {
|
||||
@include flex-center;
|
||||
height: 18px;
|
||||
@@ -1025,12 +1070,14 @@
|
||||
|
||||
.custom-input-container {
|
||||
@include flex-space-between;
|
||||
|
||||
.split {
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
border: none;
|
||||
@@ -1063,13 +1110,16 @@
|
||||
.dropdown-content-container {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.value-field-container {
|
||||
padding: 6px;
|
||||
|
||||
.dropdown {
|
||||
min-width: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.input-range-container {
|
||||
.input-container {
|
||||
width: 75%;
|
||||
@@ -1155,10 +1205,12 @@
|
||||
|
||||
.assets-result {
|
||||
width: 100%;
|
||||
|
||||
.assets-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.assets-list-section {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
@@ -1175,6 +1227,7 @@
|
||||
font-weight: $bold-weight;
|
||||
padding: 8px;
|
||||
@include flex-space-between;
|
||||
|
||||
.back-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1212,7 +1265,8 @@
|
||||
content: "";
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border-radius: #{$border-radius-circle};
|
||||
|
||||
background: var(--circle-color, #000);
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
@@ -1314,11 +1368,9 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-regular);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(37, 24, 51, 0) 0%,
|
||||
rgba(78, 22, 128, 0.4) 100%
|
||||
);
|
||||
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;
|
||||
@@ -1340,4 +1392,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
app/src/styles/layout/skeleton.scss
vendored
Normal file
61
app/src/styles/layout/skeleton.scss
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
.skeleton-wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
|
||||
.skeleton {
|
||||
background: var(--background-color-gray);
|
||||
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.2) 20%,
|
||||
rgba(255, 255, 255, 0.5) 60%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
transform: translateX(-100%);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.skeleton-title {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-subtitle {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.skeleton-card {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
.toast {
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
animation: fadeIn 0.3s, fadeOut 0.5s 2.5s;
|
||||
@@ -71,6 +71,7 @@
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -81,7 +82,8 @@
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user