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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By rafaoski
      This profile can be used as a simple business card or blog.
      The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.
      To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).
      With include functions like:
      MarkupRegions
      FunctionsAPI
      CAN DOWNLOAD FROM THIS LINK:
      https://github.com/rafaoski/site-grayscale-pw
      https://github.com/rafaoski/site-min-grayscale-pw
      Screenshot:

       
    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Requires the latest version processwire 3.0.101 !!!
      Milligram Site Profile For Processwire 3x with include functions like:
      MarkupRegions
      FunctionsAPI
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
       
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )
      https://github.com/rafaoski/site-milligram
      https://github.com/rafaoski/site-milligram-blog
      Screenshot:

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      Node.js
      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      References:
      Milligram
      Gridlex
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
      Particles.js
       
       
       
       
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Five unique color options Beautifully redesigned login screens Modern typography using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users Compatibility with AdminOnStreoids and other third party modules   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Smooth Green *new with 0.6.1*

       
      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ 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“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
×
×
  • Create New...