paneltoggle.scss

/* VARS */
$typeface: 'Helvetica', 'Ariel', sans-serif;

$hoverBoarderC: #213140;
$checkedBGC: #ef7600;
$uncheckedBGC: #EEE;
$activeShadow: 0 0 10px rgba($checkedBGC, .5);

/* MIXINS */
@mixin hideInput {width: 0; height: 0; position: absolute; left: -9999px;}

fieldset {
  margin: 1rem 0 0 0; padding: 0;
  box-sizing: border-box; display: block;
  border: none; //border: solid 1px #CCC;
  min-width: 0;
  background-color: #FFF;
}
//body:not(:-moz-handler-blocked) fieldset {display: table-cell;}

/* TOGGLE STYLING */
.toggle-panel {
  margin: 0 0 0.5rem; box-sizing: border-box;
  font-size: 0;
  display: flex; flex-flow: row nowrap;
  justify-content: flex-start; align-items: stretch;
  input {@include hideInput;}
  input + label {
    margin: 0; padding: .75rem 1rem; box-sizing: border-box;
    position: relative; display: inline-block;
    border: solid 1px #CCC; background-color: $uncheckedBGC;
    font-size: 1rem; line-height: 140%; font-weight: 600; text-align: center;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transition: 	border-color .15s ease-out,
    color .25s ease-out,
    background-color .15s ease-out,
    box-shadow .15s ease-out;

    /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
    /*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
    /* ----- */

    &:first-of-type {border-radius: 8px 0 0 8px; border-right: none;}
    &:last-of-type {border-radius: 0 8px 8px 0; border-left: none;}
  }
  input:hover + label {border-color: $hoverBoarderC;}
  input:checked + label {
    background-color: $checkedBGC;
    color: #FFF;
    box-shadow: $activeShadow;
    border-color: $checkedBGC;
    z-index: 1;
  }
}

.panel_closed{
  top: 100vh;

  //position: fixed;
}
.panel_open{
  top: 0;
  //position: relative;
}

.panel_open_shadow{
  box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

.panel_closed_shadow{
  box-shadow: inset 0 0 0px -12px rgba(0, 0, 0, 0.5);
}