playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

popovers

pull/253/head
connors 11 years ago
parent
b5e695a3ea
commit
91bcafcd3a
11 changed files with 90 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      dist/android-theme.css
  2. 1
      dist/ios-theme.css
  3. 20
      dist/ratchet.css
  4. 2
      dist/ratchet.js
  5. 13
      docs-assets/css/docs.css
  6. 24
      examples/app-android-notes/index.html
  7. 2
      lib/js/popovers.js
  8. 25
      lib/sass/bars.scss
  9. 5
      lib/sass/popovers.scss
  10. 14
      lib/sass/theme-android.scss
  11. 1
      lib/sass/theme-ios.scss

12
dist/android-theme.css vendored
Unescape View File

@ -189,10 +189,6 @@ a:active {
line-height: 49px; line-height: 49px;
text-align: left; text-align: left;
} }
.title .icon-caret {
top: 5px;
margin-top: 0;
}
.bar .btn { .bar .btn {
padding-top: 9px; padding-top: 9px;
@ -227,9 +223,13 @@ a:active {
top: 7px; top: 7px;
} }
.bar .icon { .bar > .icon {
top: 13px; top: 13px;
} }
.bar .title .icon-caret {
top: 10px;
color: #777;
}
.bar input[type="search"] { .bar input[type="search"] {
height: 35px; height: 35px;
@ -465,7 +465,7 @@ textarea,
background-color: #d7d7d7; background-color: #d7d7d7;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
right: 2px; margin-right: 2px;
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);

1
dist/ios-theme.css vendored
Unescape View File

@ -370,6 +370,7 @@ textarea,
.popover .table-view { .popover .table-view {
border-radius: 12px; border-radius: 12px;
background-image: none;
} }
.modal { .modal {

20
dist/ratchet.css vendored
Unescape View File

@ -509,11 +509,6 @@ input[type="button"] {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
} }
.title .icon-caret {
top: 3px;
margin-top: 0;
margin-left: -5px;
}
> a:not(.btn) { > a:not(.btn) {
display: block; display: block;
@ -619,7 +614,6 @@ input[type="button"] {
.bar .icon { .bar .icon {
position: relative; position: relative;
top: 10px;
z-index: 20; z-index: 20;
font-size: 24px; font-size: 24px;
} }
@ -629,6 +623,13 @@ input[type="button"] {
.bar .icon.pull-right { .bar .icon.pull-right {
margin-right: -3px; margin-right: -3px;
} }
.bar > .icon {
top: 10px;
}
.bar .title .icon-caret {
top: 4px;
margin-left: -5px;
}
.badge { .badge {
display: inline-block; display: inline-block;
@ -996,6 +997,9 @@ select {
-webkit-transform: translate3d(0, -15px, 0); -webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
} }
.popover:before { .popover:before {
position: absolute; position: absolute;
@ -1026,7 +1030,7 @@ select {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.3);
} }
.popover .btn-block { .popover .btn-block {
@ -1051,6 +1055,8 @@ select {
margin-left: 0; margin-left: 0;
overflow: auto; overflow: auto;
background-color: #fff; background-color: #fff;
border-top: 0;
border-bottom: 0;
border-radius: 6px; border-radius: 6px;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

2
dist/ratchet.js vendored
Unescape View File

@ -53,7 +53,6 @@
}; };
var onPopoverHidden = function () { var onPopoverHidden = function () {
popover.parentNode.removeChild(backdrop);
popover.style.display = 'none'; popover.style.display = 'none';
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
} }
@ -66,6 +65,7 @@
element.addEventListener('touchend', function () { element.addEventListener('touchend', function () {
popover.addEventListener('webkitTransitionEnd', onPopoverHidden); popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
popover.classList.remove('visible'); popover.classList.remove('visible');
popover.parentNode.removeChild(backdrop);
}); });
return element; return element;

13
docs-assets/css/docs.css
Unescape View File

@ -1118,6 +1118,7 @@ hr {
} }
.platform-ios .popover .table-view { .platform-ios .popover .table-view {
border-radius: 12px; border-radius: 12px;
background-image: none;
} }
.platform-ios .modal { .platform-ios .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
@ -1366,10 +1367,6 @@ hr {
line-height: 49px; line-height: 49px;
text-align: left; text-align: left;
} }
.platform-android .title .icon-caret {
top: 5px;
margin-top: 0;
}
.platform-android .bar .btn { .platform-android .bar .btn {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
@ -1400,9 +1397,13 @@ hr {
.platform-android .bar .segmented-control { .platform-android .bar .segmented-control {
top: 7px; top: 7px;
} }
.platform-android .bar .icon { .platform-android .bar > .icon {
top: 13px; top: 13px;
} }
.platform-android .bar .title .icon-caret {
top: 10px;
color: #777;
}
.platform-android .bar input[type="search"] { .platform-android .bar input[type="search"] {
height: 35px; height: 35px;
} }
@ -1615,7 +1616,7 @@ hr {
background-color: #d7d7d7; background-color: #d7d7d7;
} }
.platform-android .toggle.active .toggle-handle { .platform-android .toggle.active .toggle-handle {
right: 2px; margin-right: 2px;
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);

24
examples/app-android-notes/index.html
Unescape View File

@ -8,7 +8,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/ratchet.css"> <link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/android-theme.css"> <link rel="stylesheet" href="../../dist/ios-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>
@ -18,10 +18,14 @@
</head> </head>
<body> <body>
<header class="bar bar-nav"> <header class="bar bar-nav">
<a class="icon icon-compose pull-right" href="#composeModal" ></a> <a class="icon icon-compose pull-right" href="#composeModal"></a>
<a href="#navPopover">
<h1 class="title"> <h1 class="title">
<span class="icon icon-home"></span>
Notes Notes
<span class="icon icon-caret"></span>
</h1> </h1>
</a>
</header> </header>
<div class="content"> <div class="content">
@ -148,5 +152,21 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Popover -->
<div id="navPopover" class="popover">
<ul class="table-view">
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell">Item4</li>
<li class="table-view-cell">Item5</li>
<li class="table-view-cell">Item6</li>
<li class="table-view-cell">Item7</li>
<li class="table-view-cell">Item8</li>
<li class="table-view-cell">Item9</li>
<li class="table-view-cell">Item10</li>
</ul>
</div>
</body> </body>
</html> </html>

2
lib/js/popovers.js
Unescape View File

@ -16,7 +16,6 @@
}; };
var onPopoverHidden = function () { var onPopoverHidden = function () {
popover.parentNode.removeChild(backdrop);
popover.style.display = 'none'; popover.style.display = 'none';
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
} }
@ -29,6 +28,7 @@
element.addEventListener('touchend', function () { element.addEventListener('touchend', function () {
popover.addEventListener('webkitTransitionEnd', onPopoverHidden); popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
popover.classList.remove('visible'); popover.classList.remove('visible');
popover.parentNode.removeChild(backdrop);
}); });
return element; return element;

25
lib/sass/bars.scss
Unescape View File

@ -60,12 +60,6 @@
color: #000; color: #000;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
.icon-caret {
top: 3px;
margin-top: 0;
margin-left: -5px;
}
} }
> a:not(.btn) { > a:not(.btn) {
@ -193,7 +187,7 @@
} }
// Search forms in standard bar // Bars for search forms
// -------------------------------------------------- // --------------------------------------------------
// Position/size search bar within the bar // Position/size search bar within the bar
@ -203,7 +197,7 @@
} }
// Segmented controller in all bars // Bars with segmented controls
// -------------------------------------------------- // --------------------------------------------------
// Remove standard segmented bottom margin // Remove standard segmented bottom margin
@ -213,12 +207,12 @@
} }
// Nav bars with Ratchicons // Bars with Ratchicons
// -------------------------------------------------- // --------------------------------------------------
.bar .icon { .bar {
.icon {
position: relative; position: relative;
top: 10px;
z-index: 20; // Position the buttons on top of .title z-index: 20; // Position the buttons on top of .title
font-size: 24px; font-size: 24px;
@ -228,4 +222,13 @@
&.pull-right { &.pull-right {
margin-right: -3px; margin-right: -3px;
} }
}
> .icon {
top: 10px;
}
// Handle carets in the titles
.title .icon-caret {
top: 4px;
margin-left: -5px;
}
} }

5
lib/sass/popovers.scss
Unescape View File

@ -15,6 +15,7 @@
opacity: 0; opacity: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, .1); box-shadow: 0 0 15px rgba(0, 0, 0, .1);
@include transform(translate3d(0, -15px, 0)); @include transform(translate3d(0, -15px, 0));
@include transition(all .25s linear);
// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
&:before { &:before {
@ -53,7 +54,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
background-color: rgba(0,0,0,.15); background-color: rgba(0,0,0,.3);
} }
// Block level buttons in popovers // Block level buttons in popovers
@ -90,6 +91,8 @@
margin-left: 0; margin-left: 0;
overflow: auto; overflow: auto;
background-color: #fff; background-color: #fff;
border-top: 0;
border-bottom: 0;
border-radius: $border-radius; border-radius: $border-radius;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

14
lib/sass/theme-android.scss
Unescape View File

@ -277,11 +277,6 @@ a {
font-size: $font-size-default; font-size: $font-size-default;
line-height: 49px; line-height: 49px;
text-align: left; text-align: left;
.icon-caret {
top: 5px;
margin-top: 0;
}
} }
// Bars with buttons // Bars with buttons
@ -331,8 +326,15 @@ a {
} }
// Bars with Ratchicons // Bars with Ratchicons
.bar .icon { .bar {
> .icon {
top: 13px; top: 13px;
}
// Handle carets in the titles
.title .icon-caret {
top: 10px;
color: #777;
}
} }
// Standard bars with search forms // Standard bars with search forms

1
lib/sass/theme-ios.scss
Unescape View File

@ -490,6 +490,7 @@ textarea,
// Popovers with `table-views1 // Popovers with `table-views1
.popover .table-view { .popover .table-view {
border-radius: 12px; border-radius: 12px;
background-image: none;
} }

Write Preview
Loading…
Cancel
Save