matcha-core 1.1.4 → 1.1.6

package/core.scss

@@ -1,3 +1,24 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Breakpoints generator
+//
+// Examples:
+// @include media-breakpoint("xs") {
+// Show styles in small devices ( Phones and Gadget, 0px and up < 600px )
+// }
+// @include media-breakpoint("gt-xs") {
+// Show styles in medium devices (landscapes and tablets, 600px and up < 1024px )
+// }
+// @include media-breakpoint("gt-sm") {
+// Show styles in large devices (tablets and small monitors, 1024px and up < 1440px)
+// }
+// @include media-breakpoint("gt-md") {
+// Show styles in X-Large devices (big desktops, 1440px and up < 1920)
+// }
+// @include media-breakpoint("gt-lg") {
+// Show styles in XX-Large devices (larger desktops, 1920px and up)
+// }
+// -------------------------------------------------------------------------------------------------------------------
+
 // Media step breakpoint mixin based on Angular Material lib
 $breakpoints: (
     xs: 'screen and (max-width: 599px)',
@@ -86,7 +107,7 @@ $helper-breakpoints: (
                 }
 
                 // Big sizes
-                @for $i from 3 through 10 {
+                @for $i from 3 through 20 {
                     $size: $i * 100;
                     $length: #{$size}px;
 
@@ -1104,6 +1125,10 @@ $helper-breakpoints: (
                         .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
+                        }
                     }
                 }
             }
@@ -1116,91 +1141,6 @@ $helper-breakpoints: (
 }
 @include generate-radius-classes($helper-breakpoints);
 
-// -----------------------------------------------------------------------------------------------------
-// @ Border Radius Helpers
-// -----------------------------------------------------------------------------------------------------
-@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}";
-
-        .radius#{$radius-suffix} {
-            border-radius: #{$radius-value}px; // Sem !important
-        }
-
-        .radius#{$radius-suffix}--force {
-            border-radius: #{$radius-value}px !important; // Com !important
-        }
-    }
-    // Classes para todos os cantos e para formatos especiais
-    .radius-circle,
-    .radius-full,
-    .radius-round {
-        border-radius: 999px !important;
-    }
-
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            // Define o sufixo do breakpoint
-            $infix: if($breakpoint == null, "", "-#{$breakpoint}");
-
-            @each $direction in (bottom, top, left, right) {
-                // 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;
-            }
-        }
-    }
-}
-@include generate-border-radius-classes($helper-breakpoints);
-
 // -----------------------------------------------------------------------------------------------------
 // @ Hover - Show/Hide
 // -----------------------------------------------------------------------------------------------------