кнопка теряет анимацию нажатия при заданном отступе отключенного стиля - PullRequest
Новая
       8

кнопка теряет анимацию нажатия при заданном отступе отключенного стиля

0 голосов
/ 05 октября 2018

У меня есть набор стилей для кнопки vaadin 

.custom-add-item, .custom-add-item:hover,
.custom-delete-item, .custom-delete-item:hover {
    margin:0;
    padding:0;
    border: 0;
    cursor:pointer;
    background-image:none;
    background-color: transparent !important;
    border: none !important;
}

.v-button .v-button-wrap .v-button-caption{
    text-shadow: none !important;
}

.v-button .v-button-wrap .v-button-caption:hover{
    color:#000 !important;
}

.custom-add-item .v-button-wrap,
.custom-delete-item .v-button-wrap {
    margin:0;
    padding:0;
}

%new-add-delete-button {
    margin:0;
    padding:0;
    display:block !important;
    background-image:url("img/button_add_item.png");
    background-position: -7px -1px;
    background-repeat: no-repeat;
    height:22px;
    text-align:right;
    text-indent:12px;
    line-height:22px;
    font-weight:bold;
    text-decoration:underline;
    color: #000000 !important;
}

.custom-add-item .v-button-wrap .v-button-caption,
.custom-delete-item .v-button-wrap .v-button-caption {
    @extend %new-add-delete-button;
}

.custom-delete-item .v-button-caption {
    background-image:url("img/button_delete_item.png") !important;
    background-position: -7px -3px !important;
    background-repeat: no-repeat;
}
.custom-add-item .v-button-caption:hover {
    background-position: -7px -45px;
    color:#000 !important;
}

.custom-delete-item .v-button-caption:hover{
    background-position: -7px -47px !important;
    color:#000;
}

На странице это выглядит так 

  | +add element
-------------
  | +add element

Когда кнопка отключена, она как бы перемещается вправо 

  | +add element
------------
  |   +add element

В попытке исправить это я пытался сделать так 

.v-disabled.custom-add-item, .v-disabled.custom-add-item:hover {
   .v-button-wrap { padding: 0; }
}

Он исправил смещение вправо, но убрал эффект нажатия - когда кнопка немного смещается вправои затем возвращается в исходное положение.

В чем проблема?

...