Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
_buttons.scss 3.56 KiB
1 
// scss-lint:disable QualifyingElement
2
3 
//
4 
// Base styles
5 
//
6
7 
.btn {
8 
  display: inline-block;
9 
  font-weight: $btn-font-weight;
10 
  line-height: $btn-line-height;
11 
  text-align: center;
12 
  white-space: nowrap;
13 
  vertical-align: middle;
14 
  user-select: none;
15 
  border: $input-btn-border-width solid transparent;
16 
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
17 
  @include transition($btn-transition);
18
19 
  // Share hover and focus styles
20 
  @include hover-focus {
21 
    text-decoration: none;
22 
  }
23 
  &:focus,
24 
  &.focus {
25 
    outline: 0;
26 
    box-shadow: $btn-focus-box-shadow;
27 
  }
28
29 
  // Disabled comes first so active can properly restyle
30 
  &.disabled,
31 
  &:disabled {
32 
    cursor: $cursor-disabled;
33 
    opacity: .65;
34 
    @include box-shadow(none);
35 
  }
36
37 
  &:active,
38 
  &.active {
39 
    background-image: none;
40 
    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
41 
  }
42 
}
43
44 
// Future-proof disabling of clicks on `<a>` elements
45 
a.btn.disabled,
46 
fieldset[disabled] a.btn {
47 
  pointer-events: none;
48 
}
49
50
51 
//
52 
// Alternate buttons
53 
//
54
55 
.btn-primary {
56 
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
57 
}
58 
.btn-secondary {
59 
  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
60 
}
61 
.btn-info {
62 
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
63 
}
64 
.btn-success {
65 
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
66 
}
67 
.btn-warning {
68 
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
69 
}
70 
.btn-danger {
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); } // Remove all backgrounds .btn-outline-primary { @include button-outline-variant($btn-primary-bg, $btn-primary-color); } .btn-outline-secondary { @include button-outline-variant($btn-secondary-border, $btn-secondary-color); } .btn-outline-info { @include button-outline-variant($btn-info-bg, $btn-info-color); } .btn-outline-success { @include button-outline-variant($btn-success-bg, $btn-success-color); } .btn-outline-warning { @include button-outline-variant($btn-warning-bg, $btn-warning-color); } .btn-outline-danger { @include button-outline-variant($btn-danger-bg, $btn-danger-color); } // // Link buttons // // Make a button look and behave like a link .btn-link { font-weight: $font-weight-normal; color: $link-color; border-radius: 0; &, &:active, &.active, &:disabled { background-color: transparent; @include box-shadow(none); } &, &:focus, &:active { border-color: transparent; } @include hover { border-color: transparent; } @include hover-focus { color: $link-hover-color; text-decoration: $link-hover-decoration; background-color: transparent; } &:disabled { color: $btn-link-disabled-color; @include hover-focus { text-decoration: none; } } } // // Button Sizes // .btn-lg { // line-height: ensure even-numbered height of button next to large input
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg); } .btn-sm { // line-height: ensure proper height of button next to small input @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); } // // Block button // .btn-block { display: block; width: 100%; } // Vertically space out multiple block buttons .btn-block + .btn-block { margin-top: $btn-block-spacing-y; } // Specificity overrides input[type="submit"], input[type="reset"], input[type="button"] { &.btn-block { width: 100%; } }