Skip to content

Instantly share code, notes, and snippets.

@Adriench

Adriench/README.md

Last active August 29, 2015 14:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Adriench/5a95493dd5445049ff7d to your computer and use it in GitHub Desktop.
Save Adriench/5a95493dd5445049ff7d to your computer and use it in GitHub Desktop.
Download ZIP
iOS checkboxes - Sass Styles + @mixin for custom colors
Raw
README.md

iOS Checkboxes

Sass styles + Mixin for other colors

Note: the scss need Compass to compile correctly

Demo: Codepen (IE 9+)

The utilisation is simple just use the .ios-custom class on any checkbox.

<input type="checkbox" class="ios-custom" id="switch"/>
<label for="switch"></label>

Has these styles are basically hiding the <input type="checkbox"> and styling the <label>. The label must follow the input for the styles to apply correctly

####With label

<input type="checkbox" class="ios-custom" id="switch2" checked />
<label for="switch2">I'm a label</label>

####Inverted

<input type="checkbox" class="ios-custom inverted" id="switch_inverted" checked />
<label for="switch_inverted">I'm a label aligned right</label>

####Small

<input type="checkbox" class="ios-custom small" id="switch_small" checked />
<label for="switch_small">I'm small</label>

####Large

<input type="checkbox" class="ios-custom large" id="switch_large" checked />
<label for="switch_large">I'm large</label>

####Colored with the @mixin

$color-name : 'sunflower';
$color-value : #F1C40F;
@include ios-checkbox( $color-name , $color-value );

<div class="sunflower">
    <input type="checkbox" class="ios-custom" id="switch_large" checked />
    <label for="switch_large">I'm a label</label>
</div>

####or

<input type="checkbox" class="ios-custom sunflower" id="switch_large" checked />
<label for="switch_large">I'm a label</label>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iOS Custom checkboxes</title>
<link rel="stylesheet" href="./ios_checkboxes.css" />
</head>
<body>
<h2>iOS Checkboxes</h2>
<input type="checkbox" class="ios-custom" id="switch1"/>
<label for="switch1">unchecked</label>
<br/>
<input type="checkbox" class="ios-custom" id="switch2" checked />
<label for="switch2">checked</label>
<br/>
<input type="checkbox" class="ios-custom" id="switch3" disabled />
<label for="switch3">disabled</label>
<br/>
<input type="checkbox" class="ios-custom inverted" id="switch4" checked/>
<label for="switch4">inverted label</label>
<br/>
<input type="checkbox" class="ios-custom small" id="switch5" checked />
<label for="switch5">small</label>
<br/>
<input type="checkbox" class="ios-custom large" id="switch6" checked />
<label for="switch6">large</label>
<br/>
<input type="checkbox" class="ios-custom sunflower" id="switch7" checked/>
<label for="switch7">sunflower</label>
<br/>
<div class="alizarin">
<input type="checkbox" class="ios-custom" id="switch8" checked/>
<label for="switch8">color class on a wrapper</label>
</div>
</body>
</html>
Raw
ios_checkboxes.scss
@import "compass/css3";
// ==============
// iOS checkboxes
// ==============
$switch-width : 40px;
$switch-width-small : 30px;
$switch-width-large : 50px;
$switch-bg-color : #eeeeee;
$switch-bg-active-color : #4DD865;
$switch-knob-color : #ffffff;
input[type="checkbox"].ios-custom{ // Checkbox only
display: none; // Hide original checkbox
// ---------
// Unchecked
// ---------
& + label{ // Text Node
margin : 5px;
position : relative;
display : inline-block;
padding-left : $switch-width * 1.2;
cursor : pointer;
line-height : $switch-width / 2;
&:before,
&:after{
content : '';
position : absolute;
top : 0;
left : 0;
height : $switch-width / 2;
border-radius : $switch-width;
@include transition( all 0.2s ease );
}
&:before{ // Background
background-color : $switch-bg-color;
width : $switch-width;
@include box-shadow( inset 0 2px 4px rgba( 0, 0, 0, .4 ) );
}
&:after{ // Switch knob
width : $switch-width / 2;
background-color : $switch-knob-color;
@include box-shadow( 0 2px 4px rgba( 0, 0, 0, .4 ) );
}
}
// -------
// Checked
// -------
&:checked + label{
&:before{ background-color: $switch-bg-active-color; }
&:after{ left: $switch-width / 2; }
}
// --------
// Disabled
// --------
&:disabled + label{
@include opacity(0.5);
cursor: not-allowed;
}
// --------
// Inverted
// --------
&.inverted{
& + label{
text-align: right;
padding-left : 0;
padding-right : $switch-width * 1.2;
&:before,
&:after{
top : 0;
right : 0;
left: initial;
}
}
}
&.inverted:checked + label{
&:after{
left: initial;
right: $switch-width / 2;
}
}
// -----
// Small
// -----
&.small{
& + label{
padding-left : $switch-width-small * 1.2;
line-height : $switch-width-small / 2;
&:before,
&:after{
height : $switch-width-small / 2;
border-radius : $switch-width-small;
}
&:before{
width : $switch-width-small;
}
&:after{
width : $switch-width-small / 2;
}
}
&:checked + label{
&:after{ left: $switch-width-small / 2; }
}
}
// -----
// Large
// -----
&.large{
& + label{
padding-left : $switch-width-large * 1.2;
line-height : $switch-width-large / 2;
&:before,
&:after{
height : $switch-width-large / 2;
border-radius : $switch-width-large;
}
&:before{ width : $switch-width-large; }
&:after{ width : $switch-width-large / 2; }
}
&:checked + label{ // When checked
&:after{ left: $switch-width-large / 2; }
}
}
}
// ======================
// Mixin for other colors
// ======================
@mixin ios-checkbox( $colorname, $color ){
.#{$colorname} input[type="checkbox"].ios-custom,
input[type="checkbox"].ios-custom.#{$colorname}{
&:checked + label{
&:before{ background-color: $color; }
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment