Menu icon Foundation
Different sized left/right off-canvas

Foundation 6.3.0-rc2

The off-canvas container use the $offcanvas-size and $offcanvas-vertical-size scss variables to control its size which means that both left and right off-canvas have the same width and both top and bottom ones have the same height. This is quite inconvenient when you want different sizes since these variables get used in several places in the off-canvas-position mixin forcing us to use ugly css overrides.

It seems to me that it would be trivial to split the variables into $off-canvas-(left|right|top|bottom)-size (you can make them default to the current ones for backwards compatibility) and use them in the off-canvas-position mixin as follows:

/* in _settings.scss */
$offcanvas-size: 250px;
$offcanvas-left-size = $offcanvas-size;
$offcanvas-right-size = $offcanvas-size;
$offcanvas-vertical-size = 250px;
$offcanvas-top-size = $offcanvas-vertical-size;
$offcanvas-bottom-size = $offcanvas-vertical-size;


/* in _off-canvas.scss */
@mixin off-canvas-position(
  $position: left,
  $orientation: horizontal,
  $size: if($orientation == horizontal, 
    if($position == left, $offcanvas-left-size, $offcanvas-right-size),
    if($position == top, $offcanvas-top-size, $offcanvas-botom-size))
) {
:
}

 

 

sitesoff-canvasscss

Foundation 6.3.0-rc2

The off-canvas container use the $offcanvas-size and $offcanvas-vertical-size scss variables to control its size which means that both left and right off-canvas have the same width and both top and bottom ones have the same height. This is quite inconvenient when you want different sizes since these variables get used in several places in the off-canvas-position mixin forcing us to use ugly css overrides.

It seems to me that it would be trivial to split the variables into $off-canvas-(left|right|top|bottom)-size (you can make them default to the current ones for backwards compatibility) and use them in the off-canvas-position mixin as follows:

/* in _settings.scss */
$offcanvas-size: 250px;
$offcanvas-left-size = $offcanvas-size;
$offcanvas-right-size = $offcanvas-size;
$offcanvas-vertical-size = 250px;
$offcanvas-top-size = $offcanvas-vertical-size;
$offcanvas-bottom-size = $offcanvas-vertical-size;


/* in _off-canvas.scss */
@mixin off-canvas-position(
  $position: left,
  $orientation: horizontal,
  $size: if($orientation == horizontal, 
    if($position == left, $offcanvas-left-size, $offcanvas-right-size),
    if($position == top, $offcanvas-top-size, $offcanvas-botom-size))
) {
:
}