less-plugin-dls/tokens/components/carousel.less

Less plugin for Baidu Light DLS.

@import "../global.less";

/* Indicators */
@dls-carousel-indicator-width: @dls-height-unit * 3;
@dls-carousel-indicator-width-current: @dls-height-unit * 9;
@dls-carousel-indicator-height: @dls-height-unit * 0.75;
@dls-carousel-indicator-dot-size: @dls-height-unit * 1.5;
@dls-carousel-indicator-border-radius: (@dls-carousel-indicator-height / 2);
@dls-carousel-indicator-spacing-outer: @dls-padding-unit * 3;
@dls-carousel-indicator-spacing-inner: @dls-padding-unit * 1;
@dls-carousel-indicator-background-color: fade(@dls-foreground-color-reverse, 30%);
@dls-carousel-indicator-background-color-hover: fade(@dls-foreground-color-reverse, 40%);
@dls-carousel-indicator-background-color-active: @dls-foreground-color-reverse;
@dls-carousel-indicator-background-color-current: @dls-foreground-color-reverse;
@dls-carousel-indicator-background-color-outside: @dls-background-color-base-3;
@dls-carousel-indicator-background-color-outside-hover: @dls-background-color-base-3-hover;
@dls-carousel-indicator-background-color-outside-active: @dls-background-color-base-3-active;
@dls-carousel-indicator-background-color-outside-current: @dls-foreground-color-primary;

/* Controls */
@dls-carousel-control-size: @dls-height-unit * 8;
@dls-carousel-control-border-radius: 50%;
@dls-carousel-control-shadow: @dls-shadow-2;
@dls-carousel-control-icon-size: @dls-height-unit * 4;
@dls-carousel-control-spacing-inside: @dls-padding-unit * 6;
@dls-carousel-control-spacing-outside: @dls-padding-unit * 4;

/* Pages */
@dls-carousel-pages-height: @dls-height-unit * 5;
@dls-carousel-pages-font-size: @dls-font-size-0;
@dls-carousel-pages-font-color: @dls-foreground-color-reverse;
@dls-carousel-pages-background-color: @dls-background-color-translucent;
@dls-carousel-pages-padding-x: @dls-padding-unit * 1;
@dls-carousel-pages-border-radius: @dls-border-radius-1;

@dls-carousel-slide-gutter: @dls-padding-unit * 3;