@use 'sass:math';
+@use 'sass:color';
+
@use '_variables' as *;
@import '_bootstrap-mixins';
&:focus,
&:active {
text-decoration: none !important;
+ }
+
+ &:focus:not(.focus-visible) {
outline: none !important;
}
}
@mixin disable-outline {
&:focus:not(.focus-visible) {
- outline: none;
+ outline: none !important;
}
}
text-overflow: ellipsis;
}
-@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) {
- display: block;
- /* Fallback for non-webkit */
- display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
- -webkit-line-clamp: $number-of-lines;
- -webkit-box-orient: vertical;
- /* Fallback for non-webkit */
- font-size: $font-size;
- line-height: $line-height;
- overflow: hidden;
- text-overflow: ellipsis;
- max-height: $font-size * $number-of-lines;
-}
-
@mixin muted {
color: pvar(--greyForegroundColor) !important;
}
}
@mixin danger-button {
- $color: lighten($color: #c54130, $amount: 10);
+ $color: color.adjust($color: #c54130, $lightness: 10%);
$text: #fff6f5;
@include button-focus(scale-color($color, $alpha: -95%));
&:focus,
&[disabled],
&.disabled {
- background-color: lighten($color: $color, $amount: 10);
+ background-color: color.adjust($color: $color, $lightness: 10%);
}
&[disabled],
margin-bottom: 10px;
}
-@mixin create-button {
- @include peertube-button-link;
- @include orange-button;
- @include button-with-icon(20px, 5px, -1px);
-}
-
@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
display: flex;
min-height: $min-height;
transition: width 0.6s ease;
&.red {
- background-color: lighten($color: #c54130, $amount: 10);
+ background-color: color.adjust($color: #c54130, $lightness: 10%);
}
}
}
> div {
box-sizing: border-box;
- flex: 0 0 percentage(math.div(1, 3));
+ flex: 0 0 math.percentage(math.div(1, 3));
padding: 0 5px;
margin-bottom: 10px;
// an immediate's parent size. This allows to set a ratio without explicit
// dimensions, as width/height cannot be computed from each other.
@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
- $padding-percent: percentage($inverted-ratio);
+ $padding-percent: math.percentage($inverted-ratio);
position: relative;
height: 0;
@mixin on-small-main-col () {
:host-context(.main-col:not(.expanded)) {
- @media screen and (max-width: $small-view + $menu-width) {
+ @media screen and (max-width: #{$small-view + $menu-width}) {
@content;
}
}
@mixin on-mobile-main-col () {
:host-context(.main-col:not(.expanded)) {
- @media screen and (max-width: $mobile-view + $menu-width) {
+ @media screen and (max-width: #{$mobile-view + $menu-width}) {
@content;
}
}