SCSS Issue Tracker

Issue found in mixins/_media-queries.scss.  It was reported to Support few years ago, maybe the ticket didn't go anywhere  :).

Code with issues

$li-breakpoints: (
  phone-min:                  '(max-width: #{$screen-xs})',
  phone:                      '(max-width: #{$screen-xs-max})',
  phone-and-smaller:          '(max-width: #{$screen-xs-max})',
  phone-and-down:             '(max-width: #{$screen-xs-max})',
  phone-only:                 '(max-width: #{$screen-xs-max})',
  phone-landscape:            '(max-width: #{$screen-xs-max}) and (orientation: landscape)',
  phone-portrait:             '(max-width: #{$screen-xs-max}) and (orientation: portrait)',
  phone-to-tablet:            '(min-width: #{$screen-xs-min}) and (max-width: #{$screen-xs-max})',
  tablet:                     '(max-width: #{$screen-sm-max})',
  tablet-and-smaller:         '(max-width: #{$screen-sm-max})',
  tablet-and-down:            '(max-width: #{$screen-sm-max})',
  tablet-only:                '(min-width: #{$screen-xs-max}) and (max-width: #{$screen-sm-max})',
  tablet-landscape:           '(min-width: #{$screen-xs-max}) and (max-width: #{$screen-sm-max}) and (orientation: landscape)',
  tablet-portrait:            '(min-width: #{$screen-xs-max}) and (max-width: #{$screen-sm-max}) and (orientation: portrait)',
  tablet-and-larger:          '(min-width: #{$screen-xs-max})',
  tablet-and-up:              '(min-width: #{$screen-xs-max})',
  tablet-and-bigger:          '(min-width: #{$screen-xs-max})',
  tablet-to-desktop:          '(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
  desktop:                    '(min-width: #{$screen-md-min})',
  desktop-and-smaller:        '(max-width: #{$screen-md-max})',
  desktop-and-down:           '(max-width: #{$screen-md-max})',
  desktop-only:               '(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
  desktop-and-larger:         '(min-width: #{$screen-md-min})',
  desktop-and-up:             '(min-width: #{$screen-md-min})',
  desktop-and-bigger:         '(min-width: #{$screen-md-min})',
  large-desktop:              '(min-width: #{$screen-lg-min})',
  large-desktop-only:         '(min-width: #{$screen-lg-min})',

  product-questions-phone-min:'(max-width: 320px)'
);

Code with fixes

$li-breakpoints: (
  phone-min:          '(max-width: #{$screen-xs})',
  phone:              '(max-width: #{$screen-xs-max})',
  phone-and-smaller:  '(max-width: #{$screen-xs-max})',
  phone-and-down:     '(max-width: #{$screen-xs-max})',
  phone-only:         '(max-width: #{$screen-xs-max})',
  phone-landscape:    '(max-width: #{$screen-xs-max}) and (orientation: landscape)',
  phone-portrait:     '(max-width: #{$screen-xs-max}) and (orientation: portrait)',
  phone-to-tablet:    '(min-width: #{$screen-xs-min}) and (max-width: #{$screen-xs-max})',
  tablet:             '(max-width: #{$screen-sm-max})',
  tablet-and-smaller: '(max-width: #{$screen-sm-max})',
  tablet-and-down:    '(max-width: #{$screen-sm-max})',
  tablet-only:        '(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
  tablet-landscape:   '(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) and (orientation: landscape)',
  tablet-portrait:    '(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) and (orientation: portrait)',
  tablet-and-larger:  '(min-width: #{$screen-sm-min})',
  tablet-and-up:      '(min-width: #{$screen-sm-min})',
  tablet-and-bigger:  '(min-width: #{$screen-sm-min})',
  tablet-to-desktop:  '(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
  desktop:            '(min-width: #{$screen-md-min})',
  desktop-and-smaller:'(max-width: #{$screen-md-max})',
  desktop-and-down:   '(max-width: #{$screen-md-max})',
  desktop-only:       '(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
  desktop-and-larger: '(min-width: #{$screen-md-min})',
  desktop-and-up:     '(min-width: #{$screen-md-min})',
  desktop-and-bigger: '(min-width: #{$screen-md-min})',
  large-desktop:      '(min-width: #{$screen-lg-min})',
  large-desktop-only: '(min-width: #{$screen-lg-min})',

  product-questions-phone-min:'(max-width: 320px)'
);

Please pass this to the engineering team. Thanks.