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

More popover simplification.

pull/214/head
connors 11 years ago
parent
d2fa1feefc
commit
cb10289788
4 changed files with 57 additions and 149 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. 55
      dist/ratchet.css
  2. 56
      examples/components/classic/index.html
  3. 32
      examples/components/default/index.html
  4. 63
      lib/sass/popovers.scss

55
dist/ratchet.css vendored
Unescape View File

@ -917,60 +917,17 @@ input[type="button"] {
} }
.popover:after { .popover:after {
position: absolute; position: absolute;
top: -19px; top: -15px;
left: 50%; left: 50%;
width: 0; width: 0;
height: 0; height: 0;
margin-left: -20px; margin-left: -15px;
content: ''; content: '';
border-right: 20px solid transparent; border-right: 15px solid transparent;
border-bottom: 20px solid rgba(247, 247, 247, 0.98); border-bottom: 15px solid rgba(247, 247, 247, 0.98);
border-left: 20px solid transparent; border-left: 15px solid transparent;
} }
.popover.visible {
.popover-header {
display: -webkit-box;
display: box;
height: 34px;
margin-bottom: 5px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
.popover-header .title {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
font-size: 16px;
font-weight: 500;
line-height: 45px;
color: #000;
text-align: center;
}
.popover-header [class*="button"] {
z-index: 25;
font-size: 16px;
font-weight: 400;
line-height: 29px;
color: #007aff;
border: 0;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
.popover-header .title + [class*="button"]:last-child,
.popover-header .button + [class*="button"]:last-child,
.popover-header [class*="button"].pull-right {
position: absolute;
top: 5px;
right: 5px;
}
.popover-header .button:active {
color: #007aff;
background-color: transparent;
opacity: .3;
}
.popover-header.visible {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

56
examples/components/classic/index.html
Unescape View File

@ -19,7 +19,7 @@
</script> </script>
<style> <style>
[class*="bar"] { .content > [class*="bar"] {
position: relative; position: relative;
} }
.slider, .slider,
@ -34,6 +34,34 @@
<!-- ontouchstart property makes :active/:hover behaviors work on everything --> <!-- ontouchstart property makes :active/:hover behaviors work on everything -->
<body class="body" ontouchstart=""> <body class="body" ontouchstart="">
<!-- POPOVER ============================================================ -->
<div id="myPopover" class="popover">
<header class="bar-title">
<a class="button" href="#">
Open
</a>
<h3 class="title">Popover title</h3>
<a class="button" href="#">
Filter
</a>
</header>
<div class="popover-content">
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With counts</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item2 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
</ul>
</div>
</div>
<div class="content"> <div class="content">
<header class="bar-title"> <header class="bar-title">
@ -68,32 +96,6 @@
</ul> </ul>
</div> </div>
<!-- POPOVER ============================================================ -->
<div id="myPopover" class="popover">
<header class="popover-header">
<a class="button" href="#">
Open
</a>
<h3 class="title">Popover title</h3>
<a class="button" href="#">
Filter
</a>
</header>
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With counts</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item2 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
</ul>
</div>
<!-- TITLEBAR ============================================================ --> <!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons --> <!-- Title-bar left and right buttons -->

32
examples/components/default/index.html
Unescape View File

@ -19,7 +19,7 @@
<style> <style>
[class*="bar"] { .content > [class*="bar"] {
position: relative; position: relative;
} }
.slider, .slider,
@ -36,7 +36,7 @@
<!-- POPOVER ============================================================ --> <!-- POPOVER ============================================================ -->
<div id="myPopover" class="popover"> <div id="myPopover" class="popover">
<header class="popover-header"> <header class="bar-title">
<a class="button" href="#"> <a class="button" href="#">
Open Open
</a> </a>
@ -45,19 +45,21 @@
Filter Filter
</a> </a>
</header> </header>
<ul class="table-view"> <div class="popover-content">
<li>Item1</li> <ul class="table-view">
<li>Item2</li> <li>Item1</li>
<li>Item3</li> <li>Item2</li>
<li class="table-view-divider">With counts</li> <li>Item3</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> <li class="table-view-divider">With counts</li>
<li>Item2 <span class="count">1</span></li> <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li> <li>Item2 <span class="count">1</span></li>
<li class="table-view-divider">With chevrons</li> <li>Item3 <span class="count">1</span></li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li class="table-view-divider">With chevrons</li>
<li>Item2 <span class="chevron"></span></li> <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> <li>Item2 <span class="chevron"></span></li>
</ul> <li>Item3 <span class="chevron"></span></li>
</ul>
</div>
</div> </div>
<div class="content"> <div class="content">

63
lib/sass/popovers.scss
Unescape View File

@ -22,68 +22,15 @@
// 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)
&:after { &:after {
position: absolute; position: absolute;
top: -19px; top: -15px;
left: 50%; left: 50%;
width: 0; width: 0;
height: 0; height: 0;
margin-left: -20px; margin-left: -15px;
content: ''; content: '';
border-right: 20px solid transparent; border-right: 15px solid transparent;
border-bottom: 20px solid $chrome-color; border-bottom: 15px solid $chrome-color;
border-left: 20px solid transparent; border-left: 15px solid transparent;
}
}
// Wrapper for a title and buttons
.popover-header {
display: -webkit-box;
display: box;
height: 34px;
margin-bottom: 5px;
box-shadow: 0 0 1px rgba(0,0,0,.85);
// Centered title for popover
.title {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
font-size: 16px;
font-weight: 500;
line-height: 45px;
color: #000;
text-align: center;
}
// Generic style for all buttons in .popover-header
[class*="button"] {
z-index: 25;
font-size: 16px;
font-weight: 400;
line-height: 29px;
color: $primary-color;
border: 0;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
// Hacky way to right align buttons outside of flex-box system
// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
.title + [class*="button"]:last-child,
.button + [class*="button"]:last-child,
[class*="button"].pull-right {
position: absolute;
top: 5px;
right: 5px;
}
// Active state for popover header buttons
.button:active {
color: $primary-color;
background-color: transparent;
opacity: .3;
} }
// Popover animation // Popover animation

Write Preview
Loading…
Cancel
Save