1/* Buttons */ 2 3// Buttons 4@import "../functions/button-size"; 5 6// Button structure 7.btn, .skiplink { 8 display: inline-block; 9 width: auto; 10 background: $default-color; 11 -webkit-appearance: none; 12 font-family: $font-family; 13 font-weight: $button-font-weight; 14 padding: 0 !important; 15 text-align: center; 16 .pretty & { @extend .pretty.btn; } 17 .metro & { @extend .metro.btn; } 18 19 > a, input, button { 20 display: block; 21 padding: 0 $default-button-padding; 22 color: $white; 23 height: 100%; 24 } 25 26 input, button { 27 background: none; 28 border: none; 29 width: 100%; 30 font-size: 100%; 31 cursor: pointer; 32 font-weight: $type-font-weight; 33 @include appearance(none); 34 } 35} 36 37// Button Shapes & Sizes 38.btn, .skiplink { 39 &.xlarge { 40 @include button-size(xlarge); 41 } 42 &.large { 43 @include button-size(large); 44 } 45 &.medium { 46 @include button-size(medium); 47 a { 48 padding: 0 ms(1); 49 } 50 } 51 &.small { 52 @include button-size(small); 53 a { 54 padding: 0 ms(-1); 55 } 56 } 57 58 &.oval { 59 @include shape(oval); 60 } 61 62 &.pill-left { 63 @include shape(pill-left); 64 } 65 66 &.pill-right { 67 @include shape(pill-right); 68 } 69} 70 71// Button Colors & Styles 72.btn, .skiplink { 73 @each $shade in $ui-coloring { 74 &.#{nth($shade, 1)} { 75 background: nth($shade, 2); 76 border: 1px solid nth($shade, 2); 77 &:hover { 78 background: lighten(nth($shade, 2), 10%); 79 } 80 &:active { 81 background: darken(nth($shade, 2), 10%); 82 } 83 @if nth($shade, 1) == default { 84 color: darken(nth($shade, 2), 61.5%); 85 border: 1px solid nth($shade, 2); 86 &:hover { 87 border: 1px solid darken(nth($shade, 2), 5%); 88 } 89 a, input, button { 90 color: darken(nth($shade, 2), 61.5%); 91 } 92 } 93 @if nth($shade, 1) == warning { 94 color: darken(nth($shade, 2), 40%); 95 a, input, button { 96 color: darken(nth($shade, 2), 40%); 97 } 98 } 99 } 100 } 101} 102 103.btn.metro, 104.skiplink.metro, 105.btn.pretty.squared, 106.pretty .btn.squared { 107 @include border-radius(0); 108} 109 110.btn.pretty, 111.skiplink.pretty, 112.btn.metro.rounded, 113.metro .btn.rounded { 114 @include border-radius($button-radius); 115} 116 117 118// Buttons with Gradients 119.btn, .skiplink { 120 &.pretty { 121 @each $grade in $ui-coloring { 122 &.#{nth($grade, 1)} { 123 @include background-image(linear-gradient(lighten(nth($grade, 2), 20%), saturate(nth($grade, 2), 5%))); 124 @include box-shadow(inset 0 0 3px lighten(nth($grade, 2), 45%)); 125 border: 1px solid darken(nth($grade, 2), 15%); 126 &:hover { 127 @include background-image(linear-gradient(lighten(nth($grade, 3), 15%), saturate(nth($grade, 3), 5%))); 128 @include box-shadow(inset 0 0 3px lighten(nth($grade, 3), 40%)); 129 border: 1px solid darken(nth($grade, 3), 15%); 130 } 131 &:active { 132 @include background-image(linear-gradient(saturate(nth($grade, 2), 5%), lighten(nth($grade, 2), 20%))); 133 @include box-shadow(inset 0 0 3px lighten(nth($grade, 2), 50%)); 134 } 135 @if nth($grade, 1) == default { 136 a, input, button { 137 text-shadow: 0 1px 1px lighten(nth($grade, 2), 20%); 138 } 139 } 140 @elseif nth($grade, 1) == warning { 141 color: darken(nth($grade, 2), 40%); 142 a, input, button { 143 text-shadow: 0 1px 1px lighten(nth($grade, 2), 20%); 144 } 145 } 146 @else { 147 a, input, button { 148 text-shadow: 0 1px 1px darken(nth($grade, 2), 20%); 149 } 150 } 151 } 152 } 153 } 154} 155