project/4-project/submission/2 Boundless/public/assets/src/scss/_width_height.scss
// Width & Height


/*******************
Width property 
*******************/

$width-property-map: ( w-: width, min-w-: min-width, max-w-: max-width);
$sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
@each $size in $sizes-list {
    $val: $size + 0px !important;
    @each $keyword,
    $property in $width-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$width-property-per-map: ( w-p: width, min-w-p: min-width, max-w-p: max-width);
$sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95;
@each $size in $sizes-list {
    $val: $size + 0%;
    @each $keyword,
    $property in $width-property-per-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}
$width-property-per-map: ( w-p: width, min-w-p: min-width, max-w-p: max-width);
$sizes-list: 100;
@each $size in $sizes-list {
    $val: $size + 0% !important;
    @each $keyword,
    $property in $width-property-per-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$width-auto-property-map: ( w-: width, min-w-: min-width, max-w-: max-width);
$sizes-list: auto;
@each $size in $sizes-list {
    $val: $size;
    @each $keyword,
    $property in $width-auto-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

@include screen-xs {
    $width-property-map: ( w-xs-: width, min-w-xs-: min-width, max-w-xs-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-xs-p: width, min-w-xs-p: min-width, max-w-xs-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-xs-: width, min-w-xs-: min-width, max-w-xs-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-sm {
    $width-property-map: ( w-sm-: width, min-w-sm-: min-width, max-w-sm-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-sm-p: width, min-w-sm-p: min-width, max-w-sm-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-sm-: width, min-w-sm-: min-width, max-w-sm-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-md {
    $width-property-map: ( w-md-: width, min-w-md-: min-width, max-w-md-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-md-p: width, min-w-md-p: min-width, max-w-md-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-md-: width, min-w-md-: min-width, max-w-md-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-lg {
    $width-property-map: ( w-lg-: width, min-w-lg-: min-width, max-w-lg-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-lg-p: width, min-w-lg-p: min-width, max-w-lg-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-lg-: width, min-w-lg-: min-width, max-w-lg-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-xl {
    $width-property-map: ( w-xl-: width, min-w-xl-: min-width, max-w-xl-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-xl-p: width, min-w-xl-p: min-width, max-w-xl-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-xl-: width, min-w-xl-: min-width, max-w-xl-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}


/*******************
Height property 
*******************/

$height-property-map: ( h-: height, min-h-: min-height, max-h-: max-height);
$sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
@each $size in $sizes-list {
    $val: $size + 0px !important;
    @each $keyword,
    $property in $height-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$height-property-per-map: ( h-p: height, min-h-p: min-height, max-h-p: max-height);
$sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
@each $size in $sizes-list {
    $val: $size + 0% !important;
    @each $keyword,
    $property in $height-property-per-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$height-auto-property-map: ( h-: height, min-h-: min-height, max-h-: max-height);
$sizes-list: auto;
@each $size in $sizes-list {
    $val: $size !important;
    @each $keyword,
    $property in $height-auto-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

@include screen-xs {
    $height-property-map: ( h-xs-: height, min-h-xs-: min-height, max-h-xs-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-xs-p: height, min-h-xs-p: min-height, max-h-xs-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-xs-: height, min-h-xs-: min-height, max-h-xs-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-sm {
    $height-property-map: ( h-sm-: height, min-h-sm-: min-height, max-h-sm-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-sm-p: height, min-h-sm-p: min-height, max-h-sm-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-sm-: height, min-h-sm-: min-height, max-h-sm-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-md {
    
    $height-property-map: ( h-md-: height, min-h-md-: min-height, max-h-md-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-md-p: height, min-h-md-p: min-height, max-h-md-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-md-: height, min-h-md-: min-height, max-h-md-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-lg {
    $height-property-map: ( h-lg-: height, min-h-lg-: min-height, max-h-lg-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-lg-p: height, min-h-lg-p: min-height, max-h-lg-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-lg-: height, min-h-lg-: min-height, max-h-lg-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-xl {
    $height-property-map: ( h-xl-: height, min-h-xl-: min-height, max-h-xl-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-xl-p: height, min-h-xl-p: min-height, max-h-xl-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-xl-: height, min-h-xl-: min-height, max-h-xl-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}