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
Unified 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" src="//use.typekit.net/asj6ttm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</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> <script>
var _gaq = _gaq || []; var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']); _gaq.push(['_setAccount', 'UA-36050008-1']);

2
components.html
Unescape View File

@ -940,7 +940,7 @@ document
{% highlight html %} {% highlight html %}
<header class="bar bar-nav"> <header class="bar bar-nav">
<a href="#myPopover"> <a href="#myPopover">
<h1 class="title">Popover title</h3> <h1 class="title">Tap this title</h3>
</a> </a>
</header> </header>
{% endhighlight %} {% 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 { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 18px; font-size: 18px;
@ -66,7 +65,7 @@ a {
position: static; position: static;
padding-left: 15px; padding-left: 15px;
font-size: 18px; font-size: 18px;
line-height: 50px; line-height: 49px;
text-align: left; text-align: left;
} }
@ -113,7 +112,7 @@ a {
} }
.table-view .btn { .table-view .btn {
margin-top: -3px; margin-top: -4px;
} }
select, select,
@ -197,7 +196,7 @@ textarea,
padding: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 50px; line-height: 49px;
} }
.bar .btn-link:active, .bar .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
@ -292,7 +291,11 @@ textarea,
font-size: 18px; font-size: 18px;
} }
.bar-nav .btn {
margin-top: 7px;
}
.bar-nav .btn-link { .bar-nav .btn-link {
margin-top: 0;
color: #33b5e5; color: #33b5e5;
} }
.bar-nav .btn-link:active { .bar-nav .btn-link:active {
@ -343,20 +346,30 @@ textarea,
} }
.segmented-control { .segmented-control {
background-color: transparent; background-color: #cecece;
border: 1px solid #33b5e5; border: 0;
border-radius: 3px; font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
} }
.segmented-control li { .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 { .segmented-control li > a {
padding-top: 9px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #33b5e5; color: #222222;
} }
.segmented-control li.active { .segmented-control li:first-child {
background-color: #33b5e5; border-left-width: 0;
}
.segmented-control li:active, .segmented-control li.active {
background-color: #999999;
}
.bar .segmented-control {
top: 7px;
} }
.popover { .popover {

38
docs-assets/css/docs.css
Unescape View File

@ -1184,9 +1184,6 @@ hr {
background-color: #efeff4; background-color: #efeff4;
} }
.platform-android {
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
}
.platform-android body { .platform-android body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 18px; font-size: 18px;
@ -1236,7 +1233,7 @@ hr {
position: static; position: static;
padding-left: 15px; padding-left: 15px;
font-size: 18px; font-size: 18px;
line-height: 50px; line-height: 49px;
text-align: left; text-align: left;
} }
.platform-android .popover .bar { .platform-android .popover .bar {
@ -1278,7 +1275,7 @@ hr {
border-radius: 12px; border-radius: 12px;
} }
.platform-android .table-view .btn { .platform-android .table-view .btn {
margin-top: -3px; margin-top: -4px;
} }
.platform-android select, .platform-android select,
.platform-android textarea, .platform-android textarea,
@ -1352,7 +1349,7 @@ hr {
padding: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
font-size: 18px; font-size: 18px;
line-height: 50px; line-height: 49px;
} }
.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active { .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
@ -1440,7 +1437,11 @@ hr {
padding: 15px 0; padding: 15px 0;
font-size: 18px; font-size: 18px;
} }
.platform-android .bar-nav .btn {
margin-top: 7px;
}
.platform-android .bar-nav .btn-link { .platform-android .bar-nav .btn-link {
margin-top: 0;
color: #33b5e5; color: #33b5e5;
} }
.platform-android .bar-nav .btn-link:active { .platform-android .bar-nav .btn-link:active {
@ -1485,20 +1486,29 @@ hr {
color: #fff; color: #fff;
} }
.platform-android .segmented-control { .platform-android .segmented-control {
background-color: transparent; background-color: #cecece;
border: 1px solid #33b5e5; border: 0;
border-radius: 3px; font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
} }
.platform-android .segmented-control li { .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 { .platform-android .segmented-control li > a {
padding-top: 9px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: #33b5e5; color: #222222;
} }
.platform-android .segmented-control li.active { .platform-android .segmented-control li:first-child {
background-color: #33b5e5; 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 { .platform-android .popover {
top: 100px; 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 // Variables
// -------------------------------------------------- // --------------------------------------------------
@ -110,7 +107,7 @@ a {
position: static; position: static;
padding-left: 15px; padding-left: 15px;
font-size: $font-size-default; font-size: $font-size-default;
line-height: $bar-base-height; line-height: 49px;
text-align: left; text-align: left;
} }
// `bar-nav` in popovers // `bar-nav` in popovers
@ -276,7 +273,7 @@ textarea,
padding: 0; padding: 0;
color: $primary-color; color: $primary-color;
font-size: $font-size-default; font-size: $font-size-default;
line-height: $bar-base-height; line-height: 49px;
&:active, &:active,
&.active { &.active {
@ -402,7 +399,11 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
.bar-nav { .bar-nav {
.btn {
margin-top: 7px;
}
.btn-link { .btn-link {
margin-top: 0;
color: $primary-color; color: $primary-color;
&:active { &:active {
@ -483,26 +484,45 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
.segmented-control { .segmented-control {
background-color: transparent; background-color: #cecece;
border: 1px solid $primary-color; border: 0;
border-radius: 3px; font-size: 14px;
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.25);
li { 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 // Link that fills each section
> a { > a {
padding-top: 9px; padding-top: 10px;
padding-bottom: 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 { &.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 // Popovers
// -------------------------------------------------- // --------------------------------------------------

Write Preview
Loading…
Cancel
Save