bootstrap 4.5.2 → 5.0.0.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (131) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap-sprockets.js +12 -8
  4. data/assets/javascripts/bootstrap.js +1876 -1220
  5. data/assets/javascripts/bootstrap.min.js +2 -2
  6. data/assets/javascripts/bootstrap/alert.js +133 -48
  7. data/assets/javascripts/bootstrap/button.js +56 -123
  8. data/assets/javascripts/bootstrap/carousel.js +268 -129
  9. data/assets/javascripts/bootstrap/collapse.js +285 -106
  10. data/assets/javascripts/bootstrap/dom/data.js +81 -0
  11. data/assets/javascripts/bootstrap/dom/event-handler.js +311 -0
  12. data/assets/javascripts/bootstrap/dom/manipulator.js +100 -0
  13. data/assets/javascripts/bootstrap/dom/polyfill.js +110 -0
  14. data/assets/javascripts/bootstrap/dom/selector-engine.js +98 -0
  15. data/assets/javascripts/bootstrap/dropdown.js +235 -161
  16. data/assets/javascripts/bootstrap/modal.js +322 -193
  17. data/assets/javascripts/bootstrap/popover.js +72 -41
  18. data/assets/javascripts/bootstrap/scrollspy.js +151 -56
  19. data/assets/javascripts/bootstrap/tab.js +151 -64
  20. data/assets/javascripts/bootstrap/toast.js +163 -65
  21. data/assets/javascripts/bootstrap/tooltip.js +336 -155
  22. data/assets/stylesheets/_bootstrap-grid.scss +51 -15
  23. data/assets/stylesheets/_bootstrap-reboot.scss +4 -1
  24. data/assets/stylesheets/_bootstrap.scss +14 -8
  25. data/assets/stylesheets/bootstrap/_alert.scss +3 -3
  26. data/assets/stylesheets/bootstrap/_badge.scss +2 -27
  27. data/assets/stylesheets/bootstrap/_breadcrumb.scss +3 -17
  28. data/assets/stylesheets/bootstrap/_button-group.scss +16 -38
  29. data/assets/stylesheets/bootstrap/_buttons.scss +27 -45
  30. data/assets/stylesheets/bootstrap/_card.scss +18 -64
  31. data/assets/stylesheets/bootstrap/_carousel.scss +13 -15
  32. data/assets/stylesheets/bootstrap/_close.scss +9 -13
  33. data/assets/stylesheets/bootstrap/_containers.scss +41 -0
  34. data/assets/stylesheets/bootstrap/_dropdown.scss +10 -7
  35. data/assets/stylesheets/bootstrap/_forms.scss +9 -347
  36. data/assets/stylesheets/bootstrap/_functions.scss +82 -20
  37. data/assets/stylesheets/bootstrap/_grid.scss +3 -54
  38. data/assets/stylesheets/bootstrap/_helpers.scss +7 -0
  39. data/assets/stylesheets/bootstrap/_list-group.scss +6 -3
  40. data/assets/stylesheets/bootstrap/_mixins.scss +6 -12
  41. data/assets/stylesheets/bootstrap/_modal.scss +34 -39
  42. data/assets/stylesheets/bootstrap/_nav.scss +8 -8
  43. data/assets/stylesheets/bootstrap/_navbar.scss +42 -74
  44. data/assets/stylesheets/bootstrap/_pagination.scss +7 -20
  45. data/assets/stylesheets/bootstrap/_popover.scss +5 -5
  46. data/assets/stylesheets/bootstrap/_progress.scss +2 -4
  47. data/assets/stylesheets/bootstrap/_reboot.scss +300 -164
  48. data/assets/stylesheets/bootstrap/_root.scss +5 -9
  49. data/assets/stylesheets/bootstrap/_spinners.scss +2 -2
  50. data/assets/stylesheets/bootstrap/_tables.scss +80 -114
  51. data/assets/stylesheets/bootstrap/_toasts.scss +2 -4
  52. data/assets/stylesheets/bootstrap/_tooltip.scss +5 -5
  53. data/assets/stylesheets/bootstrap/_transitions.scss +0 -1
  54. data/assets/stylesheets/bootstrap/_type.scss +38 -59
  55. data/assets/stylesheets/bootstrap/_utilities.scss +503 -18
  56. data/assets/stylesheets/bootstrap/_variables.scss +544 -424
  57. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +18 -0
  58. data/assets/stylesheets/bootstrap/forms/_form-check.scss +142 -0
  59. data/assets/stylesheets/bootstrap/forms/_form-control.scss +116 -0
  60. data/assets/stylesheets/bootstrap/forms/_form-file.scss +91 -0
  61. data/assets/stylesheets/bootstrap/forms/_form-range.scss +136 -0
  62. data/assets/stylesheets/bootstrap/forms/_form-select.scss +82 -0
  63. data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
  64. data/assets/stylesheets/bootstrap/forms/_input-group.scss +140 -0
  65. data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
  66. data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
  67. data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
  68. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +12 -0
  69. data/assets/stylesheets/bootstrap/helpers/_embed.scss +31 -0
  70. data/assets/stylesheets/bootstrap/helpers/_position.scss +30 -0
  71. data/assets/stylesheets/bootstrap/helpers/_screenreaders.scss +8 -0
  72. data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
  73. data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
  74. data/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -4
  75. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +11 -8
  76. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +62 -47
  77. data/assets/stylesheets/bootstrap/mixins/_caret.scss +4 -4
  78. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
  79. data/assets/stylesheets/bootstrap/mixins/_container.scss +9 -0
  80. data/assets/stylesheets/bootstrap/mixins/_forms.scss +22 -67
  81. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +9 -11
  82. data/assets/stylesheets/bootstrap/mixins/_grid.scss +84 -32
  83. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -21
  84. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +2 -1
  85. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  86. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +15 -8
  87. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -2
  88. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +16 -22
  89. data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +21 -0
  90. data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
  91. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +49 -0
  92. data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
  93. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +234 -126
  94. data/lib/bootstrap/version.rb +2 -2
  95. data/tasks/updater/js.rb +3 -3
  96. metadata +31 -39
  97. data/assets/javascripts/bootstrap/util.js +0 -192
  98. data/assets/stylesheets/bootstrap/_code.scss +0 -48
  99. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -523
  100. data/assets/stylesheets/bootstrap/_input-group.scss +0 -192
  101. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
  102. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  103. data/assets/stylesheets/bootstrap/_print.scss +0 -141
  104. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -23
  105. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
  106. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
  107. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -80
  108. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  109. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -11
  110. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
  111. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
  112. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -17
  113. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
  114. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
  115. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  116. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  117. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
  118. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
  119. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
  120. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
  121. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
  122. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +0 -5
  123. data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
  124. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
  125. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  126. data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
  127. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
  128. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
  129. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
  130. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
  131. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
@@ -0,0 +1,18 @@
1
+ /*!
2
+ * Bootstrap Utilities v5.0.0-alpha1 (https://getbootstrap.com/)
3
+ * Copyright 2011-2020 The Bootstrap Authors
4
+ * Copyright 2011-2020 Twitter, Inc.
5
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
+ */
7
+
8
+ // Configuration
9
+
10
+ @import "functions";
11
+ @import "variables";
12
+ @import "mixins";
13
+ @import "utilities";
14
+
15
+
16
+ // Utilities
17
+
18
+ @import "utilities/api";
@@ -0,0 +1,142 @@
1
+ //
2
+ // Check/radio
3
+ //
4
+
5
+ .form-check {
6
+ display: block;
7
+ min-height: $form-check-min-height;
8
+ padding-left: $form-check-padding-left;
9
+ margin-bottom: $form-check-margin-bottom;
10
+
11
+ .form-check-input {
12
+ float: left;
13
+ margin-left: $form-check-padding-left * -1;
14
+ }
15
+ }
16
+
17
+ .form-check-input {
18
+ width: $form-check-input-width;
19
+ height: $form-check-input-width;
20
+ margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
21
+ vertical-align: top;
22
+ background-color: $form-check-input-bg;
23
+ background-repeat: no-repeat;
24
+ background-position: center;
25
+ background-size: contain;
26
+ border: $form-check-input-border;
27
+ appearance: none;
28
+ color-adjust: exact; // Keep themed appearance for print
29
+ @include transition($form-check-transition);
30
+
31
+ &[type="checkbox"] {
32
+ @include border-radius($form-check-input-border-radius);
33
+ }
34
+
35
+ &[type="radio"] {
36
+ // stylelint-disable-next-line property-blacklist
37
+ border-radius: $form-check-radio-border-radius;
38
+ }
39
+
40
+ &:active {
41
+ filter: $form-check-input-active-filter;
42
+ }
43
+
44
+ &:focus {
45
+ border-color: $form-check-input-focus-border;
46
+ outline: 0;
47
+ box-shadow: $form-check-input-focus-box-shadow;
48
+ }
49
+
50
+ &:checked {
51
+ background-color: $form-check-input-checked-bg-color;
52
+ border-color: $form-check-input-checked-border-color;
53
+
54
+ &[type="checkbox"] {
55
+ @if $enable-gradients {
56
+ background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
57
+ } @else {
58
+ background-image: escape-svg($form-check-input-checked-bg-image);
59
+ }
60
+ }
61
+
62
+ &[type="radio"] {
63
+ @if $enable-gradients {
64
+ background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
65
+ } @else {
66
+ background-image: escape-svg($form-check-radio-checked-bg-image);
67
+ }
68
+ }
69
+ }
70
+
71
+ &[type="checkbox"]:indeterminate {
72
+ background-color: $form-check-input-indeterminate-bg-color;
73
+ border-color: $form-check-input-indeterminate-border-color;
74
+
75
+ @if $enable-gradients {
76
+ background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
77
+ } @else {
78
+ background-image: escape-svg($form-check-input-indeterminate-bg-image);
79
+ }
80
+ }
81
+
82
+ &:disabled {
83
+ pointer-events: none;
84
+ filter: none;
85
+ opacity: .5;
86
+ }
87
+
88
+ // Use disabled attribute in addition of :disabled pseudo-class
89
+ // See: https://github.com/twbs/bootstrap/issues/28247
90
+ &[disabled],
91
+ &:disabled {
92
+ ~ .form-check-label {
93
+ opacity: .5;
94
+ }
95
+ }
96
+ }
97
+
98
+ .form-check-label {
99
+ color: $form-check-label-color;
100
+ cursor: $form-check-label-cursor;
101
+ }
102
+
103
+ //
104
+ // Switch
105
+ //
106
+
107
+ .form-switch {
108
+ padding-left: $form-switch-padding-left;
109
+
110
+ .form-check-input {
111
+ width: $form-switch-width;
112
+ margin-left: $form-switch-padding-left * -1;
113
+ background-image: escape-svg($form-switch-bg-image);
114
+ background-position: left center;
115
+ @include border-radius($form-switch-border-radius);
116
+
117
+ &:focus {
118
+ background-image: escape-svg($form-switch-focus-bg-image);
119
+ }
120
+
121
+ &:checked {
122
+ background-position: $form-switch-checked-bg-position;
123
+
124
+ @if $enable-gradients {
125
+ background-image: escape-svg($form-switch-checked-bg-image), var(--bs-gradient);
126
+ } @else {
127
+ background-image: escape-svg($form-switch-checked-bg-image);
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ .form-check-inline {
134
+ display: inline-block;
135
+ margin-right: $form-check-inline-margin-right;
136
+ }
137
+
138
+ .btn-check {
139
+ position: absolute;
140
+ clip: rect(0, 0, 0, 0);
141
+ pointer-events: none;
142
+ }
@@ -0,0 +1,116 @@
1
+ //
2
+ // Textual form controls
3
+ //
4
+
5
+ .form-control {
6
+ display: block;
7
+ width: 100%;
8
+ min-height: $input-height;
9
+ padding: $input-padding-y $input-padding-x;
10
+ font-family: $input-font-family;
11
+ @include font-size($input-font-size);
12
+ font-weight: $input-font-weight;
13
+ line-height: $input-line-height;
14
+ color: $input-color;
15
+ background-color: $input-bg;
16
+ background-clip: padding-box;
17
+ border: $input-border-width solid $input-border-color;
18
+ appearance: none; // Fix appearance for date inputs in Safari
19
+
20
+ // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
21
+ @include border-radius($input-border-radius, 0);
22
+
23
+ @include box-shadow($input-box-shadow);
24
+ @include transition($input-transition);
25
+
26
+ // Customize the `:focus` state to imitate native WebKit styles.
27
+ &:focus {
28
+ color: $input-focus-color;
29
+ background-color: $input-focus-bg;
30
+ border-color: $input-focus-border-color;
31
+ outline: 0;
32
+ @if $enable-shadows {
33
+ @include box-shadow($input-box-shadow, $input-focus-box-shadow);
34
+ } @else {
35
+ // Avoid using mixin so we can pass custom focus shadow properly
36
+ box-shadow: $input-focus-box-shadow;
37
+ }
38
+ }
39
+
40
+ // Placeholder
41
+ &::placeholder {
42
+ color: $input-placeholder-color;
43
+ // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
44
+ opacity: 1;
45
+ }
46
+
47
+ // Disabled and read-only inputs
48
+ //
49
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
50
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
51
+ // don't honor that edge case; we style them as disabled anyway.
52
+ &:disabled,
53
+ &[readonly] {
54
+ background-color: $input-disabled-bg;
55
+ border-color: $input-disabled-border-color;
56
+ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
57
+ opacity: 1;
58
+ }
59
+ }
60
+
61
+ // Readonly controls as plain text
62
+ //
63
+ // Apply class to a readonly input to make it appear like regular plain
64
+ // text (without any border, background color, focus indicator)
65
+
66
+ .form-control-plaintext {
67
+ display: block;
68
+ width: 100%;
69
+ padding: $input-padding-y 0;
70
+ margin-bottom: 0; // match inputs if this class comes on inputs with default margins
71
+ line-height: $input-line-height;
72
+ color: $input-plaintext-color;
73
+ background-color: transparent;
74
+ border: solid transparent;
75
+ border-width: $input-border-width 0;
76
+
77
+ &.form-control-sm,
78
+ &.form-control-lg {
79
+ padding-right: 0;
80
+ padding-left: 0;
81
+ }
82
+ }
83
+
84
+ // Form control sizing
85
+ //
86
+ // Build on `.form-control` with modifier classes to decrease or increase the
87
+ // height and font-size of form controls.
88
+ //
89
+ // Repeated in `_input_group.scss` to avoid Sass extend issues.
90
+
91
+ .form-control-sm {
92
+ min-height: $input-height-sm;
93
+ padding: $input-padding-y-sm $input-padding-x-sm;
94
+ @include font-size($input-font-size-sm);
95
+ @include border-radius($input-border-radius-sm);
96
+ }
97
+
98
+ .form-control-lg {
99
+ min-height: $input-height-lg;
100
+ padding: $input-padding-y-lg $input-padding-x-lg;
101
+ @include font-size($input-font-size-lg);
102
+ @include border-radius($input-border-radius-lg);
103
+ }
104
+
105
+ .form-control-color {
106
+ max-width: 3rem;
107
+ padding: $input-padding-y;
108
+ }
109
+
110
+ .form-control-color::-moz-color-swatch {
111
+ @include border-radius($input-border-radius);
112
+ }
113
+
114
+ .form-control-color::-webkit-color-swatch {
115
+ @include border-radius($input-border-radius);
116
+ }
@@ -0,0 +1,91 @@
1
+ .form-file {
2
+ --bs-form-file-height: #{$form-file-height};
3
+ position: relative;
4
+ }
5
+
6
+ .form-file-input {
7
+ position: relative;
8
+ z-index: 2;
9
+ width: 100%;
10
+ height: var(--bs-form-file-height);
11
+ margin: 0;
12
+ opacity: 0;
13
+
14
+ &:focus-within ~ .form-file-label {
15
+ border-color: $form-file-focus-border-color;
16
+ box-shadow: $form-file-focus-box-shadow;
17
+ }
18
+
19
+ // Use disabled attribute in addition of :disabled pseudo-class
20
+ // See: https://github.com/twbs/bootstrap/issues/28247
21
+ &[disabled] ~ .form-file-label .form-file-text,
22
+ &:disabled ~ .form-file-label .form-file-text {
23
+ background-color: $form-file-disabled-bg;
24
+ border-color: $form-file-disabled-border-color;
25
+ }
26
+ }
27
+
28
+ .form-file-label {
29
+ position: absolute;
30
+ top: 0;
31
+ right: 0;
32
+ left: 0;
33
+ z-index: 1;
34
+ display: flex;
35
+ height: var(--bs-form-file-height);
36
+ border-color: $form-file-border-color;
37
+ @include border-radius($form-file-border-radius);
38
+ @include box-shadow($form-file-box-shadow);
39
+ }
40
+
41
+ .form-file-text {
42
+ display: block;
43
+ flex-grow: 1;
44
+ padding: $form-file-padding-y $form-file-padding-x;
45
+ overflow: hidden;
46
+ font-family: $form-file-font-family;
47
+ font-weight: $form-file-font-weight;
48
+ line-height: $form-file-line-height;
49
+ color: $form-file-color;
50
+ text-overflow: ellipsis;
51
+ white-space: nowrap;
52
+ background-color: $form-file-bg;
53
+ border-color: inherit;
54
+ border-style: solid;
55
+ border-width: $form-file-border-width;
56
+ @include border-left-radius(inherit);
57
+ }
58
+
59
+ .form-file-button {
60
+ display: block;
61
+ flex-shrink: 0;
62
+ padding: $form-file-padding-y $form-file-padding-x;
63
+ margin-left: -$form-file-border-width;
64
+ line-height: $form-file-line-height;
65
+ color: $form-file-button-color;
66
+ @include gradient-bg($form-file-button-bg);
67
+ border-color: inherit;
68
+ border-style: solid;
69
+ border-width: $form-file-border-width;
70
+ @include border-right-radius(inherit);
71
+ }
72
+
73
+ .form-file-sm {
74
+ --bs-form-file-height: #{$form-file-height-sm};
75
+ @include font-size($form-file-font-size-sm);
76
+
77
+ .form-file-text,
78
+ .form-file-button {
79
+ padding: $form-file-padding-y-sm $form-file-padding-x-sm;
80
+ }
81
+ }
82
+
83
+ .form-file-lg {
84
+ --bs-form-file-height: #{$form-file-height-lg};
85
+ @include font-size($form-file-font-size-lg);
86
+
87
+ .form-file-text,
88
+ .form-file-button {
89
+ padding: $form-file-padding-y-lg $form-file-padding-x-lg;
90
+ }
91
+ }
@@ -0,0 +1,136 @@
1
+ // Range
2
+ //
3
+ // Style range inputs the same across browsers. Vendor-specific rules for pseudo
4
+ // elements cannot be mixed. As such, there are no shared styles for focus or
5
+ // active states on prefixed selectors.
6
+
7
+ .form-range {
8
+ width: 100%;
9
+ height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
10
+ padding: 0; // Need to reset padding
11
+ background-color: transparent;
12
+ appearance: none;
13
+
14
+ &:focus {
15
+ outline: none;
16
+
17
+ // Pseudo-elements must be split across multiple rulesets to have an effect.
18
+ // No box-shadow() mixin for focus accessibility.
19
+ &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
20
+ &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
21
+ &::-ms-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
22
+ }
23
+
24
+ &::-moz-focus-outer {
25
+ border: 0;
26
+ }
27
+
28
+ &::-webkit-slider-thumb {
29
+ width: $form-range-thumb-width;
30
+ height: $form-range-thumb-height;
31
+ margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
32
+ @include gradient-bg($form-range-thumb-bg);
33
+ border: $form-range-thumb-border;
34
+ @include border-radius($form-range-thumb-border-radius);
35
+ @include box-shadow($form-range-thumb-box-shadow);
36
+ @include transition($form-range-thumb-transition);
37
+ appearance: none;
38
+
39
+ &:active {
40
+ @include gradient-bg($form-range-thumb-active-bg);
41
+ }
42
+ }
43
+
44
+ &::-webkit-slider-runnable-track {
45
+ width: $form-range-track-width;
46
+ height: $form-range-track-height;
47
+ color: transparent; // Why?
48
+ cursor: $form-range-track-cursor;
49
+ background-color: $form-range-track-bg;
50
+ border-color: transparent;
51
+ @include border-radius($form-range-track-border-radius);
52
+ @include box-shadow($form-range-track-box-shadow);
53
+ }
54
+
55
+ &::-moz-range-thumb {
56
+ width: $form-range-thumb-width;
57
+ height: $form-range-thumb-height;
58
+ @include gradient-bg($form-range-thumb-bg);
59
+ border: $form-range-thumb-border;
60
+ @include border-radius($form-range-thumb-border-radius);
61
+ @include box-shadow($form-range-thumb-box-shadow);
62
+ @include transition($form-range-thumb-transition);
63
+ appearance: none;
64
+
65
+ &:active {
66
+ @include gradient-bg($form-range-thumb-active-bg);
67
+ }
68
+ }
69
+
70
+ &::-moz-range-track {
71
+ width: $form-range-track-width;
72
+ height: $form-range-track-height;
73
+ color: transparent;
74
+ cursor: $form-range-track-cursor;
75
+ background-color: $form-range-track-bg;
76
+ border-color: transparent; // Firefox specific?
77
+ @include border-radius($form-range-track-border-radius);
78
+ @include box-shadow($form-range-track-box-shadow);
79
+ }
80
+
81
+ &::-ms-thumb {
82
+ width: $form-range-thumb-width;
83
+ height: $form-range-thumb-height;
84
+ margin-top: 0; // Edge specific
85
+ margin-right: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
86
+ margin-left: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
87
+ @include gradient-bg($form-range-thumb-bg);
88
+ border: $form-range-thumb-border;
89
+ @include border-radius($form-range-thumb-border-radius);
90
+ @include box-shadow($form-range-thumb-box-shadow);
91
+ @include transition($form-range-thumb-transition);
92
+ appearance: none;
93
+
94
+ &:active {
95
+ @include gradient-bg($form-range-thumb-active-bg);
96
+ }
97
+ }
98
+
99
+ &::-ms-track {
100
+ width: $form-range-track-width;
101
+ height: $form-range-track-height;
102
+ color: transparent;
103
+ cursor: $form-range-track-cursor;
104
+ background-color: transparent;
105
+ border-color: transparent;
106
+ border-width: $form-range-thumb-height / 2;
107
+ @include box-shadow($form-range-track-box-shadow);
108
+ }
109
+
110
+ &::-ms-fill-lower {
111
+ background-color: $form-range-track-bg;
112
+ @include border-radius($form-range-track-border-radius);
113
+ }
114
+
115
+ &::-ms-fill-upper {
116
+ margin-right: 15px; // arbitrary?
117
+ background-color: $form-range-track-bg;
118
+ @include border-radius($form-range-track-border-radius);
119
+ }
120
+
121
+ &:disabled {
122
+ pointer-events: none;
123
+
124
+ &::-webkit-slider-thumb {
125
+ background-color: $form-range-thumb-disabled-bg;
126
+ }
127
+
128
+ &::-moz-range-thumb {
129
+ background-color: $form-range-thumb-disabled-bg;
130
+ }
131
+
132
+ &::-ms-thumb {
133
+ background-color: $form-range-thumb-disabled-bg;
134
+ }
135
+ }
136
+ }