Integrate status-page.scss into the main.scss

2014-12-13 12:29:26 +00:00
parent 7385a93df3
commit 2fb76b4290
5 changed files with 218 additions and 1 deletions
--- a/app/assets/sass/_status-page.scss
+++ b/app/assets/sass/_status-page.scss
@@ -0,0 +1,152 @@
+body {
+    color: #333333;
+    font-size: 1.4em;
+    font-weight: 300;
+}
+
+hr {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.text-success, .text-component-1 {
+    color: #4cae4c;
+}
+
+.text-info, .text-component-2 {
+    color: #46b8da;
+}
+
+.text-alert, .text-component-3 {
+    color: #F9BF3B;
+}
+
+.text-danger, .text-component-4 {
+    color: #D91E18;
+}
+
+.container {
+    max-width: 960px;
+}
+
+.page-header {
+    margin-top: 10px;
+}
+
+.alert {
+    margin-top: 20px;
+    border-radius: 0;
+    font-size: 1.2em;
+    &.alert-success {
+        background-color: #8DCD8D;
+        border-color: #4cae4c;
+        color: white;
+    }
+
+    &.alert-info {
+        background: #8CD3E8;
+        border-color: #46b8da;
+        color: #FFF;
+    }
+
+    &.alert-danger {
+        background: #D91E18;
+        border-color: #CF000F;
+        color: #FFF;
+    }
+}
+
+.badge {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
+    &.badge-incident-1 {
+        background-color: #F27935;
+    }
+    &.badge-incident-2 {
+        background-color: #F9BF3B;
+    }
+    &.badge-incident-3 {
+        background-color: #46b8da;
+    }
+    &.badge-incident-4 {
+        background-color: #4cae4c;
+    }
+}
+
+.list-group {
+    margin-bottom: 20px;
+    padding-left: 0;
+    border-radius: 0;
+
+    .list-group-item {
+        border-radius: 0;
+        background-color: #ffffff;
+        border: 1px solid #BDC3C7;
+        font-size: 1.1em;
+
+        span.badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            border-radius: 0;
+            display: block;
+        }
+
+        i.glyphicon {
+            font-size: 1.4em;
+        }
+
+        h1, h2, h3, h4 {
+            margin-bottom: 2px;
+        }
+
+        h4 {
+            font-weight: 400;
+            max-width: 90%;
+        }
+
+        p, time {
+            margin-bottom: 0;
+            line-height: 1.3em;
+        }
+
+        time {
+            color: #6C7A89;
+            // letter-spacing: 0.02em;
+            font-weight: 300;
+            font-size: 1.1em;
+        }
+
+        &.active {
+            background-color: #F2F1EF;
+            h3 {
+                color: #22313F;
+                padding-top: 6px;
+                padding-bottom: 6px;
+                font-weight: 300;
+                font-size: 1.6em;
+            }
+
+            &:hover {
+                color: inherit;
+                border-color: #BDC3C7;
+            }
+        }
+    }
+
+    &.components {
+        margin-bottom: 30px;
+        p {
+            margin-bottom: 10px;
+        }
+        .badge {
+            color: transparent;
+        }
+    }
+}