From 1e25d4d0a56d2dbc9495e2b469966e597788e605 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 13:49:14 -0800 Subject: [PATCH] more of the ios theme pulled out. --- dist/ratchet.css | 35 +++++++----------- lib/sass/bars.scss | 4 +-- lib/sass/forms.scss | 19 ++++------ lib/sass/table-views.scss | 20 +++++------ lib/sass/theme-ios | 76 +++++++++++++++++++++++++++++++++------ lib/sass/variables.scss | 9 +++-- 6 files changed, 102 insertions(+), 61 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 6d23062..5254d21 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -293,7 +293,7 @@ strong { z-index: 10; height: 44px; padding: 5px 10px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dddddd; background-color: white; } [class*="bar-"].bar-header-secondary { @@ -390,7 +390,7 @@ strong { .popover .bar-nav { padding-right: 15px; padding-left: 15px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dddddd; border-radius: 12px 12px 0 0; -webkit-box-shadow: none; box-shadow: none; @@ -408,12 +408,10 @@ strong { .table-view .table-view-cell { position: relative; padding: 11px 60px 12px 15px; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; + border-bottom: 1px solid #dddddd; } .table-view .table-view-cell:last-child { - background-image: none; + border-bottom: 0; } .table-view .table-view-cell > a:not([class*="button"]) { position: relative; @@ -446,10 +444,9 @@ strong { margin-left: 0; color: #999; font-weight: 500; + border-top: 1px solid #dddddd; + border-bottom: 1px solid #dddddd; background-color: #fafafa; - background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); - background-position: 0 100%, 0 0%; - background-repeat: no-repeat; } .table-view .table-view-divider:first-child { top: 0; @@ -548,10 +545,7 @@ input[type=search] { height: 34px; padding: 0 10px; font-size: 16px; - text-align: center; - border-radius: 6px; - border-width: 0; - background-color: rgba(0, 0, 0, 0.1); + border-radius: 20px; box-sizing: border-box; } @@ -583,28 +577,23 @@ select { .input-group input { margin-bottom: 0; background-color: transparent; - border: 0; + border-bottom: 1px solid #dddddd; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; } .input-group input:last-child { - background-image: none; + border-bottom: 0; } .input-row { overflow: hidden; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; + border-bottom: 1px solid #dddddd; } .input-row:last-child { - background-image: none; + border-bottom: 0; } .input-row label { @@ -620,7 +609,7 @@ select { width: 65%; padding-left: 0; margin-bottom: 0; - background-image: none; + border: 0; } [class*="bar-"] input[type=search] { diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 62c06f0..2107748 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -9,7 +9,7 @@ z-index: 10; height: $bar-base-height; padding: 5px $bar-side-spacing; - border-bottom: 1px solid #ddd; + border-bottom: $border-default; background-color: $chrome-color; @@ -138,7 +138,7 @@ .popover .bar-nav { padding-right: 15px; padding-left: 15px; - border-bottom: 1px solid #ddd; + border-bottom: $border-default; border-radius: 12px 12px 0 0; @include box-shadow(none); diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index 59bddee..16b2c64 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -41,15 +41,12 @@ input[type="color"], -webkit-appearance: none; } -// Fully round search input +// Rounded search input input[type=search] { height: 34px; padding: 0 10px; font-size: 16px; - text-align: center; - border-radius: 6px; - border-width: 0; - background-color: rgba(0,0,0,.1); + border-radius: 20px; box-sizing: border-box; // Override content-box in normalize } input[type=search]:focus { @@ -87,30 +84,28 @@ select { .input-group input { margin-bottom: 0; background-color: transparent; - border: 0; + border-bottom: $border-default; border-radius: 0; @include box-shadow(none); - @include hairline(single, #c8c7cc, 15px); } // Remove bottom border on last input to avoid double bottom border .input-group input:last-child { - background-image: none; + border-bottom: 0; } // Input groups with labels // -------------------------------------------------- - // To use labels with input groups, wrap a label and an input in an .input-row .input-row { overflow: hidden; - @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. + border-bottom: $border-default; } // Remove bottom border on last input-row to avoid double bottom border .input-row:last-child { - background-image: none; + border-bottom: 0; } // Labels get floated left with a set percentage width @@ -128,7 +123,7 @@ select { width: 65%; padding-left: 0; margin-bottom: 0; - background-image: none; + border: 0; } diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 2f560e5..994486a 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -12,14 +12,12 @@ .table-view-cell { position: relative; padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider. - @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; + &:last-child { + border-bottom: 0; } - // If it's a table view of links, make sure the child takes up full table view item tap area (want to avoid selecting child buttons though) > a:not([class*="button"]) { position: relative; @@ -32,14 +30,13 @@ background-color: #eee; } } - p { margin: 0; } } - // Inset table views + // Inset table views (Will be deprecated and changed into `.card` component) // -------------------------------------------------- &.inset { @@ -47,7 +44,7 @@ margin-right: 10px; margin-left: 10px; border: 1px solid rgba(0, 0, 0, .15); - border-radius: 6px; + border-radius: $border-radius; // Remove border from last standard list items to avoid double border at top/bottom of table views li:last-child { @@ -67,18 +64,19 @@ margin-left: 0; color: #999; font-weight: $font-weight; + border-top: $border-default; + border-bottom: $border-default; background-color: #fafafa; - @include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset. // Rounding first divider on inset lists and remove border on the top &:first-child { top: 0; - border-radius: 6px 6px 0 0; + border-radius: $border-radius $border-radius 0 0; } // Rounding last divider on inset table views &:last-child { - border-radius: 0 0 6px 6px; + border-radius: 0 0 $border-radius $border-radius; } } diff --git a/lib/sass/theme-ios b/lib/sass/theme-ios index b497dc1..2246e6f 100644 --- a/lib/sass/theme-ios +++ b/lib/sass/theme-ios @@ -9,8 +9,8 @@ // -------------------------------------------------- // Main theme colors -$primary-color: #007aff; -$chrome-color: rgba(247,247,247,.98); +$primary-color: #007aff; +$chrome-color: rgba(247,247,247,.98); // Action colors $default-color: #929292; @@ -23,18 +23,11 @@ $negative-color: #dd524d; $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods -// Misc variables -// -------------------------------------------------- - -// Hairline dividers (.5px tall for retina devices.) -$hairline: url("data:image/svg+xml;utf8,"); // Thanks to @madrobby - - // Bars // -------------------------------------------------- .bar { - border-bottom-width: 0; + border-bottom: 0; background-color: $chrome-color; @include box-shadow(0 0 1px rgba(0,0,0,.85)); } @@ -46,3 +39,66 @@ $hairline: url("data:image/svg+xml;utf8,"); // Thanks to @madrobby +$border-default: 1px solid #ddd; +$border-radius: 6px;