search

JaminQuimby / AWS

AWS
1 stars 0 forks source link

New Check Box / Slider #24

Closed mscislo closed 10 years ago

mscislo commented 10 years ago

Code to follow.

Will be including code for:

Credit Hold Check Box

All other check boxes

mscislo commented 10 years ago

Also, all sliders are to be defaulted to "no" other then the one for Active, on the client maintenance page. When creating a new client it should default to "yes". After that it will reference the table.

The red slider, "ios-switchb", is to be used on the credit hold field on all forms and on the not required field on tax returns.

The green slider, "ios-switch", is for all other check box fields.

emidas commented 10 years ago

testing.html Line 7 is the reference to the iOS checkbox stylesheet Lines 73-74 are where the switches are being used. The inputs must be surrounded by a label for them to work properly. Having the input be checked defaults to yes. Lines 115-134 is the JS needed for the switches. 115-124 is for the first class, 125-134 is for the second.

ios.css Lines 1-72 is for the first class, 74-145 is for the second class. Changing the main color of the switches is easy, just requires a replacement HSL on line 15 for the first class, and line 88 for the second.

emidas commented 10 years ago

ios.css :root input[type="checkbox"] { /* :root here acting as a filter for older browsers */ position: absolute; opacity: 0; }

:root input[type="checkbox"].ios-switch + div { display: inline-block; vertical-align: middle; width: 3em; height: 1em; border: 1px solid rgba(0,0,0,.3); border-radius: 999px; margin: 0 .5em; background: white; background-image: linear-gradient(rgba(0,0,0,.1), transparent), linear-gradient(90deg, hsl(135, 69%, 46%) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; background-origin: border-box; background-clip: border-box; overflow: hidden; transition-duration: .4s; transition-property: padding, width, background-position, text-indent; box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset, 0 .45em 0 .1em rgba(0,0,0,.05) inset; font-size: 150%; }

:root input[type="checkbox"].ios-switch:checked + div { padding-left: 2em; width: 1em; background-position: 0 0; }

:root input[type="checkbox"].ios-switch + div:before { content: 'Yes'; float: left; width: 1.65em; height: 1.65em; margin: -.1em; border: 1px solid rgba(0,0,0,.35); border-radius: inherit; background: white; background-image: linear-gradient(rgba(0,0,0,.2), transparent); box-shadow: 0 .1em .1em .1em hsla(0,0%,100%,.8) inset, 0 0 .5em rgba(0,0,0,.3); color: white; text-shadow: 0 -1px 1px rgba(0,0,0,.3); text-indent: -2.5em; }

:root input[type="checkbox"].ios-switch:active + div:before { background-color: #eee; }

:root input[type="checkbox"].ios-switch:focus + div { box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset, 0 .45em 0 .1em rgba(0,0,0,.05) inset, 0 0 .4em 1px rgba(255,0,0,.5); }

:root input[type="checkbox"].ios-switch + div:before, :root input[type="checkbox"].ios-switch + div:after { font: bold 60%/1.9 sans-serif; text-transform: uppercase; }

:root input[type="checkbox"].ios-switch + div:after { content: 'No'; float: left; text-indent: .5em; color: rgba(0,0,0,.45); text-shadow: none;

}

:root input[type="checkbox"] { /* :root here acting as a filter for older browsers */ position: absolute; opacity: 0; }

:root input[type="checkbox"].ios-switchb + div { display: inline-block; vertical-align: middle; width: 3em; height: 1em; border: 1px solid rgba(0,0,0,.3); border-radius: 999px; margin: 0 .5em; background: white; background-image: linear-gradient(rgba(0,0,0,.1), transparent), linear-gradient(90deg, hsl(7, 100%, 50%) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; background-origin: border-box; background-clip: border-box; overflow: hidden; transition-duration: .4s; transition-property: padding, width, background-position, text-indent; box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset, 0 .45em 0 .1em rgba(0,0,0,.05) inset; font-size: 150%; }

:root input[type="checkbox"].ios-switchb:checked + div { padding-left: 2em; width: 1em; background-position: 0 0; }

:root input[type="checkbox"].ios-switchb + div:before { content: 'Yes'; float: left; width: 1.65em; height: 1.65em; margin: -.1em; border: 1px solid rgba(0,0,0,.35); border-radius: inherit; background: white; background-image: linear-gradient(rgba(0,0,0,.2), transparent); box-shadow: 0 .1em .1em .1em hsla(0,0%,100%,.8) inset, 0 0 .5em rgba(0,0,0,.3); color: white; text-shadow: 0 -1px 1px rgba(0,0,0,.3); text-indent: -2.5em; }

:root input[type="checkbox"].ios-switchb:active + div:before { background-color: #eee; }

:root input[type="checkbox"].ios-switchb:focus + div { box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset, 0 .45em 0 .1em rgba(0,0,0,.05) inset, 0 0 .4em 1px rgba(255,0,0,.5); }

:root input[type="checkbox"].ios-switchb + div:before, :root input[type="checkbox"].ios-switchb + div:after { font: bold 60%/1.9 sans-serif; text-transform: uppercase; }

:root input[type="checkbox"].ios-switchb + div:after { content: 'No'; float: left; text-indent: .5em; color: rgba(0,0,0,.45); text-shadow: none;

}

emidas commented 10 years ago 
<!DOCTYPE html> 
<html><head><title>AWSEND, Inc.</title>
<meta charset="UTF-8">
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="AWSEND, Inc.">
<link href="./css/ios.css" rel="stylesheet" type="text/css">
<link href="./css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="./img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
</head>
<body>

<!-- Google Analytics Start -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44851805-2', 'awsend.com');
  ga('send', 'pageview');

</script>
<!-- Google Analytics End -->

<!-- Header Table Start -->
<div id="headerwrapper">
<div id="header">
  <p></p>
</div>
<div id="header2"><a href="./index.html"><IMG alt="AWSEND logo" src="./img/logotop.png"></a></div>

<!-- Header Table End -->

<!-- NavBar Start -->
<div id="nav">
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="./index.html" style="width:92px;height:32px;line-height:32px;" class="index"><img src="./css/home.png" alt=""/>Home</a></li>
    <li class="topmenu"><a href="./working.html" style="width:106px;height:32px;line-height:32px;"><span><img src="./css/find.png" alt=""/>Explore</span></a>
    <ul>
        <li><a href="./working.html"><img src="./css/cloud.png" alt=""/>Working in the Cloud</a></li>
        <li><a href="./cloudserver.html"><img src="./css/cloud.png" alt=""/>Your Cloud Server</a></li>
        <li><a href="./applications.html"><img src="./css/cloud.png" alt=""/>Your Applications</a></li>
        <li><a href="./licensing.html"><img src="./css/cloud.png" alt=""/>Your Licensing</a></li>
        <li><a href="./accreditation.html"><img src="./css/cloud.png" alt=""/>Accreditation</a></li>
        <li><a href="./partners.html"><img src="./css/cloud.png" alt=""/>Our Partners</a></li>
        <li><a href="./legal.html"><img src="./css/cloud.png" alt=""/>Legal</a></li>
        <li><a href="./contactus.html"><img src="./css/cloud.png" alt=""/>Contact Us</a></li>
        <li><a href="http://thecloudexchange.awsend.com/" target="_blank"><img src="./css/cloud.png" alt=""/>Blog</a></li>
    </ul></li>
    <li class="topmenu"><a href="./accountants.html" style="height:32px;line-height:32px;"><span><img src="./css/help.png" alt=""/>Why AWSEND</span></a>
    <ul>
        <li><a href="./accountants.html"><img src="./css/luggage.png" alt=""/>Accountants &amp; Bookkeepers</a></li>
        <li><a href="./businesses.html"><img src="./css/luggage.png" alt=""/>Small Businesses</a></li>
        <li><a href="./mobile.html"><img src="./css/travel.png" alt=""/>Mobile</a></li>
    </ul></li>
    <li class="topmenu"><a href="http://awsend.3dcartstores.com/Your-Cloud-Server_c_9.html" style="height:32px;line-height:32px;"><img src="./css/buy.png" alt=""/>Purchase Now</a></li>
</ul>
</div>
</div> <!-- end div for headerwrapper-->
<!-- NavBar End -->

<!-- Body Table Start -->
<div id="banner">
<div id="banner2"></div>
</div>
<div id="wrapper">

<div class="rect" style="text-align:left;">
<h1>iOS 6 style switches with pure CSS</h1>

Green when checked: <label><input type="checkbox" class="ios-switch" /></label>
Red when checked:<label><input type="checkbox" class="ios-switchb" checked /></label>
</ul>
</div>

</div>

<!-- Body Table End -->

<!-- Sitemap Table Start -->
<div id="sitemap">
<div id="sitemapbar">
<div id="smb1"><h3>Home</h3><ul><li><a href="./index.html">Home</a></li></ul></div>
<div id="smb2"><h3>Explore</h3><ul><li><a href="./working.html">Working in the Cloud</a></li><li><a href="./cloudserver.html">Your Cloud Server</a></li><li><a href="./applications.html">Your Applications</a></li><li><a href="./licensing.html">Your Licensing</a></li><li><a href="./accreditation.html">Accreditation</a></li><li><a href="./partners.html">Our Partners</a></li><li><a href="./legal.html">Legal</a></li><li><a href="./contactus.html">Contact Us</a></li><li><a href="http://thecloudexchange.awsend.com/" target=_blank>Blog</a></li></ul></div>
<div id="smb3"><h3>Why AWSEND</h3><ul><li><a href="./accountants.html">Accountants & Bookkeepers</a></li><li><a href="./businesses.html">Small Businesses</a></li><li><a href="./mobile.html">Mobile</a></li></ul></div>
<div id="smb4"><h3>Customer Information</h3><ul><li><a href="http://awsend.3dcartstores.com/message.asp?msg=49">My Cart</a></li><li><a href="https://awsend.3dcartstores.com/myaccount.asp">My Account</a></li></ul></div>
<div id="smb5"><h3>Getting Connected</h3><a href="http://www.facebook.com/AWSEND" target="_blank"><img src="./img/facebookb.png" alt="AWSEND on Facebook" onmouseover="this.src='./img/facebook.png'" onmouseout="this.src='./img/facebookb.png'"></a><a href="http://www.twitter.com/AWSENDINC" target="_blank"><img src="./img/twitterb.png" alt="AWSEND on Twitter" onmouseover="this.src='./img/twitter.png'" onmouseout="this.src='./img/twitterb.png'"></a><a href="http://www.youtube.com/workflow4accountants" target="_blank"><img src="./img/youtubeb.png" alt="AWSEND on Youtube" onmouseover="this.src='./img/youtube.png'" onmouseout="this.src='./img/youtubeb.png'"></a></div>
</div>
</div>
<!-- Sitemap Table End -->

<!-- Footer Table Start -->
<div id="footer">
<div id="footerbar">
<br><br>2013 AWSEND, Inc. | Sales: (800) 803-4589 | Support: (800) 804-1073 | <a href="mailto:sales@AWSEND.com">sales@AWSEND.com</a>
</div>
</div>
<!-- Footer Table End -->

<!-- Script Load Start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <!-- JQuery Library -->
<script>
function popNow(target) {
vwidth = screen.width;
vheight = screen.height;
popWin = window.open(target, "Media Player", "width=560,height=320,status=yes,resizable=Yes");
vwidth = (vwidth/2) - 280;
vheight = (vheight/2) - 160;
popWin.moveTo(vwidth,vheight);
}
</script>
<script>
// JS is only used to add the <div>s
var switches = document.querySelectorAll('input[type="checkbox"].ios-switch');

for (var i=0, sw; sw = switches[i++]; ) {
    var div = document.createElement('div');
    div.className = 'switch';
    sw.parentNode.insertBefore(div, sw.nextSibling);
}
</script>
<script>
// JS is only used to add the <div>s
var switches = document.querySelectorAll('input[type="checkbox"].ios-switchb');

for (var i=0, sw; sw = switches[i++]; ) {
    var div = document.createElement('div');
    div.className = 'switch';
    sw.parentNode.insertBefore(div, sw.nextSibling);
}
</script>
<!-- Script Load End -->

</body>
</html>
JaminQuimby commented 10 years ago

Modified code to streamline it http://jsfiddle.net/whAs7/