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;
 }