initial commit 2

1 files changed, 256 insertions, 0 deletions

diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
new file mode 100644
index 00000000..98e7da85
--- /dev/null
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -0,0 +1,256 @@
+// Retrive the tab's height by summ its properties
+$owprofile-tabs-height: ($nav-link-padding-y*2) + ($font-size-base * $line-height-base);
+
+// Overal page bg-color: Blend it 'over' the color chosen by the user
+// ($body-bg), rather than force it replacing the variable's value.
+$owprofile-color-bg: mix($body-bg, #efeff4);
+
+.o_wprofile_body {
+    background-color: $owprofile-color-bg;
+}
+
+.o_wprofile_gradient {
+    background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
+}
+
+.o_wprofile_pict {
+    @include size(100%);
+    padding-top: 30%;
+    background-size: cover;
+    background-position: center;
+
+    @include media-breakpoint-up(md)  {
+        padding-top: 70%;
+        border: 1px solid darken(#875A7B, 10%);
+        border-bottom-width: 0;
+    }
+}
+
+.o_wprofile_header {
+    @include media-breakpoint-up(md)  {
+        &:before {
+            content: "";
+            @include o-position-absolute(auto, 0, 0, 0);
+            height: $owprofile-tabs-height;
+            background: rgba(black, 0.2);
+        }
+    }
+}
+
+.o_wprofile_sidebar {
+    border: 1px solid $border-color;
+
+    @include media-breakpoint-up(md) {
+        border-top-width: 0;
+    }
+}
+
+.o_wprofile_nav_tabs {
+    @include media-breakpoint-up(md)  {
+        margin-top: $owprofile-tabs-height * -1;
+        border-bottom: 0;
+
+        .nav-link {
+            border-radius: 0;
+            border-width: 0 1px;
+            line-height: $line-height-base;
+            @include o-hover-text-color(rgba(white, 0.8), white);
+
+            & {
+                border-color: transparent;
+            }
+    
+            &:hover {
+                border-color: transparent;
+                background: #3d2938;
+            }
+
+            &.active {
+                color: color-yiq($owprofile-color-bg);
+                background: $owprofile-color-bg;
+                border-color: $owprofile-color-bg;
+            }
+        }
+    }
+
+    @include media-breakpoint-only(xs) {
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        li {
+            white-space: nowrap;
+        }
+    }
+}
+
+.o_wprofile_tabs_content {
+    @include media-breakpoint-down(sm) {
+        background-color: $nav-tabs-link-active-bg;
+        padding:0 ($grid-gutter-width * 0.5);
+    }
+
+    @include media-breakpoint-only(xs) {
+        margin: 0 ($grid-gutter-width * -0.5);
+    }
+}
+
+/// Progress Circle
+.o_wprofile_progress_circle {
+    position: relative;
+
+    svg.o_pc_circular_chart {
+        display: block;
+        max-width: 100%;
+
+        .o_pc_circle_bg, .o_pc_circle {
+            fill: none;
+            stroke-width: 1.5px;
+            stroke-linecap: round;
+        }
+
+        .o_pc_circle_bg {
+            stroke: rgba(black, 0.1);
+        }
+
+        .o_pc_circle {
+            animation: progress 1s ease-out forwards;
+        }
+
+        #gradient {
+          --o-pc-color-stop-1: lighten(theme-color('primary'), 10%);
+          --o-pc-color-stop-2: theme-color('primary');
+        }
+    }
+
+    .o_pc_overlay {
+        @include o-position-absolute(0,0,0,0);
+    }
+
+    @keyframes progress {
+        0% {
+            stroke-dasharray: 0 100;
+        }
+    }
+}
+
+// All Users Page
+.o_wprofile_all_users_nav {
+    border-width: 1px 0;
+
+    &, .o_wprofile_course_nav_search, .o_wprofile_all_users_nav_btn {
+        background-color: rgba(white, 0.05);
+        border-color: rgba(white, 0.1);
+        border-style: solid;
+    }
+
+    .o_wprofile_course_nav_search, .o_wprofile_all_users_nav_btn {
+        border-width: 0 1px;
+    }
+
+    .o_wprofile_all_users_nav_btn {
+        @include media-breakpoint-up(md) {
+            @include o-hover-text-color(white, $gray-800);
+            margin-top: -1px;
+            border-radius: 0;
+            min-height: 35px;
+
+            &:hover {
+                background-color: white;
+            }
+        }
+    }
+
+    .o_wprofile_all_users_nav_btn_container {
+        @include media-breakpoint-down(sm) {
+            ~ .o_wprofile_user_profile_sub_nav_mobile_col {
+                padding-left: 0;
+            }
+
+            .o_wprofile_all_users_nav_btn {
+                @include o-hover-text-color(white, white);
+                border-radius: $btn-border-radius;
+                background-color: rgba(black, 0.25);
+            }
+        }
+    }
+
+    .breadcrumb-item.active a, .breadcrumb-item a:hover {
+        color: white;
+    }
+
+    .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wprofile_course_nav_search input::placeholder {
+        color: rgba(white, 0.8);
+    }
+}
+
+.o_wprofile_top3_card_footer div {
+    border-color: $border-color;
+    border-style: solid;
+    border-width: 1px 0;
+    margin-top: -1px;
+
+    + div {
+        border-left-width: 1px;
+        margin-left: -1px;
+    }
+}
+
+.o_wprofile_pager {
+    li.page-item {
+        a.page-link {
+            background-color: transparent;
+            border: 0;
+            color: $gray-600;
+            transition-duration: .3s;
+
+            &:hover {
+                color: $primary;
+            }
+        }
+
+        &.active {
+            a.page-link {
+                color: $white;
+            }
+        }
+
+        &.o_wprofile_pager_arrow a {
+            color: $primary;
+
+            &:hover {
+                transform: scaleX(1.50) scaleY(1.50);
+            }
+        }
+
+        &.o_wprofile_pager_arrow.disabled a {
+            color: $gray-600;
+        }
+
+        .page-link:focus {
+            box-shadow: 0 0 0 0;
+        }
+    }
+}
+
+.wprofile_badge_img {
+    height: 2.5em;
+}
+
+
+// Other stuffs
+.country_flag {
+    display: inline-block;
+    margin-left: 2px;
+    max-height: 13px;
+    width: auto !important;
+}
+
+// Tools
+.o_wprofile_pointer {
+    cursor: pointer;
+}
+
+// Own profile border
+.o_wprofile_border_focus {
+    border-left: 4px solid theme-color('secondary');
+}