Browse Source

seg controls

pull/253/head
connors 11 years ago
parent
commit
a643b15f5d
  1. 3
      _includes/header.html
  2. 2
      components.html
  3. 37
      dist/android-theme.css
  4. 38
      docs-assets/css/docs.css
  5. 44
      lib/sass/theme-android.scss

3
_includes/header.html

@ -25,6 +25,9 @@
<script type="text/javascript" src="//use.typekit.net/asj6ttm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- Roboto -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);

2
components.html

@ -940,7 +940,7 @@ document
{% highlight html %}
<header class="bar bar-nav">
<a href="#myPopover">
<h1 class="title">Popover title</h3>
<h1 class="title">Tap this title</h3>
</a>
</header>
{% endhighlight %}

37
dist/android-theme.css vendored

@ -8,7 +8,6 @@
* =====================================================
*/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
@ -66,7 +65,7 @@ a {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 50px;
line-height: 49px;
text-align: left;
}
@ -113,7 +112,7 @@ a {
}
.table-view .btn {
margin-top: -3px;
margin-top: -4px;
}
select,
@ -197,7 +196,7 @@ textarea,
padding: 0;
color: #33b5e5;
font-size: 18px;
line-height: 50px;
line-height: 49px;
}
.bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb;
@ -292,7 +291,11 @@ textarea,
font-size: 18px;
}
.bar-nav .btn {
margin-top: 7px;
}
.bar-nav .btn-link {
margin-top: 0;
color: #33b5e5;
}
.bar-nav .btn-link:active {
@ -343,20 +346,30 @@ textarea,
}
.segmented-control {
background-color: transparent;
border: 1px solid #33b5e5;
border-radius: 3px;
background-color: #cecece;
border: 0;
font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.segmented-control li {
border-left: 1px solid #33b5e5;
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.segmented-control li > a {
padding-top: 9px;
padding-top: 10px;
padding-bottom: 10px;
color: #33b5e5;
color: #222222;
}
.segmented-control li.active {
background-color: #33b5e5;
.segmented-control li:first-child {
border-left-width: 0;
}
.segmented-control li:active, .segmented-control li.active {
background-color: #999999;
}
.bar .segmented-control {
top: 7px;
}
.popover {

38
docs-assets/css/docs.css

@ -1184,9 +1184,6 @@ hr {
background-color: #efeff4;
}
.platform-android {
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
}
.platform-android body {
font-family: "Roboto", sans-serif;
font-size: 18px;
@ -1236,7 +1233,7 @@ hr {
position: static;
padding-left: 15px;
font-size: 18px;
line-height: 50px;
line-height: 49px;
text-align: left;
}
.platform-android .popover .bar {
@ -1278,7 +1275,7 @@ hr {
border-radius: 12px;
}
.platform-android .table-view .btn {
margin-top: -3px;
margin-top: -4px;
}
.platform-android select,
.platform-android textarea,
@ -1352,7 +1349,7 @@ hr {
padding: 0;
color: #33b5e5;
font-size: 18px;
line-height: 50px;
line-height: 49px;
}
.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
color: #1a9bcb;
@ -1440,7 +1437,11 @@ hr {
padding: 15px 0;
font-size: 18px;
}
.platform-android .bar-nav .btn {
margin-top: 7px;
}
.platform-android .bar-nav .btn-link {
margin-top: 0;
color: #33b5e5;
}
.platform-android .bar-nav .btn-link:active {
@ -1485,20 +1486,29 @@ hr {
color: #fff;
}
.platform-android .segmented-control {
background-color: transparent;
border: 1px solid #33b5e5;
border-radius: 3px;
background-color: #cecece;
border: 0;
font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.platform-android .segmented-control li {
border-left: 1px solid #33b5e5;
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.platform-android .segmented-control li > a {
padding-top: 9px;
padding-top: 10px;
padding-bottom: 10px;
color: #33b5e5;
color: #222222;
}
.platform-android .segmented-control li.active {
background-color: #33b5e5;
.platform-android .segmented-control li:first-child {
border-left-width: 0;
}
.platform-android .segmented-control li:active, .platform-android .segmented-control li.active {
background-color: #999999;
}
.platform-android .bar .segmented-control {
top: 7px;
}
.platform-android .popover {
top: 100px;

44
lib/sass/theme-android.scss

@ -6,9 +6,6 @@
//
// --------------------------------------------------
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
// Variables
// --------------------------------------------------
@ -110,7 +107,7 @@ a {
position: static;
padding-left: 15px;
font-size: $font-size-default;
line-height: $bar-base-height;
line-height: 49px;
text-align: left;
}
// `bar-nav` in popovers
@ -276,7 +273,7 @@ textarea,
padding: 0;
color: $primary-color;
font-size: $font-size-default;
line-height: $bar-base-height;
line-height: 49px;
&:active,
&.active {
@ -402,7 +399,11 @@ textarea,
// --------------------------------------------------
.bar-nav {
.btn {
margin-top: 7px;
}
.btn-link {
margin-top: 0;
color: $primary-color;
&:active {
@ -483,23 +484,42 @@ textarea,
// --------------------------------------------------
.segmented-control {
background-color: transparent;
border: 1px solid $primary-color;
border-radius: 3px;
background-color: #cecece;
border: 0;
font-size: 14px;
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.25);
li {
border-left: 1px solid $primary-color;
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
// Link that fills each section
> a {
padding-top: 9px;
padding-top: 10px;
padding-bottom: 10px;
color: $primary-color;
color: $text-color;
}
// Remove border-left and shadow from first section
&:first-child {
border-left-width: 0;
}
&:active,
&.active {
background-color: $primary-color;
background-color: $default-color;
}
}
}
// Segmented controller in all bars
// --------------------------------------------------
// Remove standard segmented bottom margin
.bar .segmented-control {
top: 7px;
}

Loading…
Cancel
Save