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

66 lines
1.3 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.GradientDial {
&__container {
height: 100%;
@include mixins.position-absolute-center;
width: 100%;
}
&__bar {
&--container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
&--node {
background: variables.$color-white;
border: 1px solid variables.$color-black-alpha-20;
height: 100%;
height: 1000px;
inset-inline-start: 50%;
position: absolute;
top: 50%;
transform-origin: center;
width: 4px;
}
}
&__knob {
@include mixins.color-bubble(42px);
& {
box-shadow: 0 0 4px variables.$color-black-alpha-20;
cursor: move;
margin-inline-start: -20px;
margin-top: -20px;
padding: 2px;
position: absolute;
z-index: variables.$z-index-base;
}
&--selected {
border-color: variables.$color-gray-75;
@include mixins.dark-theme {
border-color: variables.$color-white;
}
}
&:focus {
outline: none;
}
@include mixins.keyboard-mode {
&:focus {
border-color: variables.$color-ultramarine;
outline: none;
}
}
}
}