Jump to content
Chris Bennett

Uikit CSS toggle-style checkboxes

Recommended Posts

Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies.

So here is my humble offering, rough and ready,  which can be thrown in at the bottom of your Uikit css as a starting point.

Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size.

It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently.
 

.uk-form-controls-text label:only-of-type input.uk-checkbox {
	font-size:.8rem;
	margin-top:0;
	position:relative;
	-webkit-appearance:none;
	outline:none;
	width:4em;
	height:2.4em;
	border:2px solid #D6D6D6;
	border-radius: 3em;
	box-shadow:inset 5em 0 0 0 #DDD;
	flex-shrink: 0;
}
.uk-form-controls-text label:only-of-type input.uk-checkbox:after {
	content:"";
	position:absolute;
	top:.25em;
	left:.25em;
	background:#FFF;
	width:1.6em;
	height:1.6em;
	border-radius:50%;
	transition:all 250ms ease 20ms;
	box-shadow:.05em .25em .5em rgba(0,0,0,0.2);
}
.uk-form-controls-text label:only-of-type input.uk-checkbox:checked {
	background-color: transparent;
	box-shadow:inset 5em 0 0 0 #4ed164;
	border-color:#67bba5;
}
.uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after {
left:1.85em;
box-shadow:0 0 1em rgba(0,0,0,0.2);
}
label:only-of-type input.uk-checkbox:checked + span {
color:#008a00;
transition:all 250ms ease 20ms;
}
.InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;}
label:only-of-type input.uk-checkbox + span {
	color:#c3c3c3;
	display:flex;
	align-items:center;
	line-height:1.1;
}
/* Below is only necessary if you want the optional "tick" after items when selected */
label:only-of-type input.uk-checkbox + span:after {
	flex-shrink:0;
	margin-left:.5em;width:2em;
	opacity:0;
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); }
label:only-of-type input.uk-checkbox:checked + span:after {
	opacity:1;
	transition: opacity 250ms ease 150ms; 
}

 

togglecheckbox.png

  • Like 9

Share this post


Link to post
Share on other sites

Didn't realise I wouldn't be able to edit the original post with inevitable tweaks and changes.
Whoops, sorry about that.

Below is an extended version dealing with a few more common admin backend use cases.
 

.uk-form-controls-text label:only-of-type input.uk-checkbox,
.Inputfield input[type=checkbox].uk-checkbox {
	font-size:.8rem;
	margin-top:0;
	position:relative;
	-webkit-appearance:none;
	outline:none;
	width:4em;
	height:2.4em;
	border:2px solid #D6D6D6;
	border-radius:3em;
	box-shadow:inset 5em 0 0 0 #DDD;
	flex-shrink:0;
}

p.template-checkboxes input[type=checkbox].uk-checkbox {
	font-size:.6rem;
}

.uk-form-controls-text label:only-of-type input.uk-checkbox:after,
.Inputfield input[type=checkbox].uk-checkbox:after {
	content:"";
	position:absolute;
	top:.25em;
	left:.25em;
	background:#FFF;
	width:1.6em;
	height:1.6em;
	border-radius:50%;
	transition:all 250ms ease 20ms;
	box-shadow:.05em .25em .5em rgba(0,0,0,0.2);
}
.uk-form-controls-text label:only-of-type input.uk-checkbox:checked,
.Inputfield input[type=checkbox].uk-checkbox:checked {
	background-color: transparent;
	box-shadow:inset 5em 0 0 0 #4ed164;
	border-color:#67bba5;
}
.uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after,
.Inputfield input[type=checkbox].uk-checkbox:checked:after {
	left:1.85em;
	box-shadow:0 0 1em rgba(0,0,0,0.2);
}
label:only-of-type input.uk-checkbox:checked + span,
.Inputfield input[type=checkbox].uk-checkbox:checked + span {
	color:#008a00;
	transition:all 250ms ease 20ms;
}
.InputfieldCheckbox .InputfieldContent label:only-of-type,
.InputfieldCheckboxes table label,
.uk-form-controls .InputfieldCheckboxes ul li label {
	display: flex;
}
label:only-of-type input.uk-checkbox + span, .Inputfield input[type=checkbox].uk-checkbox + span { color: #c3c3c3; display: flex; width: 100%; max-width: 22em; align-items: center; justify-content: space-between; line-height: 1.1; }
label:only-of-type input.uk-checkbox + span:after {
	flex-shrink:0;
	margin-left:.5em;width:2em;
	opacity:0;
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E");
}
label:only-of-type input.uk-checkbox:checked + span:after {
	opacity:1;
	transition: opacity 250ms ease 150ms; 
}

 

  • Like 1

Share this post


Link to post
Share on other sites

Sorry flydev, not at the moment. I am an old-school, banging-rocks-together, CSS kinda dude, so am not experienced with compilers in general, yet.
I get why they are very useful, I just haven't *needed*  to use them in the past.

It is something I plan to work towards with processwire after many years of static sites.. Using variables are starting to make great sense.

It's still very much a  work in progress and is not very fancy or tricky, so it should be able to slot in somewhere without much hassle.

  • Like 1

Share this post


Link to post
Share on other sites

I fully understand, same thing here and I still don't know how it really work.. I can use, modify or compile it but not write a single SCSS, LESS or whatever file.. !  I first put my hand into theses things recently with the AdminThemeUikit and AdminThemeBoss. But once you get it, I must admit that they are usefull.

A small advice to get started with theses things, take a look there from @Noel Boss 

https://github.com/noelboss/AdminThemeBoss#modify-yourself

 

Anyway, great addition, thanks again 🙂

Share this post


Link to post
Share on other sites
1 hour ago, flydev said:

Really great ! Thanks for sharing !

Is there a SCSS version of it ?

.uk-form-controls-text label:only-of-type input.uk-checkbox {
    font-size: .8rem;
    margin-top: 0;
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 4em;
    height: 2.4em;
    border: 2px solid #D6D6D6;
    border-radius: 3em;
    box-shadow: inset 5em 0 0 0 #DDD;
    flex-shrink: 0;

    &:after {
        content: "";
        position: absolute;
        top: .25em;
        left: .25em;
        background: #FFF;
        width: 1.6em;
        height: 1.6em;
        border-radius: 50%;
        transition: all 250ms ease 20ms;
        box-shadow: .05em .25em .5em rgba(0, 0, 0, 0.2);
    }
}

.uk-form-controls-text label:only-of-type input.uk-checkbox:checked {
    background-color: transparent;
    box-shadow: inset 5em 0 0 0 #4ed164;
    border-color: #67bba5;

    &:after {
        left: 1.85em;
        box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
    }
}

label:only-of-type input.uk-checkbox:checked+span {
    color: #008a00;
    transition: all 250ms ease 20ms;
}

.InputfieldCheckbox .InputfieldContent label:only-of-type {
    display: flex;
}

label:only-of-type input.uk-checkbox+span {
    color: #c3c3c3;
    display: flex;
    align-items: center;
    line-height: 1.1;

}

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
2 minutes ago, flydev said:

gandalf_scss.jpg.97aff76f2d6e55a7cd3e05f0a9041103.jpg

I've just stripped out the ":after" declarations nesting them inside their respective selectors 🙂

  • Like 1

Share this post


Link to post
Share on other sites

@Chris Bennett @Noel Boss, I don't know how look your user edit page, but on mine, the checkboxes are not customized. It was also necessary to add the rule for :

.InputfieldCheckboxesStacked { }

 

Below the modified @3fingers version :

Spoiler

// Custom checkbox > on/off style
.InputfieldCheckboxesStacked label:only-of-type input.uk-checkbox, 
.uk-form-controls-text label:only-of-type input.uk-checkbox {
    font-size: .6rem;
    margin-top: 0;
    position: relative;
    -webkit-appearance: none;
    outline: none;
    width: 4em;
    height: 2.2em;
    border: 2px solid #D6D6D6;
    border-radius: 1em;
    box-shadow: inset 5em 0 0 0 #DDD;
    flex-shrink: 0;

    &:after {
      content: "";
      position: absolute;
      top: .1em;
      left: .25em;
      background: #FFF;
      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;
      transition: all 250ms ease 20ms;
      box-shadow: 0.05em 0.25em 0.5em rgba(0, 0, 0, 0.2);
    }
}

.InputfieldCheckboxesStacked label:only-of-type input.uk-checkbox:checked, 
.uk-form-controls-text label:only-of-type input.uk-checkbox:checked {
    background-color: transparent;
    box-shadow: inset 5em 0 0 0 #464646;
    border-color: @github-button-border-color-hover;

    &:after {
        left: 1.85em;
        box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
    }
}

label:only-of-type input.uk-checkbox:checked+span {
    color: @reno-text-color;
    transition: all 250ms ease 20ms;
}

.InputfieldCheckbox .InputfieldContent label:only-of-type {
    display: inline-flex;
}

label:only-of-type input.uk-checkbox+span {
    color: #c3c3c3;
    display: inline-flex;
    align-items: center;
    line-height: 1.1;
    vertical-align: middle;
}

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Greg Lumley
      Hi! In busy learning to know PW better I'm looking at existing code.
      I have Bitpoets Editorial Responsive Blog as example. While looking through the code I've just found this line in the blog-head.php 
      <link rel="stylesheet" href="<?= $config->urls->templates ?>assets/css/main.css?ts=<?= time() ?>" /> I hope it's not a stupid question but I've never seen this before...
      main.css?ts=<?= time() ?> I notice the main template is empty but of course renders on the front end.
      Using a timestamp really has me totally confused. Can someone explain it to me please. 
      Thank you! 
      Greg
    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • By picarica
      so i just downloaded this template  and i uploaded it to my server made some .php changes so it would work and stuff but all the css-transitions or css-animations don't work. they just stop
      if you checked out the template all those buttons are smooth and really nice, bit when you check out my site all those animations are gone, why is that? is there some option i have to toggle? or is it normal? how do i fix it ?
    • By ngrmm
      I have a page with a table. Each table row has a page-reference field and a checkbox.
      The Page sends emails to all users (page-refrence->email-field) and change the value of the checkbox in a row to 1.
      It works with this:
      <?php // event ID fron url query $eventID = $input->get('eventID','int'); // get event-page $event = $pages->get($eventID); // config $fromEmail = $event->event_mail_from; $fromName = $event->event_mail_from_name; $emailSubject = $event->event_subject; // email html body ob_start(); include('./_inc/emailbody.inc'); $emailBody = ob_get_clean(); // make event-page editable $event->of(false); // loop through table and send out emails foreach($event->event_clients_list as $event_table_row) { // get client page $clientPage = $event_table_row->client_name; // get client email $clientEmail = $clientPage->email; // if client isn't invited yet (checkbox not checked) if($event_table_row->client_invited == '') { // send email $m = new WireMail(); $m->to($clientEmail); $m->from($fromEmail, $fromName); $m->subject($emailSubject); $m->bodyHTML($emailBody); $m->send(); // mark client as invited $event_table_row->client_invited = 1; $event->save('event_clients_list'); } } ?> But i have to use a variable in my emailbody.inc which i'm able to get in the table-loop.
      So i do the including of the body inside my loop. But this doesn't work anymore. Page sends out the emails but is unable to change the value of the checkbox.
      I get no errors!
      I'm using ProTable
      <?php // event ID fron url query $eventID = $input->get('eventID','int'); // get event-page $event = $pages->get($eventID); // config $fromEmail = $event->event_mail_from; $fromName = $event->event_mail_from_name; $emailSubject = $event->event_subject; // loop through table and send out emails foreach($event->event_clients_list as $event_table_row) { // get client page $clientPage = $event_table_row->client_name; // get client email $clientEmail = $clientPage->email; // email html body ob_start(); include('./_inc/emailbody.inc'); $emailBody = ob_get_clean(); // make event-page editable $event->of(false); // if client isn't invited yet (checkbox not checked) if($event_table_row->client_invited == '') { // send email $m = new WireMail(); $m->to($clientEmail); $m->from($fromEmail, $fromName); $m->subject($emailSubject); $m->bodyHTML($emailBody); $m->send(); // mark client as invited $event_table_row->client_invited = 1; $event->save('event_clients_list'); } } ?>  
    • By Peter Troeger
      Hello 🙂
      I have set up pagination on a mulitlanguage site.
      I've done this before, but this time I have a problem I can't solve.
      Pagination is activated on 'parent-template' and 'child-template' just to be sure 🙂
      This is my code:
      $children = $page->children('limit=1'); foreach($children as $child) { $title = $child->title; echo $title; } echo $children->renderPager(); The navigation is output correctly and the link look correct as well 'parent-page/page2/'.
      But when I click the link, the site seems to redirect back to 'parent-page/
      Any help would be greatly appreciated 🙂
      - Peter
×
×
  • Create New...