signal-desktop/stylesheets/components/CallSettingsButton.scss
2024-11-15 15:09:31 -08:00

62 lines
1.4 KiB
SCSS

// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
@mixin CallSettingsButton-icon($path) {
@include mixins.color-svg($path, variables.$color-gray-15);
}
.CallSettingsButton__Button {
align-items: center;
background-color: variables.$color-gray-78;
border: none;
border-radius: 40px;
display: flex;
height: 36px;
justify-content: center;
outline: none;
width: 36px;
@include mixins.keyboard-mode {
&:focus {
outline-offset: 1px;
outline: 2px solid variables.$color-ultramarine;
}
}
}
.CallSettingsButton__Icon {
height: 20px;
width: 20px;
border: none;
}
.CallSettingsButton__Icon--Cancel {
@include CallSettingsButton-icon('../images/icons/v3/x/x.svg');
}
.CallSettingsButton__Icon--SidebarView {
@include CallSettingsButton-icon(
'../images/icons/v3/sidebar_view/sidebar_view.svg'
);
}
.CallSettingsButton__Icon--PaginatedView {
@include CallSettingsButton-icon('../images/icons/v3/grid/grid.svg');
}
.CallSettingsButton__Icon--Pip {
@include CallSettingsButton-icon('../images/icons/v3/pip/pip.svg');
}
.CallSettingsButton__Icon--Settings {
@include CallSettingsButton-icon('../images/icons/v3/settings/settings.svg');
}
.CallSettingsButton__Icon--SpeakerView {
@include CallSettingsButton-icon(
'../images/icons/v3/speaker_view/speaker_view.svg'
);
}