‰PNG  IHDRôxÔúsBIT|dˆ pHYsÄÄ•+tEXtSoftwarewww.inkscape.org›î<,àtEXtComment //// User Avatar ///////////////////// .user-avatar, [class^="user-avatar"]:not([class*="-group"]){ border-radius: 50%; height: 40px; width: 40px; display: flex; justify-content: center; align-items: center; color: $white; background: $accent-500; font-size: 14px; font-weight: $fw-medium; letter-spacing: 0.06em; flex-shrink: 0; position: relative; + .user-info{ @if($rtl==false){ margin-left: 1rem; } @if($rtl==true){ margin-right: 1rem; } } + .user-name{ @if($rtl==false){ margin-left: 0.75rem; } @if($rtl==true){ margin-right: 0.75rem; } } img{ border-radius: 50%; } &.md{ + .user-info{ @if($rtl==false){ margin-left: 1.5rem; } @if($rtl==true){ margin-right: 1.5rem; } } + .user-name{ @if($rtl==false){ margin-left: 1.25rem; } @if($rtl==true){ margin-right: 1.25rem; } } } .edit{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background-color: rgba($dark,.5); display: flex; justify-content: center; align-items: center; color: $white; opacity: 0; transition: opacity .3s; } &:hover{ .edit{ opacity: 1; } } .status{ border: 2px solid $white; position: absolute; bottom: 0; @if($rtl==false){ right: 0; } @if($rtl==true){ left: 0; } } &.sq{ border-radius: $border-radius; img{ border-radius: $border-radius; } .status{ bottom: -6px; @if($rtl==false){ right: -6px; } @if($rtl==true){ left: -6px; } } } } // Multiple Avatar .user-avatar-multiple{ background-color: transparent !important; .user-avatar{ position: absolute; height: 70%; width: 70%; font-size: 80%; border: 2px solid $white; &:nth-child(1){ top: 0; @if($rtl==false){ right: 0; } @if($rtl==true){ left: 0; } } &:nth-child(2){ bottom: 0; @if($rtl==false){ left: 0; } @if($rtl==true){ right: 0; } } } } .user-card .user-avatar.d-none{ @if($rtl==false){ margin-right: 1rem; } @if($rtl==true){ margin-left: 1rem; } + .user-info, + .user-name{ @if($rtl==false){ margin-left: 0; } @if($rtl==true){ margin-right: 0; } } } // Sizes .user-avatar { &-xl, &.xl { height: 110px; width: 110px; font-size: 40px; font-weight: 400; .status{ bottom: 9px; @if($rtl==false){ right: 9px; } @if($rtl==true){ left: 9px; } } } &-lg, &.lg { height: 80px; width: 80px; font-size: 28px; font-weight: 400; .status{ bottom: 5px; @if($rtl==false){ right: 5px; } @if($rtl==true){ left: 5px; } } } &-md, &.md { height: 60px; width: 60px; font-size: 18px; .status{ bottom: 2px; @if($rtl==false){ right: 2px; } @if($rtl==true){ left: 2px; } } } &-sm, &.sm{ height: 32px; width: 32px; font-size: 12px; .status{ bottom: -2px; @if($rtl==false){ right: -2px; } @if($rtl==true){ left: -2px; } } } &-xs, &.xs{ height: 26px; width: 26px; font-size: 9px; font-weight: $fw-bold; .status{ bottom: -2px; @if($rtl==false){ right: -2px; } @if($rtl==true){ left: -2px; } } } } // Colors Fix $avatar-adj-colors: ( "blue-dim": $blue, "azure-dim": $azure, "indigo-dim": $indigo, "purple-dim": $purple, "pink-dim": $pink, "orange-dim": $orange, "teal-dim": $teal, // for bootstrap "primary-dim": $accent-color, "secondary-dim": $base-color, "success-dim": $success, "info-dim": $info, "warning-dim": $warning, "danger-dim": $danger, "dark-dim": $dark, "gray-dim": $light-500, 'lighter': $base-light, 'light': $base-text ); @each $name, $color in $avatar-adj-colors{ .user-avatar[class*="-#{$name}"] { color: $color; } } // User Card ////////////////////////// .user{ &-card { display: flex; align-items: center; &-wrap{ padding-top: 1.125rem; padding-bottom: 1.125rem; } .user-info { color: $base-light; } &-menu{ position: absolute; @if($rtl==false){ right: 1rem; } @if($rtl==true){ left: 1rem; } top: 1rem; } } &-toggle{ display: flex; align-items: center; padding:0 1px 1px; } &-status{ font-size: $fx-sz-11; font-weight: 500; line-height: 1; padding-top: .125rem; padding-bottom: .375rem; &-unverified{ color: $danger; } &-verified{ color: $success; } } &-name{ color: $base-text; font-size: 12px; line-height: 16px; font-weight: $fw-bold; @if($dark_option==true) { .is-dark &{ color: lighten($base-light, 5%); } } @if($dark_theme_option==true) { .is-theme &{ color: $accent-light; } } } &-action{ @if($rtl==false){ margin-left:auto; } @if($rtl==true){ margin-right:auto; } font-size: 20px; color: $base-light; } &-account{ &-info{ padding-top: 1.5rem; padding-bottom: 1rem; &:first-child { padding-top: 0.5rem; // @io-200 .nk-profile-content & { padding-top: 1.5rem; } } } &-data{ li{ display: flex; justify-content: space-between; padding: .125rem 0; } } &-actions{ &:not(:first-child){ margin-top: 1.5rem; } ul{ display: flex; li{ width: 44%; &:last-child{ width: 56%; } } } .btn{ width: 100%; font-size: 12px; letter-spacing: 0.04em; padding-left: 0.5rem; padding-right: 0.5rem; text-transform: uppercase; } } &-links{ padding: 1rem 0; border-bottom: 1px solid $border-light; &:last-child { .user-account-info & { border-bottom: 0; padding-bottom: 0; } } .user-account-info + & { padding-top: 0; margin-top: -0.5rem; } a:link{ padding: 0.5rem 0; display: flex; } } &-value{ display: inline-flex; } } &-balance{ font-size: 1.5rem; line-height: 1; padding:.125rem 0 .375rem; color: $primary; small{ font-size: 1rem; } &-alt{ font-size: $fx-sz-15; color: $base-text; font-weight: $fw-bold; span{ font-weight: $fw-normal; } } &-sub{ font-size: $fx-sz-13; color: $base-light; span{ color: $base-text; } + a{ margin-top: 1rem; } } } } // user card s2 /////////////////////// .user-card-s2{ display: flex; flex-direction: column; text-align: center; padding: .5rem; .user-avatar{ margin:0 auto; } .user-info{ margin: 1.25rem 0 0 !important; .sub-text{ justify-content: center; } .badge{ margin-bottom: 1rem; } } } // user card md /////////////////////// .user-card-md{ .lead-text{ font-size: 1rem; } .sub-text{ font-size: 0.875rem; } } // User Activity /////////////////////// .user-activity{ display: flex; &-group{ display: flex; flex-wrap: wrap; } &-ck{ height: 110px; padding: .5rem .375rem 0; } .icon{ width: 2.25rem; font-size: 1.5rem; color: $base-light; } .info{ span{ display: block; } } .amount{ font-size: 1.125rem; line-height: 1.3; font-weight: $fw-medium; color: $base-text; } .title{ font-size: $fx-sz-12; color: $base-light; } .gfx{ align-self: flex-end; width: 50px; @if($rtl==false){ margin-left: 1rem; } @if($rtl==true){ margin-right: 1rem; } margin-bottom: 0.25rem; } } // User Contact /////////////////////// .user-contacts{ li{ color:$base-text; display: flex; font-size: .875rem; line-height: 1.4rem; padding: .375rem 0; .icon{ color: $base-light; font-size: 1rem; width: 1.75rem; line-height: inherit; display: inline-block; } } } // User Avatar Group /////////////////////// .user-avatar-group{ display: flex; .user-avatar{ border:2px solid $white; &:not(:first-child){ @if($rtl==false){ margin-left: -20%; } @if($rtl==true){ margin-right: -20%; } } &.sm:not(:first-child) { @if($rtl==false){ margin-left: -1rem; } @if($rtl==true){ margin-right: -1rem; } } &.xs:not(:first-child) { @if($rtl==false){ margin-left: -0.5rem; } @if($rtl==true){ margin-right: -0.5rem; } } } } // User info extend /////////////////////// .user-info{ .lead-text,.sub-text{ display: flex; align-items: center; } .edit{ font-size: 1.25rem; color: $base-light; @if($rtl==false){ margin-left: 0.5rem; } @if($rtl==true){ margin-right: 0.5rem; } display: inline-flex; &:hover{ color: $accent-color; } } } // User Plan /////////////////////// .user-plan{ display: flex; flex-wrap: wrap; justify-content: space-between; padding: .75rem 0; &-title{ display: flex; align-items: center; color: $base-color; font-weight: $fw-bold; font-size: 1rem; .icon{ font-size: 1.5rem; @if($rtl==false){ margin-right: 0.75rem; } @if($rtl==true){ margin-left: 0.75rem; } color: $accent-color; } } &-info, &-actions { padding: 0.5rem 0; } &-status{ font-size: $fx-sz-13; font-weight: $fw-medium; color: $base-light; text-transform