stylesheets/components/_sliders.scss in rapido-css-0.0.3 vs stylesheets/components/_sliders.scss in rapido-css-0.0.4
- old
+ new
@@ -1,14 +1,34 @@
-// ====================================================================================================================
-// SLIDERS w/ BxSlider (https://github.com/wandoledzep/bxslider-4)
-// ====================================================================================================================
+/* ====================================================================================================================
+Sliders
+
+For modals is used the excellent [**BxSlider**](http://bxslider.com/) jQuery plugin,
+see full documentation for more in depth examples.
+
+Markup:
+<ul class="slider">
+ <li><img src="http://placehold.it/800x300/c7e843/fff.jpg" /></li>
+ <li><img src="http://placehold.it/800x300/f6ab48/fff.jpg" /></li>
+ <li><img src="http://placehold.it/800x300/3dced4/fff.jpg" /></li>
+</ul>
+<script type="text/javascript">
+ $(document).ready(function() {
+ $('.slider').bxSlider({
+ nextText: '<i></i><span>Next</span>', // replace text with icon-font
+ prevText: '<i></i><span>Prev</span>', // replace text with icon-font
+ });
+ });
+</script>
+
+Styleguide 16.
+
+==================================================================================================================== */
+
+
@if $slider {
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Base
-// --------------------------------------------------------------------------------------------------------------------
.bx-wrapper {
position: relative;
padding: 0;
*zoom: 1;
z-index: $zindex-slider;
@@ -22,70 +42,69 @@
ul {@extend .list_style_none;}
}
.bx-viewport { }
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
// Directions
// --------------------------------------------------------------------------------------------------------------------
- .bx-controls-direction {
+ .bx-controls-direction {
a {
- @extend %slider-btn !optional;
+ @extend %slider__btn !optional;
@include position(absolute, 50% 0 0 0);
z-index: 200;
i {font-style: normal;}
span {@include hide-text;}
-
- &.disabled { display: none; }
-
- &.bx-prev { left: 0; }
- &.bx-next { right: 0; }
}
+ .disabled { display: none; }
}
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ .bx-prev { left: 0; }
+ .bx-next { right: 0; }
+
// Pager
// --------------------------------------------------------------------------------------------------------------------
+
.bx-pager {
width: 100%;
text-align: center;
- @extend %slider-pager !optional;
+ @extend %slider__pager !optional;
- .bx-pager-item {
+ }
+
+ .bx-pager-item {
+ display: inline-block;
+ a {
display: inline-block;
- a {
- display: inline-block;
- // @include hide-text;
- }
+ // @include hide-text;
}
}
-
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
// Loading
// --------------------------------------------------------------------------------------------------------------------
+
.bx-loading {
@include square(100%);
@include position(absolute, 0px 0 0 0px);
- @extend %slider-loading-style;
+ @extend %slider__loading-style;
z-index: 2000;
}
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
// Captions
// --------------------------------------------------------------------------------------------------------------------
+
.bx-caption {
@include position(absolute, 0 0 0px 0px);
width: 100%;
span {
display: inline-block;
- @extend %slider-caption !optional;
+ @extend %slider__caption !optional;
}
}
}
\ No newline at end of file