@burh/nuxt-core 1.0.500 → 1.0.502

package/assets/sass/burh-ds/organisms/_subheader.scss

@@ -1,774 +1,774 @@
-
-
-.subheader {
-    position: relative;
-    padding-top: #{$spacer * 2};
-    padding-bottom: $spacer;
-
-    @media (min-width:  map-get($grid-breakpoints, "md")) {
-        padding-bottom: #{$spacer * 2};
-    }
-    &__background {
-        position: absolute;
-        z-index: 0;
-        width: 100%;
-        height: $avatar-size;
-        background-size: cover;
-        transition: all .25s ease-in-out;
-
-        @media (min-width:  map-get($grid-breakpoints, "md")) {
-            height: $subheader-height;
-        }
-    }
-    &__icon {
-        width: 40%;
-        max-width: 130px;
-        margin: 0 auto 1rem;
-
-        @media (min-width:  map-get($grid-breakpoints, "lg")) {
-            width: 130px;
-            //float: left;
-            margin-right: 1rem;
-        }
-    }
-    &__heading {
-        text-align: center;
-
-        @media (min-width:  map-get($grid-breakpoints, "lg")) {
-            display: flex;
-            text-align: left;
-            align-items: center;
-        }
-    }
-    &__description {
-        width: 100%;
-        margin-bottom: 2rem;
-
-        @media (min-width:  map-get($grid-breakpoints, "lg")) {
-            margin-bottom: 0;
-        }
-    }
-    &__user {
-        position: relative;
-
-        a {
-            font-weight: 700;
-        }
-    }
-    &__actions {
-        // display: flex;
-        // align-items: center;
-        text-align: center;
-
-        //@media (min-width:  map-get($grid-breakpoints, "md")) {}
-        @media (min-width:  map-get($grid-breakpoints, "md")) {
-            text-align: right;
-        }
-        .dropdown-toggle {
-            //border-radius: 5rem;
-            &.btn {
-                padding-right: 2em;
-                min-width: initial;
-            }
-        }
-        .btn {
-            // @media (min-width:  map-get($grid-breakpoints, "md")) {
-            //     font-size: 1vw;
-            //     padding-right: 1em;
-            //     padding-left: 1em;
-            //     margin-right: 1em;
-            // }
-            // @media (min-width:  map-get($grid-breakpoints, "lg")) {
-            //     // font-size: .7em;
-            // }
-            // @media (min-width:  map-get($grid-breakpoints, "xl")) {
-            //     // font-size: 1em;
-            //     font-size: .8vw;
-            // }
-            &-ellipsis {
-                display: inline-block;
-                padding-right: .7em;
-                padding-left: .7em;
-            }
-            &-rounded {
-                position: relative;
-                min-width: initial;
-                margin-bottom: 0;
-            }
-        }
-    }
-    &__avatar {
-        position: absolute;
-        top: calc(-#{$avatar-size} / .9); //1.5
-        //bottom: -#{$avatar-size/2};
-        left: 0;
-        right: 0;
-        width: $avatar-size;
-        height: $avatar-size;
-        flex-shrink: 0;
-        margin: 0 auto;
-        transition: all .25s ease-in-out;
-
-        @media (min-width:  map-get($grid-breakpoints, "md")) {
-            //bottom: -#{$avatar-size-md/2};
-            top: calc(-#{$avatar-size-md} / 3);
-            width: $avatar-size-md;
-            height: $avatar-size-md;
-            margin: 0 1rem 0;
-        }
-        @media (min-width:  map-get($grid-breakpoints, "lg")) {
-            //bottom: -#{$avatar-size-lg/2};
-            top: calc(-#{$avatar-size-lg} / 2);
-            width: $avatar-size-lg;
-            height: $avatar-size-lg;
-        }
-        @media (min-width:  map-get($grid-breakpoints, "xl")) {
-            //bottom: -#{$avatar-size-xl/2};
-            top: calc(-#{$avatar-size-xl} / 2);
-            width: $avatar-size-xl;
-            height: $avatar-size-xl;
-        }
-    }
-    &__actions {
-        //align-self: flex-end;
-        margin-top: 1rem;
-
-        .btn {
-            position: relative;
-            margin-bottom: 0;
-            margin-top: 0;
-            z-index: 0;
-            transition: all .25s ease-in-out;
-        }
-        
-        .btn-hide-icon {
-            @media (max-width:  map-get($grid-breakpoints, "md")) {
-                //min-width: initial;
-                border: 0;
-                text-align: center;
-                padding: 1rem;
-                margin: 0;
-
-                .icon-mobile {
-                    display: block;
-                    width: 3rem;
-                    height: 3rem;
-                    line-height: 3rem;
-                    margin: 0 auto .5rem;
-                    border-radius: 23rem;
-                    background-color: $bg-default;
-                    text-align: center;
-
-                    svg {
-                        width: 80%;
-                    }
-                }
-                &:not(:disabled):not(.disabled):active,
-                &:hover,
-                &:focus,
-                &:active {
-                    background-color: $base-light;
-                    color: $primary;
-                    box-shadow: none;
-
-                    .icon-mobile {
-                        color: $base-light;
-                        background-color: $primary;
-                    }
-                }
-                &.d-block {
-                    display: inline-block !important;
-                }
-            }
-            @media (min-width:  map-get($grid-breakpoints, "md")) {
-                .icon-mobile {
-                    display: none;
-                }
-            }
-        }
-        .d-sm-block {
-            @media (min-width:  map-get($grid-breakpoints, "md")) {
-                display: inline-block !important;
-            }
-        }
-        .dropdown-menu {
-            border-radius: .4375rem;
-
-            &::after {
-                content: "";
-                position: absolute;
-                right: .75rem;
-                top: -.5rem;
-                display: block;
-                border-style: solid;
-                border-width: 0 .5rem .5rem .5rem;
-                border-color: transparent transparent $base-light transparent;
-            }
-        }
-    }
-    &__tone {
-        .featured {
-            font-size: 1.4em;
-        }
-    }
-    &--business,
-    &--user {
-        background-color: $primary;
-        color: $base-light;
-
-        .breadcrumb {
-            &-dark {
-                .breadcrumb-item {
-                    a {
-                        color: $secondary;
-                        
-                        &:hover,
-                        &:focus {
-                            text-decoration: underline;
-                            color: $base-light;
-                        }
-                    }
-                    &.active {
-                        color: $base-light;
-                        font-weight: normal;
-                    }
-                    & + .breadcrumb-item {
-                        &::before {
-                            color: $base-light;
-                            font-size: .5rem;
-                        }
-                    }
-                }
-            }
-        }
-        .h1, .h2, .h3, .h4, .h5 {
-            color: $base-light;
-        }
-        .subheader__user {
-            &.lite {
-                [class^="display"] {
-                    line-height: 1;
-                }
-
-                .small {
-                    font-size: 1rem;
-                }
-            }
-            
-        }
-    }
-    &--avatar {
-        //background-color: $primary;
-        background-size: cover;
-        margin-bottom: 1rem; //calc(#{$avatar-size/2} + #{$spacer*2});
-
-        @media (min-width:  map-get($grid-breakpoints, "md")) {
-            //margin-bottom: calc(#{$avatar-size-md/2} + #{$spacer*2});
-        }
-        @media (min-width:  map-get($grid-breakpoints, "lg")) {
-            //margin-bottom: calc(#{$avatar-size-lg/2} + #{$spacer*2});
-        }
-        @media (min-width:  map-get($grid-breakpoints, "xl")) {
-            //margin-bottom: calc(#{$avatar-size-xl/2} + #{$spacer*2});
-        }
-    }
-    &--profile {
-        position: relative;
-        z-index: 1;
-        padding: 0;
-        transition: all .25s ease-in-out;
-
-        height: $avatar-size;
-
-        @media (min-width:  map-get($grid-breakpoints, "md")) {
-            height: $subheader-height;
-        }
-
-        @media (min-width:  map-get($grid-breakpoints, "md")) {
-            //position: fixed;
-            //width: 100% !important;
-            //top: $navbar-height;
-        }
-
-        .header-body {
-            position: relative;
-            z-index: 1;
-            //top: auto;
-            top: calc(#{$avatar-size} + #{$avatar-size * .5});
-            transition: all .25s ease-in-out;
-
-            @media (min-width:  map-get($grid-breakpoints, "md")) {
-                top: $subheader-height;
-                //top: calc(#{$subheader-height - 1vh});
-            }
-            // @media (min-width:  map-get($grid-breakpoints, "lg")) {
-            //     top: $subheader-height;
-            // }
-            // @media (min-width:  map-get($grid-breakpoints, "xl")) {
-            //     top: $subheader-height;
-            // }
-        }
-        .subheader {
-            &__user {
-                display: flex;
-                justify-content: start;
-            }
-            &__info {
-                width: 100%;
-                //align-self: flex-end;
-                //padding-left: $subheader-height;
-                //padding-left: calc(#{$avatar-size-mobile} + 1rem);
-                text-align: center;
-                transition: all .25s ease-in-out;
-
-                @media (min-width:  map-get($grid-breakpoints, "md")) {
-                    text-align: left;
-                    padding-left: calc(#{$avatar-size-md} + 2rem);
-                    padding-top: 1rem;
-                }
-                @media (min-width:  map-get($grid-breakpoints, "lg")) {
-                    padding-left: calc(#{$avatar-size-lg} + 2rem);
-                }
-                @media (min-width:  map-get($grid-breakpoints, "xl")) {
-                    padding-left: calc(#{$avatar-size-xl} + 2rem);
-                }
-                &--edit {
-                    .h1 {
-                        //justify-content: space-between;
-                        width: 100%;
-
-                        @media (min-width:  map-get($grid-breakpoints, "md")) {
-                            display: flex;
-                            align-items: flex-start;
-                        }
-
-                        .btn {
-                            min-width: initial;
-                            margin: 0;
-                            padding: 0;
-
-                            @media (min-width:  map-get($grid-breakpoints, "md")) {
-                                margin: 0 0 0 1rem;
-                                padding: .75em 0 0 0;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .h1,
-        p {
-            transition: all .25s ease-in-out;
-        }
-        .h1 {
-            font-size: 1.6rem;
-            font-weight: 800;
-            color: $default;
-            margin: 0;
-        }
-        p {
-            margin: 0;
-            font-size: 1rem;
-            font-weight: 800;
-
-            &.small {
-                font-size: .9em;
-                font-weight: 400;
-            }
-        }
-        .ellipsis {
-            width: 99%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        &.vertical--md {
-            height: auto;
-            transition: all .25s ease-in-out;
-
-            @media (min-width:  map-get($grid-breakpoints, "md")) {
-                //height: $subheader-height;
-                // height: #{$avatar-size * .8};
-            }
-            @media (min-width:  map-get($grid-breakpoints, "lg")) {
-                // height: #{$avatar-size * .7};
-            }
-            @media (min-width:  map-get($grid-breakpoints, "xl")) {
-                // height: #{$avatar-size-lg * 1.2};
-            }
-        }
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 0;
-            width: 100%;
-            height: 0;
-            background-color: rgba($primary, 0);
-            transition: all .25s ease-in-out;
-        }
-        &--sm {
-            height: $avatar-size-mobile !important;
-            //padding-top: 1rem;
-            padding-bottom: 0;
-            margin-bottom: calc(#{$avatar-size-mobile} / 3);
-            transition: all .25s ease-in-out;
-
-            .subheader {
-                &__avatar {
-                    top: 0;
-                    width: $avatar-size-mobile;
-                    height: $avatar-size-mobile;
-                    transition: all .25s ease-in-out;
-
-                    .fa-lg {
-                        font-size: 80% !important;
-                    }
-                }
-                &__info {
-                    padding-left: calc(#{$avatar-size-mobile} + 1rem);
-                    padding-top: .5rem;
-                    transition: all .25s ease-in-out;
-
-                    .h1,
-                    p,
-                    .btn {
-                        color: $base-light;
-                    }
-                    .h1 {
-                        font-size: 1.4rem;
-                    }
-                    p {
-                        display: none;
-                        font-size: .9rem;
-
-                        &.small,
-                        small {
-                            display: block;
-                        }
-                    }
-                }
-                &__actions {
-                    margin-top: 0;
-                    padding-top: .5rem;
-
-                    .btn-outline-primary {
-                        background-color: $base-light;
-                        color: $primary;
-                        border-color: $base-light;
-
-                        &:hover,
-                        &:focus {
-                            background-color: $primary;
-                            color: $base-light;
-                            border-color:  $primary;
-                        }
-                    }
-                    .dropdown {
-                        .btn {
-                            width: 48px;
-                            height: 48px;
-                            //margin: .5rem 1rem 0 0
-                        }
-                    }
-                    .dropdown-menu {
-                        &::after {
-                            right: 1rem;
-                        }
-                    }
-                }
-            }
-            .profile-edit__text {
-                opacity: 0;
-            }
-            .header-body {
-                top: 0;
-                z-index: 1;
-                transition: all .25s ease-in-out;
-                padding-top: 1rem;
-            }
-            .btn {
-                //margin-top: .5rem;
-                transition: all .25s ease-in-out;
-            }
-            &::after {
-                height: $avatar-size-mobile;
-                background-color: rgba($primary, .5);
-                transition: all .25s ease-in-out;
-            }
-            .subheader__background {
-                height: $subheader-height-mobile;
-                transition: all .25s ease-in-out;
-            }
-            .profile-pcd {
-                top: calc(100% - 35px);
-                font-size: 35px;
-                width: 35px;
-                height: 35px;
-                line-height: .5em;
-            
-                .svg-inline--fa.fa-w-16 {
-                    width: 1rem;
-                    height: 1rem;
-                }
-            }
-        }
-    }
-    &--settings {
-        position: relative;
-        z-index: 1;
-        margin-bottom: 2rem;
-        padding: 1rem 0;
-        background-color: $primary;
-        color: $base-light;
-        
-        .header-body > .row {
-            height: 100%;
-            align-items: center;
-        }
-
-        .subheader {
-            &__user,
-            &__tone {
-                height: 100%;
-            }
-            &__user {
-                display: flex;
-                align-items: center;
-                height: 100%;
-            }
-            &__info {
-                .h1 {
-                    font-size: 1.2rem;
-                    font-weight: 700;
-                    color: $base-light;
-                    margin: 0;
-                }
-                p {
-                    margin: 0;
-                }
-            }
-            &__avatar {
-                position: relative;
-                top: auto;
-                left: auto;
-                width: 75px;
-                height: 75px;
-                margin-right: 1rem;
-
-                .profile-edit__icon {
-                    svg {
-                        display: none
-                    }
-                }
-            }
-            &__tone {
-                display: none;
-                padding-top: 1rem;
-
-                @media (min-width:  map-get($grid-breakpoints, "md")) {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-                .btn {
-                    white-space: nowrap;
-                    margin: 0;
-                    font-size: .75rem;
-
-                    @media (min-width:  map-get($grid-breakpoints, "md")) {
-                        font-size: 1rem;
-                    }
-                }
-            }
-        }
-    }
-    &--hero {
-        padding: 0;
-    }
-}
-.add-fixed {
-    position: fixed;
-    bottom: 3vw;
-    right: 6vw;
-    z-index: 1;
-
-    .btn {
-        background-color: $primary;
-        transition: all .25s ease-in-out;
-        border: 0;
-
-        svg {
-            transform: rotate(0) scale(1);
-            transition: all .25s ease-in-out;
-        }
-        &:not(:disabled):not(.disabled):active, 
-        &:not(:disabled):not(.disabled).active {
-            background-color: $default;
-            border: 0;
-        }
-        &.active {
-            svg {
-                transform: rotate(45deg) scale(1);
-                transition: all .25s ease-in-out;
-            }
-        }
-    }
-    .dropdown-menu {
-        border-radius: .4375rem;
-
-        &::after {
-            content: "";
-            position: absolute;
-            right: 1rem;
-            bottom: -.5rem;
-            display: block;
-            border-style: solid;
-            border-width: .5rem .5rem 0 .5rem;
-            border-color: $base-light transparent transparent transparent;
-        }
-        .h4 {
-            font-size: .8rem;
-            font-weight: 600;
-            padding: .5rem 1rem;
-            color: lighten($base-dark, 30%);
-        }
-    }
-}
-
-.profile-edit {
-    .subheader {
-        &__avatar,
-        &__background {
-            overflow: hidden;
-
-            .bigger {
-                font-size: 3em !important;
-            }
-        }
-    }
-
-    &__caller {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 11;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        cursor: pointer;
-    }
-
-    &__text {
-        position: relative;
-        z-index: 11;
-        display: none;
-
-        @media (min-width:  map-get($grid-breakpoints, "md")) {
-            display: block;
-            font-size: .9rem;
-            padding: 1rem;
-            border-radius: .5rem;
-            border: 1px solid $base-light;
-            color: $base-light;
-            opacity: .2;
-            transition: all .25s ease-in-out;
-        }
-    }
-
-    &__icon {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        color: $base-light;
-        opacity: 0;
-        transition: all .25s ease-in-out;
-
-        &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 10;
-            width: 100%;
-            height: 100%;
-            background-color: rgba($base-dark, .2);
-            transition: all .25s ease-in-out;
-        }
-
-        &:hover {
-            color: rgba($base-light, .6);; //rgba($base-dark, .4);
-            transition: all .25s ease-in-out;
-            opacity: 1;
-
-            &::before {
-                background-color: rgba($primary, .7);//rgba($base-light, .7);
-                transition: all .25s ease-in-out;
-            }
-
-            svg {
-                opacity: .9;
-            }
-
-            .profile-edit__text {
-                color: rgba($base-light, .6);//rgba($base-dark, .4);
-                border-color: rgba($base-light, .6);//rgba($base-dark, .4);
-                transition: all .25s ease-in-out;
-                opacity: 1;
-            }
-        }
-
-        svg {
-            // position: relative;
-            // z-index: 11;
-            // width: 50%;
-            // height: auto;
-            // opacity: .5;
-        }
-        .avatar-svg {
-            //position: relative;
-            z-index: 11;
-            opacity: .5;
-        }
-        &--edit {
-            opacity: 1;
-        }
-    }
-}
-.profile-pcd {
-    position: absolute;
-    right: 0;
-    top: calc(100% - 35px);
-    font-size: 35px;
-    width: 35px;
-    height: 35px;
-    line-height: .5em;
-    text-align: center;
-    vertical-align: middle;
-    background: $primary;
-
-    .svg-inline--fa.fa-w-16 {
-        width: 1rem;
-        height: 1rem;
-    }
-
-    @media (min-width:  map-get($grid-breakpoints, "md")) {
-        top: calc(100% - 50px);
-        font-size: 50px;
-        width: 50px;
-        height: 50px;
-
-        .svg-inline--fa.fa-w-16 {
-            width: 1.75rem;
-            height: 1.75rem;
-        }
-    }
+
+
+.subheader {
+    position: relative;
+    padding-top: #{$spacer * 2};
+    padding-bottom: $spacer;
+
+    @media (min-width:  map-get($grid-breakpoints, "md")) {
+        padding-bottom: #{$spacer * 2};
+    }
+    &__background {
+        position: absolute;
+        z-index: 0;
+        width: 100%;
+        height: $avatar-size;
+        background-size: cover;
+        transition: all .25s ease-in-out;
+
+        @media (min-width:  map-get($grid-breakpoints, "md")) {
+            height: $subheader-height;
+        }
+    }
+    &__icon {
+        width: 40%;
+        max-width: 130px;
+        margin: 0 auto 1rem;
+
+        @media (min-width:  map-get($grid-breakpoints, "lg")) {
+            width: 130px;
+            //float: left;
+            margin-right: 1rem;
+        }
+    }
+    &__heading {
+        text-align: center;
+
+        @media (min-width:  map-get($grid-breakpoints, "lg")) {
+            display: flex;
+            text-align: left;
+            align-items: center;
+        }
+    }
+    &__description {
+        width: 100%;
+        margin-bottom: 2rem;
+
+        @media (min-width:  map-get($grid-breakpoints, "lg")) {
+            margin-bottom: 0;
+        }
+    }
+    &__user {
+        position: relative;
+
+        a {
+            font-weight: 700;
+        }
+    }
+    &__actions {
+        // display: flex;
+        // align-items: center;
+        text-align: center;
+
+        //@media (min-width:  map-get($grid-breakpoints, "md")) {}
+        @media (min-width:  map-get($grid-breakpoints, "md")) {
+            text-align: right;
+        }
+        .dropdown-toggle {
+            //border-radius: 5rem;
+            &.btn {
+                padding-right: 2em;
+                min-width: initial;
+            }
+        }
+        .btn {
+            // @media (min-width:  map-get($grid-breakpoints, "md")) {
+            //     font-size: 1vw;
+            //     padding-right: 1em;
+            //     padding-left: 1em;
+            //     margin-right: 1em;
+            // }
+            // @media (min-width:  map-get($grid-breakpoints, "lg")) {
+            //     // font-size: .7em;
+            // }
+            // @media (min-width:  map-get($grid-breakpoints, "xl")) {
+            //     // font-size: 1em;
+            //     font-size: .8vw;
+            // }
+            &-ellipsis {
+                display: inline-block;
+                padding-right: .7em;
+                padding-left: .7em;
+            }
+            &-rounded {
+                position: relative;
+                min-width: initial;
+                margin-bottom: 0;
+            }
+        }
+    }
+    &__avatar {
+        position: absolute;
+        top: calc(-#{$avatar-size} / .9); //1.5
+        //bottom: -#{$avatar-size/2};
+        left: 0;
+        right: 0;
+        width: $avatar-size;
+        height: $avatar-size;
+        flex-shrink: 0;
+        margin: 0 auto;
+        transition: all .25s ease-in-out;
+
+        @media (min-width:  map-get($grid-breakpoints, "md")) {
+            //bottom: -#{$avatar-size-md/2};
+            top: calc(-#{$avatar-size-md} / 3);
+            width: $avatar-size-md;
+            height: $avatar-size-md;
+            margin: 0 1rem 0;
+        }
+        @media (min-width:  map-get($grid-breakpoints, "lg")) {
+            //bottom: -#{$avatar-size-lg/2};
+            top: calc(-#{$avatar-size-lg} / 2);
+            width: $avatar-size-lg;
+            height: $avatar-size-lg;
+        }
+        @media (min-width:  map-get($grid-breakpoints, "xl")) {
+            //bottom: -#{$avatar-size-xl/2};
+            top: calc(-#{$avatar-size-xl} / 2);
+            width: $avatar-size-xl;
+            height: $avatar-size-xl;
+        }
+    }
+    &__actions {
+        //align-self: flex-end;
+        margin-top: 1rem;
+
+        .btn {
+            position: relative;
+            margin-bottom: 0;
+            margin-top: 0;
+            z-index: 0;
+            transition: all .25s ease-in-out;
+        }
+        
+        .btn-hide-icon {
+            @media (max-width:  map-get($grid-breakpoints, "md")) {
+                //min-width: initial;
+                border: 0;
+                text-align: center;
+                padding: 1rem;
+                margin: 0;
+
+                .icon-mobile {
+                    display: block;
+                    width: 3rem;
+                    height: 3rem;
+                    line-height: 3rem;
+                    margin: 0 auto .5rem;
+                    border-radius: 23rem;
+                    background-color: $bg-default;
+                    text-align: center;
+
+                    svg {
+                        width: 80%;
+                    }
+                }
+                &:not(:disabled):not(.disabled):active,
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: $base-light;
+                    color: $primary;
+                    box-shadow: none;
+
+                    .icon-mobile {
+                        color: $base-light;
+                        background-color: $primary;
+                    }
+                }
+                &.d-block {
+                    display: inline-block !important;
+                }
+            }
+            @media (min-width:  map-get($grid-breakpoints, "md")) {
+                .icon-mobile {
+                    display: none;
+                }
+            }
+        }
+        .d-sm-block {
+            @media (min-width:  map-get($grid-breakpoints, "md")) {
+                display: inline-block !important;
+            }
+        }
+        .dropdown-menu {
+            border-radius: .4375rem;
+
+            &::after {
+                content: "";
+                position: absolute;
+                right: .75rem;
+                top: -.5rem;
+                display: block;
+                border-style: solid;
+                border-width: 0 .5rem .5rem .5rem;
+                border-color: transparent transparent $base-light transparent;
+            }
+        }
+    }
+    &__tone {
+        .featured {
+            font-size: 1.4em;
+        }
+    }
+    &--business,
+    &--user {
+        background-color: $primary;
+        color: $base-light;
+
+        .breadcrumb {
+            &-dark {
+                .breadcrumb-item {
+                    a {
+                        color: $secondary;
+                        
+                        &:hover,
+                        &:focus {
+                            text-decoration: underline;
+                            color: $base-light;
+                        }
+                    }
+                    &.active {
+                        color: $base-light;
+                        font-weight: normal;
+                    }
+                    & + .breadcrumb-item {
+                        &::before {
+                            color: $base-light;
+                            font-size: .5rem;
+                        }
+                    }
+                }
+            }
+        }
+        .h1, .h2, .h3, .h4, .h5 {
+            color: $base-light;
+        }
+        .subheader__user {
+            &.lite {
+                [class^="display"] {
+                    line-height: 1;
+                }
+
+                .small {
+                    font-size: 1rem;
+                }
+            }
+            
+        }
+    }
+    &--avatar {
+        //background-color: $primary;
+        background-size: cover;
+        margin-bottom: 1rem; //calc(#{$avatar-size/2} + #{$spacer*2});
+
+        @media (min-width:  map-get($grid-breakpoints, "md")) {
+            //margin-bottom: calc(#{$avatar-size-md/2} + #{$spacer*2});
+        }
+        @media (min-width:  map-get($grid-breakpoints, "lg")) {
+            //margin-bottom: calc(#{$avatar-size-lg/2} + #{$spacer*2});
+        }
+        @media (min-width:  map-get($grid-breakpoints, "xl")) {
+            //margin-bottom: calc(#{$avatar-size-xl/2} + #{$spacer*2});
+        }
+    }
+    &--profile {
+        position: relative;
+        z-index: 1;
+        padding: 0;
+        transition: all .25s ease-in-out;
+
+        height: $avatar-size;
+
+        @media (min-width:  map-get($grid-breakpoints, "md")) {
+            height: $subheader-height;
+        }
+
+        @media (min-width:  map-get($grid-breakpoints, "md")) {
+            //position: fixed;
+            //width: 100% !important;
+            //top: $navbar-height;
+        }
+
+        .header-body {
+            position: relative;
+            z-index: 1;
+            //top: auto;
+            top: calc(#{$avatar-size} + #{$avatar-size * .5});
+            transition: all .25s ease-in-out;
+
+            @media (min-width:  map-get($grid-breakpoints, "md")) {
+                top: $subheader-height;
+                //top: calc(#{$subheader-height - 1vh});
+            }
+            // @media (min-width:  map-get($grid-breakpoints, "lg")) {
+            //     top: $subheader-height;
+            // }
+            // @media (min-width:  map-get($grid-breakpoints, "xl")) {
+            //     top: $subheader-height;
+            // }
+        }
+        .subheader {
+            &__user {
+                display: flex;
+                justify-content: start;
+            }
+            &__info {
+                width: 100%;
+                //align-self: flex-end;
+                //padding-left: $subheader-height;
+                //padding-left: calc(#{$avatar-size-mobile} + 1rem);
+                text-align: center;
+                transition: all .25s ease-in-out;
+
+                @media (min-width:  map-get($grid-breakpoints, "md")) {
+                    text-align: left;
+                    padding-left: calc(#{$avatar-size-md} + 2rem);
+                    padding-top: 1rem;
+                }
+                @media (min-width:  map-get($grid-breakpoints, "lg")) {
+                    padding-left: calc(#{$avatar-size-lg} + 2rem);
+                }
+                @media (min-width:  map-get($grid-breakpoints, "xl")) {
+                    padding-left: calc(#{$avatar-size-xl} + 2rem);
+                }
+                &--edit {
+                    .h1 {
+                        //justify-content: space-between;
+                        width: 100%;
+
+                        @media (min-width:  map-get($grid-breakpoints, "md")) {
+                            display: flex;
+                            align-items: flex-start;
+                        }
+
+                        .btn {
+                            min-width: initial;
+                            margin: 0;
+                            padding: 0;
+
+                            @media (min-width:  map-get($grid-breakpoints, "md")) {
+                                margin: 0 0 0 1rem;
+                                padding: .75em 0 0 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .h1,
+        p {
+            transition: all .25s ease-in-out;
+        }
+        .h1 {
+            font-size: 1.6rem;
+            font-weight: 800;
+            color: $default;
+            margin: 0;
+        }
+        p {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 800;
+
+            &.small {
+                font-size: .9em;
+                font-weight: 400;
+            }
+        }
+        .ellipsis {
+            width: 99%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        &.vertical--md {
+            height: auto;
+            transition: all .25s ease-in-out;
+
+            @media (min-width:  map-get($grid-breakpoints, "md")) {
+                //height: $subheader-height;
+                // height: #{$avatar-size * .8};
+            }
+            @media (min-width:  map-get($grid-breakpoints, "lg")) {
+                // height: #{$avatar-size * .7};
+            }
+            @media (min-width:  map-get($grid-breakpoints, "xl")) {
+                // height: #{$avatar-size-lg * 1.2};
+            }
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 0;
+            width: 100%;
+            height: 0;
+            background-color: rgba($primary, 0);
+            transition: all .25s ease-in-out;
+        }
+        &--sm {
+            height: $avatar-size-mobile !important;
+            //padding-top: 1rem;
+            padding-bottom: 0;
+            margin-bottom: calc(#{$avatar-size-mobile} / 3);
+            transition: all .25s ease-in-out;
+
+            .subheader {
+                &__avatar {
+                    top: 0;
+                    width: $avatar-size-mobile;
+                    height: $avatar-size-mobile;
+                    transition: all .25s ease-in-out;
+
+                    .fa-lg {
+                        font-size: 80% !important;
+                    }
+                }
+                &__info {
+                    padding-left: calc(#{$avatar-size-mobile} + 1rem);
+                    padding-top: .5rem;
+                    transition: all .25s ease-in-out;
+
+                    .h1,
+                    p,
+                    .btn {
+                        color: $base-light;
+                    }
+                    .h1 {
+                        font-size: 1.4rem;
+                    }
+                    p {
+                        display: none;
+                        font-size: .9rem;
+
+                        &.small,
+                        small {
+                            display: block;
+                        }
+                    }
+                }
+                &__actions {
+                    margin-top: 0;
+                    padding-top: .5rem;
+
+                    .btn-outline-primary {
+                        background-color: $base-light;
+                        color: $primary;
+                        border-color: $base-light;
+
+                        &:hover,
+                        &:focus {
+                            background-color: $primary;
+                            color: $base-light;
+                            border-color:  $primary;
+                        }
+                    }
+                    .dropdown {
+                        .btn {
+                            width: 48px;
+                            height: 48px;
+                            //margin: .5rem 1rem 0 0
+                        }
+                    }
+                    .dropdown-menu {
+                        &::after {
+                            right: 1rem;
+                        }
+                    }
+                }
+            }
+            .profile-edit__text {
+                opacity: 0;
+            }
+            .header-body {
+                top: 0;
+                z-index: 1;
+                transition: all .25s ease-in-out;
+                padding-top: 1rem;
+            }
+            .btn {
+                //margin-top: .5rem;
+                transition: all .25s ease-in-out;
+            }
+            &::after {
+                height: $avatar-size-mobile;
+                background-color: rgba($primary, .5);
+                transition: all .25s ease-in-out;
+            }
+            .subheader__background {
+                height: $subheader-height-mobile;
+                transition: all .25s ease-in-out;
+            }
+            .profile-pcd {
+                top: calc(100% - 35px);
+                font-size: 35px;
+                width: 35px;
+                height: 35px;
+                line-height: .5em;
+            
+                .svg-inline--fa.fa-w-16 {
+                    width: 1rem;
+                    height: 1rem;
+                }
+            }
+        }
+    }
+    &--settings {
+        position: relative;
+        z-index: 1;
+        margin-bottom: 2rem;
+        padding: 1rem 0;
+        background-color: $primary;
+        color: $base-light;
+        
+        .header-body > .row {
+            height: 100%;
+            align-items: center;
+        }
+
+        .subheader {
+            &__user,
+            &__tone {
+                height: 100%;
+            }
+            &__user {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+            &__info {
+                .h1 {
+                    font-size: 1.2rem;
+                    font-weight: 700;
+                    color: $base-light;
+                    margin: 0;
+                }
+                p {
+                    margin: 0;
+                }
+            }
+            &__avatar {
+                position: relative;
+                top: auto;
+                left: auto;
+                width: 75px;
+                height: 75px;
+                margin-right: 1rem;
+
+                .profile-edit__icon {
+                    svg {
+                        display: none
+                    }
+                }
+            }
+            &__tone {
+                display: none;
+                padding-top: 1rem;
+
+                @media (min-width:  map-get($grid-breakpoints, "md")) {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .btn {
+                    white-space: nowrap;
+                    margin: 0;
+                    font-size: .75rem;
+
+                    @media (min-width:  map-get($grid-breakpoints, "md")) {
+                        font-size: 1rem;
+                    }
+                }
+            }
+        }
+    }
+    &--hero {
+        padding: 0;
+    }
+}
+.add-fixed {
+    position: fixed;
+    bottom: 3vw;
+    right: 6vw;
+    z-index: 1;
+
+    .btn {
+        background-color: $primary;
+        transition: all .25s ease-in-out;
+        border: 0;
+
+        svg {
+            transform: rotate(0) scale(1);
+            transition: all .25s ease-in-out;
+        }
+        &:not(:disabled):not(.disabled):active, 
+        &:not(:disabled):not(.disabled).active {
+            background-color: $default;
+            border: 0;
+        }
+        &.active {
+            svg {
+                transform: rotate(45deg) scale(1);
+                transition: all .25s ease-in-out;
+            }
+        }
+    }
+    .dropdown-menu {
+        border-radius: .4375rem;
+
+        &::after {
+            content: "";
+            position: absolute;
+            right: 1rem;
+            bottom: -.5rem;
+            display: block;
+            border-style: solid;
+            border-width: .5rem .5rem 0 .5rem;
+            border-color: $base-light transparent transparent transparent;
+        }
+        .h4 {
+            font-size: .8rem;
+            font-weight: 600;
+            padding: .5rem 1rem;
+            color: lighten($base-dark, 30%);
+        }
+    }
+}
+
+.profile-edit {
+    .subheader {
+        &__avatar,
+        &__background {
+            overflow: hidden;
+
+            .bigger {
+                font-size: 3em !important;
+            }
+        }
+    }
+
+    &__caller {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 11;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+    }
+
+    &__text {
+        position: relative;
+        z-index: 11;
+        display: none;
+
+        @media (min-width:  map-get($grid-breakpoints, "md")) {
+            display: block;
+            font-size: .9rem;
+            padding: 1rem;
+            border-radius: .5rem;
+            border: 1px solid $base-light;
+            color: $base-light;
+            opacity: .2;
+            transition: all .25s ease-in-out;
+        }
+    }
+
+    &__icon {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        color: $base-light;
+        opacity: 0;
+        transition: all .25s ease-in-out;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+            background-color: rgba($base-dark, .2);
+            transition: all .25s ease-in-out;
+        }
+
+        &:hover {
+            color: rgba($base-light, .6);; //rgba($base-dark, .4);
+            transition: all .25s ease-in-out;
+            opacity: 1;
+
+            &::before {
+                background-color: rgba($primary, .7);//rgba($base-light, .7);
+                transition: all .25s ease-in-out;
+            }
+
+            svg {
+                opacity: .9;
+            }
+
+            .profile-edit__text {
+                color: rgba($base-light, .6);//rgba($base-dark, .4);
+                border-color: rgba($base-light, .6);//rgba($base-dark, .4);
+                transition: all .25s ease-in-out;
+                opacity: 1;
+            }
+        }
+
+        svg {
+            // position: relative;
+            // z-index: 11;
+            // width: 50%;
+            // height: auto;
+            // opacity: .5;
+        }
+        .avatar-svg {
+            //position: relative;
+            z-index: 11;
+            opacity: .5;
+        }
+        &--edit {
+            opacity: 1;
+        }
+    }
+}
+.profile-pcd {
+    position: absolute;
+    right: 0;
+    top: calc(100% - 35px);
+    font-size: 35px;
+    width: 35px;
+    height: 35px;
+    line-height: .5em;
+    text-align: center;
+    vertical-align: middle;
+    background: $primary;
+
+    .svg-inline--fa.fa-w-16 {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    @media (min-width:  map-get($grid-breakpoints, "md")) {
+        top: calc(100% - 50px);
+        font-size: 50px;
+        width: 50px;
+        height: 50px;
+
+        .svg-inline--fa.fa-w-16 {
+            width: 1.75rem;
+            height: 1.75rem;
+        }
+    }
 }