Adding basic alerts. Inline ones too.

11 years ago · 847fc1d3c4
3 changed files with 180 additions and 129 deletions
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@ -993,6 +993,30 @@ input[type="button"] {
  background-color: rgba(0, 0, 0, 0.15);
 }
 .alert {
  position: fixed;
  right: 15px;
  left: 15px;
  bottom: 65px;
  padding: 15px;
  color: #fff;
  border-radius: 3px;
  z-index: 10;
 }
 .alert-positive {
  background-color: rgba(76, 217, 100, 0.97);
 }
 .alert-negative {
  background-color: rgba(221, 82, 77, 0.97);
 }
 .alert-inline {
  position: static;
  margin: 15px;
 }
 .modal {
  position: fixed;
  top: 0;
--- a/examples/app-default/index.html
+++ b/examples/app-default/index.html
@ -18,6 +18,11 @@
  </head>
  <body>
    <!-- Alert -->
    <div class="alert alert-negative">
      <strong>This</strong> is an alert.
    </div>
    <header class="bar-nav">
      <h1 class="title">Movie finder</h1>
    </header>
@ -51,7 +56,6 @@
    </nav>
    <div class="content">
      <div class="slider">
        <ul>
          <li>
@ -154,7 +158,7 @@
          </a>
        </li>
      </ul>
    </div>
  </body>
 </html>
--- a/lib/sass/alerts.scss
+++ b/lib/sass/alerts.scss
@ -3,5 +3,28 @@
 // --------------------------------------------------
 .alert {
  position: fixed;
  right: 15px;
  left: 15px;
  bottom: $bar-tab-height + 15px;
  padding: 15px;
  color: #fff;
  border-radius: 3px;
  z-index: 10;
 }
 // Positive alert (Default color is green)
 .alert-positive {
  background-color: transparentize($positive-color, .03);
 }
 // Negative alert (Default color is red)
 .alert-negative {
  background-color: transparentize($negative-color, .03);
 }
 // Inline alert
 .alert-inline {
  position: static;
  margin: 15px;
 }