bootstrap 4.3.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (158) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +17 -2
  3. data/CHANGELOG.md +2 -14
  4. data/README.md +7 -4
  5. data/assets/javascripts/bootstrap/alert.js +173 -137
  6. data/assets/javascripts/bootstrap/base-component.js +182 -0
  7. data/assets/javascripts/bootstrap/button.js +102 -143
  8. data/assets/javascripts/bootstrap/carousel.js +481 -410
  9. data/assets/javascripts/bootstrap/collapse.js +340 -274
  10. data/assets/javascripts/bootstrap/dom/data.js +68 -0
  11. data/assets/javascripts/bootstrap/dom/event-handler.js +322 -0
  12. data/assets/javascripts/bootstrap/dom/manipulator.js +88 -0
  13. data/assets/javascripts/bootstrap/dom/selector-engine.js +127 -0
  14. data/assets/javascripts/bootstrap/dropdown.js +494 -400
  15. data/assets/javascripts/bootstrap/modal.js +834 -450
  16. data/assets/javascripts/bootstrap/offcanvas.js +866 -0
  17. data/assets/javascripts/bootstrap/popover.js +122 -199
  18. data/assets/javascripts/bootstrap/scrollspy.js +257 -241
  19. data/assets/javascripts/bootstrap/tab.js +219 -155
  20. data/assets/javascripts/bootstrap/toast.js +330 -190
  21. data/assets/javascripts/bootstrap/tooltip.js +710 -472
  22. data/assets/javascripts/bootstrap-global-this-define.js +6 -0
  23. data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
  24. data/assets/javascripts/bootstrap-sprockets.js +8 -1
  25. data/assets/javascripts/bootstrap.js +3547 -2809
  26. data/assets/javascripts/bootstrap.min.js +4 -4
  27. data/assets/stylesheets/_bootstrap-grid.scss +54 -18
  28. data/assets/stylesheets/_bootstrap-reboot.scss +7 -4
  29. data/assets/stylesheets/_bootstrap.scss +20 -11
  30. data/assets/stylesheets/bootstrap/_accordion.scss +118 -0
  31. data/assets/stylesheets/bootstrap/_alert.scss +15 -9
  32. data/assets/stylesheets/bootstrap/_badge.scss +2 -27
  33. data/assets/stylesheets/bootstrap/_breadcrumb.scss +5 -18
  34. data/assets/stylesheets/bootstrap/_button-group.scss +21 -45
  35. data/assets/stylesheets/bootstrap/_buttons.scss +28 -54
  36. data/assets/stylesheets/bootstrap/_card.scss +52 -125
  37. data/assets/stylesheets/bootstrap/_carousel.scss +70 -38
  38. data/assets/stylesheets/bootstrap/_close.scss +30 -31
  39. data/assets/stylesheets/bootstrap/_containers.scss +41 -0
  40. data/assets/stylesheets/bootstrap/_dropdown.scss +88 -39
  41. data/assets/stylesheets/bootstrap/_forms.scss +9 -330
  42. data/assets/stylesheets/bootstrap/_functions.scss +237 -27
  43. data/assets/stylesheets/bootstrap/_grid.scss +14 -33
  44. data/assets/stylesheets/bootstrap/_helpers.scss +9 -0
  45. data/assets/stylesheets/bootstrap/_images.scss +3 -3
  46. data/assets/stylesheets/bootstrap/_list-group.scss +61 -36
  47. data/assets/stylesheets/bootstrap/_mixins.scss +12 -16
  48. data/assets/stylesheets/bootstrap/_modal.scss +64 -84
  49. data/assets/stylesheets/bootstrap/_nav.scss +29 -10
  50. data/assets/stylesheets/bootstrap/_navbar.scss +93 -52
  51. data/assets/stylesheets/bootstrap/_offcanvas.scss +83 -0
  52. data/assets/stylesheets/bootstrap/_pagination.scss +13 -22
  53. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  54. data/assets/stylesheets/bootstrap/_popover.scss +29 -42
  55. data/assets/stylesheets/bootstrap/_progress.scss +10 -5
  56. data/assets/stylesheets/bootstrap/_reboot.scss +350 -208
  57. data/assets/stylesheets/bootstrap/_root.scss +42 -8
  58. data/assets/stylesheets/bootstrap/_spinners.scss +21 -7
  59. data/assets/stylesheets/bootstrap/_tables.scss +80 -114
  60. data/assets/stylesheets/bootstrap/_toasts.scss +21 -14
  61. data/assets/stylesheets/bootstrap/_tooltip.scss +21 -21
  62. data/assets/stylesheets/bootstrap/_transitions.scss +8 -1
  63. data/assets/stylesheets/bootstrap/_type.scss +40 -61
  64. data/assets/stylesheets/bootstrap/_utilities.scss +630 -17
  65. data/assets/stylesheets/bootstrap/_variables.scss +993 -487
  66. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +18 -0
  67. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +63 -0
  68. data/assets/stylesheets/bootstrap/forms/_form-check.scss +152 -0
  69. data/assets/stylesheets/bootstrap/forms/_form-control.scss +219 -0
  70. data/assets/stylesheets/bootstrap/forms/_form-range.scss +91 -0
  71. data/assets/stylesheets/bootstrap/forms/_form-select.scss +70 -0
  72. data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
  73. data/assets/stylesheets/bootstrap/forms/_input-group.scss +121 -0
  74. data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
  75. data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
  76. data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
  77. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +12 -0
  78. data/assets/stylesheets/bootstrap/helpers/_position.scss +30 -0
  79. data/assets/stylesheets/bootstrap/helpers/_ratio.scss +26 -0
  80. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  81. data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
  82. data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
  83. data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +8 -0
  84. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  85. data/assets/stylesheets/bootstrap/mixins/_alert.scss +3 -5
  86. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  87. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +37 -22
  88. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +7 -9
  89. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +14 -10
  90. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +77 -51
  91. data/assets/stylesheets/bootstrap/mixins/_caret.scss +10 -8
  92. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
  93. data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
  94. data/assets/stylesheets/bootstrap/mixins/_container.scss +9 -0
  95. data/assets/stylesheets/bootstrap/mixins/_forms.scss +67 -115
  96. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +13 -11
  97. data/assets/stylesheets/bootstrap/mixins/_grid.scss +131 -32
  98. data/assets/stylesheets/bootstrap/mixins/_image.scss +0 -20
  99. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +5 -2
  100. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +17 -8
  101. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +1 -1
  102. data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +21 -0
  103. data/assets/stylesheets/bootstrap/mixins/_transition.scss +18 -8
  104. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +89 -0
  105. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +29 -0
  106. data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
  107. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +274 -132
  108. data/bootstrap.gemspec +4 -6
  109. data/lib/bootstrap/version.rb +2 -2
  110. data/tasks/updater/js.rb +25 -6
  111. data/tasks/updater/network.rb +8 -2
  112. data/test/dummy_rails/app/assets/config/manifest.js +3 -0
  113. data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
  114. data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
  115. data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
  116. data/test/dummy_rails/app/views/pages/root.html +89 -0
  117. data/test/dummy_rails/config/application.rb +0 -3
  118. data/test/gemfiles/rails_6_0.gemfile +7 -0
  119. data/test/gemfiles/rails_6_1.gemfile +7 -0
  120. data/test/support/dummy_rails_integration.rb +3 -1
  121. data/test/test_helper.rb +18 -13
  122. metadata +61 -79
  123. data/assets/javascripts/bootstrap/util.js +0 -171
  124. data/assets/stylesheets/bootstrap/_code.scss +0 -48
  125. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -507
  126. data/assets/stylesheets/bootstrap/_input-group.scss +0 -193
  127. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
  128. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  129. data/assets/stylesheets/bootstrap/_print.scss +0 -141
  130. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  131. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
  132. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
  133. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -66
  134. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  135. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  136. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -33
  137. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
  138. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
  139. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -16
  140. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
  141. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
  142. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  143. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  144. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
  145. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
  146. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
  147. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
  148. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
  149. data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
  150. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
  151. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  152. data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
  153. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
  154. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
  155. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
  156. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
  157. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
  158. data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
@@ -1,171 +0,0 @@
1
- /*!
2
- * Bootstrap util.js v4.3.0 (https://getbootstrap.com/)
3
- * Copyright 2011-2019 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
4
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5
- */
6
- (function (global, factory) {
7
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
8
- typeof define === 'function' && define.amd ? define(['jquery'], factory) :
9
- (global = global || self, global.Util = factory(global.jQuery));
10
- }(this, function ($) { 'use strict';
11
-
12
- $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
13
-
14
- /**
15
- * --------------------------------------------------------------------------
16
- * Bootstrap (v4.3.0): util.js
17
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
18
- * --------------------------------------------------------------------------
19
- */
20
- /**
21
- * ------------------------------------------------------------------------
22
- * Private TransitionEnd Helpers
23
- * ------------------------------------------------------------------------
24
- */
25
-
26
- var TRANSITION_END = 'transitionend';
27
- var MAX_UID = 1000000;
28
- var MILLISECONDS_MULTIPLIER = 1000; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
29
-
30
- function toType(obj) {
31
- return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase();
32
- }
33
-
34
- function getSpecialTransitionEndEvent() {
35
- return {
36
- bindType: TRANSITION_END,
37
- delegateType: TRANSITION_END,
38
- handle: function handle(event) {
39
- if ($(event.target).is(this)) {
40
- return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
41
- }
42
-
43
- return undefined; // eslint-disable-line no-undefined
44
- }
45
- };
46
- }
47
-
48
- function transitionEndEmulator(duration) {
49
- var _this = this;
50
-
51
- var called = false;
52
- $(this).one(Util.TRANSITION_END, function () {
53
- called = true;
54
- });
55
- setTimeout(function () {
56
- if (!called) {
57
- Util.triggerTransitionEnd(_this);
58
- }
59
- }, duration);
60
- return this;
61
- }
62
-
63
- function setTransitionEndSupport() {
64
- $.fn.emulateTransitionEnd = transitionEndEmulator;
65
- $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
66
- }
67
- /**
68
- * --------------------------------------------------------------------------
69
- * Public Util Api
70
- * --------------------------------------------------------------------------
71
- */
72
-
73
-
74
- var Util = {
75
- TRANSITION_END: 'bsTransitionEnd',
76
- getUID: function getUID(prefix) {
77
- do {
78
- // eslint-disable-next-line no-bitwise
79
- prefix += ~~(Math.random() * MAX_UID); // "~~" acts like a faster Math.floor() here
80
- } while (document.getElementById(prefix));
81
-
82
- return prefix;
83
- },
84
- getSelectorFromElement: function getSelectorFromElement(element) {
85
- var selector = element.getAttribute('data-target');
86
-
87
- if (!selector || selector === '#') {
88
- var hrefAttr = element.getAttribute('href');
89
- selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
90
- }
91
-
92
- try {
93
- return document.querySelector(selector) ? selector : null;
94
- } catch (err) {
95
- return null;
96
- }
97
- },
98
- getTransitionDurationFromElement: function getTransitionDurationFromElement(element) {
99
- if (!element) {
100
- return 0;
101
- } // Get transition-duration of the element
102
-
103
-
104
- var transitionDuration = $(element).css('transition-duration');
105
- var transitionDelay = $(element).css('transition-delay');
106
- var floatTransitionDuration = parseFloat(transitionDuration);
107
- var floatTransitionDelay = parseFloat(transitionDelay); // Return 0 if element or transition duration is not found
108
-
109
- if (!floatTransitionDuration && !floatTransitionDelay) {
110
- return 0;
111
- } // If multiple durations are defined, take the first
112
-
113
-
114
- transitionDuration = transitionDuration.split(',')[0];
115
- transitionDelay = transitionDelay.split(',')[0];
116
- return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER;
117
- },
118
- reflow: function reflow(element) {
119
- return element.offsetHeight;
120
- },
121
- triggerTransitionEnd: function triggerTransitionEnd(element) {
122
- $(element).trigger(TRANSITION_END);
123
- },
124
- // TODO: Remove in v5
125
- supportsTransitionEnd: function supportsTransitionEnd() {
126
- return Boolean(TRANSITION_END);
127
- },
128
- isElement: function isElement(obj) {
129
- return (obj[0] || obj).nodeType;
130
- },
131
- typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
132
- for (var property in configTypes) {
133
- if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
134
- var expectedTypes = configTypes[property];
135
- var value = config[property];
136
- var valueType = value && Util.isElement(value) ? 'element' : toType(value);
137
-
138
- if (!new RegExp(expectedTypes).test(valueType)) {
139
- throw new Error(componentName.toUpperCase() + ": " + ("Option \"" + property + "\" provided type \"" + valueType + "\" ") + ("but expected type \"" + expectedTypes + "\"."));
140
- }
141
- }
142
- }
143
- },
144
- findShadowRoot: function findShadowRoot(element) {
145
- if (!document.documentElement.attachShadow) {
146
- return null;
147
- } // Can find the shadow root otherwise it'll return the document
148
-
149
-
150
- if (typeof element.getRootNode === 'function') {
151
- var root = element.getRootNode();
152
- return root instanceof ShadowRoot ? root : null;
153
- }
154
-
155
- if (element instanceof ShadowRoot) {
156
- return element;
157
- } // when we don't find a shadow root
158
-
159
-
160
- if (!element.parentNode) {
161
- return null;
162
- }
163
-
164
- return Util.findShadowRoot(element.parentNode);
165
- }
166
- };
167
- setTransitionEndSupport();
168
-
169
- return Util;
170
-
171
- }));
@@ -1,48 +0,0 @@
1
- // Inline code
2
- code {
3
- @include font-size($code-font-size);
4
- color: $code-color;
5
- word-break: break-word;
6
-
7
- // Streamline the style when inside anchors to avoid broken underline and more
8
- a > & {
9
- color: inherit;
10
- }
11
- }
12
-
13
- // User input typically entered via keyboard
14
- kbd {
15
- padding: $kbd-padding-y $kbd-padding-x;
16
- @include font-size($kbd-font-size);
17
- color: $kbd-color;
18
- background-color: $kbd-bg;
19
- @include border-radius($border-radius-sm);
20
- @include box-shadow($kbd-box-shadow);
21
-
22
- kbd {
23
- padding: 0;
24
- @include font-size(100%);
25
- font-weight: $nested-kbd-font-weight;
26
- @include box-shadow(none);
27
- }
28
- }
29
-
30
- // Blocks of code
31
- pre {
32
- display: block;
33
- @include font-size($code-font-size);
34
- color: $pre-color;
35
-
36
- // Account for some code outputs that place code tags in pre tags
37
- code {
38
- @include font-size(inherit);
39
- color: inherit;
40
- word-break: normal;
41
- }
42
- }
43
-
44
- // Enable scrollable blocks of code
45
- .pre-scrollable {
46
- max-height: $pre-scrollable-max-height;
47
- overflow-y: scroll;
48
- }
@@ -1,507 +0,0 @@
1
- // Embedded icons from Open Iconic.
2
- // Released under MIT and copyright 2014 Waybury.
3
- // https://useiconic.com/open
4
-
5
-
6
- // Checkboxes and radios
7
- //
8
- // Base class takes care of all the key behavioral aspects.
9
-
10
- .custom-control {
11
- position: relative;
12
- display: block;
13
- min-height: $font-size-base * $line-height-base;
14
- padding-left: $custom-control-gutter + $custom-control-indicator-size;
15
- }
16
-
17
- .custom-control-inline {
18
- display: inline-flex;
19
- margin-right: $custom-control-spacer-x;
20
- }
21
-
22
- .custom-control-input {
23
- position: absolute;
24
- z-index: -1; // Put the input behind the label so it doesn't overlay text
25
- opacity: 0;
26
-
27
- &:checked ~ .custom-control-label::before {
28
- color: $custom-control-indicator-checked-color;
29
- border-color: $custom-control-indicator-checked-border-color;
30
- @include gradient-bg($custom-control-indicator-checked-bg);
31
- @include box-shadow($custom-control-indicator-checked-box-shadow);
32
- }
33
-
34
- &:focus ~ .custom-control-label::before {
35
- // the mixin is not used here to make sure there is feedback
36
- @if $enable-shadows {
37
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
38
- } @else {
39
- box-shadow: $custom-control-indicator-focus-box-shadow;
40
- }
41
- }
42
-
43
- &:focus:not(:checked) ~ .custom-control-label::before {
44
- border-color: $custom-control-indicator-focus-border-color;
45
- }
46
-
47
- &:not(:disabled):active ~ .custom-control-label::before {
48
- color: $custom-control-indicator-active-color;
49
- background-color: $custom-control-indicator-active-bg;
50
- border-color: $custom-control-indicator-active-border-color;
51
- @include box-shadow($custom-control-indicator-active-box-shadow);
52
- }
53
-
54
- &:disabled {
55
- ~ .custom-control-label {
56
- color: $custom-control-label-disabled-color;
57
-
58
- &::before {
59
- background-color: $custom-control-indicator-disabled-bg;
60
- }
61
- }
62
- }
63
- }
64
-
65
- // Custom control indicators
66
- //
67
- // Build the custom controls out of pseudo-elements.
68
-
69
- .custom-control-label {
70
- position: relative;
71
- margin-bottom: 0;
72
- vertical-align: top;
73
-
74
- // Background-color and (when enabled) gradient
75
- &::before {
76
- position: absolute;
77
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
78
- left: -($custom-control-gutter + $custom-control-indicator-size);
79
- display: block;
80
- width: $custom-control-indicator-size;
81
- height: $custom-control-indicator-size;
82
- pointer-events: none;
83
- content: "";
84
- background-color: $custom-control-indicator-bg;
85
- border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
86
- @include box-shadow($custom-control-indicator-box-shadow);
87
- }
88
-
89
- // Foreground (icon)
90
- &::after {
91
- position: absolute;
92
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
93
- left: -($custom-control-gutter + $custom-control-indicator-size);
94
- display: block;
95
- width: $custom-control-indicator-size;
96
- height: $custom-control-indicator-size;
97
- content: "";
98
- background: no-repeat 50% / #{$custom-control-indicator-bg-size};
99
- }
100
- }
101
-
102
-
103
- // Checkboxes
104
- //
105
- // Tweak just a few things for checkboxes.
106
-
107
- .custom-checkbox {
108
- .custom-control-label::before {
109
- @include border-radius($custom-checkbox-indicator-border-radius);
110
- }
111
-
112
- .custom-control-input:checked ~ .custom-control-label {
113
- &::after {
114
- background-image: $custom-checkbox-indicator-icon-checked;
115
- }
116
- }
117
-
118
- .custom-control-input:indeterminate ~ .custom-control-label {
119
- &::before {
120
- border-color: $custom-checkbox-indicator-indeterminate-border-color;
121
- @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
122
- @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
123
- }
124
- &::after {
125
- background-image: $custom-checkbox-indicator-icon-indeterminate;
126
- }
127
- }
128
-
129
- .custom-control-input:disabled {
130
- &:checked ~ .custom-control-label::before {
131
- background-color: $custom-control-indicator-checked-disabled-bg;
132
- }
133
- &:indeterminate ~ .custom-control-label::before {
134
- background-color: $custom-control-indicator-checked-disabled-bg;
135
- }
136
- }
137
- }
138
-
139
- // Radios
140
- //
141
- // Tweak just a few things for radios.
142
-
143
- .custom-radio {
144
- .custom-control-label::before {
145
- // stylelint-disable-next-line property-blacklist
146
- border-radius: $custom-radio-indicator-border-radius;
147
- }
148
-
149
- .custom-control-input:checked ~ .custom-control-label {
150
- &::after {
151
- background-image: $custom-radio-indicator-icon-checked;
152
- }
153
- }
154
-
155
- .custom-control-input:disabled {
156
- &:checked ~ .custom-control-label::before {
157
- background-color: $custom-control-indicator-checked-disabled-bg;
158
- }
159
- }
160
- }
161
-
162
-
163
- // switches
164
- //
165
- // Tweak a few things for switches
166
-
167
- .custom-switch {
168
- padding-left: $custom-switch-width + $custom-control-gutter;
169
-
170
- .custom-control-label {
171
- &::before {
172
- left: -($custom-switch-width + $custom-control-gutter);
173
- width: $custom-switch-width;
174
- pointer-events: all;
175
- // stylelint-disable-next-line property-blacklist
176
- border-radius: $custom-switch-indicator-border-radius;
177
- }
178
-
179
- &::after {
180
- top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
181
- left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2});
182
- width: $custom-switch-indicator-size;
183
- height: $custom-switch-indicator-size;
184
- background-color: $custom-control-indicator-border-color;
185
- // stylelint-disable-next-line property-blacklist
186
- border-radius: $custom-switch-indicator-border-radius;
187
- @include transition(transform .15s ease-in-out, $custom-forms-transition);
188
- }
189
- }
190
-
191
- .custom-control-input:checked ~ .custom-control-label {
192
- &::after {
193
- background-color: $custom-control-indicator-bg;
194
- transform: translateX($custom-switch-width - $custom-control-indicator-size);
195
- }
196
- }
197
-
198
- .custom-control-input:disabled {
199
- &:checked ~ .custom-control-label::before {
200
- background-color: $custom-control-indicator-checked-disabled-bg;
201
- }
202
- }
203
- }
204
-
205
-
206
- // Select
207
- //
208
- // Replaces the browser default select with a custom one, mostly pulled from
209
- // https://primer.github.io/.
210
- //
211
-
212
- .custom-select {
213
- display: inline-block;
214
- width: 100%;
215
- height: $custom-select-height;
216
- padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
217
- font-family: $custom-select-font-family;
218
- @include font-size($custom-select-font-size);
219
- font-weight: $custom-select-font-weight;
220
- line-height: $custom-select-line-height;
221
- color: $custom-select-color;
222
- vertical-align: middle;
223
- background: $custom-select-background;
224
- background-color: $custom-select-bg;
225
- border: $custom-select-border-width solid $custom-select-border-color;
226
- @include border-radius($custom-select-border-radius, 0);
227
- @include box-shadow($custom-select-box-shadow);
228
- appearance: none;
229
-
230
- &:focus {
231
- border-color: $custom-select-focus-border-color;
232
- outline: 0;
233
- @if $enable-shadows {
234
- box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
235
- } @else {
236
- box-shadow: $custom-select-focus-box-shadow;
237
- }
238
-
239
- &::-ms-value {
240
- // For visual consistency with other platforms/browsers,
241
- // suppress the default white text on blue background highlight given to
242
- // the selected option text when the (still closed) <select> receives focus
243
- // in IE and (under certain conditions) Edge.
244
- // See https://github.com/twbs/bootstrap/issues/19398.
245
- color: $input-color;
246
- background-color: $input-bg;
247
- }
248
- }
249
-
250
- &[multiple],
251
- &[size]:not([size="1"]) {
252
- height: auto;
253
- padding-right: $custom-select-padding-x;
254
- background-image: none;
255
- }
256
-
257
- &:disabled {
258
- color: $custom-select-disabled-color;
259
- background-color: $custom-select-disabled-bg;
260
- }
261
-
262
- // Hides the default caret in IE11
263
- &::-ms-expand {
264
- display: none;
265
- }
266
- }
267
-
268
- .custom-select-sm {
269
- height: $custom-select-height-sm;
270
- padding-top: $custom-select-padding-y-sm;
271
- padding-bottom: $custom-select-padding-y-sm;
272
- padding-left: $custom-select-padding-x-sm;
273
- @include font-size($custom-select-font-size-sm);
274
- }
275
-
276
- .custom-select-lg {
277
- height: $custom-select-height-lg;
278
- padding-top: $custom-select-padding-y-lg;
279
- padding-bottom: $custom-select-padding-y-lg;
280
- padding-left: $custom-select-padding-x-lg;
281
- @include font-size($custom-select-font-size-lg);
282
- }
283
-
284
-
285
- // File
286
- //
287
- // Custom file input.
288
-
289
- .custom-file {
290
- position: relative;
291
- display: inline-block;
292
- width: 100%;
293
- height: $custom-file-height;
294
- margin-bottom: 0;
295
- }
296
-
297
- .custom-file-input {
298
- position: relative;
299
- z-index: 2;
300
- width: 100%;
301
- height: $custom-file-height;
302
- margin: 0;
303
- opacity: 0;
304
-
305
- &:focus ~ .custom-file-label {
306
- border-color: $custom-file-focus-border-color;
307
- box-shadow: $custom-file-focus-box-shadow;
308
- }
309
-
310
- &:disabled ~ .custom-file-label {
311
- background-color: $custom-file-disabled-bg;
312
- }
313
-
314
- @each $lang, $value in $custom-file-text {
315
- &:lang(#{$lang}) ~ .custom-file-label::after {
316
- content: $value;
317
- }
318
- }
319
-
320
- ~ .custom-file-label[data-browse]::after {
321
- content: attr(data-browse);
322
- }
323
- }
324
-
325
- .custom-file-label {
326
- position: absolute;
327
- top: 0;
328
- right: 0;
329
- left: 0;
330
- z-index: 1;
331
- height: $custom-file-height;
332
- padding: $custom-file-padding-y $custom-file-padding-x;
333
- font-family: $custom-file-font-family;
334
- font-weight: $custom-file-font-weight;
335
- line-height: $custom-file-line-height;
336
- color: $custom-file-color;
337
- background-color: $custom-file-bg;
338
- border: $custom-file-border-width solid $custom-file-border-color;
339
- @include border-radius($custom-file-border-radius);
340
- @include box-shadow($custom-file-box-shadow);
341
-
342
- &::after {
343
- position: absolute;
344
- top: 0;
345
- right: 0;
346
- bottom: 0;
347
- z-index: 3;
348
- display: block;
349
- height: $custom-file-height-inner;
350
- padding: $custom-file-padding-y $custom-file-padding-x;
351
- line-height: $custom-file-line-height;
352
- color: $custom-file-button-color;
353
- content: "Browse";
354
- @include gradient-bg($custom-file-button-bg);
355
- border-left: inherit;
356
- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
357
- }
358
- }
359
-
360
- // Range
361
- //
362
- // Style range inputs the same across browsers. Vendor-specific rules for pseudo
363
- // elements cannot be mixed. As such, there are no shared styles for focus or
364
- // active states on prefixed selectors.
365
-
366
- .custom-range {
367
- width: 100%;
368
- height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
369
- padding: 0; // Need to reset padding
370
- background-color: transparent;
371
- appearance: none;
372
-
373
- &:focus {
374
- outline: none;
375
-
376
- // Pseudo-elements must be split across multiple rulesets to have an effect.
377
- // No box-shadow() mixin for focus accessibility.
378
- &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
379
- &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
380
- &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
381
- }
382
-
383
- &::-moz-focus-outer {
384
- border: 0;
385
- }
386
-
387
- &::-webkit-slider-thumb {
388
- width: $custom-range-thumb-width;
389
- height: $custom-range-thumb-height;
390
- margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
391
- @include gradient-bg($custom-range-thumb-bg);
392
- border: $custom-range-thumb-border;
393
- @include border-radius($custom-range-thumb-border-radius);
394
- @include box-shadow($custom-range-thumb-box-shadow);
395
- @include transition($custom-forms-transition);
396
- appearance: none;
397
-
398
- &:active {
399
- @include gradient-bg($custom-range-thumb-active-bg);
400
- }
401
- }
402
-
403
- &::-webkit-slider-runnable-track {
404
- width: $custom-range-track-width;
405
- height: $custom-range-track-height;
406
- color: transparent; // Why?
407
- cursor: $custom-range-track-cursor;
408
- background-color: $custom-range-track-bg;
409
- border-color: transparent;
410
- @include border-radius($custom-range-track-border-radius);
411
- @include box-shadow($custom-range-track-box-shadow);
412
- }
413
-
414
- &::-moz-range-thumb {
415
- width: $custom-range-thumb-width;
416
- height: $custom-range-thumb-height;
417
- @include gradient-bg($custom-range-thumb-bg);
418
- border: $custom-range-thumb-border;
419
- @include border-radius($custom-range-thumb-border-radius);
420
- @include box-shadow($custom-range-thumb-box-shadow);
421
- @include transition($custom-forms-transition);
422
- appearance: none;
423
-
424
- &:active {
425
- @include gradient-bg($custom-range-thumb-active-bg);
426
- }
427
- }
428
-
429
- &::-moz-range-track {
430
- width: $custom-range-track-width;
431
- height: $custom-range-track-height;
432
- color: transparent;
433
- cursor: $custom-range-track-cursor;
434
- background-color: $custom-range-track-bg;
435
- border-color: transparent; // Firefox specific?
436
- @include border-radius($custom-range-track-border-radius);
437
- @include box-shadow($custom-range-track-box-shadow);
438
- }
439
-
440
- &::-ms-thumb {
441
- width: $custom-range-thumb-width;
442
- height: $custom-range-thumb-height;
443
- margin-top: 0; // Edge specific
444
- margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
445
- margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
446
- @include gradient-bg($custom-range-thumb-bg);
447
- border: $custom-range-thumb-border;
448
- @include border-radius($custom-range-thumb-border-radius);
449
- @include box-shadow($custom-range-thumb-box-shadow);
450
- @include transition($custom-forms-transition);
451
- appearance: none;
452
-
453
- &:active {
454
- @include gradient-bg($custom-range-thumb-active-bg);
455
- }
456
- }
457
-
458
- &::-ms-track {
459
- width: $custom-range-track-width;
460
- height: $custom-range-track-height;
461
- color: transparent;
462
- cursor: $custom-range-track-cursor;
463
- background-color: transparent;
464
- border-color: transparent;
465
- border-width: $custom-range-thumb-height / 2;
466
- @include box-shadow($custom-range-track-box-shadow);
467
- }
468
-
469
- &::-ms-fill-lower {
470
- background-color: $custom-range-track-bg;
471
- @include border-radius($custom-range-track-border-radius);
472
- }
473
-
474
- &::-ms-fill-upper {
475
- margin-right: 15px; // arbitrary?
476
- background-color: $custom-range-track-bg;
477
- @include border-radius($custom-range-track-border-radius);
478
- }
479
-
480
- &:disabled {
481
- &::-webkit-slider-thumb {
482
- background-color: $custom-range-thumb-disabled-bg;
483
- }
484
-
485
- &::-webkit-slider-runnable-track {
486
- cursor: default;
487
- }
488
-
489
- &::-moz-range-thumb {
490
- background-color: $custom-range-thumb-disabled-bg;
491
- }
492
-
493
- &::-moz-range-track {
494
- cursor: default;
495
- }
496
-
497
- &::-ms-thumb {
498
- background-color: $custom-range-thumb-disabled-bg;
499
- }
500
- }
501
- }
502
-
503
- .custom-control-label::before,
504
- .custom-file-label,
505
- .custom-select {
506
- @include transition($custom-forms-transition);
507
- }