fixing up toggles and cards
This commit is contained in:
Родитель
f1cb609ce5
Коммит
bb13849a6d
|
@ -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]-->
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
133
index.html
|
@ -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>
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
// Components
|
||||
@import "bars.scss";
|
||||
@import "cards.scss";
|
||||
@import "table-views.scss";
|
||||
@import "forms.scss";
|
||||
@import "buttons.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
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче