carbon-components/scss/components/carousel/_carousel.scss

//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/vars';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/functions';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/css--typography';

@mixin carousel {
  @include deprecate(
    'The `carousel` component in `carbon-components` has been deprecated. ' + 'It will be removed in the next major release.'
  ) {
    .#{$prefix}--carousel {
      display: flex;
      align-items: center;
    }
    .#{$prefix}--carousel-container {
      max-width: rem(810px);
      overflow: hidden;
      padding: 0 1px;
    }
    .#{$prefix}--filmstrip {
      display: flex;
      justify-content: space-between;
      transition: transform 100ms $carbon--ease-in;
      padding: rem(24px) 0;
      width: auto;
    }
    .#{$prefix}--filmstrip-btn {
      @include button-reset;
      height: rem(20px);
      width: rem(20px);
      margin-bottom: 1rem;
      margin-right: rem(3px);
      margin-left: rem(3px);

      &:hover {
        cursor: pointer;
      }

      &:focus {
        @include focus-outline;
      }
    }

    .#{$prefix}--carousel__btn {
      @include button-reset(false);
      cursor: pointer;
      padding: 0;

      &:first-child {
        margin-right: 1.25rem;
      }

      &:last-child {
        margin-left: 1.25rem;
      }

      &:focus {
        @include focus-outline;
      }

      &:last-of-type {
        transform: rotate(180deg);
      }

      svg {
        height: rem(24px);
        width: rem(16px);
        fill: $brand-01;
      }
    }
    .#{$prefix}--carousel__item {
      @include button-reset;
      padding: 0;
      line-height: 0;
      margin-right: rem(20px);
      cursor: pointer;

      &:hover,
      &:focus {
        @include focus-outline;
      }
    }
    .#{$prefix}--carousel__item--active {
      @include focus-outline;
    }
  }
}

@include exports('carousel') {
  @if not(feature-flag-enabled('breaking-changes-x')) {
    @include carousel;
  }
}