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 wwwouter
      Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
      <?php header("Content-type: text/css; charset: UTF-8"); header("Charset:utf-8"); if ($homepage->hero_image) { echo <<<CSS .hero { background: url($homepage->hero_image->url) no-repeat; } CSS; } ?> Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR] (My htaccess file is @version 3.0 and @htaccessVersion 301)
      This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR] I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
      I'm working on localhost, using MAMP (not sure if that's relevant).
      A bit more about what I want to do achieve specifically:
      I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change.
      I know I can achieve this like this:
      echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>"; But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
       
      P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
    • By schwarzdesign
      We're currently working on a few sites that have some users with very limited access; most importantly, some users can only edit their own profile and nothing else in the backend. We're using AdminThemeUiKit, so the CMS navbar only contains the site logo and the username for those users. The problem is that the crucial "View site" link that gets you back to the frontend is hidden in the dropdown behind the username. This isn't immediately obvious (and TBH it does feel out of place there, even when you know it's there).
      I'm looking for ways to make the "back to site" link more visible – and I also think this is worth a discussion for AdminThemeUiKit in general. Here's what I have considered:
      Ideally, clicking the logo would take you back to the frontend (currently, you just get a blank page with nothing but an 'edit profile' button). I checked the settings, but the Uikit theme only has options to open the site tree or open a side navigation. Maybe a new option to go back to the frontend could be added? Or maybe the method that gets the logo link should be made hookable, so I could retain the default behaviour for editors, but change the link for users with limited access. An additional link in the menu would also work. But the only way I can think of to add this would be a Process module that just redirects to the homepage. But that's a bit overcomplicated, and I would like to do this without the additional redirect. Of course, copying the theme and modifying it manually or inserting a prominent link with JavaScript would work, but both options are sort of hacky and require some upkeep. Is there a better way? Have you come across this problem yet, and how did you solve it? I'm looking forward to suggestions!
    • By jploch
      Admin Theme Canvas
      A minimal admin theme with optimised page editor UI, based on Uikit 3.
      Currently this is close to stable, but users are advised to be cautious and test thoroughly.
      This theme is tested in all major Browsers including IE 11, Edge (>85), Chrome (>85), Firefox (>81), Safari (>11).

      If you find any bugs or have ideas for improvements, feel free to post your feedback.
      Download from Github
      Download from Modules Page
      Features
      Minimal black and white admin theme Fixed masthead navigation Direct access to page tree navigation inside page dropdown Less distraction for editors (when editing a page, the tabs are displayed as a dropdown menu inside the main navigation) Options to customise the ui Less distraction for editors

      Direct access to page tree navigation inside dropdown

      Page tree

      Options to customise the ui

      Login (inspired by AdminThemeBoss)

      Requirements
      Process Wire 3.0.100 or greater
      Installation
      Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeCanvas“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“ Go to your user profile page and change the theme to Admin Theme Canvas
    • By modifiedcontent
      Small annoyance: I get a horizontal scrollbar in UIkit admin area - or actually Admin Theme Boss based on Uikit 3. I tried to fix it with CSS, but had trouble isolating/targeting it and don't want to mess with module or core files. I think this issue has been reported before. Is there a recommended fix? 
    • By cosmicsafari
      Hi all,
      Before I go potentially wasting time trying to achieve the impossible.
      Can anyone confirm if its possible to have a Page Reference field on a modules config page?
      I'm wanting to essentially just output a list of select able pages based on the a given selector (likely by template at this stage), wherein the select is the pages that the module should apply to etc. I was thinking a simple checkbox list would suffice is asmSelect isn't available.
      Essentially have it display the same way a Page Reference field would display on a template, where you can easily select a bunch of them.
      public function getInputfields() { $inputfields = parent::getInputfields(); $f = $this->modules->get('InputfieldPage'); $f->attr('name', 'testSelect'); $f->setAttribute('multiple', 'checkboxes'); $f->setAttribute('findPagesSelector', 'template=development'); $f->label = 'Test'; $inputfields->add($f); return $inputfields; } Figured something akin to the above would work but can't seem to get rid of this warning on the modules config screen though.

×
×
  • Create New...