test-styl/plum-styl/_buttons.styl
// $TODO awful lot of css just for buttons
// especially since we're already pulling in bootstrap
// this file can probably be refactored out of existence later
// Buttons
.button-purple
background: $color-purple
border-radius: 32px
border: 0
color: $color-white
font-size: 1em
outline: 0
padding-left: 2em
padding-right: 2em
// $TODO seems unnecessary
&:hover,
&:focus,
&:active
border: 0
color: $color-white
outline: 0
&:hover,
&:focus
background: $color-purple-l
&:active
background: $color-purple-d
// 1 Reset unusual Firefox-on-Android default style
// see https://github.com/necolas/normalize.css/issues/214
.btn
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base)
display: inline-block
margin-bottom: 0 // For input.btn
font-weight: $btn-font-weight
text-align: center
vertical-align: middle
cursor: pointer
background-image: none // 1
border: 1px solid transparent
white-space: nowrap
&,
&:active,
&.active
&:focus
tab-focus()
&:hover,
&:focus
color: $btn-default-color
text-decoration: none
&:active,
&.active
// box-shadow( inset 0 3px 5px rgba( 0, 0, 0, .125 ) )
background-image: none
outline: 0
&.disabled,
&[disabled],
fieldset[disabled] &
box-shadow(none)
opacity(.65)
cursor: not-allowed
pointer-events: none // Future-proof disabling of clicks
.btn-block
display: block
padding-left: 0
padding-right: 0
width: 100%
.btn-sm
// line-height: ensure proper height of button next to small input
button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small)
.button-green
background: $color-green
border-radius: 32px
border: 0
color: $color-white
outline: 0
padding-left: 2em
padding-right: 2em
// $TODO seems unnecessary
&:hover,
&:focus,
&:active
border: 0
color: $color-white
outline: 0
&:hover,
&:focus
background: $color-green-l
&:active
background: $color-green-d
// Plum home page buttons
.button
transition( all, $fast )
background: none
border-radius: 4px
border: 1px solid $color-blue-l
color: $color-blue-l
display: inline-block
font-weight: 500
margin: .5em
padding: .5em 1em
text-align: center
text-decoration: none
&:hover
background: $color-blue-l
color: $color-white !important // $TODO come back and remove the !important
text-decoration: none
cursor: pointer
&:focus,
&:active
border-color: $color-blue
box-shadow: 0 0 10px $color-blue-l
outline: 0
&.white
background: $color-green
border-color: $color-green-l
color: $color-white
&:hover
border-color: $color-green-xl
box-shadow: 0 0 12px $color-purple
&:focus,
&:active
border-color: $color-green-d
&.purple
border-color: $color-purple-l
&:hover
background: $color-purple-l
&:focus,
&:active
border-color: $color-purple
box-shadow: 0 0 7px $color-purple-xl
&.green
border-color: $color-green
&:hover
background: $color-green
&:focus,
&:active
border-color: $color-green-d
box-shadow: 0 0 7px $color-green-l
&.purple-l
background: @color-white
border-color: $color-purple
color: $color-purple-l
// Button groups
.btn-group
vertical-align: text-top
.active
@extends .button-green // @REPLACE
box-shadow: none
border: 0
.io-button-group-vertical,
.io-button-group
&.group-small
.btn
// @extends $btn-sm
box-shadow: none
border: 0
margin: 0
.io-button-group-vertical
margin-bottom: 2ex
// .btn.active
// @extends $button-green
@media ( min-width: $screen-sm )
{btn-group-vertical}
display: block !important
> .btn
&:not( :first-child ):not( :last-child )
border-radius: 0
&:first-child:not( :last-child )
border-bottom-radius( 0 )
border-top-right-radius: $border-radius-base
&:last-child:not( :first-child )
border-top-radius( 0 )
border-bottom-left-radius: $border-radius-base
> .btn-group:not( :first-child ):not( :last-child ) > .btn
border-radius: 0
> .btn-group:first-child:not(:last-child)
> .btn:last-child,
> .dropdown-toggle
border-bottom-radius( 0 )
> .btn-group:last-child:not(:first-child) > .btn:first-child
border-top-radius( 0 )
@media ( max-width: $screen-sm-max )
// .btn-group // @REPLACE
padding: 0 .5ex
> .btn
&:not( :first-child ):not( :last-child )
border-radius: 0
&:first-child:not( :last-child )
border-right-radius( 0 )
border-top-left-radius: $border-radius-base
&:last-child:not( :first-child )
border-left-radius( 0 )
border-top-right-radius: $border-radius-base
> .btn-group:not( :first-child ):not( :last-child ) > .btn
border-radius: 0
> .btn-group:first-child:not( :last-child )
> .btn:last-child,
> .dropdown-toggle
border-bottom-radius( 0 )
> .btn-group:last-child:not(:first-child) > .btn:first-child
border-top-radius( 0 )
@media ( max-width: $screen-sm-max )
// .btn-group @TODO fix this
padding: .5em .5em .5em 0
.btn
font-size: 11px !important
// Radio and checkbox groups
// $TODO should just redo all this from scratch
.radio-group.pills .radio,
.checkbox-group.pills .checkbox
transition( all, $fast )
// @extends .shadow-m
background: $color-white
border-radius: 2px
color: $color-gray-m
cursor: pointer
display: inline-block
margin: .25em
padding: 0
user-select: none
&:hover
color: $color-gray-d
box-shadow: 0 1px 6px rgba(0,0,0,.5)
@media ( max-width: $screen-xs-max )
font-size: 1.25em
input
&.radio-input,
&.checkbox-input
display: none
&.write-in-input
transition( all, $slow, true )
background: $color-purple-xl
border-radius: 0 2px 2px 0
margin: 0
opacity: 0
padding: 0
text-decoration: underline
width: 0
&:-moz-placeholder, // Mozilla Firefox 4 to 18
&::-moz-placeholder, // Mozilla Firefox 19+
&:-ms-input-placeholder, // Internet Explorer 10+
&::-webkit-input-placeholder // WebKit browsers
color: $color-purple-xxl
opacity: .7
label
display: inline-block
font-size: .95em
font-weight: 100 !important
margin: 0
padding: 0 .7em
> span
display: inline-block
padding-bottom: .15em
padding-top: .2em
&.active
color: $color-white
background: $color-purple-l
input
&.write-in-input
opacity: 1
padding: .2em .5em
width: 12em
&.result
position: relative
&:hover
background: none
span
position: relative
z-index: 5
.bar
background: $color-purple-xxl
border-left: 3px solid $color-purple
height: 1.4em
margin-left: -20px
position: absolute
transition: width .2s ease-out
width: 15px
.chosen
background: $color-purple-xl
// Mobile-specific styles
.button-mobile
transition( all, $fast )
background-color: $color-purple
border-bottom: 1px solid $color-purple-d
border: 0
color: $color-purple-xl
font-size: 23px
height: 52px
line-height: 52px
outline: 0
text-align: left
width: 100%
&:first-child
border-top: 1px solid $color-purple-d
.ss-icon
transition( opacity, $fast )
font-size: .8em
margin: 0 8px 0 15px
opacity: .15
&.active
color: $color-white
background: $color-purple-d
border-bottom: 1px solid $color-purple
.ss-icon
opacity: 1
// @REPLACE
.button-mobile-nav
// @extends $animated
// @extends $bounceInUp
// @extends $gradient-green
// @extends $shadow-m
box-shadow: 0 -1px 3px rgba( 0, 0, 0, .2 )
height: 54px
padding: 0 15px
z-index: 11
&.button-raised
bottom: 48px
// @REPLACE
a
// @extends $animated
// @extends $fadeIn
// @extends $text-shadow-reverse
font-size: 16px
width: 50%