diff --git a/_includes/header.html b/_includes/header.html index 9c2b79f..0ae8145 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/dist/ios-theme.css b/dist/ios-theme.css index 3c21785..0c54f6d 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -59,6 +59,10 @@ border-radius: 12px; } +.card .table-view li:last-child { + background-image: none; +} + select, textarea, input[type="text"], @@ -269,6 +273,7 @@ textarea, } .toggle { + width: 47px; border: 2px solid #e6e6e6; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1; @@ -284,6 +289,9 @@ textarea, -webkit-transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width; } +.toggle:before { + display: none; +} .toggle:active .toggle-handle { width: 35px; } @@ -293,6 +301,10 @@ textarea, -webkit-box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964; } +.toggle.active .toggle-handle { + -webkit-transform: translate3d(17px, 0, 0); + transform: translate3d(17px, 0, 0); +} .toggle.active:active .toggle-handle, .toggle.active .toggle-handle:active { -webkit-transform: translate3d(10px, 0, 0) !important; diff --git a/dist/ratchet.css b/dist/ratchet.css index c3e74b4..a91ffe7 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -396,6 +396,15 @@ strong { right: 15px; } +.card { + width: auto; + overflow: hidden; + margin: 10px; + background-color: #fff; + border: 1px solid #dddddd; + border-radius: 6px; +} + .table-view { padding: 0; margin: 0; @@ -423,16 +432,6 @@ strong { .table-view .table-view-cell p { margin: 0; } -.table-view.inset { - width: auto; - margin-right: 10px; - margin-left: 10px; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 6px; -} -.table-view.inset li:last-child { - background-image: none; -} .table-view .table-view-divider { padding-top: 6px; padding-bottom: 6px; @@ -491,6 +490,10 @@ strong { z-index: 1; } +.card .table-view li:last-child { + border: 0; +} + .popover .table-view { width: auto; max-height: 300px; @@ -991,8 +994,9 @@ input[type="button"] { } .toggle { + display: block; position: relative; - width: 47px; + width: 74px; height: 30px; background-color: #fff; border: 2px solid #ddd; @@ -1017,14 +1021,31 @@ input[type="button"] { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } +.toggle:before { + position: absolute; + top: 3px; + right: 11px; + color: #999; + text-transform: uppercase; + content: "Off"; +} .toggle.active { border: 2px solid #5cb85c; background-color: #5cb85c; } .toggle.active .toggle-handle { border-color: #5cb85c; - -webkit-transform: translate3d(17px, 0, 0); - transform: translate3d(17px, 0, 0); + -webkit-transform: translate3d(44px, 0, 0); + transform: translate3d(44px, 0, 0); +} +.toggle.active:before { + right: auto; + left: 15px; + color: #fff; + content: "On"; +} +.toggle input[type="checkbox"] { + display: none; } .content.fade { diff --git a/index.html b/index.html index fd7df26..a1cbb39 100644 --- a/index.html +++ b/index.html @@ -515,21 +515,24 @@ layout: default @@ -538,21 +541,24 @@ layout: default {% endhighlight %} @@ -560,26 +566,30 @@ layout: default
-

Inset table views

+

Carded table views

- +
+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Divider
    • +
  • Item 3
    • +
  • Item 4
    • +
+
{% highlight html %} - +
+ +
{% endhighlight %}
@@ -677,17 +687,20 @@ layout: default Thing three - + +
+ +
{% highlight html %} @@ -702,17 +715,19 @@ layout: default Thing three - +
+ +
{% endhighlight %} @@ -837,21 +852,25 @@ layout: default

Toggles can be used by sliding or tapping the control.

-
+
-
+ +
+
{% highlight html %} -
+
-
+ +
+ {% endhighlight %}

Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.

diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss index a0dffcc..9836b4f 100644 --- a/lib/sass/ratchet.scss +++ b/lib/sass/ratchet.scss @@ -11,6 +11,7 @@ // Components @import "bars.scss"; +@import "cards.scss"; @import "table-views.scss"; @import "forms.scss"; @import "buttons.scss"; diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index d2563d8..66fc21b 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -35,24 +35,6 @@ } } - - // Inset table views (Will be deprecated and changed into `.card` component) - // -------------------------------------------------- - - &.inset { - width: auto; - margin-right: 10px; - margin-left: 10px; - border: 1px solid rgba(0, 0, 0, .15); - border-radius: $border-radius; - - // Remove border from last standard list items to avoid double border at top/bottom of table views - li:last-child { - background-image: none; - } - } - - // Table view dividers // -------------------------------------------------- @@ -136,6 +118,14 @@ } } +// Table views in cards +// -------------------------------------------------- + +.card .table-view li:last-child { + border: 0; +} + + // Table views in popovers // -------------------------------------------------- diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 0fd12ba..db9883c 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -100,6 +100,10 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods border-radius: 12px; } +.card .table-view li:last-child { + background-image: none; +} + // Forms // -------------------------------------------------- @@ -383,6 +387,7 @@ textarea, // Toggles styles // -------------------------------------------------- .toggle { + width: 47px; border: 2px solid #e6e6e6; @include box-shadow(inset 0 0 0 0 #e1e1e1); @include transition-property(box-shadow, border); @@ -394,6 +399,9 @@ textarea, @include box-shadow(0 3px 3px rgba(0,0,0,.08)); @include transition-property(-webkit-transform, border, width); } + &:before { + display: none; + } &:active .toggle-handle { width: 35px; } @@ -403,7 +411,11 @@ textarea, background-color: transparent; @include box-shadow(inset 0 0 0 13px $positive-color); - // Handle when the handle and the container is active + .toggle-handle { + @include transform(translate3d(17px,0,0)); + } + + // When the handle and the container is active &:active .toggle-handle, .toggle-handle:active { @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss index 6427cc8..165e34a 100644 --- a/lib/sass/toggles.scss +++ b/lib/sass/toggles.scss @@ -3,8 +3,9 @@ // -------------------------------------------------- .toggle { + display: block; position: relative; - width: 47px; + width: 74px; height: 30px; background-color: #fff; border: 2px solid #ddd; @@ -26,6 +27,14 @@ @include transition-property(-webkit-transform, border, width); @include transition-duration(.2s); } + &:before { + position: absolute; + top: 3px; + right: 11px; + color: #999; + text-transform: uppercase; + content: "Off"; + } // Active state for toggle &.active { @@ -34,7 +43,17 @@ .toggle-handle { border-color: $positive-color; - @include transform(translate3d(17px,0,0)); + @include transform(translate3d(44px,0,0)); } + &:before { + right: auto; + left: 15px; + color: #fff; + content: "On"; + } + } + // Hide the checkbox + input[type="checkbox"] { + display: none; } }