Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
buttons.less 4.73 KiB
1 
//
2 
// Buttons
3 
// --------------------------------------------------
4
5
6 
// Base styles
7 
// --------------------------------------------------
8
9 
// Core
10 
.btn {
11 
  display: inline-block;
12 
  .ie7-inline-block();
13 
  padding: 4px 14px;
14 
  margin-bottom: 0; // For input.btn
15 
  font-size: @baseFontSize;
16 
  line-height: @baseLineHeight;
17 
  *line-height: @baseLineHeight;
18 
  text-align: center;
19 
  vertical-align: middle;
20 
  cursor: pointer;
21 
  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
22 
  border: 1px solid @btnBorder;
23 
  *border: 0; // Remove the border to prevent IE7's black border on input:focus
24 
  border-bottom-color: darken(@btnBorder, 10%);
25 
  .border-radius(4px);
26 
  .ie7-restore-left-whitespace(); // Give IE7 some love
27 
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
28
29 
  // Hover state
30 
  &:hover {
31 
    color: @grayDark;
32 
    text-decoration: none;
33 
    background-color: darken(@white, 10%);
34 
    *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
35 
    background-position: 0 -15px;
36
37 
    // transition is only when going to hover, otherwise the background
38 
    // behind the gradient (there for IE<=9 fallback) gets mismatched
39 
    .transition(background-position .1s linear);
40 
  }
41
42 
  // Focus state for keyboard and accessibility
43 
  &:focus {
44 
    .tab-focus();
45 
  }
46
47 
  // Active state
48 
  &.active,
49 
  &:active {
50 
    background-color: darken(@white, 10%);
51 
    background-color: darken(@white, 15%) e("\9");
52 
    background-image: none;
53 
    outline: 0;
54 
    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
55 
  }
56
57 
  // Disabled state
58 
  &.disabled,
59 
  &[disabled] {
60 
    cursor: default;
61 
    background-color: darken(@white, 10%);
62 
    background-image: none;
63 
    .opacity(65);
64 
    .box-shadow(none);
65 
  }
66
67 
}
68
69
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// Button Sizes // -------------------------------------------------- // Large .btn-large { padding: 9px 14px; font-size: @baseFontSize + 2px; line-height: normal; .border-radius(5px); } .btn-large [class^="icon-"] { margin-top: 2px; } // Small .btn-small { padding: 3px 9px; font-size: @baseFontSize - 2px; line-height: @baseLineHeight - 2px; } .btn-small [class^="icon-"] { margin-top: 0; } // Mini .btn-mini { padding: 2px 6px; font-size: @baseFontSize - 3px; line-height: @baseLineHeight - 4px; } // Block button .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; .box-sizing(border-box); } .btn-block + .btn-block { margin-top: 5px; } // Alternate buttons // -------------------------------------------------- // Provide *some* extra contrast for those who can get it .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active { color: rgba(255,255,255,.75); } // Set the backgrounds // ------------------------- .btn { // reset here as of 2.0.3 due to Recess property order border-color: #c5c5c5; border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); } .btn-primary { .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); } // Warning appears are orange .btn-warning { .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
} // Danger and error appear as red .btn-danger { .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); } // Success appears as green .btn-success { .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); } // Info appears as a neutral blue .btn-info { .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); } // Inverse appears as dark gray .btn-inverse { .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); } // Cross-browser Jank // -------------------------------------------------- button.btn, input[type="submit"].btn { // Firefox 3.6 only I believe &::-moz-focus-inner { padding: 0; border: 0; } // IE7 has some default padding on button controls *padding-top: 3px; *padding-bottom: 3px; &.btn-large { *padding-top: 7px; *padding-bottom: 7px; } &.btn-small { *padding-top: 3px; *padding-bottom: 3px; } &.btn-mini { *padding-top: 1px; *padding-bottom: 1px; } } // Link buttons // -------------------------------------------------- // Make a button look and behave like a link .btn-link, .btn-link:active { background-color: transparent; background-image: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn-link { border-color: transparent; cursor: pointer; color: @linkColor; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
211212213214215216
.btn-link:hover { color: @linkColorHover; text-decoration: underline; background-color: transparent; }