Demo-Project/Laravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
David Melendez
2026-01-14 22:38:44 +01:00
parent 4e0c415f0b
commit e25d53d054
124 changed files with 21653 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
resources/sass/components/_buttons.scss Normal file
View File

@@ -0,0 +1,465 @@
// ==========================================================================
// Button Components
// Professional Resume Builder - Button Styles
// ==========================================================================
// Base button enhancements
.btn {
font-weight: 500;
letter-spacing: 0.025em;
border-radius: var(--border-radius-md);
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
&:hover:not(:disabled) {
transform: translateY(-1px);
}
&:active:not(:disabled) {
transform: translateY(0);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
// Button loading state
&.btn-loading {
color: transparent !important;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1rem;
height: 1rem;
border: 2px solid currentColor;
border-radius: 50%;
border-top-color: transparent;
animation: btn-spinner 0.8s linear infinite;
}
}
}
// Primary button variants
.btn-primary {
background: var(--brand-gradient);
border: none;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
&:hover:not(:disabled) {
background: var(--brand-gradient-hover);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
&:active {
background: var(--brand-primary-dark);
}
}
.btn-primary-soft {
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.2);
color: var(--brand-primary);
&:hover:not(:disabled) {
background: rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.3);
color: var(--brand-primary-dark);
}
}
// Success button variants
.btn-success {
background: var(--brand-gradient-success);
border: none;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
&:hover:not(:disabled) {
background: var(--brand-gradient-success-hover);
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25);
}
}
.btn-success-soft {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
color: var(--brand-success);
&:hover:not(:disabled) {
background: rgba(34, 197, 94, 0.15);
border-color: rgba(34, 197, 94, 0.3);
color: var(--brand-success-dark);
}
}
// Warning button variants
.btn-warning {
background: var(--brand-gradient-warning);
border: none;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
&:hover:not(:disabled) {
background: var(--brand-gradient-warning-hover);
box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.25);
}
}
.btn-warning-soft {
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.2);
color: var(--brand-warning);
&:hover:not(:disabled) {
background: rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.3);
color: var(--brand-warning-dark);
}
}
// Danger button variants
.btn-danger {
background: var(--brand-gradient-danger);
border: none;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
&:hover:not(:disabled) {
background: var(--brand-gradient-danger-hover);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}
}
.btn-danger-soft {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
color: var(--brand-danger);
&:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.3);
color: var(--brand-danger-dark);
}
}
// Outline button enhancements
.btn-outline-primary {
border-color: var(--brand-primary);
color: var(--brand-primary);
&:hover:not(:disabled) {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--color-white);
}
}
.btn-outline-success {
border-color: var(--brand-success);
color: var(--brand-success);
&:hover:not(:disabled) {
background: var(--brand-success);
border-color: var(--brand-success);
color: var(--color-white);
}
}
.btn-outline-warning {
border-color: var(--brand-warning);
color: var(--brand-warning);
&:hover:not(:disabled) {
background: var(--brand-warning);
border-color: var(--brand-warning);
color: var(--color-white);
}
}
.btn-outline-danger {
border-color: var(--brand-danger);
color: var(--brand-danger);
&:hover:not(:disabled) {
background: var(--brand-danger);
border-color: var(--brand-danger);
color: var(--color-white);
}
}
// Button sizes
.btn-xs {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border-radius: var(--border-radius-sm);
}
.btn-xl {
padding: 1rem 2rem;
font-size: 1.125rem;
border-radius: var(--border-radius-lg);
}
// Button with icons
.btn-icon {
display: inline-flex;
align-items: center;
i {
margin-right: 0.5rem;
&:last-child {
margin-right: 0;
margin-left: 0.5rem;
}
}
&.btn-icon-only {
padding: 0.625rem;
i {
margin: 0;
}
}
}
// Floating action button
.btn-fab {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1050;
&:hover:not(:disabled) {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
i {
margin: 0;
}
}
// Button groups
.btn-group {
.btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:hover:not(:disabled) {
transform: none;
z-index: 1;
}
}
}
// Toggle buttons
.btn-toggle {
background: var(--color-white);
border: 2px solid var(--color-gray-200);
color: var(--color-gray-600);
&:hover:not(:disabled) {
background: var(--color-gray-50);
border-color: var(--color-gray-300);
}
&.active {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--color-white);
&:hover:not(:disabled) {
background: var(--brand-primary-dark);
border-color: var(--brand-primary-dark);
}
}
}
// Gradient buttons
.btn-gradient-purple {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
&:hover:not(:disabled) {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
}
.btn-gradient-orange {
background: linear-gradient(135deg, #ff9a56 0%, #ff6b95 100%);
border: none;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(255, 154, 86, 0.3);
&:hover:not(:disabled) {
background: linear-gradient(135deg, #ff8a46 0%, #ff5b85 100%);
box-shadow: 0 6px 20px rgba(255, 154, 86, 0.4);
}
}
.btn-gradient-teal {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
&:hover:not(:disabled) {
background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}
}
// Social buttons
.btn-social {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius-md);
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
i {
margin-right: 0.75rem;
font-size: 1.125rem;
}
&:hover {
transform: translateY(-1px);
text-decoration: none;
}
&.btn-google {
background: #db4437;
color: var(--color-white);
&:hover {
background: #c23321;
color: var(--color-white);
}
}
&.btn-facebook {
background: #3b5998;
color: var(--color-white);
&:hover {
background: #2d4373;
color: var(--color-white);
}
}
&.btn-linkedin {
background: #0077b5;
color: var(--color-white);
&:hover {
background: #005885;
color: var(--color-white);
}
}
&.btn-github {
background: #333;
color: var(--color-white);
&:hover {
background: #24292e;
color: var(--color-white);
}
}
}
// Button animations
@keyframes btn-spinner {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes btn-pulse {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
}
}
.btn-pulse {
animation: btn-pulse 2s infinite;
}
// Responsive button adjustments
@include media-breakpoint-down(sm) {
.btn-fab {
width: 3rem;
height: 3rem;
font-size: 1.125rem;
bottom: 1.5rem;
right: 1.5rem;
}
.btn-social {
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
i {
margin-right: 0.5rem;
font-size: 1rem;
}
}
}