talos

1
// stylelint-disable selector-no-qualifying-type
2

3
//
4
// Base styles
5
//
6

7
.btn {
8
  display: inline-block;
9
  font-family: $btn-font-family;
10
  font-weight: $btn-font-weight;
11
  color: $body-color;
12
  text-align: center;
13
  text-decoration: if($link-decoration == none, null, none);
14
  white-space: $btn-white-space;
15
  vertical-align: middle;
16
  user-select: none;
17
  background-color: transparent;
18
  border: $btn-border-width solid transparent;
19
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
20
  @include transition($btn-transition);
21

22
  @include hover() {
23
    color: $body-color;
24
    text-decoration: none;
25
  }
26

27
  &:focus,
28
  &.focus {
29
    outline: 0;
30
    box-shadow: $btn-focus-box-shadow;
31
  }
32

33
  // Disabled comes first so active can properly restyle
34
  &.disabled,
35
  &:disabled {
36
    opacity: $btn-disabled-opacity;
37
    @include box-shadow(none);
38
  }
39

40
  &:not(:disabled):not(.disabled) {
41
    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
42

43
    &:active,
44
    &.active {
45
      @include box-shadow($btn-active-box-shadow);
46

47
      &:focus {
48
        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
49
      }
50
    }
51
  }
52
}
53

54
// Future-proof disabling of clicks on `<a>` elements
55
a.btn.disabled,
56
fieldset:disabled a.btn {
57
  pointer-events: none;
58
}
59

60

61
//
62
// Alternate buttons
63
//
64

65
@each $color, $value in $theme-colors {
66
  .btn-#{$color} {
67
    @include button-variant($value, $value);
68
  }
69
}
70

71
@each $color, $value in $theme-colors {
72
  .btn-outline-#{$color} {
73
    @include button-outline-variant($value);
74
  }
75
}
76

77

78
//
79
// Link buttons
80
//
81

82
// Make a button look and behave like a link
83
.btn-link {
84
  font-weight: $font-weight-normal;
85
  color: $link-color;
86
  text-decoration: $link-decoration;
87

88
  @include hover() {
89
    color: $link-hover-color;
90
    text-decoration: $link-hover-decoration;
91
  }
92

93
  &:focus,
94
  &.focus {
95
    text-decoration: $link-hover-decoration;
96
  }
97

98
  &:disabled,
99
  &.disabled {
100
    color: $btn-link-disabled-color;
101
    pointer-events: none;
102
  }
103

104
  // No need for an active state here
105
}
106

107

108
//
109
// Button Sizes
110
//
111

112
.btn-lg {
113
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
114
}
115

116
.btn-sm {
117
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
118
}
119

120

121
//
122
// Block button
123
//
124

125
.btn-block {
126
  display: block;
127
  width: 100%;
128

129
  // Vertically space out multiple block buttons
130
  + .btn-block {
131
    margin-top: $btn-block-spacing-y;
132
  }
133
}
134

135
// Specificity overrides
136
input[type="submit"],
137
input[type="reset"],
138
input[type="button"] {
139
  &.btn-block {
140
    width: 100%;
141
  }
142
}
143