January 6, 2021

SBXCA Accessibility

• looking closer at Modals
• only other issue on public pages is the forgot password modal. This is just a bad pattern as its a modal launched from an existing modal, so there's no way to return focus back to the original modal w/o forcing the original one to open again. It does return focus to the original initiator, so maybe it's ok.
• I'm going to make a list of signed-in modals to keep in case we need it later.

JMS JF Campaign Pages

• Getting set up

BSH Student page

• modal issues with 700px or less height in the viewport
• some wacky math, but I'm happy with it.

.modal {
  position: relative;
  top: unquote("min(calc(50vh - 23vw), calc(50vh - (23vh/0.5625)))");
  padding: 1.75em;
  background-color: white;
  max-width: unquote("min(92vw, 92vh/0.5625)");
  margin: auto auto;
}

"Unquote" is to deal with the fact Sass also has min() and max() functions built in that conflict with CSSs.

... nevermind, not quite working.

Didn't actually need that top, centered with flexbox...

.modal-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba($llgray, 0.8);
  z-index: map-get($z, top);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  position: relative;
  padding: 1.75em;
  background-color: white;
  width: unquote("min(92vw, 92vh/0.5625)");
  margin: auto auto;
}