PHP Classes

File: engine/modules/contrib/foundation/source/scss/components/_slider.scss

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/components/_slider.scss   Download  
File: engine/modules/contrib/foundation/source/scss/components/_slider.scss
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Quanta CMS
Manage content that works without a database
Author: By
Last change:
Date: 5 years ago
Size: 2,762 bytes
 

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source // [TODO] Check how plugin confirms disabled or vertical status // [TODO] Check if transition: all; is necessary //// /// @group slider //// /// Default slider width of a vertical slider. (Doesn't apply to the native slider.) /// @type Number $slider-width-vertical: 0.5rem !default; /// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.) /// @type Transition $slider-transition: all 0.2s ease-in-out !default; /// Adds the general styles for sliders. @mixin slider-container { position: relative; height: $slider-height; margin-top: 1.25rem; margin-bottom: 2.25rem; background-color: $slider-background; cursor: pointer; user-select: none; touch-action: none; } /// Adds the general styles for active fill for sliders. @mixin slider-fill { position: absolute; top: 0; left: 0; display: inline-block; max-width: 100%; height: $slider-height; background-color: $slider-fill-background; transition: $slider-transition; &.is-dragging { transition: all 0s linear; } } /// Adds the general styles for the slider handles. @mixin slider-handle { @include disable-mouse-outline; @include vertical-center; position: absolute; left: 0; z-index: 1; display: inline-block; width: $slider-handle-width; height: $slider-handle-height; border-radius: $slider-radius; background-color: $slider-handle-background; transition: $slider-transition; touch-action: manipulation; &:hover { background-color: scale-color($slider-handle-background, $lightness: -15%); } &.is-dragging { transition: all 0s linear; } } @mixin slider-disabled { opacity: $slider-opacity-disabled; cursor: not-allowed; } @mixin slider-vertical { display: inline-block; width: $slider-width-vertical; height: 12.5rem; margin: 0 1.25rem; transform: scale(1, -1); .slider-fill { top: 0; width: $slider-width-vertical; max-height: 100%; } .slider-handle { position: absolute; top: 0; left: 50%; width: $slider-handle-height; height: $slider-handle-width; transform: translateX(-50%); } } @mixin foundation-slider { // Container .slider { @include slider-container; } // Fill area .slider-fill { @include slider-fill; } // Draggable handle .slider-handle { @include slider-handle; } // Disabled state .slider.disabled, .slider[disabled] { @include slider-disabled; } // Vertical slider .slider.vertical { @include slider-vertical; } // RTL support @if $global-text-direction == rtl { .slider:not(.vertical) { transform: scale(-1, 1); } } }