Some default demo styles

Author: Łukasz Florczak

demo/scss/main.scss

@@ -36,6 +36,128 @@ h1, h2, h3 {
     font-weight: 300;
 }
 
+.agile {
+    position: relative;
+
+    &, * {
+        &:focus,
+        &:active {
+            outline: none;
+        }
+    }
+
+    &__list {
+        display: block;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        position: relative;
+        width: 100%;
+    }
+
+    &__track {
+        align-items: center;
+        display: flex;
+        justify-content: flex-start;
+
+        .agile--disabled & {
+            display: block;
+            max-width: 100%;
+        }
+    }
+
+    &__slide {
+        display: block;
+
+        .agile--fade & {
+            opacity: 0;
+            position: relative;
+            z-index: 0;
+
+            &--active {
+                opacity: 1;
+                z-index: 2;
+            }
+
+            &--expiring {
+                opacity: 1;
+                transition-duration: 0s;
+                z-index: 1;
+            }
+        }
+    }
+
+    &__arrow {
+        border: none;
+        bottom: -11px;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        transition-duration: .3s;
+
+        &[disabled] {
+            cursor: default;
+            opacity: .4;
+        }
+
+        &:hover {
+            svg {
+                fill: #333;
+            }
+        }
+
+        &--prev {
+            left: 0;
+        }
+
+        &--next {
+            right: 0;
+        }
+
+        svg {
+            fill: #888;
+            height: 24px;
+            transition-duration: .3s;
+        }
+    }
+
+    &__dots {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        margin: 20px 0;
+        padding: 0;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    &__dot {
+        margin: 0 10px;
+
+        button {
+            background-color: #eee;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+            display: block;
+            height: 10px;
+            font-size: 0;
+            line-height: 0;
+            margin: 0;
+            transition-duration: .3s;
+            width: 10px;
+        }
+
+        &--current,
+        &:hover {
+            button {
+                background-color: #888;
+            }
+        }
+    }
+}
+
 .hidden-md {
     @include md {
         display: none;