Browse Source

more of the ios theme pulled out.

pull/245/head
connors 11 years ago
parent
commit
1e25d4d0a5
  1. 35
      dist/ratchet.css
  2. 4
      lib/sass/bars.scss
  3. 19
      lib/sass/forms.scss
  4. 20
      lib/sass/table-views.scss
  5. 76
      lib/sass/theme-ios
  6. 9
      lib/sass/variables.scss

35
dist/ratchet.css vendored

@ -293,7 +293,7 @@ strong {
z-index: 10; z-index: 10;
height: 44px; height: 44px;
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #dddddd;
background-color: white; background-color: white;
} }
[class*="bar-"].bar-header-secondary { [class*="bar-"].bar-header-secondary {
@ -390,7 +390,7 @@ strong {
.popover .bar-nav { .popover .bar-nav {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #dddddd;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -408,12 +408,10 @@ strong {
.table-view .table-view-cell { .table-view .table-view-cell {
position: relative; position: relative;
padding: 11px 60px 12px 15px; padding: 11px 60px 12px 15px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); border-bottom: 1px solid #dddddd;
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
background-image: none; border-bottom: 0;
} }
.table-view .table-view-cell > a:not([class*="button"]) { .table-view .table-view-cell > a:not([class*="button"]) {
position: relative; position: relative;
@ -446,10 +444,9 @@ strong {
margin-left: 0; margin-left: 0;
color: #999; color: #999;
font-weight: 500; font-weight: 500;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background-color: #fafafa; background-color: #fafafa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
} }
.table-view .table-view-divider:first-child { .table-view .table-view-divider:first-child {
top: 0; top: 0;
@ -548,10 +545,7 @@ input[type=search] {
height: 34px; height: 34px;
padding: 0 10px; padding: 0 10px;
font-size: 16px; font-size: 16px;
text-align: center; border-radius: 20px;
border-radius: 6px;
border-width: 0;
background-color: rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
} }
@ -583,28 +577,23 @@ select {
.input-group input { .input-group input {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border: 0; border-bottom: 1px solid #dddddd;
border-radius: 0; border-radius: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.input-group input:last-child { .input-group input:last-child {
background-image: none; border-bottom: 0;
} }
.input-row { .input-row {
overflow: hidden; overflow: hidden;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); border-bottom: 1px solid #dddddd;
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.input-row:last-child { .input-row:last-child {
background-image: none; border-bottom: 0;
} }
.input-row label { .input-row label {
@ -620,7 +609,7 @@ select {
width: 65%; width: 65%;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
background-image: none; border: 0;
} }
[class*="bar-"] input[type=search] { [class*="bar-"] input[type=search] {

4
lib/sass/bars.scss

@ -9,7 +9,7 @@
z-index: 10; z-index: 10;
height: $bar-base-height; height: $bar-base-height;
padding: 5px $bar-side-spacing; padding: 5px $bar-side-spacing;
border-bottom: 1px solid #ddd; border-bottom: $border-default;
background-color: $chrome-color; background-color: $chrome-color;
@ -138,7 +138,7 @@
.popover .bar-nav { .popover .bar-nav {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
border-bottom: 1px solid #ddd; border-bottom: $border-default;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
@include box-shadow(none); @include box-shadow(none);

19
lib/sass/forms.scss

@ -41,15 +41,12 @@ input[type="color"],
-webkit-appearance: none; -webkit-appearance: none;
} }
// Fully round search input // Rounded search input
input[type=search] { input[type=search] {
height: 34px; height: 34px;
padding: 0 10px; padding: 0 10px;
font-size: 16px; font-size: 16px;
text-align: center; border-radius: 20px;
border-radius: 6px;
border-width: 0;
background-color: rgba(0,0,0,.1);
box-sizing: border-box; // Override content-box in normalize box-sizing: border-box; // Override content-box in normalize
} }
input[type=search]:focus { input[type=search]:focus {
@ -87,30 +84,28 @@ select {
.input-group input { .input-group input {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border: 0; border-bottom: $border-default;
border-radius: 0; border-radius: 0;
@include box-shadow(none); @include box-shadow(none);
@include hairline(single, #c8c7cc, 15px);
} }
// Remove bottom border on last input to avoid double bottom border // Remove bottom border on last input to avoid double bottom border
.input-group input:last-child { .input-group input:last-child {
background-image: none; border-bottom: 0;
} }
// Input groups with labels // Input groups with labels
// -------------------------------------------------- // --------------------------------------------------
// To use labels with input groups, wrap a label and an input in an .input-row // To use labels with input groups, wrap a label and an input in an .input-row
.input-row { .input-row {
overflow: hidden; 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 // Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child { .input-row:last-child {
background-image: none; border-bottom: 0;
} }
// Labels get floated left with a set percentage width // Labels get floated left with a set percentage width
@ -128,7 +123,7 @@ select {
width: 65%; width: 65%;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
background-image: none; border: 0;
} }

20
lib/sass/table-views.scss

@ -12,14 +12,12 @@
.table-view-cell { .table-view-cell {
position: relative; 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. 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 // Remove the border from the last table view item
&:last-child { &:last-child {
background-image: none; border-bottom: 0;
} }
// If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though) // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
> a:not([class*="button"]) { > a:not([class*="button"]) {
position: relative; position: relative;
@ -32,14 +30,13 @@
background-color: #eee; background-color: #eee;
} }
} }
p { p {
margin: 0; margin: 0;
} }
} }
// Inset table views // Inset table views (Will be deprecated and changed into `.card` component)
// -------------------------------------------------- // --------------------------------------------------
&.inset { &.inset {
@ -47,7 +44,7 @@
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
border: 1px solid rgba(0, 0, 0, .15); 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 // Remove border from last standard list items to avoid double border at top/bottom of table views
li:last-child { li:last-child {
@ -67,18 +64,19 @@
margin-left: 0; margin-left: 0;
color: #999; color: #999;
font-weight: $font-weight; font-weight: $font-weight;
border-top: $border-default;
border-bottom: $border-default;
background-color: #fafafa; 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 // Rounding first divider on inset lists and remove border on the top
&:first-child { &:first-child {
top: 0; top: 0;
border-radius: 6px 6px 0 0; border-radius: $border-radius $border-radius 0 0;
} }
// Rounding last divider on inset table views // Rounding last divider on inset table views
&:last-child { &:last-child {
border-radius: 0 0 6px 6px; border-radius: 0 0 $border-radius $border-radius;
} }
} }

76
lib/sass/theme-ios

@ -9,8 +9,8 @@
// -------------------------------------------------- // --------------------------------------------------
// Main theme colors // Main theme colors
$primary-color: #007aff; $primary-color: #007aff;
$chrome-color: rgba(247,247,247,.98); $chrome-color: rgba(247,247,247,.98);
// Action colors // Action colors
$default-color: #929292; $default-color: #929292;
@ -23,18 +23,11 @@ $negative-color: #dd524d;
$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods $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,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"); // Thanks to @madrobby
// Bars // Bars
// -------------------------------------------------- // --------------------------------------------------
.bar { .bar {
border-bottom-width: 0; border-bottom: 0;
background-color: $chrome-color; background-color: $chrome-color;
@include box-shadow(0 0 1px rgba(0,0,0,.85)); @include box-shadow(0 0 1px rgba(0,0,0,.85));
} }
@ -46,3 +39,66 @@ $hairline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0,0,0,.15); border-bottom: 1px solid rgba(0,0,0,.15);
} }
// Table views
// --------------------------------------------------
.table-view {
.table-view-cell {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
// Remove the border from the last table view item
&:last-child {
background-image: none;
}
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
border-top: 0;
border-bottom: 0;
@include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset.
}
}
// Forms
// --------------------------------------------------
input[type=search] {
text-align: center;
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 6px;
}
input[type=search]:focus {
text-align: left;
}
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
.input-group input {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px);
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
background-image: none;
}
// Input groups with labels
// --------------------------------------------------
// To use labels with input groups, wrap a label and an input in an .input-row
.input-row {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child,
.input-row label + input {
background-image: none;
}

9
lib/sass/variables.scss

@ -27,6 +27,7 @@ $negative-color: #d9534f;
// Bars // Bars
// -------------------------------------------------- // --------------------------------------------------
$bar-base-height: 44px; $bar-base-height: 44px;
$bar-tab-height: 50px; $bar-tab-height: 50px;
$bar-side-spacing: 10px; $bar-side-spacing: 10px;
@ -34,16 +35,18 @@ $bar-side-spacing: 10px;
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
$button-directional-padding: 20px; $button-directional-padding: 20px;
$button-directional-margin: -($bar-side-spacing/2); $button-directional-margin: -($bar-side-spacing/2);
$button-font-size: 12px; $button-font-size: 12px;
// Transitions // Transitions
// -------------------------------------------------- // --------------------------------------------------
$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
// Misc // Borders
// -------------------------------------------------- // --------------------------------------------------
// Hairline dividers (.5px tall for retina devices.) $border-default: 1px solid #ddd;
$hairline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"); // Thanks to @madrobby $border-radius: 6px;

Loading…
Cancel
Save