Update various configuration files, components, and assets; enhance notification system and API endpoints; improve documentation and styles across the application.
This commit is contained in:
Haqeem Solehan
323
assets/style/css/component/button.css
Normal file
323
assets/style/css/component/button.css
Normal file
@@ -0,0 +1,323 @@
|
||||
/* RS Button */
|
||||
.button {
|
||||
@apply w-fit rounded-lg flex justify-center items-center h-fit;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Enhanced hover effect with slight 3D transition */
|
||||
.button[class*="button-"]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.button[class*="button-"]:active {
|
||||
transform: translateY(0px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button[class*="button-"]:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Primary Button - Blue with yellow accent */
|
||||
.button.button-primary {
|
||||
@apply bg-primary text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-primary), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-primary), 0.8);
|
||||
}
|
||||
|
||||
.button.button-primary:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background-color: rgb(var(--active-menu-border));
|
||||
animation: slide-in 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% { transform: scaleX(0); opacity: 0; }
|
||||
100% { transform: scaleX(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.button.button-secondary {
|
||||
@apply bg-secondary text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-secondary), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-secondary), 0.8);
|
||||
}
|
||||
|
||||
.button.button-success {
|
||||
@apply bg-success text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-success), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-success), 0.8);
|
||||
}
|
||||
|
||||
.button.button-info {
|
||||
@apply bg-info text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-info), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-info), 0.8);
|
||||
}
|
||||
|
||||
.button.button-warning {
|
||||
@apply bg-warning text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-warning), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-warning), 0.8);
|
||||
}
|
||||
|
||||
.button.button-danger {
|
||||
@apply bg-danger text-white;
|
||||
box-shadow: 0 2px 4px rgba(var(--color-danger), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(var(--color-danger), 0.8);
|
||||
}
|
||||
|
||||
/* Updated outline buttons */
|
||||
.button[class*="outline-"]:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button.outline-primary {
|
||||
@apply border border-primary text-primary;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-primary), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-primary:hover {
|
||||
@apply bg-primary/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-primary), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-secondary {
|
||||
@apply border border-secondary text-secondary;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-secondary), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-secondary:hover {
|
||||
@apply bg-secondary/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-secondary), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-success {
|
||||
@apply border border-success text-success;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-success), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-success:hover {
|
||||
@apply bg-success/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-success), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-info {
|
||||
@apply border border-info text-info;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-info), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-info:hover {
|
||||
@apply bg-info/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-info), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-warning {
|
||||
@apply border border-warning text-warning;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-warning), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-warning:hover {
|
||||
@apply bg-warning/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-warning), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.outline-danger {
|
||||
@apply border border-danger text-danger;
|
||||
box-shadow: 0 1px 3px rgba(var(--color-danger), 0.1);
|
||||
}
|
||||
|
||||
.button.outline-danger:hover {
|
||||
@apply bg-danger/5;
|
||||
box-shadow: 0 3px 6px rgba(var(--color-danger), 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button[class*="text-"]:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button.texts-primary {
|
||||
@apply text-primary;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-primary:hover {
|
||||
@apply bg-primary/10;
|
||||
}
|
||||
|
||||
.button.texts-primary:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-primary));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-primary:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-secondary {
|
||||
@apply text-secondary;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-secondary:hover {
|
||||
@apply bg-secondary/10;
|
||||
}
|
||||
|
||||
.button.texts-secondary:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-secondary));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-secondary:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-success {
|
||||
@apply text-success;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-success:hover {
|
||||
@apply bg-success/10;
|
||||
}
|
||||
|
||||
.button.texts-success:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-success));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-success:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-info {
|
||||
@apply text-info;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-info:hover {
|
||||
@apply bg-info/10;
|
||||
}
|
||||
|
||||
.button.texts-info:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-info));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-info:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-warning {
|
||||
@apply text-warning;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-warning:hover {
|
||||
@apply bg-warning/10;
|
||||
}
|
||||
|
||||
.button.texts-warning:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-warning));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-warning:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button.texts-danger {
|
||||
@apply text-danger;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button.texts-danger:hover {
|
||||
@apply bg-danger/10;
|
||||
}
|
||||
|
||||
.button.texts-danger:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgb(var(--color-danger));
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.button.texts-danger:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
@apply text-xs;
|
||||
padding: var(--padding-btn);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.button-md {
|
||||
@apply text-sm;
|
||||
padding: var(--padding-btn);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.button-lg {
|
||||
@apply text-base;
|
||||
padding: var(--padding-btn);
|
||||
line-height: 1.6;
|
||||
}
|
||||
Reference in New Issue
Block a user