A Pen by Prima Utama Apriansyah on CodePen.
Created
September 20, 2015 14:30
-
-
Save primaapriansyah/7c9f7c2c06fe5214a84f to your computer and use it in GitHub Desktop.
sLxwp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body ontouchstart=""> | |
| <div class="demo"><!-- for demo purposes only --> | |
| <div class="app with-subheader"> | |
| <header class="header"> | |
| <h1 class="header-title">App</h1> | |
| <a href="menu.html" class="header-button left icon-list">Menu</a> | |
| <a href="index.html" class="header-button right">Button</a> | |
| </header> | |
| <div class="subheader three"> | |
| <a href="index.html" class="subheader-button">Article</a> | |
| <a href="index.html" class="subheader-button active">Demo</a> | |
| <a href="index.html" class="subheader-button"> | |
| Comments <span class="subheader-counter">8</span> | |
| </a> | |
| </div> | |
| <section class="container"> | |
| <div class="text"> | |
| <h2>Heading</h2> | |
| <p> | |
| Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit… | |
| <a href="index.html" class="more-link">More</a> | |
| </p> | |
| </div> | |
| <div class="text"> | |
| <a href="index.html" class="button">Install</a> | |
| <input type="submit" value="Save" class="button blue"> | |
| <button class="button green">Buy</button> | |
| <a href="index.html" class="button red">Delete</a> | |
| </div> | |
| <ul class="pills"> | |
| <li class="pill"><a href="index.html">Details</a></li> | |
| <li class="pill active"><a href="index.html">Reviews</a></li> | |
| <li class="pill"><a href="index.html">Related</a></li> | |
| </ul> | |
| <div class="pills-content"> | |
| <a href="index.html" class="tag">iOS</a> | |
| <a href="index.html" class="tag">Mobile</a> | |
| <a href="index.html" class="tag">UI Kit</a> | |
| <a href="index.html" class="tag">CSS</a> | |
| </div> | |
| <div class="text"> | |
| <a href="index.html" class="button block">More…</a> | |
| </div> | |
| </section> | |
| <nav class="footer"> | |
| <a href="index.html" class="footer-link active"> | |
| <span class="icon-home"></span> Home | |
| </a> | |
| <a href="menu.html" class="footer-link"> | |
| <span class="icon-more"></span> Menu | |
| </a> | |
| <a href="form-1.html" class="footer-link"> | |
| <span class="icon-square"></span> Forms | |
| </a> | |
| <a href="list-1.html" class="footer-link"> | |
| <span class="icon-circle"></span> Lists | |
| <!-- <span class="subheader-counter">8</span> --> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{font:13px/1.5 "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;color:#555;background:#e6ecee;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none}a{font-weight:bold;color:#3b3b3b;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.header{position:absolute;z-index:2;top:0;width:100%;height:43px;text-align:center;background:#2e67bb;border-bottom:1px solid #051024;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:-webkit-linear-gradient(top, #599fef,#0c3b91);background-image:-moz-linear-gradient(top, #599fef,#0c3b91);background-image:-o-linear-gradient(top, #599fef,#0c3b91);background-image:linear-gradient(to bottom, #599fef,#0c3b91);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.25),0 0 3px rgba(0,0,0,0.5);box-shadow:inset 0 1px rgba(255,255,255,0.25),0 0 3px rgba(0,0,0,0.5)}.header-title{position:absolute;top:0;width:100%;font:bold 19px/42px "Arial Rounded MT Bold","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;color:white;text-shadow:0 -1px #0c2960}.header-button{display:block;position:relative;z-index:1;margin:7px;padding:0 10px;height:28px;line-height:28px;font-size:12px;font-weight:bold;color:#dbf5ff;text-shadow:0 -1px black;background:#1c4ead;border:1px solid;border-color:#15408c #0f3274 #0c2960;border-radius:3px;-webkit-appearance:none;-webkit-font-smoothing:antialiased;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;background-image:-webkit-linear-gradient(top, #4689ec,#265abe 50%,#1c4aa0 51%,#123d8b);background-image:-moz-linear-gradient(top, #4689ec,#265abe 50%,#1c4aa0 51%,#123d8b);background-image:-o-linear-gradient(top, #4689ec,#265abe 50%,#1c4aa0 51%,#123d8b);background-image:linear-gradient(to bottom, #4689ec,#265abe 50%,#1c4aa0 51%,#123d8b);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.15),0 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px rgba(255,255,255,0.15),0 1px rgba(0,0,0,0.1)}.header-button:active,.header-button.active{color:#c5dbee;background:#123d8b;border-color:#0c2960;-webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 4px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1)}.header-button.light{color:#333;text-shadow:0 1px #fafafa;background:#e4e4e4;border-color:#244385 #1b346d #12264f;background-image:-webkit-linear-gradient(top, #f5f5f5,#e4e4e4 50%,#d2d2d2 51%,#c2c2c2);background-image:-moz-linear-gradient(top, #f5f5f5,#e4e4e4 50%,#d2d2d2 51%,#c2c2c2);background-image:-o-linear-gradient(top, #f5f5f5,#e4e4e4 50%,#d2d2d2 51%,#c2c2c2);background-image:linear-gradient(to bottom, #f5f5f5,#e4e4e4 50%,#d2d2d2 51%,#c2c2c2);-webkit-box-shadow:inset 0 1px #fff,0 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px #fff,0 1px rgba(0,0,0,0.1)}.header-button.light:active,.header-button.light.active{text-shadow:0 1px #ddd;background:#c2c2c2;-webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 4px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1)}.header-button.left{float:left}.header-button.right{float:right}.header-buttton-group{display:inline-block;vertical-align:top;height:30px;margin:7px}.header-buttton-group>.header-button{float:left;margin:0;padding:0 15px;border-radius:0}.header-buttton-group>.header-button+.header-button{border-left:0}.header-buttton-group>.header-button:first-child{border-radius:3px 0 0 3px}.header-buttton-group>.header-button:last-child{border-radius:0 3px 3px 0}.header-buttton-group.left{float:left}.header-buttton-group.right{float:right}.icon-list{width:18px;padding:0 7px;font:0/0 a;text-shadow:none;color:transparent !important}.icon-list:before{content:'';display:block;height:3px;width:18px;margin:13px 0;background:#dbf5ff;border-radius:1px;-webkit-box-shadow:0 -1px #000,0 -6px #dbf5ff,0 -7px #000,0 6px #dbf5ff,0 5px #000;box-shadow:0 -1px #000,0 -6px #dbf5ff,0 -7px #000,0 6px #dbf5ff,0 5px #000}.icon-up,.icon-down{position:relative;width:30px;padding:0 !important;font:0/0 a;text-shadow:none;color:transparent !important}.icon-up:before,.icon-up:after,.icon-down:before,.icon-down:after{content:'';position:absolute;top:50%;left:50%;margin:-4px 0 0 -6px;height:0;border:solid transparent;border-width:0 6px 6px;border-bottom-color:white}.icon-up:before,.icon-down:before{margin-top:-5px;border-bottom-color:#222}.icon-down:before{margin-top:-4px;border-width:6px 6px 0;border-top-color:#222}.icon-down:after{margin-top:-3px;border-width:6px 6px 0;border-top-color:white}.footer{position:absolute;z-index:2;bottom:0;width:100%;height:48px;background:#3b454e;border-top:1px solid black;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:-webkit-linear-gradient(top, #4c5762,#2a3239);background-image:-moz-linear-gradient(top, #4c5762,#2a3239);background-image:-o-linear-gradient(top, #4c5762,#2a3239);background-image:linear-gradient(to bottom, #4c5762,#2a3239)}.footer-link{position:relative;float:left;width:25%;height:100%;line-height:12px;font-size:12px;font-weight:bold;color:#ccc;text-align:center;text-shadow:0 1px 1px black;border-left:1px solid black;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.15),inset 1px 0 rgba(255,255,255,0.08),inset -1px 0 rgba(255,255,255,0.08);box-shadow:inset 0 1px rgba(255,255,255,0.15),inset 1px 0 rgba(255,255,255,0.08),inset -1px 0 rgba(255,255,255,0.08)}.footer-link:first-child{border-left:0}.footer-link.active{color:#eee;background:#2d343d;background-image:-webkit-linear-gradient(top, #2b323a,#424c57);background-image:-moz-linear-gradient(top, #2b323a,#424c57);background-image:-o-linear-gradient(top, #2b323a,#424c57);background-image:linear-gradient(to bottom, #2b323a,#424c57);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.2);box-shadow:inset 0 1px rgba(255,255,255,0.2)}.footer-counter{position:absolute;top:2px;right:3px;padding:0 2px;height:15px;min-width:11px;line-height:14px;font-size:11px;font-weight:bold;color:white;text-shadow:0 -1px rgba(0,0,0,0.5);background:#db3928;border:1px solid #55150f;border-radius:9px;-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.1)}.icon-home{display:block;margin:8px auto;width:12px;height:12px;border:2px solid #9fb4c6;border-radius:4px;-webkit-box-shadow:0 1px #000;box-shadow:0 1px #000}.active>.icon-home{border-color:#bbd6ee}.icon-more{display:block;margin:12px auto 13px;width:7px;height:7px;background:#9fb4c6;border-radius:4px;-webkit-box-shadow:0 1px #000,10px 0 #9fb4c6,10px 1px #000,-10px 0 #9fb4c6,-10px 1px #000;box-shadow:0 1px #000,10px 0 #9fb4c6,10px 1px #000,-10px 0 #9fb4c6,-10px 1px #000}.active>.icon-more{background:#bbd6ee;-webkit-box-shadow:0 1px #000,10px 0 #bbd6ee,10px 1px #000,-10px 0 #bbd6ee,-10px 1px #000;box-shadow:0 1px #000,10px 0 #bbd6ee,10px 1px #000,-10px 0 #bbd6ee,-10px 1px #000}.icon-square{display:block;margin:10px auto;width:12px;height:12px;background:#9fb4c6;border-radius:1px;-webkit-box-shadow:0 1px #000;box-shadow:0 1px #000}.active>.icon-square{background:#bbd6ee}.icon-circle{display:block;margin:10px auto;width:12px;height:12px;background:#9fb4c6;border-radius:6px;-webkit-box-shadow:0 1px #000;box-shadow:0 1px #000}.active>.icon-circle{background:#bbd6ee}html,body{height:100%;overflow:hidden}.app{position:relative;width:100%;height:100%;overflow:hidden;padding:44px 0 49px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.container{position:relative;z-index:1;height:100%;overflow-y:scroll;overflow-x:hidden;background:#e6ecee;-webkit-overflow-scrolling:touch}.app.with-subheader{padding-top:88px}.subheader{position:absolute;z-index:2;top:44px;width:100%;height:44px;padding:7px 6px;background:#3e4549;border-bottom:1px solid black;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:-webkit-linear-gradient(top, #454d52,#363c40);background-image:-moz-linear-gradient(top, #454d52,#363c40);background-image:-o-linear-gradient(top, #454d52,#363c40);background-image:linear-gradient(to bottom, #454d52,#363c40);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.1),0 0 3px rgba(0,0,0,0.5);box-shadow:inset 0 1px rgba(255,255,255,0.1),0 0 3px rgba(0,0,0,0.5)}.subheader.two>.subheader-button{width:50%}.subheader.three>.subheader-button{width:33.33%}.subheader.four>.subheader-button{width:25%}.subheader-button{float:left;height:29px;line-height:27px;font-size:12px;font-weight:bold;color:white;text-align:center;text-shadow:0 -1px black;background:#495054;border:1px solid;border-color:#101010 #080808 black;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-image:-webkit-linear-gradient(top, #4e5559,#383e43);background-image:-moz-linear-gradient(top, #4e5559,#383e43);background-image:-o-linear-gradient(top, #4e5559,#383e43);background-image:linear-gradient(to bottom, #4e5559,#383e43);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.08),inset 0 0 0 1px rgba(255,255,255,0.05),0 1px rgba(255,255,255,0.08);box-shadow:inset 0 1px rgba(255,255,255,0.08),inset 0 0 0 1px rgba(255,255,255,0.05),0 1px rgba(255,255,255,0.08)}.subheader-button:active,.subheader-button.active{color:#ccc;background:#353a3f;border-color:black;background-image:-webkit-linear-gradient(top, #272b2f,#373d42);background-image:-moz-linear-gradient(top, #272b2f,#373d42);background-image:-o-linear-gradient(top, #272b2f,#373d42);background-image:linear-gradient(to bottom, #272b2f,#373d42);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1),0 1px rgba(255,255,255,0.08);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1),0 1px rgba(255,255,255,0.08)}.subheader-button+.subheader-button{border-left:0}.subheader-button:first-child{border-radius:4px 0 0 4px}.subheader-button:last-child{border-radius:0 4px 4px 0}.subheader-counter{display:inline-block;position:relative;top:-11px;margin-right:-11px;padding:0 2px;height:15px;min-width:11px;line-height:14px;font-size:11px;font-weight:bold;color:white;text-shadow:0 -1px rgba(0,0,0,0.5);background:#db3928;border:1px solid #55150f;border-radius:9px;-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.1)}.menu{position:absolute;z-index:1;top:0;width:100%;height:100%;text-shadow:0 1px black;background:#2c343d;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.menu ~ .app{margin-left:80%}.menu ~ .app>.header{border-radius:4px 0 0 0}.menu ~ .app>.footer,.menu ~ .app .footer-link:first-child{border-radius:0 0 0 4px}.menu:after{content:'';display:block;position:absolute;top:0;bottom:0;right:0;width:20%;border-radius:4px 0 0 4px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.7);box-shadow:0 0 20px rgba(0,0,0,0.7)}.menu-list{display:block;height:100%;padding-bottom:39px;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.menu-link{display:block;height:43px;line-height:42px;padding:0 14px;font-size:15px;font-weight:bold;color:white;border-bottom:1px solid #111;-webkit-box-shadow:0 1px rgba(255,255,255,0.07);box-shadow:0 1px rgba(255,255,255,0.07)}.menu-link:active,.menu-link.active{background:#1c2127;border-color:black;background-image:-webkit-linear-gradient(top, #1a1e24,#1f262c);background-image:-moz-linear-gradient(top, #1a1e24,#1f262c);background-image:-o-linear-gradient(top, #1a1e24,#1f262c);background-image:linear-gradient(to bottom, #1a1e24,#1f262c);-webkit-box-shadow:0 -1px #000,0 1px rgba(255,255,255,0.07);box-shadow:0 -1px #000,0 1px rgba(255,255,255,0.07)}.menu-sep{padding:0 14px;line-height:31px;font-size:13px;font-weight:bold;color:#b5c3ce;text-transform:uppercase;background:#1d242a;border-bottom:1px solid black;background-image:-webkit-linear-gradient(top, #323b45,#1d242a);background-image:-moz-linear-gradient(top, #323b45,#1d242a);background-image:-o-linear-gradient(top, #323b45,#1d242a);background-image:linear-gradient(to bottom, #323b45,#1d242a);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.1),0 1px rgba(0,0,0,0.02);box-shadow:inset 0 1px rgba(255,255,255,0.1),0 1px rgba(0,0,0,0.02)}.menu-bottom{position:absolute;bottom:0;width:100%;height:38px;background:#212732;border-top:1px solid black;background-image:-webkit-linear-gradient(top, #4a586a,#353e4c 50%,#2d3544 51%,#20262e);background-image:-moz-linear-gradient(top, #4a586a,#353e4c 50%,#2d3544 51%,#20262e);background-image:-o-linear-gradient(top, #4a586a,#353e4c 50%,#2d3544 51%,#20262e);background-image:linear-gradient(to bottom, #4a586a,#353e4c 50%,#2d3544 51%,#20262e);-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);box-shadow:0 0 3px rgba(0,0,0,0.2)}.menu-bottom>li{float:left;width:40%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.menu-bottom>li+li{border-left:1px solid black;-webkit-box-shadow:inset 1px 0 rgba(255,255,255,0.08);box-shadow:inset 1px 0 rgba(255,255,255,0.08)}.menu-bottom-link{display:block;height:38px;line-height:36px;font-weight:bold;color:#b4ccee;text-align:center;-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px rgba(255,255,255,0.1)}.heading{padding:0 10px;line-height:25px;font-size:13px;font-weight:bold;color:#555;text-shadow:0 1px white;background:#f8f8f8;border-top:1px solid #c8c8c8;border-bottom:1px solid #bbb;background-image:-webkit-linear-gradient(top, #fcfcfc,#e4e4e4);background-image:-moz-linear-gradient(top, #fcfcfc,#e4e4e4);background-image:-o-linear-gradient(top, #fcfcfc,#e4e4e4);background-image:linear-gradient(to bottom, #fcfcfc,#e4e4e4);-webkit-box-shadow:inset 0 1px #fff,0 1px rgba(0,0,0,0.04);box-shadow:inset 0 1px #fff,0 1px rgba(0,0,0,0.04)}.heading:first-child{border-top:0}.heading.dark{color:#dde8ec;text-shadow:0 1px rgba(0,0,0,0.6);background:#46525f;border-top-color:#3d4957;border-bottom-color:black;background-image:-webkit-linear-gradient(top, #62707f,#394450);background-image:-moz-linear-gradient(top, #62707f,#394450);background-image:-o-linear-gradient(top, #62707f,#394450);background-image:linear-gradient(to bottom, #62707f,#394450);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.15),0 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px rgba(255,255,255,0.15),0 1px rgba(0,0,0,0.05)}.text{padding:10px;text-shadow:0 1px white;background:#f1f5f7;border-top:1px solid rgba(255,255,255,0.6);border-bottom:1px solid #c8d5d9;-webkit-box-shadow:0 1px rgba(255,255,255,0.6);box-shadow:0 1px rgba(255,255,255,0.6)}.text:first-child{border-top:0}.text.alt{background:#e6ecee}.text>h2{margin-bottom:5px;font-size:14px;font-weight:bold;color:#3b3b3b}.text-info{margin:10px;font-size:12px;color:#7b7b7b;text-align:center;text-shadow:0 1px white}.more-link:after{content:'';display:inline-block;vertical-align:middle;width:0;height:0;margin-left:3px;border:solid transparent;border-width:5px 3px 0;border-top-color:#3b3b3b}.list{min-height:100%;background:#f1f5f7;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.list-row{position:relative;overflow:hidden;padding:10px 30px 10px 10px;color:#888;text-shadow:0 1px white}.list-row:after{content:'\203a';position:absolute;right:10px;top:50%;margin-top:-17px;font:bold 32px/1 Avenir, Arial, sans-serif;color:#a7a7a7}.list-row:nth-child(2n){background:#e6ecee}.list-row+.list-row{border-top:1px solid #c0d2db;-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.5);box-shadow:inset 0 1px rgba(255,255,255,0.5)}.list-row:active{color:white;text-shadow:0 -1px rgba(0,0,0,0.3);background:#1472e7;background-image:-webkit-linear-gradient(top, #1a8ef2,#1062e2);background-image:-moz-linear-gradient(top, #1a8ef2,#1062e2);background-image:-o-linear-gradient(top, #1a8ef2,#1062e2);background-image:linear-gradient(to bottom, #1a8ef2,#1062e2);-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.1),inset 0 -1px rgba(0,0,0,0.1);box-shadow:inset 0 1px rgba(0,0,0,0.1),inset 0 -1px rgba(0,0,0,0.1)}.list-row:active>.list-title,.list-row:active:after{color:white}.list-title{display:block;margin-bottom:2px;font-size:14px;font-weight:bold;color:#555}.list-title:only-child{margin-bottom:0}.list-thumb{float:left;width:62px;height:62px;margin-right:12px;background:#2f66b2;background-clip:padding-box;border:1px solid;border-color:#154291 #0c2d6b #0a2558;border-radius:10px;background-image:-webkit-linear-gradient(top, #599fef,#123f89);background-image:-moz-linear-gradient(top, #599fef,#123f89);background-image:-o-linear-gradient(top, #599fef,#123f89);background-image:linear-gradient(to bottom, #599fef,#123f89);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.2),inset 0 0 0 1px rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15);box-shadow:inset 0 1px rgba(255,255,255,0.2),inset 0 0 0 1px rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15)}.boxed-list-title{margin:10px 10px -5px;padding:0 12px;font-size:14px;font-weight:bold;color:#6e6e6e;text-shadow:0 1px white}.boxed-list{margin:10px;background:#fbfbfb;border:1px solid #ccc;border-top-color:#c2c2c2;border-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.5);box-shadow:inset 0 1px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.5)}.boxed-list-row{position:relative;padding:0 12px 1px;line-height:36px;font-size:14px;color:#3b3b3b;text-shadow:0 1px white;border-top:1px solid white;border-bottom:1px solid #d2d2d2}.boxed-list-row:first-child{border-top:0;border-radius:4px 4px 0 0}.boxed-list-row:last-child{border-bottom:0;border-radius:0 0 4px 4px}.boxed-list-row:only-child{border-radius:4px}.boxed-list-row .button{position:absolute;top:5px;right:6px;height:25px;line-height:23px;padding:0 8px;font-size:13px}.boxed-list-row.tappable:active{color:white;text-shadow:0 -1px rgba(0,0,0,0.3);background:#1472e7;border-top-color:#1a8ef2;background-image:-webkit-linear-gradient(top, #1a8ef2,#1062e2);background-image:-moz-linear-gradient(top, #1a8ef2,#1062e2);background-image:-o-linear-gradient(top, #1a8ef2,#1062e2);background-image:linear-gradient(to bottom, #1a8ef2,#1062e2)}.boxed-list-link{display:block;font-weight:bold;color:inherit}.boxed-list-link:after{content:'\203a';position:absolute;right:10px;top:50%;margin-top:-13px;font:bold 23px/1 Avenir, Arial, sans-serif;color:#959595}.tappable:active .boxed-list-link:after{color:white}.boxed-list-desc{float:right;font-weight:normal;color:#4a648b;margin-right:18px}.tappable:active .boxed-list-desc{color:white}.boxed-list.ordered{counter-reset:li}.boxed-list.ordered>.boxed-list-row:before{content:counter(li) ".";counter-increment:li;float:left;margin-right:6px;font-weight:normal;color:#959595}.boxed-list.ordered .tappable:active:before{color:white}.icon-move{display:block;position:absolute;top:0;right:0;bottom:0;width:37px;cursor:move;font:0/0 a;text-shadow:none;color:transparent !important}.icon-move:before{content:'';display:block;margin:17px auto;width:16px;height:2px;background:#d6d6d6;border-radius:1px;-webkit-box-shadow:0 -1px #b4b4b4,0 -5px #d6d6d6,0 -6px #b4b4b4,0 5px #d6d6d6,0 4px #b4b4b4;box-shadow:0 -1px #b4b4b4,0 -5px #d6d6d6,0 -6px #b4b4b4,0 5px #d6d6d6,0 4px #b4b4b4}.letter-list{padding:5px;min-height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.letter-list-row{position:relative;margin:2px 0;padding:3px 40px 3px 10px;line-height:36px;color:#888;text-shadow:0 1px white;border-radius:3px}.letter-list-row+.letter-list-row{margin-top:5px}.letter-list-row+.letter-list-row:before{content:'';position:absolute;top:-3px;left:5px;right:5px;height:0;border-top:1px solid #b8c9cf;border-bottom:1px solid rgba(255,255,255,0.5)}.letter-list-row:active{color:white;text-shadow:0 -1px rgba(0,0,0,0.3);background:#1472e7;background-image:-webkit-linear-gradient(top, #1a8ef2,#1062e2);background-image:-moz-linear-gradient(top, #1a8ef2,#1062e2);background-image:-o-linear-gradient(top, #1a8ef2,#1062e2);background-image:linear-gradient(to bottom, #1a8ef2,#1062e2)}.letter-list-row:active .letter-list-title{color:white}.letter-list-content{display:inline-block;vertical-align:top;line-height:18px}.letter-list-title{vertical-align:top;font-size:14px;font-weight:bold;color:#555}.letter-list-counter{position:absolute;top:3px;right:10px;line-height:36px;font-size:14px}.letter-list-sep{padding:0 8px 1px;line-height:20px;font-size:16px;font-weight:bold;color:white;text-shadow:0 1px 1px rgba(0,0,0,0.3);background:#b6b6b6;border:1px solid #9f9f9f;border-bottom-color:#a2a2a2;border-radius:3px;background-image:-webkit-linear-gradient(top, #afafaf,#ccc);background-image:-moz-linear-gradient(top, #afafaf,#ccc);background-image:-o-linear-gradient(top, #afafaf,#ccc);background-image:linear-gradient(to bottom, #afafaf,#ccc);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.2),0 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px rgba(255,255,255,0.2),0 1px rgba(0,0,0,0.05)}input,textarea,select,button,label{margin:0;line-height:normal;font-family:inherit;font-size:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}fieldset{padding:10px}fieldset>p{position:relative}fieldset>p+p{margin-top:10px}label{display:block;margin-bottom:4px;padding:0 4px;line-height:1.5;font-size:14px;font-weight:bold;color:#555;text-shadow:0 1px rgba(255,255,255,0.4);-webkit-tap-highlight-color:rgba(0,0,0,0)}.hint{display:block;margin:4px 4px 0;color:#7b7b7b;font-size:12px;text-shadow:0 1px white}::-webkit-input-placeholder{color:#aaa}:-ms-input-placeholder{color:#aaa}:-moz-placeholder{color:#aaa !important}::-moz-placeholder{color:#aaa !important;opacity:1}::-moz-focus-inner{padding:0 !important;border:0 !important}.text-label{position:absolute;top:0;left:0;padding-left:10px;width:30%;line-height:36px;overflow:hidden;text-overflow:ellipsis;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.text-label+.text-field,.text-label+.text-area{padding-left:30%}.text-field,.text-area{display:block;width:100%;height:36px;padding:0 10px;font-size:14px;color:#6e6e6e;background:white;border:1px solid #ccc;border-top-color:#c2c2c2;border-radius:4px;-webkit-appearance:none;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.3);box-shadow:inset 0 1px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.3)}.text-field:focus,.text-area:focus{color:#555;border-color:#539fee;outline:none;-webkit-box-shadow:0 0 0 1px #539fee;box-shadow:0 0 0 1px #539fee}.text-area{padding:3px 7px;height:71px;line-height:1.5;resize:none}.select-container:before{content:'';position:absolute;top:1px;bottom:1px;right:1px;width:36px;background:white;border-radius:0 4px 4px 0;pointer-events:none;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px rgba(0,0,0,0.05)}.select-container:after{content:'';position:absolute;top:50%;right:14px;margin-top:-4px;width:1px;height:0;border:solid transparent;border-width:8px 5px 0;border-top-color:#ccc;pointer-events:none}.select{display:block;width:100%;height:36px;padding:8px 10px;font-size:14px;color:#6e6e6e;background:white;border:1px solid #ccc;border-top-color:#c2c2c2;border-radius:4px;-webkit-appearance:none;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.3);box-shadow:inset 0 1px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.3)}.select::-ms-expand{display:none}.select:focus{color:#555;border-color:#539fee;outline:none;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.05),0 0 0 1px #539fee;box-shadow:inset 0 1px rgba(0,0,0,0.05),0 0 0 1px #539fee}.button{display:inline-block;vertical-align:top;height:29px;line-height:27px;padding:0 9px;font-size:14px;font-weight:bold;color:#555;text-align:center;text-shadow:0 1px white;background:#e5e5e5;background-clip:padding-box;border:1px solid;border-color:#bdbdbd #b8b8b8 #999;border-radius:3px;-webkit-appearance:none;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:-webkit-linear-gradient(top, #f4f4f4,#ececec 50%,#e5e5e5 51%,#c6c6c6);background-image:-moz-linear-gradient(top, #f4f4f4,#ececec 50%,#e5e5e5 51%,#c6c6c6);background-image:-o-linear-gradient(top, #f4f4f4,#ececec 50%,#e5e5e5 51%,#c6c6c6);background-image:linear-gradient(to bottom, #f4f4f4,#ececec 50%,#e5e5e5 51%,#c6c6c6);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.1)}.button:active{background:#c6c6c6;border-color:#959595 #aaa #bdbdbd;background-image:-webkit-linear-gradient(top, #c6c6c6,#f4f4f4);background-image:-moz-linear-gradient(top, #c6c6c6,#f4f4f4);background-image:-o-linear-gradient(top, #c6c6c6,#f4f4f4);background-image:linear-gradient(to bottom, #c6c6c6,#f4f4f4);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2),0 1px #fff;box-shadow:inset 0 1px 2px rgba(0,0,0,0.2),0 1px #fff}.button.block{display:block;height:39px;line-height:37px;font-size:15px;text-transform:none;border-radius:5px}.button.blue,.button.green,.button.red{color:white;text-shadow:0 -1px rgba(0,0,0,0.6);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 1px rgba(0,0,0,0.15);box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 1px rgba(0,0,0,0.15)}.button.blue:active,.button.green:active,.button.red:active{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2),0 1px #fff;box-shadow:inset 0 1px 2px rgba(0,0,0,0.2),0 1px #fff}.button.blue{background:#2874e0;border-color:#1c62c1 #144f9f #052f6a;background-image:-webkit-linear-gradient(top, #5aa8f9,#2d7df2 50%,#2874e0 51%,#175cc2);background-image:-moz-linear-gradient(top, #5aa8f9,#2d7df2 50%,#2874e0 51%,#175cc2);background-image:-o-linear-gradient(top, #5aa8f9,#2d7df2 50%,#2874e0 51%,#175cc2);background-image:linear-gradient(to bottom, #5aa8f9,#2d7df2 50%,#2874e0 51%,#175cc2)}.button.blue:active{background:#175cc2;border-color:#042d66 #05316f #013783;background-image:-webkit-linear-gradient(top, #175cc2,#2d7df2);background-image:-moz-linear-gradient(top, #175cc2,#2d7df2);background-image:-o-linear-gradient(top, #175cc2,#2d7df2);background-image:linear-gradient(to bottom, #175cc2,#2d7df2)}.button.green{background:#31a538;border-color:#1e8821 #1b7f20 #115a17;background-image:-webkit-linear-gradient(top, #65d46a,#45b24c 50%,#31a538 51%,#128f17);background-image:-moz-linear-gradient(top, #65d46a,#45b24c 50%,#31a538 51%,#128f17);background-image:-o-linear-gradient(top, #65d46a,#45b24c 50%,#31a538 51%,#128f17);background-image:linear-gradient(to bottom, #65d46a,#45b24c 50%,#31a538 51%,#128f17)}.button.green:active{background:#128f17;border-color:#0f5416 #12621a #14731f;background-image:-webkit-linear-gradient(top, #128f17,#45b24c);background-image:-moz-linear-gradient(top, #128f17,#45b24c);background-image:-o-linear-gradient(top, #128f17,#45b24c);background-image:linear-gradient(to bottom, #128f17,#45b24c)}.button.red{background:#d42b22;border-color:#a6241c #911c19 #6b1612;background-image:-webkit-linear-gradient(top, #f64038,#d44035 50%,#c9291f 51%,#ba2115);background-image:-moz-linear-gradient(top, #f64038,#d44035 50%,#c9291f 51%,#ba2115);background-image:-o-linear-gradient(top, #f64038,#d44035 50%,#c9291f 51%,#ba2115);background-image:linear-gradient(to bottom, #f64038,#d44035 50%,#c9291f 51%,#ba2115)}.button.red:active{background:#ba2115;border-color:#601412 #711713 #871a17;background-image:-webkit-linear-gradient(top, #ba2115,#d44035);background-image:-moz-linear-gradient(top, #ba2115,#d44035);background-image:-o-linear-gradient(top, #ba2115,#d44035);background-image:linear-gradient(to bottom, #ba2115,#d44035)}.options{padding:0}.options-label{position:relative;margin:0;padding:0 12px 1px 37px;line-height:36px;font-size:14px}.options-input{position:absolute;z-index:1;top:0;left:0;width:37px;height:37px;opacity:0}.options-desc{color:#3b3b3b}.options-input:checked+.options-desc{color:#4a648b}.options-input:checked+.options-desc:before{content:'';position:absolute;top:13px;left:12px;width:13px;height:5px;border:solid #4a648b;border-width:0 0 2px 2px;pointer-events:none;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.options.radio .options-label{padding:0 37px 1px 12px}.options.radio .options-input{left:auto;right:0}.options.radio .options-input:checked+.options-desc:before{left:auto;right:12px}.switch{display:inline-block;vertical-align:top;position:relative;width:60px;height:22px;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch-handle{display:block;position:relative;overflow:hidden;width:60px;height:22px;line-height:20px;font-size:11px;font-weight:bold;color:#aaa;text-align:center;text-transform:uppercase;text-shadow:0 1px white;background:#fcfcfc;background-clip:padding-box;border:1px solid #ccc;border-top-color:#c2c2c2;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1),inset 0 11px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.5);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1),inset 0 11px rgba(0,0,0,0.05),0 1px rgba(255,255,255,0.5);-webkit-transition:padding 0.2s ease-out;-moz-transition:padding 0.2s ease-out;-o-transition:padding 0.2s ease-out;transition:padding 0.2s ease-out}.switch-handle:before{content:'';display:block;width:24px;height:20px;background:#f2f2f2;border-radius:2px;background-image:-webkit-linear-gradient(top, #fcfcfc,#e4e4e4);background-image:-moz-linear-gradient(top, #fcfcfc,#e4e4e4);background-image:-o-linear-gradient(top, #fcfcfc,#e4e4e4);background-image:linear-gradient(to bottom, #fcfcfc,#e4e4e4);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3),0 0 0 1px #ccc,2px 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3),0 0 0 1px #ccc,2px 1px 2px rgba(0,0,0,0.1)}.switch-handle:after{content:attr(data-off);position:absolute;top:0;right:0;width:33px}.switch-input:checked+.switch-handle{padding-left:34px;color:white;text-shadow:0 -1px rgba(0,0,0,0.3);background:#4A99F6;border-color:#1c62bc #226fdb #2a80f1;background-image:-webkit-linear-gradient(top, #2d7df2,#5eacf9);background-image:-moz-linear-gradient(top, #2d7df2,#5eacf9);background-image:-o-linear-gradient(top, #2d7df2,#5eacf9);background-image:linear-gradient(to bottom, #2d7df2,#5eacf9)}.switch-input:checked+.switch-handle:before{-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3),0 0 0 1px #226fdb,-2px 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3),0 0 0 1px #226fdb,-2px 1px 2px rgba(0,0,0,0.1)}.switch-input:checked+.switch-handle:after{content:attr(data-on);left:0;right:auto}.switch-handle[data-on="I"]{font-size:12px}.switch-input{position:absolute;z-index:2;width:60px;height:22px;opacity:0}.round>.switch-handle{border-radius:11px}.round>.switch-handle:before{width:20px;border-radius:10px}.round>.switch-handle:after{width:38px}.round>.switch-input:checked+.switch-handle{padding-left:38px}.switch-list{padding:0}.switch-list>.switch{display:block;margin:0;width:auto;height:auto;line-height:36px;padding:0 7px 1px 12px;font-size:14px;font-weight:bold}.switch-list>.switch>.switch-handle{float:right;margin-top:7px}.pills{height:21px;line-height:21px;padding:11px 0 13px;text-align:center;background:#f1f5f7;border-bottom:1px solid #b8c9cf;-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.6),0 1px rgba(255,255,255,0.6);box-shadow:inset 0 1px rgba(255,255,255,0.6),0 1px rgba(255,255,255,0.6)}.pill{position:relative;display:inline-block;vertical-align:top;margin:0 5px}.pill>a{display:block;padding:0 12px;color:#626262;text-shadow:0 1px white;border:1px solid transparent;border-radius:11px}.pill:before,.pill:after,.pill>a:after{display:none;content:'';position:absolute;left:50%;margin-left:-7px;width:0;height:0;border:solid transparent;border-width:0 7px 7px}.pill:before{bottom:-11px;border-bottom-color:#afc2c9}.pill>a:after{bottom:-12px;border-bottom-color:#d7e0e4}.pill:after{bottom:-13px;border-bottom-color:#e6ecee}.pill.active:before,.pill.active:after,.pill.active>a:after{display:block}.pill.active>a{color:#484848;text-shadow:0 1px rgba(255,255,255,0.6);background:#dde5e8;border-color:#9ab2ba #a9bec5 #b8c9cf;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.15),0 1px #fff;box-shadow:inset 0 1px 1px rgba(0,0,0,0.15),0 1px #fff}.pills-content{padding:10px;background:#e6ecee;border-bottom:1px solid #c8d5d9;-webkit-box-shadow:inset 0 1px #dde5e8,0 1px rgba(255,255,255,0.6);box-shadow:inset 0 1px #dde5e8,0 1px rgba(255,255,255,0.6)}.tag{display:inline-block;vertical-align:top;margin:0 3px;padding:0 9px;line-height:21px;font-weight:200;color:#596581;text-shadow:0 1px rgba(255,255,255,0.4);background:#ccd8ee;border:1px solid;border-color:#a5bade #9fb4d9 #94a9cf;border-radius:12px;background-image:-webkit-linear-gradient(top, #dde7f5,#c1cfea);background-image:-moz-linear-gradient(top, #dde7f5,#c1cfea);background-image:-o-linear-gradient(top, #dde7f5,#c1cfea);background-image:linear-gradient(to bottom, #dde7f5,#c1cfea);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.1),0 1px rgba(0,0,0,0.03);box-shadow:inset 0 1px rgba(255,255,255,0.1),0 1px rgba(0,0,0,0.03)}a.tag{position:relative;padding-right:21px}a.tag:after{content:'\203a';position:absolute;top:-4px;right:6px;font:bold 26px/1 Avenir, Arial, sans-serif;color:#698ed0} | |
| /* tes*/ | |
| /* For demo purposes only */ | |
| .demo { width: 100%; height: 100%; } | |
| .demo .text:nth-child(2) { text-align: center; } | |
| .demo .text:nth-child(2) .button { margin: 0 6px; } | |
| .demo .pills-content { text-align: center; } | |
| @media (min-device-width: 1024px) { | |
| ::-webkit-scrollbar { display: none; } | |
| body::-webkit-scrollbar { display: inherit; width: 12px; } | |
| body::-webkit-scrollbar-track { background: transparent; border: 0; } | |
| body::-webkit-scrollbar-thumb { background: #888; border: 3px solid #333; border-radius: 6px; } | |
| body { background: #333; } | |
| .demo { position: absolute; top: 50%; left: 50%; width: 320px; height: 480px; margin: -240px 0 0 -160px; overflow: hidden; border-radius: 2px; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } | |
| body:before, body:after { display: block; position: absolute; left: 0; right: 0; line-height: 50px; font-weight: bold; text-align: center; text-shadow: 0 1px 2px black; } | |
| body:before { content: 'Demo Mode'; top: 50%; margin-top: -290px; font-size: 16px; color: #eee; } | |
| body:after { content: 'Best viewed in iOS or Android 4.'; bottom: 50%; margin-bottom: -290px; font-size: 14px; color: #ccc; } | |
| } | |
| @media (min-device-width: 1024px) and (max-height: 580px) { | |
| body { overflow-y: scroll; } | |
| .demo, body:before, body:after { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 0 auto; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment