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.
224 lines
6.2 KiB
224 lines
6.2 KiB
/* |
|
* ===================================================== |
|
* Ratchet v2.0.0 |
|
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton |
|
* Licensed under http://www.opensource.org/licenses/MIT |
|
* |
|
* Designed and built by @connors, @dhg, and @fat. |
|
* ===================================================== |
|
*/ |
|
|
|
.bar { |
|
border-bottom: 0; |
|
background-color: rgba(247, 247, 247, 0.98); |
|
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); |
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); |
|
} |
|
|
|
.bar-tab { |
|
border-top: 0; |
|
-webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); |
|
box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); |
|
} |
|
|
|
.popover .bar-nav { |
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15); |
|
} |
|
|
|
.table-view .table-view-cell { |
|
border-bottom: 0; |
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
|
background-position: 15px 100%; |
|
background-repeat: no-repeat; |
|
} |
|
.table-view .table-view-cell:last-child { |
|
background-image: none; |
|
} |
|
.table-view .table-view-divider { |
|
border-top: 0; |
|
border-bottom: 0; |
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
|
background-position: 0 100%, 0 0%; |
|
background-repeat: no-repeat; |
|
} |
|
|
|
.popover .table-view { |
|
border-radius: 12px; |
|
} |
|
|
|
select, |
|
textarea, |
|
input[type="text"], |
|
input[type=search], |
|
input[type="password"], |
|
input[type="datetime"], |
|
input[type="datetime-local"], |
|
input[type="date"], |
|
input[type="month"], |
|
input[type="time"], |
|
input[type="week"], |
|
input[type="number"], |
|
input[type="email"], |
|
input[type="url"], |
|
input[type="tel"], |
|
input[type="color"], |
|
.input-group { |
|
height: 40px; |
|
padding: 10px 15px; |
|
border: 1px solid rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
input[type=search] { |
|
height: 34px; |
|
text-align: center; |
|
background-color: rgba(0, 0, 0, 0.1); |
|
border: 0; |
|
border-radius: 6px; |
|
} |
|
|
|
input[type=search]:focus { |
|
text-align: left; |
|
} |
|
|
|
.input-group input { |
|
border: 0; |
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
|
background-position: 15px 100%; |
|
background-repeat: no-repeat; |
|
} |
|
|
|
.input-group input:last-child { |
|
background-image: none; |
|
} |
|
|
|
.input-row { |
|
border-bottom: 0; |
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
|
background-position: 15px 100%; |
|
background-repeat: no-repeat; |
|
} |
|
|
|
.input-row:last-child, |
|
.input-row label + input { |
|
background-image: none; |
|
} |
|
|
|
[class*="button"] { |
|
color: #929292; |
|
background-color: transparent; |
|
-webkit-transition: background-color, opacity, color; |
|
transition: background-color, opacity, color; |
|
-webkit-transition-duration: 0.2s; |
|
transition-duration: 0.2s; |
|
-webkit-transition-timing-function: linear; |
|
transition-timing-function: linear; |
|
} |
|
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { |
|
color: #fff; |
|
background-color: #929292; |
|
} |
|
|
|
.button-link:active, .button-link.active { |
|
color: #007aff; |
|
opacity: .3; |
|
} |
|
|
|
.bar-nav { |
|
-webkit-transition: opacity 0.2s linear; |
|
transition: opacity 0.2s linear; |
|
} |
|
|
|
[class*="badge"] { |
|
color: #929292; |
|
} |
|
[class*="badge"].badge-filled { |
|
color: #fff; |
|
} |
|
|
|
.segmented-controller { |
|
background-color: transparent; |
|
} |
|
.segmented-controller li { |
|
-webkit-transition: background-color 0.1s linear; |
|
transition: background-color 0.1s linear; |
|
} |
|
|
|
.popover { |
|
border-radius: 12px; |
|
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
|
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
|
} |
|
|
|
.modal { |
|
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
|
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
|
} |
|
.modal.active { |
|
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
|
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
|
} |
|
|
|
.toggle { |
|
border: 2px solid #e6e6e6; |
|
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; |
|
box-shadow: inset 0 0 0 0 #e1e1e1; |
|
-webkit-transition-property: box-shadow, border; |
|
transition-property: box-shadow, border; |
|
-webkit-transition-duration: 0.2s; |
|
transition-duration: 0.2s; |
|
} |
|
.toggle .toggle-handle { |
|
border: 1px solid rgba(0, 0, 0, 0.2); |
|
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
|
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
|
-webkit-transition-property: -webkit-transform, border, width; |
|
transition-property: -webkit-transform, border, width; |
|
} |
|
.toggle:active .toggle-handle { |
|
width: 35px; |
|
} |
|
.toggle.active { |
|
background-color: transparent; |
|
-webkit-box-shadow: inset 0 0 0 13px #4cd964; |
|
box-shadow: inset 0 0 0 13px #4cd964; |
|
} |
|
.toggle.active:active .toggle-handle, |
|
.toggle.active .toggle-handle:active { |
|
-webkit-transform: translate3d(10px, 0, 0) !important; |
|
transform: translate3d(10px, 0, 0) !important; |
|
} |
|
|
|
.content.fade { |
|
-webkit-transition: opacity 0.2s ease-in-out; |
|
transition: opacity 0.2s ease-in-out; |
|
} |
|
.content.slide { |
|
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
|
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
|
} |
|
.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) { |
|
-webkit-animation-name: fadeOverlay; |
|
animation-name: fadeOverlay; |
|
-webkit-animation-duration: 0.4s; |
|
animation-duration: 0.4s; |
|
} |
|
.content.slide.right:not([class*="sliding-in"]) { |
|
-webkit-animation-direction: reverse; |
|
animation-direction: reverse; |
|
} |
|
.content.slide.left { |
|
-webkit-transform: translate3d(-20%, 0, 0); |
|
transform: translate3d(-20%, 0, 0); |
|
} |
|
|
|
@-webkit-keyframes fadeOverlay { |
|
from { |
|
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); |
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); |
|
} |
|
|
|
to { |
|
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); |
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); |
|
} |
|
}
|
|
|