initial commit

1 files changed, 79 insertions, 0 deletions

diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
new file mode 100644
index 000000000..c30c951ee
--- /dev/null
+++ b/src/styles/info-bar.scss
@@ -0,0 +1,79 @@
+@import './config.scss';
+
+.info-bar {
+  width: 100%;
+  height: 50px;
+  background: $theme-brand-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  position: relative;
+  // bottom: 0;
+  z-index: 100;
+  box-shadow: 0 0 8px rgba(black, 0.2);
+
+  .info-bar__content {
+    height: auto;
+
+    .mdi {
+      margin-right: 5px;
+    }
+  }
+
+  .info-bar__close {
+    position: absolute;
+    right: 10px;
+    color: #FFF;
+  }
+
+  .info-bar__cta {
+    color: #FFF;
+    padding: 3px 8px;
+    border-radius: $theme-border-radius-small;
+    border-color: #FFF;
+    border-width: 2px;
+    border-style: solid;
+    margin-left: 15px;
+
+    .loader {
+      position: relative;
+      width: 20px;
+      height: 12px;
+      z-index: 9999;
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  &.info-bar--bottom {
+    order: 10;
+  }
+
+  &.info-bar--primary {
+    background: $theme-brand-primary;
+    color: #FFF;
+
+    a {
+      color: #FFF;
+    }
+  }
+
+  &.info-bar--warning {
+    background: $theme-brand-warning;
+    color: #FFF;
+
+    a {
+      color: #FFF;
+    }
+  }
+
+  &.info-bar--danger {
+    background: $theme-brand-danger;
+    color: #FFF;
+
+    a {
+      color: #FFF;
+    }
+  }
+}