corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
61 | office | 1 | // Button variants |
2 | // |
||
3 | // Easily pump out default styles, as well as :hover, :focus, :active, |
||
4 | // and disabled options for all buttons |
||
5 | |||
6 | @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { |
||
7 | color: color-yiq($background); |
||
8 | @include gradient-bg($background); |
||
9 | border-color: $border; |
||
10 | @include box-shadow($btn-box-shadow); |
||
11 | |||
12 | @include hover { |
||
13 | color: color-yiq($hover-background); |
||
14 | @include gradient-bg($hover-background); |
||
15 | border-color: $hover-border; |
||
16 | } |
||
17 | |||
18 | &:focus, |
||
19 | &.focus { |
||
20 | // Avoid using mixin so we can pass custom focus shadow properly |
||
21 | @if $enable-shadows { |
||
22 | box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); |
||
23 | } @else { |
||
24 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); |
||
25 | } |
||
26 | } |
||
27 | |||
28 | // Disabled comes first so active can properly restyle |
||
29 | &.disabled, |
||
30 | &:disabled { |
||
31 | color: color-yiq($background); |
||
32 | background-color: $background; |
||
33 | border-color: $border; |
||
34 | } |
||
35 | |||
36 | &:not(:disabled):not(.disabled):active, |
||
37 | &:not(:disabled):not(.disabled).active, |
||
38 | .show > &.dropdown-toggle { |
||
39 | color: color-yiq($active-background); |
||
40 | background-color: $active-background; |
||
41 | @if $enable-gradients { |
||
42 | background-image: none; // Remove the gradient for the pressed/active state |
||
43 | } |
||
44 | border-color: $active-border; |
||
45 | |||
46 | &:focus { |
||
47 | // Avoid using mixin so we can pass custom focus shadow properly |
||
48 | @if $enable-shadows { |
||
49 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); |
||
50 | } @else { |
||
51 | box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); |
||
52 | } |
||
53 | } |
||
54 | } |
||
55 | } |
||
56 | |||
57 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { |
||
58 | color: $color; |
||
59 | background-color: transparent; |
||
60 | background-image: none; |
||
61 | border-color: $color; |
||
62 | |||
63 | &:hover { |
||
64 | color: $color-hover; |
||
65 | background-color: $active-background; |
||
66 | border-color: $active-border; |
||
67 | } |
||
68 | |||
69 | &:focus, |
||
70 | &.focus { |
||
71 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); |
||
72 | } |
||
73 | |||
74 | &.disabled, |
||
75 | &:disabled { |
||
76 | color: $color; |
||
77 | background-color: transparent; |
||
78 | } |
||
79 | |||
80 | &:not(:disabled):not(.disabled):active, |
||
81 | &:not(:disabled):not(.disabled).active, |
||
82 | .show > &.dropdown-toggle { |
||
83 | color: color-yiq($active-background); |
||
84 | background-color: $active-background; |
||
85 | border-color: $active-border; |
||
86 | |||
87 | &:focus { |
||
88 | // Avoid using mixin so we can pass custom focus shadow properly |
||
89 | @if $enable-shadows and $btn-active-box-shadow != none { |
||
90 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); |
||
91 | } @else { |
||
92 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); |
||
93 | } |
||
94 | } |
||
95 | } |
||
96 | } |
||
97 | |||
98 | // Button sizes |
||
99 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { |
||
100 | padding: $padding-y $padding-x; |
||
101 | font-size: $font-size; |
||
102 | line-height: $line-height; |
||
103 | // Manually declare to provide an override to the browser default |
||
104 | @if $enable-rounded { |
||
105 | border-radius: $border-radius; |
||
106 | } @else { |
||
107 | border-radius: 0; |
||
108 | } |
||
109 | } |