scratch – Blame information for rev 63
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
58 | office | 1 | // |
2 | // Buttons |
||
3 | // -------------------------------------------------- |
||
4 | |||
5 | |||
6 | // Base styles |
||
7 | // -------------------------------------------------- |
||
8 | |||
9 | .btn { |
||
10 | display: inline-block; |
||
11 | margin-bottom: 0; // For input.btn |
||
12 | font-weight: @btn-font-weight; |
||
13 | text-align: center; |
||
14 | vertical-align: middle; |
||
15 | touch-action: manipulation; |
||
16 | cursor: pointer; |
||
17 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 |
||
18 | border: 1px solid transparent; |
||
19 | white-space: nowrap; |
||
20 | .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base); |
||
21 | .user-select(none); |
||
22 | |||
23 | &, |
||
24 | &:active, |
||
25 | &.active { |
||
26 | &:focus, |
||
27 | &.focus { |
||
28 | .tab-focus(); |
||
29 | } |
||
30 | } |
||
31 | |||
32 | &:hover, |
||
33 | &:focus, |
||
34 | &.focus { |
||
35 | color: @btn-default-color; |
||
36 | text-decoration: none; |
||
37 | } |
||
38 | |||
39 | &:active, |
||
40 | &.active { |
||
41 | outline: 0; |
||
42 | background-image: none; |
||
43 | .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); |
||
44 | } |
||
45 | |||
46 | &.disabled, |
||
47 | &[disabled], |
||
48 | fieldset[disabled] & { |
||
49 | cursor: @cursor-disabled; |
||
50 | .opacity(.65); |
||
51 | .box-shadow(none); |
||
52 | } |
||
53 | |||
54 | a& { |
||
55 | &.disabled, |
||
56 | fieldset[disabled] & { |
||
57 | pointer-events: none; // Future-proof disabling of clicks on `<a>` elements |
||
58 | } |
||
59 | } |
||
60 | } |
||
61 | |||
62 | |||
63 | // Alternate buttons |
||
64 | // -------------------------------------------------- |
||
65 | |||
66 | .btn-default { |
||
67 | .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); |
||
68 | } |
||
69 | .btn-primary { |
||
70 | .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); |
||
71 | } |
||
72 | // Success appears as green |
||
73 | .btn-success { |
||
74 | .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); |
||
75 | } |
||
76 | // Info appears as blue-green |
||
77 | .btn-info { |
||
78 | .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); |
||
79 | } |
||
80 | // Warning appears as orange |
||
81 | .btn-warning { |
||
82 | .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); |
||
83 | } |
||
84 | // Danger and error appear as red |
||
85 | .btn-danger { |
||
86 | .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); |
||
87 | } |
||
88 | |||
89 | |||
90 | // Link buttons |
||
91 | // ------------------------- |
||
92 | |||
93 | // Make a button look and behave like a link |
||
94 | .btn-link { |
||
95 | color: @link-color; |
||
96 | font-weight: normal; |
||
97 | border-radius: 0; |
||
98 | |||
99 | &, |
||
100 | &:active, |
||
101 | &.active, |
||
102 | &[disabled], |
||
103 | fieldset[disabled] & { |
||
104 | background-color: transparent; |
||
105 | .box-shadow(none); |
||
106 | } |
||
107 | &, |
||
108 | &:hover, |
||
109 | &:focus, |
||
110 | &:active { |
||
111 | border-color: transparent; |
||
112 | } |
||
113 | &:hover, |
||
114 | &:focus { |
||
115 | color: @link-hover-color; |
||
116 | text-decoration: @link-hover-decoration; |
||
117 | background-color: transparent; |
||
118 | } |
||
119 | &[disabled], |
||
120 | fieldset[disabled] & { |
||
121 | &:hover, |
||
122 | &:focus { |
||
123 | color: @btn-link-disabled-color; |
||
124 | text-decoration: none; |
||
125 | } |
||
126 | } |
||
127 | } |
||
128 | |||
129 | |||
130 | // Button Sizes |
||
131 | // -------------------------------------------------- |
||
132 | |||
133 | .btn-lg { |
||
134 | // line-height: ensure even-numbered height of button next to large input |
||
135 | .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large); |
||
136 | } |
||
137 | .btn-sm { |
||
138 | // line-height: ensure proper height of button next to small input |
||
139 | .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); |
||
140 | } |
||
141 | .btn-xs { |
||
142 | .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); |
||
143 | } |
||
144 | |||
145 | |||
146 | // Block button |
||
147 | // -------------------------------------------------- |
||
148 | |||
149 | .btn-block { |
||
150 | display: block; |
||
151 | width: 100%; |
||
152 | } |
||
153 | |||
154 | // Vertically space out multiple block buttons |
||
155 | .btn-block + .btn-block { |
||
156 | margin-top: 5px; |
||
157 | } |
||
158 | |||
159 | // Specificity overrides |
||
160 | input[type="submit"], |
||
161 | input[type="reset"], |
||
162 | input[type="button"] { |
||
163 | &.btn-block { |
||
164 | width: 100%; |
||
165 | } |
||
166 | } |