[7304c7f] | 1 | .avatar {
|
---|
| 2 | display: inline-block;
|
---|
| 3 | margin-bottom: 0;
|
---|
| 4 | height: $default-avatar-size;
|
---|
| 5 | width: $default-avatar-size;
|
---|
| 6 | border-radius: 50%;
|
---|
| 7 |
|
---|
| 8 | .avatar-title {
|
---|
| 9 | background: #d7d7d7;
|
---|
| 10 | width: 100%;
|
---|
| 11 | height: 100%;
|
---|
| 12 | display: flex;
|
---|
| 13 | align-items: center;
|
---|
| 14 | justify-content: center;
|
---|
| 15 | text-transform: uppercase;
|
---|
| 16 | font-size: $default-font-size + 5;
|
---|
| 17 | }
|
---|
| 18 |
|
---|
| 19 | & > a {
|
---|
| 20 | width: 100%;
|
---|
| 21 | height: 100%;
|
---|
| 22 | display: block;
|
---|
| 23 | transition: color .3s;
|
---|
| 24 | color: $color-primary;
|
---|
| 25 |
|
---|
| 26 | &:hover, &:focus {
|
---|
| 27 | color: $default-text-color;
|
---|
| 28 | }
|
---|
| 29 | }
|
---|
| 30 |
|
---|
| 31 | & > a > img, & > img {
|
---|
| 32 | width: 100%;
|
---|
| 33 | height: 100%;
|
---|
| 34 | object-fit: cover;
|
---|
| 35 | }
|
---|
| 36 |
|
---|
| 37 | &.avatar-sm {
|
---|
| 38 | height: $default-avatar-size - 1;
|
---|
| 39 | width: $default-avatar-size - 1;
|
---|
| 40 |
|
---|
| 41 | .avatar-title {
|
---|
| 42 | font-size: $default-font-size
|
---|
| 43 | }
|
---|
| 44 |
|
---|
| 45 | &.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
|
---|
| 46 | &:before {
|
---|
| 47 | width: .8rem;
|
---|
| 48 | height: .8rem;
|
---|
| 49 | }
|
---|
| 50 | }
|
---|
| 51 | }
|
---|
| 52 |
|
---|
| 53 | &.avatar-lg {
|
---|
| 54 | height: $default-avatar-size + 1.5;
|
---|
| 55 | width: $default-avatar-size + 1.5;
|
---|
| 56 |
|
---|
| 57 | .avatar-title {
|
---|
| 58 | font-size: $default-font-size + 15
|
---|
| 59 | }
|
---|
| 60 |
|
---|
| 61 | &.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
|
---|
| 62 | &:before {
|
---|
| 63 | width: 1.3rem;
|
---|
| 64 | height: 1.3rem;
|
---|
| 65 | right: 4px;
|
---|
| 66 | }
|
---|
| 67 | }
|
---|
| 68 | }
|
---|
| 69 |
|
---|
| 70 | &.avatar-xl {
|
---|
| 71 | height: $default-avatar-size + 2.8;
|
---|
| 72 | width: $default-avatar-size + 2.8;
|
---|
| 73 |
|
---|
| 74 | .avatar-title {
|
---|
| 75 | font-size: $default-font-size + 25
|
---|
| 76 | }
|
---|
| 77 |
|
---|
| 78 | &.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
|
---|
| 79 | &:before {
|
---|
| 80 | width: 1.6rem;
|
---|
| 81 | height: 1.6rem;
|
---|
| 82 | top: 3px;
|
---|
| 83 | right: 3px;
|
---|
| 84 | }
|
---|
| 85 | }
|
---|
| 86 | }
|
---|
| 87 |
|
---|
| 88 | &.avatar-state-primary, &.avatar-state-success, &.avatar-state-danger, &.avatar-state-warning, &.avatar-state-info, &.avatar-state-secondary, &.avatar-state-light, &.avatar-state-dark {
|
---|
| 89 | position: relative;
|
---|
| 90 |
|
---|
| 91 | &:before {
|
---|
| 92 | content: "";
|
---|
| 93 | position: absolute;
|
---|
| 94 | display: block;
|
---|
| 95 | width: 1rem;
|
---|
| 96 | height: 1rem;
|
---|
| 97 | border-radius: 50%;
|
---|
| 98 | top: 0px;
|
---|
| 99 | right: 0px;
|
---|
| 100 | border: 3px solid white;
|
---|
| 101 | }
|
---|
| 102 | }
|
---|
| 103 |
|
---|
| 104 | &.avatar-state-primary:before {
|
---|
| 105 | background: $color-primary;
|
---|
| 106 | }
|
---|
| 107 |
|
---|
| 108 | &.avatar-state-success:before {
|
---|
| 109 | background: $color-success;
|
---|
| 110 | }
|
---|
| 111 |
|
---|
| 112 | &.avatar-state-danger:before {
|
---|
| 113 | background: $color-danger;
|
---|
| 114 | }
|
---|
| 115 |
|
---|
| 116 | &.avatar-state-warning:before {
|
---|
| 117 | background: $color-warning;
|
---|
| 118 | }
|
---|
| 119 |
|
---|
| 120 | &.avatar-state-info:before {
|
---|
| 121 | background: $color-info;
|
---|
| 122 | }
|
---|
| 123 |
|
---|
| 124 | &.avatar-state-secondary:before {
|
---|
| 125 | background: $color-secondary;
|
---|
| 126 | }
|
---|
| 127 |
|
---|
| 128 | &.avatar-state-light:before {
|
---|
| 129 | background: $color-light;
|
---|
| 130 | }
|
---|
| 131 |
|
---|
| 132 | &.avatar-state-dark:before {
|
---|
| 133 | background: $color-dark;
|
---|
| 134 | }
|
---|
| 135 | }
|
---|
| 136 |
|
---|
| 137 | .avatar-group {
|
---|
| 138 | display: inline-flex;
|
---|
| 139 |
|
---|
| 140 | .avatar {
|
---|
| 141 | margin-right: -1rem;
|
---|
| 142 | border: 2px solid white;
|
---|
| 143 |
|
---|
| 144 | &:last-child {
|
---|
| 145 | margin-right: 0;
|
---|
| 146 | }
|
---|
| 147 |
|
---|
| 148 | &:hover {
|
---|
| 149 | position: relative;
|
---|
| 150 | z-index: 1;
|
---|
| 151 | }
|
---|
| 152 | }
|
---|
| 153 | }
|
---|