현성필
145 lines
3.1 KiB
SCSS
145 lines
3.1 KiB
SCSS
// -----------------------------------------------------------------------------
|
|
// This file contains all application-wide SASS mixins
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Media query mixins
|
|
@mixin respond-to($breakpoint) {
|
|
@if $breakpoint == 'xs' {
|
|
@media (max-width: #{$breakpoint-xs}) { @content; }
|
|
} @else if $breakpoint == 'sm' {
|
|
@media (max-width: #{$breakpoint-sm}) { @content; }
|
|
} @else if $breakpoint == 'md' {
|
|
@media (max-width: #{$breakpoint-md}) { @content; }
|
|
} @else if $breakpoint == 'lg' {
|
|
@media (min-width: #{$breakpoint-lg}) { @content; }
|
|
} @else if $breakpoint == 'xl' {
|
|
@media (min-width: #{$breakpoint-xl}) { @content; }
|
|
} @else if $breakpoint == 'mobile' {
|
|
@media (max-width: #{$breakpoint-lg}) { @content; }
|
|
} @else if $breakpoint == 'tablet' {
|
|
@media (max-width: #{$breakpoint-md}) { @content; }
|
|
}
|
|
}
|
|
|
|
// Flexbox mixins
|
|
@mixin flex-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@mixin flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
// Button mixin
|
|
@mixin button-base {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: $spacing-sm;
|
|
padding: $button-padding-y $button-padding-x;
|
|
border-radius: $border-radius-lg;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: $font-size-base;
|
|
text-decoration: none;
|
|
transition: $transition-base;
|
|
cursor: pointer;
|
|
border: none;
|
|
|
|
&:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
|
|
// Card mixin
|
|
@mixin card {
|
|
background: $white;
|
|
border-radius: $border-radius-2xl;
|
|
padding: $card-padding;
|
|
transition: $transition-base;
|
|
|
|
&:hover {
|
|
//transform: translateY(-5px);
|
|
box-shadow: $shadow-lg;
|
|
}
|
|
}
|
|
|
|
// Gradient text
|
|
@mixin gradient-text($gradient) {
|
|
background: $gradient;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
// Truncate text
|
|
@mixin text-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Absolute center
|
|
@mixin absolute-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
// Backdrop blur
|
|
@mixin backdrop-blur($amount: 10px) {
|
|
backdrop-filter: blur($amount);
|
|
-webkit-backdrop-filter: blur($amount);
|
|
}
|
|
|
|
// Animation mixins
|
|
@mixin animate-float {
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
@mixin animate-bounce {
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
@mixin animate-slide-in-down {
|
|
animation: slideInDown 0.6s ease-out;
|
|
}
|
|
|
|
@mixin animate-slide-in-up {
|
|
animation: slideInUp 0.8s ease-out;
|
|
}
|
|
|
|
@mixin animate-fade-in {
|
|
animation: fadeIn 1.2s ease-out;
|
|
}
|
|
|
|
// Hover lift effect
|
|
@mixin hover-lift {
|
|
transition: $transition-base;
|
|
|
|
&:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: $shadow-xl;
|
|
}
|
|
}
|
|
|
|
// Glass effect
|
|
@mixin glass-effect {
|
|
background: rgba($white, 0.95);
|
|
@include backdrop-blur(10px);
|
|
border: 1px solid rgba($white, 0.18);
|
|
}
|
|
|
|
// Pattern circle
|
|
@mixin pattern-circle($size, $color) {
|
|
width: $size;
|
|
height: $size;
|
|
background: $color;
|
|
border-radius: 50%;
|
|
opacity: 0.1;
|
|
position: absolute;
|
|
}
|