Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Gleb Mazovetskiy's avatar
    Remove all uses of `selector &` · f7b27a02
    Gleb Mazovetskiy authored 
    If we want to support namespaced import:

```scss
.twbs {
  @import 'bootstrap';
}
```

We cannot use `selector &`, see sass/sass#1817.

`fieldset[disabled] &` is not needed as we no longer support IE8.
    f7b27a02
_buttons.scss 3.40 KiB
1 
//
2 
// Base styles
3 
//
4
5 
.btn {
6 
  display: inline-block;
7 
  font-weight: $btn-font-weight;
8 
  text-align: center;
9 
  white-space: nowrap;
10 
  vertical-align: middle;
11 
  touch-action: manipulation;
12 
  cursor: pointer;
13 
  user-select: none;
14 
  border: $border-width solid transparent;
15 
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
16 
  @include transition(all .2s ease-in-out);
17
18 
  &,
19 
  &:active,
20 
  &.active {
21 
    &:focus,
22 
    &.focus {
23 
      @include tab-focus();
24 
    }
25 
  }
26
27 
  @include hover-focus {
28 
    text-decoration: none;
29 
  }
30 
  &.focus {
31 
    text-decoration: none;
32 
  }
33
34 
  &:active,
35 
  &.active {
36 
    background-image: none;
37 
    outline: 0;
38 
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
39 
  }
40
41 
  &.disabled,
42 
  &:disabled {
43 
    cursor: $cursor-disabled;
44 
    opacity: .65;
45 
    @include box-shadow(none);
46 
  }
47 
}
48
49 
// Future-proof disabling of clicks on `<a>` elements
50 
a.btn.disabled,
51 
fieldset[disabled] a.btn {
52 
  pointer-events: none;
53 
}
54
55
56 
//
57 
// Alternate buttons
58 
//
59
60 
.btn-primary {
61 
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
62 
}
63 
.btn-secondary {
64 
  @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
65 
}
66 
.btn-info {
67 
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
68 
}
69 
.btn-success {
70 
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
} .btn-warning { @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); } .btn-danger { @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); } // Remove all backgrounds .btn-primary-outline { @include button-outline-variant($btn-primary-bg); } .btn-secondary-outline { @include button-outline-variant($btn-secondary-border); } .btn-info-outline { @include button-outline-variant($btn-info-bg); } .btn-success-outline { @include button-outline-variant($btn-success-bg); } .btn-warning-outline { @include button-outline-variant($btn-warning-bg); } .btn-danger-outline { @include button-outline-variant($btn-danger-bg); } // // Link buttons // // Make a button look and behave like a link .btn-link { 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 { @include hover-focus { color: $btn-link-disabled-color; text-decoration: none; } } } // // Button Sizes
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
// .btn-lg { // line-height: ensure even-numbered height of button next to large input @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-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, $line-height-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: 5px; } // Specificity overrides input[type="submit"], input[type="reset"], input[type="button"] { &.btn-block { width: 100%; } }