Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Mark Otto's avatar
    Merge branch 'master' into 3.0.0-wip · bc0b94a3
    Mark Otto authored 
    Conflicts:
	docs/assets/css/bootstrap.css
	docs/assets/js/bootstrap.js
	docs/css.html
	docs/templates/pages/base-css.mustache
	docs/templates/pages/components.mustache
	docs/templates/pages/javascript.mustache
	less/breadcrumbs.less
	less/tables.less
	less/tests/css-tests.html
    bc0b94a3
buttons.less 4.16 KiB
1 
//
2 
// Buttons
3 
// --------------------------------------------------
4
5
6 
// Base styles
7 
// --------------------------------------------------
8
9 
// Core
10 
.btn {
11 
  display: inline-block;
12 
  padding: 6px 12px;
13 
  margin-bottom: 0; // For input.btn
14 
  font-size: @font-size-base;
15 
  line-height: @line-height-base;
16 
  text-align: center;
17 
  vertical-align: middle;
18 
  cursor: pointer;
19 
  .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
20 
  border: 1px solid @btn-border;
21 
  border-bottom-color: darken(@btn-border, 10%);
22 
  border-radius: @border-radius-base;
23 
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
24
25 
  // Hover state
26 
  &:hover {
27 
    color: @grayDark;
28 
    text-decoration: none;
29 
    background-position: 0 -15px;
30
31 
    // transition is only when going to hover, otherwise the background
32 
    // behind the gradient (there for IE<=9 fallback) gets mismatched
33 
    .transition(background-position .1s linear);
34 
  }
35
36 
  // Focus state for keyboard and accessibility
37 
  &:focus {
38 
    .tab-focus();
39 
  }
40
41 
  // Active state
42 
  &.active,
43 
  &:active {
44 
    background-image: none;
45 
    outline: 0;
46 
    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
47 
  }
48
49 
  // Disabled state
50 
  &.disabled,
51 
  &[disabled] {
52 
    cursor: default;
53 
    background-image: none;
54 
    .opacity(65);
55 
    .box-shadow(none);
56 
  }
57
58 
}
59
60
61 
// Button Sizes
62 
// -------------------------
63
64 
// Large
65 
.btn-large {
66 
  padding: @padding-large;
67 
  font-size: @font-size-large;
68 
  border-radius: @border-radius-large;
69 
}
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// Small .btn-small { padding: @padding-small; font-size: @font-size-small; border-radius: @border-radius-small; } .btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] { margin-top: -1px; } // Mini .btn-mini { padding: @padding-mini; font-size: @font-size-mini; border-radius: @border-radius-small; } // Icons in buttons // ------------------------- .btn [class^="glyphicon-"]::before { vertical-align: -2px; } .btn-small [class^="glyphicon-"]::before, .btn-mini [class^="glyphicon-"]::before { vertical-align: -1px; } // Block button // ------------------------- .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; .box-sizing(border-box); } // Vertically space out multiple block buttons .btn-block + .btn-block { margin-top: 5px; } // Specificity overrides input[type="submit"], input[type="reset"], input[type="button"] { &.btn-block { width: 100%; } } // 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 {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
// 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(@btn-backround-primary, @btn-backround-primary-highlight); } // Warning appears are orange .btn-warning { .buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight); } // Danger and error appear as red .btn-danger { .buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight); } // Success appears as green .btn-success { .buttonBackground(@btn-backround-success, @btn-backround-success-highlight); } // Info appears as a neutral blue .btn-info { .buttonBackground(@btn-backround-info, @btn-backround-info-highlight); } // Inverse appears as dark gray .btn-inverse { .buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight); } // Link buttons // -------------------------------------------------- // Make a button look and behave like a link .btn-link, .btn-link:active, .btn-link[disabled] { background-color: transparent; background-image: none; .box-shadow(none); } .btn-link { border-color: transparent; cursor: pointer; color: @link-color; border-radius: 0; } .btn-link:hover { color: @link-color-hover; text-decoration: underline; background-color: transparent; } .btn-link[disabled]:hover { color: @grayDark; text-decoration: none; }