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;