peertube-plugin-livechat/assets/styles/mixins/_buttons.scss

90 lines
1.8 KiB
SCSS
Raw Normal View History

/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
* SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@use "sass:color";
@use "../variables";
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
// We need this variable to be known at that time
$bs-green: #39cc0b;
@mixin button-row {
// Peertube rounded-line-height-1-5 mixins
line-height: variables.$button-calc-line-height;
// Peertube peertube-button mixin (but with less horizontal padding)
padding: 4px;
border: 0;
font-weight: variables.$font-semibold;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: variables.$button-font-size;
}
@mixin button-row-add {
@include button-row;
background-color: var(--bs-green);
&,
&:active,
&:focus {
color: #fff;
background-color: color.adjust($bs-green, $lightness: 5%);
}
&:focus,
&.focus-visible {
box-shadow: 0 0 0 0.2rem color.adjust($bs-green, $lightness: 20%);
}
&:hover {
color: #fff;
background-color: color.adjust($bs-green, $lightness: 10%);
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
}
}
@mixin button-row-remove {
@include button-row;
background-color: var(--bs-orange);
&,
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
}
&:focus,
&.focus-visible {
box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
}
}