diff --git a/dist/ratchet.css b/dist/ratchet.css index 5254d21..4775d20 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -500,7 +500,7 @@ strong { margin-left: 0; overflow: auto; background-color: #fff; - border-radius: 12px; + border-radius: 6px; -webkit-overflow-scrolling: touch; } @@ -535,7 +535,7 @@ input[type="color"], margin-bottom: 10px; line-height: 21px; background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.2); + border: 1px solid #dddddd; border-radius: 3px; outline: none; -webkit-appearance: none; @@ -578,6 +578,9 @@ select { margin-bottom: 0; background-color: transparent; border-bottom: 1px solid #dddddd; + border-top: 0; + border-left: 0; + border-right: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; @@ -625,24 +628,20 @@ select { font-size: 12px; font-weight: 400; line-height: 1.15; - color: white; + color: #333; text-align: center; vertical-align: top; cursor: pointer; - background-color: transparent; - border: 1px solid white; - border-radius: 4px; - -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; + background-color: white; + border: 1px solid #dddddd; + border-radius: 6px; } -[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { - color: #fff; +[class*="button"].button-filled { background-color: white; } +[class*="button"]:active, [class*="button"].active { + background-color: #ebebeb; +} [class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active { opacity: .6; } @@ -652,6 +651,7 @@ select { border: 1px solid #428bca; } .button-primary:active, .button-primary.active, .button-primary.button-filled { + color: #fff; background-color: #428bca; } @@ -660,6 +660,7 @@ select { border: 1px solid #5cb85c; } .button-positive:active, .button-positive.active, .button-positive.button-filled { + color: #fff; background-color: #5cb85c; } @@ -668,6 +669,7 @@ select { border: 1px solid #d9534f; } .button-negative:active, .button-negative.active, .button-negative.button-filled { + color: #fff; background-color: #d9534f; } @@ -676,8 +678,7 @@ select { border: none; } .button-link:active, .button-link.active { - color: #428bca; - opacity: .3; + color: #3071a9; } .button-link.button-filled { background-color: transparent; @@ -699,6 +700,7 @@ select { font-weight: 400; line-height: 44px; color: #428bca; + background-color: transparent; border: 0; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; @@ -818,14 +820,13 @@ input[type="button"] { [class*="badge"] { display: inline-block; - color: white; + color: #333; } [class*="badge"].badge-filled { padding: 2px 9px; - color: #fff; font-size: 13px; line-height: 1; - background-color: white; + background-color: rgba(0, 0, 0, 0.15); border-radius: 100px; } @@ -833,6 +834,7 @@ input[type="button"] { color: #428bca; } .badge-primary.badge-filled { + color: #fff; background-color: #428bca; } @@ -840,6 +842,7 @@ input[type="button"] { color: #5cb85c; } .badge-positive.badge-filled { + color: #fff; background-color: #5cb85c; } @@ -847,6 +850,7 @@ input[type="button"] { color: #d9534f; } .badge-negative.badge-filled { + color: #fff; background-color: #d9534f; } @@ -859,7 +863,7 @@ input[type="button"] { .button-filled .badge-filled, [class*="button"]:active .badge-filled { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0, 0, 0, 0.15); } .button-block [class*="badge"] { diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss index 0ad6751..efd01cd 100644 --- a/lib/sass/badges.scss +++ b/lib/sass/badges.scss @@ -4,14 +4,13 @@ [class*="badge"] { display: inline-block; - color: $default-color; + color: #333; &.badge-filled { padding: 2px 9px; - color: #fff; font-size: 13px; line-height: 1; - background-color: $default-color; + background-color: rgba(0,0,0,.15); border-radius: 100px; } } @@ -25,6 +24,7 @@ color: $primary-color; &.badge-filled { + color: #fff; background-color: $primary-color; } } @@ -34,6 +34,7 @@ color: $positive-color; &.badge-filled { + color: #fff; background-color: $positive-color; } } @@ -43,6 +44,7 @@ color: $negative-color; &.badge-filled { + color: #fff; background-color: $negative-color; } } @@ -62,7 +64,7 @@ // Styles for filled badges within filled buttons .button-filled .badge-filled, [class*="button"]:active .badge-filled { - background-color: rgba(0,0,0,.2); + background-color: rgba(0,0,0,.15); } // Position badges within block level buttons diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 675429c..dfe2933 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -10,23 +10,22 @@ font-size: $button-font-size; font-weight: $font-weight-light; line-height: 1.15; // Center button text on the phone. - color: $default-color; + color: #333; text-align: center; vertical-align: top; cursor: pointer; - background-color: transparent; - border: 1px solid $default-color; - border-radius: 4px; - @include transition(background-color, opacity, color); - @include transition-duration(.2s); - @include transition-timing-function(linear); + background-color: $chrome-color; + border: $border-default; + border-radius: $border-radius; + + &.button-filled { + background-color: $chrome-color; + } // Active & filled button styles &:active, - &.active, - &.button-filled { - color: #fff; - background-color: $default-color; + &.active { + background-color: #ebebeb; } // Disabled styles & filled button active styles @@ -49,6 +48,7 @@ &:active, &.active, &.button-filled { + color: #fff; background-color: $primary-color; } } @@ -61,6 +61,7 @@ &:active, &.active, &.button-filled { + color: #fff; background-color: $positive-color; } } @@ -73,6 +74,7 @@ &:active, &.active, &.button-filled { + color: #fff; background-color: $negative-color; } } @@ -84,8 +86,7 @@ &:active, &.active { - color: $primary-color; - opacity: .3; + color: darken($primary-color, 10%); } &.button-filled { background-color: transparent; @@ -115,6 +116,7 @@ font-weight: $font-weight-light; line-height: $bar-base-height; color: $primary-color; + background-color: transparent; border: 0; @include transition(opacity .2s linear); @include box-flex(0); diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index 16b2c64..136cdb1 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -35,7 +35,7 @@ input[type="color"], margin-bottom: 10px; line-height: $line-height-default; background-color: #fff; - border: 1px solid rgba(0, 0, 0, .2); + border: $border-default; border-radius: 3px; outline: none; -webkit-appearance: none; @@ -85,6 +85,9 @@ select { margin-bottom: 0; background-color: transparent; border-bottom: $border-default; + border-top: 0; + border-left: 0; + border-right: 0; border-radius: 0; @include box-shadow(none); } diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 994486a..956aa83 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -145,6 +145,6 @@ margin-left: 0; overflow: auto; background-color: #fff; - border-radius: 12px; + border-radius: $border-radius; -webkit-overflow-scrolling: touch; } \ No newline at end of file diff --git a/lib/sass/theme-ios b/lib/sass/theme-ios index 2246e6f..29da48a 100644 --- a/lib/sass/theme-ios +++ b/lib/sass/theme-ios @@ -64,9 +64,35 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods } } +.popover .table-view { + border-radius: 12px; +} + // Forms // -------------------------------------------------- + +select, +textarea, +input[type="text"], +input[type=search], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"], +.input-group { + border: 1px solid rgba(0, 0, 0, .2); +} + +// Rounded search input input[type=search] { text-align: center; background-color: rgba(0,0,0,.1); @@ -80,7 +106,7 @@ input[type=search]:focus { // Input groups (cluster multiple inputs together into a single group) // ------------------------------------------------------------------- .input-group input { - border-bottom: 0; + border: 0; @include hairline(single, #c8c7cc, 15px); } // Remove bottom border on last input to avoid double bottom border @@ -102,3 +128,44 @@ input[type=search]:focus { background-image: none; } + +// Buttons +// -------------------------------------------------- + +[class*="button"] { + color: $default-color; + background-color: transparent; + border-radius: 4px; + @include transition(background-color, opacity, color); + @include transition-duration(.2s); + @include transition-timing-function(linear); + + // Active & filled button styles + &:active, + &.active, + &.button-filled { + color: #fff; + background-color: $default-color; + } +} + +// Link button (Buttons that look like links) +.button-link { + &:active, + &.active { + color: $primary-color; + opacity: .3; + } +} + +// +// Badges +// -------------------------------------------------- + +[class*="badge"] { + color: $default-color; + + &.badge-filled { + color: #fff; + } +}