Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 208 insertions, 0 deletions

diff --git a/web/sass-files/sass/components/_tutorial.scss b/web/sass-files/sass/components/_tutorial.scss
new file mode 100644
index 000000000..f15919009
--- /dev/null
+++ b/web/sass-files/sass/components/_tutorial.scss
@@ -0,0 +1,208 @@
+@charset 'UTF-8';
+
+.tip-backdrop {
+    background: rgba(black, .5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}
+
+.tip-overlay {
+    width: 350px;
+    max-width: 90%;
+    position: absolute;
+    background-color: #fff;
+    @include border-radius(3px);
+    padding: 20px;
+    z-index: 1000;
+
+    .arrow {
+        border-width: 10px;
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    &.tip-overlay--sidebar {
+        max-width: 75%;
+        margin: 50px 0 0 10px;
+        min-height: 330px;
+        .tutorial__footer {
+            position: absolute;
+            width: 100%;
+            bottom: 20px;
+            left: 0;
+            padding: 0 20px;
+        }
+        .arrow {
+            top: 80px;
+            left: -10px;
+            margin-top: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--header {
+        margin: 10px 0 0 10px;
+        .arrow {
+            top: 15px;
+            left: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--chat {
+        margin-top: -10px;
+        .arrow {
+            left: 50%;
+            margin-left: -10px;
+            border-bottom-width: 0;
+            border-top-color: #fff;
+            bottom: -10px;
+        }
+    }
+
+    h4 {
+        font-size: em(16px);
+        font-weight: 600;
+        margin: 5px 0 15px;
+    }
+
+    p {
+        font-size: 13px;
+        line-height: 1.6;
+
+        strong {
+            font-weight: 600;
+        }
+    }
+
+    .btn {
+        background: #ccc;
+        color: #fff;
+        @include border-radius(3px);
+        border: none;
+        margin: 10px 0;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: #fff;
+            border: none;
+            background: #bbb;
+        }
+    }
+
+    .tip-opt {
+        font-size: 12px;
+
+        span {
+            @include opacity(.9);
+        }
+    }
+
+    .tutorial__circles {
+        margin: 1.5em 0px -1.7em -4px;
+
+        .circle {
+            width: 7px;
+            height: 7px;
+            margin: 0 4px;
+        }
+    }
+}
+
+.tip-button {
+    z-index: 998;
+    right: -10px;
+    top: -10px;
+    position: relative;
+    cursor: pointer;
+}
+
+.tip-div {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    &.tip-overlay--header {
+        top: 21px;
+        right: 2px;
+        .tip-button {
+            @include opacity(.8);
+        }
+    }
+
+    &.tip-overlay--sidebar {
+        left: 0;
+        @include opacity(.8);
+        top: -9px;
+    }
+}
+
+.tutorial-steps__container {
+    text-align: center;
+    width: 100%;
+    display: table;
+    height: 100%;
+    .tutorial__content {
+        display: table-cell;
+        vertical-align: middle;
+        padding-bottom: 100px;
+        padding: 20px 40px 40px;
+        .tutorial__steps {
+            position: relative;
+            max-width: 310px;
+            min-height: 370px;
+            margin-bottom: 50px;
+            text-align: left;
+            display: inline-block;
+        }
+    }
+    .tutorial__footer {
+        position: absolute;
+        bottom: 0;
+    }
+    h1 {
+        font-size: em(40px);
+        margin: -20px 0 30px;
+        font-weight: 600;
+    }
+    h3 {
+        font-size: em(24px);
+        margin-bottom: 30px;
+        font-weight: 600;
+    }
+    .tutorial__circles {
+        position: absolute;
+        bottom: 40px;
+    }
+    .tutorial-skip {
+        margin-left: 13px;
+    }
+}
+
+.tutorial__circles {
+    margin: 2em 0;
+    .circle {
+        width: 9px;
+        height: 9px;
+        @include border-radius(9px);
+        @include opacity(.2);
+        background: #000;
+        display: inline-block;
+        margin: 0 5px;
+        &.active {
+            background: $color--primary;
+            @include opacity(1);
+        }
+    }
+}