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,82 @@
1
+ // Select
2
+ //
3
+ // Replaces the browser default select with a custom one, mostly pulled from
4
+ // https://primer.github.io/.
5
+
6
+ .form-select {
7
+ display: block;
8
+ width: 100%;
9
+ height: $form-select-height;
10
+ padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
11
+ font-family: $form-select-font-family;
12
+ @include font-size($form-select-font-size);
13
+ font-weight: $form-select-font-weight;
14
+ line-height: $form-select-line-height;
15
+ color: $form-select-color;
16
+ vertical-align: middle;
17
+ background-color: $form-select-bg;
18
+ background-image: escape-svg($form-select-indicator);
19
+ background-repeat: no-repeat;
20
+ background-position: $form-select-bg-position;
21
+ background-size: $form-select-bg-size;
22
+ border: $form-select-border-width solid $form-select-border-color;
23
+ @include border-radius($form-select-border-radius, 0);
24
+ @include box-shadow($form-select-box-shadow);
25
+ appearance: none;
26
+
27
+ &:focus {
28
+ border-color: $form-select-focus-border-color;
29
+ outline: 0;
30
+ @if $enable-shadows {
31
+ @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
32
+ } @else {
33
+ // Avoid using mixin so we can pass custom focus shadow properly
34
+ box-shadow: $form-select-focus-box-shadow;
35
+ }
36
+
37
+ &::-ms-value {
38
+ // For visual consistency with other platforms/browsers,
39
+ // suppress the default white text on blue background highlight given to
40
+ // the selected option text when the (still closed) <select> receives focus
41
+ // in Edge.
42
+ // See https://github.com/twbs/bootstrap/issues/19398.
43
+ color: $input-color;
44
+ background-color: $input-bg;
45
+ }
46
+ }
47
+
48
+ &[multiple],
49
+ &[size]:not([size="1"]) {
50
+ height: auto;
51
+ padding-right: $form-select-padding-x;
52
+ background-image: none;
53
+ }
54
+
55
+ &:disabled {
56
+ color: $form-select-disabled-color;
57
+ background-color: $form-select-disabled-bg;
58
+ border-color: $form-select-disabled-border-color;
59
+ }
60
+
61
+ // Remove outline from select box in FF
62
+ &:-moz-focusring {
63
+ color: transparent;
64
+ text-shadow: 0 0 0 $form-select-color;
65
+ }
66
+ }
67
+
68
+ .form-select-sm {
69
+ height: $form-select-height-sm;
70
+ padding-top: $form-select-padding-y-sm;
71
+ padding-bottom: $form-select-padding-y-sm;
72
+ padding-left: $form-select-padding-x-sm;
73
+ @include font-size($form-select-font-size-sm);
74
+ }
75
+
76
+ .form-select-lg {
77
+ height: $form-select-height-lg;
78
+ padding-top: $form-select-padding-y-lg;
79
+ padding-bottom: $form-select-padding-y-lg;
80
+ padding-left: $form-select-padding-x-lg;
81
+ @include font-size($form-select-font-size-lg);
82
+ }
@@ -0,0 +1,11 @@
1
+ //
2
+ // Form text
3
+ //
4
+
5
+ .form-text {
6
+ margin-top: $form-text-margin-top;
7
+ @include font-size($form-text-font-size);
8
+ font-style: $form-text-font-style;
9
+ font-weight: $form-text-font-weight;
10
+ color: $form-text-color;
11
+ }
@@ -0,0 +1,140 @@
1
+ //
2
+ // Base styles
3
+ //
4
+
5
+ .input-group {
6
+ position: relative;
7
+ display: flex;
8
+ flex-wrap: wrap; // For form validation feedback
9
+ align-items: stretch;
10
+ width: 100%;
11
+
12
+ > .form-control,
13
+ > .form-select,
14
+ > .form-file {
15
+ position: relative; // For focus state's z-index
16
+ flex: 1 1 auto;
17
+ width: 1%;
18
+ min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
19
+ }
20
+
21
+ // Bring the "active" form control to the top of surrounding elements
22
+ > .form-control:focus,
23
+ > .form-select:focus,
24
+ > .form-file .form-file-input:focus ~ .form-file-label {
25
+ z-index: 3;
26
+ }
27
+
28
+ // Bring the custom file input above the label
29
+ > .form-file {
30
+ > .form-file-input:focus {
31
+ z-index: 4;
32
+ }
33
+
34
+ &:not(:last-child) > .form-file-label {
35
+ @include border-right-radius(0);
36
+ }
37
+
38
+ &:not(:first-child) > .form-file-label {
39
+ @include border-left-radius(0);
40
+ }
41
+ }
42
+
43
+ // Ensure buttons are always above inputs for more visually pleasing borders.
44
+ // This isn't needed for `.input-group-text` since it shares the same border-color
45
+ // as our inputs.
46
+ .btn {
47
+ position: relative;
48
+ z-index: 2;
49
+
50
+ &:focus {
51
+ z-index: 3;
52
+ }
53
+ }
54
+ }
55
+
56
+
57
+ // Textual addons
58
+ //
59
+ // Serves as a catch-all element for any text or radio/checkbox input you wish
60
+ // to prepend or append to an input.
61
+
62
+ .input-group-text {
63
+ display: flex;
64
+ align-items: center;
65
+ padding: $input-padding-y $input-padding-x;
66
+ @include font-size($input-font-size); // Match inputs
67
+ font-weight: $font-weight-normal;
68
+ line-height: $input-line-height;
69
+ color: $input-group-addon-color;
70
+ text-align: center;
71
+ white-space: nowrap;
72
+ background-color: $input-group-addon-bg;
73
+ border: $input-border-width solid $input-group-addon-border-color;
74
+ @include border-radius($input-border-radius);
75
+ }
76
+
77
+
78
+ // Sizing
79
+ //
80
+ // Remix the default form control sizing classes into new ones for easier
81
+ // manipulation.
82
+
83
+ .input-group-lg > .form-control {
84
+ min-height: $input-height-lg;
85
+ }
86
+
87
+ .input-group-lg > .form-select {
88
+ height: $input-height-lg;
89
+ }
90
+
91
+ .input-group-lg > .form-control,
92
+ .input-group-lg > .form-select,
93
+ .input-group-lg > .input-group-text,
94
+ .input-group-lg > .btn {
95
+ padding: $input-padding-y-lg $input-padding-x-lg;
96
+ @include font-size($input-font-size-lg);
97
+ @include border-radius($input-border-radius-lg);
98
+ }
99
+
100
+ .input-group-sm > .form-control {
101
+ min-height: $input-height-sm;
102
+ }
103
+
104
+ .input-group-sm > .form-select {
105
+ height: $input-height-sm;
106
+ }
107
+
108
+ .input-group-sm > .form-control,
109
+ .input-group-sm > .form-select,
110
+ .input-group-sm > .input-group-text,
111
+ .input-group-sm > .btn {
112
+ padding: $input-padding-y-sm $input-padding-x-sm;
113
+ @include font-size($input-font-size-sm);
114
+ @include border-radius($input-border-radius-sm);
115
+ }
116
+
117
+ .input-group-lg > .form-select,
118
+ .input-group-sm > .form-select {
119
+ padding-right: $form-select-padding-x + $form-select-indicator-padding;
120
+ }
121
+
122
+
123
+ // Rounded corners
124
+ //
125
+ // These rulesets must come after the sizing ones to properly override sm and lg
126
+ // border-radius values when extending. They're more specific than we'd like
127
+ // with the `.input-group >` part, but without it, we cannot override the sizing.
128
+
129
+ // stylelint-disable-next-line no-duplicate-selectors
130
+ .input-group {
131
+ > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
132
+ > .dropdown-toggle:nth-last-child(n + 3) {
133
+ @include border-right-radius(0);
134
+ }
135
+
136
+ > :not(:first-child):not(.dropdown-menu) {
137
+ margin-left: -$input-border-width;
138
+ @include border-left-radius(0);
139
+ }
140
+ }
@@ -0,0 +1,36 @@
1
+ //
2
+ // Labels
3
+ //
4
+
5
+ .form-label {
6
+ margin-bottom: $form-label-margin-bottom;
7
+ @include font-size($form-label-font-size);
8
+ font-style: $form-label-font-style;
9
+ font-weight: $form-label-font-weight;
10
+ color: $form-label-color;
11
+ }
12
+
13
+ // For use with horizontal and inline forms, when you need the label (or legend)
14
+ // text to align with the form controls.
15
+ .col-form-label {
16
+ padding-top: add($input-padding-y, $input-border-width);
17
+ padding-bottom: add($input-padding-y, $input-border-width);
18
+ margin-bottom: 0; // Override the `<legend>` default
19
+ @include font-size(inherit); // Override the `<legend>` default
20
+ font-style: $form-label-font-style;
21
+ font-weight: $form-label-font-weight;
22
+ line-height: $input-line-height;
23
+ color: $form-label-color;
24
+ }
25
+
26
+ .col-form-label-lg {
27
+ padding-top: add($input-padding-y-lg, $input-border-width);
28
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
29
+ @include font-size($input-font-size-lg);
30
+ }
31
+
32
+ .col-form-label-sm {
33
+ padding-top: add($input-padding-y-sm, $input-border-width);
34
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
35
+ @include font-size($input-font-size-sm);
36
+ }
@@ -0,0 +1,12 @@
1
+ // Form validation
2
+ //
3
+ // Provide feedback to users when form field values are valid or invalid. Works
4
+ // primarily for client-side validation via scoped `:invalid` and `:valid`
5
+ // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
6
+ // server-side validation.
7
+
8
+ // scss-docs-start form-validation-states-loop
9
+ @each $state, $data in $form-validation-states {
10
+ @include form-validation-state($state, map-get($data, color), map-get($data, icon));
11
+ }
12
+ // scss-docs-end form-validation-states-loop
@@ -0,0 +1,12 @@
1
+ @each $color, $value in $theme-colors {
2
+ .link-#{$color} {
3
+ color: $value;
4
+
5
+ @if $emphasized-link-hover-darken-percentage != 0 {
6
+ &:hover,
7
+ &:focus {
8
+ color: darken($value, $emphasized-link-hover-darken-percentage);
9
+ }
10
+ }
11
+ }
12
+ }
@@ -0,0 +1,31 @@
1
+ // Credit: Nicolas Gallagher and SUIT CSS.
2
+
3
+ .embed-responsive {
4
+ position: relative;
5
+ width: 100%;
6
+
7
+ &::before {
8
+ display: block;
9
+ content: "";
10
+ }
11
+
12
+ .embed-responsive-item,
13
+ iframe,
14
+ embed,
15
+ object,
16
+ video {
17
+ position: absolute;
18
+ top: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ height: 100%;
22
+ }
23
+ }
24
+
25
+ @each $key, $ratio in $embed-responsive-aspect-ratios {
26
+ .embed-responsive-#{$key} {
27
+ &::before {
28
+ padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
29
+ }
30
+ }
31
+ }
@@ -0,0 +1,30 @@
1
+ // Shorthand
2
+
3
+ .fixed-top {
4
+ position: fixed;
5
+ top: 0;
6
+ right: 0;
7
+ left: 0;
8
+ z-index: $zindex-fixed;
9
+ }
10
+
11
+ .fixed-bottom {
12
+ position: fixed;
13
+ right: 0;
14
+ bottom: 0;
15
+ left: 0;
16
+ z-index: $zindex-fixed;
17
+ }
18
+
19
+ // Responsive sticky top
20
+ @each $breakpoint in map-keys($grid-breakpoints) {
21
+ @include media-breakpoint-up($breakpoint) {
22
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23
+
24
+ .sticky#{$infix}-top {
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: $zindex-sticky;
28
+ }
29
+ }
30
+ }
@@ -0,0 +1,8 @@
1
+ //
2
+ // Screenreaders
3
+ //
4
+
5
+ .sr-only,
6
+ .sr-only-focusable:not(:focus) {
7
+ @include sr-only();
8
+ }
@@ -0,0 +1,15 @@
1
+ //
2
+ // Stretched link
3
+ //
4
+
5
+ .stretched-link {
6
+ &::#{$stretched-link-pseudo-element} {
7
+ position: absolute;
8
+ top: 0;
9
+ right: 0;
10
+ bottom: 0;
11
+ left: 0;
12
+ z-index: $stretched-link-z-index;
13
+ content: "";
14
+ }
15
+ }
@@ -0,0 +1,7 @@
1
+ //
2
+ // Text truncation
3
+ //
4
+
5
+ .text-truncate {
6
+ @include text-truncate();
7
+ }
@@ -3,10 +3,6 @@
3
3
  @include gradient-bg($background);
4
4
  border-color: $border;
5
5
 
6
- hr {
7
- border-top-color: darken($border, 5%);
8
- }
9
-
10
6
  .alert-link {
11
7
  color: darken($color, 10%);
12
8
  }
@@ -16,7 +16,10 @@
16
16
  // md
17
17
  @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18
18
  $n: index($breakpoint-names, $name);
19
- @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
19
+ @if not $n {
20
+ @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
21
+ }
22
+ @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
20
23
  }
21
24
 
22
25
  // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -28,18 +31,18 @@
28
31
  @return if($min != 0, $min, null);
29
32
  }
30
33
 
31
- // Maximum breakpoint width. Null for the largest (last) breakpoint.
32
- // The maximum value is calculated as the minimum of the next one less 0.02px
33
- // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
34
+ // Maximum breakpoint width.
35
+ // The maximum value is reduced by 0.02px to work around the limitations of
36
+ // `min-` and `max-` prefixes and viewports with fractional widths.
34
37
  // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
35
38
  // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
36
39
  // See https://bugs.webkit.org/show_bug.cgi?id=178261
37
40
  //
38
- // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
41
+ // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
39
42
  // 767.98px
40
43
  @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
41
- $next: breakpoint-next($name, $breakpoints);
42
- @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
44
+ $max: map-get($breakpoints, $name);
45
+ @return if($max and $max > 0, $max - .02, null);
43
46
  }
44
47
 
45
48
  // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -105,7 +108,7 @@
105
108
  // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
106
109
  @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
107
110
  $min: breakpoint-min($name, $breakpoints);
108
- $max: breakpoint-max($name, $breakpoints);
111
+ $max: breakpoint-max(breakpoint-next($name, $breakpoints));
109
112
 
110
113
  @if $min != null and $max != null {
111
114
  @media (min-width: $min) and (max-width: $max) {