github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/sass/components/_slider.scss (about)

     1  .slider {
     2    position: relative;
     3    height: 400px;
     4    width: 100%;
     5  
     6    // Fullscreen slider
     7    &.fullscreen {
     8      height: 100%;
     9      width: 100%;
    10      position: absolute;
    11      top: 0;
    12      left: 0;
    13      right: 0;
    14      bottom: 0;
    15  
    16      ul.slides {
    17        height: 100%;
    18      }
    19  
    20      ul.indicators {
    21        z-index: 2;
    22        bottom: 30px;
    23      }
    24    }
    25  
    26    .slides {
    27      background-color: $slider-bg-color;
    28      margin: 0;
    29      height: 400px;
    30  
    31      li {
    32        opacity: 0;
    33        position: absolute;
    34        top: 0;
    35        left: 0;
    36        z-index: 1;
    37        width: 100%;
    38        height: inherit;
    39        overflow: hidden;
    40  
    41        img {
    42          height: 100%;
    43          width: 100%;
    44          background-size: cover;
    45          background-position: center;
    46        }
    47  
    48        .caption {
    49          color: #fff;
    50          position: absolute;
    51          top: 15%;
    52          left: 15%;
    53          width: 70%;
    54          opacity: 0;
    55  
    56          p { color: $slider-bg-color-light; }
    57        }
    58  
    59        &.active {
    60          z-index: 2;
    61        }
    62      }
    63    }
    64  
    65  
    66    .indicators {
    67      position: absolute;
    68      text-align: center;
    69      left: 0;
    70      right: 0;
    71      bottom: 0;
    72      margin: 0;
    73  
    74      .indicator-item {
    75        display: inline-block;
    76        position: relative;
    77        cursor: pointer;
    78        height: 16px;
    79        width: 16px;
    80        margin: 0 12px;
    81        background-color: $slider-bg-color-light;
    82  
    83        @include transition(background-color .3s);
    84        border-radius: 50%;
    85  
    86        &.active {
    87          background-color: $slider-indicator-color;
    88        }
    89      }
    90    }
    91  
    92  }