HTML

Lista de cambios:

• El nombre de clase del elemento <div class="header__notifications"> cambió a <div class="header__buttons">
• El elemento <div class="header__user"> junto con <div class="header__buttons"> pasan a estar dentro del nuevo elemento <div class="header__options">

Estructura base:

              <kp-header v-cloak>
                <div class="header__logo" slot="logo">
                  . . .
                </div>
                <div class="header__dropdown-business" slot="dropdown-business">
                  . . .
                </div>
                <kp-menu slot="menu" v-cloak>
                  . . .
                </kp-menu>
                <menu-search slot="search">
                  . . .
                </menu-search>
                <!-- ↓↓↓ Cambio a partir de aquí ↓↓↓ -->
                <div class="header__options" slot="options">
                  <div class="header__buttons">
                    . . .
                  </div>
                  <div class="header__user">
                    . . .
                  </div>
                </div> 
              </kp-header>
            

Otros cambios:

• Componente <dropdown-notification> (usado dentro de <div class="header__buttons">)
  • La cabecera de contenido fue sacada del elemento <ul>, quedando en la parte superior de la misma.
  • El elemento <span class="notification__status"></span> fue eliminado en preferencia del diseño que utilizan actualmente en producción (los elementos span con clase "badge-").
  • Se agregó un prop con el que se puede controlar el tamaño máximo en el que se puede expandir el dropdown: max-content-height="[tamaño en píxels. ej.: 300px]" (si no se declara, por defecto el tamaño máximo es 200 píxels).

                  <!-- Ahora -->
                  <dropdown-notification max-content-height="300px" v-cloak>
                    <div slot="fa-icon">
                      <i class="fa fa-bell" aria-hidden="true"></i>
                      <span class="badge-success">2</span>
                    </div>
                    <div slot="content">
                      <div class="notification__name bg-primary">Notificaciones</div>
                      <ul>
                        <li>. . .</li>
                      </ul>
                    </div>
                  </dropdown-notification>
                

                <!-- Antes -->
                  <dropdown-notification v-cloak>
                    <div slot="fa-icon">
                      <i class="fa fa-bell" aria-hidden="true"></i>
                      <span class="notification__status"></span>
                    </div>
                    <div slot="content">
                      <ul>
                        <div class="notification__name">Notificaciones</div>
                        <li>. . .</li>
                      </ul>
                    </div>
                  </dropdown-notification>
                

Configuración

Variable SASS

• $min-actionable-bottom-toolbar-value: Determina el ancho mínimo en que aparecerá el toolbar inferior. Valor por defecto: 576px. Para desactivar el toolbar inferior, establecer el valor en: 1px.