playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

more of the ios theme pulled out.

pull/245/head
connors 11 years ago
parent
ab6d916251
commit
1e25d4d0a5
6 changed files with 102 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save