Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
buttons.less 3.92 KiB
1 
//
2 
// Buttons
3 
// --------------------------------------------------
4
5
6 
// Base styles
7 
// --------------------------------------------------
8
9 
// Core styles
10 
.btn {
11 
  display: inline-block;
12 
  padding: 6px 12px;
13 
  margin-bottom: 0; // For input.btn
14 
  font-size: @font-size-base;
15 
  font-weight: bold;
16 
  line-height: @line-height-base;
17 
  text-align: center;
18 
  vertical-align: middle;
19 
  cursor: pointer;
20 
  border: 1px solid @btn-border;
21 
  border-radius: @border-radius-base;
22
23 
  &:focus {
24 
    .tab-focus();
25 
  }
26
27 
  &:hover {
28 
    color: #fff;
29 
    text-decoration: none;
30 
  }
31
32 
  &:active,
33 
  &.active {
34 
    outline: 0;
35 
    background-image: none;
36 
    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
37 
  }
38
39 
  &.disabled,
40 
  &[disabled],
41 
  fieldset[disabled] & {
42 
    cursor: default;
43 
    .opacity(65);
44 
    .box-shadow(none);
45 
  }
46
47 
}
48
49
50 
// Button Sizes
51 
// -------------------------
52
53 
// Large
54 
.btn-large {
55 
  padding: @padding-large;
56 
  font-size: @font-size-large;
57 
  border-radius: @border-radius-large;
58 
}
59
60 
// Small
61 
.btn-small {
62 
  padding: @padding-small;
63 
  font-size: @font-size-small;
64 
  border-radius: @border-radius-small;
65 
}
66 
.btn-mini [class^="icon-"],
67 
.btn-mini [class*=" icon-"] {
68 
  margin-top: -1px;
69 
}
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// 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 // -------------------------------------------------- .btn { color: #fff; background-color: @btn-background; border-color: @btn-border; &:hover, &:focus, &:active { background-color: darken(@btn-background, 5%); border-color: darken(@btn-border, 10%); } } // Primary appears as blue .btn-primary { background-color: @btn-background-primary; border-color: @btn-border-primary; &:hover, &:focus, &:active { background-color: darken(@btn-background-primary, 5%); border-color: darken(@btn-border-primary, 10%); } } // Warning appears are orange .btn-warning {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
background-color: @btn-background-warning; border-color: @btn-border-warning; &:hover, &:focus, &:active { background-color: darken(@btn-background-warning, 5%); border-color: darken(@btn-border-warning, 10%); } } // Danger and error appear as red .btn-danger { background-color: @btn-background-danger; border-color: @btn-border-danger; &:hover, &:focus, &:active { background-color: darken(@btn-background-danger, 5%); border-color: darken(@btn-border-danger, 10%); } } // Success appears as green .btn-success { background-color: @btn-background-success; border-color: @btn-border-success; &:hover, &:focus, &:active { background-color: darken(@btn-background-success, 5%); border-color: darken(@btn-border-success, 10%); } } // Link buttons // -------------------------------------------------- // Make a button look and behave like a link .btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link { background-color: transparent; background-image: none; .box-shadow(none); } .btn-link { color: @link-color; font-weight: normal; cursor: pointer; border-color: transparent; border-radius: 0; } .btn-link:hover { color: @link-color-hover; text-decoration: underline; background-color: transparent; } .btn-link { &[disabled], fieldset[disabled] & { &:hover { color: @grayDark; text-decoration: none; } } }