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

Run `grunt`.

pull/431/head
XhmikosR 11 years ago
parent
8425c84d0c
commit
c8d8f41c8a
13 changed files with 870 additions and 862 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. 124
      dist/css/ratchet-theme-android.css
  2. 2
      dist/css/ratchet-theme-android.min.css
  3. 128
      dist/css/ratchet-theme-ios.css
  4. 2
      dist/css/ratchet-theme-ios.min.css
  5. 174
      dist/css/ratchet.css
  6. 2
      dist/css/ratchet.min.css
  7. 446
      docs/assets/css/docs.css
  8. 124
      docs/dist/css/ratchet-theme-android.css
  9. 2
      docs/dist/css/ratchet-theme-android.min.css
  10. 128
      docs/dist/css/ratchet-theme-ios.css
  11. 2
      docs/dist/css/ratchet-theme-ios.min.css
  12. 174
      docs/dist/css/ratchet.css
  13. 2
      docs/dist/css/ratchet.min.css

124
dist/css/ratchet-theme-android.css vendored
Unescape View File

@ -12,7 +12,7 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: #222222; color: #222;
} }
a { a {
@ -50,87 +50,87 @@ a:active {
.btn { .btn {
padding: 8px 15px; padding: 8px 15px;
font-size: 14px; font-size: 14px;
color: #222222; color: #222;
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #222222; color: #222;
background-color: #999;
border: 0; border: 0;
background-color: #999999; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 0;
background-color: #33b5e5; background-color: #33b5e5;
border: 0;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 0;
background-color: #1a9bcb; background-color: #1a9bcb;
border: 0;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
background-color: #9c0;
border: 0; border: 0;
background-color: #99cc00;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 0;
background-color: #739900; background-color: #739900;
border: 0;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
background-color: #f44;
border: 0; border: 0;
background-color: #ff4444;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
background-color: #f11;
border: 0; border: 0;
background-color: #ff1111;
} }
.btn-outlined { .btn-outlined {
border: 1px solid #999999;
background-color: transparent; background-color: transparent;
border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-outlined.btn-primary { .btn-outlined.btn-primary {
border: 1px solid #33b5e5;
color: #33b5e5; color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-primary:active { .btn-outlined.btn-primary:active {
border: 1px solid #33b5e5;
background-color: #33b5e5; background-color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-positive { .btn-outlined.btn-positive {
border: 1px solid #99cc00; color: #9c0;
color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-positive:active { .btn-outlined.btn-positive:active {
border: 1px solid #99cc00; background-color: #9c0;
background-color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-negative { .btn-outlined.btn-negative {
border: 1px solid #ff4444; color: #f44;
color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined.btn-negative:active { .btn-outlined.btn-negative:active {
border: 1px solid #ff4444; background-color: #f44;
background-color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined:active { .btn-outlined:active {
border: 1px solid #999999; background-color: #999;
background-color: #999999; border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -160,7 +160,7 @@ a:active {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -171,10 +171,10 @@ a:active {
.bar { .bar {
height: 50px; height: 50px;
background-color: #dddddd; background-color: #ddd;
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 50px; top: 50px;
@ -188,8 +188,8 @@ a:active {
.bar .bar-footer, .bar .bar-footer,
.bar .bar-footer-secondary, .bar .bar-footer-secondary,
.bar .bar-footer-secondary-tab { .bar .bar-footer-secondary-tab {
border-bottom: 0;
border-top: 1px solid #b1b1b1; border-top: 1px solid #b1b1b1;
border-bottom: 0;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5;
} }
@ -234,9 +234,9 @@ a:active {
.bar .btn-link { .bar .btn-link {
top: 0; top: 0;
padding: 0; padding: 0;
color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 49px; line-height: 49px;
color: #33b5e5;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
@ -270,7 +270,7 @@ a:active {
} }
.badge.badge-inverted { .badge.badge-inverted {
color: #999999; color: #999;
background-color: transparent; background-color: transparent;
} }
@ -285,26 +285,26 @@ a:active {
.badge-positive { .badge-positive {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.badge-positive.badge-inverted { .badge-positive.badge-inverted {
color: #99cc00; color: #9c0;
background-color: transparent; background-color: transparent;
} }
.badge-negative { .badge-negative {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.badge-negative.badge-inverted { .badge-negative.badge-inverted {
color: #ff4444; color: #f44;
background-color: transparent; background-color: transparent;
} }
.card { .card {
background-color: transparent;
border-color: #d9d9d9; border-color: #d9d9d9;
border-radius: 2px; border-radius: 2px;
background-color: transparent;
} }
.table-view { .table-view {
@ -327,9 +327,9 @@ a:active {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
background-color: transparent;
border-top: 0; border-top: 0;
border-bottom: 2px solid #a9a9a9; border-bottom: 2px solid #a9a9a9;
background-color: transparent;
} }
select, select,
@ -351,9 +351,9 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
} }
input[type="search"] { input[type="search"] {
@ -396,22 +396,22 @@ textarea,
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
} }
.segmented-control .control-item { .segmented-control .control-item {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #222222; color: #222;
border-left: 1px solid #999; border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
border-left-width: 0; border-left-width: 0;
} }
.segmented-control .control-item:active, .segmented-control .control-item.active { .segmented-control .control-item:active, .segmented-control .control-item.active {
background-color: #999999; background-color: #999;
} }
.segmented-control-primary { .segmented-control-primary {
@ -435,7 +435,7 @@ textarea,
} }
.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.segmented-control-negative { .segmented-control-negative {
@ -447,7 +447,7 @@ textarea,
} }
.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.popover { .popover {
@ -457,14 +457,14 @@ textarea,
margin-left: 0; margin-left: 0;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out; transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-transform: scale(.75);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -ms-transform: scale(.75);
-webkit-transform: scale(0.75); transform: scale(.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
} }
.popover:before { .popover:before {
display: none; display: none;
@ -493,20 +493,20 @@ textarea,
.toggle { .toggle {
width: 104px; width: 104px;
height: 28px; height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7; border: 2px solid #d7d7d7;
border-radius: 0; border-radius: 0;
background-color: #d7d7d7;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
top: 0; top: 0;
left: 0; left: 0;
width: 50px; width: 50px;
height: 24px; height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 2px; border-radius: 2px;
background-color: #bebebe; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
} }
.toggle:before { .toggle:before {
top: 1px; top: 1px;
@ -516,8 +516,8 @@ textarea,
color: #fff; color: #fff;
} }
.toggle.active { .toggle.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7; background-color: #d7d7d7;
border: 2px solid #d7d7d7;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
margin-right: 2px; margin-right: 2px;
@ -528,8 +528,8 @@ textarea,
transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {
left: auto;
right: 14px; right: 14px;
left: auto;
color: #fff; color: #fff;
} }

2
dist/css/ratchet-theme-android.min.css vendored
View File

File diff suppressed because one or more lines are too long

128
dist/css/ratchet-theme-ios.css vendored
Unescape View File

@ -32,18 +32,18 @@ p {
} }
.btn { .btn {
border: 1px solid #929292;
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, .98);
border: 1px solid #929292;
-webkit-transition: all; -webkit-transition: all;
-moz-transition: all; -moz-transition: all;
transition: all; transition: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #fff; color: #fff;
@ -52,32 +52,32 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #007aff;
background-color: #007aff; background-color: #007aff;
border: 1px solid #007aff;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
border: 1px solid #0062cc;
background-color: #0062cc; background-color: #0062cc;
border: 1px solid #0062cc;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #4cd964;
background-color: #4cd964; background-color: #4cd964;
border: 1px solid #4cd964;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
border: 1px solid #2ac845;
background-color: #2ac845; background-color: #2ac845;
border: 1px solid #2ac845;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #dd524d;
background-color: #dd524d; background-color: #dd524d;
border: 1px solid #dd524d;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
border: 1px solid #cf2d28;
background-color: #cf2d28; background-color: #cf2d28;
border: 1px solid #cf2d28;
} }
.btn-outlined { .btn-outlined {
@ -107,7 +107,7 @@ p {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -117,10 +117,10 @@ p {
} }
.bar { .bar {
background-color: rgba(247, 247, 247, .98);
border-bottom: 0; border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 44px; top: 44px;
@ -195,27 +195,27 @@ p {
} }
.table-view { .table-view {
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-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; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
.table-view .table-view-cell { .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-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; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
background-image: none; background-image: none;
} }
.table-view .table-view-divider { .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-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; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
select, select,
@ -237,13 +237,13 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
} }
input[type="search"] { input[type="search"] {
height: 34px; height: 34px;
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, .1);
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
} }
@ -260,17 +260,17 @@ textarea,
.input-group { .input-group {
padding: 0; padding: 0;
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>"), 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-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; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
} }
.input-group input { .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-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; background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
} }
.input-group input:last-child { .input-group input:last-child {
@ -278,10 +278,10 @@ textarea,
} }
.input-row { .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-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; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.input-row:last-child, .input-row:last-child,
@ -296,9 +296,9 @@ textarea,
.segmented-control .control-item { .segmented-control .control-item {
color: #929292; color: #929292;
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color .1s linear;
-moz-transition: background-color 0.1s linear; -moz-transition: background-color .1s linear;
transition: background-color 0.1s linear; transition: background-color .1s linear;
} }
.segmented-control .control-item:active { .segmented-control .control-item:active {
background-color: #ebebeb; background-color: #ebebeb;
@ -355,12 +355,12 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
} }
.popover:before { .popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98); border-bottom: 15px solid rgba(247, 247, 247, .98);
} }
.popover .bar { .popover .bar {
@ -369,23 +369,23 @@ textarea,
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, .15);
} }
.popover .table-view { .popover .table-view {
border-radius: 12px;
background-image: none; background-image: none;
border-radius: 12px;
} }
.modal { .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.modal.active { .modal.active {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.toggle { .toggle {
@ -393,27 +393,27 @@ textarea,
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: box-shadow, border; -webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border; -moz-transition-property: box-shadow, border;
transition-property: box-shadow, border; transition-property: box-shadow, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
} }
.toggle:before { .toggle:before {
display: none; display: none;
} }
.toggle.active { .toggle.active {
border: 2px solid #4cd964;
background-color: transparent; background-color: transparent;
border: 2px solid #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964; -webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964;
} }
@ -427,22 +427,22 @@ textarea,
} }
.content.fade { .content.fade {
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; -moz-transition: opacity .2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity .2s ease-in-out;
} }
.content.sliding { .content.sliding {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay; -webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay; -moz-animation-name: fadeOverlay;
animation-name: fadeOverlay; animation-name: fadeOverlay;
-webkit-animation-duration: 0.4s; -webkit-animation-duration: .4s;
-moz-animation-duration: 0.4s; -moz-animation-duration: .4s;
animation-duration: 0.4s; animation-duration: .4s;
} }
.content.sliding.right:not([class*="sliding-in"]) { .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse; -webkit-animation-direction: reverse;
@ -462,7 +462,7 @@ textarea,
} }
to { to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
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, .3), -320px 0 0 rgba(0, 0, 0, .1);
} }
} }

2
dist/css/ratchet-theme-ios.min.css vendored
View File

File diff suppressed because one or more lines are too long

174
dist/css/ratchet.css vendored
Unescape View File

@ -11,8 +11,8 @@
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html { html {
font-family: sans-serif; font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
} }
body { body {
@ -75,13 +75,13 @@ dfn {
} }
h1 { h1 {
margin: .67em 0;
font-size: 2em; font-size: 2em;
margin: 0.67em 0;
} }
mark { mark {
background: #ff0;
color: #000; color: #000;
background: #ff0;
} }
small { small {
@ -90,18 +90,18 @@ small {
sub, sub,
sup { sup {
position: relative;
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { sup {
top: -0.5em; top: -.5em;
} }
sub { sub {
bottom: -0.25em; bottom: -.25em;
} }
img { img {
@ -117,9 +117,9 @@ figure {
} }
hr { hr {
height: 0;
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
height: 0;
} }
pre { pre {
@ -139,9 +139,9 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
color: inherit;
font: inherit;
margin: 0; margin: 0;
font: inherit;
color: inherit;
} }
button { button {
@ -168,8 +168,8 @@ html input[disabled] {
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
input { input {
@ -188,10 +188,10 @@ input[type="number"]::-webkit-outer-spin-button {
} }
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
-webkit-appearance: textfield;
} }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button,
@ -200,14 +200,14 @@ input[type="search"]::-webkit-search-decoration {
} }
fieldset { fieldset {
border: 1px solid #c0c0c0; padding: .35em .625em .75em;
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0;
} }
legend { legend {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
textarea { textarea {
@ -219,8 +219,8 @@ optgroup {
} }
table { table {
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse;
} }
td, td,
@ -250,6 +250,7 @@ body {
a { a {
color: #428bca; color: #428bca;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
a:active { a:active {
@ -263,8 +264,8 @@ a:active {
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto; overflow: auto;
background-color: #fff;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: #fff;
} }
.content > * { .content > * {
@ -310,8 +311,8 @@ a:active {
} }
.clearfix:before, .clearfix:after { .clearfix:before, .clearfix:after {
content: " ";
display: table; display: table;
content: " ";
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
@ -340,13 +341,13 @@ h4, .h4 {
} }
h5, .h5 { h5, .h5 {
font-size: 14px;
margin-top: 20px; margin-top: 20px;
font-size: 14px;
} }
h6, .h6 { h6, .h6 {
font-size: 12px;
margin-top: 20px; margin-top: 20px;
font-size: 12px;
} }
p { p {
@ -366,8 +367,8 @@ p {
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top;
white-space: nowrap; white-space: nowrap;
vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -383,35 +384,35 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #428bca;
background-color: #428bca; background-color: #428bca;
border: 1px solid #428bca;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 1px solid #3071a9;
background-color: #3071a9; background-color: #3071a9;
border: 1px solid #3071a9;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 1px solid #5cb85c;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 1px solid #449d44;
background-color: #449d44; background-color: #449d44;
border: 1px solid #449d44;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #d9534f;
background-color: #d9534f; background-color: #d9534f;
border: 1px solid #d9534f;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
border: 1px solid #c9302c;
background-color: #c9302c; background-color: #c9302c;
border: 1px solid #c9302c;
} }
.btn-outlined { .btn-outlined {
@ -457,9 +458,9 @@ input[type="button"] {
} }
.btn .badge { .btn .badge {
font-size: 12px;
margin: -2px -4px -2px 4px; margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15); font-size: 12px;
background-color: rgba(0, 0, 0, .15);
} }
.btn .badge-inverted, .btn .badge-inverted,
@ -491,8 +492,8 @@ input[type="button"] {
height: 44px; height: 44px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
border-bottom: 1px solid #dddddd;
background-color: white; background-color: white;
border-bottom: 1px solid #ddd;
} }
.bar-header-secondary { .bar-header-secondary {
@ -514,8 +515,8 @@ input[type="button"] {
.bar-footer, .bar-footer,
.bar-footer-secondary, .bar-footer-secondary,
.bar-footer-secondary-tab { .bar-footer-secondary-tab {
border-top: 1px solid #ddd;
border-bottom: 0; border-bottom: 0;
border-top: 1px solid #dddddd;
} }
.bar-nav { .bar-nav {
@ -541,22 +542,22 @@ input[type="button"] {
} }
.bar-tab { .bar-tab {
display: table;
bottom: 0; bottom: 0;
display: table;
width: 100%; width: 100%;
height: 50px; height: 50px;
padding: 0; padding: 0;
border-top: 1px solid #dddddd;
border-bottom: 0;
table-layout: fixed; table-layout: fixed;
border-top: 1px solid #ddd;
border-bottom: 0;
} }
.bar-tab .tab-item { .bar-tab .tab-item {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
height: 50px; height: 50px;
vertical-align: middle;
color: #929292; color: #929292;
text-align: center; text-align: center;
vertical-align: middle;
} }
.bar-tab .tab-item.active, .bar-tab .tab-item:active { .bar-tab .tab-item.active, .bar-tab .tab-item:active {
color: #428bca; color: #428bca;
@ -592,8 +593,8 @@ input[type="button"] {
top: 0; top: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
color: #428bca;
line-height: 44px; line-height: 44px;
color: #428bca;
border: 0; border: 0;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
@ -655,7 +656,7 @@ input[type="button"] {
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
color: #333; color: #333;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
border-radius: 100px; border-radius: 100px;
} }
.badge.badge-inverted { .badge.badge-inverted {
@ -688,10 +689,10 @@ input[type="button"] {
} }
.card { .card {
overflow: hidden;
margin: 10px; margin: 10px;
overflow: hidden;
background-color: white; background-color: white;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 6px; border-radius: 6px;
} }
@ -702,8 +703,8 @@ input[type="button"] {
} }
.card .table-view .table-view-divider:first-child { .card .table-view .table-view-divider:first-child {
top: 0; top: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px;
} }
.card .table-view .table-view-divider:last-child { .card .table-view .table-view-divider:last-child {
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
@ -720,15 +721,15 @@ input[type="button"] {
margin-bottom: 15px; margin-bottom: 15px;
list-style: none; list-style: none;
background-color: #fff; background-color: #fff;
border-top: 1px solid #dddddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.table-view-cell { .table-view-cell {
position: relative; position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px; padding: 11px 65px 11px 15px;
border-bottom: 1px solid #dddddd; overflow: hidden;
border-bottom: 1px solid #ddd;
} }
.table-view-cell:last-child { .table-view-cell:last-child {
border-bottom: 0; border-bottom: 0;
@ -736,9 +737,9 @@ input[type="button"] {
.table-view-cell > a:not(.btn) { .table-view-cell > a:not(.btn) {
position: relative; position: relative;
display: block; display: block;
overflow: hidden;
padding: inherit; padding: inherit;
margin: -11px -65px -11px -15px; margin: -11px -65px -11px -15px;
overflow: hidden;
color: inherit; color: inherit;
} }
.table-view-cell > a:not(.btn):active { .table-view-cell > a:not(.btn):active {
@ -754,11 +755,11 @@ input[type="button"] {
padding-left: 15px; padding-left: 15px;
margin-top: -1px; margin-top: -1px;
margin-left: 0; margin-left: 0;
color: #999;
font-weight: 500; font-weight: 500;
border-top: 1px solid #dddddd; color: #999;
border-bottom: 1px solid #dddddd;
background-color: #fafafa; background-color: #fafafa;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
} }
.table-view .media, .table-view .media,
@ -844,21 +845,21 @@ input[type="tel"],
input[type="color"] { input[type="color"] {
width: 100%; width: 100%;
height: 35px; height: 35px;
-webkit-appearance: none;
padding: 0 15px; padding: 0 15px;
margin-bottom: 15px; margin-bottom: 15px;
line-height: 21px; line-height: 21px;
background-color: #fff; background-color: #fff;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
-webkit-appearance: none;
} }
input[type="search"] { input[type="search"] {
box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
box-sizing: border-box;
} }
input[type="search"]:focus { input[type="search"]:focus {
@ -873,8 +874,8 @@ select {
height: auto; height: auto;
font-size: 14px; font-size: 14px;
background-color: #f8f8f8; background-color: #f8f8f8;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
} }
.input-group { .input-group {
@ -886,8 +887,8 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-top: 0; border-top: 0;
border-left: 0;
border-right: 0; border-right: 0;
border-left: 0;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -895,7 +896,7 @@ select {
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.input-row label { .input-row label {
@ -926,15 +927,15 @@ select {
} }
.segmented-control .control-item { .segmented-control .control-item {
display: table-cell; display: table-cell;
overflow: hidden;
width: 1%; width: 1%;
padding-top: 6px; padding-top: 6px;
padding-bottom: 7px; padding-bottom: 7px;
overflow: hidden;
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
@ -1009,15 +1010,15 @@ select {
margin-left: -140px; margin-left: -140px;
background-color: white; background-color: white;
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
opacity: 0; opacity: 0;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -webkit-transition: all .25s linear;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -moz-transition: all .25s linear;
transition: all .25s linear;
-webkit-transform: translate3d(0, -15px, 0); -webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
} }
.popover:before { .popover:before {
position: absolute; position: absolute;
@ -1026,10 +1027,10 @@ select {
width: 0; width: 0;
height: 0; height: 0;
margin-left: -15px; margin-left: -15px;
content: '';
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-bottom: 15px solid white; border-bottom: 15px solid white;
border-left: 15px solid transparent; border-left: 15px solid transparent;
content: '';
} }
.popover.visible { .popover.visible {
opacity: 1; opacity: 1;
@ -1048,7 +1049,7 @@ select {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 15; z-index: 15;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, .3);
} }
.popover .btn-block { .popover .btn-block {
@ -1059,9 +1060,9 @@ select {
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
border-top-right-radius: 12px;
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -1070,22 +1071,22 @@ select {
max-height: 300px; max-height: 300px;
margin-bottom: 0; margin-bottom: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff; background-color: #fff;
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
border-radius: 6px; border-radius: 6px;
-webkit-overflow-scrolling: touch;
} }
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
opacity: 0;
z-index: 11; z-index: 11;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s; -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s; -moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s; transition: transform .25s, opacity 1ms .25s;
@ -1094,8 +1095,8 @@ select {
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.modal.active { .modal.active {
opacity: 1;
height: 100%; height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s; -webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s; -moz-transition: -moz-transform .25s;
transition: transform .25s; transition: transform .25s;
@ -1122,26 +1123,26 @@ select {
} }
.slider .slide-group .slide { .slider .slide-group .slide {
display: inline-block; display: inline-block;
vertical-align: top;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
vertical-align: top;
} }
.toggle { .toggle {
display: block;
position: relative; position: relative;
display: block;
width: 74px; width: 74px;
height: 30px; height: 30px;
background-color: #fff; background-color: #fff;
border: 2px solid #ddd; border: 2px solid #ddd;
border-radius: 20px; border-radius: 20px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border; -webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border; -moz-transition-property: background-color, border;
transition-property: background-color, border; transition-property: background-color, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
position: absolute; position: absolute;
@ -1153,25 +1154,25 @@ select {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 100px; border-radius: 100px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle:before { .toggle:before {
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 11px; right: 11px;
color: #999;
font-size: 13px; font-size: 13px;
color: #999;
text-transform: uppercase; text-transform: uppercase;
content: "Off"; content: "Off";
} }
.toggle.active { .toggle.active {
border: 2px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 2px solid #5cb85c;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #5cb85c; border-color: #5cb85c;
@ -1225,15 +1226,16 @@ select {
position: absolute; position: absolute;
top: 50%; top: 50%;
display: inline-block; display: inline-block;
color: #bbb;
font-family: Ratchicons; font-family: Ratchicons;
font-size: inherit; font-size: inherit;
text-decoration: none;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; color: #bbb;
text-decoration: none;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
} }
.navigate-left:after, .navigate-left:after,
@ -1250,18 +1252,20 @@ select {
@font-face { @font-face {
font-family: Ratchicons; font-family: Ratchicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/ratchicons.eot"); src: url("../fonts/ratchicons.eot");
src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg"); src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
font-weight: normal;
font-style: normal;
} }
.icon { .icon {
display: inline-block; display: inline-block;
font-family: Ratchicons; font-family: Ratchicons;
font-size: 24px; font-size: 24px;
text-decoration: none;
line-height: 1; line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

2
dist/css/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long

446
docs/assets/css/docs.css
View File

File diff suppressed because it is too large Load Diff

124
docs/dist/css/ratchet-theme-android.css vendored
Unescape View File

@ -12,7 +12,7 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: #222222; color: #222;
} }
a { a {
@ -50,87 +50,87 @@ a:active {
.btn { .btn {
padding: 8px 15px; padding: 8px 15px;
font-size: 14px; font-size: 14px;
color: #222222; color: #222;
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 1px rgba(0, 0, 0, .25);
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #222222; color: #222;
background-color: #999;
border: 0; border: 0;
background-color: #999999; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 0;
background-color: #33b5e5; background-color: #33b5e5;
border: 0;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 0;
background-color: #1a9bcb; background-color: #1a9bcb;
border: 0;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
background-color: #9c0;
border: 0; border: 0;
background-color: #99cc00;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 0;
background-color: #739900; background-color: #739900;
border: 0;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
background-color: #f44;
border: 0; border: 0;
background-color: #ff4444;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
background-color: #f11;
border: 0; border: 0;
background-color: #ff1111;
} }
.btn-outlined { .btn-outlined {
border: 1px solid #999999;
background-color: transparent; background-color: transparent;
border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.btn-outlined.btn-primary { .btn-outlined.btn-primary {
border: 1px solid #33b5e5;
color: #33b5e5; color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-primary:active { .btn-outlined.btn-primary:active {
border: 1px solid #33b5e5;
background-color: #33b5e5; background-color: #33b5e5;
border: 1px solid #33b5e5;
} }
.btn-outlined.btn-positive { .btn-outlined.btn-positive {
border: 1px solid #99cc00; color: #9c0;
color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-positive:active { .btn-outlined.btn-positive:active {
border: 1px solid #99cc00; background-color: #9c0;
background-color: #99cc00; border: 1px solid #9c0;
} }
.btn-outlined.btn-negative { .btn-outlined.btn-negative {
border: 1px solid #ff4444; color: #f44;
color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined.btn-negative:active { .btn-outlined.btn-negative:active {
border: 1px solid #ff4444; background-color: #f44;
background-color: #ff4444; border: 1px solid #f44;
} }
.btn-outlined:active { .btn-outlined:active {
border: 1px solid #999999; background-color: #999;
background-color: #999999; border: 1px solid #999;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -160,7 +160,7 @@ a:active {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -171,10 +171,10 @@ a:active {
.bar { .bar {
height: 50px; height: 50px;
background-color: #dddddd; background-color: #ddd;
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07); box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, .07);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 50px; top: 50px;
@ -188,8 +188,8 @@ a:active {
.bar .bar-footer, .bar .bar-footer,
.bar .bar-footer-secondary, .bar .bar-footer-secondary,
.bar .bar-footer-secondary-tab { .bar .bar-footer-secondary-tab {
border-bottom: 0;
border-top: 1px solid #b1b1b1; border-top: 1px solid #b1b1b1;
border-bottom: 0;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5; -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5; box-shadow: inset 0 -2px 0 #33b5e5;
} }
@ -234,9 +234,9 @@ a:active {
.bar .btn-link { .bar .btn-link {
top: 0; top: 0;
padding: 0; padding: 0;
color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 49px; line-height: 49px;
color: #33b5e5;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
@ -270,7 +270,7 @@ a:active {
} }
.badge.badge-inverted { .badge.badge-inverted {
color: #999999; color: #999;
background-color: transparent; background-color: transparent;
} }
@ -285,26 +285,26 @@ a:active {
.badge-positive { .badge-positive {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.badge-positive.badge-inverted { .badge-positive.badge-inverted {
color: #99cc00; color: #9c0;
background-color: transparent; background-color: transparent;
} }
.badge-negative { .badge-negative {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.badge-negative.badge-inverted { .badge-negative.badge-inverted {
color: #ff4444; color: #f44;
background-color: transparent; background-color: transparent;
} }
.card { .card {
background-color: transparent;
border-color: #d9d9d9; border-color: #d9d9d9;
border-radius: 2px; border-radius: 2px;
background-color: transparent;
} }
.table-view { .table-view {
@ -327,9 +327,9 @@ a:active {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
background-color: transparent;
border-top: 0; border-top: 0;
border-bottom: 2px solid #a9a9a9; border-bottom: 2px solid #a9a9a9;
background-color: transparent;
} }
select, select,
@ -351,9 +351,9 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
} }
input[type="search"] { input[type="search"] {
@ -396,22 +396,22 @@ textarea,
background-color: #cecece; background-color: #cecece;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
} }
.segmented-control .control-item { .segmented-control .control-item {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #222222; color: #222;
border-left: 1px solid #999; border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
border-left-width: 0; border-left-width: 0;
} }
.segmented-control .control-item:active, .segmented-control .control-item.active { .segmented-control .control-item:active, .segmented-control .control-item.active {
background-color: #999999; background-color: #999;
} }
.segmented-control-primary { .segmented-control-primary {
@ -435,7 +435,7 @@ textarea,
} }
.segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active { .segmented-control-positive .control-item:active, .segmented-control-positive .control-item.active {
color: #fff; color: #fff;
background-color: #99cc00; background-color: #9c0;
} }
.segmented-control-negative { .segmented-control-negative {
@ -447,7 +447,7 @@ textarea,
} }
.segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active { .segmented-control-negative .control-item:active, .segmented-control-negative .control-item.active {
color: #fff; color: #fff;
background-color: #ff4444; background-color: #f44;
} }
.popover { .popover {
@ -457,14 +457,14 @@ textarea,
margin-left: 0; margin-left: 0;
border: 1px solid #9b9b9b; border: 1px solid #9b9b9b;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out; -webkit-transition: -webkit-transform .1s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out; -moz-transition: -moz-transform .1s ease-in-out, opacity .2s ease-in-out;
transition: transform .1s ease-in-out, opacity .2s ease-in-out; transition: transform .1s ease-in-out, opacity .2s ease-in-out;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-transform: scale(.75);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -ms-transform: scale(.75);
-webkit-transform: scale(0.75); transform: scale(.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
} }
.popover:before { .popover:before {
display: none; display: none;
@ -493,20 +493,20 @@ textarea,
.toggle { .toggle {
width: 104px; width: 104px;
height: 28px; height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7; border: 2px solid #d7d7d7;
border-radius: 0; border-radius: 0;
background-color: #d7d7d7;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
top: 0; top: 0;
left: 0; left: 0;
width: 50px; width: 50px;
height: 24px; height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 2px; border-radius: 2px;
background-color: #bebebe; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
} }
.toggle:before { .toggle:before {
top: 1px; top: 1px;
@ -516,8 +516,8 @@ textarea,
color: #fff; color: #fff;
} }
.toggle.active { .toggle.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7; background-color: #d7d7d7;
border: 2px solid #d7d7d7;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
margin-right: 2px; margin-right: 2px;
@ -528,8 +528,8 @@ textarea,
transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {
left: auto;
right: 14px; right: 14px;
left: auto;
color: #fff; color: #fff;
} }

2
docs/dist/css/ratchet-theme-android.min.css vendored
View File

File diff suppressed because one or more lines are too long

128
docs/dist/css/ratchet-theme-ios.css vendored
Unescape View File

@ -32,18 +32,18 @@ p {
} }
.btn { .btn {
border: 1px solid #929292;
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, .98);
border: 1px solid #929292;
-webkit-transition: all; -webkit-transition: all;
-moz-transition: all; -moz-transition: all;
transition: all; transition: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear; -moz-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
} }
.btn:active, .btn.active { .btn:active, .btn.active {
color: #fff; color: #fff;
@ -52,32 +52,32 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #007aff;
background-color: #007aff; background-color: #007aff;
border: 1px solid #007aff;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
border: 1px solid #0062cc;
background-color: #0062cc; background-color: #0062cc;
border: 1px solid #0062cc;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #4cd964;
background-color: #4cd964; background-color: #4cd964;
border: 1px solid #4cd964;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
border: 1px solid #2ac845;
background-color: #2ac845; background-color: #2ac845;
border: 1px solid #2ac845;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #dd524d;
background-color: #dd524d; background-color: #dd524d;
border: 1px solid #dd524d;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
border: 1px solid #cf2d28;
background-color: #cf2d28; background-color: #cf2d28;
border: 1px solid #cf2d28;
} }
.btn-outlined { .btn-outlined {
@ -107,7 +107,7 @@ p {
} }
.btn .badge { .btn .badge {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
} }
.btn .badge.badge-inverted { .btn .badge.badge-inverted {
background-color: transparent; background-color: transparent;
@ -117,10 +117,10 @@ p {
} }
.bar { .bar {
background-color: rgba(247, 247, 247, .98);
border-bottom: 0; border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .85);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, .85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
} }
.bar.bar-header-secondary { .bar.bar-header-secondary {
top: 44px; top: 44px;
@ -195,27 +195,27 @@ p {
} }
.table-view { .table-view {
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-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; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
.table-view .table-view-cell { .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-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; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
background-image: none; background-image: none;
} }
.table-view .table-view-divider { .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-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; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border-top: 0;
border-bottom: 0;
} }
select, select,
@ -237,13 +237,13 @@ input[type="color"],
.input-group { .input-group {
height: 40px; height: 40px;
padding: 10px 15px; padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
} }
input[type="search"] { input[type="search"] {
height: 34px; height: 34px;
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, .1);
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
} }
@ -260,17 +260,17 @@ textarea,
.input-group { .input-group {
padding: 0; padding: 0;
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>"), 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-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; background-repeat: no-repeat;
background-position: 0 100%, 0 0;
border: 0;
} }
.input-group input { .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-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; background-repeat: no-repeat;
background-position: 15px 100%;
border: 0;
} }
.input-group input:last-child { .input-group input:last-child {
@ -278,10 +278,10 @@ textarea,
} }
.input-row { .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-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; background-repeat: no-repeat;
background-position: 15px 100%;
border-bottom: 0;
} }
.input-row:last-child, .input-row:last-child,
@ -296,9 +296,9 @@ textarea,
.segmented-control .control-item { .segmented-control .control-item {
color: #929292; color: #929292;
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color .1s linear;
-moz-transition: background-color 0.1s linear; -moz-transition: background-color .1s linear;
transition: background-color 0.1s linear; transition: background-color .1s linear;
} }
.segmented-control .control-item:active { .segmented-control .control-item:active {
background-color: #ebebeb; background-color: #ebebeb;
@ -355,12 +355,12 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -moz-transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform .2s ease-in-out, opacity .2s ease-in-out;
} }
.popover:before { .popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98); border-bottom: 15px solid rgba(247, 247, 247, .98);
} }
.popover .bar { .popover .bar {
@ -369,23 +369,23 @@ textarea,
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, .15);
} }
.popover .table-view { .popover .table-view {
border-radius: 12px;
background-image: none; background-image: none;
border-radius: 12px;
} }
.modal { .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.modal.active { .modal.active {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.toggle { .toggle {
@ -393,27 +393,27 @@ textarea,
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: box-shadow, border; -webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border; -moz-transition-property: box-shadow, border;
transition-property: box-shadow, border; transition-property: box-shadow, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
} }
.toggle:before { .toggle:before {
display: none; display: none;
} }
.toggle.active { .toggle.active {
border: 2px solid #4cd964;
background-color: transparent; background-color: transparent;
border: 2px solid #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964; -webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964;
} }
@ -427,22 +427,22 @@ textarea,
} }
.content.fade { .content.fade {
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; -moz-transition: opacity .2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity .2s ease-in-out;
} }
.content.sliding { .content.sliding {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -moz-transition-timing-function: cubic-bezier(.1, .5, .1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(.1, .5, .1, 1);
} }
.content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) { .content.sliding.sliding-in, .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay; -webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay; -moz-animation-name: fadeOverlay;
animation-name: fadeOverlay; animation-name: fadeOverlay;
-webkit-animation-duration: 0.4s; -webkit-animation-duration: .4s;
-moz-animation-duration: 0.4s; -moz-animation-duration: .4s;
animation-duration: 0.4s; animation-duration: .4s;
} }
.content.sliding.right:not([class*="sliding-in"]) { .content.sliding.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse; -webkit-animation-direction: reverse;
@ -462,7 +462,7 @@ textarea,
} }
to { to {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3), -320px 0 0 rgba(0, 0, 0, .1);
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, .3), -320px 0 0 rgba(0, 0, 0, .1);
} }
} }

2
docs/dist/css/ratchet-theme-ios.min.css vendored
View File

File diff suppressed because one or more lines are too long

174
docs/dist/css/ratchet.css vendored
Unescape View File

@ -11,8 +11,8 @@
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html { html {
font-family: sans-serif; font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
} }
body { body {
@ -75,13 +75,13 @@ dfn {
} }
h1 { h1 {
margin: .67em 0;
font-size: 2em; font-size: 2em;
margin: 0.67em 0;
} }
mark { mark {
background: #ff0;
color: #000; color: #000;
background: #ff0;
} }
small { small {
@ -90,18 +90,18 @@ small {
sub, sub,
sup { sup {
position: relative;
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { sup {
top: -0.5em; top: -.5em;
} }
sub { sub {
bottom: -0.25em; bottom: -.25em;
} }
img { img {
@ -117,9 +117,9 @@ figure {
} }
hr { hr {
height: 0;
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
height: 0;
} }
pre { pre {
@ -139,9 +139,9 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
color: inherit;
font: inherit;
margin: 0; margin: 0;
font: inherit;
color: inherit;
} }
button { button {
@ -168,8 +168,8 @@ html input[disabled] {
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
input { input {
@ -188,10 +188,10 @@ input[type="number"]::-webkit-outer-spin-button {
} }
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
-webkit-appearance: textfield;
} }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button,
@ -200,14 +200,14 @@ input[type="search"]::-webkit-search-decoration {
} }
fieldset { fieldset {
border: 1px solid #c0c0c0; padding: .35em .625em .75em;
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0;
} }
legend { legend {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
textarea { textarea {
@ -219,8 +219,8 @@ optgroup {
} }
table { table {
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse;
} }
td, td,
@ -250,6 +250,7 @@ body {
a { a {
color: #428bca; color: #428bca;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
a:active { a:active {
@ -263,8 +264,8 @@ a:active {
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto; overflow: auto;
background-color: #fff;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: #fff;
} }
.content > * { .content > * {
@ -310,8 +311,8 @@ a:active {
} }
.clearfix:before, .clearfix:after { .clearfix:before, .clearfix:after {
content: " ";
display: table; display: table;
content: " ";
} }
.clearfix:after { .clearfix:after {
clear: both; clear: both;
@ -340,13 +341,13 @@ h4, .h4 {
} }
h5, .h5 { h5, .h5 {
font-size: 14px;
margin-top: 20px; margin-top: 20px;
font-size: 14px;
} }
h6, .h6 { h6, .h6 {
font-size: 12px;
margin-top: 20px; margin-top: 20px;
font-size: 12px;
} }
p { p {
@ -366,8 +367,8 @@ p {
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top;
white-space: nowrap; white-space: nowrap;
vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -383,35 +384,35 @@ p {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #428bca;
background-color: #428bca; background-color: #428bca;
border: 1px solid #428bca;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff; color: #fff;
border: 1px solid #3071a9;
background-color: #3071a9; background-color: #3071a9;
border: 1px solid #3071a9;
} }
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 1px solid #5cb85c;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff; color: #fff;
border: 1px solid #449d44;
background-color: #449d44; background-color: #449d44;
border: 1px solid #449d44;
} }
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #d9534f;
background-color: #d9534f; background-color: #d9534f;
border: 1px solid #d9534f;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff; color: #fff;
border: 1px solid #c9302c;
background-color: #c9302c; background-color: #c9302c;
border: 1px solid #c9302c;
} }
.btn-outlined { .btn-outlined {
@ -457,9 +458,9 @@ input[type="button"] {
} }
.btn .badge { .btn .badge {
font-size: 12px;
margin: -2px -4px -2px 4px; margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15); font-size: 12px;
background-color: rgba(0, 0, 0, .15);
} }
.btn .badge-inverted, .btn .badge-inverted,
@ -491,8 +492,8 @@ input[type="button"] {
height: 44px; height: 44px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
border-bottom: 1px solid #dddddd;
background-color: white; background-color: white;
border-bottom: 1px solid #ddd;
} }
.bar-header-secondary { .bar-header-secondary {
@ -514,8 +515,8 @@ input[type="button"] {
.bar-footer, .bar-footer,
.bar-footer-secondary, .bar-footer-secondary,
.bar-footer-secondary-tab { .bar-footer-secondary-tab {
border-top: 1px solid #ddd;
border-bottom: 0; border-bottom: 0;
border-top: 1px solid #dddddd;
} }
.bar-nav { .bar-nav {
@ -541,22 +542,22 @@ input[type="button"] {
} }
.bar-tab { .bar-tab {
display: table;
bottom: 0; bottom: 0;
display: table;
width: 100%; width: 100%;
height: 50px; height: 50px;
padding: 0; padding: 0;
border-top: 1px solid #dddddd;
border-bottom: 0;
table-layout: fixed; table-layout: fixed;
border-top: 1px solid #ddd;
border-bottom: 0;
} }
.bar-tab .tab-item { .bar-tab .tab-item {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
height: 50px; height: 50px;
vertical-align: middle;
color: #929292; color: #929292;
text-align: center; text-align: center;
vertical-align: middle;
} }
.bar-tab .tab-item.active, .bar-tab .tab-item:active { .bar-tab .tab-item.active, .bar-tab .tab-item:active {
color: #428bca; color: #428bca;
@ -592,8 +593,8 @@ input[type="button"] {
top: 0; top: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
color: #428bca;
line-height: 44px; line-height: 44px;
color: #428bca;
border: 0; border: 0;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
@ -655,7 +656,7 @@ input[type="button"] {
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
color: #333; color: #333;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, .15);
border-radius: 100px; border-radius: 100px;
} }
.badge.badge-inverted { .badge.badge-inverted {
@ -688,10 +689,10 @@ input[type="button"] {
} }
.card { .card {
overflow: hidden;
margin: 10px; margin: 10px;
overflow: hidden;
background-color: white; background-color: white;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 6px; border-radius: 6px;
} }
@ -702,8 +703,8 @@ input[type="button"] {
} }
.card .table-view .table-view-divider:first-child { .card .table-view .table-view-divider:first-child {
top: 0; top: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px;
} }
.card .table-view .table-view-divider:last-child { .card .table-view .table-view-divider:last-child {
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
@ -720,15 +721,15 @@ input[type="button"] {
margin-bottom: 15px; margin-bottom: 15px;
list-style: none; list-style: none;
background-color: #fff; background-color: #fff;
border-top: 1px solid #dddddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.table-view-cell { .table-view-cell {
position: relative; position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px; padding: 11px 65px 11px 15px;
border-bottom: 1px solid #dddddd; overflow: hidden;
border-bottom: 1px solid #ddd;
} }
.table-view-cell:last-child { .table-view-cell:last-child {
border-bottom: 0; border-bottom: 0;
@ -736,9 +737,9 @@ input[type="button"] {
.table-view-cell > a:not(.btn) { .table-view-cell > a:not(.btn) {
position: relative; position: relative;
display: block; display: block;
overflow: hidden;
padding: inherit; padding: inherit;
margin: -11px -65px -11px -15px; margin: -11px -65px -11px -15px;
overflow: hidden;
color: inherit; color: inherit;
} }
.table-view-cell > a:not(.btn):active { .table-view-cell > a:not(.btn):active {
@ -754,11 +755,11 @@ input[type="button"] {
padding-left: 15px; padding-left: 15px;
margin-top: -1px; margin-top: -1px;
margin-left: 0; margin-left: 0;
color: #999;
font-weight: 500; font-weight: 500;
border-top: 1px solid #dddddd; color: #999;
border-bottom: 1px solid #dddddd;
background-color: #fafafa; background-color: #fafafa;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
} }
.table-view .media, .table-view .media,
@ -844,21 +845,21 @@ input[type="tel"],
input[type="color"] { input[type="color"] {
width: 100%; width: 100%;
height: 35px; height: 35px;
-webkit-appearance: none;
padding: 0 15px; padding: 0 15px;
margin-bottom: 15px; margin-bottom: 15px;
line-height: 21px; line-height: 21px;
background-color: #fff; background-color: #fff;
border: 1px solid #dddddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
-webkit-appearance: none;
} }
input[type="search"] { input[type="search"] {
box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
box-sizing: border-box;
} }
input[type="search"]:focus { input[type="search"]:focus {
@ -873,8 +874,8 @@ select {
height: auto; height: auto;
font-size: 14px; font-size: 14px;
background-color: #f8f8f8; background-color: #f8f8f8;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
} }
.input-group { .input-group {
@ -886,8 +887,8 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-top: 0; border-top: 0;
border-left: 0;
border-right: 0; border-right: 0;
border-left: 0;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -895,7 +896,7 @@ select {
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
} }
.input-row label { .input-row label {
@ -926,15 +927,15 @@ select {
} }
.segmented-control .control-item { .segmented-control .control-item {
display: table-cell; display: table-cell;
overflow: hidden;
width: 1%; width: 1%;
padding-top: 6px; padding-top: 6px;
padding-bottom: 7px; padding-bottom: 7px;
overflow: hidden;
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
.segmented-control .control-item:first-child { .segmented-control .control-item:first-child {
@ -1009,15 +1010,15 @@ select {
margin-left: -140px; margin-left: -140px;
background-color: white; background-color: white;
border-radius: 6px; border-radius: 6px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
opacity: 0; opacity: 0;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -webkit-transition: all .25s linear;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -moz-transition: all .25s linear;
transition: all .25s linear;
-webkit-transform: translate3d(0, -15px, 0); -webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
} }
.popover:before { .popover:before {
position: absolute; position: absolute;
@ -1026,10 +1027,10 @@ select {
width: 0; width: 0;
height: 0; height: 0;
margin-left: -15px; margin-left: -15px;
content: '';
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-bottom: 15px solid white; border-bottom: 15px solid white;
border-left: 15px solid transparent; border-left: 15px solid transparent;
content: '';
} }
.popover.visible { .popover.visible {
opacity: 1; opacity: 1;
@ -1048,7 +1049,7 @@ select {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 15; z-index: 15;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, .3);
} }
.popover .btn-block { .popover .btn-block {
@ -1059,9 +1060,9 @@ select {
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #ddd;
border-top-right-radius: 12px;
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -1070,22 +1071,22 @@ select {
max-height: 300px; max-height: 300px;
margin-bottom: 0; margin-bottom: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff; background-color: #fff;
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
border-radius: 6px; border-radius: 6px;
-webkit-overflow-scrolling: touch;
} }
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
opacity: 0;
z-index: 11; z-index: 11;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s; -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s; -moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s; transition: transform .25s, opacity 1ms .25s;
@ -1094,8 +1095,8 @@ select {
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.modal.active { .modal.active {
opacity: 1;
height: 100%; height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s; -webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s; -moz-transition: -moz-transform .25s;
transition: transform .25s; transition: transform .25s;
@ -1122,26 +1123,26 @@ select {
} }
.slider .slide-group .slide { .slider .slide-group .slide {
display: inline-block; display: inline-block;
vertical-align: top;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
vertical-align: top;
} }
.toggle { .toggle {
display: block;
position: relative; position: relative;
display: block;
width: 74px; width: 74px;
height: 30px; height: 30px;
background-color: #fff; background-color: #fff;
border: 2px solid #ddd; border: 2px solid #ddd;
border-radius: 20px; border-radius: 20px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: background-color, border; -webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border; -moz-transition-property: background-color, border;
transition-property: background-color, border; transition-property: background-color, border;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
position: absolute; position: absolute;
@ -1153,25 +1154,25 @@ select {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 100px; border-radius: 100px;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width; -moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width; transition-property: transform, border, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.toggle:before { .toggle:before {
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 11px; right: 11px;
color: #999;
font-size: 13px; font-size: 13px;
color: #999;
text-transform: uppercase; text-transform: uppercase;
content: "Off"; content: "Off";
} }
.toggle.active { .toggle.active {
border: 2px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
border: 2px solid #5cb85c;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #5cb85c; border-color: #5cb85c;
@ -1225,15 +1226,16 @@ select {
position: absolute; position: absolute;
top: 50%; top: 50%;
display: inline-block; display: inline-block;
color: #bbb;
font-family: Ratchicons; font-family: Ratchicons;
font-size: inherit; font-size: inherit;
text-decoration: none;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; color: #bbb;
text-decoration: none;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
} }
.navigate-left:after, .navigate-left:after,
@ -1250,18 +1252,20 @@ select {
@font-face { @font-face {
font-family: Ratchicons; font-family: Ratchicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/ratchicons.eot"); src: url("../fonts/ratchicons.eot");
src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg"); src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
font-weight: normal;
font-style: normal;
} }
.icon { .icon {
display: inline-block; display: inline-block;
font-family: Ratchicons; font-family: Ratchicons;
font-size: 24px; font-size: 24px;
text-decoration: none;
line-height: 1; line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

2
docs/dist/css/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save