init commit

resources/sass/abstracts/_mixins.scss

@@ -0,0 +1,234 @@
+/**
+ * Mixins - Enterprise SCSS Architecture
+ * Professional Resume Builder
+ * 
+ * @author David Valera Melendez <david@valera-melendez.de>
+ * @created 2025-08-08
+ * @location Made in Germany 🇩🇪
+ */
+
+// ==========================================================================
+// Media Query Mixins
+// ==========================================================================
+@mixin media-up($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin media-down($breakpoint) {
+  @media (max-width: ($breakpoint - 1px)) {
+    @content;
+  }
+}
+
+@mixin media-between($min, $max) {
+  @media (min-width: $min) and (max-width: ($max - 1px)) {
+    @content;
+  }
+}
+
+// ==========================================================================
+// Flexbox Mixins
+// ==========================================================================
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-column-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+// ==========================================================================
+// Button Mixins
+// ==========================================================================
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm $spacing-base;
+  border: none;
+  border-radius: $radius-md;
+  font-weight: $font-weight-medium;
+  font-size: $font-size-base;
+  line-height: $line-height-tight;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all $transition-base;
+  user-select: none;
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
+  }
+  
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+@mixin button-variant($bg-color, $text-color: $white, $hover-bg-color: null) {
+  @include button-base;
+  
+  background-color: $bg-color;
+  color: $text-color;
+  
+  @if $hover-bg-color {
+    &:hover:not(:disabled) {
+      background-color: $hover-bg-color;
+      transform: translateY(-1px);
+      box-shadow: $shadow-md;
+    }
+  } @else {
+    &:hover:not(:disabled) {
+      background-color: darken($bg-color, 8%);
+      transform: translateY(-1px);
+      box-shadow: $shadow-md;
+    }
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+// ==========================================================================
+// Card Mixins
+// ==========================================================================
+@mixin card-base {
+  background-color: $white;
+  border-radius: $radius-xl;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+  transition: all $transition-base;
+}
+
+@mixin card-hover {
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: $shadow-lg;
+  }
+}
+
+// ==========================================================================
+// Form Mixins
+// ==========================================================================
+@mixin form-control-base {
+  display: block;
+  width: 100%;
+  padding: $spacing-sm $spacing-base;
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-normal;
+  color: $text-primary;
+  background-color: $white;
+  border: 2px solid $border-color;
+  border-radius: $radius-md;
+  transition: all $transition-base;
+  
+  &:focus {
+    outline: none;
+    border-color: $primary-color;
+    box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25);
+  }
+  
+  &::placeholder {
+    color: $text-muted;
+    opacity: 1;
+  }
+  
+  &:disabled {
+    background-color: $gray-100;
+    opacity: 1;
+    cursor: not-allowed;
+  }
+}
+
+// ==========================================================================
+// Animation Mixins
+// ==========================================================================
+@mixin fade-in($duration: $transition-base) {
+  animation: fadeIn $duration ease-out;
+}
+
+@mixin slide-up($duration: $transition-base) {
+  animation: slideUp $duration ease-out;
+}
+
+@mixin scale-in($duration: $transition-base) {
+  animation: scaleIn $duration ease-out;
+}
+
+// ==========================================================================
+// Utility Mixins
+// ==========================================================================
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin aspect-ratio($width, $height) {
+  position: relative;
+  
+  &::before {
+    content: '';
+    display: block;
+    padding-top: percentage($height / $width);
+  }
+  
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ==========================================================================
+// Background Pattern Mixins
+// ==========================================================================
+@mixin grid-pattern($size: 50px, $color: rgba(255, 255, 255, 0.1)) {
+  background-image: 
+    radial-gradient(circle at 25% 25%, $color 2px, transparent 2px),
+    radial-gradient(circle at 75% 75%, $color 1px, transparent 1px);
+  background-size: $size $size;
+}
+
+@mixin dot-pattern($size: 20px, $color: rgba(0, 0, 0, 0.1)) {
+  background-image: radial-gradient(circle, $color 1px, transparent 1px);
+  background-size: $size $size;
+}