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

fixing up toggles and cards

pull/245/head
connors 11 years ago
parent
f1cb609ce5
commit
bb13849a6d
8 changed files with 166 additions and 92 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. 2
      _includes/header.html
  2. 12
      dist/ios-theme.css
  3. 47
      dist/ratchet.css
  4. 73
      index.html
  5. 1
      lib/sass/ratchet.scss
  6. 26
      lib/sass/table-views.scss
  7. 14
      lib/sass/theme-ios.scss
  8. 23
      lib/sass/toggles.scss

2
_includes/header.html
Unescape View File

@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="dist/ratchet.css"> <link rel="stylesheet" href="dist/ratchet.css">
<link rel="stylesheet" href="dist/ios-theme.css"> <!-- <link rel="stylesheet" href="dist/ios-theme.css"> -->
<link rel="stylesheet" href="assets/css/docs.css"> <link rel="stylesheet" href="assets/css/docs.css">
<link rel="stylesheet" href="assets/css/pygments.css"> <link rel="stylesheet" href="assets/css/pygments.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

12
dist/ios-theme.css vendored
Unescape View File

@ -59,6 +59,10 @@
border-radius: 12px; border-radius: 12px;
} }
.card .table-view li:last-child {
background-image: none;
}
select, select,
textarea, textarea,
input[type="text"], input[type="text"],
@ -269,6 +273,7 @@ textarea,
} }
.toggle { .toggle {
width: 47px;
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;
@ -284,6 +289,9 @@ textarea,
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width;
} }
.toggle:before {
display: none;
}
.toggle:active .toggle-handle { .toggle:active .toggle-handle {
width: 35px; width: 35px;
} }
@ -293,6 +301,10 @@ textarea,
-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;
} }
.toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0);
}
.toggle.active:active .toggle-handle, .toggle.active:active .toggle-handle,
.toggle.active .toggle-handle:active { .toggle.active .toggle-handle:active {
-webkit-transform: translate3d(10px, 0, 0) !important; -webkit-transform: translate3d(10px, 0, 0) !important;

47
dist/ratchet.css vendored
Unescape View File

@ -396,6 +396,15 @@ strong {
right: 15px; right: 15px;
} }
.card {
width: auto;
overflow: hidden;
margin: 10px;
background-color: #fff;
border: 1px solid #dddddd;
border-radius: 6px;
}
.table-view { .table-view {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -423,16 +432,6 @@ strong {
.table-view .table-view-cell p { .table-view .table-view-cell p {
margin: 0; 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 { .table-view .table-view-divider {
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
@ -491,6 +490,10 @@ strong {
z-index: 1; z-index: 1;
} }
.card .table-view li:last-child {
border: 0;
}
.popover .table-view { .popover .table-view {
width: auto; width: auto;
max-height: 300px; max-height: 300px;
@ -991,8 +994,9 @@ input[type="button"] {
} }
.toggle { .toggle {
display: block;
position: relative; position: relative;
width: 47px; width: 74px;
height: 30px; height: 30px;
background-color: #fff; background-color: #fff;
border: 2px solid #ddd; border: 2px solid #ddd;
@ -1017,14 +1021,31 @@ input[type="button"] {
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
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 { .toggle.active {
border: 2px solid #5cb85c; border: 2px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #5cb85c; border-color: #5cb85c;
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(44px, 0, 0);
transform: translate3d(17px, 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 { .content.fade {

73
index.html
Unescape View File

@ -515,21 +515,24 @@ layout: default
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
Item 1 Item 1
<div class="toggle"> <label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 2 Item 2
<div class="toggle active"> <label class="toggle active">
<input type="checkbox" checked>
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 3 Item 3
<div class="toggle"> <label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
</li> </li>
</ul> </ul>
</div> </div>
@ -538,21 +541,24 @@ layout: default
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
Item 1 Item 1
<div class="toggle"> <label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 2 Item 2
<div class="toggle active"> <label class="toggle active">
<input type="checkbox" checked>
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 3 Item 3
<div class="toggle"> <label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
</li> </li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -560,10 +566,11 @@ layout: default
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">Inset table views</h3> <h3 class="component-title">Carded table views</h3>
<div class="component-example"> <div class="component-example">
<ul class="table-view inset"> <div class="card">
<ul class="table-view">
<li class="table-view-cell">Item 1</li> <li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-cell table-view-divider">Divider</li> <li class="table-view-cell table-view-divider">Divider</li>
@ -571,15 +578,18 @@ layout: default
<li class="table-view-cell">Item 4</li> <li class="table-view-cell">Item 4</li>
</ul> </ul>
</div> </div>
</div>
{% highlight html %} {% highlight html %}
<ul class="table-view inset"> <div class="card">
<ul class="table-view">
<li class="table-view-cell">Item 1</li> <li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-cell table-view-divider">Divider</li> <li class="table-view-cell table-view-divider">Divider</li>
<li class="table-view-cell">Item 3</li> <li class="table-view-cell">Item 3</li>
<li class="table-view-cell">Item 4</li> <li class="table-view-cell">Item 4</li>
</ul> </ul>
</div>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -677,7 +687,9 @@ layout: default
<a href="#item3mobile">Thing three</a> <a href="#item3mobile">Thing three</a>
</li> </li>
</ul> </ul>
<ul class="inset table-view">
<div class="card">
<ul class="table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected"> <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1 Item 1
</li> </li>
@ -689,6 +701,7 @@ layout: default
</li> </li>
</ul> </ul>
</div> </div>
</div>
{% highlight html %} {% highlight html %}
<ul class="segmented-controller"> <ul class="segmented-controller">
@ -702,7 +715,8 @@ layout: default
<a href="#item3mobile">Thing three</a> <a href="#item3mobile">Thing three</a>
</li> </li>
</ul> </ul>
<ul class="inset table-view"> <div class="card">
<ul class="table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected"> <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1 Item 1
</li> </li>
@ -712,7 +726,8 @@ layout: default
<li id="item3mobile" class="table-view-cell segmented-controller-item"> <li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3 Item 3
</li> </li>
</ul> </ul>
</div>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -837,21 +852,25 @@ layout: default
<p class="component-description">Toggles can be used by sliding or tapping the control.</p> <p class="component-description">Toggles can be used by sliding or tapping the control.</p>
<div class="component-example"> <div class="component-example">
<div class="toggle active"> <label class="toggle active">
<input type="checkbox" checked>
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
<div class="toggle"> <label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="toggle active"> <label class="toggle active">
<input type="checkbox">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
<div class="toggle"> <label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </label>
{% endhighlight %} {% endhighlight %}
<p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p> <p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>

1
lib/sass/ratchet.scss
Unescape View File

@ -11,6 +11,7 @@
// Components // Components
@import "bars.scss"; @import "bars.scss";
@import "cards.scss";
@import "table-views.scss"; @import "table-views.scss";
@import "forms.scss"; @import "forms.scss";
@import "buttons.scss"; @import "buttons.scss";

26
lib/sass/table-views.scss
Unescape View File

@ -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 // Table view dividers
// -------------------------------------------------- // --------------------------------------------------
@ -136,6 +118,14 @@
} }
} }
// Table views in cards
// --------------------------------------------------
.card .table-view li:last-child {
border: 0;
}
// Table views in popovers // Table views in popovers
// -------------------------------------------------- // --------------------------------------------------

14
lib/sass/theme-ios.scss
Unescape View File

@ -100,6 +100,10 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
border-radius: 12px; border-radius: 12px;
} }
.card .table-view li:last-child {
background-image: none;
}
// Forms // Forms
// -------------------------------------------------- // --------------------------------------------------
@ -383,6 +387,7 @@ textarea,
// Toggles styles // Toggles styles
// -------------------------------------------------- // --------------------------------------------------
.toggle { .toggle {
width: 47px;
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
@include box-shadow(inset 0 0 0 0 #e1e1e1); @include box-shadow(inset 0 0 0 0 #e1e1e1);
@include transition-property(box-shadow, border); @include transition-property(box-shadow, border);
@ -394,6 +399,9 @@ textarea,
@include box-shadow(0 3px 3px rgba(0,0,0,.08)); @include box-shadow(0 3px 3px rgba(0,0,0,.08));
@include transition-property(-webkit-transform, border, width); @include transition-property(-webkit-transform, border, width);
} }
&:before {
display: none;
}
&:active .toggle-handle { &:active .toggle-handle {
width: 35px; width: 35px;
} }
@ -403,7 +411,11 @@ textarea,
background-color: transparent; background-color: transparent;
@include box-shadow(inset 0 0 0 13px $positive-color); @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, &:active .toggle-handle,
.toggle-handle:active { .toggle-handle:active {
@include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.

23
lib/sass/toggles.scss
Unescape View File

@ -3,8 +3,9 @@
// -------------------------------------------------- // --------------------------------------------------
.toggle { .toggle {
display: block;
position: relative; position: relative;
width: 47px; width: 74px;
height: 30px; height: 30px;
background-color: #fff; background-color: #fff;
border: 2px solid #ddd; border: 2px solid #ddd;
@ -26,6 +27,14 @@
@include transition-property(-webkit-transform, border, width); @include transition-property(-webkit-transform, border, width);
@include transition-duration(.2s); @include transition-duration(.2s);
} }
&:before {
position: absolute;
top: 3px;
right: 11px;
color: #999;
text-transform: uppercase;
content: "Off";
}
// Active state for toggle // Active state for toggle
&.active { &.active {
@ -34,7 +43,17 @@
.toggle-handle { .toggle-handle {
border-color: $positive-color; 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;
} }
} }

Write Preview
Loading…
Cancel
Save