mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.1 KiB
138 lines
3.1 KiB
// |
|
// Popovers (to be used with popovers.js) |
|
// -------------------------------------------------- |
|
|
|
.popover { |
|
position: fixed; |
|
top: 55px; |
|
left: 50%; |
|
z-index: 20; |
|
display: none; |
|
width: 280px; |
|
padding: 5px; |
|
margin-left: -146px; |
|
background-color: $chrome-color; |
|
border-radius: 6px; |
|
opacity: 0; |
|
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; |
|
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
|
} |
|
|
|
// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) |
|
.popover:after { |
|
position: absolute; |
|
top: -19px; |
|
left: 50%; |
|
width: 0; |
|
height: 0; |
|
margin-left: -20px; |
|
content: ''; |
|
border-right: 20px solid transparent; |
|
border-bottom: 20px solid $chrome-color; |
|
border-left: 20px solid transparent; |
|
} |
|
|
|
// Wrapper for a title and buttons |
|
.popover-header { |
|
display: -webkit-box; |
|
display: box; |
|
height: 34px; |
|
margin-bottom: 5px; |
|
} |
|
|
|
// Centered title for popover |
|
.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; |
|
} |
|
|
|
// Generic style for all buttons in .popover-header |
|
.popover-header [class*="button"] { |
|
z-index: 25; |
|
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; |
|
} |
|
|
|
// 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 |
|
.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; |
|
} |
|
|
|
// Active state for popover header buttons |
|
.popover-header .button:active { |
|
color: $app-color; |
|
background-color: transparent; |
|
opacity: .3; |
|
} |
|
|
|
// Popover animation |
|
// -------------------------------------------------- |
|
|
|
.popover.visible { |
|
opacity: 1; |
|
-webkit-transform: translate3d(0, 0, 0); |
|
transform: translate3d(0, 0, 0); |
|
} |
|
|
|
// Backdrop (used as invisible touch escape) |
|
// -------------------------------------------------- |
|
|
|
.backdrop { |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
z-index: 10; |
|
} |
|
|
|
// Block level buttons in popovers |
|
// -------------------------------------------------- |
|
|
|
// Positioning and giving darker border to look sharp against dark popover |
|
.popover .button-block { |
|
margin-bottom: 5px; |
|
} |
|
|
|
// Remove extra margin on bottom of last button |
|
.popover .button-block:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
// Table views in popovers |
|
// -------------------------------------------------- |
|
|
|
.popover .table-view { |
|
width: auto; |
|
max-height: 250px; |
|
margin-right: 0; |
|
margin-bottom: 0; |
|
margin-left: 0; |
|
overflow: auto; |
|
background-color: #fff; |
|
border: 1px solid rgba(0, 0, 0, .15); |
|
border-radius: 3px; |
|
-webkit-overflow-scrolling: touch; |
|
} |