groups and hs

by jpeter06

HTML

<div class="gtred_page">
  <div class="titulo">
    Titulo (class:titulo)
  </div>

  <div class="g1">
    <h1>
      Grupo1 (class:h1)
    </h1>
    <div class="g2">
      <span class="h2">Filtro(class:h2)</span>
      <div class="form-filter">
        <div class="form-col">
          <div class="inputlabel">
            <label class="label">label1</label>
            <input type="text" value="xxx">
          </div>
          <div class="inputlabel">
            <label class="label">label2</label>
            <input type="text" value="xxx">
          </div>
        </div>
        <div class="form-col">
          <div class="inputlabel">
            <label class="label">label1</label>
            <input type="text" value="xxx">
          </div>
          <div class="inputlabel">
            <label class="label">label2</label>
            <input type="text" value="xxx">
          </div>
        </div>
        <div class="form-col">
          <div class="inputlabel">
            <label class="label">label1</label>
            <input type="text" value="xxx">
          </div>
          <div class="inputlabel">
            <label class="label">label2</label>
            <label class="label">value</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="g1">
    <h1>
      Grupo2 (class:h1)
    </h1>
    <div class="g2">
      <span class="h2">Filtro(class:h2)</span>
      <div class="form-filter">
        <div class="form-col">
          <div class="inputlabel">
            <label class="label">label1</label>
            <label class="label">value</label>
          </div>
          <div class="inputlabel">
            <label class="label">label2</label>
            <label class="label">value</label>
          </div>
        </div>
        <div class="form-col">
          <div class="inputlabel">
            <label class="label">label1</label>
            <label class="label">value</label>
          </div>
          <div...

SCSS

html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  overflow-y:auto;
  font-family: sans-serif;
}

  
.gtred_page {
    /** PAGINA **/
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;

  /** GRUPOS **/
  .g1 {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .g1>*:first-child, .h1 {
    font-size: 1.4rem;
    color: red;
  }

  .g2 {
    padding: 0.5rem;
    box-shadow: 1px 1px 3px #aaa;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .g2>*:first-child , .h2 {
    font-size: 1.2rem;
    color: #666;
  }

  .g3 {
    padding: 0.5rem;
    box-shadow: 1px 1px 3px #aaa;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .g3>*:first-child , .h3 {
    font-size: 1rem;
    color: #333;
  }
  
  /** PAGINA **/
  .titulo {
    font-size: 1.7rem;
    color: orange
  }

  /** FORM **/
  .form-filter {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .form-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 10rem;
  }

  .inputlabel {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .label {
    color: turquoise;
  }

  /** INFO **/
  .info {
    color: orange;
    background:#eee;
    padding:0.5rem;
  }
}

JavaScript

document.body.classList.add('newStyle')