Contents

// *******************************************************************
// Width
// Variables for setting the width of an element
// width: $w-p-1-2;
// *******************************************************************
$w-p-1-2:   50%;
$w-p-1-3:   33.333333%;
$w-p-2-3:   66.666667%;
$w-p-1-4:   25%;
$w-p-2-4:   50%;
$w-p-3-4:   75%;
$w-p-1-5:   20%;
$w-p-2-5:   40%;
$w-p-3-5:   60%;
$w-p-4-5:   80%;
$w-p-1-6:   16.666667%;
$w-p-2-6:   33.333333%;
$w-p-3-6:   50%;
$w-p-4-6:   66.666667%;
$w-p-5-6:   83.333333%;
$w-p-1-12:  8.333333%;
$w-p-2-12:  16.666667%;
$w-p-3-12:  25%;
$w-p-4-12:  33.333333%;
$w-p-5-12:  41.666667%;
$w-p-6-12:  50%;
$w-p-7-12:  58.333333%;
$w-p-8-12:  66.666667%;
$w-p-9-12:  75%;
$w-p-10-12: 83.333333%;
$w-p-11-12: 91.666667%;
$w-full:    100%;
$w-screen:  100vw;
$w-min:     min-content;
$w-max:     max-content;
$w-fit:     fit-content;

// *******************************************************************
// Min-Width
// Variables for setting the minimum width of an element
// min-width: $min-w-0;
// *******************************************************************
$min-w-0:    0px;
$min-w-full: 100%;
$min-w-min:  min-content;
$min-w-max:  max-content;
$min-w-fit:  fit-content;

// *******************************************************************
// Max-Width
// Variables for setting the maximum width of an element
// max-width: $max-w-xs;
// *******************************************************************
$max-w-none: none;
$max-w-0:    0rem;
$max-w-xs:   20rem;
$max-w-sm:   24rem;
$max-w-md:   28rem;
$max-w-lg:   32rem;
$max-w-xl:   36rem;
$max-w-2xl:  42rem;
$max-w-3xl:  48rem;
$max-w-4xl:  56rem;
$max-w-5xl:  64rem;
$max-w-6xl:  72rem;
$max-w-7xl:  80rem;
$max-w-full: 100%;
$max-w-min:  min-content;
$max-w-max:  max-content;
$max-w-fit:  fit-content;

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
sass-zero-0.0.48	app/assets/stylesheets/sass-zero/variables/width.scss