File "pagination.scss"

Full path: /home/fsibplc/public_html/sommilito-bank2/splide-4.1.3/src/css/template/default/object/objects/pagination.scss
File size: 1.66 B
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

@use '../../foundation/colors';
@use '../../foundation/mixins';

$bottom: .5em !default;
$dot-width: 8px !default;
$dot-height: 8px !default;
$dot-background: colors.$background !default;
$dot-background-hover: false !default;
$dot-background-active: colors.$background-active !default;
$dot-border: 0 !default;
$dot-border-radius: 50% !default;
$dot-margin: 3px !default;
$dot-padding: 0 !default;
$dot-opacity: .7 !default;
$dot-opacity-hover: .9 !default;
$dot-transition: transform .2s linear !default;
$dot-transform-active: scale( 1.4 ) !default;

.splide {
  $root: &;

  &__pagination {
    bottom: $bottom;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;

    &__page {
      background: $dot-background;
      border: $dot-border;
      border-radius: $dot-border-radius;
      display: inline-block;
      height: $dot-height;
      margin: $dot-margin;
      padding: $dot-padding;
      position: relative;
      transition: $dot-transition;
      width: $dot-width;

      @if $dot-opacity {
        opacity: $dot-opacity;
      }

      &.is-active {
        background: $dot-background-active;
        z-index: 1;

        @if $dot-transform-active {
          transform: $dot-transform-active;
        }
      }

      &:hover {
        cursor: pointer;

        @if $dot-opacity-hover {
          opacity: $dot-opacity-hover;
        }

        @if $dot-background-hover {
          background: $dot-background-hover;
        }
      }

      &:focus-visible {
        @include mixins.focus-outline;
      }
    }
  }

  &.is-focus-in {
    #{ $root }__pagination {
      &__page:focus {
        @include mixins.focus-outline;
      }
    }
  }
}