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 2.15 KiB
1 
// Button variants
2 
//
3 
// Easily pump out default styles, as well as :hover, :focus, :active,
4 
// and disabled options for all buttons
5
6 
@mixin button-variant($color, $background, $border) {
7 
  $active-background: darken($background, 10%);
8 
  $active-border: darken($border, 12%);
9
10 
  color: $color;
11 
  background-color: $background;
12 
  border-color: $border;
13 
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
14
15 
  @include hover {
16 
    color: $color;
17 
    background-color: $active-background;
18 
        border-color: $active-border;
19 
  }
20
21 
  &:focus,
22 
  &.focus {
23 
    color: $color;
24 
    background-color: $active-background;
25 
        border-color: $active-border;
26 
  }
27
28 
  &:active,
29 
  &.active,
30 
  .open > &.dropdown-toggle {
31 
    color: $color;
32 
    background-color: $active-background;
33 
        border-color: $active-border;
34 
    // Remove the gradient for the pressed/active state
35 
    background-image: none;
36 
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
37
38 
    &:hover,
39 
    &:focus,
40 
    &.focus {
41 
      color: $color;
42 
      background-color: darken($background, 17%);
43 
          border-color: darken($border, 25%);
44 
    }
45 
  }
46
47 
  &.disabled,
48 
  &:disabled {
49 
    &:focus,
50 
    &.focus {
51 
      background-color: $background;
52 
          border-color: $border;
53 
    }
54 
    @include hover {
55 
      background-color: $background;
56 
          border-color: $border;
57 
    }
58 
  }
59 
}
60
61 
@mixin button-outline-variant($color) {
62 
  color: $color;
63 
  background-image: none;
64 
  background-color: transparent;
65 
  border-color: $color;
66
67 
  &:focus,
68 
  &.focus,
69 
  &:active,
70 
  &.active,
7172737475767778798081828384858687888990919293949596979899100101
.open > &.dropdown-toggle { color: #fff; background-color: $color; border-color: $color; } @include hover { color: #fff; background-color: $color; border-color: $color; } &.disabled, &:disabled { &:focus, &.focus { border-color: lighten($color, 20%); } @include hover { border-color: lighten($color, 20%); } } } // Button sizes @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; @include border-radius($border-radius); }