Contrib.social

Port IU Framework campus alert (IU Notice) to Rivet Alert

Open on Drupal.org →
Created on 20 November 2023, 7 months ago

Problem/Motivation

Out of the box the Rivet Alert style doesn't lend itself well being mapped for usage to the IU Framework Campus Alert (IU Notice) style.

I've put together several proposals on Codepen:

  5. Full-bleed Campus Alert (no border) + Header

Proposed resolution

Option 5 Full-bleed Campus Alert (no border) + Header is the way.

To get the full-bleed effect, we must alter the Rivet Alert styles to remove the left-border and adjust padding via an additional left/right padding none class rvt-p-lr-none.

<div class="rvt-alert rvt-alert--info [ rvt-text-regular rvt-border-left-none rvt-p-lr-none ]" role="alert" aria-labelledby="information-alert-title" data-rvt-alert="info">
  <div class="rvt-container-xl">
    <div class="rvt-alert__title" id="information-alert-title">Scheduled System Maintenance</div>
    <p class="rvt-alert__message">This system will be unavailable on August 1st due to scheduled system maintenance. Please check back on August 2nd.</p>
    <button class="rvt-alert__dismiss" data-rvt-alert-close>
      <span class="rvt-sr-only">Dismiss this alert</span>
      <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16">
        <path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path>
      </svg>
    </button>
  </div>
</div>

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024