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
Split 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. 133
      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-status-bar-style" content="black">
<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/pygments.css">
<!--[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;
}
.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;

47
dist/ratchet.css vendored
Unescape View File

@ -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 {

133
index.html
Unescape View File

@ -515,21 +515,24 @@ layout: default
<ul class="table-view">
<li class="table-view-cell">
Item 1
<div class="toggle">
<label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div>
</div>
</label>
</li>
<li class="table-view-cell">
Item 2
<div class="toggle active">
<label class="toggle active">
<input type="checkbox" checked>
<div class="toggle-handle"></div>
</div>
</label>
</li>
<li class="table-view-cell">
Item 3
<div class="toggle">
<label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div>
</div>
</label>
</li>
</ul>
</div>
@ -538,21 +541,24 @@ layout: default
<ul class="table-view">
<li class="table-view-cell">
Item 1
<div class="toggle">
<label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div>
</div>
</label>
</li>
<li class="table-view-cell">
Item 2
<div class="toggle active">
<label class="toggle active">
<input type="checkbox" checked>
<div class="toggle-handle"></div>
</div>
</label>
</li>
<li class="table-view-cell">
Item 3
<div class="toggle">
<label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div>
</div>
</label>
</li>
</ul>
{% endhighlight %}
@ -560,26 +566,30 @@ layout: default
</article>
<article class="component">
<h3 class="component-title">Inset table views</h3>
<h3 class="component-title">Carded table views</h3>
<div class="component-example">
<ul class="table-view inset">
<li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</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 4</li>
</ul>
<div class="card">
<ul class="table-view">
<li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</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 4</li>
</ul>
</div>
</div>
{% highlight html %}
<ul class="table-view inset">
<li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</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 4</li>
</ul>
<div class="card">
<ul class="table-view">
<li class="table-view-cell">Item 1</li>
<li class="table-view-cell">Item 2</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 4</li>
</ul>
</div>
{% endhighlight %}
</article>
@ -677,17 +687,20 @@ layout: default
<a href="#item3mobile">Thing three</a>
</li>
</ul>
<ul class="inset table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1
</li>
<li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3
</li>
</ul>
<div class="card">
<ul class="table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1
</li>
<li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3
</li>
</ul>
</div>
</div>
{% highlight html %}
@ -702,17 +715,19 @@ layout: default
<a href="#item3mobile">Thing three</a>
</li>
</ul>
<ul class="inset table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1
</li>
<li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3
</li>
</ul>
<div class="card">
<ul class="table-view">
<li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1
</li>
<li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2
</li>
<li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3
</li>
</ul>
</div>
{% endhighlight %}
</article>
@ -837,21 +852,25 @@ layout: default
<p class="component-description">Toggles can be used by sliding or tapping the control.</p>
<div class="component-example">
<div class="toggle active">
<label class="toggle active">
<input type="checkbox" checked>
<div class="toggle-handle"></div>
</div>
<div class="toggle">
</label>
<label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div>
</div>
</label>
</div>
{% highlight html %}
<div class="toggle active">
<label class="toggle active">
<input type="checkbox">
<div class="toggle-handle"></div>
</div>
<div class="toggle">
</label>
<label class="toggle">
<input type="checkbox">
<div class="toggle-handle"></div>
</div>
</label>
{% 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>

1
lib/sass/ratchet.scss
Unescape View File

@ -11,6 +11,7 @@
// Components
@import "bars.scss";
@import "cards.scss";
@import "table-views.scss";
@import "forms.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
// --------------------------------------------------
@ -136,6 +118,14 @@
}
}
// Table views in cards
// --------------------------------------------------
.card .table-view li:last-child {
border: 0;
}
// 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;
}
.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.

23
lib/sass/toggles.scss
Unescape View File

@ -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;
}
}

Write Preview
Loading…
Cancel
Save