|
// example button mixins pasted in from a recent project. |
|
// a hopefully useful example of how to inherit mixins from a base styleset |
|
// and minimize verboseness of fancy gradients |
|
|
|
= bg_sheen($bg) |
|
background-color: $bg |
|
background-image: -webkit-linear-gradient(top, rgba($bg, .5) 0%, rgba($bg + #111, .5) 49%, rgba($bg - #050505, .5) 50%, rgba($bg, .5) 100%) |
|
background-image: -moz-linear-gradient(top, $bg 0%, $bg + #111 49%, $bg - #050505 50%, $bg 100%) |
|
|
|
= button_base |
|
display: inline-block |
|
font-weight: normal |
|
text-decoration: none |
|
cursor: pointer |
|
overflow: visible |
|
line-height: 100% |
|
text-align: center |
|
+intro |
|
&[disabled], &.disabled |
|
+opacity(.6) |
|
cursor: default |
|
|
|
= button_skeleton($bg, $border, $color) |
|
+button_base |
|
color: $color |
|
text-shadow: 0 0 1px $bg |
|
+bg_sheen($bg) |
|
border: 1px solid $border |
|
+border-radius(3px) |
|
+box-shadow(0 1px 1px #777) |
|
+transition-property(background-color) |
|
+transition-duration(200ms) |
|
&:hover |
|
background-color: $bg + #222 |
|
&.disabled:hover |
|
+bg_sheen($bg) |
|
|
|
= nav_button |
|
+button_skeleton(#e7e7e7, #c9c9c9, #4f4f4f) |
|
text-transform: uppercase |
|
font-size: 14px |
|
padding: 12px 30px 6px 30px |
|
|
|
= answer_button($y_padding: 8) |
|
+button_skeleton(#e7e7e7, #c9c9c9, #4f4f4f) |
|
font-size: 14px |
|
padding: #{$y_padding + 4}px 20px #{$y_padding}px 20px |
|
text-align: center |
|
min-width: 60px |
|
&.selected, |
|
&.selected:hover |
|
+gradient-bg(#cdcdcd, #dedede) |
|
border-bottom: 1px solid #ddd |
|
+box-shadow((0 1px 1px #c9c9c9, inset 0 0 8px rgba(0,0,0,.2), inset 0 1px 0px #999)) |
|
text-shadow: 0 1px 0 #fff |
|
|
|
= multiple_answer_button |
|
+button_base |
|
+intro |
|
border: 1px solid #c9c9c9 |
|
background: #fff |
|
color: #737373 |
|
background: url("/assets/icon_check_off.png") #fff 3px 3px no-repeat |
|
padding: 7px 10px 4px 26px |
|
font-size: 14px |
|
+border-radius(3px) |
|
&.checked |
|
color: #333 |
|
background-image: url("/assets/icon_check_on.png") |
|
|
|
= bright_button |
|
+button_skeleton(#00e9ff, #00bbce, #000) |
|
font-size: 15px |
|
padding: 14px 30px 8px 30px |
|
font-size: 14px |
|
text-transform: uppercase |
|
text-shadow: 0 1px 0 #b6eff6 |
|
|
|
= remove_button |
|
+button_skeleton(#e7e7e7, #c9c9c9, #4f4f4f) |
|
height: 13px |
|
width: 13px |
|
padding: 2px |
|
text-indent: -9327px |
|
span |
|
background: url("/assets/icon_close.png") |
|
width: 13px |
|
height: 13px |
|
display: block |
