elzar/src/views/components/alerts.html

resmio glamourous style guide in sass mode

<h1>Messages alerts</h1>

<div class="message_container">
    <div class="alert-box--success">
      <span class="close_alert">
        <svg viewBox="0 0 100 100" class="icon close_icon">
          <use xlink:href="#symbol-close"></use>
        </svg>
      </span>
    </div>
    <ul class="alert_content">
    <li class="alert_text">
      <span class="alert_text--success">Success!!</span>
    </li>
    <li class="line_message">
      <span>You did it right!</span>
    </li>
  </ul>
</div>

<hr class="styleguide-separator"/>

<div class="message_container">
    <div class="alert-box--warning">
      <span class="close_alert">
        <svg viewBox="0 0 100 100" class="icon close_icon">
          <use xlink:href="#symbol-close"></use>
        </svg>
      </span>
    </div>
    <ul class="alert_content">
    <li class="alert_text">
      <span class="alert_text--warning">Warning!!</span>
    </li>
    <li class="line_message">
      <span>Be careful, you can't revert this action.</span>
      <br/>
      <br/>
      <button type="button" class="btn-link">Do it anyway</button>
      <button type="button" class="btn-link alert_btn">Cancel</button>
    </li>
  </ul>
</div>

<hr class="styleguide-separator"/>

<div class="message_container">
    <div class="alert-box--error">
      <span class="close_alert">
        <svg viewBox="0 0 100 100" class="icon close_icon">
          <use xlink:href="#symbol-close"></use>
        </svg>
      </span>
    </div>
    <ul class="alert_content">
    <li class="alert_text">
      <span class="alert_text--error">Error</span>
    </li>
    <li class="line_message">
      <span>Oups, something got wrong! Can you try again?</span>
    </li>
  </ul>
</div>

<hr class="styleguide-separator"/>