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

Gutting the popovers.

pull/214/head
connors 11 years ago
parent
5124908232
commit
68314d9f3f
3 changed files with 42 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      dist/ratchet.css
  2. 4
      dist/ratchet.js
  3. 54
      lib/sass/popovers.scss

58
dist/ratchet.css vendored
Unescape View File

@ -739,41 +739,26 @@ button.button-block {
width: 280px;
padding: 5px;
margin-left: -146px;
background-color: #555;
background-image: -webkit-linear-gradient(top, #555555 5%, #555555 6%, #111111 30%);
background-image: linear-gradient(to bottom, #555555 5%, #555555 6%, #111111 30%);
border: 1px solid #111;
background-color: rgba(247, 247, 247, 0.98);
border-radius: 6px;
opacity: 0;
box-shadow: inset 0 1px 1px -1px white, 0 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.popover:before,
.popover:after {
position: absolute;
top: -19px;
left: 50%;
width: 0;
height: 0;
content: '';
}
.popover:before {
top: -20px;
margin-left: -21px;
border-right: 21px solid transparent;
border-bottom: 21px solid #111;
border-left: 21px solid transparent;
}
.popover:after {
top: -19px;
margin-left: -20px;
content: '';
border-right: 20px solid transparent;
border-bottom: 20px solid #555;
border-bottom: 20px solid rgba(247, 247, 247, 0.98);
border-left: 20px solid transparent;
}
@ -788,26 +773,23 @@ button.button-block {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin: 15px 0;
font-size: 16px;
font-weight: bold;
line-height: 12px;
color: #fff;
font-weight: 500;
line-height: 45px;
color: #000;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
.popover-header [class*="button"] {
z-index: 25;
font-size: 12px;
line-height: 22px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
background-color: #454545;
background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
border: 1px solid #111;
font-size: 16px;
font-weight: 400;
line-height: 29px;
color: #007aff;
border: 0;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
@ -821,8 +803,9 @@ button.button-block {
}
.popover-header .button:active {
color: #fff;
background-color: #0876b1;
color: #007aff;
background-color: transparent;
opacity: .3;
}
.popover.visible {
@ -842,7 +825,6 @@ button.button-block {
.popover .button-block {
margin-bottom: 5px;
border: 1px solid #111;
}
.popover .button-block:last-child {
@ -857,7 +839,7 @@ button.button-block {
margin-left: 0;
overflow: auto;
background-color: #fff;
border: 1px solid #000;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
-webkit-overflow-scrolling: touch;
}
@ -965,9 +947,11 @@ button.button-block {
-webkit-animation-name: fadeOverlay;
animation-name: fadeOverlay;
-webkit-animation-duration: .4s;
animation-duration: .4s;
}
.content.slide.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.content.slide.left {
z-index: 1;

4
dist/ratchet.js vendored
Unescape View File

@ -321,7 +321,7 @@
if (/slide/.test(transition)) {
swap.classList.add('sliding-in', enter ? 'right' : 'left');
swap.classList.add('slide', enter ? 'top' : 'bottom');
swap.classList.add('slide');
container.classList.add('slide');
}
@ -359,7 +359,7 @@
function slideEnd() {
swap.removeEventListener('webkitTransitionEnd', slideEnd);
swap.classList.remove('slide', 'bottom', 'top', 'sliding-in');
swap.classList.remove('slide', 'sliding-in');
swap.classList.remove(swapDirection);
container.parentNode.removeChild(container);
complete && complete();

54
lib/sass/popovers.scss
Unescape View File

@ -11,13 +11,10 @@
width: 280px;
padding: 5px;
margin-left: -146px;
background-color: #555;
background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%);
background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%);
border: 1px solid #111;
background-color: $chrome-color;
border-radius: 6px;
opacity: 0;
box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3);
box-shadow: 0 0 15px rgba(0, 0, 0, .05);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
@ -25,26 +22,16 @@
}
// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
.popover:before,
.popover:after {
position: absolute;
top: -19px;
left: 50%;
width: 0;
height: 0;
content: '';
}
.popover:before {
top: -20px;
margin-left: -21px;
border-right: 21px solid transparent;
border-bottom: 21px solid #111;
border-left: 21px solid transparent;
}
.popover:after {
top: -19px;
margin-left: -20px;
content: '';
border-right: 20px solid transparent;
border-bottom: 20px solid #555;
border-bottom: 20px solid $chrome-color;
border-left: 20px solid transparent;
}
@ -61,27 +48,24 @@
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin: 15px 0;
font-size: 16px;
font-weight: bold;
line-height: 12px;
color: #fff;
font-weight: 500;
line-height: 45px;
color: #000;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, .5);
}
// Generic style for all buttons in .popover-header
.popover-header [class*="button"] {
z-index: 25;
font-size: 12px;
line-height: 22px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
background-color: #454545;
background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
border: 1px solid #111;
font-size: 16px;
font-weight: 400;
line-height: 29px;
color: $app-color;
border: 0;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
@ -98,8 +82,9 @@
// Active state for popover header buttons
.popover-header .button:active {
color: #fff;
background-color: #0876b1;
color: $app-color;
background-color: transparent;
opacity: .3;
}
// Popover animation
@ -129,7 +114,6 @@
// Positioning and giving darker border to look sharp against dark popover
.popover .button-block {
margin-bottom: 5px;
border: 1px solid #111;
}
// Remove extra margin on bottom of last button
@ -148,7 +132,7 @@
margin-left: 0;
overflow: auto;
background-color: #fff;
border: 1px solid #000;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 3px;
-webkit-overflow-scrolling: touch;
}
Write Preview
Loading…
Cancel
Save