Dialog Playground

by duarteleao

HTML

<div class="dialog-layer">
  <!-- 
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 100%;
  -->
  <div class="dialog">

    <div class="dialog-header">
      <h2 class="dialog-title">
        Dialog Playground
      </h2>
    </div>


    <!--
        flex: auto;
        min-height: 2em;
        overflow: auto;
    -->
    <div class="dialog-content vbox" 
         style="gap: 16px;">

      <!-- Sample Content -->
      
      <!-- To propagate min-heights, and preserve 
           scrolling at the various levels,
           intermediate containers must be 
           flex containers themselves and have:
             display: flex;
             flex-direction: column;
             flex: auto;
             min-height: 0;
           -->
      <div class="vbox flex-item-auto" 
           style="gap: 16px; min-height:0;">

        <div class="vbox flex-item-auto" 
             style="gap: 16px; min-height:0;">

          <div class="hbox flex-wrap" style="gap: 16px;">
            <div id="group-input1" class="label-field-group flex-item-auto">
              <div>
                <label for="input1">Enter Your First Name Here:</label>
              </div>

              <input id="input1" size="20">
            </div>

            <div id="group-input2" class="label-field-group flex-item-auto">
              <label for="input2">Enter Your Last Name Here (don't forget):</label>
              <input id="input2" size="1">
            </div>

            <div id="group-input3" class="label-field-group flex-item-auto">
              <label for="input3">Enter Your Middle Name Also, Please:</label>
              <input id="input3" size="1">
            </div>
          </div>

          <div id="sample-text-container" class="flex-item-auto">
            <p class="text-block">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...

CSS

:root {
  --dialog-padding: 16px;
  --action-button-gap: 8px;
  --text-block-max-width: 75ch;
  --action-button-min-width: 10ch;
}

html, 
body {
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
}

body {
  position: relative;
}

html, body, h2, p {
  margin: 0;
  padding: 0;
}

/* PRIMITIVES */

.vbox, .hbox {
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: stretch;
}

.vbox {
  flex-direction: column;
}

.hbox {
  flex-direction: row;
}

.vbox > * ,
.hbox > * {
  flex: none;
}

.flex-item-auto {
  flex: auto;
}

.flex-item-initial {
  flex: initial;
}

.flex-item-one-one {
  flex: 1 1;
}

.vbox > .flex-wrap,
.hbox > .flex-wrap {
  flex-wrap: wrap;
}


label {
  min-width: 0;

  /*
  Allowing labels to break would cause issues
  with multi-column label/field alignments,
  where one field's label has already broke, 
  and the another hasn't...
  overflow-wrap: break-word;
  white-space: break-spaces;
  */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  color: #414141;
  
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
}

input {
  box-sizing: border-box;
  height: calc(1.5em + 2px);
  margin: 0;
  border: 2px;
  padding: 0;
}

.text-block {
  font-size: 14px;
  line-height: 1.2em;
  margin-bottom: 1.2em;
  max-width: var(--text-block-max-width);
}

.label-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  
  /* When no more wrapping can occur (wrapping is done at normal width), 
     needed for being able to reduce beyond normal width,
     and thus text ellipsis to show, and not overflow. */
   /* min-width: 0; */
   min-inline-size: 0;
   
   /* overflow: hidden; */
}

.label-field-group > * {
  flex: none;
}

.label-field-group > div:first-child {
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

/* DIALOG */
.dialog-layer {
  display: flex;
  position: fixed;
  z-index: 1050;
  inset: 0;
  flex-direction: column;
 ...

JavaScript

[].forEach.call(document.querySelectorAll("*"), function(a) {
  //a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});