autosize class does weird things when button wraps to next line

[balmas]

Reported by @rgorman. See attached.

mov.zip

This seems likely to be a browser bug related to the :active pseudoclass. When you click on the button, the padding drops and the button pops back to the previous line. Removing the autosize class eliminates the problem, but it also sizes the button wrong. The CSS rules retain padding on the :active class, so it's not clear what else we could do to fix this.

button, .btn, .btn:hover, .btn:visited, .btn:focus, .btn:link {
        @extend .font-button;
        height: $BUTTON_HEIGHT;
        line-height: $BUTTON_HEIGHT;
        /* Basic button has white background*/
        background-color:$COLOR_FOREGROUND;
        color: $COLOR_PRI;
        border:none;
        width: $BUTTON_WIDTH;
        text-align: center;
        border:1px solid $COLOR_FOREGROUND;
        padding:0;
        margin:$MARGIN;
        display:inline-block;
        cursor:pointer;

        &.autosize {
                width:auto;
                padding:0 ($BUTTON_HEIGHT/2);
                &:active {
                        border:1px solid $COLOR_FOREGROUND;
                        padding:0 ($BUTTON_HEIGHT/2);
                }
        }
       &:active, &.active {
                border:1px solid $COLOR_GRAY;
                border-right:$OUTLINE_SIZE solid $COLOR_PRI;
                padding:0;
        }

[PonteIneptique]

It could be border right that breaks things up. Try to do a subclass active of autopsie that does not change border right (or rather put 1px.) Le 28 sept. 2017 10:52 PM, "Bridget Almas" <notifications@github.com> a écrit :

…

Reported by @rgorman <https://github.com/rgorman>. See attached. mov.zip <https://github.com/perseids-project/perseids_docs/files/1342303/mov.zip> This seems likely to be a browser bug related to the :active pseudoclass. When you click on the button, the padding drops and the button pops back to the previous line. Removing the autosize class eliminates the problem, but it also sizes the button wrong. The CSS rules retain padding on the :active class, so it's not clear what else we could do to fix this. button, .btn, .btn:hover, .btn:visited, .btn:focus, .btn:link { @extend .font-button; height: $BUTTON_HEIGHT; line-height: $BUTTON_HEIGHT; /* Basic button has white background*/ background-color:$COLOR_FOREGROUND; color: $COLOR_PRI; border:none; width: $BUTTON_WIDTH; text-align: center; border:1px solid $COLOR_FOREGROUND; padding:0; margin:$MARGIN; display:inline-block; cursor:pointer; &.autosize { width:auto; padding:0 ($BUTTON_HEIGHT/2); &:active { border:1px solid $COLOR_FOREGROUND; padding:0 ($BUTTON_HEIGHT/2); } } &:active, &.active { border:1px solid $COLOR_GRAY; border-right:$OUTLINE_SIZE solid $COLOR_PRI; padding:0; } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#416>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB1yZscsD0WJi2QBUAVMoMWqUG6etmX5ks5snAcdgaJpZM4Pn30X> .

[balmas]

Thanks @PonteIneptique . That doesn't seem to have any impact, unfortunately.