signal-desktop/stylesheets/components/ChatColorPicker.scss
2021-05-28 09:15:17 -07:00

58 lines
1.1 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.ChatColorPicker {
$bubble-size: 40px;
&__bubbles {
align-items: center;
display: grid;
grid-gap: 24px;
grid-template-columns: repeat(auto-fit, $bubble-size);
justify-content: center;
margin: 20px 0;
}
&__bubble {
align-items: center;
background-color: $color-gray-05;
display: flex;
justify-content: center;
@include color-bubble($bubble-size);
&--selected {
border-color: $color-gray-75;
@include dark-theme {
border-color: $color-white;
}
&:hover {
&::after {
content: '';
display: block;
height: 24px;
width: 24px;
@include color-svg(
'../images/icons/v2/more-horiz-24.svg',
$color-gray-05
);
}
}
}
@include keyboard-mode {
&:focus {
border-color: $color-ultramarine;
outline: none;
}
}
}
&__add-icon {
@include color-svg('../images/icons/v2/plus-24.svg', $color-gray-90);
display: block;
height: 24px;
width: 24px;
}
}