12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- @use '../tools' as *;
- // user avatars
- .avatar {
- border-radius: 100%;
- position: relative;
- display: inline-block;
- vertical-align: middle;
- text-align: center;
- overflow: hidden;
- width: 50px;
- height: 50px;
- img {
- position: absolute;
- z-index: 2;
- top: 0;
- inset-inline-start: 0;
- inset-inline-end: 0;
- border: 0;
- object-fit: cover;
- width: 100%;
- height: 100%;
- }
- &.small {
- vertical-align: middle;
- margin: 0 0.5em;
- width: 25px;
- height: 25px;
- }
- &.large {
- width: 60px;
- height: 60px;
- @include media-breakpoint-up(sm) {
- width: 80px;
- height: 80px;
- }
- }
- &.square {
- border-radius: 0;
- }
- }
- .avatar--edit {
- overflow: visible;
- flex-shrink: 0;
- img {
- border-radius: 50%;
- z-index: auto;
- }
- }
- .avatar__edit-link {
- width: theme('spacing.5');
- height: theme('spacing.5');
- border-radius: 50%;
- border: theme('spacing.px') solid theme('colors.border-furniture');
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- top: 100%;
- inset-inline-start: 50%;
- transform: translate(calc(var(--w-direction-factor) * -50%), -50%);
- background-color: theme('colors.surface-page');
- .icon {
- width: theme('spacing.[2.5]');
- height: theme('spacing.[2.5]');
- }
- }
|