Skip to content

Instantly share code, notes, and snippets.

@mnich

mnich/SassMeister-input-HTML.html

Last active October 24, 2015 18:10
Show Gist options
  • Save mnich/eb3bc2d6f54d51a97d7c to your computer and use it in GitHub Desktop.
Save mnich/eb3bc2d6f54d51a97d7c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<label class=label label--switch
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
.label--switch {
width: 100%;
input {
display: none;
}
&.green {
.switch {
background: rgba(102,204,153, .26);
&:active {
&:before {
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(102,204,153,0.1);
}
}
}
input:checked + .switch {
background: rgba(102,204,153,0.5);
}
input:checked + .switch:before {
background: #66cc99;
}
input:checked + .switch:active{
&:before {
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(102,204,153,0.2);
}
}
}
.switch {
display: inline-block;
position: relative;
width: 40px;
height: 16px;
border-radius: 8px;
background: rgba(241, 169, 35, 0.26);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: -4px;
left: -4px;
width: 24px;
height: 24px;
background: #fafafa;
box-shadow: 0 2px 8px rgba(0,0,0,0.28);
border-radius: 50%;
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
&:active{
&:before {
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(241, 169, 35,0.1);
}
}
}
input:checked + .switch {
background: rgba(241, 169, 35,0.5);
}
input:checked + .switch:before {
left: 20px;
background: #f1a923;
}
input:checked + .switch:active{
&:before {
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(241, 169, 35,0.2);
}
}
}
Raw
SassMeister-output.css
.label--switch {
width: 100%;
}
.label--switch input {
display: none;
}
.label--switch.green .switch {
background: rgba(102, 204, 153, 0.26);
}
.label--switch.green .switch:active:before {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(102, 204, 153, 0.1);
}
.label--switch.green input:checked + .switch {
background: rgba(102, 204, 153, 0.5);
}
.label--switch.green input:checked + .switch:before {
background: #66cc99;
}
.label--switch.green input:checked + .switch:active:before {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(102, 204, 153, 0.2);
}
.label--switch .switch {
display: inline-block;
position: relative;
width: 40px;
height: 16px;
border-radius: 8px;
background: rgba(241, 169, 35, 0.26);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
cursor: pointer;
}
.label--switch .switch:before {
content: '';
position: absolute;
top: -4px;
left: -4px;
width: 24px;
height: 24px;
background: #fafafa;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
border-radius: 50%;
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.label--switch .switch:active:before {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(241, 169, 35, 0.1);
}
.label--switch input:checked + .switch {
background: rgba(241, 169, 35, 0.5);
}
.label--switch input:checked + .switch:before {
left: 20px;
background: #f1a923;
}
.label--switch input:checked + .switch:active:before {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 0 0 20px rgba(241, 169, 35, 0.2);
}
Raw
SassMeister-rendered.html
<label class=label label--switch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment