Fix disabled buttons

[h-banii]

Fixes #120

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sakura	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2024 11:54am
sakura-io86	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2024 11:54am

[h-banii]

Another thing I noticed is that index.html is missing the "File input" field that is present in test.html, not sure if that was on purpose or an accident, just making sure...

I can add it to index.html if necessary, since this PR is somewhat related to the file input button. It might be good to add a "Disabled file input" as well.

[earlAchromatic]

Oh, just came here to make this PR. Glad to see it's already being taken care of!

[oxalorg]

Hey @h-banii really appreciate your PR! Sorry I've taken long to get back to this, but the reason I did not merge this PR is the usage of advanced sass functions like at-root. My goal with sakura was to make it very easy to read for folks who are new to web development.

I feel I already failed to do that by writing it in sass and may get rid of it someday. Regardless I don't want to complicate the nesting structure at the moment. Do you think you could implement this in a way without at-root? I know it's been too long and too late for this response of mine and apologies for that so if you've already moved on from this project I'd be happy to make those changes myself!

Thanks and cheers! 🌸

[h-banii]

@oxalorg , no problem! Yes, I can do it without at-root for sure

I'll make a commit when I get some free time (near friday/saturday)

[h-banii]

Done, let me know if there's any more changes needed

.button, button,
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type=file]::file-selector-button {
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    background-color: $color-blossom;
    color: $color-bg;
    border-radius: 1px;
    border: 1px solid $color-blossom;
    cursor: pointer;
    box-sizing: border-box;

    &:hover {
        background-color: $color-fade;
        color: $color-bg;
        outline: 0;
    }
}

.button, button,
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type=file] {
    &[disabled] {
        cursor: default;
        opacity: .5;
    }

    &:focus-visible {
        outline-style: solid;
        outline-width: 2px;
    }
}

I also added a "disabled file input" to index.html and test.html

Here's how it looks on firefox, chromium and webkit