matcha-core 1.0.2 → 1.1.3

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;
@@ -412,26 +389,24 @@ $helper-breakpoints: (
 // -----------------------------------------------------------------------------------------------------
 // @ Z-index classes
 // -----------------------------------------------------------------------------------------------------
-@mixin generate-z-index-classes($zIndex, $helper-breakpoints) {
-    @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");
+@mixin generate-z-index-classes($helper-breakpoints) {
+    @each $breakpoint, $breakpointName in $helper-breakpoints {
+        @include media-breakpoint($breakpointName) {
+            $infix: if($breakpointName == null, "", "-#{$breakpoint}");
 
-                #{$class-name} {
-                    z-index: #{$z};
+            @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;
                 }
             }
         }
     }
 }
-@include generate-z-index-classes(24, $helper-breakpoints);
+@include generate-z-index-classes($helper-breakpoints);
 
 // -----------------------------------------------------------------------------------------------------
 // @ Order classes
@@ -603,6 +578,24 @@ $helper-breakpoints: (
                     }
                 }
             }
+            // For margins, include negative values
+            @for $index from 0 through 3 {
+                .flex#{$infix}-grow-#{$index} {
+                    flex-grow: $index;
+                }
+                .flex#{$infix}-shrink-#{$index} {
+                    flex-shrink: $index;
+                }
+            }
+            .flex#{$infix}-full {
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: 100%;
+                ;
+            }
+            .flex#{$infix}-basis-1 {
+                flex-basis: 100%;
+            }
         }
     }
 }
@@ -987,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;
                 }
             }
@@ -1064,9 +1057,8 @@ $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}";
@@ -1079,67 +1071,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 {
+                        #{$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
+                        }
+                    }
+                }
+            }
+
+            // Classes para todos os cantos e para formatos especiais
+            .radius#{$infix}-circle,
+            .radius#{$infix}-full,
+            .radius#{$infix}-round {
+                border-radius: 999px !important;
             }
         }
     }
@@ -1199,3 +1192,34 @@ $helper-breakpoints: (
     }
 }
 @include generate-rotate-animation-classes();
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Size Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-line-clamp-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            @for $i from 0 through 6 {
+                // Classes para borda geral
+                .line-clamp#{$infix}-#{$i}{
+                    overflow: hidden;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: $i;
+                    text-overflow: ellipsis;
+                    word-break: break-word;
+                    white-space: initial;
+                    -webkit-box-orient: vertical;
+                }
+            }
+            .line-clamp#{$infix}-none{
+                overflow: visible;
+                display: block;
+                -webkit-box-orient: horizontal;
+                -webkit-line-clamp: none;
+            }
+        }
+    }
+}
+@include generate-line-clamp-classes($helper-breakpoints);