Exemplo GPS

by Rodrigo Portillo

HTML

<div class="modal alert warning">
  <div class="modal-header">
    <h2 class="modal-title">Atenção</h2>
  </div>
  <div class="modal-body">
    <p class="modal-text">Algo inesperado aconteceu!</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-ok">OK</button>
  </div>
</div>

CSS

.modal {
  background: white;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  &.alert {
    border: 1px solid #f5a623;

    &.warning {
      border-color: red;
    }
  }

  &-header {
    padding: 1rem;
    background-color: #fef3c7;

    h2.modal-title {
      margin: 0;
      font-weight: bold;
    }
  }

  &-body {
    padding: 1rem;

    .modal-text {
      color: #333;
    }
  }

  &-footer {
    padding: 1rem;
    text-align: right;

    .btn {
      padding: 0.5rem 1rem;
      font-weight: 600;
      border: none;

      &.btn-ok {
        background-color: green;
        color: white;
      }
    }
  }
}