diff --git a/dist/ios-theme.css b/dist/ios-theme.css index abbb962..695f365 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -186,10 +186,17 @@ p { background-image: none; } +.table-view { + border-top: 0; + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-position: 0 100%, 0 0%; + background-repeat: no-repeat; +} .table-view .table-view-cell { border-bottom: 0; background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; + background-position: 0 100%; background-repeat: no-repeat; } .table-view .table-view-cell:last-child { @@ -245,6 +252,10 @@ textarea, .input-group { padding: 0; + border: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-position: 0 100%, 0 0%; + background-repeat: no-repeat; } .input-group input { diff --git a/dist/ratchet.css b/dist/ratchet.css index d008bd6..5b66cfe 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -672,15 +672,23 @@ input[type="button"] { color: inherit; } +.card .table-view { + margin: 0; + border-top: 0; + border-bottom: 0; +} + .card .table-view li:last-child { border: 0; } .table-view { padding: 0; - margin: 0; + margin: 0 0 20px 0; list-style: none; background-color: #fff; + border-top: 1px solid #dddddd; + border-bottom: 1px solid #dddddd; } .table-view .table-view-cell { position: relative; @@ -793,7 +801,7 @@ input[type="color"], .input-group { width: 100%; height: 35px; - padding: 0 10px; + padding: 0 15px; margin-bottom: 10px; line-height: 21px; background-color: #fff; diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 3aaf9ea..58fe018 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -952,10 +952,17 @@ hr { .platform-ios .card .table-view-cell:last-child { background-image: none; } +.platform-ios .table-view { + border-top: 0; + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-position: 0 100%, 0 0%; + background-repeat: no-repeat; +} .platform-ios .table-view .table-view-cell { border-bottom: 0; background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; + background-position: 0 100%; background-repeat: no-repeat; } .platform-ios .table-view .table-view-cell:last-child { @@ -1006,6 +1013,10 @@ hr { } .platform-ios .input-group { padding: 0; + border: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-position: 0 100%, 0 0%; + background-repeat: no-repeat; } .platform-ios .input-group input { border: 0; diff --git a/examples/app-default/choose-theater.html b/examples/app-default/choose-theater.html index 93055e2..fc1e323 100644 --- a/examples/app-default/choose-theater.html +++ b/examples/app-default/choose-theater.html @@ -3,48 +3,32 @@ Movie finder - + - - - - + - -
- + + Back + + Test +

Argo

- - - +
+
-
+
- -
  • +
    • +
    - - +
    +
    + + + diff --git a/lib/sass/cards.scss b/lib/sass/cards.scss index 88f1b79..2bafa28 100644 --- a/lib/sass/cards.scss +++ b/lib/sass/cards.scss @@ -20,7 +20,11 @@ // Cards with table-views // -------------------------------------------------- - +.card .table-view { + margin: 0; + border-top: 0; + border-bottom: 0; +} .card .table-view li:last-child { border: 0; } \ No newline at end of file diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index c67b7cb..7b41492 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -31,7 +31,7 @@ input[type="color"], .input-group { width: 100%; height: 35px; - padding: 0 10px; + padding: 0 15px; margin-bottom: 10px; line-height: $line-height-default; background-color: #fff; diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 0c72b3f..ac044f4 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -4,9 +4,11 @@ .table-view { padding: 0; - margin: 0; + margin: 0 0 20px 0; list-style: none; // Remove usual bullet styles from table view background-color: #fff; + border-top: $border-default; + border-bottom: $border-default; // Pad each table view item and add dividers .table-view-cell { diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 018860f..d32ba3c 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -287,9 +287,13 @@ p { // -------------------------------------------------- .table-view { + border-top: 0; + border-bottom: 0; + @include hairline(double, #c8c7cc, 0); // Double grey border. + .table-view-cell { border-bottom: 0; - @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. + @include hairline(single, #c8c7cc, 0); // Single grey border. // Remove the border from the last table view item &:last-child { @@ -327,7 +331,8 @@ input[type="tel"], input[type="color"], .input-group { height: 40px; - padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); + padding: 10px 15px; + border: 1px solid rgba(0, 0, 0, .2); } // Rounded search input @@ -351,6 +356,8 @@ textarea, // ------------------------------------------------------------------- .input-group { padding: 0; + border: 0; + @include hairline(double, #c8c7cc, 0); // Double grey border. } .input-group input { border: 0;