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 louisstephens
      Is it possible to use count() to return a number of repeater items don't have a checkbox checked? In my current set up, I have a repeater on the page "dev_repeater" with a checkbox called "dev_repeater_exclude". I need to get a count of the current items that do not have it checked so I can pass it to my css grid to alter the column width.
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Four unique color options Beautifully redesigned login screens Modern typografy 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   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

      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
    • By AndZyk
      With around 3,400 employees worldwide, IMS Gear develops and produces specific drive solutions for international customers. In addition to the focus on the automotive industry, the focus is on applications for industry and e-mobility concepts.
      Finding new employees is important for the day-to-day business of IMS Gear. For this reason our agency designconcepts developed a job portal, where potential employees can easily inform themselves about the company, the application process and find the job they are looking for. The website was build with help of the framework UIkit.
      jobs.imsgear.com
       
      Features:
      Job finder Job offer PDF Newsletter Fly-in information pages  
      Job finder
      Core of the website is the job exchange with the job finder. Here you get a list of all available jobs which you can filter by three main areas (categories, task areas and locations). Or you can type in anything in the search field and filter by various keys (for example ID, title, country and hidden tags). The job finder was build with jQuery Typeahead, which was really helpful in building this complex logic. If you want to know which job is the closest to you, you can sort them by distance.

       
      Job offer PDF
      Every job offer has a printable PDF version for newspapers or other job platforms. The job offer PDF can be created by checking a checkbox in the back-end and saving the page. The PDF will then be created with all needed fields of that page and DocRaptor. This workflow is really easy for editors and guarantees a consistent layout for all created PDFs.

       
      Newsletter
      If there is no job for you available at the moment, you can subscribe to a newsletter with your areas of interest. Then you will be notified daily if a job is available with your interests. Instead of using a separate newsletter tool, the nice module Newsletter Subscription was used to manage subscribers. The newsletter will be send via a shell script executed by a daily cron job.
       
      Modules used:
      Continents and Countries Front-End Page Editor Functional Fields Markup Sitemap XML Newsletter Subscription ProCache Repeater Matrix Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
    • By AndZyk
      S. Siedle & Söhne Telefon- und Telegrafenwerke OHG is one of the leading manufacturers of building communications technology in Germany and Europe. For a company of this size it is important to have a solid brand communication. For this reason our agency designconcepts developed a portal where the employees of the company as well as others who work with or have interest in their brand can find everything that is important for the brand Siedle.
      The website introduces the brand, provides informations for different topics (for example logos, typography, colors etc.) and has a large Media-Center with images, videos and documents. The website was build with the framework UIkit.
      brand.siedle.com
       
      Features:
      Repeater Matrix Protected Content Media-Center Cart Auotcomplete Search  
      Repeater Matrix
      The information pages are build with a Repeater Matrix field and have a two columns layout. To be even more flexible, a section is a content element containing two Repeater Matrix fields for each column. This maybe sound crazy at first but was no problem and made complex layouts possible. 😀

       
      Protected Content
      Not all of the informations are meant for guests, so we made it possible to protect each page, section and content element with a checkbox. If this checkbox is checked, the content will only be visible for logged-in users.
       
      Media-Center
      The core of the brand portal is the Media-Center. The Media-Center is actually a mirror of a separate digital assets management database where the client can manage images, videos and documents with a nice interface in a protected environment.
      All new assets will be synced via a shell script containing PHP and curl commands calling the API of the database. This script will be executed every 15 minutes via cron job. This way all of the assets are saved as pages in ProcessWire and we can expand them with our own logic and fields. Also for the unlikely case that the database is not available, the Media-Center would still work.
       
      Cart
      Inside the Media-Center you can add assets to your cart. This cart is for downloading selected assets or sharing them with others. A cart will be accessible for 30 days.
       
      Modules used:
      Admin Custom Files Continents and Countries Email Obfuscation (EMO) Front-End Page Editor Functional Fields Markup Sitemap XML ProCache Repeater Matrix Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      The Katharinenhöhe is a rehabilitation clinic in the Black Forest (Germany) for teenagers, young adults and families with children who suffer from cancer. Our agency designconcepts was lucky to relaunch their website.
      Our goal was to unify the previous separated areas (families and teenagers/young adults) and provide a clear structure for potential patients. Also we wanted to show that the clinic is a nice place to live, despite the circumstances. We rebuild the website from scratch with the framework UIkit and used large images as well as videos.
      www.katharinenhoehe.de
       
      Features:
      Repeater Matrix Tour Contrast Theme Glossary Autocomplete Search Facebook  
      Repeater Matrix
      Most of the pages use a basic page template which have one Repeater Matrix field. This field has around 15 different content elements, so it is easy to build a page with different elements in various amounts.

       
      Tour
      On the site tour we build a image map with markers showing interesting places of the clinic. For this task the nice module Image Marker and the Marker component of UIkit came in handy. The tour is available on every page containing a marker.

       
      Contrast Theme
      For a better reading experience you can switch to a more contrasting theme of the website by clicking the theme switcher (on the top right). This is a separate stylesheet with darker color variables. The choice will be saved in a session variable and stays as long as the browser is opened.
       
      Glossary
      To explain complicated medical terms better, we highlight a set of terms in every textarea they occur and explain them with a tooltip. For this task we wrote a simple Textformatter module which looks for the terms in a page and replaces the terms with the tooltip.
      This tutorial by @benbyf helped me. Thank you! 😉
       
      Modules used:
      Color Email Obfuscation (EMO) Front-End Page Editor Functional Fields Image Marker Markup Sitemap XML Phone ProCache Repeater Matrix Tracy Debugger Upgrades  
      Regards, Andreas