HuzaifaInam/Business
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add theme_3d_systems/static/src/scss/components.scss

Browse source
This commit is contained in:
Huzaifa Inam 2026-08-22 21:25:24 +00:00
parent b6137ff1d5
commit 17eadd6a57
1 changed files with 102 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
theme_3d_systems/static/src/scss/components.scss Normal file
View file

@ -0,0 +1,102 @@
// Components: Buttons, Cards, Badges, Modals
@import 'variables';
@import 'mixins';
// Cyber buttons
.btn-gradient-primary {
background: linear-gradient(135deg, $theme-cyan 0%, $theme-blue 100%);
color: #060910 !important;
font-weight: 600;
border: none;
border-radius: 10px;
padding: 0.65rem 1.4rem;
transition: $trans-smooth;
position: relative;
overflow: hidden;
&:hover {
box-shadow: 0 0 20px $theme-cyan-glow;
transform: translateY(-2px);
color: #060910 !important;
}
}
.btn-outline-cyber {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(0, 242, 254, 0.4);
color: $theme-cyan !important;
font-weight: 500;
border-radius: 10px;
padding: 0.65rem 1.4rem;
transition: $trans-smooth;
&:hover {
background: rgba(0, 242, 254, 0.1);
border-color: $theme-cyan;
box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
color: #ffffff !important;
transform: translateY(-2px);
}
}
// Glowing & Status indicators
.status-pulse-dot {
width: 8px;
height: 8px;
background-color: $theme-emerald;
border-radius: 50%;
box-shadow: 0 0 8px $theme-emerald;
display: inline-block;
animation: pulseGlow 2s infinite ease-in-out;
}
.status-live-dot {
width: 8px;
height: 8px;
background-color: $theme-cyan;
border-radius: 50%;
box-shadow: 0 0 8px $theme-cyan;
display: inline-block;
}
// 3D Glass Cards
.card-3d-glass {
@include glass-panel;
padding: 2rem;
transition: $trans-smooth;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
&:hover {
border-color: $glass-border-hover;
background: $glass-bg-hover;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 25px rgba(0, 242, 254, 0.15);
}
}
// Tech Badges
.badge-tech-tag {
background: rgba(0, 242, 254, 0.1);
border: 1px solid rgba(0, 242, 254, 0.25);
color: $theme-cyan;
padding: 0.35rem 0.85rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}