Permalink
Browse files

New snippet: iOS-style popover.

  • Loading branch information...
1 parent 3e124dd commit 6f9411a76421bf87b4752553cd6a04ffb0c24d92 @Thibaut Thibaut committed Feb 24, 2012
@@ -0,0 +1,20 @@
+Copyright (c) 2012 Thibaut Courouble
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,37 @@
+# iOS Style Popover — HML5 & CSS3 Snippet
+
+**Demo**: [demo.webinterfacelab.com/11-ios-style-popover](http://demo.webinterfacelab.com/11-ios-style-popover/)
+
+![Preview](http://www.webinterfacelab.com/assets/snippets/ios-style-popover/preview.png)
+
+This snippet is implemented with [Sass](https://github.com/nex3/sass), with help from [Bourbon](https://github.com/thoughtbot/bourbon).
+
+To compile:
+
+`sass --update scss:css -r ../bourbon/lib/bourbon.rb`
+
+To compile and watch:
+
+`sass --watch scss:css -r ../bourbon/lib/bourbon.rb`
+
+## Browser Compatibility
+
+* Firefox 4-10
+* Safari 4-5
+* Chrome 13-17
+* Opera 10-11
+* Internet Explorer 8-9
+
+## Credits
+
+Coded by [Thibaut Courouble](http://github.com/Thibaut).
+
+PSD Source by [Morgan Knutson](http://365psd.com/day/2-202/).
+
+For more snippets visit [WebInterfaceLab.com](http://www.webinterfacelab.com) or follow [@WebInterfaceLab](http://twitter.com/WebInterfaceLab).
+
+## License
+
+Copyright (c) 2012 Thibaut Courouble — [thibaut.me](http://thibaut.me)
+
+Licensed under the MIT License.
@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) 2012 Thibaut Courouble
+ * Licensed under the MIT License
+ */
+body {
+ background: #0ca3d2;
+ color: #404040;
+ font-family: 'Lucida Grande', Verdana, sans-serif;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 20px; }
+
+a {
+ color: #1e7ad3;
+ text-decoration: none; }
+ a:hover {
+ text-decoration: underline; }
+
+.container, .main {
+ width: 640px;
+ margin-left: auto;
+ margin-right: auto; }
+
+.main {
+ margin-top: 50px; }
+ .main .popover {
+ margin: 0 auto; }
+
+.popover {
+ position: relative;
+ z-index: 10;
+ width: 200px;
+ padding: 5px;
+ border: 1px solid #000;
+ border-radius: 11px;
+ background-color: #606060;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606060), color-stop(100%, #4a4a4a));
+ background-image: -webkit-linear-gradient(top, #606060, #4a4a4a);
+ background-image: -moz-linear-gradient(top, #606060, #4a4a4a);
+ background-image: -ms-linear-gradient(top, #606060, #4a4a4a);
+ background-image: -o-linear-gradient(top, #606060, #4a4a4a);
+ background-image: linear-gradient(top, #606060, #4a4a4a);
+ -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5); }
+ .popover:before, .popover:after, .popover ul:before {
+ display: block;
+ content: '';
+ width: 0;
+ height: 0;
+ position: absolute;
+ z-index: 11;
+ left: 22px;
+ border: 7px outset transparent; }
+ .popover:before {
+ border-bottom: 7px solid #000;
+ top: -14px; }
+ .popover:after {
+ border-bottom: 7px solid #888;
+ top: -13px; }
+ .popover ul:before {
+ z-index: 12;
+ border-bottom: 8px solid #666;
+ top: -12px; }
+ .popover ul {
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ background: #fff;
+ border: 1px solid #000;
+ border-radius: 7px;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1); }
+ .popover li {
+ display: block; }
+ .popover li + li {
+ border-top: 1px solid #eee; }
+ .popover li:first-child a {
+ border-radius: 7px 7px 0 0; }
+ .popover li:last-child a {
+ border-radius: 0 0 7px 7px; }
+ .popover a {
+ position: relative;
+ display: block;
+ line-height: 44px;
+ padding: 0 15px 0 48px;
+ color: #000;
+ font-size: 16px;
+ font-weight: bold; }
+ .popover a:hover {
+ text-decoration: none;
+ background: #fff;
+ -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); }
+ .popover a:before, .popover a:after {
+ position: absolute;
+ display: block;
+ content: ''; }
+ .popover a:before, .popover .active a:active:before {
+ height: 20px;
+ width: 20px;
+ top: 12px;
+ left: 14px;
+ border: 0;
+ border-radius: 11px;
+ background: #f7f7f7;
+ -webkit-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1); }
+ .popover a:after, .popover .active a:active:after {
+ display: none;
+ width: 11px;
+ height: 9px;
+ top: 18px;
+ left: 19px;
+ background: url("../img/tick.png") center center no-repeat; }
+ .popover .active a:before, .popover a:active:before {
+ top: 11px;
+ left: 13px;
+ border: 1px solid #111;
+ background-color: #555555;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #404040));
+ background-image: -webkit-linear-gradient(top, #777777, #404040);
+ background-image: -moz-linear-gradient(top, #777777, #404040);
+ background-image: -ms-linear-gradient(top, #777777, #404040);
+ background-image: -o-linear-gradient(top, #777777, #404040);
+ background-image: linear-gradient(top, #777777, #404040);
+ -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); }
+ .popover .active a:after, .popover a:active:after {
+ display: block; }
+
+.about {
+ margin: 50px 0;
+ text-align: center;
+ color: #fff;
+ text-shadow: 0 1px #2a85a1; }
+ .about a {
+ color: #cce7fa; }
+ .about a:hover {
+ text-decoration: none;
+ border-bottom: 1px solid #cce7fa; }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>iOS Style Popover</title>
+
+ <link rel="stylesheet" href="../css/reset.css">
+ <link rel="stylesheet" href="../css/normalize.css">
+ <link rel="stylesheet" href="css/style.css">
+
+ <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+</head>
+
+<body>
+ <section class="main">
+ <div class="popover">
+ <ul>
+ <li class="active"><a href="index.html">Bookmarks</a></li>
+ <li class="active"><a href="index.html">Passwords</a></li>
+ <li><a href="index.html">Preferences</a></li>
+ <li><a href="index.html">History</a></li>
+ </ul>
+ </div>
+ </section>
+
+ <section class="about">
+ <p>
+ <a href="http://www.webinterfacelab.com/snippets/ios-style-popover">View Snippet</a> &ndash;
+ <a href="http://www.webinterfacelab.com/snippets/ios-style-popover.zip">Download Snippet</a> &ndash;
+ <a href="https://github.com/WebInterfaceLab/Snippets/tree/master/11-ios-style-popover/">View on Github</a>
+ </p>
+ </section>
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 6f9411a

Please sign in to comment.