Skip to content

Instantly share code, notes, and snippets.

@htatche
Last active January 3, 2016 11:19
Show Gist options
  • Save htatche/8455814 to your computer and use it in GitHub Desktop.
Save htatche/8455814 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
/* Add .selected class to the active element */
.wrapper
.left-toggle.selected left
.right-toggle right
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
@mixin highlight-selected
background-color: #949494
border: 1px solid #949494
color: white
.wrapper
width: 224px
height: 70px
line-height: 70px
border-radius: 10px
font-size: 18px
font-family: Verdana
color: #5E5E5E
.left-toggle
float: left
border-top-left-radius: 10px
border-bottom-left-radius: 10px
.right-toggle
float: right
border-top-right-radius: 10px
border-bottom-right-radius: 10px
.left-toggle, .right-toggle
width: 110px
height: inherit
line-height: inherit
text-align: center
border: 1px solid #AFAFAF
background-color: #E0E0E0
&.selected
@include highlight-selected
.wrapper {
width: 224px;
height: 70px;
line-height: 70px;
border-radius: 10px;
font-size: 18px;
font-family: Verdana;
color: #5e5e5e;
}
.wrapper .left-toggle {
float: left;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.wrapper .right-toggle {
float: right;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.wrapper .left-toggle, .wrapper .right-toggle {
width: 110px;
height: inherit;
line-height: inherit;
text-align: center;
border: 1px solid #afafaf;
background-color: #e0e0e0;
}
.wrapper .left-toggle.selected, .wrapper .right-toggle.selected {
background-color: #949494;
border: 1px solid #949494;
color: white;
}
<!-- * Add .selected class to the active element */ -->
<div class='wrapper'>
<div class='left-toggle selected'>left</div>
<div class='right-toggle'>right</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment