mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-19 17:00:13 +01:00
feat: add mixin for swiper arrows styling
This commit is contained in:
parent
d6bae6cff6
commit
83f1160180
1 changed files with 81 additions and 0 deletions
81
docs/app/@theme/styles/_swiper_ngx-admin.scss
Normal file
81
docs/app/@theme/styles/_swiper_ngx-admin.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Akveo. All Rights Reserved.
|
||||||
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin swiper-navigation-arrows($config) {
|
||||||
|
$position: map-get($config, 'position');
|
||||||
|
$positionXl: map-get($config, 'positionXl');
|
||||||
|
|
||||||
|
.swiper-button-prev, .swiper-button-next {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-image: none;
|
||||||
|
height: 5rem;
|
||||||
|
width: 5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: nb-theme(shadow-default);
|
||||||
|
top: map-get($config, 'top');
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: nb-theme(shadow-hover-btn);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
box-shadow: nb-theme(shadow-active-btn);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-prev {
|
||||||
|
@if (type-of($position) == map) {
|
||||||
|
left: map-get($position, 'left');
|
||||||
|
} @else {
|
||||||
|
left: $position;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-next {
|
||||||
|
@if (type-of($position) == map) {
|
||||||
|
right: map-get($position, 'right');
|
||||||
|
} @else {
|
||||||
|
right: $position;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(xl) {
|
||||||
|
.swiper-button-prev {
|
||||||
|
@if (type-of($positionXl) == map) {
|
||||||
|
left: map-get($positionXl, 'left');
|
||||||
|
} @else {
|
||||||
|
left: $positionXl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-next {
|
||||||
|
@if (type-of($positionXl) == map) {
|
||||||
|
right: map-get($positionXl, 'right');
|
||||||
|
} @else {
|
||||||
|
right: $positionXl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(lg) {
|
||||||
|
.swiper-button-prev, .swiper-button-next {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(is) {
|
||||||
|
.swiper-button-prev, .swiper-button-next {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue