Menu icon Foundation

Designer | Firenze

I'm a designer and developer. Actually, I'm an UX designer with some skills in frontend dev and fond of foundation :)

My Posts


My Comments

Laura Ancillotti commented on Kevin Lozandier's post almost 4 years

It's a pity if you define a custom class for your Button element, it won't work with your button size and type classes (tiny, success) because only button tag and .button class is defined coupled with them. If you want people to use anchor instead of button, I suggest you try to make custom classes + framework classes work toghether for a tag as well.

To be specific, in your css we can find:

button.success, .button.success {
background-color: #43AC6A;
border-color: #368a55;
color: #FFFFFF;
}

So why not a.success?

Laura Ancillotti commented on Nikolaus Dunn's post almost 4 years

Old post but I'm writing my solution here in case it'll be useful: I guess you're trying to achieve a bulk action menu which is disabled until you check items in a table.

We can't disable the menu by framework tools but put a transparent layer with z-index on top of the menu for example adding the class="disabled-menu"

.disabled menu {
    position:relative;
    &:before {
        content:'';
        position:absolute; right:0; left:0; top:0; bottom:0; z-index:10;
        background: transparent;
    }
}

on bulk action check, just toggle the .disabled-menu class. It should work - and yes I used a topbar to do the bulk action bar ;)

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Kevin Lozandier's post almost 4 years

It's a pity if you define a custom class for your Button element, it won't work with your button size and type classes (tiny, success) because only button tag and .button class is defined coupled with them. If you want people to use anchor instead of button, I suggest you try to make custom classes + framework classes work toghether for a tag as well.

To be specific, in your css we can find:

button.success, .button.success {
background-color: #43AC6A;
border-color: #368a55;
color: #FFFFFF;
}

So why not a.success?

You commented on Nikolaus Dunn's post almost 4 years

Old post but I'm writing my solution here in case it'll be useful: I guess you're trying to achieve a bulk action menu which is disabled until you check items in a table.

We can't disable the menu by framework tools but put a transparent layer with z-index on top of the menu for example adding the class="disabled-menu"

.disabled menu {
    position:relative;
    &:before {
        content:'';
        position:absolute; right:0; left:0; top:0; bottom:0; z-index:10;
        background: transparent;
    }
}

on bulk action check, just toggle the .disabled-menu class. It should work - and yes I used a topbar to do the bulk action bar ;)

Posts Followed

Following

  • No Content

Followers

  • No Content