PHP Classes

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

Recommend this page to a friend!
  Classes of Aldo Tripiciano   Quanta CMS   engine/modules/contrib/foundation/source/scss/components/_orbit.scss   Download  
File: engine/modules/contrib/foundation/source/scss/components/_orbit.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: 4,587 bytes
 

Contents

Class file image Download
// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group orbit //// /// Default color for Orbit's bullets. /// @type Color $orbit-bullet-background: $medium-gray !default; /// Default active color for Orbit's bullets. /// @type Color $orbit-bullet-background-active: $dark-gray !default; /// Default diameter for Orbit's bullets. /// @type Number $orbit-bullet-diameter: 1.2rem !default; /// Default margin between Orbit's bullets. /// @type Number $orbit-bullet-margin: 0.1rem !default; /// Default distance from slide region for Orbit's bullets. /// @type Number $orbit-bullet-margin-top: 0.8rem !default; /// Default bottom margin from Orbit's bullets to whatever content may lurk below it. /// @type Number $orbit-bullet-margin-bottom: 0.8rem !default; /// Default background color for Orbit's caption. /// @type Color $orbit-caption-background: rgba($black, 0.5) !default; /// Default padding for Orbit's caption. /// @type Number $orbit-caption-padding: 1rem !default; /// Default background color for Orbit's controls when hovered. /// @type Color $orbit-control-background-hover: rgba($black, 0.5) !default; /// Default padding for Orbit's controls. /// @type Number $orbit-control-padding: 1rem !default; /// Default z-index for Orbit's controls. /// @type Number $orbit-control-zindex: 10 !default; /// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class. @mixin orbit-wrapper { position: relative; } /// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class. @mixin orbit-container { position: relative; height: 0; // Prevent FOUC by not showing until JS sets height margin: 0; list-style: none; overflow: hidden; } /// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class. @mixin orbit-slide { width: 100%; &.no-motionui { &.is-active { top: 0; left: 0; } } } @mixin orbit-figure { margin: 0; } /// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class. @mixin orbit-image { width: 100%; max-width: 100%; margin: 0; } /// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class. @mixin orbit-caption { position: absolute; bottom: 0; width: 100%; margin-bottom: 0; padding: $orbit-caption-padding; background-color: $orbit-caption-background; color: color-pick-contrast($orbit-caption-background); } /// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS. @mixin orbit-control { @include disable-mouse-outline; @include vertical-center; z-index: $orbit-control-zindex; padding: $orbit-control-padding; color: $white; &:hover, &:active, &:focus { background-color: $orbit-control-background-hover; } } /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class. @mixin orbit-previous { #{$global-left}: 0; } /// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class. @mixin orbit-next { #{$global-left}: auto; #{$global-right}: 0; } /// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class. @mixin orbit-bullets { @include disable-mouse-outline; position: relative; margin-top: $orbit-bullet-margin-top; margin-bottom: $orbit-bullet-margin-bottom; text-align: center; button { width: $orbit-bullet-diameter; height: $orbit-bullet-diameter; margin: $orbit-bullet-margin; border-radius: 50%; background-color: $orbit-bullet-background; &:hover { background-color: $orbit-bullet-background-active; } &.is-active { background-color: $orbit-bullet-background-active; } } } @mixin foundation-orbit { .orbit { @include orbit-wrapper; } .orbit-container { @include orbit-container; } .orbit-slide { @include orbit-slide; } .orbit-figure { @include orbit-figure; } .orbit-image { @include orbit-image; } .orbit-caption { @include orbit-caption; } %orbit-control { @include orbit-control; } .orbit-previous { @extend %orbit-control; @include orbit-previous; } .orbit-next { @extend %orbit-control; @include orbit-next; } .orbit-bullets { @include orbit-bullets; } }