coer-elements 2.0.23 → 2.0.26

package/styles/layout-flex-wrap.scss

@@ -1,114 +1,116 @@
-.flex-wrap { 
-    display: flex !important; 
-    flex-wrap: wrap !important;
-    gap: 10px;
-} 
-
-@each $key, $value in (
-    'top': flex-start, 
-    'middle': center, 
-    'bottom': flex-end
-    ) { 
-
-    .flex-wrap-#{$key}-left { 
+@mixin mixin($breakpoint) {
+    .#{$breakpoint}flex-wrap { 
         display: flex !important; 
-        align-items: $value !important;
-        justify-content: flex-start !important;
         flex-wrap: wrap !important;
         gap: 10px;
     } 
 
-    .flex-wrap-#{$key}-center { 
-        display: flex !important; 
-        align-items: $value !important;
-        justify-content: center !important;
-        flex-wrap: wrap !important;
-        gap: 10px;
-    }
-
-    .flex-wrap-#{$key}-right { 
-        display: flex !important; 
-        align-items: $value !important;
-        justify-content: flex-end !important;
-        flex-wrap: wrap !important;
-        gap: 10px;
-    }
-
-    .flex-wrap-#{$key}-between { 
-        display: flex !important; 
-        align-items: $value !important;
-        justify-content: space-between !important;
-        flex-wrap: wrap !important;
-        gap: 10px;
-    }
-
-    .flex-wrap-#{$key}-around { 
-        display: flex !important; 
-        align-items: $value !important;
-        justify-content: space-around !important;
-        flex-wrap: wrap !important;
-        gap: 10px;
-    }
+    @each $key, $value in (
+        'top': flex-start, 
+        'middle': center, 
+        'bottom': flex-end
+        ) { 
+
+        .#{$breakpoint}flex-wrap-#{$key}-left { 
+            display: flex !important; 
+            align-items: $value !important;
+            justify-content: flex-start !important;
+            flex-wrap: wrap !important;
+            gap: 10px;
+        } 
 
-    .flex-wrap-#{$key}-evenly { 
-        display: flex !important; 
-        align-items: $value !important;
-        justify-content: space-evenly !important;
-        flex-wrap: wrap !important;
-        gap: 10px;
+        .#{$breakpoint}flex-wrap-#{$key}-center { 
+            display: flex !important; 
+            align-items: $value !important;
+            justify-content: center !important;
+            flex-wrap: wrap !important;
+            gap: 10px;
+        }
+
+        .#{$breakpoint}flex-wrap-#{$key}-right { 
+            display: flex !important; 
+            align-items: $value !important;
+            justify-content: flex-end !important;
+            flex-wrap: wrap !important;
+            gap: 10px;
+        }
+
+        .#{$breakpoint}flex-wrap-#{$key}-between { 
+            display: flex !important; 
+            align-items: $value !important;
+            justify-content: space-between !important;
+            flex-wrap: wrap !important;
+            gap: 10px;
+        }
+
+        .#{$breakpoint}flex-wrap-#{$key}-around { 
+            display: flex !important; 
+            align-items: $value !important;
+            justify-content: space-around !important;
+            flex-wrap: wrap !important;
+            gap: 10px;
+        }
+
+        .#{$breakpoint}flex-wrap-#{$key}-evenly { 
+            display: flex !important; 
+            align-items: $value !important;
+            justify-content: space-evenly !important;
+            flex-wrap: wrap !important;
+            gap: 10px;
+        }
     }
-}
-
 
-@for $i from 1 through 100 { 
-    .flex-item-#{$i}px {
-        flex-basis: $i * 1px !important;
-    } 
-
-    .flex-item-#{$i} {
-        flex-basis: $i * 1% !important;
-    } 
 
-    .flex-item-grow-#{$i}px {
-        flex-grow: 1 !important;
-        flex-basis: $i * 1px !important;
-    }  
+    @for $i from 1 through 100 { 
+        .#{$breakpoint}flex-item-#{$i}px {
+            flex-basis: $i * 1px !important;
+        } 
 
-    .flex-item-grow-#{$i} {
-        flex-grow: 1 !important;
-        flex-basis: $i * 1% !important;
-    } 
-}   
+        .#{$breakpoint}flex-item-#{$i} {
+            flex-basis: $i * 1% !important;
+        } 
 
+        .#{$breakpoint}flex-item-grow-#{$i}px {
+            flex-grow: 1 !important;
+            flex-basis: $i * 1px !important;
+        }  
 
-.flex-item-150px {
-    flex-basis: 150px !important;
-}
+        .#{$breakpoint}flex-item-grow-#{$i} {
+            flex-grow: 1 !important;
+            flex-basis: $i * 1% !important;
+        } 
+    }   
 
-.flex-item-grow-150px {
-    flex-grow: 1 !important;
-    flex-basis: 150px !important;
-}
- 
 
-@for $i from 2 through 10 {      
-    .flex-item-#{$i * 100}px {
-        flex-basis: $i * 100px !important;
+    .#{$breakpoint}flex-item-150px {
+        flex-basis: 150px !important;
     }
 
-    .flex-item-grow-#{$i * 100}px {
+    .#{$breakpoint}flex-item-grow-150px {
         flex-grow: 1 !important;
-        flex-basis: $i * 100px !important;
-    }       
+        flex-basis: 150px !important;
+    }
+    
 
-    @if($i * 100 + 50 < 1000) {
-        .flex-item-#{$i * 100 + 50}px {
-            flex-basis: $i * 100px + 50px;
-        } 
+    @for $i from 2 through 10 {      
+        .#{$breakpoint}flex-item-#{$i * 100}px {
+            flex-basis: $i * 100px !important;
+        }
 
-        .flex-item-grow-#{$i * 100 + 50}px {
+        .#{$breakpoint}flex-item-grow-#{$i * 100}px {
             flex-grow: 1 !important;
-            flex-basis: $i * 100px + 50px;
-        } 
-    }  
-}    
+            flex-basis: $i * 100px !important;
+        }       
+
+        @if($i * 100 + 50 < 1000) {
+            .#{$breakpoint}flex-item-#{$i * 100 + 50}px {
+                flex-basis: $i * 100px + 50px;
+            } 
+
+            .#{$breakpoint}flex-item-grow-#{$i * 100 + 50}px {
+                flex-grow: 1 !important;
+                flex-basis: $i * 100px + 50px;
+            } 
+        }  
+    }    
+}

package/styles/layout-flex.scss

@@ -1,62 +1,66 @@
-@each $key, $value in (
-    'top': flex-start, 
-    'middle': center, 
-    'bottom': flex-end
-    ) {
+@mixin mixin($breakpoint) {
+    @each $key, $value in (
+        'top': flex-start, 
+        'middle': center, 
+        'bottom': flex-end
+        ) {
 
-    .flex-#{$key}-left {
-        display: flex !important;
-        align-items: $value !important;
-        justify-content: flex-start !important;
-    }  
+        .#{$breakpoint}flex-#{$key}-left {
+            display: flex !important;
+            align-items: $value !important;
+            justify-content: flex-start !important;
+        }  
 
-    .flex-#{$key}-center {
-        display: flex !important;
-        align-items: $value !important;
-        justify-content: center !important;
-    }   
+        .#{$breakpoint}flex-#{$key}-center {
+            display: flex !important;
+            align-items: $value !important;
+            justify-content: center !important;
+        }   
 
-    .flex-#{$key}-right {
-        display: flex !important;
-        align-items: $value !important;
-        justify-content: flex-end !important;
-    } 
-    
-    .flex-#{$key}-between {
-        display: flex !important;
-        align-items: $value !important;
-        justify-content: space-between !important;
+        .#{$breakpoint}flex-#{$key}-right {
+            display: flex !important;
+            align-items: $value !important;
+            justify-content: flex-end !important;
+        } 
+
+        .#{$breakpoint}flex-#{$key}-between {
+            display: flex !important;
+            align-items: $value !important;
+            justify-content: space-between !important;
+        }
+
+        .#{$breakpoint}flex-#{$key}-around {
+            display: flex !important;
+            align-items: $value !important;
+            justify-content: space-around !important;
+        } 
+
+        .#{$breakpoint}flex-#{$key}-evenly {
+            display: flex !important;
+            align-items: $value !important;
+            justify-content: space-evenly !important;
+        } 
     }
 
-    .flex-#{$key}-around {
-        display: flex !important;
-        align-items: $value !important;
-        justify-content: space-around !important;
-    } 
 
-    .flex-#{$key}-evenly {
-        display: flex !important;
-        align-items: $value !important;
-        justify-content: space-evenly !important;
-    } 
-}
-
-
-@each $key, $value in (
-    'row': row, 
-    'row-reverse': row-reverse, 
-    'column': column, 
-    'column-reverse': column-reverse
-) {
-    .flex-#{$key} { 
-        display: flex !important;
-        flex-direction: $value !important;
-    } 
-}  
+    // flex direction
+    @each $key, $value in (
+        'row': row, 
+        'row-reverse': row-reverse, 
+        'column': column, 
+        'column-reverse': column-reverse
+    ) {
+        .#{$breakpoint}flex-#{$key} { 
+            display: flex !important;
+            flex-direction: $value !important;
+        } 
+    }  
 
 
-@for $i from 0 through 30 {  
-    .gap-#{$i}px {
-        gap: $i * 1px;
+    // gap
+    @for $i from 0 through 100 {  
+        .#{$breakpoint}gap-#{$i}px {
+            gap: $i * 1px;
+        } 
     } 
-} 
+}

package/styles/layout-grid.scss

@@ -1,18 +1,26 @@
-.grid { 
-    margin: 10px;
-    display: grid !important; 
-    gap: 10px;  
-}
+@mixin mixin($breakpoint) {
+    .#{$breakpoint}grid { 
+        display: grid !important; 
+        margin: 10px;
+        gap: 10px;  
+    }
 
-$colums: 12;
-@for $colum from 1 through $colums {  
-    .grid-columns-#{$colum} { 
-        grid-template-columns: repeat($colum, 1fr);
-    } 
+    $colums: 12;
+    @for $colum from 1 through $colums {  
+        .#{$breakpoint}grid-columns-#{$colum} { 
+            grid-template-columns: repeat($colum, 1fr) !important;
+        } 
 
-    @for $span from 1 through ($colums - ($colum - 1)) {
-        .grid-cell-#{$colum}-#{$span} {
-            grid-column: $colum / span $span;
-        }
+        @for $span from 1 through ($colums - ($colum - 1)) {
+            .#{$breakpoint}grid-cell-#{$colum}-#{$span} {
+                grid-column: $colum / span $span !important;
+            }
+        } 
     } 
+}
+
+
+
+.fill-space {
+    flex: 1 1 auto;
 } 

package/styles/margins.scss

@@ -0,0 +1,60 @@
+@mixin mixin($breakpoint) {
+    @for $i from 0 through 100 {
+        .#{$breakpoint}margin-#{$i}px {
+            margin: $i * 1px !important;
+        }
+
+        // X - Y
+        .#{$breakpoint}margin-y-#{$i}px {
+            margin-top: $i * 1px !important;
+            margin-bottom: $i * 1px !important;
+        }
+
+        .#{$breakpoint}margin-x-#{$i}px {
+            margin-left: $i * 1px !important;
+            margin-right: $i * 1px !important;
+        } 
+        
+        // CUBE
+        .#{$breakpoint}margin-trb-#{$i}px { 
+            margin-top: $i * 1px !important;
+            margin-right: $i * 1px !important;
+            margin-bottom: $i * 1px !important;
+        }
+
+        .#{$breakpoint}margin-rbl-#{$i}px { 
+            margin-right: $i * 1px !important;
+            margin-bottom: $i * 1px !important;
+            margin-left: $i * 1px !important;
+        }
+
+        .#{$breakpoint}margin-blt-#{$i}px { 
+            margin-bottom: $i * 1px !important;
+            margin-left: $i * 1px !important;
+            margin-top: $i * 1px !important; 
+        } 
+
+        .#{$breakpoint}margin-ltr-#{$i}px {
+            margin-left: $i * 1px !important;
+            margin-top: $i * 1px !important;
+            margin-right: $i * 1px !important;
+        }             
+        
+        // ONE SIDE
+        .#{$breakpoint}margin-top-#{$i}px {
+            margin-top: $i * 1px !important;
+        } 
+
+        .#{$breakpoint}margin-right-#{$i}px {
+            margin-right: $i * 1px !important;
+        }  
+
+        .#{$breakpoint}margin-bottom-#{$i}px {
+            margin-bottom: $i * 1px !important;
+        }  
+
+        .#{$breakpoint}margin-left-#{$i}px {
+            margin-left: $i * 1px !important;
+        }    
+    }  
+}

package/styles/overflow.scss

@@ -1,9 +1,11 @@
-@each $key, $value in (
-    'auto': auto, 
-    'visible': visible, 
-    'hidden': hidden,  
-) {
-    .overflow-#{$key} {  
-        overflow: $value !important;
+@mixin mixin($breakpoint) {
+    @each $key, $value in (
+        'auto': auto, 
+        'visible': visible, 
+        'hidden': hidden,  
+    ) {
+        .#{$breakpoint}overflow-#{$key} {  
+            overflow: $value !important;
+        } 
     } 
-} 
+}

package/styles/paddings.scss

@@ -0,0 +1,60 @@
+@mixin mixin($breakpoint) {
+    @for $i from 0 through 100 {   
+        .#{$breakpoint}padding-#{$i}px {
+            padding: $i * 1px !important;
+        }
+
+        // X - Y
+        .#{$breakpoint}padding-y-#{$i}px {
+            padding-top: $i * 1px !important;
+            padding-bottom: $i * 1px !important;
+        }
+
+        .#{$breakpoint}padding-x-#{$i}px {
+            padding-left: $i * 1px !important;
+            padding-right: $i * 1px !important;
+        } 
+
+        // CUBE
+        .#{$breakpoint}padding-trb-#{$i}px { 
+            padding-top: $i * 1px !important;
+            padding-right: $i * 1px !important;
+            padding-bottom: $i * 1px !important;
+        }
+
+        .#{$breakpoint}padding-rbl-#{$i}px { 
+            padding-right: $i * 1px !important;
+            padding-bottom: $i * 1px !important;
+            padding-left: $i * 1px !important;
+        }
+
+        .#{$breakpoint}padding-blt-#{$i}px { 
+            padding-bottom: $i * 1px !important;
+            padding-left: $i * 1px !important;
+            padding-top: $i * 1px !important; 
+        } 
+
+        .#{$breakpoint}padding-ltr-#{$i}px {
+            padding-left: $i * 1px !important;
+            padding-top: $i * 1px !important;
+            padding-right: $i * 1px !important;
+        }
+
+        // ONE SIDE
+        .#{$breakpoint}padding-top-#{$i}px {
+            padding-top: $i * 1px !important;
+        } 
+
+        .#{$breakpoint}padding-right-#{$i}px {
+            padding-right: $i * 1px !important;
+        }  
+
+        .#{$breakpoint}padding-bottom-#{$i}px {
+            padding-bottom: $i * 1px !important;
+        }  
+
+        .#{$breakpoint}padding-left-#{$i}px {
+            padding-left: $i * 1px !important;
+        }  
+    } 
+}

package/styles/paragraphs.scss

@@ -0,0 +1,14 @@
+h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
+    margin: 0px;
+    padding: 0px;
+}
+
+.no-selection::selection {
+    background-color: transparent !important;
+} 
+
+@mixin mixin($breakpoint) {
+    .#{$breakpoint}white-space-nowrap {
+        white-space: nowrap !important;
+    }
+}

package/styles/positions.scss

@@ -0,0 +1,60 @@
+@mixin mixin($breakpoint) {
+    
+    //z-index
+    $counter: 10;
+    @for $i from 0 through $counter {
+        .#{$breakpoint}position-#{$i + 1} {
+            z-index: $counter - $i !important;
+        }
+    } 
+
+
+    //position
+    @each $key, $value in (
+        'static'  : static, 
+        'relative': relative, 
+        'absolute': absolute, 
+        'fixed'   : fixed,
+        'sticky'  : sticky
+    ) {
+        .#{$breakpoint}position-#{$key} { 
+            position: $value !important;
+        } 
+    }   
+
+
+    //
+    @for $i from 0 through 100 {   
+        .#{$breakpoint}top-#{$i}px {
+            top: $i * 1px !important;
+        } 
+
+        .#{$breakpoint}top-negative-#{$i}px {
+            top: $i * -1px !important;
+        } 
+
+        .#{$breakpoint}right-#{$i}px {
+            right: $i * 1px !important;
+        } 
+
+        .#{$breakpoint}right-negative-#{$i}px {
+            right: $i * -1px !important;
+        } 
+    
+        .#{$breakpoint}bottom-#{$i}px {
+            bottom: $i * 1px !important;
+        }
+
+        .#{$breakpoint}bottom-negative-#{$i}px {
+            bottom: $i * -1px !important;
+        }
+
+        .#{$breakpoint}left-#{$i}px {
+            left: $i * 1px !important;
+        } 
+
+        .#{$breakpoint}left-negative-#{$i}px {
+            left: $i * -1px !important;
+        } 
+    } 
+}