S CSS: функция @mixin не работает в блоке @media - PullRequest
Новая
       31

S CSS: функция @mixin не работает в блоке @media

0 голосов
/ 24 марта 2020

Написанная ниже функция @mixin для кнопки отношения с изображением, но она не работает в блоке @media для отзывчивости в Angular компоненте: 

@mixin imgRadioEle($imgRad,$imgWd){
    .radioImgBlock{
        flex-direction: row;
        .imgRadio{
            display: none;
            &:checked{
                &+.imgRadioImage{
                    opacity: 1;
                    animation: 0.3s aniImg forwards;
                }
            }
        }
        .imgRadioImage{
            display: flex;
            @include setBorderRadius($imgRad);
            width: $imgWd;
            border: 1px solid rgba($color: $themeFontColor, $alpha: 0.1);
            padding: 5px;
            opacity: 0.5;
            transition: all .15s ease-in-out 0s;
            &:hover{
                cursor: pointer;
            }
        }
    }  
}

Обычный вызов:

@ include imgRadioEle (50%, 40%);

В браузере:

enter image description here

Отзывчивый вызов: 

@media (max-width: 768px){
    @include imgRadioEle(50%,60%);
}

В браузере:

enter image description here

Адаптивный код считается. Где проблема?

...