n8n/packages/design-system/src/css/carousel-item.scss
कारतोफ्फेलस्क्रिप्ट™ 13659d036f
ci: Ensure that eslint runs on all frontend code (no-changelog) (#4602)
* ensure that eslint runs on all frontend code

* remove tslint from `design-system`

* enable prettier and eslint-prettier for `design-system`

* Delete tslint.json

* use a single editorconfig for the repo

* enable prettier for all code in `design-system`

* more linting fixes on design-system

* ignore coverage for git and prettier

* lintfix on editor-ui
2022-11-15 18:20:54 +01:00

51 lines
925 B
SCSS

@use 'mixins/mixins';
@use './common/var';
@include mixins.b(carousel) {
@include mixins.e(item) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
z-index: #{var.$index-normal - 1};
@include mixins.when(active) {
z-index: #{var.$index-normal + 1};
}
@include mixins.when(animating) {
transition: transform 0.4s ease-in-out;
}
@include mixins.m(card) {
width: 50%;
transition: transform 0.4s ease-in-out;
&.is-in-stage {
cursor: pointer;
z-index: var.$index-normal;
&:hover .el-carousel__mask,
&.is-hover .el-carousel__mask {
opacity: 0.12;
}
}
&.is-active {
z-index: #{var.$index-normal + 1};
}
}
}
@include mixins.e(mask) {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var.$color-white;
opacity: 0.24;
transition: 0.2s;
}
}