Удалить начальный цвет фона первой md-кнопкой в ​​меню - PullRequest
Новая
       7

Удалить начальный цвет фона первой md-кнопкой в ​​меню

0 голосов
/ 08 мая 2018

Я использую AngularJS и Material Design для своего приложения. В приложении у меня есть элемент md-menu: 

<md-menu md-position-mode="target-right target" md-offset="0 42">
    <md-button class="md-icon-button rounded dtp-btn-ok" ng-click="$mdMenu.open($event);">
        <i class="material-icons">more_horiz</i>
    </md-button>
    <md-menu-content class="person-popup contact-popup">
        <md-card md-theme-watch>
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Headline</span>
                    <span class="md-subhead">Subhead informatie</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-actions layout="row" layout-align="end center">
                <md-button title="Title informatie" class="md-icon-button icon-margin">
                    <i class="material-icons">phone</i>
                </md-button>
                <md-button title="Title informatie" class="md-icon-button icon-margin">
                    <i class="material-icons">email</i>
                </md-button>
                <md-button title="Title informatie" class="md-icon-button icon-margin">
                    <i class="material-icons">forward</i>
                </md-button>
            </md-card-actions>
        </md-card>
    </md-menu-content>
</md-menu>

Material Design устанавливает цвет на фоне первой кнопки внутри меню. Это также, как они делают это в своей демонстрации> https://material.angularjs.org/latest/demo/menu.

Я бы хотел удалить это или переопределить.

Добавление: 

.md-button {
    background-color: #fff!important;
}

К корню моего css не работает. Поэтому я думаю, что CSS перезаписывается. Но я не могу проверить селектор CSS для начального состояния кнопки (тот, что имеет цвет фона Background), потому что как только я приостанавливаю браузер (F8), цвет фона удаляется.

Кто-нибудь имел опыт с этим?

// РЕДАКТИРОВАТЬ //

Работая с базовым кодовым блоком AngularJS / Material Design, я воссоздал свою ситуацию. И, кажется, там работает с тем же кодом.

https://codepen.io/anon/pen/LmQNzv

Похоже, у меня где-то есть проблема с CSS в моем собственном коде.

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Проблема здесь в том, что Material Design добавляет класс md-focus к первому md-button в md-menu.

Эта директива должна работать: 

.directive('mdPreventFocus', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, $mdOpenMenu) {
            scope.$on('$mdMenuOpen', function(ev, element) {
                const interval = setInterval(function() {
                    if (document.getElementsByClassName('md-clickable').length > 0 && document.getElementsByClassName('md-clickable')[0].querySelector('.md-focused')) {
                        document.getElementsByClassName('md-clickable')[0].querySelector('.md-focused').classList.remove('md-focused');
                        clearInterval(interval);
                    }
                }, 5);
            });
        }
    }
})
0 голосов
/ 09 мая 2018

Это похоже на работу на сайте: https://material.angularjs.org/latest/demo/menu

.md-button:first-child {
    background-color: #fff !important;
}

В качестве альтернативы вы можете попробовать использовать более высокую специфичность, чтобы переопределить еще больше: 

md-card-actions>.md-button:first-child {
    background-color: #fff !important;
}
...