Mattia Larentis 12 năm trước cách đây
commit
40c9d7eb1d

+ 4 - 0
.gitignore

@@ -0,0 +1,4 @@
+target/
+.idea
+.sass-cache/
+.DS_Store

+ 176 - 0
LICENSE

@@ -0,0 +1,176 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

+ 105 - 0
README.md

@@ -0,0 +1,105 @@
+Bootstrap-toggle-buttons
+========================
+
+Demo
+----
+http://www.larentis.eu/bootstrap_toggle_buttons/
+
+Usage
+-----
+
+Just include Twitter Bootstrap, jQuery and Bootstrap Toggle Buttons CSS and Javascript
+``` html
+<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
+<link href="bootstrap-toggle-buttons.css" rel="stylesheet">
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="jquery.toggle.buttons.js"></script>
+```
+
+Basic Example
+-------------
+
+HTML
+``` html
+<div id="toggle-button">
+    <input id="checkbox1" type="checkbox" value="value1" checked="checked">
+</div>
+```
+
+JS
+``` javascript
+$('#toggle-button').toggleButtons();
+```
+
+Full Example
+------------
+
+HTML
+``` html
+<div id="toggle-button">
+    <input id="checkbox1" type="checkbox" value="value1" checked="checked">
+</div>
+```
+
+JS
+``` javascript
+$('#toggle-button').toggleButtons({
+  onChange: function ($el, status, e) {
+    // $el = $('#toggle-button'); 
+    // status = [true, false], the value of the checkbox
+    // e = the event
+    console.log($el, status, e); 
+  },
+  width: 100,
+  height: 25,
+  font: {
+    'font-size': '20px',
+    'font-style': 'italic'
+  },
+  animated: true,
+  transitionspeed: 1, // Accepted values float or "percent" [ 1, 0.5, "150%" ]
+  label: {
+    enabled: "ON",
+    disabled: "OFF"
+  },
+  style: {
+    // Accepted values ["primary", "danger", "info", "success", "warning"] or nothing
+    enabled: "primary",
+    disabled: "danger",
+    custom: {
+      enabled: {
+        background:"#FF00FF",
+        gradient: "#D300D3",
+        color: "#FFFFFF"
+      },
+      disabled: {
+        background: "#FFAA00",
+        gradient: "#DD9900",
+        color: "#333333"
+      }
+    }
+  }
+});
+
+$('#toggle-button').toggleButtons('toggleActivation'); // to toggle the disabled status
+```
+
+Data Attributes Example
+-----------------------
+
+HTML
+``` html
+<div id="data-attribute-toggle-button"
+     data-toggleButton-width="170"
+     data-toggleButton-transitionspeed="500%"
+     data-toggleButton-style-custom-enabled-background="#FF0000"
+     data-toggleButton-style-custom-enabled-gradient="#000000">
+    <input type="checkbox" checked="checked">
+</div>
+```
+
+JS
+``` javascript
+$('#data-attribute-toggle-button').toggleButtons();
+```

+ 155 - 0
examples/index.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Bootstrap switch</title>
+    <meta name="author" content="Mattia Larentis">
+    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;"/>
+    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"
+          rel="stylesheet">
+    <link href="../static/stylesheets/bootstrap-switch.css"
+          rel="stylesheet">
+    <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css"
+          rel="stylesheet">
+    <style>
+        .span4, h1 {
+            text-align: center;
+        }
+
+        h1 {
+            margin-bottom: 20px;
+        }
+
+        h3 {
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body style="padding-top: 50px;">
+<a href="https://github.com/nostalgiaz/bootstrap-toggle-buttons"><img
+        style="position: absolute; top: 0; right: 0; border: 0;"
+        src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
+        alt="Fork me on GitHub"></a>
+
+<div class="container-fluid">
+    <div class="row-fluid">
+        <div class="span12">
+            <h1>Bootstrap switch
+                <small>- by Mattia Larentis</small>
+            </h1>
+        </div>
+    </div>
+
+    <div class="row-fluid">
+        <div class="span12">
+            <h3>Large</h3>
+            <hr>
+        </div>
+    </div>
+
+
+    <div class="row-fluid">
+
+        <div class="span4">
+            <div id="mySwitch" class="switch switch-large" data-on="danger"
+                 data-off="warning">
+                <input type="checkbox" checked="checked">
+            </div>
+        </div>
+        <div class="span8">
+
+            <h4>Html:</h4>
+                <pre class="prettyprint linenums">
+&lt;div id="mySwitch" class="switch switch-large" data-on="danger" data-off="warning">
+    &lt;input type="checkbox" checked="checked">
+&lt;/div></pre>
+            <h4>Js:</h4>
+                <pre class="prettyprint linenums">
+$('#mySwitch').on('switch-change', function (e, data) {
+    var $el = $(data.el)
+      , value = data.value;
+    console.log(e, $el, value);
+});</pre>
+        </div>
+    </div>
+    <div class="row-fluid">
+        <div class="span12">
+            <h3>Normal</h3>
+            <hr>
+        </div>
+    </div>
+    <div class="row-fluid">
+
+        <div class="span4">
+            <div class="switch">
+                <input type="checkbox">
+            </div>
+        </div>
+        <div class="span8">
+
+            <h4>Html:</h4>
+                <pre class="prettyprint linenums">
+&lt;div class="switch">
+    &lt;input type="checkbox">
+&lt;/div></pre>
+        </div>
+    </div>
+    <div class="row-fluid">
+        <div class="span12">
+            <h3>Small</h3>
+            <hr>
+        </div>
+    </div>
+    <div class="row-fluid">
+
+        <div class="span4">
+            <div class="switch switch-small">
+                <input type="checkbox" checked="checked">
+            </div>
+        </div>
+        <div class="span8">
+
+            <h4>Html:</h4>
+                <pre class="prettyprint linenums">
+&lt;div class="switch switch-small">
+    &lt;input type="checkbox" checked="checked" disabled="disabled">
+&lt;/div></pre>
+        </div>
+    </div>
+    <div class="row-fluid">
+        <div class="span12">
+            <h3>Mini</h3>
+            <hr>
+        </div>
+    </div>
+    <div class="row-fluid">
+
+        <div class="span4">
+            <div class="switch switch-mini">
+                <input type="checkbox" checked="checked">
+            </div>
+        </div>
+        <div class="span8">
+
+            <h4>Html:</h4>
+                <pre class="prettyprint linenums">
+&lt;div class="switch switch-mini">
+    &lt;input type="checkbox" checked="checked">
+&lt;/div></pre>
+        </div>
+    </div>
+</div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
+<script src="../static/js/jquery.switch.js"></script>
+<script>
+    window.prettyPrint && prettyPrint();
+    $('#mySwitch').on('switch-change', function (e, data) {
+        var $el = $(data.el)
+                , value = data.value;
+        console.log(e, $el, value);
+    });
+</script>
+</body>
+</html>

+ 24 - 0
static/config.rb

@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 0
static/js/jquery.min.js


+ 158 - 0
static/js/jquery.switch.js

@@ -0,0 +1,158 @@
+!function ($) {
+  "use strict";
+
+  $.fn.switch = function () {
+    this.each(function () {
+        var $element = $(this)
+          , $div
+          , $switchLeft
+          , $switchRight
+          , $label
+          , myClasses = ""
+          , classes = $element.attr('class')
+          , color;
+
+        $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
+          if (classes.indexOf(el) >= 0)
+            myClasses = el;
+        });
+
+        if ($element.data('on') !== undefined)
+          color = "switch-" + $element.data('on');
+
+        $switchLeft = $('<span></span>')
+          .addClass("switch-left")
+          .addClass(myClasses)
+          .addClass(color)
+          .text("ON");
+
+        if ($element.data('off') !== undefined)
+          color = "switch-" + $element.data('off');
+
+        $switchRight = $('<span></span>')
+          .addClass("switch-right")
+          .addClass(myClasses)
+          .addClass(color)
+          .text("OFF");
+
+        $label = $('<label></label>')
+          .html("&nbsp;")
+          .addClass(myClasses)
+          .attr('for', $element.find('input').attr('id'));
+
+        $div = $element.find('input').wrap($('<div></div>')).parent().addClass('switch-animate');
+        $div.append($switchLeft);
+        $div.append($label);
+        $div.append($switchRight);
+
+        $element.find('>div').addClass(
+          $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
+        );
+
+        if ($element.find('input').is(':disabled'))
+          $(this).addClass('deactivate');
+
+        var changeStatus = function ($this) {
+          $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
+        };
+
+        $switchLeft.on('click', function (e) {
+          changeStatus($(this));
+        });
+        $switchRight.on('click', function (e) {
+          changeStatus($(this));
+        });
+
+        $element.find('input').on('change', function (e) {
+          var $element = $(this).parent();
+
+          e.preventDefault();
+          e.stopImmediatePropagation();
+
+          $element.css('left', '');
+
+          if ($(this).is(':checked'))
+            $element.removeClass('switch-off').addClass('switch-on');
+          else $element.removeClass('switch-on').addClass('switch-off');
+
+          $element.addClass("switch-animate");
+
+          $element.parent().trigger('switch-change', {'el': $(this), 'value': $(this).is(':checked')})
+        });
+
+        $element.find('label').on('mousedown touchstart', function (e) {
+          var $this = $(this)
+            , moving = false;
+
+          e.preventDefault();
+          e.stopImmediatePropagation();
+
+          $this.closest('div').removeClass('switch-animate');
+
+          if ($this.closest('.switch').is('.deactivate'))
+            $this.unbind('click');
+          else {
+            $this.on('mousemove touchmove', function (e) {
+              var $element = $(this).closest('.switch')
+                , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
+                , percent = (relativeX / $element.width()) * 100
+                , left = 25
+                , right = 75;
+
+              moving = true;
+
+              if (percent < left)
+                percent = left;
+              else if (percent > right)
+                percent = right;
+
+              $element.find('>div').css('left', (percent - right) + "%")
+            });
+
+            $this.on('click touchend', function (e) {
+              var $this = $(this)
+                , $target = $(e.target)
+                , $myCheckBox = $target.siblings('input');
+
+              e.stopImmediatePropagation();
+              e.preventDefault();
+
+              $this.unbind('mouseleave');
+
+              if (moving)
+                $myCheckBox.attr('checked', !(parseInt($this.parent().css('left')) < -25));
+              else $myCheckBox.attr("checked", !$myCheckBox.is(":checked"));
+
+              moving = false;
+              $myCheckBox.trigger('change');
+            });
+
+            $this.on('mouseleave', function (e) {
+              var $this = $(this)
+                , $myCheckBox = $this.siblings('input');
+
+              e.preventDefault();
+              e.stopImmediatePropagation();
+
+              $this.unbind('mouseleave');
+              $this.trigger('mouseup');
+
+              $myCheckBox.attr('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
+            });
+
+            $this.on('mouseup', function (e) {
+              e.stopImmediatePropagation();
+              e.preventDefault();
+
+              $(this).unbind('mousemove');
+            });
+          }
+        });
+      }
+    );
+  };
+}($);
+
+$(function () {
+  $('.switch').switch();
+});

+ 168 - 0
static/sass/bootstrap-switch.scss

@@ -0,0 +1,168 @@
+@import "compass/css3";
+
+$border: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+$white: #ffffff;
+$blue: #0088cc;
+$gray: #e6e6e6;
+$border-radius: 4px;
+
+.switch {
+  display: inline-block;
+  cursor: pointer;
+  @include border-radius(5px);
+  border: 1px solid;
+  border-color: $border;
+  background: $gray;
+  position: relative;
+  text-align: left;
+  overflow: hidden;
+  line-height: 8px;
+
+  // disable text selection highlighting
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  min-width: 100px;
+
+  &.switch-mini {
+    min-width: 70px;
+  }
+
+  &.switch-small {
+    min-width: 80px;
+  }
+
+  &.switch-large {
+    min-width: 120px;
+  }
+
+  &.deactivate {
+    @include opacity(0.5);
+    cursor: default !important;
+    label, span {
+      cursor: default !important;
+    }
+  }
+  > div {
+    display: inline-block;
+    width: 150%;
+    position: relative;
+    top: 0;
+
+    &.switch-animate {
+      @include transition(left 0.5s);
+    }
+    &.switch-off {
+      left: -49.5%;
+    }
+    &.switch-on {
+      left: 0%;
+    }
+  }
+  input[type=checkbox] {
+    //debug
+    display: none;
+    //position: absolute;
+    //margin-left: 60%;
+    //z-index: 123;
+  }
+
+  span, label {
+    @include box-sizing(border-box);
+
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    height: 100%;
+
+    padding-bottom: 4px;
+    padding-top: 4px;
+    font-size: 14px;
+    line-height: 20px;
+
+    &.switch-mini {
+      padding-bottom: 4px;
+      padding-top: 4px;
+      font-size: 10px;
+      line-height: 9px;
+    }
+
+    &.switch-small {
+      padding-bottom: 3px;
+      padding-top: 3px;
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    &.switch-large {
+      padding-bottom: 9px;
+      padding-top: 9px;
+      font-size: 16px;
+      line-height: normal;
+    }
+  }
+
+  label {
+    background: $white;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    z-index: 100;
+    width: 34%;
+    border-left: 1px solid $gray;
+    border-right: 1px solid $gray;
+
+    @include background-image(linear-gradient(top, $white, $gray));
+  }
+
+  span {
+    color: $white;
+    text-align: center;
+    z-index: 1;
+    width: 33%;
+
+    &.switch-left {
+      @include border-top-left-radius($border-radius);
+      @include border-bottom-left-radius($border-radius);
+    }
+    &.switch-right {
+      color: black;
+      @include border-top-right-radius($border-radius);
+      @include border-bottom-right-radius($border-radius);
+      @include background-image(linear-gradient(bottom, $white, $gray));
+    }
+
+    &.switch-primary, &.switch-left {
+      color: $white;
+      background: $blue;
+      @include background-image(linear-gradient(bottom, $blue, #0055CC));
+    }
+    &.switch-info {
+      $startColor: #5BC0DE;
+      color: $white;
+      background: $startColor;
+      @include background-image(linear-gradient(bottom, $startColor, #2F96B4));
+    }
+    &.switch-success {
+      $startColor: #62C462;
+      color: $white;
+      background: $startColor;
+      @include background-image(linear-gradient(bottom, $startColor, #51A351));
+    }
+    &.switch-warning {
+      $startColor: #DBB450;
+      color: $white;
+      background: $startColor;
+      @include background-image(linear-gradient(bottom, $startColor, #F89406));
+    }
+    &.switch-danger {
+      $startColor: #EE5f5B;
+      color: $white;
+      background: $startColor;
+      @include background-image(linear-gradient(bottom, $startColor, #BD362F));
+    }
+  }
+}

+ 203 - 0
static/stylesheets/bootstrap-switch.css

@@ -0,0 +1,203 @@
+/* line 9, ../sass/bootstrap-switch.scss */
+.switch {
+  display: inline-block;
+  cursor: pointer;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  border: 1px solid;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  background: #e6e6e6;
+  position: relative;
+  text-align: left;
+  overflow: hidden;
+  line-height: 8px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-width: 100px;
+}
+/* line 31, ../sass/bootstrap-switch.scss */
+.switch.switch-mini {
+  min-width: 70px;
+}
+/* line 35, ../sass/bootstrap-switch.scss */
+.switch.switch-small {
+  min-width: 80px;
+}
+/* line 39, ../sass/bootstrap-switch.scss */
+.switch.switch-large {
+  min-width: 120px;
+}
+/* line 43, ../sass/bootstrap-switch.scss */
+.switch.deactivate {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+  opacity: 0.5;
+  cursor: default !important;
+}
+/* line 46, ../sass/bootstrap-switch.scss */
+.switch.deactivate label, .switch.deactivate span {
+  cursor: default !important;
+}
+/* line 50, ../sass/bootstrap-switch.scss */
+.switch > div {
+  display: inline-block;
+  width: 150%;
+  position: relative;
+  top: 0;
+}
+/* line 56, ../sass/bootstrap-switch.scss */
+.switch > div.switch-animate {
+  -webkit-transition: left 0.5s;
+  -moz-transition: left 0.5s;
+  -o-transition: left 0.5s;
+  transition: left 0.5s;
+}
+/* line 59, ../sass/bootstrap-switch.scss */
+.switch > div.switch-off {
+  left: -49.5%;
+}
+/* line 62, ../sass/bootstrap-switch.scss */
+.switch > div.switch-on {
+  left: 0%;
+}
+/* line 66, ../sass/bootstrap-switch.scss */
+.switch input[type=checkbox] {
+  display: none;
+}
+/* line 74, ../sass/bootstrap-switch.scss */
+.switch span, .switch label {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  font-size: 14px;
+  line-height: 20px;
+}
+/* line 87, ../sass/bootstrap-switch.scss */
+.switch span.switch-mini, .switch label.switch-mini {
+  padding-bottom: 4px;
+  padding-top: 4px;
+  font-size: 10px;
+  line-height: 9px;
+}
+/* line 94, ../sass/bootstrap-switch.scss */
+.switch span.switch-small, .switch label.switch-small {
+  padding-bottom: 3px;
+  padding-top: 3px;
+  font-size: 12px;
+  line-height: 18px;
+}
+/* line 101, ../sass/bootstrap-switch.scss */
+.switch span.switch-large, .switch label.switch-large {
+  padding-bottom: 9px;
+  padding-top: 9px;
+  font-size: 16px;
+  line-height: normal;
+}
+/* line 109, ../sass/bootstrap-switch.scss */
+.switch label {
+  background: white;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  z-index: 100;
+  width: 34%;
+  border-left: 1px solid #e6e6e6;
+  border-right: 1px solid #e6e6e6;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(top, #ffffff, #e6e6e6);
+}
+/* line 121, ../sass/bootstrap-switch.scss */
+.switch span {
+  color: white;
+  text-align: center;
+  z-index: 1;
+  width: 33%;
+}
+/* line 127, ../sass/bootstrap-switch.scss */
+.switch span.switch-left {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  border-top-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+/* line 131, ../sass/bootstrap-switch.scss */
+.switch span.switch-right {
+  color: black;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+  border-top-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
+  background-image: -webkit-linear-gradient(bottom, #ffffff, #e6e6e6);
+  background-image: -moz-linear-gradient(bottom, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(bottom, #ffffff, #e6e6e6);
+  background-image: linear-gradient(bottom, #ffffff, #e6e6e6);
+}
+/* line 138, ../sass/bootstrap-switch.scss */
+.switch span.switch-primary, .switch span.switch-left {
+  color: white;
+  background: #0088cc;
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0088cc), color-stop(100%, #0055cc));
+  background-image: -webkit-linear-gradient(bottom, #0088cc, #0055cc);
+  background-image: -moz-linear-gradient(bottom, #0088cc, #0055cc);
+  background-image: -o-linear-gradient(bottom, #0088cc, #0055cc);
+  background-image: linear-gradient(bottom, #0088cc, #0055cc);
+}
+/* line 143, ../sass/bootstrap-switch.scss */
+.switch span.switch-info {
+  color: white;
+  background: #5bc0de;
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
+  background-image: -webkit-linear-gradient(bottom, #5bc0de, #2f96b4);
+  background-image: -moz-linear-gradient(bottom, #5bc0de, #2f96b4);
+  background-image: -o-linear-gradient(bottom, #5bc0de, #2f96b4);
+  background-image: linear-gradient(bottom, #5bc0de, #2f96b4);
+}
+/* line 149, ../sass/bootstrap-switch.scss */
+.switch span.switch-success {
+  color: white;
+  background: #62c462;
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #62c462), color-stop(100%, #51a351));
+  background-image: -webkit-linear-gradient(bottom, #62c462, #51a351);
+  background-image: -moz-linear-gradient(bottom, #62c462, #51a351);
+  background-image: -o-linear-gradient(bottom, #62c462, #51a351);
+  background-image: linear-gradient(bottom, #62c462, #51a351);
+}
+/* line 155, ../sass/bootstrap-switch.scss */
+.switch span.switch-warning {
+  color: white;
+  background: #dbb450;
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dbb450), color-stop(100%, #f89406));
+  background-image: -webkit-linear-gradient(bottom, #dbb450, #f89406);
+  background-image: -moz-linear-gradient(bottom, #dbb450, #f89406);
+  background-image: -o-linear-gradient(bottom, #dbb450, #f89406);
+  background-image: linear-gradient(bottom, #dbb450, #f89406);
+}
+/* line 161, ../sass/bootstrap-switch.scss */
+.switch span.switch-danger {
+  color: white;
+  background: #ee5f5b;
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
+  background-image: -webkit-linear-gradient(bottom, #ee5f5b, #bd362f);
+  background-image: -moz-linear-gradient(bottom, #ee5f5b, #bd362f);
+  background-image: -o-linear-gradient(bottom, #ee5f5b, #bd362f);
+  background-image: linear-gradient(bottom, #ee5f5b, #bd362f);
+}

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác