signal-desktop/stylesheets/components/CallLinkEditModal.scss
2024-06-10 08:23:43 -07:00

139 lines
2.6 KiB
SCSS

// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.CallLinkEditModal__SrOnly {
@include sr-only;
}
.CallLinkEditModal__Header {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 26px;
}
.CallLinkEditModal__Header__Details {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0; // fix overflow issue
}
// Overriding default style
.Input__container.CallLinkEditModal__Input--Name__container {
margin: 0;
}
.CallLinkEditModal__CallLinkAndJoinButton {
display: flex;
gap: 14px;
align-items: center;
}
.CallLinkEditModal__CopyUrlTextButton {
@include button-reset;
border: none;
padding-block: 10px;
padding-inline: 8px;
border-radius: 6px;
flex: 1;
// truncate with ellipsis
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include light-theme {
background: $color-gray-02;
color: $color-black;
}
@include dark-theme {
background: $color-gray-75;
color: $color-gray-15;
}
}
.CallLinkEditModal__JoinButton {
@include font-body-1-bold;
}
.CallLinkEditModal__ApproveAllMembers__Row {
display: flex;
align-items: center;
margin-bottom: 18px;
}
.CallLinkEditModal__ApproveAllMembers__Label {
flex: 1;
}
.CallLinkEditModal__ActionButton {
@include button-reset;
@include font-body-2;
display: flex;
gap: 8px;
align-items: center;
padding-block: 8px;
width: 100%;
@include light-theme {
color: $color-black;
}
@include dark-theme {
color: $color-gray-15;
}
}
.CallLinkEditModal__ActionButton__Icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 9999px;
@include light-theme {
background: $color-gray-05;
}
@include dark-theme {
background: $color-gray-65;
}
&::after {
content: '';
display: block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
.CallLinkEditModal__ActionButton__Icon--Copy {
&::after {
@include light-theme {
@include color-svg('../images/icons/v3/copy/copy.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/copy/copy.svg', $color-gray-15);
}
}
}
.CallLinkEditModal__ActionButton__Icon--Share {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/forward/forward.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/forward/forward.svg',
$color-gray-15
);
}
}
}