Skip to content

Instantly share code, notes, and snippets.

@ptb

ptb/UIActionSheet.html

Created February 18, 2011 21:34
Show Gist options
  • Save ptb/834453 to your computer and use it in GitHub Desktop.
Save ptb/834453 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
UIActionSheet.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>UIActionSheet</title>
<meta name='viewport' content='initial-scale=1, minimum-scale=1, maximum-scale=1;'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<style>
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
.actionsheet {
background-color: rgba(0, 0, 0, 0.8);
padding: 8pt 16pt;
list-style-type: none;
}
.actionsheet li {
margin: 6pt auto;
border: 2.5pt solid #222;
-webkit-border-radius: 9pt;
-webkit-box-shadow: 0 1pt 1pt rgba(255, 255, 255, 0.3);
}
.actionsheet li a {
background-color: #c6c6c6;
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 15pt;
font-weight: bold;
padding: 5.5pt;
-webkit-border-radius: 7pt;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #e7e7e7), color-stop(0.5, #c7c7c7), color-stop(0.5, #b3b3b3), color-stop(1, #b4b4b4));
-webkit-box-shadow: inset 0.5pt 0.5pt 1pt rgba(255, 255, 255, 0.3), inset -0.5pt -0.5pt 1pt rgba(255, 255, 255, 0.3);
text-shadow: rgba(255, 255, 255, 0.3) 0 1pt 0;
}
.actionsheet li:last-child {
margin-top: 17pt;
}
.actionsheet li:last-child a {
background-color: #000;
color: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6d6d6d), color-stop(0.5, #232323), color-stop(0.5, #0a0a0a), color-stop(1, #1b1b1b));
text-shadow: rgba(0, 0, 0, 0.3) 0 -1pt 0;
}
</style>
</head>
<body>
<ul class='actionsheet'>
<li><a href='#'>Email Photo</a></li>
<li><a href='#'>MMS</a></li>
<li><a href='#'>Send to MobileMe</a></li>
<li><a href='#'>Assign to Contact</a></li>
<li><a href='#'>Use as Wallpaper</a></li>
<li><a href='#'>Print</a></li>
<li><a href='#'>Cancel</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment