penpot/frontend/src/app/main/ui/components/radio_buttons.scss

72 lines
1.6 KiB
SCSS

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
.radio-btn-wrapper {
@include flexCenter;
border-radius: $br-8;
height: $s-32;
background-color: var(--input-background-color);
}
.radio-icon {
@extend .button-radio;
height: $s-32;
flex-grow: 1;
border-radius: $s-8;
box-sizing: content-box;
border: none;
input {
display: none;
}
svg {
@extend .button-icon;
stroke: var(--radio-btn-foreground-color);
}
.title-name {
@include tabTitleTipography;
color: var(--radio-btn-foreground-color);
}
&:hover {
border: none;
svg {
color: var(--radio-btn-foreground-color-selected);
}
}
&.checked {
border: none;
background-color: var(--radio-btn-background-color-selected);
box-shadow: var(--radio-button-box-shadow);
svg {
stroke: var(--radio-btn-foreground-color-selected);
}
.title-name {
color: var(--radio-btn-foreground-color-selected);
}
}
&.disabled {
cursor: default;
background-color: transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}
.title-name {
color: var(--button-foreground-color-disabled);
}
&:hover {
border: none;
background-color: transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}
.title-name {
color: var(--button-foreground-color-disabled);
}
}
}
}