bootstrap 4.6.0 → 5.0.0.beta2

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