diff --git a/dist/ratchet.css b/dist/ratchet.css index bac6f0f..1a6f38e 100644 --- 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; diff --git a/examples/app-default/index.html b/examples/app-default/index.html index 4b031f3..29eba22 100644 --- a/examples/app-default/index.html +++ b/examples/app-default/index.html @@ -18,143 +18,147 @@ -
-

Movie finder

-
- + +
+ This is an alert. +
+ +
+

Movie finder

+
+ - + -
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
-
-
- - -
\ No newline at end of file diff --git a/lib/sass/alerts.scss b/lib/sass/alerts.scss index 2802e69..a72debc 100644 --- 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; }