corrade-http-templates – Blame information for rev 61

Subversion Repositories:
Rev:
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 }