88 lines
1.8 KiB
SCSS
88 lines
1.8 KiB
SCSS
|
// Copyright 2021 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
@use '../mixins';
|
||
|
|
@use '../variables';
|
||
|
|
|
||
|
|
// This needs to go before the top-level class, so it doesn't interfere
|
||
|
|
.AttachmentDetailPill--interactive {
|
||
|
|
@include mixins.button-reset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AttachmentDetailPill {
|
||
|
|
position: absolute;
|
||
|
|
top: 6px;
|
||
|
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||
|
|
left: 6px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 32px;
|
||
|
|
background-color: variables.$color-black-alpha-80;
|
||
|
|
|
||
|
|
display: inline-flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
z-index: variables.$z-index-above-base;
|
||
|
|
|
||
|
|
@include mixins.font-caption;
|
||
|
|
color: variables.$color-white;
|
||
|
|
|
||
|
|
transition: width 400ms ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AttachmentDetailPill__spinner-wrapper {
|
||
|
|
position: relative;
|
||
|
|
margin: 4px;
|
||
|
|
margin-inline-end: -4px;
|
||
|
|
|
||
|
|
.ProgressCircle .ProgressCircle__background {
|
||
|
|
stroke: variables.$color-white-alpha-20;
|
||
|
|
}
|
||
|
|
.ProgressCircle .ProgressCircle__fill {
|
||
|
|
stroke: variables.$color-white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.module-spinner__circle {
|
||
|
|
background-color: variables.$color-white-alpha-20;
|
||
|
|
}
|
||
|
|
|
||
|
|
.module-spinner__arc {
|
||
|
|
background-color: variables.$color-white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.AttachmentDetailPill__text-wrapper {
|
||
|
|
margin-inline-start: 10px;
|
||
|
|
margin-inline-end: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AttachmentDetailPill__icon-wrapper {
|
||
|
|
position: relative;
|
||
|
|
margin-inline-start: 4px;
|
||
|
|
margin-inline-end: -11px;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AttachmentDetailPill__stop-icon {
|
||
|
|
@include mixins.position-absolute-center;
|
||
|
|
|
||
|
|
// Smaller to fit within the spinner
|
||
|
|
height: 12px;
|
||
|
|
width: 12px;
|
||
|
|
@include mixins.color-svg(
|
||
|
|
'../images/icons/v3/stop/stop-fill.svg',
|
||
|
|
variables.$color-white
|
||
|
|
);
|
||
|
|
}
|
||
|
|
.AttachmentDetailPill__download-icon {
|
||
|
|
@include mixins.position-absolute-center;
|
||
|
|
|
||
|
|
height: 16px;
|
||
|
|
width: 16px;
|
||
|
|
@include mixins.color-svg(
|
||
|
|
'../images/icons/v3/arrow/arrow-down.svg',
|
||
|
|
variables.$color-white
|
||
|
|
);
|
||
|
|
}
|