diff --git a/_includes/header.html b/_includes/header.html
index f00d26d..9c2b79f 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -7,7 +7,7 @@
-
+
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 73b4460..5464ac5 100644
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@@ -129,65 +129,81 @@ textarea,
[class*="button"] {
border: 1px solid #929292;
color: #929292;
- background-color: transparent;
- -webkit-transition: background-color, opacity, color;
- transition: background-color, opacity, color;
+ background-color: rgba(247, 247, 247, 0.98);
+ -webkit-transition: all;
+ transition: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
-[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
+[class*="button"]:active, [class*="button"].active {
color: #fff;
background-color: #929292;
}
.button-primary {
- color: #007aff;
+ color: #fff;
border: 1px solid #007aff;
-}
-.button-primary:active, .button-primary.active, .button-primary.button-filled {
background-color: #007aff;
}
+.button-primary:active, .button-primary.active {
+ border: 1px solid #0062cc;
+ background-color: #0062cc;
+}
.button-positive {
- color: #4cd964;
+ color: #fff;
border: 1px solid #4cd964;
-}
-.button-positive:active, .button-positive.active, .button-positive.button-filled {
background-color: #4cd964;
}
+.button-positive:active, .button-positive.active {
+ border: 1px solid #2ac845;
+ background-color: #2ac845;
+}
.button-negative {
- color: #dd524d;
+ color: #fff;
border: 1px solid #dd524d;
-}
-.button-negative:active, .button-negative.active, .button-negative.button-filled {
background-color: #dd524d;
}
+.button-negative:active, .button-negative.active {
+ border: 1px solid #cf2d28;
+ background-color: #cf2d28;
+}
-.button-link {
- color: #007aff;
+.button-outlined {
+ background-color: transparent;
}
-.button-link:active, .button-link.active {
+.button-outlined.button-primary {
color: #007aff;
}
+.button-outlined.button-positive {
+ color: #4cd964;
+}
+.button-outlined.button-negative {
+ color: #dd524d;
+}
+.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+ color: #fff;
+}
-.button-link:active, .button-link.active {
+.button-link {
color: #007aff;
- opacity: .3;
+ background-color: transparent;
+ border: none;
+}
+.button-link:active, .button-link.active {
+ color: #0062cc;
+ background-color: transparent;
}
-.bar-nav [class*="button"] {
+.bar-nav .button-link {
color: #007aff;
- -webkit-transition: opacity 0.2s linear;
- transition: opacity 0.2s linear;
}
-.bar-nav .button-prev:before,
-.bar-nav .button-prev:after,
-.bar-nav .button-next:before,
-.bar-nav .button-next:after {
- background-color: #007aff;
+.bar-nav .button-link:active {
+ color: #007aff;
+ opacity: .6;
}
[class*="badge"] {
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 87073e3..a40d494 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -387,8 +387,6 @@ strong {
}
.popover .bar-nav {
- padding-right: 15px;
- padding-left: 15px;
border-bottom: 1px solid #dddddd;
border-radius: 12px 12px 0 0;
-webkit-box-shadow: none;
@@ -462,12 +460,12 @@ strong {
top: 50%;
right: 10px;
}
-.table-view .chevron,
-.table-view [class*="badge"] {
+.table-view .chevron {
margin-top: -10px;
}
.table-view .chevron + [class*="badge"] {
right: 30px;
+ margin-top: -9px;
}
.table-view [class*="button"] {
left: auto;
diff --git a/index.html b/index.html
index 29fdde4..b138d9c 100644
--- a/index.html
+++ b/index.html
@@ -102,7 +102,7 @@ layout: default
{% highlight html %}
-
+
Left
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index f715602..b59d0c8 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -136,8 +136,6 @@
// --------------------------------------------------
.popover .bar-nav {
- padding-right: 15px;
- padding-left: 15px;
border-bottom: $border-default;
border-radius: 12px 12px 0 0;
@include box-shadow(none);
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index bf359aa..4e66e3f 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -93,7 +93,6 @@
&.button-negative:active {
color: #fff;
}
-
}
// Link button (Buttons that look like links)
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 36a6af2..2561ba0 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -94,14 +94,14 @@
}
// Position chevrons/badges vertically centered on the right in table view items
- .chevron,
- [class*="badge"] {
+ .chevron {
margin-top: -10px; // Half height of chevron
}
// Push badge over if there's a sibling chevron
.chevron + [class*="badge"] {
right: 30px;
+ margin-top: -9px;
}
// Position buttons vertically centered on the right in table view items
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
index e637267..b61b0ff 100644
--- a/lib/sass/theme-ios.scss
+++ b/lib/sass/theme-ios.scss
@@ -177,15 +177,14 @@ textarea,
[class*="button"] {
border: 1px solid $default-color;
color: $default-color;
- background-color: transparent;
- @include transition(background-color, opacity, color);
+ background-color: $chrome-color;
+ @include transition(all);
@include transition-duration(.2s);
@include transition-timing-function(linear);
// Active & filled button styles
&:active,
- &.active,
- &.button-filled {
+ &.active {
color: #fff;
background-color: $default-color;
}
@@ -197,56 +196,74 @@ textarea,
// Primary button (Default color is blue)
.button-primary {
- color: $primary-color;
+ color: #fff;
border: 1px solid $primary-color;
+ background-color: $primary-color;
&:active,
- &.active,
- &.button-filled {
- background-color: $primary-color;
+ &.active {
+ border: 1px solid darken($primary-color, 10%);
+ background-color: darken($primary-color, 10%);
}
}
// Positive button (Default color is green)
.button-positive {
- color: $positive-color;
+ color: #fff;
border: 1px solid $positive-color;
+ background-color: $positive-color;
&:active,
- &.active,
- &.button-filled {
- background-color: $positive-color;
+ &.active {
+ border: 1px solid darken($positive-color, 10%);
+ background-color: darken($positive-color, 10%);
}
}
// Negative button (Default color is red)
.button-negative {
- color: $negative-color;
+ color: #fff;
border: 1px solid $negative-color;
+ background-color: $negative-color;
&:active,
- &.active,
- &.button-filled {
- background-color: $negative-color;
+ &.active {
+ border: 1px solid darken($negative-color, 10%);
+ background-color: darken($negative-color, 10%);
}
}
-// Link button (Buttons that look like links)
-.button-link {
- color: $primary-color;
+// Outlined buttons
+.button-outlined {
+ background-color: transparent;
- &:active,
- &.active {
+ &.button-primary {
color: $primary-color;
}
+ &.button-positive {
+ color: $positive-color;
+ }
+ &.button-negative {
+ color: $negative-color;
+ }
+ // Active states
+ &.button-primary:active,
+ &.button-positive:active,
+ &.button-negative:active {
+ color: #fff;
+ }
}
// Link button (Buttons that look like links)
.button-link {
+ color: $primary-color;
+ background-color: transparent;
+ border: none;
+
&:active,
&.active {
- color: $primary-color;
- opacity: .3;
+ color: darken($primary-color, 10%);
+ background-color: transparent;
}
}
@@ -254,19 +271,13 @@ textarea,
// --------------------------------------------------
.bar-nav {
- [class*="button"] {
+ .button-link {
color: $primary-color;
- @include transition(opacity .2s linear);
- }
-
- // Directional buttons in nav bars
- // --------------------------------------------------
- .button-prev:before,
- .button-prev:after,
- .button-next:before,
- .button-next:after {
- background-color: $primary-color;
+ &:active {
+ color: $primary-color;
+ opacity: .6;
+ }
}
}