Other Stylelint Fixes

Note

Unexpected use of low performance transition property (box-shadow). (plugin/no-low-performance-animation-properties).

Before

button::before {
    content: ''; // Create the pseudo-element
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    display: block;

    background: $slick-dot-color;
    opacity: 0; // Start with fully transparent
    transition: opacity 100ms ease-out;

    .home-layout-4 & {
        opacity: 1; // Change the opacity to make the background visible
    }
}

Note

Background Color

Unexpected use of low performance transition property (background-color). (plugin/no-low-performance-animation-properties)

Background Color - Before:

.some-background-color {
    transition: color 0.15s ease-in-out;
}

Background Color - After:

.some-background-color {
    transition: opacity 0.15s ease-in-out;
}

Box-Shadow

Unexpected use of low performance transition property (box-shadow). (plugin/no-low-performance-animation-properties)

Box-Shadow - Before:

overscroll-behavior: contain;
scrollbar-gutter: stable;

Flex Wrapping

Whenever setting an element to display: flex a flex-wrap value must be defined. Set flex-wrap: nowrap for the default behavior. Learn more: https://defensivecss.dev/tip/flexbox-wrapping/ (plugin/use-defensive-css)

Add:

flex-wrap: nowrap;

Image Distortion

This is a blockquote. Learn more: https://defensivecss.dev/tip/image-compressed/ (plugin/use-defensive-css)

Add:

Long Content

This is a blockquote. Learn more: https://defensivecss.dev/tip/long-content/ (plugin/use-defensive-css)

Add:

.long-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Component Spacing

This is a blockquote. Learn more: https://defensivecss.dev/tip/spacing/ (plugin/use-defensive-css)

Add:

Auto-fit Vs Auto-fill

This is a blockquote. Learn more: https://defensivecss.dev/tip/auto-fit-fill/ (plugin/use-defensive-css)

Add:

CSS grid fixed values

This is a blockquote. Learn more: https://defensivecss.dev/tip/css-grid-fixed-values/ (plugin/use-defensive-css)

Add:

CSS Variable Fallback

This is a blockquote. Learn more: https://defensivecss.dev/tip/css-variable-fallback/ (plugin/use-defensive-css)

Add:

Fixed sizes

This is a blockquote. Learn more: https://defensivecss.dev/tip/fixed-sizes/ (plugin/use-defensive-css)

Add:

Minimum Content Size In CSS Flexbox

This is a blockquote. Learn more: https://defensivecss.dev/tip/flexbox-min-content-size/ (plugin/use-defensive-css)

Add:

Minimum Content Size In CSS grid

This is a blockquote. Learn more: https://defensivecss.dev/tip/grid-min-content-size/ (plugin/use-defensive-css)

Add:

Grouping vendor selectors

This is a blockquote. Learn more: https://defensivecss.dev/tip/grouping-selectors/ (plugin/use-defensive-css)

Add:

Image maximum width

This is a blockquote. Learn more: https://defensivecss.dev/tip/img-max-width/ (plugin/use-defensive-css)

Add:

Position sticky with CSS Grid

This is a blockquote. Learn more: https://defensivecss.dev/tip/position-sticky-grid/ (plugin/use-defensive-css)

Add:

Scrollbar gutter

This is a blockquote. Learn more: https://defensivecss.dev/tip/scrollbar-gutter/ (plugin/use-defensive-css)

Add:

Scrollbars on demand

This is a blockquote. Learn more: https://defensivecss.dev/tip/scrollbar/ (plugin/use-defensive-css)

Add:

Using space-between

This is a blockquote. Learn more: https://defensivecss.dev/tip/space-between/ (plugin/use-defensive-css)

Add:

Text over image

This is a blockquote. Learn more: https://defensivecss.dev/tip/text-over-image/ (plugin/use-defensive-css)

Add:

Vertical media queries

This is a blockquote. Learn more: https://defensivecss.dev/tip/vertical-mq/ (plugin/use-defensive-css)

Add:

Accidental hover on mobile

This is a blockquote. Learn more: https://defensivecss.dev/tip/hover-media/ (plugin/use-defensive-css)

Add:

Image inner border

This is a blockquote. Learn more: https://defensivecss.dev/tip/inner-shadow/ (plugin/use-defensive-css)

Add:

Default flexbox stretching

This is a blockquote. Learn more: https://defensivecss.dev/tip/default-flexbox-stretching/ (plugin/use-defensive-css)

Add:

Input zoom on iOS Safari

This is a blockquote. Learn more: https://defensivecss.dev/tip/input-zoom-safari/ (plugin/use-defensive-css)

Add:

Button minimum width

This is a blockquote. Learn more: https://defensivecss.dev/tip/button-min-width/ (plugin/use-defensive-css)

Add: