framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js

@@ -0,0 +1,442 @@
+var myApp = new Framework7({
+    modalTitle: 'Framework7',
+    animateNavBackIcon: true,
+});
+
+// Expose Internal DOM library
+var $$ = Dom7;
+
+// Add main view
+var mainView = myApp.addView('.view-main', {
+    // Enable Dynamic Navbar for this view
+    dynamicNavbar: true
+});
+// Add another view, which is in right panel
+var rightView = myApp.addView('.view-right', {
+    // Enable Dynamic Navbar for this view
+    dynamicNavbar: true
+});
+
+// Show/hide preloader for remote ajax loaded pages
+// Probably should be removed on a production/local app
+$$(document).on('ajaxStart', function () {
+    myApp.showIndicator();
+});
+$$(document).on('ajaxComplete', function () {
+    myApp.hideIndicator();
+});
+
+// Callbacks for specific pages when it initialized
+/* ===== Modals Page events  ===== */
+myApp.onPageInit('modals', function (page) {
+    $$('.demo-alert').on('click', function () {
+        myApp.alert('Hello!');
+    });
+    $$('.demo-confirm').on('click', function () {
+        myApp.confirm('Are you feel good today?', function () {
+            myApp.alert('Great!');
+        });
+    });
+    $$('.demo-prompt').on('click', function () {
+        myApp.prompt('What is your name?', function (data) {
+            // @data contains input value
+            myApp.confirm('Are you sure that your name is ' + data + '?', function () {
+                myApp.alert('Ok, your name is ' + data + ' ;)');
+            });
+        });
+    });
+    $$('.demo-login').on('click', function () {
+        myApp.modalLogin('Enter your username and password', function (username, password) {
+            myApp.alert('Thank you! Username: ' + username + ', password: ' + password);
+        });
+    });
+    $$('.demo-password').on('click', function () {
+        myApp.modalPassword('Enter your password', function (password) {
+            myApp.alert('Thank you! Password: ' + password);
+        });
+    });
+});
+
+/* ===== Preloader Page events ===== */
+myApp.onPageInit('preloader', function (page) {
+    $$('.demo-indicator').on('click', function () {
+        myApp.showIndicator();
+        setTimeout(function () {
+            myApp.hideIndicator();
+        }, 2000);
+    });
+    $$('.demo-preloader').on('click', function () {
+        myApp.showPreloader();
+        setTimeout(function () {
+            myApp.hidePreloader();
+        }, 2000);
+    });
+    $$('.demo-preloader-custom').on('click', function () {
+        myApp.showPreloader('My text...');
+        setTimeout(function () {
+            myApp.hidePreloader();
+        }, 2000);
+    });
+});
+
+/* ===== Swipe to delete events callback demo ===== */
+myApp.onPageInit('swipe-delete', function (page) {
+    $$('.demo-remove-callback').on('deleted', function () {
+        myApp.alert('Thanks, item removed!');
+    });
+});
+myApp.onPageInit('swipe-delete media-lists', function (page) {
+    $$('.demo-reply').on('click', function () {
+        myApp.alert('Reply');
+    });
+    $$('.demo-mark').on('click', function () {
+        myApp.alert('Mark');
+    });
+    $$('.demo-forward').on('click', function () {
+        myApp.alert('Forward');
+    });
+});
+
+
+/* ===== Action sheet, we use it on few pages ===== */
+myApp.onPageInit('swipe-delete modals media-lists', function (page) {
+    var actionSheetButtons = [
+        // First buttons group
+        [
+            // Group Label
+            {
+                text: 'Here comes some optional description or warning for actions below',
+                label: true
+            },
+            // First button
+            {
+                text: 'Alert',
+                onClick: function () {
+                    myApp.alert('He Hoou!');
+                }
+            },
+            // Another red button
+            {
+                text: 'Nice Red Button ',
+                color: 'red',
+                onClick: function () {
+                    myApp.alert('You have clicked red button!');
+                }
+            },
+        ],
+        // Second group
+        [
+            {
+                text: 'Cancel',
+                bold: true
+            }
+        ]
+    ];
+    $$('.demo-actions').on('click', function (e) {
+        myApp.actions(actionSheetButtons);
+    });
+    $$('.demo-actions-popover').on('click', function (e) {
+        // We need to pass additional target parameter (this) for popover
+        myApp.actions(this, actionSheetButtons);
+    });
+    
+});
+
+/* ===== Messages Page ===== */
+myApp.onPageInit('messages', function (page) {
+    var conversationStarted = false;
+    var answers = [
+        'Yes!',
+        'No',
+        'Hm...',
+        'I am not sure',
+        'And what about you?',
+        'May be ;)',
+        'Lorem ipsum dolor sit amet, consectetur',
+        'What?',
+        'Are you sure?',
+        'Of course',
+        'Need to think about it',
+        'Amazing!!!',
+    ];
+    var people = [
+        {
+            name: 'Kate Johnson',
+            avatar: 'http://lorempixel.com/output/people-q-c-100-100-9.jpg'
+        },
+        {
+            name: 'Blue Ninja',
+            avatar: 'http://lorempixel.com/output/people-q-c-100-100-7.jpg'
+        },
+        
+    ];
+    var answerTimeout;
+    $$('.messagebar a.link').on('click', function () {
+        var textarea = $$('.messagebar textarea');
+        var messageText = textarea.val();
+        if (messageText.length === 0) return;
+        // Empty textarea
+        textarea.val('').trigger('change');
+        // Add Message
+        myApp.addMessage({
+            text: messageText,
+            type: 'sent',
+            day: !conversationStarted ? 'Today' : false,
+            time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
+        });
+        conversationStarted = true;
+        // Add answer after timeout
+        if (answerTimeout) clearTimeout(answerTimeout);
+        answerTimeout = setTimeout(function () {
+            var answerText = answers[Math.floor(Math.random() * answers.length)];
+            var person = people[Math.floor(Math.random() * people.length)];
+            myApp.addMessage({
+                text: answers[Math.floor(Math.random() * answers.length)],
+                type: 'received',
+                name: person.name,
+                avatar: person.avatar
+            });
+        }, 2000);
+    });
+});
+
+/* ===== Pull To Refresh Demo ===== */
+myApp.onPageInit('pull-to-refresh', function (page) {
+    // Dummy Content
+    var songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
+    var authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
+    // Pull to refresh content
+    var ptrContent = $$(page.container).find('.pull-to-refresh-content');
+    // Add 'refresh' listener on it
+    ptrContent.on('refresh', function (e) {
+        // Emulate 2s loading
+        setTimeout(function () {
+            var picURL = 'http://hhhhold.com/88/d/jpg?' + Math.round(Math.random() * 100);
+            var song = songs[Math.floor(Math.random() * songs.length)];
+            var author = authors[Math.floor(Math.random() * authors.length)];
+            var linkHTML = '<li class="item-content">' +
+                                '<div class="item-media"><img src="' + picURL + '" width="44"/></div>' +
+                                '<div class="item-inner">' +
+                                    '<div class="item-title-row">' +
+                                        '<div class="item-title">' + song + '</div>' +
+                                    '</div>' +
+                                    '<div class="item-subtitle">' + author + '</div>' +
+                                '</div>' +
+                            '</li>';
+            ptrContent.find('ul').prepend(linkHTML);
+            // When loading done, we need to "close" it
+            myApp.pullToRefreshDone();
+        }, 2000);
+    });
+});
+
+/* ===== Sortable page ===== */
+myApp.onPageInit('sortable-list', function (page) {
+    // Sortable toggler
+    $$('.list-block.sortable').on('open', function () {
+        $$('.toggle-sortable').text('Done');
+    });
+    $$('.list-block.sortable').on('close', function () {
+        $$('.toggle-sortable').text('Edit');
+    });
+});
+
+/* ===== Photo Browser Examples ===== */
+// Create photoprobsers first:
+var photoBrowserPhotos = [
+	{
+		url: 'img/beach.jpg',
+		caption: 'Amazing beach in Goa, India'
+	},
+    'http://placekitten.com/1024/1024',
+    'img/lock.jpg',
+    {
+        url: 'img/monkey.jpg',
+        caption: 'I met this monkey in Chinese mountains'
+    },
+    {
+        url: 'img/mountains.jpg',
+        caption: 'Beautiful mountains in Zhangjiajie, China'
+    }
+    
+];
+var photoBrowserStandalone = myApp.photoBrowser({
+    photos: photoBrowserPhotos
+});
+var photoBrowserPopup = myApp.photoBrowser({
+    photos: photoBrowserPhotos,
+    type: 'popup'
+});
+var photoBrowserPage = myApp.photoBrowser({
+    photos: photoBrowserPhotos,
+    type: 'page',
+    backLinkText: 'Back'
+});
+var photoBrowserDark = myApp.photoBrowser({
+    photos: photoBrowserPhotos,
+    theme: 'dark'
+});
+var photoBrowserPopupDark = myApp.photoBrowser({
+    photos: photoBrowserPhotos,
+    theme: 'dark',
+    type: 'popup'
+});
+myApp.onPageInit('photo-browser', function (page) {
+    $$('.ks-pb-standalone').on('click', function () {
+        photoBrowserStandalone.open();
+    });
+    $$('.ks-pb-popup').on('click', function () {
+        photoBrowserPopup.open();
+    });
+    $$('.ks-pb-page').on('click', function () {
+        photoBrowserPage.open();
+    });
+    $$('.ks-pb-popup-dark').on('click', function () {
+        photoBrowserPopupDark.open();
+    });
+    $$('.ks-pb-standalone-dark').on('click', function () {
+        photoBrowserDark.open();
+    });
+});
+
+/* ===== Infinite Scroll Page ===== */
+myApp.onPageInit('infinite-scroll', function (page) {
+    // Loading trigger
+    var loading = false;
+    // Last loaded index, we need to pass it to script
+    var lastLoadedIndex = $$('.infinite-scroll .list-block li').length;
+    // Attach 'infinite' event handler
+    $$('.infinite-scroll').on('infinite', function () {
+        // Exit, if loading in progress
+        if (loading) return;
+        // Set loading trigger
+        loading = true;
+        // Request some file with data
+        $$.get('infinite-scroll-load.php', {leftIndex: lastLoadedIndex + 1}, function (data) {
+            loading = false;
+            if (data === '') {
+                // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
+                myApp.detachInfiniteScroll($$('.infinite-scroll'));
+            }
+            else {
+                // Append loaded elements to list block
+                $$('.infinite-scroll .list-block ul').append(data);
+                // Update last loaded index
+                lastLoadedIndex = $$('.infinite-scroll .list-block li').length;
+            }
+        });
+    });
+});
+
+/* ===== Notifications Page ===== */
+myApp.onPageInit('notifications', function (page) {
+    $$('.ks-notification-simple').on('click', function () {
+        myApp.addNotification({
+            title: 'Framework7',
+            message: 'This is a simple notification message with title and message'
+        });
+    });
+    $$('.ks-notification-full').on('click', function () {
+        myApp.addNotification({
+            title: 'Framework7',
+            subtitle: 'Notification subtitle',
+            message: 'This is a simple notification message with custom icon and subtitle',
+            media: '<i class="icon icon-f7"></i>'
+        });
+    });
+    $$('.ks-notification-custom').on('click', function () {
+        myApp.addNotification({
+            title: 'My Awesome App',
+            subtitle: 'New message from John Doe',
+            message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
+            media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">'
+        });
+    });
+    $$('.ks-notification-callback').on('click', function () {
+        myApp.addNotification({
+            title: 'My Awesome App',
+            subtitle: 'New message from John Doe',
+            message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
+            media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">',
+            onClose: function () {
+                myApp.alert('Notification closed');
+            }
+        });
+    });
+});
+
+/* ===== Login screen page events ===== */
+myApp.onPageInit('login-screen-embedded', function (page) {
+    $$(page.container).find('.list-button').on('click', function () {
+        var username = $$(page.container).find('input[name="username"]').val();
+        var password = $$(page.container).find('input[name="password"]').val();
+        myApp.alert('Username: ' + username + ', password: ' + password, function () {
+            mainView.goBack();
+        });
+    });
+});
+$$('.login-screen').find('.list-button').on('click', function () {
+    var username = $$('.login-screen').find('input[name="username"]').val();
+    var password = $$('.login-screen').find('input[name="password"]').val();
+    myApp.alert('Username: ' + username + ', password: ' + password, function () {
+        myApp.closeModal('.login-screen');
+    });
+});
+
+/* ===== Demo Popover ===== */
+$$('.popover a').on('click', function () {
+    myApp.closeModal('.popover');
+});
+
+/* ===== Color themes ===== */
+myApp.onPageInit('color-themes', function (page) {
+    var themes = 'theme-white theme-black theme-yellow theme-red theme-blue theme-green theme-pink theme-lightblue theme-orange theme-gray';
+    var layouts = 'layout-dark layout-white';
+    $$(page.container).find('.ks-color-theme').click(function () {
+        $$('body').removeClass(themes).addClass('theme-' + $$(this).attr('data-theme'));
+    });
+    $$(page.container).find('.ks-layout-theme').click(function () {
+        $$('body').removeClass(layouts).addClass('layout-' + $$(this).attr('data-theme'));
+    });
+});
+
+/* ===== Change statusbar bg when panel opened/closed ===== */
+$$('.panel-left').on('open', function () {
+    $$('.statusbar-overlay').addClass('with-panel-left');
+});
+$$('.panel-right').on('open', function () {
+    $$('.statusbar-overlay').addClass('with-panel-right');
+});
+$$('.panel-left, .panel-right').on('close', function () {
+    $$('.statusbar-overlay').removeClass('with-panel-left with-panel-right');
+});
+
+/* ===== Generate Content Dynamically ===== */
+var dynamicPageIndex = 0;
+function createContentPage() {
+    mainView.loadContent(
+        '<!-- Top Navbar-->' +
+        '<div class="navbar">' +
+        '  <div class="navbar-inner">' +
+        '    <div class="left"><a href="#" class="back link">Back</a></div>' +
+        '    <div class="center sliding">Dynamic Page ' + (++dynamicPageIndex) + '</div>' +
+        '  </div>' +
+        '</div>' +
+        '<div class="pages">' +
+        '  <!-- Page, data-page contains page name-->' +
+        '  <div data-page="dynamic-content" class="page">' +
+        '    <!-- Scrollable page content-->' +
+        '    <div class="page-content">' +
+        '      <div class="content-block">' +
+        '        <div class="content-block-inner">' +
+        '          <p>Here is a dynamic page created on ' + new Date() + ' !</p>' +
+        '          <p>Go <a href="#" class="back">back</a> or generate <a href="#" class="ks-generate-page">one more page</a>.</p>' +
+        '        </div>' +
+        '      </div>' +
+        '    </div>' +
+        '  </div>' +
+        '</div>'
+    );
+    return;
+}
+$$(document).on('click', '.ks-generate-page', createContentPage);

data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less

@@ -0,0 +1,245 @@
+.panel {
+    background: #222;
+    color: #dddddd;
+}
+
+.popover {
+    width: 240px;
+}
+
+.ks-grid {
+    div[class*="col-"] {
+        background: #fff;
+        text-align: center;
+        color: #000;
+        border: 1px solid #ddd;
+        padding: 5px;
+        margin-bottom: 15px;
+    }
+}
+.ks-preloaders {
+    text-align: center;
+}
+.ks-preloader-big {
+    width: 42px;
+    height: 42px;
+}
+.statusbar-overlay {
+    background: #000;
+}
+.statusbar-overlay.with-panel-left {
+    background: #222;
+}
+.statusbar-overlay.with-panel-right {
+    background: #000;
+}
+// Demo tab bars
+.page[data-page="tabbar"], .page[data-page="tabbar-labels"] {
+    .tabbar {
+        -webkit-transform: none;
+        -moz-transform: none;
+        -ms-transform: none;
+        -o-transform: none;
+        transform: none;
+    }
+}
+.page[data-page="tabbar-labels"] {
+    .page-content {
+        padding-bottom: 50px;
+        @media all and (min-width:768px) {
+            padding-bottom: 56px;
+        }
+    }
+}
+i.ks-tabbar-icon-1 {
+    width: 30px;
+    height: 30px;
+    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23929292'><g><circle cx='15.2' cy='8.8' r='1.5'/><polygon points='16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/><path d='M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.5-11.5S8.8,3.3,15.2,3.3s11.5,5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/></g></svg>");
+    .active & {
+        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 30' fill='%23007aff'><path d='M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,15.1C27.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v-1h3V12 v0.6v8h1V21.6z'/></svg>");
+    }
+}
+i.ks-tabbar-icon-2 {
+    width: 25px;
+    height: 30px;
+    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23929292'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.4L5.9,1z M24,16H1V7h7.1 c0.5,1.9,2.3,3.4,4.4,3.4s3.9-1.5,4.4-3.4H24V16z'/></svg>");
+    .active & {
+        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23007aff'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.3L5.9,1z'/></svg>");
+    }
+}
+i.ks-tabbar-icon-3 {
+    width: 30px;
+    height: 30px;
+    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23929292'><path d='M16.8,1c3.7,0,6.8,3,6.8,6.8l0,0.1c0,0,0,0.1,0,0.1l0,1l1,0C27,9,29,11,29,13.5c0,2.5-2,4.5-4.5,4.5H6c-2.8,0-5-2.2-5-5 c0-2.1,1.4-4,3.4-4.7L5,8.1l0.1-0.6C5.3,6,6.5,5,8,5c0.4,0,0.9,0.1,1.3,0.3l0.9,0.5l0.4-0.9C11.8,2.5,14.2,1,16.8,1 M16.8,0 c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4.1,7.3C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5 c0-3-2.5-5.5-5.5-5.5c0-0.1,0-0.2,0-0.2C24.5,3.5,21.1,0,16.8,0L16.8,0z'/></svg>");
+    .active & {
+        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23007aff'><path d='M24.5,8c0-0.1,0-0.2,0-0.2C24.5,3.5,21,0,16.8,0c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4,7.3 C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5C30,10.5,27.5,8,24.5,8z'/></svg>");
+    }
+}
+i.ks-tabbar-icon-4 {
+    width: 25px;
+    height: 30px;
+    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23929292'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15,0h-5C9.5,0,8.9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M24,17c0,0.6-0.4,1-1,1H2c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h4.2h0.4 l0.3-0.3l1.2-1.2l0,0.1l1.1-1.2C9.5,1.1,9.8,1,10,1h5c0.3,0,0.5,0.1,0.7,0.3l2.4,2.4L18.4,4h0.4H23c0.6,0,1,0.4,1,1V17z'/><path d='M12.5,4C8.9,4,6,6.9,6,10.5c0,3.6,2.9,6.5,6.5,6.5c3.6,0,6.5-2.9,6.5-6.5C19,6.9,16.1,4,12.5,4z M12.5,16 c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5S18,7.5,18,10.5C18,13.5,15.5,16,12.5,16z'/><path d='M12.5,6C10,6,8,8,8,10.5C8,13,10,15,12.5,15s4.5-2,4.5-4.5C17,8,15,6,12.5,6z M12.5,14C10.6,14,9,12.4,9,10.5 C9,8.6,10.6,7,12.5,7S16,8.6,16,10.5C16,12.4,14.4,14,12.5,14z'/></g></svg>");
+    .active & {
+        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23007aff'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15.1,0h-5C9.5,0,9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M12.5,16c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5c3,0,5.5,2.5,5.5,5.5 C18,13.5,15.5,16,12.5,16z'/><circle cx='12.5' cy='10.5' r='4.5'/></g></svg>");
+    }
+}
+
+// Demo Slider
+.ks-demo-slider, .ks-carousel-slider{
+    font-size: 25px;
+    font-weight: 300;
+    .slider-slide {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        background: #fff;
+    }
+}
+.ks-carousel-slider{
+    .slider-slide {
+        box-sizing:border-box;
+        border: 1px solid #ccc;
+        background: #fff;
+    }
+}
+.page[data-page="slider-multiple"] .slider-container {
+    margin: 35px 0;
+    font-size: 18px;
+    height: 120px;
+}
+.ks-slider-custom {
+    height: 100%;
+    .slider-container {
+        background: #000;
+    }
+    .slider-slide {
+        -webkit-background-size: cover;
+        background-size: cover;
+        background-position: center;
+    }
+    .slider-pagination{
+        .slider-pagination-bullet {
+            cursor: pointer;
+            width: 10px;
+            height: 10px;
+            background: rgba(255,255,255,0);
+            opacity: 1;
+            border-radius: 0;
+            -webkit-transition: 200ms;
+            -moz-transition: 200ms;
+            -ms-transition: 200ms;
+            -o-transition: 200ms;
+            transition: 200ms;
+            position: relative;
+            -webkit-transform: scale(0.9);
+            -moz-transform: scale(0.9);
+            transform: scale(0.9);
+            box-sizing:border-box;
+            border: 1px solid rgba(255,255,255,0.8);
+        }
+        .slider-pagination-active {
+            z-index: 1;
+            border: 1px solid #007aff;
+            -webkit-transform: scale(1.4);
+            -moz-transform: scale(1.4);
+            transform: scale(1.4);
+        }
+    }
+    .slider-prev-button, .slider-next-button {
+        width: 44px;
+        height: 44px;
+        background: rgba(0,0,0,0.8);
+        position: absolute;
+        top: 50%;
+        text-align: center;
+        line-height: 44px;
+        margin-top: -22px;
+    }
+    .slider-next-button {
+        right: 0;
+    }
+    .slider-prev-button {
+        left: 0;
+    }
+}
+// Custom Accordion
+.custom-accordion {
+    padding-left: 0;
+    padding-right: 0;
+    .accordion-item-toggle {
+        padding: 0px 15px;
+        height: 44px;
+        line-height: 44px;
+        font-size: 17px;
+        color:#000;
+        border-bottom: 1px solid rgba(0,0,0,0.15);
+        cursor: pointer;
+        &:active {
+            background: rgba(0,0,0,0.15);
+        }
+        span {
+            display: inline-block;
+            margin-left: 15px;
+            html[dir="rtl"] & {
+                margin-left: 0;
+                margin-right: 15px;
+            }
+        }
+    }
+    .accordion-item:last-child .accordion-item-toggle {
+        border-bottom: none;
+    }
+    .icon-ks-plus, .icon-ks-minus {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        border: 1px solid #000;
+        border-radius: 100%;
+        line-height: 20px;
+        text-align: center;
+    }
+    .icon-ks-minus {
+        display: none;
+    }
+    .accordion-item-expanded {
+        .icon-ks-minus {
+            display: inline-block;
+        }
+        .icon-ks-plus {
+            display: none;
+        }
+    }
+    .accordion-item-content {
+        padding: 0px 15px;
+    }
+}
+
+.ks-layout-theme {
+    height: 44px;
+    border: 1px solid #aaa;
+    cursor: pointer;
+    &.ks-layout-default {
+        background: #efeff4;
+    }
+    &.ks-layout-dark {
+        background: #222426;
+    }
+    &.ks-layout-white {
+        background: #fff;
+    }
+}
+.ks-color-theme {
+    height: 44px;
+    border: 1px solid #aaa;
+    cursor: pointer;
+    margin-bottom: 10px;
+}