diff --git a/_includes/header.html b/_includes/header.html
index 9c2b79f..4dc447a 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -7,7 +7,7 @@
-
+
diff --git a/assets/css/docs.css b/assets/css/docs.css
index f36d0c2..3487316 100644
--- a/assets/css/docs.css
+++ b/assets/css/docs.css
@@ -314,14 +314,14 @@ h6 {
height: 548px;
overflow: hidden;
background-color: #efeff4;
- /*background: rgb(0,0,0);
+ background: rgb(0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );*/
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );
}
.iphone .content,
diff --git a/dist/android-theme.css b/dist/android-theme.css
index c95fac6..01f1f21 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -24,8 +24,8 @@
background-color: #111111;
border-bottom: 1px solid #565656;
}
-[class*="bar-"] [class*="button"] {
- line-height: 50px;
+[class*="bar-"].bar-header-secondary {
+ top: 51px;
}
.bar-tab {
@@ -35,6 +35,7 @@
}
.title {
+ position: static;
padding-left: 10px;
line-height: 50px;
color: white;
@@ -46,10 +47,7 @@
}
.table-view .table-view-cell {
- border-bottom: 0;
- background-image: url("data:image/svg+xml;utf8,");
- background-position: 15px 100%;
- background-repeat: no-repeat;
+ border-bottom: 1px solid #565656;
}
.table-view .table-view-cell:last-child {
background-image: none;
@@ -125,110 +123,132 @@ textarea,
}
[class*="button"] {
- border: 1px solid white;
+ border: 1px solid #565656;
color: white;
- background-color: transparent;
- -webkit-transition: background-color, opacity, color;
- transition: background-color, opacity, color;
- -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 {
+ background-color: #111111;
+ border-radius: 3px;
+}
+[class*="button"]:active, [class*="button"].active {
color: #fff;
background-color: white;
}
-.button-primary {
+[class*="bar-"] [class*="button"] {
+ padding-top: 9px;
+ padding-bottom: 9px;
+}
+[class*="bar-"] .button-link {
+ padding: 0;
color: #33b5e5;
- border: 1px solid #33b5e5;
+ line-height: 50px;
+}
+[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active {
+ color: #1a9bcb;
}
-.button-primary:active, .button-primary.active, .button-primary.button-filled {
+
+.button-primary {
+ color: #fff;
+ border: 1px solid #33b5e5;
background-color: #33b5e5;
}
+.button-primary:active, .button-primary.active {
+ border: 1px solid #1a9bcb;
+ background-color: #1a9bcb;
+}
.button-positive {
- color: #81c700;
+ color: #fff;
border: 1px solid #81c700;
-}
-.button-positive:active, .button-positive.active, .button-positive.button-filled {
background-color: #81c700;
}
+.button-positive:active, .button-positive.active {
+ border: 1px solid #609400;
+ background-color: #609400;
+}
.button-negative {
- color: #f20754;
+ color: #fff;
border: 1px solid #f20754;
-}
-.button-negative:active, .button-negative.active, .button-negative.button-filled {
background-color: #f20754;
}
+.button-negative:active, .button-negative.active {
+ border: 1px solid #c00643;
+ background-color: #c00643;
+}
-.button-link {
- color: #33b5e5;
+.button-outlined {
+ background-color: transparent;
}
-.button-link:active, .button-link.active {
+.button-outlined.button-primary {
color: #33b5e5;
}
+.button-outlined.button-positive {
+ color: #81c700;
+}
+.button-outlined.button-negative {
+ color: #f20754;
+}
+.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: #33b5e5;
- opacity: .3;
+ background-color: transparent;
+ border: none;
+}
+.button-link:active, .button-link.active {
+ color: #1a9bcb;
+ background-color: transparent;
}
-.bar-nav [class*="button"] {
+.bar-nav .button-link {
color: #33b5e5;
- -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: #33b5e5;
+.bar-nav .button-link:active {
+ color: #33b5e5;
+ opacity: .6;
}
-[class*="badge"] {
- color: white;
-}
-[class*="badge"].badge-filled {
+[class*="badge"].badge-inverted {
color: white;
}
.badge-primary {
- color: #33b5e5;
-}
-.badge-primary.badge-filled {
color: #fff;
background-color: #33b5e5;
}
+.badge-primary.badge-inverted {
+ color: #33b5e5;
+}
.badge-positive {
- color: #81c700;
-}
-.badge-positive.badge-filled {
color: #fff;
background-color: #81c700;
}
+.badge-positive.badge-inverted {
+ color: #81c700;
+}
.badge-negative {
- color: #f20754;
-}
-.badge-negative.badge-filled {
color: #fff;
background-color: #f20754;
}
+.badge-negative.badge-inverted {
+ color: #f20754;
+}
.segmented-controller {
background-color: transparent;
border: 1px solid #33b5e5;
+ border-radius: 3px;
}
.segmented-controller li {
border-left: 1px solid #33b5e5;
- -webkit-transition: background-color 0.1s linear;
- transition: background-color 0.1s linear;
}
.segmented-controller li > a {
+ padding-top: 9px;
+ padding-bottom: 10px;
color: #33b5e5;
}
.segmented-controller li.selected {
@@ -237,42 +257,20 @@ textarea,
.popover {
border-radius: 12px;
- -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
- transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.popover:after {
border-bottom: 15px solid #111111;
}
-.toggle {
- border: 2px solid #e6e6e6;
- -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
- box-shadow: inset 0 0 0 0 #e1e1e1;
- -webkit-transition-property: box-shadow, border;
- transition-property: box-shadow, border;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;
-}
.toggle .toggle-handle {
- border: 1px solid rgba(0, 0, 0, 0.2);
- -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
- box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
- -webkit-transition-property: -webkit-transform, border, width;
- transition-property: -webkit-transform, border, width;
+ border: 1px solid #565656;
}
.toggle:active .toggle-handle {
width: 35px;
}
.toggle.active {
border: 2px solid #81c700;
- background-color: transparent;
- -webkit-box-shadow: inset 0 0 0 13px #81c700;
- box-shadow: inset 0 0 0 13px #81c700;
-}
-.toggle.active:active .toggle-handle,
-.toggle.active .toggle-handle:active {
- -webkit-transform: translate3d(10px, 0, 0) !important;
- transform: translate3d(10px, 0, 0) !important;
+ background-color: #81c700;
}
.toggle.active .toggle-handle {
border-color: #81c700;
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index 7d2d0de..36c6651 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -83,3 +83,8 @@
right: 0;
margin-right: 10px;
}
+
+// Badges in table-views
+// --------------------------------------------------
+
+
diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss
index dd292bb..4d9da26 100644
--- a/lib/sass/theme-android.scss
+++ b/lib/sass/theme-android.scss
@@ -50,9 +50,10 @@ $border-radius: 0;
height: $bar-base-height;
background-color: $chrome-color;
border-bottom: $border-default;
-
- [class*="button"] {
- line-height: $bar-base-height;
+
+ // Modifier class to dock any bar below .bar-nav
+ &.bar-header-secondary {
+ top: $bar-base-height + 1;
}
}
.bar-tab {
@@ -62,6 +63,7 @@ $border-radius: 0;
}
// Left aligned text in the .bar-nav
.title {
+ position: static;
padding-left: 10px;
line-height: $bar-base-height;
color: $default-color;
@@ -82,17 +84,15 @@ $border-radius: 0;
.table-view {
.table-view-cell {
- border-bottom: 0;
- @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
+ border-bottom: $border-default;
// Remove the border from the last table view item
&:last-child {
background-image: none;
}
}
- // Table view dividers
- // --------------------------------------------------
+ // Table view dividers
.table-view-divider {
border-top: 0;
border-bottom: 0;
@@ -176,21 +176,34 @@ textarea,
// --------------------------------------------------
[class*="button"] {
- border: 1px solid $default-color;
+ border: $border-default;
color: $default-color;
- background-color: transparent;
- @include transition(background-color, opacity, color);
- @include transition-duration(.2s);
- @include transition-timing-function(linear);
+ background-color: $chrome-color;
+ border-radius: 3px;
// Active & filled button styles
&:active,
- &.active,
- &.button-filled {
+ &.active {
color: #fff;
background-color: $default-color;
}
}
+[class*="bar-"] {
+ [class*="button"] {
+ padding-top: 9px;
+ padding-bottom: 9px;
+ }
+ .button-link {
+ padding: 0;
+ color: $primary-color;
+ line-height: $bar-base-height;
+
+ &:active,
+ &.active {
+ color: darken($primary-color, 10%);
+ }
+ }
+}
// Other button types
@@ -198,56 +211,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;
}
}
@@ -255,19 +286,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;
+ }
}
}
@@ -277,9 +302,7 @@ textarea,
// --------------------------------------------------
[class*="badge"] {
- color: $default-color;
-
- &.badge-filled {
+ &.badge-inverted {
color: $default-color;
}
}
@@ -290,31 +313,31 @@ textarea,
// Main badge
.badge-primary {
- color: $primary-color;
+ color: #fff;
+ background-color: $primary-color;
- &.badge-filled {
- color: #fff;
- background-color: $primary-color;
+ &.badge-inverted {
+ color: $primary-color;
}
}
// Positive badge
.badge-positive {
- color: $positive-color;
+ color: #fff;
+ background-color: $positive-color;
- &.badge-filled {
- color: #fff;
- background-color: $positive-color;
+ &.badge-inverted {
+ color: $positive-color;
}
}
// Negative badge
.badge-negative {
- color: $negative-color;
+ color: #fff;
+ background-color: $negative-color;
- &.badge-filled {
- color: #fff;
- background-color: $negative-color;
+ &.badge-inverted {
+ color: $negative-color;
}
}
@@ -326,13 +349,15 @@ textarea,
.segmented-controller {
background-color: transparent;
border: 1px solid $primary-color;
+ border-radius: 3px;
li {
border-left: 1px solid $primary-color;
- @include transition(background-color .1s linear);
// Link that fills each section
> a {
+ padding-top: 9px;
+ padding-bottom: 10px;
color: $primary-color;
}
@@ -350,7 +375,6 @@ textarea,
.popover {
border-radius: 12px;
- @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
&:after {
border-bottom: 15px solid $chrome-color;
@@ -366,16 +390,9 @@ textarea,
// Toggles styles
// --------------------------------------------------
.toggle {
- border: 2px solid #e6e6e6;
- @include box-shadow(inset 0 0 0 0 #e1e1e1);
- @include transition-property(box-shadow, border);
- @include transition-duration(.2s);
-
// Sliding handle
.toggle-handle {
- border: 1px solid rgba(0, 0, 0, .2);
- @include box-shadow(0 3px 3px rgba(0,0,0,.08));
- @include transition-property(-webkit-transform, border, width);
+ border: $border-default;
}
&:active .toggle-handle {
width: 35px;
@@ -383,14 +400,7 @@ textarea,
// Active state for toggle
&.active {
border: 2px solid $positive-color;
- background-color: transparent;
- @include box-shadow(inset 0 0 0 13px $positive-color);
-
- // Handle when the handle and the container is active
- &:active .toggle-handle,
- .toggle-handle:active {
- @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
- }
+ background-color: $positive-color;
.toggle-handle {
border-color: $positive-color;