_carousel.scss

@charset "UTF-8";

/**
 * Copyright 2016 Leif Olsen. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * A carousel ...
 */

// Use of this module requires the user to include variables from material-design-lite
//@import "../../node_modules/material-design-lite/src/variables";
//@import "../../node_modules/material-design-lite/src/mixins";

ul.mdlext-carousel {
  list-style: none;
}

.mdlext-carousel {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;  // Use a container to constrain height and width
  width: 100%;
  display: block;
  white-space: nowrap;
  font-size: 0;
  background-color: transparent;
}

.mdlext-carousel__slide {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  outline: 0;
  margin: 0 $mdlext-carousel-slide-margin-horizontal;
  padding:0;
  height: 100%;
  border-top: $mdlext-carousel-slide-border-top-width solid transparent; // Makes room for the animated select/focus line

  //&:focus,
  &[aria-selected],
  &[aria-selected='true'] {
    figcaption {
      // As far as I can see there is no way to darken/lighten a text color
      // defined by MDL, due to the "unqote" functions.
      // So this is a hack
      color: rgba(0, 0, 0, 1) !important;
      background-color: rgba(255, 255, 255, 0.25);
    }
  }

  &[aria-selected]::after,
  &[aria-selected='true']::after {
    height: $mdlext-carousel-slide-border-top-width;
    width: 100%;
    display: block;
    content: ' ';
    top: (-$mdlext-carousel-slide-border-top-width);
    left: 0;
    position: absolute;
    background: $mdlext-carousel-slide-border-top-color;
    animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
    transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
  }


  a {
    text-decoration: none;
  }

  figure {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;

    img {
      box-sizing: border-box;
      max-height: 100%;
    }

    figcaption {
      box-sizing: border-box;
      @include typo-caption($colorContrast: false, $usePreferred: true);

      color: $mdlext-carousel-slide-figcaption-color;
      position: absolute;
      bottom: 0;
      left: 0;
      white-space: nowrap;
      overflow: hidden;
      max-width: 100%;
      width: 100%;
      text-align: center;
      text-overflow: ellipsis;
      padding: 4px 0;
    }
    &:hover {
      figcaption {
        // As far as I can see there is no way to darken/lighten a text color
        // defined by MDL, due to the "unqote" functions.
        // So this is a hack
        color: rgba(0, 0, 0, 1) !important;
        background-color: rgba(255, 255, 255, 0.25);
      }
    }
  }

  .mdlext-carousel__slide__ripple-container {
    text-decoration: none;
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    outline: 0;

    & .mdl-ripple {
      background: $mdlext-carousel-slide-ripple-color;
    }
  }
}