coer-elements 2.0.23 → 2.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "2.0.23",
+  "version": "2.0.26",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "Components",

package/styles/animations.scss

@@ -1,11 +1,104 @@
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+@keyframes KeyOpacity {
+    from { opacity: 0 }
+    to   { opacity: 1 }
+} 
+
+@keyframes keyRotate360 {
+    from { transform: rotate(0deg)   }
+    to   { transform: rotate(360deg) }
+}
+
+@keyframes keyShake {
+    0%   { transform: rotate(25deg)  }  
+    25%  { transform: rotate(-25deg) }
+    50%  { transform: rotate(25deg)  }
+    75%  { transform: rotate(-25deg) }
+    100% { transform: rotate(25deg)  } 
 }
 
-.fade-in {
-    animation-name: fadeIn;
-    animation-duration: 1.5s;
-    animation-iteration-count: 1;
-    animation-fill-mode: both;
+
+@keyframes KeyScale {
+    from { transform: scale(1.0) }
+    to   { transform: scale(1.3) }
+}
+
+
+@mixin mixin($breakpoint) {    
+    .#{$breakpoint}animation-fadeIn {
+        animation-name: KeyOpacity !important;
+        animation-duration: 1.5s !important;
+        animation-fill-mode: both !important;
+        animation-iteration-count: 1;
+    }
+    
+    .#{$breakpoint}animation-fadeOut {
+        animation-name: KeyOpacity !important;
+        animation-duration: 1.5s !important;
+        animation-fill-mode: both !important;
+        animation-direction: reverse !important;
+        animation-iteration-count: 1;
+    }
+
+    .#{$breakpoint}animation-spin {
+        animation-name: keyRotate360 !important;
+        animation-iteration-count: infinite !important;
+        animation-fill-mode: both !important;
+        animation-timing-function: linear !important;
+        animation-duration: 1s;
+    } 
+
+    .#{$breakpoint}animation-shake {
+        animation-name: keyShake !important;
+        animation-iteration-count: infinite !important;
+        animation-direction: alternate !important;
+        animation-fill-mode: both !important;
+        animation-timing-function: linear !important;
+        animation-duration: 0.6s;  
+    }
+ 
+    .#{$breakpoint}animation-appear {
+        animation-name: KeyOpacity !important;
+        animation-iteration-count: infinite !important;
+        animation-direction: alternate !important;
+        animation-timing-function: linear !important;
+        animation-fill-mode: both !important;
+        animation-duration: 1s; 
+    } 
+
+    .#{$breakpoint}animation-pulse {
+        animation-name: KeyScale !important;
+        animation-iteration-count: infinite !important;
+        animation-fill-mode: both !important;
+        animation-duration: 0.6s;  
+    } 
+
+    .#{$breakpoint}animation-beat {
+        animation-name: KeyScale !important;
+        animation-iteration-count: infinite !important;
+        animation-direction: alternate !important;
+        animation-timing-function: linear !important;
+        animation-fill-mode: both !important;
+        animation-duration: 0.5s; 
+    }
+    
+    .#{$breakpoint}speed-0 {
+        animation-duration: 0.0s !important;
+    }
+
+    //SPEED
+    @for $integer from 1 through 10 { 
+        @for $decimals from 1 through 10 {
+            @if($decimals == 10) {
+                .#{$breakpoint}animation-speed-#{($integer - 1) * 10 + $decimals} {
+                    animation-duration: $integer + 0.0s !important;
+                }
+            }
+
+            @else {
+                .#{$breakpoint}animation-speed-#{($integer - 1) * 10 + $decimals} {
+                    animation-duration: #{($integer - 1) + ($decimals * 0.1)}s !important;
+                }
+            }     
+        }
+    }     
 } 

package/styles/borders.scss

@@ -0,0 +1,126 @@
+@mixin mixin($breakpoint) {
+    .#{$breakpoint}border-none {
+        border: none !important;
+    }
+
+    @each $key, $value in ( 
+        'dotted': dotted, 
+        'dashed': dashed,
+        'solid' : solid, 
+        'double': double, 
+        'groove': groove,
+        'ridge' : ridge,
+        'inset' : inset,
+        'outset': outset 
+    ) {  
+        @for $size from 0 through 10 {  
+            .#{$breakpoint}border-#{$key}-#{$size}px {
+                border: ($size * 1px) $value var(--gray) !important;
+            }
+
+            // X - Y
+            .#{$breakpoint}border-#{$key}-y-#{$size}px {
+                border-top: ($size * 1px) $value var(--gray) !important;
+                border-bottom: ($size * 1px) $value var(--gray) !important;
+            }
+        
+            .#{$breakpoint}border-#{$key}-x-#{$size}px {
+                border-left: ($size * 1px) $value var(--gray) !important;
+                border-right: ($size * 1px) $value var(--gray) !important;
+            }
+
+            // CUBE 
+            .#{$breakpoint}border-#{$key}-trb-#{$size}px { 
+                border-top: ($size * 1px) $value var(--gray) !important;
+                border-right: ($size * 1px) $value var(--gray) !important;
+                border-bottom: ($size * 1px) $value var(--gray) !important;
+            }
+
+            .#{$breakpoint}border-#{$key}-rbl-#{$size}px { 
+                border-right: ($size * 1px) $value var(--gray) !important;
+                border-bottom: ($size * 1px) $value var(--gray) !important;
+                border-left: ($size * 1px) $value var(--gray) !important;
+            }
+
+            .#{$breakpoint}border-#{$key}-blt-#{$size}px { 
+                border-bottom: ($size * 1px) $value var(--gray) !important;
+                border-left: ($size * 1px) $value var(--gray) !important;
+                border-top: ($size * 1px) $value var(--gray) !important;
+            } 
+
+            .#{$breakpoint}border-#{$key}-ltr-#{$size}px {
+                border-left: ($size * 1px) $value var(--gray) !important;
+                border-top: ($size * 1px) $value var(--gray) !important;
+                border-right: ($size * 1px) $value var(--gray) !important;
+            } 
+
+            // ONE SIDE
+            .#{$breakpoint}border-#{$key}-top-#{$size}px {
+                border-top: ($size * 1px) $value var(--gray) !important;
+            }
+
+            .#{$breakpoint}border-#{$key}-right-#{$size}px {
+                border-right: ($size * 1px) $value var(--gray) !important;
+            }
+
+            .#{$breakpoint}border-#{$key}-bottom-#{$size}px {
+                border-bottom: ($size * 1px) $value var(--gray) !important;
+            }
+
+            .#{$breakpoint}border-#{$key}-left-#{$size}px {
+                border-left: ($size * 1px) $value var(--gray) !important;
+            }
+        }
+        
+        
+        @for $i from 0 through 50 {
+            .#{$breakpoint}border-radius-#{$i}px {
+                border-radius: $i * 1px !important;
+            } 
+            
+            // TOP - LEFT
+            .#{$breakpoint}border-radius-top-left-#{$i}px {
+                border-top-left-radius: $i * 1px !important; 
+            }
+
+            // TOP - RIGHT
+            .#{$breakpoint}border-radius-top-right-#{$i}px {
+                border-top-right-radius: $i * 1px !important; 
+            }
+
+            // BOTTOM - LEFT
+            .#{$breakpoint}border-radius-bottom-left-#{$i}px {
+                border-bottom-left-radius: $i * 1px !important; 
+            }
+
+            // BOTTOM - RIGHT
+            .#{$breakpoint}border-radius-bottom-right-#{$i}px {
+                border-bottom-right-radius: $i * 1px !important; 
+            }
+
+            // TOP
+            .#{$breakpoint}border-radius-top-#{$i}px {
+                border-top-left-radius: $i * 1px !important;
+                border-top-right-radius: $i * 1px !important;
+            }
+
+            // Bottom
+            .#{$breakpoint}border-radius-bottom-#{$i}px {
+                border-bottom-left-radius: $i * 1px !important;
+                border-bottom-right-radius: $i * 1px !important;
+            }
+
+            // RIGHT
+            .#{$breakpoint}border-radius-right-#{$i}px {
+                border-top-right-radius: $i * 1px !important;
+                border-bottom-right-radius: $i * 1px !important;
+            }
+
+            // LEFT
+            .#{$breakpoint}border-radius-left-#{$i}px {
+                border-top-left-radius: $i * 1px !important;
+                border-bottom-left-radius: $i * 1px !important;
+            }
+        }
+    }
+}