flipper-ui 0.17.2 → 0.18.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (147) hide show
  1. checksums.yaml +4 -4
  2. data/docs/ui/README.md +15 -5
  3. data/examples/ui/basic.ru +19 -0
  4. data/flipper-ui.gemspec +1 -2
  5. data/lib/flipper/ui.rb +0 -3
  6. data/lib/flipper/ui/action.rb +2 -1
  7. data/lib/flipper/ui/actions/feature.rb +5 -2
  8. data/lib/flipper/ui/actions/features.rb +1 -0
  9. data/lib/flipper/ui/actions/file.rb +1 -1
  10. data/lib/flipper/ui/assets/javascripts/application.coffee +5 -3
  11. data/lib/flipper/ui/configuration.rb +14 -10
  12. data/lib/flipper/ui/decorators/feature.rb +39 -13
  13. data/lib/flipper/ui/public/css/application.css +20 -6493
  14. data/lib/flipper/ui/public/js/application.js +5 -5
  15. data/lib/flipper/ui/util.rb +40 -0
  16. data/lib/flipper/ui/views/add_actor.erb +1 -1
  17. data/lib/flipper/ui/views/add_feature.erb +1 -1
  18. data/lib/flipper/ui/views/add_group.erb +1 -1
  19. data/lib/flipper/ui/views/feature.erb +198 -179
  20. data/lib/flipper/ui/views/features.erb +42 -36
  21. data/lib/flipper/ui/views/layout.erb +4 -14
  22. data/lib/flipper/version.rb +1 -1
  23. data/spec/flipper/ui/actions/actors_gate_spec.rb +0 -4
  24. data/spec/flipper/ui/actions/feature_spec.rb +14 -16
  25. data/spec/flipper/ui/actions/features_spec.rb +1 -5
  26. data/spec/flipper/ui/actions/file_spec.rb +0 -10
  27. data/spec/flipper/ui/actions/groups_gate_spec.rb +0 -6
  28. data/spec/flipper/ui/actions/percentage_of_actors_gate_spec.rb +0 -2
  29. data/spec/flipper/ui/actions/percentage_of_time_gate_spec.rb +0 -2
  30. data/spec/flipper/ui/configuration_spec.rb +21 -34
  31. data/spec/flipper/ui/decorators/feature_spec.rb +0 -30
  32. metadata +5 -121
  33. data/lib/flipper/ui/assets/stylesheets/.DS_Store +0 -0
  34. data/lib/flipper/ui/assets/stylesheets/application.scss +0 -19
  35. data/lib/flipper/ui/assets/stylesheets/bootstrap/_alert.scss +0 -51
  36. data/lib/flipper/ui/assets/stylesheets/bootstrap/_badge.scss +0 -47
  37. data/lib/flipper/ui/assets/stylesheets/bootstrap/_breadcrumb.scss +0 -38
  38. data/lib/flipper/ui/assets/stylesheets/bootstrap/_button-group.scss +0 -166
  39. data/lib/flipper/ui/assets/stylesheets/bootstrap/_buttons.scss +0 -143
  40. data/lib/flipper/ui/assets/stylesheets/bootstrap/_card.scss +0 -270
  41. data/lib/flipper/ui/assets/stylesheets/bootstrap/_carousel.scss +0 -191
  42. data/lib/flipper/ui/assets/stylesheets/bootstrap/_close.scss +0 -34
  43. data/lib/flipper/ui/assets/stylesheets/bootstrap/_code.scss +0 -56
  44. data/lib/flipper/ui/assets/stylesheets/bootstrap/_custom-forms.scss +0 -297
  45. data/lib/flipper/ui/assets/stylesheets/bootstrap/_dropdown.scss +0 -131
  46. data/lib/flipper/ui/assets/stylesheets/bootstrap/_forms.scss +0 -333
  47. data/lib/flipper/ui/assets/stylesheets/bootstrap/_functions.scss +0 -86
  48. data/lib/flipper/ui/assets/stylesheets/bootstrap/_grid.scss +0 -52
  49. data/lib/flipper/ui/assets/stylesheets/bootstrap/_images.scss +0 -42
  50. data/lib/flipper/ui/assets/stylesheets/bootstrap/_input-group.scss +0 -159
  51. data/lib/flipper/ui/assets/stylesheets/bootstrap/_jumbotron.scss +0 -16
  52. data/lib/flipper/ui/assets/stylesheets/bootstrap/_list-group.scss +0 -115
  53. data/lib/flipper/ui/assets/stylesheets/bootstrap/_media.scss +0 -8
  54. data/lib/flipper/ui/assets/stylesheets/bootstrap/_mixins.scss +0 -42
  55. data/lib/flipper/ui/assets/stylesheets/bootstrap/_modal.scss +0 -168
  56. data/lib/flipper/ui/assets/stylesheets/bootstrap/_nav.scss +0 -118
  57. data/lib/flipper/ui/assets/stylesheets/bootstrap/_navbar.scss +0 -311
  58. data/lib/flipper/ui/assets/stylesheets/bootstrap/_pagination.scss +0 -77
  59. data/lib/flipper/ui/assets/stylesheets/bootstrap/_popover.scss +0 -183
  60. data/lib/flipper/ui/assets/stylesheets/bootstrap/_print.scss +0 -124
  61. data/lib/flipper/ui/assets/stylesheets/bootstrap/_progress.scss +0 -33
  62. data/lib/flipper/ui/assets/stylesheets/bootstrap/_reboot.scss +0 -482
  63. data/lib/flipper/ui/assets/stylesheets/bootstrap/_root.scss +0 -19
  64. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tables.scss +0 -180
  65. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tooltip.scss +0 -115
  66. data/lib/flipper/ui/assets/stylesheets/bootstrap/_transitions.scss +0 -36
  67. data/lib/flipper/ui/assets/stylesheets/bootstrap/_type.scss +0 -125
  68. data/lib/flipper/ui/assets/stylesheets/bootstrap/_utilities.scss +0 -14
  69. data/lib/flipper/ui/assets/stylesheets/bootstrap/_variables.scss +0 -894
  70. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-grid.scss +0 -32
  71. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-reboot.scss +0 -12
  72. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap.scss +0 -42
  73. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -13
  74. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  75. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -12
  76. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -35
  77. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +0 -5
  78. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +0 -123
  79. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -109
  80. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_caret.scss +0 -65
  81. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -7
  82. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_float.scss +0 -11
  83. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -137
  84. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -45
  85. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -67
  86. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -52
  87. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -39
  88. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_image.scss +0 -36
  89. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -21
  90. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_lists.scss +0 -7
  91. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  92. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +0 -10
  93. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -22
  94. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_reset-text.scss +0 -17
  95. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
  96. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -35
  97. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_size.scss +0 -6
  98. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -30
  99. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -14
  100. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -9
  101. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-truncate.scss +0 -8
  102. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_transition.scss +0 -9
  103. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -7
  104. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  105. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  106. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -59
  107. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_clearfix.scss +0 -3
  108. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_display.scss +0 -38
  109. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -52
  110. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -46
  111. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_float.scss +0 -9
  112. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_position.scss +0 -36
  113. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  114. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -12
  115. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -51
  116. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_text.scss +0 -52
  117. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -11
  118. data/lib/flipper/ui/assets/stylesheets/primer/.scss-lint.yml +0 -446
  119. data/lib/flipper/ui/assets/stylesheets/primer/_alerts.scss +0 -106
  120. data/lib/flipper/ui/assets/stylesheets/primer/_avatars.scss +0 -36
  121. data/lib/flipper/ui/assets/stylesheets/primer/_base.scss +0 -40
  122. data/lib/flipper/ui/assets/stylesheets/primer/_blankslate.scss +0 -96
  123. data/lib/flipper/ui/assets/stylesheets/primer/_buttons.scss +0 -404
  124. data/lib/flipper/ui/assets/stylesheets/primer/_counter.scss +0 -10
  125. data/lib/flipper/ui/assets/stylesheets/primer/_filter-list.scss +0 -68
  126. data/lib/flipper/ui/assets/stylesheets/primer/_flex-table.scss +0 -20
  127. data/lib/flipper/ui/assets/stylesheets/primer/_forms.scss +0 -756
  128. data/lib/flipper/ui/assets/stylesheets/primer/_layout.scss +0 -69
  129. data/lib/flipper/ui/assets/stylesheets/primer/_menu.scss +0 -113
  130. data/lib/flipper/ui/assets/stylesheets/primer/_mixins.scss +0 -53
  131. data/lib/flipper/ui/assets/stylesheets/primer/_normalize.scss +0 -425
  132. data/lib/flipper/ui/assets/stylesheets/primer/_states.scss +0 -32
  133. data/lib/flipper/ui/assets/stylesheets/primer/_tabnav.scss +0 -65
  134. data/lib/flipper/ui/assets/stylesheets/primer/_tooltips.scss +0 -255
  135. data/lib/flipper/ui/assets/stylesheets/primer/_truncate.scss +0 -27
  136. data/lib/flipper/ui/assets/stylesheets/primer/_type.scss +0 -92
  137. data/lib/flipper/ui/assets/stylesheets/primer/_utility.scss +0 -73
  138. data/lib/flipper/ui/assets/stylesheets/primer/_variables.scss +0 -34
  139. data/lib/flipper/ui/assets/stylesheets/primer/primer.scss +0 -39
  140. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.eot +0 -0
  141. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.svg +0 -288
  142. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  143. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff +0 -0
  144. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff2 +0 -0
  145. data/lib/flipper/ui/public/images/remove.png +0 -0
  146. data/lib/flipper/ui/public/octicons/octicons.less +0 -235
  147. data/lib/flipper/ui/public/octicons/sprockets-octicons.scss +0 -232
@@ -1,19 +0,0 @@
1
- html {
2
- font-size: 0.8rem;
3
- }
4
- body {
5
- padding-top: 1.5em;
6
- padding-bottom: 1.5em;
7
- }
8
-
9
- $light: #ddd;
10
- @import "bootstrap/bootstrap";
11
-
12
- .flash {
13
- margin-bottom:15px;
14
- }
15
-
16
- .row + .row {
17
- margin-top: 1.5em;
18
- }
19
-
@@ -1,51 +0,0 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .alert {
6
- position: relative;
7
- padding: $alert-padding-y $alert-padding-x;
8
- margin-bottom: $alert-margin-bottom;
9
- border: $alert-border-width solid transparent;
10
- @include border-radius($alert-border-radius);
11
- }
12
-
13
- // Headings for larger alerts
14
- .alert-heading {
15
- // Specified to prevent conflicts of changing $headings-color
16
- color: inherit;
17
- }
18
-
19
- // Provide class for links that match alerts
20
- .alert-link {
21
- font-weight: $alert-link-font-weight;
22
- }
23
-
24
-
25
- // Dismissible alerts
26
- //
27
- // Expand the right padding and account for the close button's positioning.
28
-
29
- .alert-dismissible {
30
- padding-right: ($close-font-size + $alert-padding-x * 2);
31
-
32
- // Adjust close link position
33
- .close {
34
- position: absolute;
35
- top: 0;
36
- right: 0;
37
- padding: $alert-padding-y $alert-padding-x;
38
- color: inherit;
39
- }
40
- }
41
-
42
-
43
- // Alternate styles
44
- //
45
- // Generate contextual modifier classes for colorizing the alert.
46
-
47
- @each $color, $value in $theme-colors {
48
- .alert-#{$color} {
49
- @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
50
- }
51
- }
@@ -1,47 +0,0 @@
1
- // Base class
2
- //
3
- // Requires one of the contextual, color modifier classes for `color` and
4
- // `background-color`.
5
-
6
- .badge {
7
- display: inline-block;
8
- padding: $badge-padding-y $badge-padding-x;
9
- font-size: $badge-font-size;
10
- font-weight: $badge-font-weight;
11
- line-height: 1;
12
- text-align: center;
13
- white-space: nowrap;
14
- vertical-align: baseline;
15
- @include border-radius($badge-border-radius);
16
-
17
- // Empty badges collapse automatically
18
- &:empty {
19
- display: none;
20
- }
21
- }
22
-
23
- // Quick fix for badges in buttons
24
- .btn .badge {
25
- position: relative;
26
- top: -1px;
27
- }
28
-
29
- // Pill badges
30
- //
31
- // Make them extra rounded with a modifier to replace v3's badges.
32
-
33
- .badge-pill {
34
- padding-right: $badge-pill-padding-x;
35
- padding-left: $badge-pill-padding-x;
36
- @include border-radius($badge-pill-border-radius);
37
- }
38
-
39
- // Colors
40
- //
41
- // Contextual variations (linked badges get darker on :hover).
42
-
43
- @each $color, $value in $theme-colors {
44
- .badge-#{$color} {
45
- @include badge-variant($value);
46
- }
47
- }
@@ -1,38 +0,0 @@
1
- .breadcrumb {
2
- display: flex;
3
- flex-wrap: wrap;
4
- padding: $breadcrumb-padding-y $breadcrumb-padding-x;
5
- margin-bottom: $breadcrumb-margin-bottom;
6
- list-style: none;
7
- background-color: $breadcrumb-bg;
8
- @include border-radius($border-radius);
9
- }
10
-
11
- .breadcrumb-item {
12
- // The separator between breadcrumbs (by default, a forward-slash: "/")
13
- + .breadcrumb-item::before {
14
- display: inline-block; // Suppress underlining of the separator in modern browsers
15
- padding-right: $breadcrumb-item-padding;
16
- padding-left: $breadcrumb-item-padding;
17
- color: $breadcrumb-divider-color;
18
- content: "#{$breadcrumb-divider}";
19
- }
20
-
21
- // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
22
- // without `<ul>`s. The `::before` pseudo-element generates an element
23
- // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
24
- //
25
- // To trick IE into suppressing the underline, we give the pseudo-element an
26
- // underline and then immediately remove it.
27
- + .breadcrumb-item:hover::before {
28
- text-decoration: underline;
29
- }
30
- // stylelint-disable-next-line no-duplicate-selectors
31
- + .breadcrumb-item:hover::before {
32
- text-decoration: none;
33
- }
34
-
35
- &.active {
36
- color: $breadcrumb-active-color;
37
- }
38
- }
@@ -1,166 +0,0 @@
1
- // stylelint-disable selector-no-qualifying-type
2
-
3
- // Make the div behave like a button
4
- .btn-group,
5
- .btn-group-vertical {
6
- position: relative;
7
- display: inline-flex;
8
- vertical-align: middle; // match .btn alignment given font-size hack above
9
-
10
- > .btn {
11
- position: relative;
12
- flex: 0 1 auto;
13
-
14
- // Bring the hover, focused, and "active" buttons to the front to overlay
15
- // the borders properly
16
- @include hover {
17
- z-index: 1;
18
- }
19
- &:focus,
20
- &:active,
21
- &.active {
22
- z-index: 1;
23
- }
24
- }
25
-
26
- // Prevent double borders when buttons are next to each other
27
- .btn + .btn,
28
- .btn + .btn-group,
29
- .btn-group + .btn,
30
- .btn-group + .btn-group {
31
- margin-left: -$btn-border-width;
32
- }
33
- }
34
-
35
- // Optional: Group multiple button groups together for a toolbar
36
- .btn-toolbar {
37
- display: flex;
38
- flex-wrap: wrap;
39
- justify-content: flex-start;
40
-
41
- .input-group {
42
- width: auto;
43
- }
44
- }
45
-
46
- .btn-group {
47
- > .btn:first-child {
48
- margin-left: 0;
49
- }
50
-
51
- // Reset rounded corners
52
- > .btn:not(:last-child):not(.dropdown-toggle),
53
- > .btn-group:not(:last-child) > .btn {
54
- @include border-right-radius(0);
55
- }
56
-
57
- > .btn:not(:first-child),
58
- > .btn-group:not(:first-child) > .btn {
59
- @include border-left-radius(0);
60
- }
61
- }
62
-
63
- // Sizing
64
- //
65
- // Remix the default button sizing classes into new ones for easier manipulation.
66
-
67
- .btn-group-sm > .btn { @extend .btn-sm; }
68
- .btn-group-lg > .btn { @extend .btn-lg; }
69
-
70
-
71
- //
72
- // Split button dropdowns
73
- //
74
-
75
- .dropdown-toggle-split {
76
- padding-right: $btn-padding-x * .75;
77
- padding-left: $btn-padding-x * .75;
78
-
79
- &::after {
80
- margin-left: 0;
81
- }
82
- }
83
-
84
- .btn-sm + .dropdown-toggle-split {
85
- padding-right: $btn-padding-x-sm * .75;
86
- padding-left: $btn-padding-x-sm * .75;
87
- }
88
-
89
- .btn-lg + .dropdown-toggle-split {
90
- padding-right: $btn-padding-x-lg * .75;
91
- padding-left: $btn-padding-x-lg * .75;
92
- }
93
-
94
-
95
- // The clickable button for toggling the menu
96
- // Set the same inset shadow as the :active state
97
- .btn-group.show .dropdown-toggle {
98
- @include box-shadow($btn-active-box-shadow);
99
-
100
- // Show no shadow for `.btn-link` since it has no other button styles.
101
- &.btn-link {
102
- @include box-shadow(none);
103
- }
104
- }
105
-
106
-
107
- //
108
- // Vertical button groups
109
- //
110
-
111
- .btn-group-vertical {
112
- flex-direction: column;
113
- align-items: flex-start;
114
- justify-content: center;
115
-
116
- .btn,
117
- .btn-group {
118
- width: 100%;
119
- }
120
-
121
- > .btn + .btn,
122
- > .btn + .btn-group,
123
- > .btn-group + .btn,
124
- > .btn-group + .btn-group {
125
- margin-top: -$btn-border-width;
126
- margin-left: 0;
127
- }
128
-
129
- // Reset rounded corners
130
- > .btn:not(:last-child):not(.dropdown-toggle),
131
- > .btn-group:not(:last-child) > .btn {
132
- @include border-bottom-radius(0);
133
- }
134
-
135
- > .btn:not(:first-child),
136
- > .btn-group:not(:first-child) > .btn {
137
- @include border-top-radius(0);
138
- }
139
- }
140
-
141
-
142
- // Checkbox and radio options
143
- //
144
- // In order to support the browser's form validation feedback, powered by the
145
- // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
146
- // `display: none;` or `visibility: hidden;` as that also hides the popover.
147
- // Simply visually hiding the inputs via `opacity` would leave them clickable in
148
- // certain cases which is prevented by using `clip` and `pointer-events`.
149
- // This way, we ensure a DOM element is visible to position the popover from.
150
- //
151
- // See https://github.com/twbs/bootstrap/pull/12794 and
152
- // https://github.com/twbs/bootstrap/pull/14559 for more information.
153
-
154
- .btn-group-toggle {
155
- > .btn,
156
- > .btn-group > .btn {
157
- margin-bottom: 0; // Override default `<label>` value
158
-
159
- input[type="radio"],
160
- input[type="checkbox"] {
161
- position: absolute;
162
- clip: rect(0, 0, 0, 0);
163
- pointer-events: none;
164
- }
165
- }
166
- }
@@ -1,143 +0,0 @@
1
- // stylelint-disable selector-no-qualifying-type
2
-
3
- //
4
- // Base styles
5
- //
6
-
7
- .btn {
8
- display: inline-block;
9
- font-weight: $btn-font-weight;
10
- text-align: center;
11
- white-space: nowrap;
12
- vertical-align: middle;
13
- user-select: none;
14
- border: $btn-border-width solid transparent;
15
- @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
16
- @include transition($btn-transition);
17
-
18
- // Share hover and focus styles
19
- @include hover-focus {
20
- text-decoration: none;
21
- }
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
- opacity: $btn-disabled-opacity;
33
- @include box-shadow(none);
34
- }
35
-
36
- // Opinionated: add "hand" cursor to non-disabled .btn elements
37
- &:not(:disabled):not(.disabled) {
38
- cursor: pointer;
39
- }
40
-
41
- &:not(:disabled):not(.disabled):active,
42
- &:not(:disabled):not(.disabled).active {
43
- background-image: none;
44
- @include box-shadow($btn-active-box-shadow);
45
-
46
- &:focus {
47
- @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
48
- }
49
- }
50
- }
51
-
52
- // Future-proof disabling of clicks on `<a>` elements
53
- a.btn.disabled,
54
- fieldset:disabled a.btn {
55
- pointer-events: none;
56
- }
57
-
58
-
59
- //
60
- // Alternate buttons
61
- //
62
-
63
- @each $color, $value in $theme-colors {
64
- .btn-#{$color} {
65
- @include button-variant($value, $value);
66
- }
67
- }
68
-
69
- @each $color, $value in $theme-colors {
70
- .btn-outline-#{$color} {
71
- @include button-outline-variant($value);
72
- }
73
- }
74
-
75
-
76
- //
77
- // Link buttons
78
- //
79
-
80
- // Make a button look and behave like a link
81
- .btn-link {
82
- font-weight: $font-weight-normal;
83
- color: $link-color;
84
- background-color: transparent;
85
-
86
- @include hover {
87
- color: $link-hover-color;
88
- text-decoration: $link-hover-decoration;
89
- background-color: transparent;
90
- border-color: transparent;
91
- }
92
-
93
- &:focus,
94
- &.focus {
95
- text-decoration: $link-hover-decoration;
96
- border-color: transparent;
97
- box-shadow: none;
98
- }
99
-
100
- &:disabled,
101
- &.disabled {
102
- color: $btn-link-disabled-color;
103
- }
104
-
105
- // No need for an active state here
106
- }
107
-
108
-
109
- //
110
- // Button Sizes
111
- //
112
-
113
- .btn-lg {
114
- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
115
- }
116
-
117
- .btn-sm {
118
- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
119
- }
120
-
121
-
122
- //
123
- // Block button
124
- //
125
-
126
- .btn-block {
127
- display: block;
128
- width: 100%;
129
-
130
- // Vertically space out multiple block buttons
131
- + .btn-block {
132
- margin-top: $btn-block-spacing-y;
133
- }
134
- }
135
-
136
- // Specificity overrides
137
- input[type="submit"],
138
- input[type="reset"],
139
- input[type="button"] {
140
- &.btn-block {
141
- width: 100%;
142
- }
143
- }