|
|
|
|
@ -8,8 +8,6 @@
|
|
|
|
|
* ===================================================== |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
/* Hard reset |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
html, |
|
|
|
|
body, |
|
|
|
|
div, |
|
|
|
|
@ -143,8 +141,6 @@ a {
|
|
|
|
|
.bar-header-secondary ~ .content { |
|
|
|
|
padding-top: 88px; } |
|
|
|
|
|
|
|
|
|
/* General bar styles |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
[class*="bar-"] { |
|
|
|
|
position: fixed; |
|
|
|
|
right: 0; |
|
|
|
|
@ -166,8 +162,6 @@ a {
|
|
|
|
|
.bar-footer-secondary.bar-standard { |
|
|
|
|
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } |
|
|
|
|
|
|
|
|
|
/* Title bar |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.bar-title { |
|
|
|
|
top: 0; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
@ -196,8 +190,6 @@ a {
|
|
|
|
|
.bar-title .title a { |
|
|
|
|
color: inherit; } |
|
|
|
|
|
|
|
|
|
/* Tab bar |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.bar-tab { |
|
|
|
|
bottom: 0; |
|
|
|
|
height: 50px; |
|
|
|
|
@ -234,8 +226,6 @@ a {
|
|
|
|
|
.tab-item.active .tab-label { |
|
|
|
|
color: #007aff; } |
|
|
|
|
|
|
|
|
|
/* Buttons in title bars |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.bar-title [class*="button"] { |
|
|
|
|
position: relative; |
|
|
|
|
z-index: 10; |
|
|
|
|
@ -264,8 +254,6 @@ a {
|
|
|
|
|
background-color: transparent; |
|
|
|
|
opacity: .3; } |
|
|
|
|
|
|
|
|
|
/* Directional buttons in title bars |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.bar-title .button-prev:before, |
|
|
|
|
.bar-title .button-prev:after, |
|
|
|
|
.bar-title .button-next:before, |
|
|
|
|
@ -315,8 +303,6 @@ a {
|
|
|
|
|
-webkit-transform: rotate(-45deg); |
|
|
|
|
transform: rotate(-45deg); } |
|
|
|
|
|
|
|
|
|
/* Block buttons in any bar |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
[class*="bar"] .button-block { |
|
|
|
|
padding: 7px 0; |
|
|
|
|
margin-bottom: 0; } |
|
|
|
|
@ -324,8 +310,6 @@ a {
|
|
|
|
|
[class*="bar"] .button-block:active { |
|
|
|
|
padding: 7px 0; } |
|
|
|
|
|
|
|
|
|
/* Segmented controller in any bar |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
[class*="bar-"] .segmented-controller { |
|
|
|
|
margin-bottom: 0; } |
|
|
|
|
|
|
|
|
|
@ -333,15 +317,11 @@ a {
|
|
|
|
|
[class*="bar-"] [class*="button"] + .segmented-controller { |
|
|
|
|
margin-left: 5px; } |
|
|
|
|
|
|
|
|
|
/* Segmented controller in a title bar |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.bar-title .segmented-controller { |
|
|
|
|
line-height: 18px; |
|
|
|
|
-webkit-box-flex: 1; |
|
|
|
|
box-flex: 1; } |
|
|
|
|
|
|
|
|
|
/* Search forms in standard bar |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.bar-standard input[type=search] { |
|
|
|
|
height: 32px; |
|
|
|
|
margin: 0; } |
|
|
|
|
@ -354,16 +334,16 @@ a {
|
|
|
|
|
padding: 11px 60px 11px 0; |
|
|
|
|
margin-left: 15px; |
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); } |
|
|
|
|
.table-view li:first-child { |
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1); } |
|
|
|
|
.table-view li:last-child { |
|
|
|
|
border-bottom: 0; } |
|
|
|
|
.table-view li > a:not([class*="button"]) { |
|
|
|
|
position: relative; |
|
|
|
|
display: block; |
|
|
|
|
padding: inherit; |
|
|
|
|
margin: -11px -60px -11px 0; |
|
|
|
|
color: inherit; } |
|
|
|
|
.table-view li:first-child { |
|
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1); } |
|
|
|
|
.table-view li:last-child { |
|
|
|
|
border-bottom: 0; } |
|
|
|
|
.table-view li > a:not([class*="button"]) { |
|
|
|
|
position: relative; |
|
|
|
|
display: block; |
|
|
|
|
padding: inherit; |
|
|
|
|
margin: -11px -60px -11px 0; |
|
|
|
|
color: inherit; } |
|
|
|
|
.table-view.inset { |
|
|
|
|
width: auto; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
@ -389,11 +369,11 @@ a {
|
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
|
|
/* Rounding first divider on inset lists and remove border on the top */ |
|
|
|
|
/* Rounding last divider on inset table views */ } |
|
|
|
|
.table-view .table-view-divider :first-child { |
|
|
|
|
.table-view .table-view-divider:first-child { |
|
|
|
|
top: 0; |
|
|
|
|
border-top-width: 0; |
|
|
|
|
border-radius: 6px 6px 0 0; } |
|
|
|
|
.table-view .table-view-divider :last-child { |
|
|
|
|
.table-view .table-view-divider:last-child { |
|
|
|
|
border-radius: 0 0 6px 6px; } |
|
|
|
|
.table-view .chevron, |
|
|
|
|
.table-view [class*="button"], |
|
|
|
|
@ -413,8 +393,6 @@ a {
|
|
|
|
|
.table-view .toggle { |
|
|
|
|
margin-top: -15px; } |
|
|
|
|
|
|
|
|
|
/* Forms |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
input, |
|
|
|
|
textarea, |
|
|
|
|
button, |
|
|
|
|
@ -468,8 +446,6 @@ select {
|
|
|
|
|
background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%); |
|
|
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } |
|
|
|
|
|
|
|
|
|
/* Input groups (cluster multiple inputs together into a single group) |
|
|
|
|
---------------------------------------------------------------------- */ |
|
|
|
|
.input-group { |
|
|
|
|
width: auto; |
|
|
|
|
height: auto; |
|
|
|
|
@ -486,8 +462,6 @@ select {
|
|
|
|
|
.input-group input:last-child { |
|
|
|
|
border-bottom-width: 0; } |
|
|
|
|
|
|
|
|
|
/* Input groups with labels |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.input-row { |
|
|
|
|
overflow: hidden; |
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2); } |
|
|
|
|
@ -508,8 +482,6 @@ select {
|
|
|
|
|
margin-bottom: 0; |
|
|
|
|
border-bottom: 0; } |
|
|
|
|
|
|
|
|
|
/* General button styles |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
[class*="button"] { |
|
|
|
|
position: relative; |
|
|
|
|
display: inline-block; |
|
|
|
|
@ -524,13 +496,10 @@ select {
|
|
|
|
|
background-color: transparent; |
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.5); |
|
|
|
|
border-radius: 4px; } |
|
|
|
|
[class*="button"]:active { |
|
|
|
|
background-color: #333; |
|
|
|
|
transition: background-color .1s linear; } |
|
|
|
|
|
|
|
|
|
[class*="button"]:active { |
|
|
|
|
background-color: #333; |
|
|
|
|
transition: background-color .1s linear; } |
|
|
|
|
|
|
|
|
|
/* Button modifiers |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.button-main, |
|
|
|
|
.button-positive, |
|
|
|
|
.button-negative { |
|
|
|
|
@ -590,33 +559,25 @@ button.button-block {
|
|
|
|
|
padding-bottom: 4px; |
|
|
|
|
margin-right: 10px; } |
|
|
|
|
|
|
|
|
|
/* Chevrons |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.chevron { |
|
|
|
|
display: block; |
|
|
|
|
height: 20px; } |
|
|
|
|
.chevron:before, .chevron:after { |
|
|
|
|
position: relative; |
|
|
|
|
display: block; |
|
|
|
|
width: 10px; |
|
|
|
|
height: 3px; |
|
|
|
|
background-color: #c7c7cc; |
|
|
|
|
content: ''; } |
|
|
|
|
.chevron:before { |
|
|
|
|
top: 6px; |
|
|
|
|
-webkit-transform: rotate(45deg); |
|
|
|
|
transform: rotate(45deg); } |
|
|
|
|
.chevron:after { |
|
|
|
|
top: 8px; |
|
|
|
|
-webkit-transform: rotate(-45deg); |
|
|
|
|
transform: rotate(-45deg); } |
|
|
|
|
|
|
|
|
|
.chevron:before, |
|
|
|
|
.chevron:after { |
|
|
|
|
position: relative; |
|
|
|
|
display: block; |
|
|
|
|
width: 10px; |
|
|
|
|
height: 3px; |
|
|
|
|
background-color: #c7c7cc; |
|
|
|
|
content: ''; } |
|
|
|
|
|
|
|
|
|
.chevron:before { |
|
|
|
|
top: 6px; |
|
|
|
|
-webkit-transform: rotate(45deg); |
|
|
|
|
transform: rotate(45deg); } |
|
|
|
|
|
|
|
|
|
.chevron:after { |
|
|
|
|
top: 8px; |
|
|
|
|
-webkit-transform: rotate(-45deg); |
|
|
|
|
transform: rotate(-45deg); } |
|
|
|
|
|
|
|
|
|
/* General count styles |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
[class*="count"] { |
|
|
|
|
display: inline-block; |
|
|
|
|
padding: 4px 9px; |
|
|
|
|
@ -627,13 +588,6 @@ button.button-block {
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
|
|
border-radius: 100px; } |
|
|
|
|
|
|
|
|
|
/* Count modifiers |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.count-main, |
|
|
|
|
.count-positive, |
|
|
|
|
.count-negative { |
|
|
|
|
color: #fff; } |
|
|
|
|
|
|
|
|
|
.count-main { |
|
|
|
|
background-color: #1eafe7; } |
|
|
|
|
|
|
|
|
|
@ -643,8 +597,6 @@ button.button-block {
|
|
|
|
|
.count-negative { |
|
|
|
|
background-color: #e71e1e; } |
|
|
|
|
|
|
|
|
|
/* Segmented controllers |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.segmented-controller { |
|
|
|
|
display: -webkit-box; |
|
|
|
|
display: box; |
|
|
|
|
@ -658,41 +610,32 @@ button.button-block {
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
-webkit-box-orient: horizontal; |
|
|
|
|
box-orient: horizontal; } |
|
|
|
|
.segmented-controller li { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-align: center; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
border-left: 1px solid #007aff; |
|
|
|
|
-webkit-box-flex: 1; |
|
|
|
|
box-flex: 1; } |
|
|
|
|
.segmented-controller li > a { |
|
|
|
|
display: block; |
|
|
|
|
padding: 8px 16px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
line-height: 15px; |
|
|
|
|
color: #007aff; |
|
|
|
|
text-overflow: ellipsis; } |
|
|
|
|
.segmented-controller li:first-child { |
|
|
|
|
border-left-width: 0; } |
|
|
|
|
.segmented-controller li.active { |
|
|
|
|
background-color: #007aff; |
|
|
|
|
transition: background-color .2s linear; } |
|
|
|
|
.segmented-controller li.active > a { |
|
|
|
|
color: #fff; } |
|
|
|
|
.segmented-controller .segmented-controller-item { |
|
|
|
|
display: none; } |
|
|
|
|
.segmented-controller .segmented-controller-item.active { |
|
|
|
|
display: block; } |
|
|
|
|
|
|
|
|
|
.segmented-controller li { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-align: center; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
border-left: 1px solid #007aff; |
|
|
|
|
-webkit-box-flex: 1; |
|
|
|
|
box-flex: 1; } |
|
|
|
|
|
|
|
|
|
.segmented-controller li > a { |
|
|
|
|
display: block; |
|
|
|
|
padding: 8px 16px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
line-height: 15px; |
|
|
|
|
color: #007aff; |
|
|
|
|
text-overflow: ellipsis; } |
|
|
|
|
|
|
|
|
|
.segmented-controller li:first-child { |
|
|
|
|
border-left-width: 0; } |
|
|
|
|
|
|
|
|
|
.segmented-controller li.active { |
|
|
|
|
background-color: #007aff; |
|
|
|
|
transition: background-color .2s linear; } |
|
|
|
|
|
|
|
|
|
.segmented-controller li.active > a { |
|
|
|
|
color: #fff; } |
|
|
|
|
|
|
|
|
|
.segmented-controller-item { |
|
|
|
|
display: none; } |
|
|
|
|
|
|
|
|
|
.segmented-controller-item.active { |
|
|
|
|
display: block; } |
|
|
|
|
|
|
|
|
|
/* Popovers (to be used with popovers.js) |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.popover { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 55px; |
|
|
|
|
@ -779,15 +722,11 @@ button.button-block {
|
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #0876b1; } |
|
|
|
|
|
|
|
|
|
/* 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; |
|
|
|
|
@ -796,8 +735,6 @@ button.button-block {
|
|
|
|
|
left: 0; |
|
|
|
|
z-index: 10; } |
|
|
|
|
|
|
|
|
|
/* Block level buttons in popovers |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.popover .button-block { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
border: 1px solid #111; } |
|
|
|
|
@ -805,8 +742,6 @@ button.button-block {
|
|
|
|
|
.popover .button-block:last-child { |
|
|
|
|
margin-bottom: 0; } |
|
|
|
|
|
|
|
|
|
/* Lists in popovers |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.popover .table-view { |
|
|
|
|
width: auto; |
|
|
|
|
max-height: 250px; |
|
|
|
|
@ -819,8 +754,6 @@ button.button-block {
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
-webkit-overflow-scrolling: touch; } |
|
|
|
|
|
|
|
|
|
/* Modals |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.modal { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
@ -834,16 +767,13 @@ button.button-block {
|
|
|
|
|
transform: translate3d(0, 100%, 0); |
|
|
|
|
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; |
|
|
|
|
transition: transform .25s ease-in-out, opacity 1ms .25s; } |
|
|
|
|
|
|
|
|
|
/* Modal - When active |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.modal.active { |
|
|
|
|
opacity: 1; |
|
|
|
|
height: 100%; |
|
|
|
|
-webkit-transition: -webkit-transform .25s ease-in-out; |
|
|
|
|
transition: transform .25 ease-in-out; |
|
|
|
|
-webkit-transform: translate3d(0, 0, 0); |
|
|
|
|
transform: translate3d(0, 0, 0); } |
|
|
|
|
.modal.active { |
|
|
|
|
opacity: 1; |
|
|
|
|
height: 100%; |
|
|
|
|
-webkit-transition: -webkit-transform .25s ease-in-out; |
|
|
|
|
transition: transform .25 ease-in-out; |
|
|
|
|
-webkit-transform: translate3d(0, 0, 0); |
|
|
|
|
transform: translate3d(0, 0, 0); } |
|
|
|
|
|
|
|
|
|
.slider, |
|
|
|
|
.slider > li { |
|
|
|
|
@ -895,28 +825,22 @@ button.button-block {
|
|
|
|
|
-webkit-transform: translate3d(17px, 0, 0); |
|
|
|
|
transform: translate3d(17px, 0, 0); } |
|
|
|
|
|
|
|
|
|
/* Push styles (to be used with push.js) |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
.content.fade { |
|
|
|
|
left: 0; |
|
|
|
|
opacity: 0; |
|
|
|
|
-webkit-transition: opacity .2s ease-in-out; |
|
|
|
|
transition: opacity .2s ease-in-out; } |
|
|
|
|
|
|
|
|
|
.content.fade.in { |
|
|
|
|
opacity: 1; } |
|
|
|
|
|
|
|
|
|
.content.fade.in { |
|
|
|
|
opacity: 1; } |
|
|
|
|
.content.slide { |
|
|
|
|
-webkit-transform: translate3d(0, 0, 0); |
|
|
|
|
transform: translate3d(0, 0, 0); |
|
|
|
|
-webkit-transition: -webkit-transform .25s ease-in-out; |
|
|
|
|
transition: transform .25s ease-in-out; |
|
|
|
|
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } |
|
|
|
|
|
|
|
|
|
.content.slide.left { |
|
|
|
|
-webkit-transform: translate3d(-100%, 0, 0); |
|
|
|
|
transform: translate3d(-100%, 0, 0); } |
|
|
|
|
|
|
|
|
|
.content.slide.right { |
|
|
|
|
-webkit-transform: translate3d(100%, 0, 0); |
|
|
|
|
transform: translate3d(100%, 0, 0); } |
|
|
|
|
.content.slide.left { |
|
|
|
|
-webkit-transform: translate3d(-100%, 0, 0); |
|
|
|
|
transform: translate3d(-100%, 0, 0); } |
|
|
|
|
.content.slide.right { |
|
|
|
|
-webkit-transform: translate3d(100%, 0, 0); |
|
|
|
|
transform: translate3d(100%, 0, 0); } |
|
|
|
|
|
connors
11 years ago