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

breaking iOS styles into a seperate theme file.

pull/245/head
connors 11 years ago
parent
539b2fe5c1
commit
ab6d916251
5 changed files with 109 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. 97
      dist/ratchet.css
  2. 8
      lib/sass/bars.scss
  3. 6
      lib/sass/base.scss
  4. 48
      lib/sass/theme-ios
  5. 11
      lib/sass/variables.scss

97
dist/ratchet.css vendored
Unescape View File

@ -237,7 +237,7 @@ body {
} }
a { a {
color: #007aff; color: #428bca;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
@ -271,7 +271,7 @@ strong {
} }
.bar-tab ~ .content { .bar-tab ~ .content {
padding-bottom: 51px; padding-bottom: 50px;
} }
.bar-header-secondary ~ .content { .bar-header-secondary ~ .content {
@ -293,9 +293,8 @@ strong {
z-index: 10; z-index: 10;
height: 44px; height: 44px;
padding: 5px 10px; padding: 5px 10px;
background-color: rgba(247, 247, 247, 0.98); border-bottom: 1px solid #ddd;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); background-color: white;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
} }
[class*="bar-"].bar-header-secondary { [class*="bar-"].bar-header-secondary {
top: 44px; top: 44px;
@ -370,7 +369,7 @@ strong {
} }
.tab-item .tab-label, .tab-item .tab-label,
.tab-item .icon { .tab-item .icon {
color: #929292; color: white;
} }
.tab-item .tab-label { .tab-item .tab-label {
margin-top: -2px; margin-top: -2px;
@ -385,13 +384,13 @@ strong {
.tab-item.active .tab-label, .tab-item.active .tab-label,
.tab-item.active .icon, .tab-item:active .tab-label, .tab-item.active .icon, .tab-item:active .tab-label,
.tab-item:active .icon { .tab-item:active .icon {
color: #007aff; color: #428bca;
} }
.popover .bar-nav { .popover .bar-nav {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid #ddd;
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;
@ -409,7 +408,7 @@ 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='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>"); 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-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -448,7 +447,7 @@ strong {
color: #999; color: #999;
font-weight: 500; font-weight: 500;
background-color: #fafafa; background-color: #fafafa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>"); 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-position: 0 100%, 0 0%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -588,7 +587,7 @@ select {
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='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>"); 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-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -599,7 +598,7 @@ select {
.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='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>"); 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-position: 15px 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -637,12 +636,12 @@ select {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 1.15; line-height: 1.15;
color: #929292; color: white;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
border: 1px solid #929292; border: 1px solid white;
border-radius: 4px; border-radius: 4px;
-webkit-transition: background-color, opacity, color; -webkit-transition: background-color, opacity, color;
transition: background-color, opacity, color; transition: background-color, opacity, color;
@ -653,42 +652,42 @@ select {
} }
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { [class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
color: #fff; color: #fff;
background-color: #929292; background-color: white;
} }
[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active { [class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
opacity: .6; opacity: .6;
} }
.button-primary { .button-primary {
color: #007aff; color: #428bca;
border: 1px solid #007aff; border: 1px solid #428bca;
} }
.button-primary:active, .button-primary.active, .button-primary.button-filled { .button-primary:active, .button-primary.active, .button-primary.button-filled {
background-color: #007aff; background-color: #428bca;
} }
.button-positive { .button-positive {
color: #4cd964; color: #5cb85c;
border: 1px solid #4cd964; border: 1px solid #5cb85c;
} }
.button-positive:active, .button-positive.active, .button-positive.button-filled { .button-positive:active, .button-positive.active, .button-positive.button-filled {
background-color: #4cd964; background-color: #5cb85c;
} }
.button-negative { .button-negative {
color: #dd524d; color: #d9534f;
border: 1px solid #dd524d; border: 1px solid #d9534f;
} }
.button-negative:active, .button-negative.active, .button-negative.button-filled { .button-negative:active, .button-negative.active, .button-negative.button-filled {
background-color: #dd524d; background-color: #d9534f;
} }
.button-link { .button-link {
color: #007aff; color: #428bca;
border: none; border: none;
} }
.button-link:active, .button-link.active { .button-link:active, .button-link.active {
color: #007aff; color: #428bca;
opacity: .3; opacity: .3;
} }
.button-link.button-filled { .button-link.button-filled {
@ -710,7 +709,7 @@ select {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 44px; line-height: 44px;
color: #007aff; color: #428bca;
border: 0; border: 0;
-webkit-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
@ -732,7 +731,7 @@ select {
.bar-nav .button-next.active, .bar-nav .button-next.active,
.bar-nav .button-primary:active, .bar-nav .button-primary:active,
.bar-nav .button-primary.active { .bar-nav .button-primary.active {
color: #007aff; color: #428bca;
background-color: transparent; background-color: transparent;
opacity: .3; opacity: .3;
} }
@ -747,7 +746,7 @@ select {
display: block; display: block;
width: 15px; width: 15px;
height: 3px; height: 3px;
background-color: #007aff; background-color: #428bca;
content: ''; content: '';
} }
.bar-nav .button-prev { .bar-nav .button-prev {
@ -830,36 +829,36 @@ input[type="button"] {
[class*="badge"] { [class*="badge"] {
display: inline-block; display: inline-block;
color: #929292; color: white;
} }
[class*="badge"].badge-filled { [class*="badge"].badge-filled {
padding: 2px 9px; padding: 2px 9px;
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
background-color: #929292; background-color: white;
border-radius: 100px; border-radius: 100px;
} }
.badge-primary { .badge-primary {
color: #007aff; color: #428bca;
} }
.badge-primary.badge-filled { .badge-primary.badge-filled {
background-color: #007aff; background-color: #428bca;
} }
.badge-positive { .badge-positive {
color: #4cd964; color: #5cb85c;
} }
.badge-positive.badge-filled { .badge-positive.badge-filled {
background-color: #4cd964; background-color: #5cb85c;
} }
.badge-negative { .badge-negative {
color: #dd524d; color: #d9534f;
} }
.badge-negative.badge-filled { .badge-negative.badge-filled {
background-color: #dd524d; background-color: #d9534f;
} }
[class*="button"] [class*="badge"] { [class*="button"] [class*="badge"] {
@ -890,7 +889,7 @@ input[type="button"] {
font-weight: 400; font-weight: 400;
list-style: none; list-style: none;
background-color: transparent; background-color: transparent;
border: 1px solid #007aff; border: 1px solid #428bca;
border-radius: 4px; border-radius: 4px;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; box-orient: horizontal;
@ -899,7 +898,7 @@ input[type="button"] {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border-left: 1px solid #007aff; border-left: 1px solid #428bca;
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; box-flex: 1;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear;
@ -910,7 +909,7 @@ input[type="button"] {
padding: 6px 16px 7px; padding: 6px 16px 7px;
overflow: hidden; overflow: hidden;
line-height: 1; line-height: 1;
color: #007aff; color: #428bca;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.segmented-controller li:first-child { .segmented-controller li:first-child {
@ -920,7 +919,7 @@ input[type="button"] {
background-color: #d5e9ff; background-color: #d5e9ff;
} }
.segmented-controller li.selected { .segmented-controller li.selected {
background-color: #007aff; background-color: #428bca;
} }
.segmented-controller li.selected > a { .segmented-controller li.selected > a {
color: #fff; color: #fff;
@ -956,7 +955,7 @@ input[type="button"] {
display: none; display: none;
width: 280px; width: 280px;
margin-left: -140px; margin-left: -140px;
background-color: rgba(247, 247, 247, 0.98); background-color: white;
border-radius: 12px; border-radius: 12px;
opacity: 0; opacity: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
@ -974,7 +973,7 @@ input[type="button"] {
margin-left: -15px; margin-left: -15px;
content: ''; content: '';
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-bottom: 15px solid rgba(247, 247, 247, 0.98); border-bottom: 15px solid white;
border-left: 15px solid transparent; border-left: 15px solid transparent;
} }
.popover.visible { .popover.visible {
@ -1030,11 +1029,11 @@ input[type="button"] {
} }
.alert-positive { .alert-positive {
background-color: rgba(76, 217, 100, 0.97); background-color: rgba(92, 184, 92, 0.97);
} }
.alert-negative { .alert-negative {
background-color: rgba(221, 82, 77, 0.97); background-color: rgba(217, 83, 79, 0.97);
} }
.alert-inline { .alert-inline {
@ -1132,12 +1131,12 @@ input[type="button"] {
width: 35px; width: 35px;
} }
.toggle.active { .toggle.active {
border: 2px solid #4cd964; border: 2px solid #5cb85c;
-webkit-box-shadow: inset 0 0 0 13px #4cd964; -webkit-box-shadow: inset 0 0 0 13px #5cb85c;
box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #5cb85c;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #4cd964; border-color: #5cb85c;
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0);
} }

8
lib/sass/bars.scss
Unescape View File

@ -9,8 +9,9 @@
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;
background-color: $chrome-color; background-color: $chrome-color;
@include box-shadow(0 0 1px rgba(0,0,0,.85));
// Modifier class to dock any bar below .bar-nav // Modifier class to dock any bar below .bar-nav
&.bar-header-secondary { &.bar-header-secondary {
@ -130,17 +131,18 @@
} }
} }
// Nav bar in popovers // Nav bar in popovers
// -------------------------------------------------- // --------------------------------------------------
.popover .bar-nav { .popover .bar-nav {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
border-bottom: 1px solid rgba(0,0,0,.15); border-bottom: 1px solid #ddd;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
@include box-shadow(none); @include box-shadow(none);
.title + [class*="button"]:last-child { .title + [class*="button"]:last-child {
right: 15px; right: 15px;
} }
} }

6
lib/sass/base.scss
Unescape View File

@ -55,13 +55,13 @@ strong {
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
// Note: For these to work, content must come after both bars in the markup // Note: For these to work, content must come after both bars in the markup
.bar-nav ~ .content { .bar-nav ~ .content {
padding-top: 44px; padding-top: $bar-base-height;
} }
.bar-tab ~ .content { .bar-tab ~ .content {
padding-bottom: 51px; padding-bottom: $bar-tab-height;
} }
.bar-header-secondary ~ .content { .bar-header-secondary ~ .content {
padding-top: 88px; padding-top: $bar-base-height*2;
} }
// Utility classes // Utility classes

48
lib/sass/theme-ios
Unescape View File

@ -0,0 +1,48 @@
//
// iOS theme
// Provides the visual and interaction style from iOS
//
// --------------------------------------------------
// Colors
// --------------------------------------------------
// Main theme colors
$primary-color: #007aff;
$chrome-color: rgba(247,247,247,.98);
// Action colors
$default-color: #929292;
$positive-color: #4cd964;
$negative-color: #dd524d;
// iOS style transitions
// --------------------------------------------------
$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
// --------------------------------------------------
.bar {
border-bottom-width: 0;
background-color: $chrome-color;
@include box-shadow(0 0 1px rgba(0,0,0,.85));
}
// Nav bar in popovers
// --------------------------------------------------
.popover .bar-nav {
border-bottom: 1px solid rgba(0,0,0,.15);
}

11
lib/sass/variables.scss
Unescape View File

@ -16,13 +16,13 @@ $line-height-default: 21px;
// -------------------------------------------------- // --------------------------------------------------
// Main theme colors // Main theme colors
$primary-color: #007aff; $primary-color: #428bca;
$chrome-color: rgba(247,247,247,.98); $chrome-color: #fff;
// Action colors // Action colors
$default-color: #929292; $default-color: #fff;
$positive-color: #4cd964; $positive-color: #5cb85c;
$negative-color: #dd524d; $negative-color: #d9534f;
// Bars // Bars
@ -38,7 +38,6 @@ $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

Write Preview
Loading…
Cancel
Save