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 Zendex
      Hi,
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
       
      HTML:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Zendex</title>
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
      </head>
      <body>
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
      <ul>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
              </ul>
          </div>
          <div class="main"></div>
      </body>
      </html>
      CSS:
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      }
      body {
          line-height: 1;
          background-color: #6A6969;
      }
      ol, ul {
          list-style: none;
      }
      blockquote, q {
          quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      }
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }
      /*-------------------------------------------------------------------------------------------------------------------------------------------------*/
      #nav_bar{
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
      }
      li{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
      }
      #Zendex{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
      }
      #home{
          
      }
      #about{
          
      }
      #films{
          
      }
      #contact{
          
      }
      ul{
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
      }
      a:link{
          color: white;
      }
      li:hover{
          height: 125px;
          background-color: #6A6969;
          color: white;
      }
       

    • By milo695
      Hello,
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
      thanks
    • By killedfriendz
      I am very sorry for asking this but i totally do not understand how to set values of checbox using API. 
      I have checbox field on my page with name "order_status". 
      So i've tried few ways to make it checked but it still doesn't work:
       
      $userPage->order_status->value = 1; $userPage->order_status->add(1); $userPage->order_status->add(true); Could you please tell me how to do it?
    • 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!
×
×
  • Create New...