matcha-core 1.1.2 → 1.1.4

package/core.scss

@@ -274,29 +274,6 @@ $helper-breakpoints: (
 @mixin generate-layout-grid($helper-breakpoints) {
     $grid-length: 12;
     $grid-prefix: "col";
-    // @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-    //     @include media-breakpoint($materialBreakpoint) {
-    //         $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-
-    //         .row#{$infix} {
-    //             display: flex;
-    //             flex-direction: column;
-    //         }
-
-    //         @for $i from 1 through $grid-length {
-    //             .row#{$infix} > .#{$grid-prefix}-#{$i} {
-    //                 flex-basis: #{($i / $grid-length) * 100%};
-    //             }
-    //             .row#{$infix} > .#{$grid-prefix}-offset-#{$i} {
-    //                 margin-left: #{($i / $grid-length) * 100%};
-    //             }
-    //         }
-
-    //         .row#{$infix} {
-    //             flex-direction: row;
-    //         }
-    //     }
-    // }
 
     [class^="grid-"] {
         display: grid;
@@ -413,17 +390,17 @@ $helper-breakpoints: (
 // @ Z-index classes
 // -----------------------------------------------------------------------------------------------------
 @mixin generate-z-index-classes($helper-breakpoints) {
-    $zIndex: 24;
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            @for $z from -1 through $zIndex {
-                $class-name: if($materialBreakpoint == null, ".z-index-#{$z}", ".z-index-#{$materialBreakpoint}-#{$z}");
-                $class-name-force: if($materialBreakpoint == null, ".z-index-#{$z}--force", ".z-index-#{$materialBreakpoint}-#{$z}--force");
-                #{$class-name} {
-                    z-index: #{$z};
+    @each $breakpoint, $breakpointName in $helper-breakpoints {
+        @include media-breakpoint($breakpointName) {
+            $infix: if($breakpointName == null, "", "-#{$breakpoint}");
+
+            @for $i from -1 through 24 {
+                .z-index#{$infix}-#{$i} {
+                    z-index: #{$i};
                 }
-                #{$class-name-force} {
-                    z-index: #{$z} !important;
+
+                .z-index#{$infix}-#{$i}--force {
+                    z-index: #{$i} !important;
                 }
             }
         }
@@ -1003,30 +980,30 @@ $helper-breakpoints: (
 
             // Classes para overflow geral
             @each $class, $value in $overflow-classes {
-                .overflow-#{$class}#{$infix} {
+                .overflow#{$infix}-#{$class} {
                     overflow: $value;
                 }
-                .overflow-#{$class}#{$infix}--force {
+                .overflow#{$infix}-#{$class}--force {
                     overflow: $value !important;
                 }
             }
 
             // Classes para overflow no eixo x
             @each $class, $value in map-get($overflow-directions, x) {
-                .overflow-x-#{$class}#{$infix} {
+                .overflow-x#{$infix}-#{$class} {
                     overflow-x: $value;
                 }
-                .overflow-x-#{$class}#{$infix}--force {
+                .overflow-x#{$infix}-#{$class}--force {
                     overflow-x: $value !important;
                 }
             }
 
             // Classes para overflow no eixo y
             @each $class, $value in map-get($overflow-directions, y) {
-                .overflow-y-#{$class}#{$infix} {
+                .overflow-y#{$infix}-#{$class} {
                     overflow-y: $value;
                 }
-                .overflow-y-#{$class}#{$infix}--force {
+                .overflow-y#{$infix}-#{$class}--force {
                     overflow-y: $value !important;
                 }
             }
@@ -1077,12 +1054,73 @@ $helper-breakpoints: (
 }
 @include generate-border-size-classes($helper-breakpoints);
 
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Size Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-radius-classes($helper-breakpoints){
+    $radius-directions: (bottom: b, top: t, left: l, right: r);
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 0 through 8 {
+                $radius-value: $i * 2;
+                $radius-suffix: "-#{$radius-value}";
+
+                // Classes para borda geral
+                .radius#{$infix}#{$radius-suffix} {
+                    border-radius: #{$radius-value}px; // Sem !important
+                }
+
+                // Classes para bordas individuais
+                @each $direction, $abbrev in $radius-directions {
+                    @if $direction == bottom {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: 0 0 #{$radius-value}px #{$radius-value}px; // Sem !important
+                        }
+
+                        .radius#{$infix}-#{$direction}#{$radius-suffix}--force {
+                            border-radius: 0 0 #{$radius-value}px #{$radius-value}px !important; // Com !important
+                        }
+                    } @else if $direction == top {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: #{$radius-value}px #{$radius-value}px 0 0; // Sem !important
+                        }
+
+                        .radius#{$infix}-#{$direction}#{$radius-suffix}--force {
+                            border-radius: #{$radius-value}px #{$radius-value}px 0 0 !important; // Com !important
+                        }
+                    } @else if $direction == left {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: #{$radius-value}px 0 0 #{$radius-value}px; // Sem !important
+                        }
+
+                        .radius#{$infix}-#{$direction}#{$radius-suffix}--force {
+                            border-radius: #{$radius-value}px 0 0 #{$radius-value}px !important; // Com !important
+                        }
+                    } @else if $direction == right {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: 0 #{$radius-value}px #{$radius-value}px 0; // Sem !important
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // Classe para borda nula
+    .border-none {
+        border: none !important;
+    }
+}
+@include generate-radius-classes($helper-breakpoints);
+
 // -----------------------------------------------------------------------------------------------------
 // @ Border Radius Helpers
 // -----------------------------------------------------------------------------------------------------
-@mixin _border-radius-generic($breakpoint) {
-    $infix: if($breakpoint == null, "", "-#{$breakpoint}");
-    // Classes para todos os cantos e para formatos especiais
+@mixin generate-border-radius-classes($helper-breakpoints) {
+    // Aplicar os mixins para cada breakpoint
     @for $i from 0 through 8 {
         $radius-value: $i * 2;
         $radius-suffix: "-#{$radius-value}";
@@ -1095,67 +1133,68 @@ $helper-breakpoints: (
             border-radius: #{$radius-value}px !important; // Com !important
         }
     }
-    .radius#{$infix}-circle,
-    .radius#{$infix}-full,
-    .radius#{$infix}-round {
+    // Classes para todos os cantos e para formatos especiais
+    .radius-circle,
+    .radius-full,
+    .radius-round {
         border-radius: 999px !important;
     }
-}
-@mixin _border-radius-individual($direction, $breakpoint) {
-    // Define o sufixo do breakpoint
-    $infix: if($breakpoint == null, "", "-#{$breakpoint}");
-
-    // Seletores para as classes de borda
-    $direction-selector: unquote(".radius#{$infix}-#{$direction}");
 
-    // Aplica o raio dependendo da direção
-    @for $i from 0 through 8 {
-        $radius-value: $i * 2;
-        $radius-suffix: "-#{$radius-value}";
-
-        @if $direction == bottom {
-            #{$direction-selector}#{$radius-suffix} {
-                border-radius: 0 0 #{$radius-value}px #{$radius-value}px; // Sem !important
-            }
-
-            #{$direction-selector}#{$radius-suffix}--force {
-                border-radius: 0 0 #{$radius-value}px #{$radius-value}px !important; // Com !important
-            }
-        } @else if $direction == top {
-            #{$direction-selector}#{$radius-suffix} {
-                border-radius: #{$radius-value}px #{$radius-value}px 0 0; // Sem !important
-            }
-
-            #{$direction-selector}#{$radius-suffix}--force {
-                border-radius: #{$radius-value}px #{$radius-value}px 0 0 !important; // Com !important
-            }
-        } @else if $direction == left {
-            #{$direction-selector}#{$radius-suffix} {
-                border-radius: #{$radius-value}px 0 0 #{$radius-value}px; // Sem !important
-            }
-
-            #{$direction-selector}#{$radius-suffix}--force {
-                border-radius: #{$radius-value}px 0 0 #{$radius-value}px !important; // Com !important
-            }
-        } @else if $direction == right {
-            #{$direction-selector}#{$radius-suffix} {
-                border-radius: 0 #{$radius-value}px #{$radius-value}px 0; // Sem !important
-            }
-
-            #{$direction-selector}#{$radius-suffix}--force {
-                border-radius: 0 #{$radius-value}px #{$radius-value}px 0 !important; // Com !important
-            }
-        }
-    }
-}
-@mixin generate-border-radius-classes($helper-breakpoints) {
-    // Aplicar os mixins para cada breakpoint
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
-            @include _border-radius-generic($breakpoint);
-            // Aplica as classes individuais para cada direção de borda com e sem !important
+            // Define o sufixo do breakpoint
+            $infix: if($breakpoint == null, "", "-#{$breakpoint}");
+
             @each $direction in (bottom, top, left, right) {
-                @include _border-radius-individual($direction, $breakpoint);
+                // Seletores para as classes de borda
+                // $direction-selector: unquote(".radius#{$infix}-#{$direction}");
+
+                // Aplica o raio dependendo da direção
+                @for $i from 0 through 8 {
+                    $radius-value: $i * 2;
+                    $radius-suffix: "-#{$radius-value}";
+
+                    @if $direction == bottom {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: 0 0 #{$radius-value}px #{$radius-value}px; // Sem !important
+                        }
+
+                        .radius#{$infix}-#{$direction}#{$radius-suffix}--force {
+                            border-radius: 0 0 #{$radius-value}px #{$radius-value}px !important; // Com !important
+                        }
+                    } @else if $direction == top {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: #{$radius-value}px #{$radius-value}px 0 0; // Sem !important
+                        }
+
+                        .radius#{$infix}-#{$direction}#{$radius-suffix}--force {
+                            border-radius: #{$radius-value}px #{$radius-value}px 0 0 !important; // Com !important
+                        }
+                    } @else if $direction == left {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: #{$radius-value}px 0 0 #{$radius-value}px; // Sem !important
+                        }
+
+                        .radius#{$infix}-#{$direction}#{$radius-suffix}--force {
+                            border-radius: #{$radius-value}px 0 0 #{$radius-value}px !important; // Com !important
+                        }
+                    } @else if $direction == right {
+                        .radius#{$infix}-#{$direction}#{$radius-suffix} {
+                            border-radius: 0 #{$radius-value}px #{$radius-value}px 0; // Sem !important
+                        }
+
+                        .radius#{$infix}-#{$direction}#{$radius-suffix}--force {
+                            border-radius: 0 #{$radius-value}px #{$radius-value}px 0 !important; // Com !important
+                        }
+                    }
+                }
+            }
+
+            // Classes para todos os cantos e para formatos especiais
+            .radius#{$infix}-circle,
+            .radius#{$infix}-full,
+            .radius#{$infix}-round {
+                border-radius: 999px !important;
             }
         }
     }