UI Enhancement: try to make it clearer which persona is being used, by scaling the non active ones down and setting an opacity for the icon (unused scale/opacity 0.75 - hover unused opacity/scale 0.9)
}
&--anon {
+ &:not(.pinnedatoms__pinnedatom--active) {
+ transition: all linear 0.2s;
+ transform: scale(0.75);
+
+ .pinnedatoms__pinnedatom__anonicon {
+ opacity: 0.75;
+ }
+
+ &:hover {
+ transition: all linear 0.2s;
+ transform: scale(0.9);
+
+ .pinnedatoms__pinnedatom__anonicon {
+ opacity: 0.9;
+ }
+ }
+ }
+
--local-primary: #{$won-line-gray};
.pinnedatoms__pinnedatom__anonicon {
@include square-image($feedIconSize);
+ &:not(.pinnedatoms__pinnedatom--active):not(.pinnedatoms__pinnedatom--anon) {
+ transition: all linear 0.2s;
+ transform: scale(0.75);
+
+ won-atom-icon {
+ opacity: 0.75;
+ }
+
+ &:hover {
+ transition: all linear 0.2s;
+ transform: scale(0.9);
+
+ won-atom-icon {
+ opacity: 0.9;
+ }
+ }
+ }
+
&--active {
+ transition: all linear 0.2s;
.pinnedatoms__pinnedatom__anonicon,
.image {
box-shadow: 0 0 5px 5px var(--won-secondary-text-color);
