Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 343 insertions, 0 deletions

diff --git a/web/sass-files/sass/routes/_admin-console.scss b/web/sass-files/sass/routes/_admin-console.scss
new file mode 100644
index 000000000..f83ce487e
--- /dev/null
+++ b/web/sass-files/sass/routes/_admin-console.scss
@@ -0,0 +1,343 @@
+@charset 'UTF-8';
+
+.admin-controller {
+    > div {
+        height: 100%;
+    }
+
+    .inner-wrap {
+        position: absolute;
+        width: 100%;
+    }
+
+    .row {
+        margin: 0;
+    }
+
+    h3 {
+        font-weight: 600;
+        border-bottom: 1px solid #ddd;
+        padding-bottom: .5em;
+        margin: 1em 0;
+    }
+
+    .table {
+        background: #fff;
+    }
+
+    .form-control {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        color: #555;
+
+        &:focus {
+            border-color: #66afe9;
+            outline: 0;
+            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+        }
+    }
+
+    .btn {
+        color: #333;
+
+        &.btn-primary {
+            background: #2389d7;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background: #1c6dab;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        background: #fff;
+        border: 1px solid rgba(0,0,0,.15);
+        color: inherit;
+    }
+
+    .sidebar--left {
+        &.sidebar--collapsable {
+            background: #333;
+
+            .team__header {
+                background: transparent;
+                margin-bottom: 5px;
+            }
+
+            .nav {
+                li {
+                    padding: 0;
+                    @include opacity(1);
+
+                    .icon {
+                        width: 17px;
+                    }
+
+                    > a {
+                        &:hover,
+                        &.active,
+                        &:focus {
+                            background-color: #eaeaea;
+                        }
+                    }
+
+                    > h4 {
+                        background: #333;
+                        padding: 10px 10px;
+                        margin: 1px 0 0;
+
+                        .menu-icon--right {
+                            top: 6px;
+                            right: 12px;
+                        }
+                    }
+                }
+
+                .menu-icon--right {
+                    position: absolute;
+                    right: 10px;
+                    top: 3px;
+                    font-size: 18px;
+                    font-weight: 600;
+                    width: 20px;
+                    height: 20px;
+                    line-height: 20px;
+                    text-align: center;
+
+                    .fa {
+                        font-size: 13px;
+                        right: -2px;
+                        position: relative;
+                        color: #fff;
+                    }
+                }
+
+                &.nav__sub-menu {
+                    background: #111;
+                    -webkit-font-smoothing: auto;
+
+                    &.padded {
+                        padding: 5px 0;
+                    }
+
+                    li {
+                        > a {
+                            font-size: 13px;
+                            padding: 5px 35px 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+
+                            &:hover {
+                                color: lighten($color--primary, 10);
+                            }
+
+                            &.active {
+                                color: #fff;
+                                font-weight: 600;
+                            }
+                        }
+
+                        .nav-more {
+                            font-size: 13px;
+                            padding: 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+                            display: block;
+                            cursor: pointer;
+                            &:hover {
+                                color: lighten($color--primary, 10);
+                            }
+                        }
+                    }
+                }
+
+                &.nav__inner-menu {
+                    li {
+                        > a {
+                            padding-left: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .log__panel {
+        overflow: scroll;
+        width: 100%;
+        height: 800px;
+        border: 1px solid #ddd;
+        margin-top: 10px;
+        padding: 5px;
+        background-color: white;
+    }
+
+    .app__content {
+        color: #333;
+
+        &.admin {
+            overflow: auto;
+            background-color: #f1f1f1;
+            padding: 0 20px 20px;
+            min-height: 600px;
+        }
+
+        .wrapper--fixed {
+            max-width: 800px;
+        }
+
+        .form-horizontal {
+            margin-top: 40px;
+
+            .control-label {
+                text-align: left;
+                padding-right: 0;
+                font-weight: 600;
+            }
+
+            .form-group {
+                margin-bottom: 25px;
+            }
+
+            .file__upload {
+                position: relative;
+                margin: 0 10px 10px 0;
+                display: inline-block;
+
+                input {
+                    position: absolute;
+                    @include opacity(0);
+                    width: 100%;
+                    height: 100%;
+                    z-index: 5;
+                    top: 0;
+                    left: 0;
+                }
+            }
+
+            .help-text {
+                &.no-margin {
+                    margin: 0;
+                }
+
+                ul,
+                ol {
+                    padding-left: 23px;
+                }
+
+                margin: 10px 0 0 15px;
+                color: #777;
+
+                .help-link {
+                    margin-right: 5px;
+                }
+
+                .btn {
+                    font-size: 13px;
+                }
+            }
+
+            .alert {
+                display: inline-block;
+                padding: 5px 7px;
+                margin: 1em 0 0;
+                top: 1px;
+                position: relative;
+
+                .fa {
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        .banner {
+            background: #fff;
+            border: 1px solid #ddd;
+            padding: .7em 1.5em;
+            font-size: .95em;
+            margin: 2em 0;
+
+            .banner__heading {
+                font-size: 1.5em;
+            }
+
+            .banner__content {
+                width: 80%;
+            }
+
+            &.warning {
+                background: #e60000;
+            }
+        }
+
+        .popover {
+            border-radius: 3px;
+            width: 100%;
+            font-size: .95em;
+        }
+
+        .panel {
+            border: none;
+            background-color: transparent;
+        }
+
+        .panel-default {
+            > .panel-heading {
+                padding: 10px 0;
+                background-color: transparent;
+            }
+
+            .panel-body {
+                padding: 30px 0 10px;
+            }
+        }
+
+        .panel-group {
+            margin-bottom: 50px;
+        }
+
+        .panel-title {
+            font-size: 24px;
+            line-height: 1.5;
+
+            a {
+                text-decoration: none;
+                display: block;
+                @include clearfix;
+
+                &.collapsed {
+                    .fa-minus {
+                        display: none;
+                    }
+
+                    .fa-plus {
+                        display: inline-block;
+                    }
+                }
+
+                .fa {
+                    font-size: 18px;
+                    float: right;
+                    margin-top: 8px;
+                    color: #aaa;
+                }
+
+                .fa-plus {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .member-list-holder {
+        .member-role,
+        .member-drop {
+            position: absolute;
+            right: 15px;
+            top: 8px;
+        }
+    }
+}