324 lines
6.5 KiB
CSS
324 lines
6.5 KiB
CSS
/* 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;
|
|
}
|