From 2f22b4cd26d147b3d1218e88137cf83962bc69c4 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 16:53:11 -0800 Subject: [PATCH] final derps --- dist/ios-theme.css | 89 +++++++++++++++++++++++++++- lib/sass/theme-ios.scss | 125 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 211 insertions(+), 3 deletions(-) diff --git a/dist/ios-theme.css b/dist/ios-theme.css index c7bbc21..3174a94 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -8,7 +8,7 @@ * ===================================================== */ -.bar { +[class*="bar-"] { border-bottom: 0; background-color: rgba(247, 247, 247, 0.98); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); @@ -80,6 +80,16 @@ input[type=search]:focus { text-align: left; } +select, +textarea, +.input-group { + height: auto; +} + +.input-group { + padding: 0; +} + .input-group input { border: 0; background-image: url("data:image/svg+xml;utf8,"); @@ -104,6 +114,7 @@ input[type=search]:focus { } [class*="button"] { + border: 1px solid #929292; color: #929292; background-color: transparent; -webkit-transition: background-color, opacity, color; @@ -118,30 +129,100 @@ input[type=search]:focus { background-color: #929292; } +.button-primary { + color: #007aff; + border: 1px solid #007aff; +} +.button-primary:active, .button-primary.active, .button-primary.button-filled { + background-color: #007aff; +} + +.button-positive { + color: #4cd964; + border: 1px solid #4cd964; +} +.button-positive:active, .button-positive.active, .button-positive.button-filled { + background-color: #4cd964; +} + +.button-negative { + color: #dd524d; + border: 1px solid #dd524d; +} +.button-negative:active, .button-negative.active, .button-negative.button-filled { + background-color: #dd524d; +} + +.button-link { + color: #007aff; +} +.button-link:active, .button-link.active { + color: #007aff; +} + .button-link:active, .button-link.active { color: #007aff; opacity: .3; } -.bar-nav { +.bar-nav [class*="button"] { + 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; +} [class*="badge"] { color: #929292; } [class*="badge"].badge-filled { + color: #929292; +} + +.badge-primary { + color: #007aff; +} +.badge-primary.badge-filled { color: #fff; + background-color: #007aff; +} + +.badge-positive { + color: #4cd964; +} +.badge-positive.badge-filled { + color: #fff; + background-color: #4cd964; +} + +.badge-negative { + color: #dd524d; +} +.badge-negative.badge-filled { + color: #fff; + background-color: #dd524d; } .segmented-controller { background-color: transparent; + border: 1px solid #007aff; } .segmented-controller li { + border-left: 1px solid #007aff; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } +.segmented-controller li > a { + color: #007aff; +} +.segmented-controller li.selected { + background-color: #007aff; +} .popover { border-radius: 12px; @@ -178,6 +259,7 @@ input[type=search]:focus { width: 35px; } .toggle.active { + border: 2px solid #4cd964; background-color: transparent; -webkit-box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964; @@ -187,6 +269,9 @@ input[type=search]:focus { -webkit-transform: translate3d(10px, 0, 0) !important; transform: translate3d(10px, 0, 0) !important; } +.toggle.active .toggle-handle { + border-color: #4cd964; +} .content.fade { -webkit-transition: opacity 0.2s ease-in-out; diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 35f93d8..74de3be 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -111,9 +111,17 @@ input[type=search] { input[type=search]:focus { text-align: left; } +select, +textarea, +.input-group { + height: auto; +} // Input groups (cluster multiple inputs together into a single group) // ------------------------------------------------------------------- +.input-group { + padding: 0; +} .input-group input { border: 0; @include hairline(single, #c8c7cc, 15px); @@ -142,6 +150,7 @@ input[type=search]:focus { // -------------------------------------------------- [class*="button"] { + border: 1px solid $default-color; color: $default-color; background-color: transparent; @include transition(background-color, opacity, color); @@ -157,6 +166,56 @@ input[type=search]:focus { } } + +// Other button types +// -------------------------------------------------- + +// Primary button (Default color is blue) +.button-primary { + color: $primary-color; + border: 1px solid $primary-color; + + &:active, + &.active, + &.button-filled { + background-color: $primary-color; + } +} + +// Positive button (Default color is green) +.button-positive { + color: $positive-color; + border: 1px solid $positive-color; + + &:active, + &.active, + &.button-filled { + background-color: $positive-color; + } +} + +// Negative button (Default color is red) +.button-negative { + color: $negative-color; + border: 1px solid $negative-color; + + &:active, + &.active, + &.button-filled { + background-color: $negative-color; + } +} + +// Link button (Buttons that look like links) +.button-link { + color: $primary-color; + + &:active, + &.active { + color: $primary-color; + } +} + // Link button (Buttons that look like links) .button-link { &:active, @@ -170,7 +229,20 @@ input[type=search]:focus { // -------------------------------------------------- .bar-nav { - @include transition(opacity .2s linear); + [class*="button"] { + 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; + } } @@ -181,8 +253,42 @@ input[type=search]:focus { [class*="badge"] { color: $default-color; + &.badge-filled { + color: $default-color; + } +} + + +// Badge modifiers +// -------------------------------------------------- + +// Main badge +.badge-primary { + color: $primary-color; + &.badge-filled { color: #fff; + background-color: $primary-color; + } +} + +// Positive badge +.badge-positive { + color: $positive-color; + + &.badge-filled { + color: #fff; + background-color: $positive-color; + } +} + +// Negative badge +.badge-negative { + color: $negative-color; + + &.badge-filled { + color: #fff; + background-color: $negative-color; } } @@ -193,9 +299,21 @@ input[type=search]:focus { .segmented-controller { background-color: transparent; + border: 1px solid $primary-color; li { + border-left: 1px solid $primary-color; @include transition(background-color .1s linear); + + // Link that fills each section + > a { + color: $primary-color; + } + + // Selected segment of controller + &.selected { + background-color: $primary-color; + } } } @@ -243,6 +361,7 @@ input[type=search]:focus { } // Active state for toggle &.active { + border: 2px solid $positive-color; background-color: transparent; @include box-shadow(inset 0 0 0 13px $positive-color); @@ -251,6 +370,10 @@ input[type=search]:focus { .toggle-handle:active { @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. } + + .toggle-handle { + border-color: $positive-color; + } } }