created generic alert component to use with the cookie message (#67)

uniplaces · Jan 11, 2017 · 6cbe952 · 6cbe952
1 parent 9029b41
commit 6cbe952
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "uniq",
-  "version": "2.0.55",
+  "version": "2.0.56",
   "description": "Internal CSS Framework/Toolkit used @ Uniplaces",
   "main": [
     "src/styles/**/*",

diff --git a/src/styles/_common/_colors.scss b/src/styles/_common/_colors.scss
@@ -100,6 +100,9 @@ $palette: (
     'second-gutter': rgba(249, 188, 99, 0.3),
     'third-bar': #9575cd,
     'third-gutter': rgba(148, 117, 205, 0.3)
+  ),
+  cookieAlert: (
+    'background': #e1e4e6
   )
 );
 

diff --git a/src/styles/_components/_alerts.scss b/src/styles/_components/_alerts.scss
@@ -69,3 +69,37 @@
     }
 }
 
+@mixin banner() {
+    position: fixed;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    padding: 15px 20px;
+    background-color: color('cookieAlert', 'background');
+    font-size: em(15px);
+    color: color('text', 'subheading');
+
+    &__wrapper {
+        @include limited-full-width();
+
+        a {
+            position: relative;
+            display: block;
+            color: color('text', 'subheading');
+            text-decoration: none;
+            border-bottom: 1px solid color('text', 'subheading');
+        }
+    }
+
+    &__button {
+        position: relative;
+        display: inline-block;
+        padding: 8px;
+        margin-left: 20px;
+        font-size: em(13px);
+        background-color: color('text', 'subheading');
+        color: color('primary', 'highlight');
+    }
+}