Packages
noora
0.82.1
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
css/avatar.css
.noora-avatar {
--noora-avatar-gray-background: light-dark(
var(--noora-neutral-light-300),
var(--noora-neutral-dark-900)
);
--noora-avatar-gray-label: light-dark(
var(--noora-neutral-light-1200),
var(--noora-neutral-dark-50)
);
--noora-avatar-red-background: light-dark(
var(--noora-red-100),
var(--noora-red-800)
);
--noora-avatar-red-label: light-dark(
var(--noora-red-800),
var(--noora-red-100)
);
--noora-avatar-orange-background: light-dark(
var(--noora-orange-100),
var(--noora-orange-800)
);
--noora-avatar-orange-label: light-dark(
var(--noora-orange-800),
var(--noora-orange-100)
);
--noora-avatar-yellow-background: light-dark(
var(--noora-yellow-100),
var(--noora-yellow-800)
);
--noora-avatar-yellow-label: light-dark(
var(--noora-yellow-800),
var(--noora-yellow-100)
);
--noora-avatar-azure-background: light-dark(
var(--noora-azure-100),
var(--noora-azure-800)
);
--noora-avatar-azure-label: light-dark(
var(--noora-azure-800),
var(--noora-azure-100)
);
--noora-avatar-blue-background: light-dark(
var(--noora-blue-100),
var(--noora-blue-800)
);
--noora-avatar-blue-label: light-dark(
var(--noora-blue-800),
var(--noora-blue-100)
);
--noora-avatar-purple-background: light-dark(
var(--noora-purple-100),
var(--noora-purple-800)
);
--noora-avatar-purple-label: light-dark(
var(--noora-purple-800),
var(--noora-purple-100)
);
--noora-avatar-pink-background: light-dark(
var(--noora-pink-100),
var(--noora-pink-800)
);
--noora-avatar-pink-label: light-dark(
var(--noora-pink-800),
var(--noora-pink-100)
);
--noora-size-2xsmall: 20px;
--noora-size-xsmall: 24px;
--noora-size-small: 32px;
--noora-size-medium: 40px;
--noora-size-large: 46px;
--noora-size-xlarge: 56px;
--noora-size-2xlarge: 64px;
display: flex;
align-items: center;
border-radius: var(--noora-radius-6);
overflow: hidden;
&[data-color="gray"] {
background-color: var(--noora-avatar-gray-background);
& [data-part="initials"] {
color: var(--noora-avatar-gray-label);
}
}
&[data-color="red"] {
background-color: var(--noora-avatar-red-background);
& [data-part="initials"] {
color: var(--noora-avatar-red-label);
}
}
&[data-color="orange"] {
background-color: var(--noora-avatar-orange-background);
& [data-part="initials"] {
color: var(--noora-avatar-orange-label);
}
}
&[data-color="yellow"] {
background-color: var(--noora-avatar-yellow-background);
& [data-part="initials"] {
color: var(--noora-avatar-yellow-label);
}
}
&[data-color="azure"] {
background-color: var(--noora-avatar-azure-background);
& [data-part="initials"] {
color: var(--noora-avatar-azure-label);
}
}
&[data-color="blue"] {
background-color: var(--noora-avatar-blue-background);
& [data-part="initials"] {
color: var(--noora-avatar-blue-label);
}
}
&[data-color="purple"] {
background-color: var(--noora-avatar-purple-background);
& [data-part="initials"] {
color: var(--noora-avatar-purple-label);
}
}
&[data-color="pink"] {
background-color: var(--noora-avatar-pink-background);
& [data-part="initials"] {
color: var(--noora-avatar-pink-label);
}
}
&[data-size="2xsmall"] {
border-radius: var(--noora-radius-2);
&,
& [data-part="image"],
.noora-avatar__fallback-image {
width: var(--noora-size-2xsmall);
height: var(--noora-size-2xsmall);
}
& [data-part="initials"] {
font: var(--noora-font-weight-regular) var(--noora-font-body-medium);
}
}
&[data-size="xsmall"] {
border-radius: var(--noora-radius-2);
&,
& [data-part="image"],
.noora-avatar__fallback-image {
width: var(--noora-size-xsmall);
height: var(--noora-size-xsmall);
}
& [data-part="initials"] {
font: var(--noora-font-weight-regular) var(--noora-font-body-medium);
}
}
&[data-size="small"] {
border-radius: var(--noora-radius-3);
&,
& [data-part="image"],
.noora-avatar__fallback-image {
width: var(--noora-size-small);
height: var(--noora-size-small);
}
& [data-part="initials"] {
font: var(--noora-font-weight-regular) var(--noora-font-body-medium);
}
}
&[data-size="medium"] {
border-radius: var(--noora-radius-4);
&,
& [data-part="image"],
.noora-avatar__fallback-image {
width: var(--noora-size-medium);
height: var(--noora-size-medium);
}
& [data-part="initials"] {
font: var(--noora-font-weight-regular) var(--noora-font-body-large);
}
}
&[data-size="large"] {
border-radius: var(--noora-radius-4);
&,
& [data-part="image"],
.noora-avatar__fallback-image {
width: var(--noora-size-large);
height: var(--noora-size-large);
}
& [data-part="initials"] {
font: var(--noora-font-weight-regular) var(--noora-font-heading-small);
}
}
&[data-size="xlarge"] {
border-radius: var(--noora-radius-6);
&,
& [data-part="image"],
.noora-avatar__fallback-image {
width: var(--noora-size-xlarge);
height: var(--noora-size-xlarge);
}
& [data-part="initials"] {
font: var(--noora-font-weight-regular) var(--noora-font-heading-medium);
}
}
&[data-size="2xlarge"] {
border-radius: var(--noora-radius-6);
&,
& [data-part="image"],
.noora-avatar__fallback-image {
width: var(--noora-size-2xlarge);
height: var(--noora-size-2xlarge);
}
& [data-part="initials"] {
font: var(--noora-font-weight-regular) var(--noora-font-heading-large);
}
}
& [data-part="image"],
.noora-avatar__fallback-image {
position: relative;
top: 0;
left: 0;
}
& [data-part="image"] {
display: none;
}
& [data-part="image"][data-state="visible"] {
display: block;
}
& [data-part="fallback"][data-state="hidden"] {
display: none;
}
& [data-part="initials"] {
flex-grow: 1;
font: var(--noora-font-weight-regular) var(--noora-font-heading-large);
text-align: center;
}
& [data-part="fallback-image-background"] {
fill: var(--noora-avatar-gray-background);
}
& [data-part="fallback-image-label"] {
fill: var(--noora-avatar-gray-label);
}
}