Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 440 insertions, 0 deletions

diff --git a/web/sass-files/sass/routes/_signup.scss b/web/sass-files/sass/routes/_signup.scss
new file mode 100644
index 000000000..53c59c222
--- /dev/null
+++ b/web/sass-files/sass/routes/_signup.scss
@@ -0,0 +1,440 @@
+@charset 'UTF-8';
+
+.signup-header {
+    width: 100%;
+    line-height: 33px;
+    padding: 0 1em .2em;
+    background: $bg--gray;
+
+    .fa {
+        margin-right: 5px;
+    }
+}
+.signup-team__container {
+    padding: 100px 0px 50px 0px;
+    max-width: 380px;
+    margin: 0 auto;
+    position: relative;
+
+    &.padding--less {
+        padding-top: 50px;
+    }
+
+    .form-control:focus {
+        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6));
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+        line-height: 1.3;
+    }
+
+    h1 {
+        font-weight: 600;
+    }
+
+    h2 {
+        font-weight: 600;
+        margin-bottom: .8em;
+        letter-spacing: -.5px;
+        font-size: em(30px);
+    }
+
+    h3 {
+        font-weight: 600;
+        margin: 0 0 1.3em 0;
+        font-size: 1.5em;
+    }
+
+    h4 {
+        font-size: em(20px);
+        font-weight: 600;
+        margin-bottom: 1em;
+    }
+
+    h5 {
+        font-size: em(16px);
+    }
+
+    hr {
+        margin: 2em 0;
+    }
+
+    p {
+        color: #555;
+        line-height: 1.5;
+        margin-bottom: 1em;
+    }
+
+    .input-group {
+        &.input-group--limit {
+            table-layout: fixed;
+            width: 100%;
+
+            .tooltip-inner {
+                word-wrap: break-word;
+            }
+
+            .form-control {
+                text-align: left;
+                display: table-cell;
+                width: 100%;
+            }
+
+            .input-group-addon {
+                text-align: left;
+                width: 50%;
+                display: table-cell;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    .inner__content {
+        padding: 0 1rem;
+        margin: 30px 0 20px;
+    }
+
+    .block--gray {
+        background: #f2f2f2;
+        display: inline-block;
+        padding: .85em 1.2em;
+        font-weight: 600;
+        @include border-radius(3px);
+    }
+
+    form {
+        margin-bottom: .8em;
+    }
+
+    .signup-team-confirm__container {
+        padding: 100px 0px 100px 0px;
+    }
+
+    .signup-team-logo {
+        display: none;
+        width: 210px;
+        margin: 0 0 2em 0;
+    }
+
+    .signup-team-login {
+        padding-bottom: 10px;
+        font-weight: 600;
+    }
+
+    .signup-team__name {
+        margin: .5em 0 0;
+        font-size: 2.2em;
+        font-weight: 600;
+        padding-left: 1rem;
+    }
+
+    .signup-team__subdomain {
+        margin: .2em 0 1.2em;
+        font-size: 1.5em;
+        padding-left: 1rem;
+        font-weight: 300;
+        text-transform: uppercase;
+    }
+
+    .form-control {
+        height: em(38px);
+    }
+
+    .or__container {
+        height: 1px;
+        background: #ddd;
+        text-align: left;
+        margin: 2em 0;
+
+        span {
+            width: 40px;
+            top: -10px;
+            position: relative;
+            font-size: 1.14286em;
+            line-height: 20px;
+            font-weight: 600;
+            background: #fff;
+            display: inline-block;
+            text-align: center;
+        }
+    }
+
+    ul {
+        margin-bottom: 0;
+        padding-left: 18px;
+    }
+
+    .signup__email-container {
+        margin-left: 1rem;
+    }
+
+    .btn {
+        font-size: 1em;
+        padding: em(7px) em(15px);
+        font-weight: 600;
+        margin-right: 5px;
+
+        .fa {
+            font-size: 17px;
+            margin-right: 8px;
+        }
+
+        .icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            @include background-size(100% 100%);
+            display: inline-block;
+        }
+
+        &.btn-custom-login {
+            display: block;
+            min-width: 200px;
+            width: 200px;
+            padding: 0 1em;
+            margin: 1em 1rem;
+            height: 40px;
+            line-height: 34px;
+            color: #fff;
+            @include border-radius(2px);
+
+            &.gitlab {
+                background: #548;
+
+                &:hover {
+                    background: darken(#548, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+
+                .icon {
+                    background-image: url('../images/gitlabLogo.png');
+                }
+            }
+
+            &.google {
+                background: #dd4b39;
+
+                &:hover {
+                    background: darken(#dd4b39, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+
+                .icon {
+                    background-image: url('../images/googleLogo.png');
+                }
+            }
+
+            &.ldap {
+                background: #dd4b39;
+
+                &:hover {
+                    background: darken(#dd4b39, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+            }
+
+            &.email {
+                background: #2389d7;
+
+                &:hover {
+                    background: darken(#2389d7, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+            }
+
+            &.btn-full {
+                width: 100%;
+                text-align: left;
+                padding-left: 35px;
+            }
+        }
+
+        &.btn-default {
+            color: #444;
+        }
+
+        .glyphicon {
+            &.glyphicon-ok,
+            &.glyphicon-refresh {
+                margin-right: .5em;
+                left: -2px;
+                font-size: .9em;
+            }
+
+            &.glyphicon-chevron-right {
+                font-size: .8em;
+                right: -2px;
+                top: 0px;
+            }
+
+            &.glyphicon-chevron-left {
+                font-size: .8em;
+                left: -2px;
+                top: 0px;
+            }
+        }
+    }
+
+    .has-error {
+        .control-label {
+            background: #f2f2f2;
+            padding: .7em 1em;
+            @include border-radius(3px);
+            margin: 1em 0 0;
+            font-size: 14px;
+            font-weight: normal;
+            color: #999;
+            width: 100%;
+
+            &:before {
+                @extend .fa;
+                content: '\f071';
+                margin-right: 4px;
+                color: #aaa;
+            }
+        }
+    }
+
+    .reset-form {
+        @include border-radius(3px);
+        position: relative;
+        font-size: .95em;
+        p {
+            color: inherit;
+        }
+    }
+
+    // Modifier Styles
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        &.margin--top-none {
+            margin-top: 0;
+        }
+
+        &.margin--bottom-none {
+            margin-bottom: 0;
+        }
+
+        &.margin--less {
+            margin-bottom: .3em;
+        }
+
+        &.sub-heading {
+            font-weight: 400;
+            margin-bottom: 0;
+        }
+
+        &.color--light {
+            font-weight: 300;
+        }
+    }
+
+    p {
+        &.margin--extra {
+            margin-bottom: 1.5em;
+        }
+
+        &.margin--less {
+            margin-bottom: .3em;
+        }
+
+        .black,
+        &.black {
+            color: #000;
+        }
+    }
+
+    .color--light {
+        color: #777;
+    }
+
+    .margin--extra {
+        margin-top: 3em;
+    }
+
+    .margin--extra-2x {
+        margin-top: 6em;
+    }
+}
+
+.signup-team-all {
+    margin: 0 0 20px;
+    border: 1px solid #ddd;
+    @include border-radius(2px);
+    .signup-team-dir {
+        background: #fafafa;
+        border-top: 1px solid #d5d5d5;
+
+        &:first-child {
+            border: none;
+        }
+
+        a {
+            color: inherit;
+            display: block;
+            padding: 0 15px;
+            line-height: 3.5em;
+            height: 3.5em;
+            font-size: 1.1em;
+        }
+    }
+
+    .signup-team-dir__name {
+        white-space: nowrap;
+        float: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 90%;
+    }
+
+    .signup-team-dir__arrow {
+        float: right;
+        font-size: .9em;
+        color: #999;
+        line-height: 3.5em;
+    }
+}
+
+
+.authorize-box {
+    margin: 100px auto;
+    width: 500px;
+    height: 280px;
+    border: 1px solid black;
+}
+
+.authorize-inner {
+    padding: 20px;
+}
+
+.authorize-btn {
+    margin-right: 6px;
+}
+
+.verify_panel {
+    margin: 60px auto auto auto;
+    max-width: 380px;
+}