CODEWITHSUNDEEP
htmlcsssassfont-awesome-5
ClubberLang
ClubberLang

Reputation: 1898

SCSS Animated checkbox : dynamic width

I have an animated flip SCSS checkbox, and I have 2 issues I cannot solve:

a) I wish to have a dynamic width, based on content and not static. The problem is that I have 2 contents, one for 'checked' and one for 'unchecked'

b) I wish to add both icons (using fontawesome 5) and text, not exclusive (I mean an Icon+Text). In the worst case, I wish a way to use either the icon, either the text

Here is how I define it:

<input class="btn-toggle btn-toggle-flip" id="cb5" type="checkbox" />
<label class="btn-toggle-label" data-tg-off="UNSAVED" data-tg-on="SAVED" for="cb5"></label>

The SCSS is too long, the best is to look at the sample here:

https://codepen.io/cdemez/pen/QWjXRjw

For both issues, search for the text 'data-tg-off' into the SCSS please ;-)

Do you have any idea?

Thx

Upvotes: 1

Views: 232

Answers (1)

Mudasir Zahoor
Mudasir Zahoor

Reputation: 914

In order for :before and :after content to appear you need to set the width on your label element as there is no content inside your label (logically empty), only then you should be able to see the pseudo elements as the pseudo elements are rendered inside the element before and after the content of the element. Also, for font-awesome to appear you need the unicodes of the icons that you want to show so that you can pass them as html attribute to css, but also you need to explicitly set the font-family for the pseudo elements which will make your text look weird. Two main things that solve your use cases are:

For icon to appear inside label & for dynamic widths of pseudo elements:

HTML

<label class="btn-toggle-label" data-tg-off="UNSAVED &#xf004" data-tg-on="SAVED &#xf004 " for="cb5"></label>

CSS

.btn-toggle-flip {
+ .btn-toggle-label {
    &:after,
    &:before {
       width: auto;
       max-width: 100%;
       font-family: "Font Awesome 5 Free";
    }
}
.btn-toggle-label {
    width: 200px;
}

I've tried this workaround for both your use cases here, checkout this pen:

https://codepen.io/mudassirzr/pen/XWmvrWp

Upvotes: 5

Related Questions