The following classes can be used to alter states
<div class="sds-audyoPlayer">
<button type="button" class="sds-audyoPlayer__controls">
<span class="sds-audyoPlayer__controlPlay">
<span class="sds-audyoPlayer__playSegment"></span>
<span class="sds-audyoPlayer__playSegment"></span>
<span class="sds-audyoPlayer__playSegment"></span>
</span>
</button>
<div class="sds-audyoPlayer__meta">
<div class="sds-audyoPlayer__title">{file.title}</div>
<div class="sds-audyoPlayer__description">{file.description}</div>
</div>
<div class="sds-audyoPlayer__progressBars">
<div class="sds-audyoPlayer__barsWrap">
<div class="sds-audyoPlayer__barPlaying" style="width: 20%;"></div>
<div class="sds-audyoPlayer__barLoading" style="width: 50%;"></div>
<div class="sds-audyoPlayer__barSeeker" style="left: 85%;"></div>
</div>
</div>
<div class="sds-audyoPlayer__times">
<div class="sds-audyoPlayer__timePlayed">00:00</div>
<div class="sds-audyoPlayer__timeSeparator">/</div>
<div class="sds-audyoPlayer__timeDuration">00:00</div>
</div>
<audio preload="metadata" src="" type="{file.mimetype}"></audio>
</div>
<div class="{{ namespace }}audyoPlayer{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<button type="button" class="{{ namespace }}audyoPlayer__controls">
<span class="{{ namespace }}audyoPlayer__controlPlay">
<span class="{{ namespace }}audyoPlayer__playSegment"></span>
<span class="{{ namespace }}audyoPlayer__playSegment"></span>
<span class="{{ namespace }}audyoPlayer__playSegment"></span>
</span>
</button>
<div class="{{ namespace }}audyoPlayer__meta">
<div class="{{ namespace }}audyoPlayer__title">{file.title}</div>
<div class="{{ namespace }}audyoPlayer__description">{file.description}</div>
</div>
<div class="{{ namespace }}audyoPlayer__progressBars">
<div class="{{ namespace }}audyoPlayer__barsWrap">
<div class="{{ namespace }}audyoPlayer__barPlaying" style="width: 20%;"></div>
<div class="{{ namespace }}audyoPlayer__barLoading" style="width: 50%;"></div>
<div class="{{ namespace }}audyoPlayer__barSeeker" style="left: 85%;"></div>
</div>
</div>
<div class="{{ namespace }}audyoPlayer__times">
<div class="{{ namespace }}audyoPlayer__timePlayed">00:00</div>
<div class="{{ namespace }}audyoPlayer__timeSeparator">/</div>
<div class="{{ namespace }}audyoPlayer__timeDuration">00:00</div>
</div>
<audio preload="metadata" src="" type="{file.mimetype}"></audio>
</div>
/* variables specific to current element */
$audyo-player-inset-mobile: map-deep-get($token-spacer-inset-map, "md");
$audyo-player-inset-desktop: map-deep-get($token-spacer-inset-map, "lg");
$audyo-player-meta-offset-mobile: $audyo-player-inset-mobile + $icon-circle-regular-dimensions-global + map-deep-get($token-spacer-inline-map, "md");
$audyo-player-meta-offset-desktop: $audyo-player-inset-desktop + $icon-circle-regular-dimensions-global + map-deep-get($token-spacer-inline-map, "md");
.#{$namespace}audyoPlayer {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
padding: $audyo-player-inset-mobile;
display: flex;
align-items: center;
border-radius: map-deep-get($token-radius-map, "48");
position: relative;
z-index: z("zero");
@include media-breakpoint-up("lg") {
padding: $audyo-player-inset-desktop;
}
/* Pseudo Elements */
&::before,
&::after {
content: "";
position: absolute;
z-index: z("zero");
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
transition: opacity 0.15s linear;
pointer-events: none;
}
&::before {
box-shadow: map-deep-get($token-shadow-map, "active");
}
&::after {
box-shadow: map-deep-get($token-shadow-map, "detail");
opacity: 0;
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// audyoPlayer__childElement
//@include linear-gradient-to-right($primary, 0%, $primary-variation, 100%);
// apxmultimedia-audyo__control-play
&__controls {
margin-right: map-deep-get($token-spacer-inline-map, "md");
@include icon-btn-base();
@include icon-btn-default-size();
@include btn-secondary-all-states();
@extend .stretched-link;
}
&__controlPlay {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
// apxmultimedia-audyo__play-segment
&__playSegment {
position: absolute;
width: 2px;
height: 16px;
border-radius: 40px;
top: 50%;
transform: translateY(-50%);
left: 14px;
transition: all 150ms linear;
background-color: currentColor;
&:nth-child(2),
&:nth-child(3) {
height: 16px;
left: 20px;
}
&:nth-child(2) {
transform: rotate(-55deg);
top: 8px;
}
&:nth-child(3) {
transform: rotate(55deg);
top:16px;
}
}
&__progressBars{
width: 100%;
height: 100%;
position: absolute;
z-index: z("negative");
top: 0;
left: 0;
border-radius: inherit;
overflow: hidden;
}
&__meta {
position: absolute;
top: 0;
left: $audyo-player-meta-offset-mobile;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
@include media-breakpoint-up("lg") {
left: $audyo-player-meta-offset-desktop;
}
}
&__barsWrap{
height: inherit;
}
&__barPlaying,
&__barLoading {
position: absolute;
left: 0;
bottom: 0;
height: map-deep-get($token-sizes-unit-map, "4");
border-radius: map-deep-get($token-radius-map, "4");
}
&__barPlaying {
transition : width 20ms linear;
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
}
//apxmultimedia-audyo__bar-loading
&__barLoading{
transition : width 50ms linear;
z-index: z("negative");
@include custom-prop-fallback("background-color", "sys-color-background-secondary-30");
}
&__barSeeker{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: map-deep-get($token-spacer-inset-map, "xl");
width: $border-width*2;
z-index: z("low");
@include custom-prop-fallback("background-color", "sys-color-background-primary-100");
}
//apxmultimedia-audyo__times
&__times {
color: $secondary;
margin-left: auto;
display: flex;
align-items: center;
@extend %textHelper;
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
gap: map-deep-get($token-spacer-unit-map, "2");
padding: map-deep-get($token-spacer-inset-map, "xs");
border-radius: map-deep-get($token-radius-map, "20");
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
}
&__timePlayed,
&__timeDuration {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
}
&__timePlayed,
&__timeSeparator {
display: none;
}
&__timeSeparator {
@include custom-prop-fallback("color", "sys-color-text-primary-muted")
}
&__title {
@include fluid-type($min_width, $max_width, $font-size-lg-min, $font-size-lg-max);
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
}
&__description {
@extend %textHelper;
}
/* modifiers */
// audyoPlayer -playing
&.-playing {
#{$self}__meta {
display: none;
}
#{$self}__playSegment{
&:nth-child(2),
&:nth-child(3) {
transform: rotate(0);
top: 12px;
left: 24px;
height: 8px;
}
&:nth-child(3) {
top: 20px;
}
}
}
&.-started,
&.-playing {
#{$self}__controls {
&::after {
content: none;
}
}
@media (hover: hover) {
&:hover {
#{$self}__barSeeker {
display: block;
}
}
}
#{$self}__timeDuration {
@include custom-prop-fallback("color", "sys-color-text-primary-muted")
}
#{$self}__timePlayed,
#{$self}__timeSeparator {
display: inline;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}