Title bar with link buttons and icons
+ Buttons in a title bar are left or right aligned and should be used for actions.
@@ -117,9 +144,12 @@ base_url: "../"
{% endhighlight %}
diff --git a/dist/android-theme.css b/dist/android-theme.css
index c5b9429..30e9574 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -52,6 +52,7 @@ body {
.title {
position: static;
padding-left: 15px;
+ font-size: 18px;
line-height: 50px;
text-align: left;
}
@@ -74,6 +75,12 @@ body {
.table-view .table-view-cell:last-child {
background-image: none;
}
+.table-view .table-view-cell > a:not(.btn):active {
+ background-color: #33b5e5;
+}
+.table-view .table-view-cell > a:not(.btn):active .icon {
+ color: #fff;
+}
.table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
@@ -166,6 +173,7 @@ textarea,
.bar .btn-link {
padding: 0;
color: #33b5e5;
+ font-size: 18px;
line-height: 50px;
}
.bar .btn-link:active, .bar .btn-link.active {
@@ -375,3 +383,7 @@ textarea,
color: #fff;
content: "On";
}
+
+.bar .icon {
+ margin-top: 13px;
+}
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 23b5c7d..afea7c7 100644
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@@ -215,14 +215,6 @@ textarea,
.bar-nav .btn-link {
color: #007aff;
}
-.bar-nav .btn-link.pull-right .icon {
- margin-right: -8px;
- margin-left: -3px;
-}
-.bar-nav .btn-link.pull-left .icon {
- margin-right: -3px;
- margin-left: -8px;
-}
.bar-nav .btn-link:active {
color: #007aff;
opacity: .6;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 039f4c7..3c81e0f 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -767,9 +767,17 @@ input[type="button"] {
.bar-nav .btn-link.pull-left {
margin-left: 5px;
}
+.bar-nav .btn-link.pull-left .icon {
+ margin-right: -3px;
+ margin-left: -8px;
+}
.bar-nav .btn-link.pull-right {
margin-right: 5px;
}
+.bar-nav .btn-link.pull-right .icon {
+ margin-right: -8px;
+ margin-left: -3px;
+}
.table-view .btn {
margin-top: -1px;
@@ -1240,6 +1248,12 @@ input[type="button"] {
font-size: 24px;
margin-top: 11px;
}
+.bar .icon.pull-left {
+ margin-left: -3px;
+}
+.bar .icon.pull-right {
+ margin-right: -3px;
+}
.table-view .icon {
margin-top: 3px;
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 0b6fc8d..615c195 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -980,14 +980,6 @@ hr {
.platform-ios .bar-nav .btn-link {
color: #007aff;
}
-.platform-ios .bar-nav .btn-link.pull-right .icon {
- margin-right: -8px;
- margin-left: -3px;
-}
-.platform-ios .bar-nav .btn-link.pull-left .icon {
- margin-right: -3px;
- margin-left: -8px;
-}
.platform-ios .bar-nav .btn-link:active {
color: #007aff;
opacity: .6;
@@ -1231,6 +1223,7 @@ hr {
.platform-android .title {
position: static;
padding-left: 15px;
+ font-size: 18px;
line-height: 50px;
text-align: left;
}
@@ -1250,6 +1243,12 @@ hr {
.platform-android .table-view .table-view-cell:last-child {
background-image: none;
}
+.platform-android .table-view .table-view-cell > a:not(.btn):active {
+ background-color: #33b5e5;
+}
+.platform-android .table-view .table-view-cell > a:not(.btn):active .icon {
+ color: #fff;
+}
.platform-android .table-view .table-view-divider {
padding-top: 25px;
font-size: 12px;
@@ -1331,6 +1330,7 @@ hr {
.platform-android .bar .btn-link {
padding: 0;
color: #33b5e5;
+ font-size: 18px;
line-height: 50px;
}
.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
@@ -1526,6 +1526,9 @@ hr {
color: #fff;
content: "On";
}
+.platform-android .bar .icon {
+ margin-top: 13px;
+}
.platform-android .device {
font-family: 'Roboto', sans-serif;
background-image: url("../img/android.png");
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index bca59b4..2a5c91c 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -187,9 +187,19 @@ input[type="button"] {
.bar-nav .btn-link {
&.pull-left {
margin-left: 5px;
+
+ .icon {
+ margin-right: -3px;
+ margin-left: -8px;
+ }
}
&.pull-right {
margin-right: 5px;
+
+ .icon {
+ margin-right: -8px;
+ margin-left: -3px;
+ }
}
}
diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss
index ae50d8a..eb0aa13 100644
--- a/lib/sass/ratchicons.scss
+++ b/lib/sass/ratchicons.scss
@@ -49,10 +49,15 @@
}
// Ratchicons in nav bars
-.bar {
- .icon {
- font-size: 24px;
- margin-top: 11px;
+.bar .icon {
+ font-size: 24px;
+ margin-top: 11px;
+
+ &.pull-left {
+ margin-left: -3px;
+ }
+ &.pull-right {
+ margin-right: -3px;
}
}
diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss
index 8a08b5b..0fbe4a3 100644
--- a/lib/sass/theme-android.scss
+++ b/lib/sass/theme-android.scss
@@ -89,6 +89,7 @@ body {
.title {
position: static;
padding-left: 15px;
+ font-size: $font-size-default;
line-height: $bar-base-height;
text-align: left;
}
@@ -124,6 +125,13 @@ body {
&:last-child {
background-image: none;
}
+ > a:not(.btn):active {
+ background-color: $primary-color;
+
+ .icon {
+ color: #fff;
+ }
+ }
}
// Table view dividers
@@ -236,6 +244,7 @@ textarea,
.btn-link {
padding: 0;
color: $primary-color;
+ font-size: $font-size-default;
line-height: $bar-base-height;
&:active,
@@ -522,3 +531,8 @@ textarea,
}
}
}
+
+// Ratchicons in nav bars
+.bar .icon {
+ margin-top: 13px;
+}
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
index ec30727..1cd7920 100644
--- a/lib/sass/theme-ios.scss
+++ b/lib/sass/theme-ios.scss
@@ -288,15 +288,7 @@ textarea,
// Link buttons in nav bars
.btn-link {
color: $primary-color;
-
- &.pull-right .icon{
- margin-right: -8px;
- margin-left: -3px;
- }
- &.pull-left .icon {
- margin-right: -3px;
- margin-left: -8px;
- }
+
&:active {
color: $primary-color;
opacity: .6;