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
-
Item 1
-
+
-
Item 2
-
+
-
Item 3
-
+
@@ -538,21 +541,24 @@ layout: default
-
Item 1
-
+
-
Item 2
-
+
-
Item 3
-
+
{% endhighlight %}
@@ -560,26 +566,30 @@ layout: default
- Inset table views
+ Carded table views
-
- - Item 1
- - Item 2
- - Divider
- - Item 3
- - Item 4
-
+
+
+ - Item 1
+ - Item 2
+ - Divider
+ - Item 3
+ - Item 4
+
+
{% highlight html %}
-
- - Item 1
- - Item 2
- - Divider
- - Item 3
- - Item 4
-
+
+
+ - Item 1
+ - Item 2
+ - Divider
+ - Item 3
+ - Item 4
+
+
{% endhighlight %}
@@ -677,17 +687,20 @@ layout: default
Thing three
-
- -
- Item 1
-
- -
- Item 2
-
- -
- Item 3
-
-
+
+
+
+ -
+ Item 1
+
+ -
+ Item 2
+
+ -
+ Item 3
+
+
+
{% highlight html %}
@@ -702,17 +715,19 @@ layout: default
Thing three
-
- -
- Item 1
-
- -
- Item 2
-
- -
- Item 3
-
-
+
+
+ -
+ Item 1
+
+ -
+ Item 2
+
+ -
+ Item 3
+
+
+
{% 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;
+ }
}