Home Verkennen Help
Inloggen
pwa
/
Lungo.js
spiegel van https://github.com/tapquo/Lungo.js.git
2
0
Vork 0
Bestanden Issues 0 Wiki
Bladeren bron

NEW: Form element <input>: checkbox & radio

… as iPhone style.
Javier Jiménez Villar 14 jaren geleden
bovenliggende
14da66a220
commit
566ca9356f
3 gewijzigde bestanden met toevoegingen van 175 en 19 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 21 4
      examples/test_src/index.html
  2. 7 1
      src/boot/Lungo.Boot.Article.js
  3. 147 14
      src/stylesheets/widgets.css

+ 21 - 4
examples/test_src/index.html
Bestand weergeven 

@@ -23,7 +23,7 @@
 
     <link rel="stylesheet" href="../../src/stylesheets/widgets.css">
 
     <link rel="stylesheet" href="../../src/stylesheets/lungo.theme.default.css">
 
     <!-- App Stylesheet -->
 
-    <link rel="stylesheet" href="assets/stylesheets/app.css?v=1">    
+    <link rel="stylesheet" href="assets/stylesheets/app.css?v=1">
 
 </head> 
  
 <body class="app">   
@@ -255,7 +255,8 @@
 
 	<section id="demo_forms">
 
 		<header data-back="home blue"></header>
 
 		<article>
 
-			<p class="form">
 
+		    <scroll id="scroll_forms">
 
+			<form>
 
 				<input type="text" placeholder="Input text"/>
 
 				<input type="password" placeholder="Input password"/>
 
 				<input type="checkbox">Save credentials</input>
 
@@ -267,11 +268,27 @@
 
 						<option value="3">Three</option>
 
 					</select>
 
 				</label>
 
+				<label data-icon="twitter"></label>
 
+				<label class="checkbox"><input type="checkbox" id="checkbox-0"/></label>
 
+
 
+				<label data-icon="facebook"></label>
 
+				<label class="checkbox"><input type="checkbox" id="checkbox-1" checked="checked"/></label>
 
+
 
+				<label data-icon="picture"></label>
 
+				<label class="checkbox"><input type="checkbox" id="checkbox-2"/></label>
 
+	
+	            <br/>
 
+				<label>Radio:</label>
 
+				<label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
 
+				<label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
 
+				<label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
 
+            </ul>
 
+            
 				<br/>
 
-				
 				<a href="#" class="button big green" data-icon="check">Accept</a>
 
 				<a href="#" class="button big red" data-icon="cancel">Cancel</a>
 
-			</p>
 
+			</form>
 
+			</scroll>
 
 		</article>
 
 	</section>

+ 7 - 1
src/boot/Lungo.Boot.Article.js
Bestand weergeven 

@@ -13,7 +13,8 @@ LUNGO.Boot.Article = (function(lng, undefined) {
 
 
     var SELECTORS = {
 
         LIST_IN_ARTICLE: 'article.list',
 
-        SCROLL_IN_ARTICLE: 'scroll'
 
+        SCROLL_IN_ARTICLE: 'scroll',
 
+        CHECKBOX_IN_ARTICLE: '.checkbox, .radio'
 
     };
 
 
     /**
 
@@ -24,6 +25,7 @@ LUNGO.Boot.Article = (function(lng, undefined) {
 
     var start = function() {
 
         _initElement(SELECTORS.LIST_IN_ARTICLE, _createListElement);
 
         _initElement(SELECTORS.SCROLL_IN_ARTICLE, _createScrollElement);
 
+        _initElement(SELECTORS.CHECKBOX_IN_ARTICLE, _b);
 
     };
 
 
     var _initElement = function(selector, callback) {
 
@@ -47,6 +49,10 @@ LUNGO.Boot.Article = (function(lng, undefined) {
 
         lng.View.Scroll.create(scroll_id);
 
     };
 
 
+    var _b = function(checkbox) {
 
+        checkbox.append('<span>&nbsp;</span>');
 
+    };
 
+
 
     return {
 
         start: start
 
     };

+ 147 - 14
src/stylesheets/widgets.css
Bestand weergeven 

@@ -110,13 +110,13 @@ a.button.big .icon{
 
 /* @end */
 
 
 /* @group <inputs> */
 
-.form{ 
+.form, form{ 
 	position: relative; 
 	margin: 8px; 
 	font-size: 1.15em;
 
 	font-weight: bold;}
 
 
-input, textarea, select {  
+input:not([type=checkbox]), textarea, select {  
 	display: inline-block; 
 	padding: 6px 6px 5px;
 
 	width: 95%; 
@@ -142,18 +142,6 @@ input[type=search]:before {
 
 
 select{ width: 100%;}
 
 
-input[type=checkbox]{ 
-	display: inline-block; 
-	margin: 0 0.25em 4px 0;
 
-	padding: 0; 
-	width: 1.25em; 
-	height: 1.25em; 
-	
-	-webkit-border-radius: 0.25em; 
-	vertical-align: text-top; 
-	
-	line-height: 1em; }
 
-
 
 
 label.select {
 
     position: relative;
 
@@ -177,6 +165,151 @@ label.select {
 
 .no-pointer-events .select:after {
 
 	content: none;}
 
 
+input[type="checkbox"], input[type="radio"]{
 
+	width: 74px;
 
+	float: left;
 
+	z-index: 1;
 
+}
 
+
 
+input[type="checkbox"] + span::after,
 
+   input[type="radio"] + span::after {
 
+	content: "off";
 
+}
 
+
 
+input[type="checkbox"]:checked + span::after,
 
+   input[type="radio"]:checked + span::after {
 
+	content: "on";
 
+}
 
+
 
+.iphone-toggle-buttons {
 
+	-moz-user-select: none;
 
+	-webkit-user-select: none;
 
+	user-select: none;
 
+}
 
+
 
+.iphone-toggle-buttons {
 
+	margin: 4px 0;
 
+}
 
+
 
+input[type="checkbox"] + span,
 
+   input[type="radio"] + span,
 
+   input[type="checkbox"] + span::before,
 
+   input[type="radio"] + span::before,
 
+   input[type="checkbox"] + span::after,
 
+   input[type="radio"] + span::after {
 
+	-moz-border-radius: 16px;
 
+	-webkit-border-radius: 16px;
 
+	border-radius: 16px;
 
+	display: inline-block;
 
+}
 
+
 
+input[type="checkbox"] + span::before,
 
+   input[type="radio"] + span::before,
 
+   input[type="checkbox"] + span::after,
 
+   input[type="radio"] + span::after,
 
+   input[type="checkbox"]:checked + span::before,
 
+   input[type="radio"]:checked + span::before,
 
+   input[type="checkbox"]:checked + span::after,
 
+   input[type="radio"]:checked + span::after {
 
+	top: 0;
 
+}
 
+
 
+input[type="checkbox"] + span::after,
 
+   input[type="radio"] + span::after,
 
+   input[type="checkbox"]:checked + span::before,
 
+   input[type="radio"]:checked + span::before {
 
+	right: 0;
 
+}
 
+
 
+input[type="checkbox"] + span::before,
 
+   input[type="radio"] + span::before,
 
+   input[type="checkbox"]:checked + span::after,
 
+   input[type="radio"]:checked + span::after {
 
+	left: 0;
 
+}
 
+
 
+input[type="checkbox"],
 
+   input[type="radio"],
 
+   input[type="checkbox"] + span::before,
 
+   input[type="radio"] + span::before,
 
+   input[type="checkbox"] + span::after,
 
+   input[type="radio"] + span::after {
 
+	position: absolute;
 
+}
 
+
 
+input[type="checkbox"],
 
+   input[type="radio"] {
 
+	filter: alpha(opacity=0);
 
+	-moz-opacity: 0;
 
+	-webkit-opacity: 0;
 
+	opacity: 0;
 
+}
 
+
 
+input[type="checkbox"] + span,
 
+   input[type="radio"] + span {
 
+	width: 74px;
 
+	
+	margin-bottom: 8px; 
+	height: 30px;
 
+	font: bold 14px/30px Arial, Sans-serif;
 
+	color: #8c8c8c;
 
+	text-transform: uppercase;
 
+	border: solid 1px #bcbbbb;
 
+	background: #ccc;
 
+	
+	background: #c8c8c8 -webkit-gradient(linear, left top, left bottom, color-stop(0, #c8c8c8), color-stop(1, #f3f3f3));
 
+
 
+       position: relative;
 
+	text-indent: -9999px;
 
+}
 
+
 
+input[type="checkbox"] + span::before,
 
+   input[type="radio"] + span::before {
 
+	content: "";
 
+	width: 29px;
 
+	height: 29px;
 
+	border-top: solid 1px #fff;
 
+	border-right: solid 1px #bebebe;
 
+	background: #cfcfcf;
 
+	
+	background: #cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));
 
+	-webkit-box-shadow: 1px 0 1px #bebebe;
 
+	box-shadow: 1px 0 1px #bebebe;
 
+}
 
+
 
+input[type="checkbox"] + span::after,
 
+   input[type="radio"] + span::after {
 
+	text-indent: 0;
 
+	width: 56px;
 
+	height: 32px;
 
+	text-align: center;
 
+}
 
+
 
+input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
 
+	background: #5d96ea -webkit-gradient(linear, left top, left bottom, color-stop(0, #1b45bd), color-stop(1, #5d96ea));
 
+	color: #fff;
 
+	text-shadow: -1px -1px #0d2046;
 
+}
 
+
 
+input[type="checkbox"]:checked + span::before,
 
+   input[type="radio"]:checked + span::before {
 
+	left: auto;
 
+	-webkit-box-shadow: -2px 0 1px #3a5e91;
 
+	box-shadow: -2px 0 1px #3a5e91;
 
+}
 
+
 
+input[type="checkbox"]:checked + span::after,
 
+   input[type="radio"]:checked + span::after {
 
+	border-top: solid 1px #0f2a4f;
 
+	border-bottom: solid 1px #0f2a4f;
 
+	border-left: solid 1px #2c5496;
 
+	height: 30px;
 
+	top: -1px;
 
+	left: -1px;
 
+	-webkit-border-radius: 16px 0 0 16px;
 
+	border-radius: 16px 0 0 16px;
 
+}
 
+
 
 @media screen and (-webkit-min-device-pixel-ratio:0) { 
 	.custom-select select {padding-right:30px;}}
 
 /* @end */