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