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

seg controls

pull/253/head
connors 11 years ago
parent
9c0fcc5f28
commit
a643b15f5d
5 changed files with 85 additions and 39 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. 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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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,26 +484,45 @@ 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;
}
//
// Popovers
// --------------------------------------------------

Write Preview
Loading…
Cancel
Save