Commits

beholder committed 5376da4

Initial commit.

Comments (0)

Files changed (4)

+<!doctype html>
+<html>
+  <head>
+    <title>iOS CSS switch</title>
+    <style>
+      body {
+        background: #eee;
+        font-family: Arial, sans-serif;
+      }
+      article {
+        width: 35em;
+        padding: 2em;
+        margin: 10em auto 0;
+        background: #fff;
+      }
+      .switch {
+        margin: 1.8em 0 3em;
+      }
+    </style>
+    <link rel="stylesheet" type="text/css" href="iswitch.css">
+  </head>
+  <body>
+    <article>
+
+      <h1>iOS-style CSS switcher</h1>
+
+      <p>You could change color and size of the switch in LESS file.</p>
+
+      <div class="switch">
+        <input type="radio" name="radio" id="radio-1" checked> <label for="radio-1">Option 1</label>
+        <input type="radio" name="radio" id="radio-2"> <label for="radio-2">Option 2</label>
+      </div>
+
+      <p><a href="http://code.aether.ru/iswitch">Return to repository</a></p>
+
+    </article>
+  </body>
+</html>
+.switch {
+  line-height: 1.0;
+}
+.switch input {
+  display: none;
+}
+.switch label {
+  -webkit-transition: 0.1s;
+  -moz-transition: 0.1s;
+  -ms-transition: 0.1s;
+  -o-transition: 0.1s;
+  transition: 0.1s;
+  display: inline-block;
+  color: #888;
+  position: relative;
+  line-height: 25px;
+  cursor: pointer;
+  z-index: 10;
+}
+.switch label:first-of-type {
+  padding-right: 47.5px;
+}
+.switch label:last-of-type {
+  padding-left: 47.5px;
+}
+.switch input:checked + label {
+  color: #222;
+  cursor: default;
+}
+.switch input:checked + label:first-of-type {
+  padding-right: 17.5px;
+}
+.switch input:checked + label:last-of-type {
+  padding-left: 17.5px;
+}
+.switch label:first-of-type:after {
+  display: inline-block;
+  position: absolute;
+  content: "";
+  background: #999999;
+  background-color: #62bafb;
+  background-image: -webkit-linear-gradient(top, #0570bf, #62bafb);
+  background-image: -moz-linear-gradient(top, #0570bf, #62bafb);
+  background-image: -ms-linear-gradient(top, #0570bf, #62bafb);
+  background-image: -o-linear-gradient(top, #0570bf, #62bafb);
+  background-image: linear-gradient(top, #0570bf, #62bafb);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0570bf', endColorstr='#62bafb', GradientType=1);
+  box-shadow: inset 2px 3px 3px rgba(3, 68, 116, 0.8), inset 6px 12.5px 0px rgba(6, 132, 226, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.33);
+  border-radius: 25px;
+  width: 50px;
+  height: 25px;
+  margin-left: 10px;
+}
+.switch label:first-of-type:before {
+  display: inline-block;
+  position: absolute;
+  content: "";
+  background: #cccccc;
+  background-color: #fafafa;
+  background-image: -webkit-linear-gradient(top, #d9d9d9, #fafafa);
+  background-image: -moz-linear-gradient(top, #d9d9d9, #fafafa);
+  background-image: -ms-linear-gradient(top, #d9d9d9, #fafafa);
+  background-image: -o-linear-gradient(top, #d9d9d9, #fafafa);
+  background-image: linear-gradient(top, #d9d9d9, #fafafa);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#fafafa', GradientType=1);
+  box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.33), inset 0px 2px 0px rgba(255, 255, 255, 0.8), inset 0px -2px 0px rgba(255, 255, 255, 0.8);
+  border: 1px solid #999999;
+  border-radius: 25px;
+  width: 23px;
+  height: 23px;
+  right: -15.5px;
+  z-index: 5;
+}
+
+/* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */
+// Vars ////////////////////////////////////////////////////////////////////////
+
+@white: #fff;
+@black: #000;
+@blue:  #0570BF;
+
+@switch-size: 25px;
+@switch-gap:  10px;
+
+// Mixins //////////////////////////////////////////////////////////////////////
+
+.transition(@transition) {
+  -webkit-transition: @transition;
+     -moz-transition: @transition;
+      -ms-transition: @transition;
+       -o-transition: @transition;
+          transition: @transition;
+}
+
+.linear-gradient(@direction, @startColor: #fff, @endColor: #000) {
+  background-color: @endColor;
+  background-image: -webkit-linear-gradient(@direction, @startColor, @endColor);
+     background-image: -moz-linear-gradient(@direction, @startColor, @endColor);
+      background-image: -ms-linear-gradient(@direction, @startColor, @endColor);
+       background-image: -o-linear-gradient(@direction, @startColor, @endColor);
+          background-image: linear-gradient(@direction, @startColor, @endColor);
+  background-repeat: repeat-x;
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", @startColor, @endColor)); // IE9 and down
+}
+
+// Code ////////////////////////////////////////////////////////////////////////
+
+.switch {
+  line-height: 1.0;
+
+  input {
+    display: none;
+  }
+  label {
+    .transition(.1s);
+    display: inline-block;
+    color: #888;
+    position: relative;
+    line-height: @switch-size;
+    cursor: pointer;
+    z-index: 10;
+
+    &:first-of-type {
+      padding-right: @switch-size * 2 - @switch-size / 2 + @switch-gap;
+    }
+    &:last-of-type {
+      padding-left: @switch-size * 2 - @switch-size / 2 + @switch-gap;
+    }
+  }
+  input:checked + label {
+    color: #222;
+    cursor: default;
+  }
+  input:checked + label:first-of-type {
+    padding-right: @switch-size / 2 + @switch-gap / 2;
+  }
+  input:checked + label:last-of-type {
+    padding-left: @switch-size / 2 + @switch-gap / 2;
+  }
+
+  label:first-of-type {
+    &:after {
+      display: inline-block;
+      position: absolute;
+      content: "";
+      background: lighten(@black, 60%);
+      .linear-gradient(top, @blue, lighten(@blue, 30%));
+      box-shadow:
+        inset 2px 3px 3px fade(darken(@blue, 15%), 80%),
+        inset 6px @switch-size / 2 0px fade(lighten(@blue, 7%), 80%),
+        inset 0 -1px 1px fade(@black, 33%);
+      border-radius: @switch-size;
+      width: @switch-size * 2;
+      height: @switch-size;
+      margin-left: @switch-gap;
+    }
+    &:before{
+      display: inline-block;
+      position: absolute;
+      content: "";
+      background: lighten(@black, 80%);
+      .linear-gradient(top, lighten(@black, 85%), lighten(@black, 98%));
+      box-shadow:
+        -1px 0px 2px fade(@black, 33%),
+        inset 0px 2px 0px fade(@white, 80%),
+        inset 0px -2px 0px fade(@white, 80%);
+      border: 1px solid lighten(@black, 60%);
+      border-radius: @switch-size;
+      width: @switch-size - 2;
+      height: @switch-size - 2;
+      right: -@switch-size / 2 - @switch-gap / 2 + 2;
+      z-index: 5;
+    }
+  }
+}
+.switch{line-height:1.0}.switch input{display:none}.switch label{-webkit-transition:.1s;-moz-transition:.1s;-ms-transition:.1s;-o-transition:.1s;transition:.1s;display:inline-block;color:#888;position:relative;line-height:25px;cursor:pointer;z-index:10}.switch label:first-of-type{padding-right:47.5px}.switch label:last-of-type{padding-left:47.5px}.switch input:checked+label{color:#222;cursor:default}.switch input:checked+label:first-of-type{padding-right:17.5px}.switch input:checked+label:last-of-type{padding-left:17.5px}.switch label:first-of-type:after{display:inline-block;position:absolute;content:"";background:#999;background-color:#62bafb;background-image:-webkit-linear-gradient(top, #0570bf, #62bafb);background-image:-moz-linear-gradient(top, #0570bf, #62bafb);background-image:-ms-linear-gradient(top, #0570bf, #62bafb);background-image:-o-linear-gradient(top, #0570bf, #62bafb);background-image:linear-gradient(top, #0570bf, #62bafb);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0570bf', endColorstr='#62bafb', GradientType=1);box-shadow:inset 2px 3px 3px rgba(3,68,116,.8),inset 6px 12.5px 0 rgba(6,132,226,.8),inset 0 -1px 1px rgba(0,0,0,.33);border-radius:25px;width:50px;height:25px;margin-left:10px}.switch label:first-of-type:before{display:inline-block;position:absolute;content:"";background:#ccc;background-color:#fafafa;background-image:-webkit-linear-gradient(top, #d9d9d9, #fafafa);background-image:-moz-linear-gradient(top, #d9d9d9, #fafafa);background-image:-ms-linear-gradient(top, #d9d9d9, #fafafa);background-image:-o-linear-gradient(top, #d9d9d9, #fafafa);background-image:linear-gradient(top, #d9d9d9, #fafafa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#fafafa', GradientType=1);box-shadow:-1px 0 2px rgba(0,0,0,.33),inset 0 2px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(255,255,255,.8);border:1px solid #999;border-radius:25px;width:23px;height:23px;right:-15.5px;z-index:5}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.