-@import '_variables';
-@import '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
$nav-preview-tab-height: 30px;
$base-padding: 15px;
}
.nav-preview {
+ @include padding-left(10px);
+ @include padding-right(10px);
+
display: block;
- text-align: right;
+ text-align: end;
padding-top: 10px;
padding-bottom: 10px;
- padding-left: 10px;
- padding-right: 10px;
border-top: 1px dashed $input-border-color;
border-left: 1px solid $input-border-color;
border-right: 1px solid $input-border-color;
border-bottom: 2px solid pvar(--mainColor);
:first-child {
- margin-left: auto;
+ @include margin-left(auto);
}
::ng-deep {
}
.maximize-button {
- margin-left: 5px;
+ @include margin-left(5px);
}
}
}
.nav-preview {
@include nav-preview-medium();
- padding-top: #{$nav-preview-vertical-padding / 2};
- padding-bottom: #{$nav-preview-vertical-padding / 2};
- padding-left: 0;
- padding-right: 0;
+ @include padding-right(0);
+ @include padding-left(0);
+
+ padding-top: math.div($nav-preview-vertical-padding, 2);
+ padding-bottom: math.div($nav-preview-vertical-padding, 2);
position: absolute;
background-color: pvar(--mainBackgroundColor);
width: 100% !important;
border-right: 0;
:last-child {
- margin-right: pvar(--horizontalMarginContent);
+ @include margin-right(pvar(--horizontalMarginContent));
}
}
.nav-preview {
::ng-deep .nav-link {
@include ellipsis();
+ @include margin-right(10px !important);
display: block !important;
max-width: 45% !important;
padding: 5px 0 !important;
- margin-right: 10px !important;
text-align: center;
&:not(.active) {