_buttons.scss 2.04 KB
Newer Older
Mark Otto's avatar
Mark Otto committed
1
2
3
4
5
6
7
8
9
10
11
12
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;
//  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
//  .box-shadow($shadow);

13
14
15
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);

Mark Otto's avatar
Mark Otto committed
16
17
18
19
20
21
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
22
23
24
25
26
27
28
    background-color: $active-background;
        border-color: $active-border;
  }
  @include hover {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
Mark Otto's avatar
Mark Otto committed
29
30
31
32
33
34
35
36
37
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    // Remove the gradient for the pressed/active state
    background-image: none;
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  }
  &.disabled,
Chris Rebert's avatar
Chris Rebert committed
38
  &:disabled,
Mark Otto's avatar
Mark Otto committed
39
40
  fieldset[disabled] & {
    &:focus,
Mark Otto's avatar
Mark Otto committed
41
    &.focus {
Mark Otto's avatar
Mark Otto committed
42
43
44
      background-color: $background;
          border-color: $border;
    }
45
46
47
48
    @include hover {
      background-color: $background;
          border-color: $border;
    }
Mark Otto's avatar
Mark Otto committed
49
50
51
  }
}

Mark Otto's avatar
Mark Otto committed
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@mixin button-outline-variant($color) {
  color: $color;
  background-image: none;
  background-color: $body-bg;
  border-color: $color;

  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: #fff;
    background-color: $color;
        border-color: $color;
  }
  @include hover {
    color: #fff;
    background-color: $color;
        border-color: $color;
  }

  &.disabled,
  &:disabled,
  fieldset[disabled] & {
    &:focus,
    &.focus {
      border-color: lighten($color, 20%);
    }
    @include hover {
      border-color: lighten($color, 20%);
    }
  }
}

Mark Otto's avatar
Mark Otto committed
86
87
88
89
90
91
92
// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  @include border-radius($border-radius);
}