[Match width] #scss

match-width.md

Match width

This generated a lot of CSS, so in the end i went with a JavaScript solution.

x-match-width.scss

    // lock search overlay width to primary nav width:
    // this adds 6kb of compressed CSS ;-)
    // this could be reduced with some sort of accuracy control
    $l-form-search-bp-start: 856px;
    $l-form-search-bp-end: 946px;
    $l-form-search-bp-range: ($l-form-search-bp-end - $l-form-search-bp-start) / 1px; // removes unit
    $l-form-search-bp-step: 1px;

    $max-calc-offset-chrome: 0px; // working
    $max-calc-offset-safari: 0px; // 16px; // NOT working, see below
    $max-calc-offset-firefox: 0px; // working

    @for $i from 1 through $l-form-search-bp-range {
        @include at-breakpoint( em( $l-form-search-bp-start + ($i * $l-form-search-bp-step) ) 12 ) {

            $max_calc: (629px + ($i * ($l-form-search-bp-step - 0.065px) ) );

            max-width: $max_calc + $max-calc-offset-chrome;

            margin-top: 30px; // TEST

            .firefox & { // ok

                @if ($max_calc/1px) == 723 {
                    $max_calc: 723px;
                    max-width: $max_calc + $max-calc-offset-firefox; // or may just be $max_calc??
                }
            }

            .safari & {

                @if ($max_calc/1px) == 723 {
                    $max_calc: 723px;
                    max-width: $max_calc + $max-calc-offset-firefox; // or may just be $max_calc??
                }

                // limit max width to 697
                @if ($max_calc/1px) < 698 {
                    max-width: $max_calc + $max-calc-offset-safari;
                }
            }
        }
    }