Contents

@for $i from 1 through 100 {
    .col-#{$i * 5}-px               { flex: 0 0 #{$i * 5 +"px"}; max-width: #{$i * 5 + "px"}; }
    .col-#{$i}-p                { flex: 0 0 #{$i+"%"}; max-width: #{$i + "%"}; }
    .width-#{$i}-p              { width: #{$i + "%"}; max-width: #{$i + "%"}; }
    .width-#{$i * 5}-px         { width: #{$i * 5 + "px"}; }
    .max-width-#{$i * 5}-px     { max-width: #{$i * 5 + "px"}; }
    .max-width-#{$i}-p          { max-width: #{$i + "%"}; }
    .height-#{$i * 5}-px        { height: #{$i * 5 + "px"}; }
    .height-#{$i * 5}-p        { height: #{$i * 5 + "%"}; }
    .max-height-#{$i * 5}-px    { max-height: #{$i * 5 + "px"}; }
}
@for $i from 1 through 20 {
    .width-#{$i * 5}-vw     { width: #{$i * 5 +"vw"}; }
    .height-#{$i * 5}-vh    { height: #{$i * 5 +"vh"}; }
    .min-height-#{$i * 5}-vh { min-height: #{$i * 5 +"vh"}; }
}

@each $name, $size in ('sm', $sm) ('md', $md) ('lg', $lg) ('xl', $xl) {
    @include media($size){
        @for $i from 1 through 100 {
            .col-#{$i * 5}-px-#{$name}      { flex: 0 0 #{$i * 5 +"px"}; max-width: #{$i * 5 + "px"}; }
            .col-#{$i}-p-#{$name}           { flex: 0 0 #{$i+"%"}; max-width: #{$i + "%"}; }
            .width-#{$i}-p-#{$name}         { width: #{$i + "%"}; max-width: #{$i + "%"}; }
            .width-#{$i * 5}-px-#{$name}    { width: #{$i * 5 + "px"}; }
        }
        @for $i from 1 through 20 {
            .height-#{$i * 5}-vh-#{$name}       { height: #{$i * 5 +"vh"}; }
            .min-height-#{$i * 5}-vh-#{$name}   { min-height: #{$i * 5 +"vh"}; }
        }
    }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
uniform-ui-1.0	vendor/assets/stylesheets/uniform/helpers/sizes.scss