matcha-core 1.0.0

package/core.scss

@@ -0,0 +1,1210 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
+    md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
+    lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    lt-sm: 'screen and (max-width: 599px)',
+    lt-md: 'screen and (max-width: 1023px)',
+    lt-lg: 'screen and (max-width: 1439px)',
+    lt-xl: 'screen and (max-width: 1919px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    gt-sm: 'screen and (min-width: 1024px)', //old size - 980px
+    gt-md: 'screen and (min-width: 1440px)', //old size - 1280px
+    gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+    xs: null,
+    sm: 'gt-xs',
+    md: 'gt-sm',
+    lg: 'gt-md',
+    xl: 'gt-lg'
+);
+
+@mixin media-breakpoint($breakpointName) {
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+    @if ($mediaQuery == null) {
+        @content;
+    } @else {
+        @media #{$mediaQuery} {
+            @content;
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Size classes | Width and Height
+// -----------------------------------------------------------------------------------------------------
+@mixin _size-classes($prop, $abbrev, $length, $size, $infix: "") {
+    .#{$abbrev}#{$infix}-#{$size} {
+        #{$prop}: $length;
+    }
+
+    .#{$abbrev}#{$infix}-#{$size}--force {
+        #{$prop}: $length !important;
+    }
+
+    .max-#{$abbrev}#{$infix}-#{$size} {
+        max-#{$prop}: $length;
+    }
+
+    .max-#{$abbrev}#{$infix}-#{$size}--force {
+        max-#{$prop}: $length !important;
+    }
+
+    .min-#{$abbrev}#{$infix}-#{$size} {
+        min-#{$prop}: $length;
+    }
+
+    .min-#{$abbrev}#{$infix}-#{$size}--force {
+        min-#{$prop}: $length !important;
+    }
+}
+@mixin generate-size-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $prop, $abbrev in (height: h, width: w) {
+                // Pixels
+                @for $index from 0 through 64 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    @include _size-classes($prop, $abbrev, $length, $size, $infix);
+                }
+
+                // Percentages
+                @for $i from 0 through 20 {
+                    $i-p: 5 * $i;
+                    $size-p: 5% * $i;
+
+                    @include _size-classes($prop, $abbrev, $size-p, "#{$i-p}-p", $infix);
+                }
+
+                // Big sizes
+                @for $i from 3 through 10 {
+                    $size: $i * 100;
+                    $length: #{$size}px;
+
+                    @include _size-classes($prop, $abbrev, $length, $size, $infix);
+                }
+
+                // Auto
+                .#{$abbrev}#{$infix}-auto {
+                    #{$prop}: auto;
+                }
+
+                .#{$abbrev}#{$infix}-auto--force {
+                    #{$prop}: auto !important;
+                }
+            }
+        }
+    }
+}
+@include generate-size-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Spacing classes - Margin and Padding
+// Generate spacing values from -64 to 64 jumping from 4 to 4
+// -----------------------------------------------------------------------------------------------------
+@mixin _spacing-classes($prop, $abbrev, $length, $size, $infix: "") {
+    .#{$abbrev}#{$infix}-#{$size} {
+        #{$prop}: $length;
+    }
+
+    .#{$abbrev}#{$infix}-#{$size}--force {
+        #{$prop}: $length !important;
+    }
+
+    .#{$abbrev}x#{$infix}-#{$size} {
+        #{$prop}-right: $length;
+        #{$prop}-left: $length;
+    }
+
+    .#{$abbrev}x#{$infix}-#{$size}--force {
+        #{$prop}-right: $length !important;
+        #{$prop}-left: $length !important;
+    }
+
+    .#{$abbrev}y#{$infix}-#{$size} {
+        #{$prop}-top: $length;
+        #{$prop}-bottom: $length;
+    }
+
+    .#{$abbrev}y#{$infix}-#{$size}--force {
+        #{$prop}-top: $length !important;
+        #{$prop}-bottom: $length !important;
+    }
+
+    .#{$abbrev}t#{$infix}-#{$size} {
+        #{$prop}-top: $length;
+    }
+
+    .#{$abbrev}t#{$infix}-#{$size}--force {
+        #{$prop}-top: $length !important;
+    }
+
+    .#{$abbrev}r#{$infix}-#{$size} {
+        #{$prop}-right: $length;
+    }
+
+    .#{$abbrev}r#{$infix}-#{$size}--force {
+        #{$prop}-right: $length !important;
+    }
+
+    .#{$abbrev}b#{$infix}-#{$size} {
+        #{$prop}-bottom: $length;
+    }
+
+    .#{$abbrev}b#{$infix}-#{$size}--force {
+        #{$prop}-bottom: $length !important;
+    }
+
+    .#{$abbrev}l#{$infix}-#{$size} {
+        #{$prop}-left: $length;
+    }
+
+    .#{$abbrev}l#{$infix}-#{$size}--force {
+        #{$prop}-left: $length !important;
+    }
+}
+@mixin generate-spacing-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $prop, $abbrev in (margin: m, padding: p) {
+                // For margins, include negative values
+                @for $index from -16 through 16 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    @include _spacing-classes($prop, $abbrev, $length, $size, $infix);
+                }
+
+                // For paddings, only positive values
+                @if ($prop == padding) {
+                    @for $index from 0 through 16 {
+                        $size: $index * 4;
+                        $length: #{$size}px;
+
+                        @include _spacing-classes($prop, $abbrev, $length, $size, $infix);
+                    }
+                }
+
+                // Special auto classes for margin
+                @if ($prop == margin) {
+                    .m#{$infix}-auto {
+                        margin: auto;
+                    }
+
+                    .m#{$infix}-auto--force {
+                        margin: auto !important;
+                    }
+
+                    .mt#{$infix}-auto {
+                        margin-top: auto;
+                    }
+
+                    .mt#{$infix}-auto--force {
+                        margin-top: auto !important;
+                    }
+
+                    .mr#{$infix}-auto {
+                        margin-right: auto;
+                    }
+
+                    .mr#{$infix}-auto--force {
+                        margin-right: auto !important;
+                    }
+
+                    .mb#{$infix}-auto {
+                        margin-bottom: auto;
+                    }
+
+                    .mb#{$infix}-auto--force {
+                        margin-bottom: auto !important;
+                    }
+
+                    .ml#{$infix}-auto {
+                        margin-left: auto;
+                    }
+
+                    .ml#{$infix}-auto--force {
+                        margin-left: auto !important;
+                    }
+
+                    .mx#{$infix}-auto {
+                        margin-right: auto;
+                        margin-left: auto;
+                    }
+
+                    .mx#{$infix}-auto--force {
+                        margin-right: auto !important;
+                        margin-left: auto !important;
+                    }
+
+                    .my#{$infix}-auto {
+                        margin-top: auto;
+                        margin-bottom: auto;
+                    }
+
+                    .my#{$infix}-auto--force {
+                        margin-top: auto !important;
+                        margin-bottom: auto !important;
+                    }
+                }
+            }
+        }
+    }
+}
+@include generate-spacing-classes($helper-breakpoints);
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Display classes | Flex and Grid
+// -------------------------------------------------------------------------------------------------------------------
+
+$grid-prefix: "col";
+@mixin _grid-prop($i) {
+    display: grid;
+    grid-template-columns: repeat($i, minmax(0, 1fr));
+}
+@mixin generate-layout-grid($grid-prefix, $grid-length, $helper-breakpoints) {
+    @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;
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 1 through $grid-length {
+                .grid#{$infix}-#{$i} {
+                    @include _grid-prop($i);
+                }
+
+                .span#{$infix}-#{$i}c,
+                .colspan#{$infix}-#{$i} {
+                    grid-column-end: span #{$i};
+                }
+
+                .span#{$infix}-#{$i}r,
+                .rowspan#{$infix}-#{$i} {
+                    grid-row-end: span #{$i};
+                }
+            }
+        }
+    }
+}
+@mixin generate-layout-flex($grid-prefix, $grid-length, $helper-breakpoints) {
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+
+        > div[class*="#{$grid-prefix}-"] {
+            box-sizing: border-box;
+        }
+
+        > div:not([class*="#{$grid-prefix}-"]) {
+            flex: 1;
+        }
+
+        @for $i from 1 through $grid-length {
+            .#{$grid-prefix}-#{$i} {
+                flex-basis: #{($i / $grid-length) * 100%};
+            }
+
+            .#{$grid-prefix}-offset-#{$i} {
+                margin-left: #{($i / $grid-length) * 100%};
+            }
+        }
+
+        @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+            @include media-breakpoint($materialBreakpoint) {
+                $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+                @for $i from 1 through $grid-length {
+                    .#{$grid-prefix}#{$infix}-#{$i} {
+                        flex-basis: 100%;
+                    }
+
+                    .#{$grid-prefix}-offset#{$infix}-#{$i} {
+                        margin-left: 0;
+                    }
+                }
+            }
+        }
+
+        @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
+            > div[class*="#{$grid-prefix}-"].#{$classLabel} {
+                align-self: $cssValue;
+            }
+        }
+
+        @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end, space-around space-around, space-between space-between) {
+            &.#{$classLabel} {
+                justify-content: $cssValue;
+            }
+        }
+    }
+}
+@include generate-layout-grid($grid-prefix, 12, $helper-breakpoints);
+@include generate-layout-flex($grid-prefix, 12, $helper-breakpoints);
+
+// -------------------------------------------------------------------------------------------------------------------
+// @Gaps classes
+// -------------------------------------------------------------------------------------------------------------------
+@mixin generate-gap-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 0 through 12 {
+                $size: $i * 4;
+                .gap#{$infix}-#{$size} {
+                    column-gap: #{$size}px;
+                    row-gap: #{$size}px;
+                }
+            }
+        }
+    }
+}
+@include generate-gap-classes($helper-breakpoints);
+// Dynamic gaps
+.gap-inside {
+    -moz-column-gap: 16px;
+    column-gap: 16px;
+    row-gap: 16px;
+}
+.gap-outside {
+    -moz-column-gap: 16px;
+    column-gap: 16px;
+    row-gap: 16px;
+}
+@media screen and (min-width: 600px) {
+    .gap-outside {
+        -moz-column-gap: 24px;
+        column-gap: 24px;
+        row-gap: 24px;
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ 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");
+
+                #{$class-name} {
+                    z-index: #{$z};
+                }
+
+                #{$class-name-force} {
+                    z-index: #{$z} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-z-index-classes(24, $helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Order classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-order-classes($helper-breakpoints) {
+    @each $breakpoint, $breakpointName in $helper-breakpoints {
+        @include media-breakpoint($breakpointName) {
+            $infix: if($breakpointName == null, "", "-#{$breakpoint}");
+
+            /* <integer> values */
+            @for $i from -12 through 12 {
+                .order#{$infix}-#{$i} {
+                    order: #{$i};
+                }
+
+                .order#{$infix}-#{$i}--force {
+                    order: #{$i} !important;
+                }
+            }
+
+            /* Global values */
+            @each $value in (inherit, initial) {
+                .order#{$infix}-#{$value} {
+                    order: #{$value};
+                }
+
+                .order#{$infix}-#{$value}--force {
+                    order: #{$value} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-order-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Absolute position alignment classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-position-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $position in (top, right, bottom, left) {
+                .place#{$infix}-#{$position} {
+                    #{$position}: 0;
+                }
+
+                .place#{$infix}-#{$position}--force {
+                    #{$position}: 0 !important;
+                }
+            }
+        }
+    }
+}
+@include generate-position-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Position classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-position-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $pos in (relative, absolute, static, fixed) {
+                .position#{$infix}-#{$pos} {
+                    position: #{$pos};
+                }
+
+                .position#{$infix}-#{$pos}--force {
+                    position: #{$pos} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-position-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Display classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-display-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $class-suffix, $value in (
+                none: none,
+                inline: inline,
+                inline-block: inline-block,
+                block: block,
+                grid: grid,
+                table: table,
+                table-cell: table-cell,
+                table-row: table-row,
+                inline-flex: inline-flex,
+                flex: flex
+            ) {
+                .d#{$infix}-#{$class-suffix} {
+                    display: $value;
+                }
+
+                .d#{$infix}-#{$class-suffix}--force {
+                    display: $value !important;
+                }
+            }
+        }
+    }
+}
+@include generate-display-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Flex classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-flex-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @each $class-suffix, $value in (
+                row: (flex-direction: row),
+                row-reverse: (flex-direction: row-reverse),
+                column: (flex-direction: column),
+                column-reverse: (flex-direction: column-reverse),
+
+                nowrap: (flex-wrap: nowrap),
+                wrap: (flex-wrap: wrap),
+
+                align-center: (align-items: center),
+                align-start: (align-items: flex-start),
+                align-end: (align-items: flex-end),
+                align-inherit: (align-items: inherit),
+                align-initial: (align-items: initial),
+
+                align-self-end: (align-self: flex-end),
+                align-self-start: (align-self: flex-start),
+                align-self-inherit: (align-self: inherit),
+                align-self-initial: (align-self: initial),
+
+                center-center: (justify-content: center, align-items: center),
+                center: (justify-content: center),
+                end: (justify-content: flex-end),
+                start: (justify-content: flex-start),
+                inherit: (justify-content: inherit),
+                initial: (justify-content: initial),
+                left: (justify-content: left),
+                normal: (justify-content: normal),
+                revert: (justify-content: revert),
+                right: (justify-content: right),
+                space-around: (justify-content: space-around),
+                space-between: (justify-content: space-between),
+                space-evenly: (justify-content: space-evenly),
+                stretch: (justify-content: stretch),
+                unset: (justify-content: unset)
+            ) {
+                $class-name: ".flex#{$infix}-#{$class-suffix}";
+                $class-name-force: ".flex#{$infix}-#{$class-suffix}--force";
+
+                #{$class-name} {
+                    @each $property, $prop-value in $value {
+                        #{$property}: #{$prop-value};
+                    }
+                }
+
+                #{$class-name-force} {
+                    @each $property, $prop-value in $value {
+                        #{$property}: #{$prop-value} !important;
+                    }
+                }
+            }
+        }
+    }
+}
+@include generate-flex-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Font Weight classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-font-weight-classes($helper-breakpoints) {
+    @each $breakpoint, $media-size in $helper-breakpoints {
+        @include media-breakpoint($media-size) {
+            $infix: if($media-size == null, "", "-#{$breakpoint}");
+
+            @for $index from 1 through 9 {
+                $weight: $index * 100;
+
+                .fw#{$infix}-#{$weight} {
+                    font-weight: $weight;
+                }
+
+                .fw#{$infix}-#{$weight}--force {
+                    font-weight: $weight !important;
+                }
+            }
+        }
+    }
+}
+@include generate-font-weight-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Font Size classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-font-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            $index: 0;
+            @while $index <= 18 {
+                $size: $index * 4;
+                .fs#{$infix}-#{$size} {
+                    font-size: #{$size}px;
+                }
+                .fs#{$infix}-#{$size}--force {
+                    font-size: #{$size}px !important;
+                }
+                $index: $index + 1;
+            }
+        }
+    }
+}
+@include generate-font-size-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Line Height classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-line-height-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            $index: 0;
+            @while $index <= 36 {
+                $height: $index * 2;
+
+                .lh#{$infix}-#{$height} {
+                    line-height: #{$height}px;
+                }
+
+                .lh#{$infix}-#{$height}--force {
+                    line-height: #{$height}px !important;
+                }
+
+                $index: $index + 1;
+            }
+        }
+    }
+}
+@include generate-line-height-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Aspect Ratio classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-aspect-ratio-classes($helper-breakpoints) {
+    // Aspect ratios definition
+    $aspect-ratios: (
+        'auto': 'auto',
+        '1x1': '1/1',
+        '1x2': '1/2',
+        '2x1': '2/1',
+        '3x4': '3/4',
+        '4x3': '4/3',
+        '9x16': '9/16',
+        '16x9': '16/9',
+        'half': '0.5',
+        'inherit': 'inherit',
+        'initial': 'initial',
+        'unset': 'unset'
+    );
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @each $ratio, $value in $aspect-ratios {
+                $class-name: ".aspect-ratio#{$infix}-#{$ratio}";
+
+                #{$class-name} {
+                    aspect-ratio: #{$value};
+                }
+
+                #{$class-name}--force {
+                    aspect-ratio: #{$value} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-aspect-ratio-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cursor classes
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-cursor-classes($helper-breakpoints) {
+    $cursor-types: (
+        pointer,
+        default,
+        grab,
+        grabbing,
+        move,
+        help,
+        wait
+    );
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 1 through length($cursor-types) {
+                $cursor-type: nth($cursor-types, $i);
+
+                .cursor-#{$cursor-type}#{$infix} {
+                    cursor: #{$cursor-type};
+                }
+
+                .cursor-#{$cursor-type}#{$infix}--force {
+                    cursor: #{$cursor-type} !important;
+                }
+            }
+        }
+    }
+}
+@include generate-cursor-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Opacity
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-opacity-classes($helper-breakpoints) {
+    // Definindo os valores de opacidade e seus nomes de classe
+    $opacity-values: (
+        '0': 0,
+        '01': 0.1,
+        '02': 0.2,
+        '03': 0.3,
+        '04': 0.4,
+        '05': 0.5,
+        '06': 0.6,
+        '07': 0.7,
+        '08': 0.8,
+        '09': 0.9,
+        '10': 1.0,
+        '1':1
+    );
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+            @each $step, $opacity in $opacity-values {
+                .opacity#{$infix}-#{$step} {
+                    opacity: $opacity;
+                }
+                .opacity#{$infix}-#{$step}--force {
+                    opacity: $opacity !important;
+                }
+            }
+        }
+    }
+}
+@include generate-opacity-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Float & List Style
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-float-list-classes {
+    .clearfix::after {
+        content: "";
+        clear: both;
+        display: table;
+    }
+
+    .float-left {
+        float: left;
+    }
+
+    .float-right {
+        float: right;
+    }
+
+    .list-style-none {
+        list-style: none;
+    }
+
+    .list-style-disc {
+        list-style: disc;
+    }
+
+    .list-style-dot {
+        list-style: dot;
+    }
+}
+@include generate-float-list-classes;
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Decoration Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-decoration-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            .text#{$infix}-decoration-strike,
+            .text#{$infix}-strike,
+            .text#{$infix}-line-through {
+                text-decoration: line-through;
+            }
+
+            .text#{$infix}-decoration-strike--force,
+            .text#{$infix}-strike--force,
+            .text#{$infix}-line-through--force {
+                text-decoration: line-through !important;
+            }
+
+            .text#{$infix}-decoration-none,
+            .text#{$infix}-none {
+                text-decoration: none;
+            }
+
+            .text#{$infix}-decoration-none--force,
+            .text#{$infix}-none--force {
+                text-decoration: none !important;
+            }
+
+            .text#{$infix}-super {
+                vertical-align: super;
+            }
+
+            .text#{$infix}-super--force {
+                vertical-align: super !important;
+            }
+
+            .text#{$infix}-sub {
+                vertical-align: sub;
+            }
+
+            .text#{$infix}-sub--force {
+                vertical-align: sub !important;
+            }
+        }
+    }
+}
+@include generate-text-decoration-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Alignment and Transform Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-alignment-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            .text#{$infix}-capitalize {
+                text-transform: capitalize;
+            }
+
+            .text#{$infix}-capitalize--force {
+                text-transform: capitalize !important;
+            }
+
+            .text#{$infix}-lowercase {
+                text-transform: lowercase;
+            }
+
+            .text#{$infix}-lowercase--force {
+                text-transform: lowercase !important;
+            }
+
+            .text#{$infix}-uppercase {
+                text-transform: uppercase;
+            }
+
+            .text#{$infix}-uppercase--force {
+                text-transform: uppercase !important;
+            }
+
+            .text#{$infix}-nowrap {
+                white-space: nowrap;
+            }
+
+            .text#{$infix}-left {
+                text-align: left;
+            }
+
+            .text#{$infix}-left--force {
+                text-align: left !important;
+            }
+
+            .text#{$infix}-center {
+                text-align: center;
+            }
+
+            .text#{$infix}-center--force {
+                text-align: center !important;
+            }
+
+            .text#{$infix}-right {
+                text-align: right;
+            }
+
+            .text#{$infix}-right--force {
+                text-align: right !important;
+            }
+        }
+    }
+}
+@include generate-text-alignment-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Text Spacing and Truncation Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-spacing-classes($helper-breakpoints){
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            .text#{$infix}-boxed {
+                border-radius: 2px;
+                padding: 4px 8px;
+                margin: 0 8px;
+                font-size: 11px;
+                font-weight: 600;
+                white-space: nowrap;
+            }
+
+            .text#{$infix}-truncate,
+            .text#{$infix}-ellipsis {
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+@include generate-text-spacing-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Overflow Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-overflow-classes($helper-breakpoints){
+    $overflow-classes: (
+        auto: auto,
+        scroll: scroll,
+        hidden: hidden,
+        overlay: overlay
+    );
+
+    $overflow-directions: (
+        x: (auto: auto, scroll: scroll, hidden: hidden, overlay: overlay),
+        y: (auto: auto, scroll: scroll, hidden: hidden, overlay: overlay)
+    );
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            // Classes para overflow geral
+            @each $class, $value in $overflow-classes {
+                .overflow-#{$class}#{$infix} {
+                    overflow: $value;
+                }
+                .overflow-#{$class}#{$infix}--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: $value;
+                }
+                .overflow-x-#{$class}#{$infix}--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: $value;
+                }
+                .overflow-y-#{$class}#{$infix}--force {
+                    overflow-y: $value !important;
+                }
+            }
+        }
+    }
+}
+@include generate-overflow-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Border Size Helpers
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-border-size-classes($helper-breakpoints){
+    $border-directions: (bottom: bb, top: bt, left: bl, right: br);
+
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            @for $i from 0 through 4 {
+                $border-value: $i * 2;
+                $border-suffix: "-#{$border-value}";
+
+                // Classes para borda geral
+                .border#{$infix}#{$border-suffix},
+                .b#{$infix}#{$border-suffix} {
+                    border: #{$border-value}px solid;
+                }
+
+                // Classes para bordas individuais
+                @each $direction, $abbrev in $border-directions {
+                    .border-#{$direction}#{$infix}#{$border-suffix},
+                    .#{$abbrev}#{$infix}#{$border-suffix} {
+                        border-#{$direction}: #{$border-value}px solid;
+                    }
+                    .border-#{$direction}#{$infix}#{$border-suffix}--force,
+                    .#{$abbrev}#{$infix}#{$border-suffix}--force {
+                        border-#{$direction}: #{$border-value}px solid !important;
+                    }
+                }
+            }
+        }
+    }
+
+    // Classe para borda nula
+    .border-none {
+        border: none !important;
+    }
+}
+@include generate-border-size-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
+    @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
+        }
+    }
+    .radius#{$infix}-circle,
+    .radius#{$infix}-full,
+    .radius#{$infix}-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
+            @each $direction in (bottom, top, left, right) {
+                @include _border-radius-individual($direction, $breakpoint);
+            }
+        }
+    }
+}
+@include generate-border-radius-classes($helper-breakpoints);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Hover - Show/Hide
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-hover-show-hide-classes {
+    .on-hover-show:hover {
+        opacity: 1;
+    }
+    .on-hover-hide:hover {
+        opacity: 0;
+    }
+}
+@include generate-hover-show-hide-classes;
+
+// -----------------------------------------------------------------------------------------------------
+// @ Transition
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-transition-classes() {
+    $durations: (100, 300);
+    $easing: ('linear', 'ease-in', 'ease-out', 'ease-in-out');
+    @each $duration in $durations {
+        @each $ease in $easing {
+            $class-suffix: if($ease == 'linear', 'l', if($ease == 'ease-in', 'ei', if($ease == 'ease-out', 'eo', 'eio')));
+            .ts-#{$duration}-#{$class-suffix} {
+                transition: all #{$duration}ms #{$ease};
+            }
+        }
+    }
+}
+@include generate-transition-classes();
+
+// -----------------------------------------------------------------------------------------------------
+// @ Rotate Animation
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-rotate-animation-classes() {
+    // Define as durações desejadas para a animação de rotação
+    $durations: (1, 2, 3);
+    @each $duration in $durations {
+        .rotate-infinity-#{$duration}s {
+            animation: spin #{$duration}s infinite;
+        }
+    }
+}
+// Define a keyframes para a animação de rotação
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+@include generate-rotate-animation-classes();