From 8d2c2af3be0b5c6db914a93028f8484a362f106b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Fri, 25 Oct 2013 17:46:27 +0200 Subject: [PATCH 01/45] Kick up grunt-contrib-jshint dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6160654..94ead5b 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-jshint": "~0.6.4", + "grunt-contrib-jshint": "~0.7.0", "grunt-contrib-nodeunit": "~0.2.2", "grunt-contrib-sass": "~0.5.0", "grunt-contrib-watch": "~0.5.3", From b8655fb37e06117ed8428f3ef291e53cf4e3a302 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Fri, 25 Oct 2013 21:08:25 +0200 Subject: [PATCH 02/45] Simplify icon styles --- lib/sass/ratchicons.scss | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss index 8f1b436..2df9a9f 100644 --- a/lib/sass/ratchicons.scss +++ b/lib/sass/ratchicons.scss @@ -7,32 +7,32 @@ src: url("ratchicons/ratchicons.eot"); src: url("ratchicons/ratchicons.eot?#iefix") format("embedded-opentype"), url("ratchicons/ratchicons.woff") format("woff"), - url("ratchicons/ratchicons.ttf") format("truetype"), + url("ratchicons/ratchicons.ttf") format("truetype"), url("ratchicons/ratchicons.svg#svgFontName") format("svg"); font-weight: normal; font-style: normal; } .icon { display: inline-block; - font-family: "Ratchicons", sans-serif; + font-family: Ratchicons; font-size: 24px; text-decoration: none; line-height: 1; cursor: default; -webkit-font-smoothing: antialiased; +} - &.icon-down:before { content: '\f00b'} - &.icon-download:before { content: '\f005'} - &.icon-left:before { content: '\f00c'} - &.icon-list:before { content: '\f008'} - &.icon-pages:before { content: '\f000'} - &.icon-refresh:before { content: '\f009'} - &.icon-right:before { content: '\f00d'} - &.icon-search:before { content: '\f007'} - &.icon-share:before { content: '\f00a'} - &.icon-sound:before { content: '\f001'} - &.icon-sound2:before { content: '\f002'} - &.icon-sound3:before { content: '\f003'} - &.icon-sound4:before { content: '\f004'} - &.icon-up:before { content: '\f00e'} -} \ No newline at end of file +.icon-down:before { content: '\f00b'} +.icon-download:before { content: '\f005'} +.icon-left:before { content: '\f00c'} +.icon-list:before { content: '\f008'} +.icon-pages:before { content: '\f000'} +.icon-refresh:before { content: '\f009'} +.icon-right:before { content: '\f00d'} +.icon-search:before { content: '\f007'} +.icon-share:before { content: '\f00a'} +.icon-sound:before { content: '\f001'} +.icon-sound2:before { content: '\f002'} +.icon-sound3:before { content: '\f003'} +.icon-sound4:before { content: '\f004'} +.icon-up:before { content: '\f00e'} \ No newline at end of file From 6c1aff83c86e770cfaef97503807a88ab9ad7e9f Mon Sep 17 00:00:00 2001 From: Connor Sears Date: Sat, 26 Oct 2013 12:57:39 +0100 Subject: [PATCH 03/45] oxford comma --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6df1d51..220f9db 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Ratchet v2.0 WIP -Prototype mobile apps with simple HTML, CSS and JS components. +Prototype mobile apps with simple HTML, CSS, and JS components. ## Getting Started From 92d4a572cd9ddc7089d4e228b4f3de492d89d6a8 Mon Sep 17 00:00:00 2001 From: Connor Sears Date: Sat, 2 Nov 2013 21:23:26 -0700 Subject: [PATCH 04/45] updating download link. will work once release tag in generated. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 220f9db..7b9fcb7 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Prototype mobile apps with simple HTML, CSS, and JS components. ## Getting Started -- Clone the repo with `git clone https://github.com/maker/ratchet.git` or just [download](http://maker.github.io/ratchet/ratchet.zip) the bundled CSS and JS +- Clone the repo with `git clone https://github.com/maker/ratchet.git` or just [download](http://github.com/maker/ratchet/archive/v2.0.0.zip) the bundled CSS and JS - [Read the docs](http://maker.github.io/ratchet) to learn about the components and how to get a prototype on your phone - We will have example apps to check out very soon! From ab6d916251c201776c4e82292e0fc5bbba0375fa Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 13:02:55 -0800 Subject: [PATCH 05/45] breaking iOS styles into a seperate theme file. --- dist/ratchet.css | 97 ++++++++++++++++++++--------------------- lib/sass/bars.scss | 8 ++-- lib/sass/base.scss | 6 +-- lib/sass/theme-ios | 48 ++++++++++++++++++++ lib/sass/variables.scss | 11 +++-- 5 files changed, 109 insertions(+), 61 deletions(-) create mode 100644 lib/sass/theme-ios diff --git a/dist/ratchet.css b/dist/ratchet.css index bba8e0f..6d23062 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -237,7 +237,7 @@ body { } a { - color: #007aff; + color: #428bca; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @@ -271,7 +271,7 @@ strong { } .bar-tab ~ .content { - padding-bottom: 51px; + padding-bottom: 50px; } .bar-header-secondary ~ .content { @@ -293,9 +293,8 @@ strong { z-index: 10; height: 44px; padding: 5px 10px; - background-color: rgba(247, 247, 247, 0.98); - -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); + border-bottom: 1px solid #ddd; + background-color: white; } [class*="bar-"].bar-header-secondary { top: 44px; @@ -370,7 +369,7 @@ strong { } .tab-item .tab-label, .tab-item .icon { - color: #929292; + color: white; } .tab-item .tab-label { margin-top: -2px; @@ -385,13 +384,13 @@ strong { .tab-item.active .tab-label, .tab-item.active .icon, .tab-item:active .tab-label, .tab-item:active .icon { - color: #007aff; + color: #428bca; } .popover .bar-nav { padding-right: 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; -webkit-box-shadow: none; box-shadow: none; @@ -409,7 +408,7 @@ strong { .table-view .table-view-cell { position: relative; padding: 11px 60px 12px 15px; - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: 15px 100%; background-repeat: no-repeat; } @@ -448,7 +447,7 @@ strong { color: #999; font-weight: 500; background-color: #fafafa; - background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-position: 0 100%, 0 0%; background-repeat: no-repeat; } @@ -588,7 +587,7 @@ select { border-radius: 0; -webkit-box-shadow: none; box-shadow: none; - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: 15px 100%; background-repeat: no-repeat; } @@ -599,7 +598,7 @@ select { .input-row { overflow: hidden; - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: 15px 100%; background-repeat: no-repeat; } @@ -637,12 +636,12 @@ select { font-size: 12px; font-weight: 400; line-height: 1.15; - color: #929292; + color: white; text-align: center; vertical-align: top; cursor: pointer; background-color: transparent; - border: 1px solid #929292; + border: 1px solid white; border-radius: 4px; -webkit-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 { color: #fff; - background-color: #929292; + background-color: white; } [class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active { opacity: .6; } .button-primary { - color: #007aff; - border: 1px solid #007aff; + color: #428bca; + border: 1px solid #428bca; } .button-primary:active, .button-primary.active, .button-primary.button-filled { - background-color: #007aff; + background-color: #428bca; } .button-positive { - color: #4cd964; - border: 1px solid #4cd964; + color: #5cb85c; + border: 1px solid #5cb85c; } .button-positive:active, .button-positive.active, .button-positive.button-filled { - background-color: #4cd964; + background-color: #5cb85c; } .button-negative { - color: #dd524d; - border: 1px solid #dd524d; + color: #d9534f; + border: 1px solid #d9534f; } .button-negative:active, .button-negative.active, .button-negative.button-filled { - background-color: #dd524d; + background-color: #d9534f; } .button-link { - color: #007aff; + color: #428bca; border: none; } .button-link:active, .button-link.active { - color: #007aff; + color: #428bca; opacity: .3; } .button-link.button-filled { @@ -710,7 +709,7 @@ select { font-size: 16px; font-weight: 400; line-height: 44px; - color: #007aff; + color: #428bca; border: 0; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; @@ -732,7 +731,7 @@ select { .bar-nav .button-next.active, .bar-nav .button-primary:active, .bar-nav .button-primary.active { - color: #007aff; + color: #428bca; background-color: transparent; opacity: .3; } @@ -747,7 +746,7 @@ select { display: block; width: 15px; height: 3px; - background-color: #007aff; + background-color: #428bca; content: ''; } .bar-nav .button-prev { @@ -830,36 +829,36 @@ input[type="button"] { [class*="badge"] { display: inline-block; - color: #929292; + color: white; } [class*="badge"].badge-filled { padding: 2px 9px; color: #fff; font-size: 13px; line-height: 1; - background-color: #929292; + background-color: white; border-radius: 100px; } .badge-primary { - color: #007aff; + color: #428bca; } .badge-primary.badge-filled { - background-color: #007aff; + background-color: #428bca; } .badge-positive { - color: #4cd964; + color: #5cb85c; } .badge-positive.badge-filled { - background-color: #4cd964; + background-color: #5cb85c; } .badge-negative { - color: #dd524d; + color: #d9534f; } .badge-negative.badge-filled { - background-color: #dd524d; + background-color: #d9534f; } [class*="button"] [class*="badge"] { @@ -890,7 +889,7 @@ input[type="button"] { font-weight: 400; list-style: none; background-color: transparent; - border: 1px solid #007aff; + border: 1px solid #428bca; border-radius: 4px; -webkit-box-orient: horizontal; box-orient: horizontal; @@ -899,7 +898,7 @@ input[type="button"] { overflow: hidden; text-align: center; white-space: nowrap; - border-left: 1px solid #007aff; + border-left: 1px solid #428bca; -webkit-box-flex: 1; box-flex: 1; -webkit-transition: background-color 0.1s linear; @@ -910,7 +909,7 @@ input[type="button"] { padding: 6px 16px 7px; overflow: hidden; line-height: 1; - color: #007aff; + color: #428bca; text-overflow: ellipsis; } .segmented-controller li:first-child { @@ -920,7 +919,7 @@ input[type="button"] { background-color: #d5e9ff; } .segmented-controller li.selected { - background-color: #007aff; + background-color: #428bca; } .segmented-controller li.selected > a { color: #fff; @@ -956,7 +955,7 @@ input[type="button"] { display: none; width: 280px; margin-left: -140px; - background-color: rgba(247, 247, 247, 0.98); + background-color: white; border-radius: 12px; opacity: 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); @@ -974,7 +973,7 @@ input[type="button"] { margin-left: -15px; content: ''; 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; } .popover.visible { @@ -1030,11 +1029,11 @@ input[type="button"] { } .alert-positive { - background-color: rgba(76, 217, 100, 0.97); + background-color: rgba(92, 184, 92, 0.97); } .alert-negative { - background-color: rgba(221, 82, 77, 0.97); + background-color: rgba(217, 83, 79, 0.97); } .alert-inline { @@ -1132,12 +1131,12 @@ input[type="button"] { width: 35px; } .toggle.active { - border: 2px solid #4cd964; - -webkit-box-shadow: inset 0 0 0 13px #4cd964; - box-shadow: inset 0 0 0 13px #4cd964; + border: 2px solid #5cb85c; + -webkit-box-shadow: inset 0 0 0 13px #5cb85c; + box-shadow: inset 0 0 0 13px #5cb85c; } .toggle.active .toggle-handle { - border-color: #4cd964; + border-color: #5cb85c; -webkit-transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0); } diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 641d37d..62c06f0 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -9,8 +9,9 @@ z-index: 10; height: $bar-base-height; padding: 5px $bar-side-spacing; + border-bottom: 1px solid #ddd; background-color: $chrome-color; - @include box-shadow(0 0 1px rgba(0,0,0,.85)); + // Modifier class to dock any bar below .bar-nav &.bar-header-secondary { @@ -130,17 +131,18 @@ } } + // Nav bar in popovers // -------------------------------------------------- .popover .bar-nav { padding-right: 15px; padding-left: 15px; - border-bottom: 1px solid rgba(0,0,0,.15); + border-bottom: 1px solid #ddd; border-radius: 12px 12px 0 0; @include box-shadow(none); .title + [class*="button"]:last-child { right: 15px; } -} \ No newline at end of file +} diff --git a/lib/sass/base.scss b/lib/sass/base.scss index 7616bb8..86a7cc2 100644 --- a/lib/sass/base.scss +++ b/lib/sass/base.scss @@ -55,13 +55,13 @@ strong { // 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 .bar-nav ~ .content { - padding-top: 44px; + padding-top: $bar-base-height; } .bar-tab ~ .content { - padding-bottom: 51px; + padding-bottom: $bar-tab-height; } .bar-header-secondary ~ .content { - padding-top: 88px; + padding-top: $bar-base-height*2; } // Utility classes diff --git a/lib/sass/theme-ios b/lib/sass/theme-ios new file mode 100644 index 0000000..b497dc1 --- /dev/null +++ b/lib/sass/theme-ios @@ -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,"); // 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); +} diff --git a/lib/sass/variables.scss b/lib/sass/variables.scss index 6c92e48..f23ad20 100644 --- a/lib/sass/variables.scss +++ b/lib/sass/variables.scss @@ -16,13 +16,13 @@ $line-height-default: 21px; // -------------------------------------------------- // Main theme colors -$primary-color: #007aff; -$chrome-color: rgba(247,247,247,.98); +$primary-color: #428bca; +$chrome-color: #fff; // Action colors -$default-color: #929292; -$positive-color: #4cd964; -$negative-color: #dd524d; +$default-color: #fff; +$positive-color: #5cb85c; +$negative-color: #d9534f; // Bars @@ -38,7 +38,6 @@ $button-directional-padding: 20px; $button-directional-margin: -($bar-side-spacing/2); $button-font-size: 12px; - // Transitions // -------------------------------------------------- $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods From 1e25d4d0a56d2dbc9495e2b469966e597788e605 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 13:49:14 -0800 Subject: [PATCH 06/45] 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; From 511e2863801fa24a08fb0f3ed41a5c23da27dfe7 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 14:46:56 -0800 Subject: [PATCH 07/45] moving over buttons --- dist/ratchet.css | 44 +++++++++++++------------ lib/sass/badges.scss | 10 +++--- lib/sass/buttons.scss | 28 ++++++++-------- lib/sass/forms.scss | 5 ++- lib/sass/table-views.scss | 2 +- lib/sass/theme-ios | 69 ++++++++++++++++++++++++++++++++++++++- 6 files changed, 118 insertions(+), 40 deletions(-) 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; + } +} From 4791ba69214d42536da1718c350a1ca35d418090 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 15:40:04 -0800 Subject: [PATCH 08/45] move the push, segmented controllers, and popover styles over to the ios theme. --- dist/ratchet.css | 4 +- lib/sass/popovers.scss | 3 +- lib/sass/push.scss | 23 +---------- lib/sass/segmented-controllers.scss | 3 +- lib/sass/theme-ios | 60 +++++++++++++++++++++++++++++ 5 files changed, 65 insertions(+), 28 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 4775d20..e150bb5 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -881,7 +881,7 @@ input[type="button"] { font-size: 12px; font-weight: 400; list-style: none; - background-color: transparent; + background-color: white; border: 1px solid #428bca; border-radius: 4px; -webkit-box-orient: horizontal; @@ -894,8 +894,6 @@ input[type="button"] { border-left: 1px solid #428bca; -webkit-box-flex: 1; box-flex: 1; - -webkit-transition: background-color 0.1s linear; - transition: background-color 0.1s linear; } .segmented-controller li > a { display: block; diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss index b61e5e4..bbf7f91 100644 --- a/lib/sass/popovers.scss +++ b/lib/sass/popovers.scss @@ -11,11 +11,10 @@ width: 280px; margin-left: -140px; background-color: $chrome-color; - border-radius: 12px; + border-radius: $border-radius; opacity: 0; box-shadow: 0 0 15px rgba(0, 0, 0, .1); @include transform(translate3d(0, -15px, 0)); - @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) &:after { diff --git a/lib/sass/push.scss b/lib/sass/push.scss index 0e72124..8095b7a 100644 --- a/lib/sass/push.scss +++ b/lib/sass/push.scss @@ -8,34 +8,21 @@ &.fade { left: 0; opacity: 0; - @include transition(opacity .2s ease-in-out); &.in { opacity: 1; } } - // Slide animation iOS7 + // Slide animation &.slide { z-index: 2; @include transition(-webkit-transform .4s); @include transform(translate3d(0, 0, 0)); - @include transition-timing-function ($timing-fuction); - - // Adding the overlay - &.sliding-in, - &.right:not([class*="sliding-in"]) { - @include animation-name(fadeOverlay); - @include animation-duration(.4s); - } - - &.right:not([class*="sliding-in"]) { - @include animation-direction(reverse); - } &.left { z-index: 1; - @include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect + @include transform(translate3d(100%, 0, 0)); } &.right { @@ -44,9 +31,3 @@ } } } - -// Overlay animation for the slide transition -@-webkit-keyframes fadeOverlay { - from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); } - to { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); } -} \ No newline at end of file diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss index e3083b9..df65b18 100644 --- a/lib/sass/segmented-controllers.scss +++ b/lib/sass/segmented-controllers.scss @@ -11,7 +11,7 @@ font-size: 12px; font-weight: $font-weight-light; list-style: none; - background-color: transparent; + background-color: $chrome-color; border: 1px solid $primary-color; border-radius: 4px; @include box-orient(horizontal); @@ -23,7 +23,6 @@ white-space: nowrap; border-left: 1px solid $primary-color; @include box-flex(1); - @include transition(background-color .1s linear); // Link that fills each section > a { diff --git a/lib/sass/theme-ios b/lib/sass/theme-ios index 29da48a..7c8e592 100644 --- a/lib/sass/theme-ios +++ b/lib/sass/theme-ios @@ -158,6 +158,7 @@ input[type=search]:focus { } } + // // Badges // -------------------------------------------------- @@ -169,3 +170,62 @@ input[type=search]:focus { color: #fff; } } + + +// +// Segmented controllers +// -------------------------------------------------- + +.segmented-controller { + background-color: transparent; + + li { + @include transition(background-color .1s linear); + } +} + + +// +// Popovers +// -------------------------------------------------- + +.popover { + border-radius: 12px; + @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); +} + +// +// Push styles +// -------------------------------------------------- +.content { + + // Fade animation + &.fade { + @include transition(opacity .2s ease-in-out); + } + // Slide animation + &.slide { + @include transition-timing-function ($timing-fuction); + + // Adding the overlay + &.sliding-in, + &.right:not([class*="sliding-in"]) { + @include animation-name(fadeOverlay); + @include animation-duration(.4s); + } + + &.right:not([class*="sliding-in"]) { + @include animation-direction(reverse); + } + + &.left { + @include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect + } + } +} + +// Overlay animation for the slide transition +@-webkit-keyframes fadeOverlay { + from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); } + to { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); } +} From 43c5c76c4e5732c99b59ef57b2e84621fa68c661 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 16:16:25 -0800 Subject: [PATCH 09/45] moving over and fix a few more things. --- dist/ratchet.css | 73 ++++++++----------------------------------- lib/sass/bars.scss | 3 +- lib/sass/buttons.scss | 4 +-- lib/sass/forms.scss | 5 ++- lib/sass/modals.scss | 2 -- lib/sass/theme-ios | 63 +++++++++++++++++++++++++++++++++++-- lib/sass/toggles.scss | 19 +++-------- 7 files changed, 83 insertions(+), 86 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index e150bb5..c6c71df 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -347,6 +347,7 @@ strong { bottom: 0; height: 50px; padding: 0; + border-top: 1px solid #dddddd; } .tab-inner { @@ -369,7 +370,7 @@ strong { } .tab-item .tab-label, .tab-item .icon { - color: white; + color: #929292; } .tab-item .tab-label { margin-top: -2px; @@ -530,8 +531,8 @@ input[type="tel"], input[type="color"], .input-group { width: 100%; - height: 40px; - padding: 10px 15px; + height: 35px; + padding: 0 10px; margin-bottom: 10px; line-height: 21px; background-color: #fff; @@ -542,7 +543,6 @@ input[type="color"], } input[type=search] { - height: 34px; padding: 0 10px; font-size: 16px; border-radius: 20px; @@ -634,7 +634,7 @@ select { cursor: pointer; background-color: white; border: 1px solid #dddddd; - border-radius: 6px; + border-radius: 4px; } [class*="button"].button-filled { background-color: white; @@ -702,8 +702,6 @@ select { color: #428bca; background-color: transparent; border: 0; - -webkit-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; -webkit-box-flex: 0; box-flex: 0; } @@ -947,13 +945,11 @@ input[type="button"] { width: 280px; margin-left: -140px; background-color: white; - border-radius: 12px; + border-radius: 6px; opacity: 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); - -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .popover:after { position: absolute; @@ -1045,8 +1041,6 @@ input[type="button"] { transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.25s, opacity 0.25s; transition: -webkit-transform 0.25s, opacity 0.25s; - -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); - transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); } .modal.active { opacity: 1; @@ -1055,8 +1049,6 @@ input[type="button"] { transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; - -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); - transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); } .slider, @@ -1092,12 +1084,10 @@ input[type="button"] { width: 47px; height: 30px; background-color: #fff; - border: 2px solid #e6e6e6; + border: 2px solid #ddd; border-radius: 20px; - -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; - box-shadow: inset 0 0 0 0 #e1e1e1; - -webkit-transition-property: box-shadow, border; - transition-property: box-shadow, border; + -webkit-transition-property: background-color, border; + transition-property: background-color, border; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } @@ -1109,39 +1099,26 @@ input[type="button"] { width: 28px; height: 28px; background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.2); + border: 1px solid #ddd; border-radius: 100px; - -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); -webkit-transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } -.toggle:active .toggle-handle { - width: 35px; -} .toggle.active { border: 2px solid #5cb85c; - -webkit-box-shadow: inset 0 0 0 13px #5cb85c; - box-shadow: inset 0 0 0 13px #5cb85c; + background-color: #5cb85c; } .toggle.active .toggle-handle { border-color: #5cb85c; -webkit-transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0); } -.toggle.active:active .toggle-handle, -.toggle.active .toggle-handle:active { - -webkit-transform: translate3d(10px, 0, 0) !important; - transform: translate3d(10px, 0, 0) !important; -} .content.fade { left: 0; opacity: 0; - -webkit-transition: opacity 0.2s ease-in-out; - transition: opacity 0.2s ease-in-out; } .content.fade.in { opacity: 1; @@ -1152,23 +1129,11 @@ input[type="button"] { transition: -webkit-transform 0.4s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); - -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); - transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -} -.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) { - -webkit-animation-name: fadeOverlay; - animation-name: fadeOverlay; - -webkit-animation-duration: 0.4s; - animation-duration: 0.4s; -} -.content.slide.right:not([class*="sliding-in"]) { - -webkit-animation-direction: reverse; - animation-direction: reverse; } .content.slide.left { z-index: 1; - -webkit-transform: translate3d(-20%, 0, 0); - transform: translate3d(-20%, 0, 0); + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } .content.slide.right { z-index: 3; @@ -1176,18 +1141,6 @@ input[type="button"] { transform: translate3d(100%, 0, 0); } -@-webkit-keyframes fadeOverlay { - from { - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); - box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); - } - - to { - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); - } -} - @font-face { font-family: "Ratchicons"; src: url("ratchicons/ratchicons.eot"); diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 2107748..392f931 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -83,6 +83,7 @@ bottom: 0; height: $bar-tab-height; padding: 0; + border-top: $border-default; } // Wrapper for individual tab @@ -105,7 +106,7 @@ .tab-label, .icon { - color: $default-color; + color: #929292; } // Label for tab diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index dfe2933..e8921a1 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -16,7 +16,7 @@ cursor: pointer; background-color: $chrome-color; border: $border-default; - border-radius: $border-radius; + border-radius: 4px; &.button-filled { background-color: $chrome-color; @@ -105,7 +105,6 @@ // -------------------------------------------------- .bar-nav { - // Generic style for all buttons in .bar-title [class*="button"] { position: relative; @@ -118,7 +117,6 @@ 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 136cdb1..a7942db 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -30,8 +30,8 @@ input[type="tel"], input[type="color"], .input-group { width: 100%; - height: 40px; - padding: 10px 15px; + height: 35px; + padding: 0 10px; margin-bottom: 10px; line-height: $line-height-default; background-color: #fff; @@ -43,7 +43,6 @@ input[type="color"], // Rounded search input input[type=search] { - height: 34px; padding: 0 10px; font-size: 16px; border-radius: 20px; diff --git a/lib/sass/modals.scss b/lib/sass/modals.scss index f05162c..d32fe8a 100644 --- a/lib/sass/modals.scss +++ b/lib/sass/modals.scss @@ -13,7 +13,6 @@ background-color: #fff; @include transform(translate3d(0, 100%, 0)); @include transition(-webkit-transform .25s, opacity .25s); - @include transition-timing-function($timing-fuction); // Active modal &.active { @@ -21,6 +20,5 @@ height: 100%; @include transform(translate3d(0, 0, 0)); @include transition(-webkit-transform .25s); - @include transition-timing-function($timing-fuction); } } \ No newline at end of file diff --git a/lib/sass/theme-ios b/lib/sass/theme-ios index 7c8e592..9f56872 100644 --- a/lib/sass/theme-ios +++ b/lib/sass/theme-ios @@ -32,6 +32,11 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods @include box-shadow(0 0 1px rgba(0,0,0,.85)); } +.bar-tab { + border-top: 0; + @include box-shadow(0 0 -1px rgba(0,0,0,.85)); +} + // Nav bar in popovers // -------------------------------------------------- @@ -89,11 +94,13 @@ input[type="url"], input[type="tel"], input[type="color"], .input-group { - border: 1px solid rgba(0, 0, 0, .2); + height: 40px; + padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); } // Rounded search input input[type=search] { + height: 34px; text-align: center; background-color: rgba(0,0,0,.1); border: 0; @@ -135,7 +142,6 @@ input[type=search]:focus { [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); @@ -158,6 +164,13 @@ input[type=search]:focus { } } +// Buttons in nav bars +// -------------------------------------------------- + +.bar-nav { + @include transition(opacity .2s linear); +} + // // Badges @@ -194,6 +207,52 @@ input[type=search]:focus { @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); } + +// +// Modal styles +// -------------------------------------------------- + +.modal { + @include transition-timing-function($timing-fuction); + + // Active modal + &.active { + @include transition-timing-function($timing-fuction); + } +} + +// +// Toggles styles +// -------------------------------------------------- +.toggle { + border: 2px solid #e6e6e6; + @include box-shadow(inset 0 0 0 0 #e1e1e1); + @include transition-property(box-shadow, border); + @include transition-duration(.2s); + + // Sliding handle + .toggle-handle { + border: 1px solid rgba(0, 0, 0, .2); + @include box-shadow(0 3px 3px rgba(0,0,0,.08)); + @include transition-property(-webkit-transform, border, width); + } + &:active .toggle-handle { + width: 35px; + } + // Active state for toggle + &.active { + background-color: transparent; + @include box-shadow(inset 0 0 0 13px $positive-color); + + // Handle when the handle and the container is active + &:active .toggle-handle, + .toggle-handle:active { + @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. + } + } +} + + // // Push styles // -------------------------------------------------- diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss index 25b827f..f6ab660 100644 --- a/lib/sass/toggles.scss +++ b/lib/sass/toggles.scss @@ -7,10 +7,9 @@ width: 47px; height: 30px; background-color: #fff; - border: 2px solid #e6e6e6; + border: 2px solid #ddd; border-radius: 20px; - @include box-shadow(inset 0 0 0 0 #e1e1e1); - @include transition-property(box-shadow, border); + @include transition-property(background-color, border); @include transition-duration(.2s); // Sliding handle @@ -22,30 +21,20 @@ width: 28px; height: 28px; background-color: #fff; - border: 1px solid rgba(0, 0, 0, .2); + border: 1px solid #ddd; border-radius: 100px; - @include box-shadow(0 3px 3px rgba(0,0,0,.08)); @include transition-property(-webkit-transform, border, width); @include transition-duration(.2s); } - &:active .toggle-handle { - width: 35px; - } - // Active state for toggle &.active { border: 2px solid $positive-color; - @include box-shadow(inset 0 0 0 13px $positive-color); + background-color: $positive-color; .toggle-handle { border-color: $positive-color; @include transform(translate3d(17px,0,0)); } - // Handle when the handle and the container is active - &:active .toggle-handle, - .toggle-handle:active { - @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. - } } } \ No newline at end of file From 53a4963ed36d161a918f0352f08acde731c636b5 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 16:21:22 -0800 Subject: [PATCH 10/45] cleanup --- lib/js/toggles.js | 2 +- lib/sass/badges.scss | 2 +- lib/sass/chevrons.scss | 2 +- lib/sass/forms.scss | 2 +- lib/sass/modals.scss | 2 +- lib/sass/normalize.scss | 18 +++++++++--------- lib/sass/popovers.scss | 2 +- lib/sass/ratchicons.scss | 2 +- lib/sass/segmented-controllers.scss | 2 +- lib/sass/sliders.scss | 2 +- lib/sass/table-views.scss | 2 +- lib/sass/{theme-ios => theme-ios.scss} | 0 lib/sass/toggles.scss | 2 +- 13 files changed, 20 insertions(+), 20 deletions(-) rename lib/sass/{theme-ios => theme-ios.scss} (100%) diff --git a/lib/js/toggles.js b/lib/js/toggles.js index f257ac9..2b681c6 100644 --- a/lib/js/toggles.js +++ b/lib/js/toggles.js @@ -88,4 +88,4 @@ toggle = false; }); -}(); \ No newline at end of file +}(); diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss index efd01cd..177cef1 100644 --- a/lib/sass/badges.scss +++ b/lib/sass/badges.scss @@ -74,4 +74,4 @@ position: absolute; right: 0; margin-right: 10px; -} \ No newline at end of file +} diff --git a/lib/sass/chevrons.scss b/lib/sass/chevrons.scss index eab740d..43e33bb 100644 --- a/lib/sass/chevrons.scss +++ b/lib/sass/chevrons.scss @@ -26,4 +26,4 @@ top: 8px; @include transform(rotate(-45deg)); } -} \ No newline at end of file +} diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index a7942db..a6051c3 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -136,4 +136,4 @@ select { [class*="bar-"] input[type=search] { height: 29px; margin: 2px 0; -} \ No newline at end of file +} diff --git a/lib/sass/modals.scss b/lib/sass/modals.scss index d32fe8a..2331ebc 100644 --- a/lib/sass/modals.scss +++ b/lib/sass/modals.scss @@ -21,4 +21,4 @@ @include transform(translate3d(0, 0, 0)); @include transition(-webkit-transform .25s); } -} \ No newline at end of file +} diff --git a/lib/sass/normalize.scss b/lib/sass/normalize.scss index 80e778e..55a18a2 100644 --- a/lib/sass/normalize.scss +++ b/lib/sass/normalize.scss @@ -2,7 +2,7 @@ // ========================================================================== // HTML5 display definitions -// ========================================================================== */ +// ========================================================================== // // Correct `block` display not defined in IE 8/9. @@ -55,7 +55,7 @@ template { // ========================================================================== // Base -// ========================================================================== */ +// ========================================================================== // // 1. Set default font family to sans-serif. @@ -79,7 +79,7 @@ body { // ========================================================================== // Links -// ========================================================================== */ +// ========================================================================== // // Remove the gray background color from active links in IE 10. @@ -108,7 +108,7 @@ a:hover { // ========================================================================== // Typography -// ========================================================================== */ +// ========================================================================== // // Address variable `h1` font-size and margin within `section` and `article` @@ -222,7 +222,7 @@ sub { // ========================================================================== // Embedded content -// ========================================================================== */ +// ========================================================================== // // Remove border when inside `a` element in IE 8/9. @@ -242,7 +242,7 @@ svg:not(:root) { // ========================================================================== // Figures -// ========================================================================== */ +// ========================================================================== // // Address margin not present in IE 8/9 and Safari 5. @@ -254,7 +254,7 @@ figure { // ========================================================================== // Forms -// ========================================================================== */ +// ========================================================================== // // Define consistent border, margin, and padding. @@ -394,7 +394,7 @@ textarea { // ========================================================================== // Tables -// ========================================================================== */ +// ========================================================================== // // Remove most spacing between table cells. @@ -403,4 +403,4 @@ textarea { table { border-collapse: collapse; border-spacing: 0; -} \ No newline at end of file +} diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss index bbf7f91..36e8743 100644 --- a/lib/sass/popovers.scss +++ b/lib/sass/popovers.scss @@ -50,4 +50,4 @@ left: 0; z-index: 10; background-color: rgba(0,0,0,.15); -} \ No newline at end of file +} diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss index 8f1b436..a624334 100644 --- a/lib/sass/ratchicons.scss +++ b/lib/sass/ratchicons.scss @@ -35,4 +35,4 @@ &.icon-sound3:before { content: '\f003'} &.icon-sound4:before { content: '\f004'} &.icon-up:before { content: '\f00e'} -} \ No newline at end of file +} diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss index df65b18..d505af8 100644 --- a/lib/sass/segmented-controllers.scss +++ b/lib/sass/segmented-controllers.scss @@ -81,4 +81,4 @@ [class*="bar-"] .segmented-controller + [class*="button"], [class*="bar-"] [class*="button"] + .segmented-controller { margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons -} \ No newline at end of file +} diff --git a/lib/sass/sliders.scss b/lib/sass/sliders.scss index abaa98c..fc29ac6 100644 --- a/lib/sass/sliders.scss +++ b/lib/sass/sliders.scss @@ -35,4 +35,4 @@ } } } -} \ No newline at end of file +} diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 956aa83..36a6af2 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -147,4 +147,4 @@ background-color: #fff; 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.scss similarity index 100% rename from lib/sass/theme-ios rename to lib/sass/theme-ios.scss diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss index f6ab660..6427cc8 100644 --- a/lib/sass/toggles.scss +++ b/lib/sass/toggles.scss @@ -37,4 +37,4 @@ @include transform(translate3d(17px,0,0)); } } -} \ No newline at end of file +} From cb60ba09784c4afe3dee1de980eb2e1c9a281182 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 16:24:35 -0800 Subject: [PATCH 11/45] derp --- Gruntfile.js | 3 ++- dist/ratchet.js | 1 + lib/sass/theme-ios.scss | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index 680b0b9..4e3dc24 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -46,7 +46,8 @@ module.exports = function(grunt) { dist: { files: { '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss', - '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss' + '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss', + '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss' } } }, diff --git a/dist/ratchet.js b/dist/ratchet.js index 990c28e..e05a73b 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -783,6 +783,7 @@ }); }(); + /* ---------------------------------- * ALERT v0.0.1 * Licensed under The MIT License diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 9f56872..52b2d3c 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -1,3 +1,5 @@ +@import "mixins.scss"; + // // iOS theme // Provides the visual and interaction style from iOS From 619d65bd05571414d83881ef65327f4d401a335b Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 16:26:28 -0800 Subject: [PATCH 12/45] adding stuff --- dist/ios-theme.css | 224 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 dist/ios-theme.css diff --git a/dist/ios-theme.css b/dist/ios-theme.css new file mode 100644 index 0000000..c7bbc21 --- /dev/null +++ b/dist/ios-theme.css @@ -0,0 +1,224 @@ +/* + * ===================================================== + * Ratchet v2.0.0 + * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton + * Licensed under http://www.opensource.org/licenses/MIT + * + * Designed and built by @connors, @dhg, and @fat. + * ===================================================== + */ + +.bar { + border-bottom: 0; + background-color: rgba(247, 247, 247, 0.98); + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); +} + +.bar-tab { + border-top: 0; + -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); + box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); +} + +.popover .bar-nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} + +.table-view .table-view-cell { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} +.table-view .table-view-cell:last-child { + background-image: none; +} +.table-view .table-view-divider { + border-top: 0; + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-position: 0 100%, 0 0%; + background-repeat: no-repeat; +} + +.popover .table-view { + border-radius: 12px; +} + +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 { + height: 40px; + padding: 10px 15px; + border: 1px solid rgba(0, 0, 0, 0.2); +} + +input[type=search] { + height: 34px; + text-align: center; + background-color: rgba(0, 0, 0, 0.1); + border: 0; + border-radius: 6px; +} + +input[type=search]:focus { + text-align: left; +} + +.input-group input { + border: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} + +.input-group input:last-child { + background-image: none; +} + +.input-row { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} + +.input-row:last-child, +.input-row label + input { + background-image: none; +} + +[class*="button"] { + color: #929292; + background-color: transparent; + -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; +} +[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { + color: #fff; + background-color: #929292; +} + +.button-link:active, .button-link.active { + color: #007aff; + opacity: .3; +} + +.bar-nav { + -webkit-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; +} + +[class*="badge"] { + color: #929292; +} +[class*="badge"].badge-filled { + color: #fff; +} + +.segmented-controller { + background-color: transparent; +} +.segmented-controller li { + -webkit-transition: background-color 0.1s linear; + transition: background-color 0.1s linear; +} + +.popover { + border-radius: 12px; + -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; +} + +.modal { + -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); + transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); +} +.modal.active { + -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); + transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); +} + +.toggle { + border: 2px solid #e6e6e6; + -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; + box-shadow: inset 0 0 0 0 #e1e1e1; + -webkit-transition-property: box-shadow, border; + transition-property: box-shadow, border; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.toggle .toggle-handle { + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); + -webkit-transition-property: -webkit-transform, border, width; + transition-property: -webkit-transform, border, width; +} +.toggle:active .toggle-handle { + width: 35px; +} +.toggle.active { + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 13px #4cd964; + box-shadow: inset 0 0 0 13px #4cd964; +} +.toggle.active:active .toggle-handle, +.toggle.active .toggle-handle:active { + -webkit-transform: translate3d(10px, 0, 0) !important; + transform: translate3d(10px, 0, 0) !important; +} + +.content.fade { + -webkit-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; +} +.content.slide { + -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); + transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); +} +.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) { + -webkit-animation-name: fadeOverlay; + animation-name: fadeOverlay; + -webkit-animation-duration: 0.4s; + animation-duration: 0.4s; +} +.content.slide.right:not([class*="sliding-in"]) { + -webkit-animation-direction: reverse; + animation-direction: reverse; +} +.content.slide.left { + -webkit-transform: translate3d(-20%, 0, 0); + transform: translate3d(-20%, 0, 0); +} + +@-webkit-keyframes fadeOverlay { + from { + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); + } + + to { + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); + } +} From dff9e27f128907bacefd2a238fc1be1e5520da55 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 16:31:33 -0800 Subject: [PATCH 13/45] going back to the thing. --- _includes/header.html | 1 + dist/ratchet.css | 4 ++-- lib/sass/push.scss | 2 +- lib/sass/theme-ios.scss | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index e875d4e..9c2b79f 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,6 +7,7 @@ + diff --git a/dist/ratchet.css b/dist/ratchet.css index c6c71df..c209c8d 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1132,8 +1132,8 @@ input[type="button"] { } .content.slide.left { z-index: 1; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } .content.slide.right { z-index: 3; diff --git a/lib/sass/push.scss b/lib/sass/push.scss index 8095b7a..c0e7077 100644 --- a/lib/sass/push.scss +++ b/lib/sass/push.scss @@ -22,7 +22,7 @@ &.left { z-index: 1; - @include transform(translate3d(100%, 0, 0)); + @include transform(translate3d(-100%, 0, 0)); } &.right { diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 52b2d3c..35f93d8 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -28,7 +28,7 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods // Bars // -------------------------------------------------- -.bar { +[class*="bar-"] { border-bottom: 0; background-color: $chrome-color; @include box-shadow(0 0 1px rgba(0,0,0,.85)); From 2f22b4cd26d147b3d1218e88137cf83962bc69c4 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 16:53:11 -0800 Subject: [PATCH 14/45] final derps --- dist/ios-theme.css | 89 +++++++++++++++++++++++++++- lib/sass/theme-ios.scss | 125 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 211 insertions(+), 3 deletions(-) diff --git a/dist/ios-theme.css b/dist/ios-theme.css index c7bbc21..3174a94 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -8,7 +8,7 @@ * ===================================================== */ -.bar { +[class*="bar-"] { border-bottom: 0; background-color: rgba(247, 247, 247, 0.98); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); @@ -80,6 +80,16 @@ input[type=search]:focus { text-align: left; } +select, +textarea, +.input-group { + height: auto; +} + +.input-group { + padding: 0; +} + .input-group input { border: 0; background-image: url("data:image/svg+xml;utf8,"); @@ -104,6 +114,7 @@ input[type=search]:focus { } [class*="button"] { + border: 1px solid #929292; color: #929292; background-color: transparent; -webkit-transition: background-color, opacity, color; @@ -118,30 +129,100 @@ input[type=search]:focus { background-color: #929292; } +.button-primary { + color: #007aff; + border: 1px solid #007aff; +} +.button-primary:active, .button-primary.active, .button-primary.button-filled { + background-color: #007aff; +} + +.button-positive { + color: #4cd964; + border: 1px solid #4cd964; +} +.button-positive:active, .button-positive.active, .button-positive.button-filled { + background-color: #4cd964; +} + +.button-negative { + color: #dd524d; + border: 1px solid #dd524d; +} +.button-negative:active, .button-negative.active, .button-negative.button-filled { + background-color: #dd524d; +} + +.button-link { + color: #007aff; +} +.button-link:active, .button-link.active { + color: #007aff; +} + .button-link:active, .button-link.active { color: #007aff; opacity: .3; } -.bar-nav { +.bar-nav [class*="button"] { + color: #007aff; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } +.bar-nav .button-prev:before, +.bar-nav .button-prev:after, +.bar-nav .button-next:before, +.bar-nav .button-next:after { + background-color: #007aff; +} [class*="badge"] { color: #929292; } [class*="badge"].badge-filled { + color: #929292; +} + +.badge-primary { + color: #007aff; +} +.badge-primary.badge-filled { color: #fff; + background-color: #007aff; +} + +.badge-positive { + color: #4cd964; +} +.badge-positive.badge-filled { + color: #fff; + background-color: #4cd964; +} + +.badge-negative { + color: #dd524d; +} +.badge-negative.badge-filled { + color: #fff; + background-color: #dd524d; } .segmented-controller { background-color: transparent; + border: 1px solid #007aff; } .segmented-controller li { + border-left: 1px solid #007aff; -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } +.segmented-controller li > a { + color: #007aff; +} +.segmented-controller li.selected { + background-color: #007aff; +} .popover { border-radius: 12px; @@ -178,6 +259,7 @@ input[type=search]:focus { width: 35px; } .toggle.active { + border: 2px solid #4cd964; background-color: transparent; -webkit-box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964; @@ -187,6 +269,9 @@ input[type=search]:focus { -webkit-transform: translate3d(10px, 0, 0) !important; transform: translate3d(10px, 0, 0) !important; } +.toggle.active .toggle-handle { + border-color: #4cd964; +} .content.fade { -webkit-transition: opacity 0.2s ease-in-out; diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 35f93d8..74de3be 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -111,9 +111,17 @@ input[type=search] { input[type=search]:focus { text-align: left; } +select, +textarea, +.input-group { + height: auto; +} // Input groups (cluster multiple inputs together into a single group) // ------------------------------------------------------------------- +.input-group { + padding: 0; +} .input-group input { border: 0; @include hairline(single, #c8c7cc, 15px); @@ -142,6 +150,7 @@ input[type=search]:focus { // -------------------------------------------------- [class*="button"] { + border: 1px solid $default-color; color: $default-color; background-color: transparent; @include transition(background-color, opacity, color); @@ -157,6 +166,56 @@ input[type=search]:focus { } } + +// Other button types +// -------------------------------------------------- + +// Primary button (Default color is blue) +.button-primary { + color: $primary-color; + border: 1px solid $primary-color; + + &:active, + &.active, + &.button-filled { + background-color: $primary-color; + } +} + +// Positive button (Default color is green) +.button-positive { + color: $positive-color; + border: 1px solid $positive-color; + + &:active, + &.active, + &.button-filled { + background-color: $positive-color; + } +} + +// Negative button (Default color is red) +.button-negative { + color: $negative-color; + border: 1px solid $negative-color; + + &:active, + &.active, + &.button-filled { + background-color: $negative-color; + } +} + +// Link button (Buttons that look like links) +.button-link { + color: $primary-color; + + &:active, + &.active { + color: $primary-color; + } +} + // Link button (Buttons that look like links) .button-link { &:active, @@ -170,7 +229,20 @@ input[type=search]:focus { // -------------------------------------------------- .bar-nav { - @include transition(opacity .2s linear); + [class*="button"] { + color: $primary-color; + @include transition(opacity .2s linear); + } + + // Directional buttons in nav bars + // -------------------------------------------------- + + .button-prev:before, + .button-prev:after, + .button-next:before, + .button-next:after { + background-color: $primary-color; + } } @@ -181,8 +253,42 @@ input[type=search]:focus { [class*="badge"] { color: $default-color; + &.badge-filled { + color: $default-color; + } +} + + +// Badge modifiers +// -------------------------------------------------- + +// Main badge +.badge-primary { + color: $primary-color; + &.badge-filled { color: #fff; + background-color: $primary-color; + } +} + +// Positive badge +.badge-positive { + color: $positive-color; + + &.badge-filled { + color: #fff; + background-color: $positive-color; + } +} + +// Negative badge +.badge-negative { + color: $negative-color; + + &.badge-filled { + color: #fff; + background-color: $negative-color; } } @@ -193,9 +299,21 @@ input[type=search]:focus { .segmented-controller { background-color: transparent; + border: 1px solid $primary-color; li { + border-left: 1px solid $primary-color; @include transition(background-color .1s linear); + + // Link that fills each section + > a { + color: $primary-color; + } + + // Selected segment of controller + &.selected { + background-color: $primary-color; + } } } @@ -243,6 +361,7 @@ input[type=search]:focus { } // Active state for toggle &.active { + border: 2px solid $positive-color; background-color: transparent; @include box-shadow(inset 0 0 0 13px $positive-color); @@ -251,6 +370,10 @@ input[type=search]:focus { .toggle-handle:active { @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. } + + .toggle-handle { + border-color: $positive-color; + } } } From 3bb1d33f1c6106eeffc1a442515eacd31c63f585 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 17:06:28 -0800 Subject: [PATCH 15/45] popover caret --- dist/ios-theme.css | 3 +++ dist/ratchet.css | 44 +++++++++++++++++++++++++++-------------- lib/sass/theme-ios.scss | 4 ++++ 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/dist/ios-theme.css b/dist/ios-theme.css index 3174a94..b188aa4 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -229,6 +229,9 @@ textarea, -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } +.popover:after { + border-bottom: 15px solid rgba(247, 247, 247, 0.98); +} .modal { -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); diff --git a/dist/ratchet.css b/dist/ratchet.css index c209c8d..0938232 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1151,52 +1151,66 @@ input[type="button"] { .icon { display: inline-block; - font-family: "Ratchicons", sans-serif; + font-family: Ratchicons; font-size: 24px; text-decoration: none; line-height: 1; cursor: default; -webkit-font-smoothing: antialiased; } -.icon.icon-down:before { + +.icon-down:before { content: '\f00b'; } -.icon.icon-download:before { + +.icon-download:before { content: '\f005'; } -.icon.icon-left:before { + +.icon-left:before { content: '\f00c'; } -.icon.icon-list:before { + +.icon-list:before { content: '\f008'; } -.icon.icon-pages:before { + +.icon-pages:before { content: '\f000'; } -.icon.icon-refresh:before { + +.icon-refresh:before { content: '\f009'; } -.icon.icon-right:before { + +.icon-right:before { content: '\f00d'; } -.icon.icon-search:before { + +.icon-search:before { content: '\f007'; } -.icon.icon-share:before { + +.icon-share:before { content: '\f00a'; } -.icon.icon-sound:before { + +.icon-sound:before { content: '\f001'; } -.icon.icon-sound2:before { + +.icon-sound2:before { content: '\f002'; } -.icon.icon-sound3:before { + +.icon-sound3:before { content: '\f003'; } -.icon.icon-sound4:before { + +.icon-sound4:before { content: '\f004'; } -.icon.icon-up:before { + +.icon-up:before { content: '\f00e'; } diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 74de3be..68ed64d 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -325,6 +325,10 @@ textarea, .popover { border-radius: 12px; @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); + + &:after { + border-bottom: 15px solid $chrome-color; + } } From c75bcfd66f362400949a3bf2cc5c6548c507d81a Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 14 Dec 2013 17:21:00 -0800 Subject: [PATCH 16/45] removing alerts for this release. --- Gruntfile.js | 3 +- dist/ratchet.css | 49 ------------------------------- dist/ratchet.js | 37 ----------------------- examples/app-default/index.html | 6 ---- lib/js/alerts.js | 36 ----------------------- lib/sass/alerts.scss | 52 --------------------------------- lib/sass/ratchet.scss | 1 - 7 files changed, 1 insertion(+), 183 deletions(-) delete mode 100644 lib/js/alerts.js delete mode 100644 lib/sass/alerts.scss diff --git a/Gruntfile.js b/Gruntfile.js index 4e3dc24..50da3de 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -31,8 +31,7 @@ module.exports = function(grunt) { '<%= meta.srcPath %>js/push.js', '<%= meta.srcPath %>js/segmented-controllers.js', '<%= meta.srcPath %>js/sliders.js', - '<%= meta.srcPath %>js/toggles.js', - '<%= meta.srcPath %>js/alerts.js' + '<%= meta.srcPath %>js/toggles.js' ], dest: '<%= meta.distPath %><%= pkg.name %>.js' } diff --git a/dist/ratchet.css b/dist/ratchet.css index 0938232..8bc9141 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -979,55 +979,6 @@ input[type="button"] { background-color: rgba(0, 0, 0, 0.15); } -.alert { - position: fixed; - right: 15px; - left: 15px; - bottom: 65px; - padding: 15px; - color: #fff; - border-radius: 3px; - z-index: 10; - -webkit-transition: opacity; - transition: opacity; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - -webkit-transition-timing-function: linear; - transition-timing-function: linear; -} -.alert .close { - position: relative; - top: -2px; - float: right; - color: inherit; - cursor: pointer; - -webkit-transition: opacity; - transition: opacity; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - -webkit-transition-timing-function: linear; - transition-timing-function: linear; -} -.alert .close:active { - opacity: .6; -} -.alert.dismiss { - opacity: 0; -} - -.alert-positive { - background-color: rgba(92, 184, 92, 0.97); -} - -.alert-negative { - background-color: rgba(217, 83, 79, 0.97); -} - -.alert-inline { - position: static; - margin: 15px; -} - .modal { position: fixed; top: 0; diff --git a/dist/ratchet.js b/dist/ratchet.js index e05a73b..c8bd8d9 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -783,40 +783,3 @@ }); }(); - -/* ---------------------------------- - * ALERT v0.0.1 - * Licensed under The MIT License - * http://opensource.org/licenses/MIT - * ---------------------------------- */ - -!function () { - var findAlerts = function (target) { - var i, alerts = document.querySelectorAll('a'); - for (; target && target !== document; target = target.parentNode) { - for (i = alerts.length; i--;) { if (alerts[i] === target) return target; } - } - }; - - var onAlertHidden = function () { - var alert = getAlert(event); - - alert.style.display = 'none'; - alert.removeEventListener('webkitTransitionEnd', onAlertHidden); - } - - var getAlert = function (event) { - var alertDismiss = findAlerts(event.target); - if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash); - }; - - window.addEventListener('click', function (event) { - var alert = getAlert(event); - - if (alert) { - if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss'); - alert.addEventListener('webkitTransitionEnd', onAlertHidden); - event.preventDefault(); - } - }); -}(); diff --git a/examples/app-default/index.html b/examples/app-default/index.html index 75b2fd1..b1f9e16 100644 --- a/examples/app-default/index.html +++ b/examples/app-default/index.html @@ -18,12 +18,6 @@ - -
- - This is an alert. -
-

Movie finder

diff --git a/lib/js/alerts.js b/lib/js/alerts.js deleted file mode 100644 index c1e7165..0000000 --- a/lib/js/alerts.js +++ /dev/null @@ -1,36 +0,0 @@ -/* ---------------------------------- - * ALERT v0.0.1 - * Licensed under The MIT License - * http://opensource.org/licenses/MIT - * ---------------------------------- */ - -!function () { - var findAlerts = function (target) { - var i, alerts = document.querySelectorAll('a'); - for (; target && target !== document; target = target.parentNode) { - for (i = alerts.length; i--;) { if (alerts[i] === target) return target; } - } - }; - - var onAlertHidden = function () { - var alert = getAlert(event); - - alert.style.display = 'none'; - alert.removeEventListener('webkitTransitionEnd', onAlertHidden); - } - - var getAlert = function (event) { - var alertDismiss = findAlerts(event.target); - if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash); - }; - - window.addEventListener('click', function (event) { - var alert = getAlert(event); - - if (alert) { - if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss'); - alert.addEventListener('webkitTransitionEnd', onAlertHidden); - event.preventDefault(); - } - }); -}(); diff --git a/lib/sass/alerts.scss b/lib/sass/alerts.scss deleted file mode 100644 index 39abcc3..0000000 --- a/lib/sass/alerts.scss +++ /dev/null @@ -1,52 +0,0 @@ -// -// Alerts -// -------------------------------------------------- - -.alert { - position: fixed; - right: 15px; - left: 15px; - bottom: $bar-tab-height + 15px; - padding: 15px; - color: #fff; - border-radius: 3px; - z-index: 10; - @include transition(opacity); - @include transition-duration(.2s); - @include transition-timing-function(linear); - - .close { - position: relative; - top: -2px; - float: right; - color: inherit; - cursor: pointer; - @include transition(opacity); - @include transition-duration(.2s); - @include transition-timing-function(linear); - - &:active { - opacity: .6; - } - } - - &.dismiss { - opacity: 0; - } -} - -// Positive alert (Default color is green) -.alert-positive { - background-color: transparentize($positive-color, .03); -} - -// Negative alert (Default color is red) -.alert-negative { - background-color: transparentize($negative-color, .03); -} - -// Inline alert -.alert-inline { - position: static; - margin: 15px; -} diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss index 2973e0c..a0dffcc 100644 --- a/lib/sass/ratchet.scss +++ b/lib/sass/ratchet.scss @@ -18,7 +18,6 @@ @import "badges.scss"; @import "segmented-controllers.scss"; @import "popovers.scss"; -@import "alerts.scss"; // Javascript components @import "modals.scss"; From 3a178854119b06d42abca45cdccd18ec2e4f94d1 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 10:30:00 -0800 Subject: [PATCH 17/45] starting the android theme --- Gruntfile.js | 3 +- _includes/header.html | 2 +- assets/css/docs.css | 10 +- dist/android-theme.css | 268 ++++++++++++++++++++++++ dist/ios-theme.css | 4 + dist/ratchet.css | 2 +- lib/sass/base.scss | 2 +- lib/sass/theme-android.scss | 402 ++++++++++++++++++++++++++++++++++++ lib/sass/theme-ios.scss | 15 +- 9 files changed, 699 insertions(+), 9 deletions(-) create mode 100644 dist/android-theme.css create mode 100644 lib/sass/theme-android.scss diff --git a/Gruntfile.js b/Gruntfile.js index 50da3de..ef1fb35 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -46,7 +46,8 @@ module.exports = function(grunt) { files: { '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss', '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss', - '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss' + '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss', + '<%= meta.distPath %>android-theme.css': '<%= meta.srcPath %>sass/theme-android.scss' } } }, diff --git a/_includes/header.html b/_includes/header.html index 9c2b79f..4dc447a 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/assets/css/docs.css b/assets/css/docs.css index 0c1436c..a43c4bf 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -313,7 +313,15 @@ h6 { width: 320px; height: 548px; overflow: hidden; - background-color: #efeff4; + background-color: $chrome-color; + background: rgb(0,0,0); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); /* IE6-9 */ } .iphone .content, diff --git a/dist/android-theme.css b/dist/android-theme.css new file mode 100644 index 0000000..326b3af --- /dev/null +++ b/dist/android-theme.css @@ -0,0 +1,268 @@ +/* + * ===================================================== + * Ratchet v2.0.0 + * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton + * Licensed under http://www.opensource.org/licenses/MIT + * + * Designed and built by @connors, @dhg, and @fat. + * ===================================================== + */ + +.content { + background-color: #111111; +} + +[class*="bar-"] { + height: 50px; + background-color: #111111; + border-bottom: 1px solid #565656; +} + +.bar-tab { + height: 70px; + border-top: 1px solid #565656; +} + +.title { + padding-left: 10px; + line-height: 50px; + color: white; + text-align: left; +} + +.popover .bar-nav { + border-bottom: 1px solid rgba(0, 0, 0, 0.15); +} + +.table-view .table-view-cell { + border-bottom: 0; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; +} +.table-view .table-view-cell:last-child { + background-image: none; +} +.table-view .table-view-divider { + border-top: 0; + border-bottom: 0; +} + +.popover .table-view { + border-radius: 12px; +} + +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 { + height: 40px; + padding: 10px 15px; + border: 1px solid rgba(0, 0, 0, 0.2); +} + +input[type=search] { + height: 34px; + text-align: center; + background-color: rgba(0, 0, 0, 0.1); + border: 0; + border-radius: 6px; +} + +input[type=search]:focus { + text-align: left; +} + +select, +textarea, +.input-group { + height: auto; +} + +.input-group { + padding: 0; +} + +.input-group input { + border: 0; +} + +.input-group input:last-child { + background-image: none; +} + +.input-row { + border-bottom: 0; +} + +.input-row:last-child, +.input-row label + input { + background-image: none; +} + +[class*="button"] { + border: 1px solid white; + color: white; + background-color: transparent; + -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; +} +[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { + color: #fff; + background-color: white; +} + +.button-primary { + color: #33b5e5; + border: 1px solid #33b5e5; +} +.button-primary:active, .button-primary.active, .button-primary.button-filled { + background-color: #33b5e5; +} + +.button-positive { + color: #81c700; + border: 1px solid #81c700; +} +.button-positive:active, .button-positive.active, .button-positive.button-filled { + background-color: #81c700; +} + +.button-negative { + color: #f20754; + border: 1px solid #f20754; +} +.button-negative:active, .button-negative.active, .button-negative.button-filled { + background-color: #f20754; +} + +.button-link { + color: #33b5e5; +} +.button-link:active, .button-link.active { + color: #33b5e5; +} + +.button-link:active, .button-link.active { + color: #33b5e5; + opacity: .3; +} + +.bar-nav [class*="button"] { + color: #33b5e5; + -webkit-transition: opacity 0.2s linear; + transition: opacity 0.2s linear; +} +.bar-nav .button-prev:before, +.bar-nav .button-prev:after, +.bar-nav .button-next:before, +.bar-nav .button-next:after { + background-color: #33b5e5; +} + +[class*="badge"] { + color: white; +} +[class*="badge"].badge-filled { + color: white; +} + +.badge-primary { + color: #33b5e5; +} +.badge-primary.badge-filled { + color: #fff; + background-color: #33b5e5; +} + +.badge-positive { + color: #81c700; +} +.badge-positive.badge-filled { + color: #fff; + background-color: #81c700; +} + +.badge-negative { + color: #f20754; +} +.badge-negative.badge-filled { + color: #fff; + background-color: #f20754; +} + +.segmented-controller { + background-color: transparent; + border: 1px solid #33b5e5; +} +.segmented-controller li { + border-left: 1px solid #33b5e5; + -webkit-transition: background-color 0.1s linear; + transition: background-color 0.1s linear; +} +.segmented-controller li > a { + color: #33b5e5; +} +.segmented-controller li.selected { + background-color: #33b5e5; +} + +.popover { + border-radius: 12px; + -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; +} +.popover:after { + border-bottom: 15px solid #111111; +} + +.toggle { + border: 2px solid #e6e6e6; + -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; + box-shadow: inset 0 0 0 0 #e1e1e1; + -webkit-transition-property: box-shadow, border; + transition-property: box-shadow, border; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.toggle .toggle-handle { + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); + -webkit-transition-property: -webkit-transform, border, width; + transition-property: -webkit-transform, border, width; +} +.toggle:active .toggle-handle { + width: 35px; +} +.toggle.active { + border: 2px solid #81c700; + background-color: transparent; + -webkit-box-shadow: inset 0 0 0 13px #81c700; + box-shadow: inset 0 0 0 13px #81c700; +} +.toggle.active:active .toggle-handle, +.toggle.active .toggle-handle:active { + -webkit-transform: translate3d(10px, 0, 0) !important; + transform: translate3d(10px, 0, 0) !important; +} +.toggle.active .toggle-handle { + border-color: #81c700; +} diff --git a/dist/ios-theme.css b/dist/ios-theme.css index b188aa4..e57d16c 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -8,6 +8,10 @@ * ===================================================== */ +.content { + background-color: #efeff4; +} + [class*="bar-"] { border-bottom: 0; background-color: rgba(247, 247, 247, 0.98); diff --git a/dist/ratchet.css b/dist/ratchet.css index 8bc9141..86cc086 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -253,7 +253,7 @@ strong { bottom: 0; left: 0; overflow: auto; - background-color: #efeff4; + background-color: #fff; -webkit-overflow-scrolling: touch; } diff --git a/lib/sass/base.scss b/lib/sass/base.scss index 86a7cc2..884256f 100644 --- a/lib/sass/base.scss +++ b/lib/sass/base.scss @@ -36,7 +36,7 @@ strong { bottom: 0; left: 0; overflow: auto; - background-color: #efeff4; + background-color: #fff; -webkit-overflow-scrolling: touch; } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss new file mode 100644 index 0000000..47b67e7 --- /dev/null +++ b/lib/sass/theme-android.scss @@ -0,0 +1,402 @@ +@import "mixins.scss"; + +// +// Android theme +// The visual and interaction styles for Android +// +// -------------------------------------------------- + + +// Variables +// -------------------------------------------------- + +// Type (Change to Roboto) +$font-family-default: "Helvetica Neue", Helvetica, sans-serif; +$font-size-default: 17px; +$font-weight: 500; +$font-weight-light: 400; +$line-height-default: 21px; + +// Colors +// Main theme colors +$primary-color: #33b5e5; +$chrome-color: #111; + +// Action colors +$default-color: #fff; +$positive-color: #81c700; +$negative-color: #f20754; + +// Bars +$bar-base-height: 50px; +$bar-tab-height: 70px; + +// Borders +$border-default: 1px solid #565656; +$border-radius: 0; + + +// Base +// -------------------------------------------------- + +.content { + background-color: $chrome-color; + background: rgb(0,0,0); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(68,68,68,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* IE10+ */ + background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ +} + +// Bars +// -------------------------------------------------- + +[class*="bar-"] { + height: $bar-base-height; + background-color: $chrome-color; + border-bottom: $border-default; +} +.bar-tab { + height: $bar-tab-height; + border-top: $border-default; +} +// Left aligned text in the .bar-nav +.title { + padding-left: 10px; + line-height: $bar-base-height; + color: $default-color; + text-align: left; +} + + +// Nav bar in popovers +// -------------------------------------------------- + +.popover .bar-nav { + 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; + } +} + +.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 { + height: 40px; + padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); +} + +// Rounded search input +input[type=search] { + height: 34px; + text-align: center; + background-color: rgba(0,0,0,.1); + border: 0; + border-radius: 6px; +} +input[type=search]:focus { + text-align: left; +} +select, +textarea, +.input-group { + height: auto; +} + +// Input groups (cluster multiple inputs together into a single group) +// ------------------------------------------------------------------- +.input-group { + padding: 0; +} +.input-group input { + border: 0; +} +// 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; +} +// Remove bottom border on last input-row to avoid double bottom border +.input-row:last-child, +.input-row label + input { + background-image: none; +} + + +// Buttons +// -------------------------------------------------- + +[class*="button"] { + border: 1px solid $default-color; + color: $default-color; + background-color: transparent; + @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; + } +} + + +// Other button types +// -------------------------------------------------- + +// Primary button (Default color is blue) +.button-primary { + color: $primary-color; + border: 1px solid $primary-color; + + &:active, + &.active, + &.button-filled { + background-color: $primary-color; + } +} + +// Positive button (Default color is green) +.button-positive { + color: $positive-color; + border: 1px solid $positive-color; + + &:active, + &.active, + &.button-filled { + background-color: $positive-color; + } +} + +// Negative button (Default color is red) +.button-negative { + color: $negative-color; + border: 1px solid $negative-color; + + &:active, + &.active, + &.button-filled { + background-color: $negative-color; + } +} + +// Link button (Buttons that look like links) +.button-link { + color: $primary-color; + + &:active, + &.active { + color: $primary-color; + } +} + +// Link button (Buttons that look like links) +.button-link { + &:active, + &.active { + color: $primary-color; + opacity: .3; + } +} + +// Buttons in nav bars +// -------------------------------------------------- + +.bar-nav { + [class*="button"] { + color: $primary-color; + @include transition(opacity .2s linear); + } + + // Directional buttons in nav bars + // -------------------------------------------------- + + .button-prev:before, + .button-prev:after, + .button-next:before, + .button-next:after { + background-color: $primary-color; + } +} + + +// +// Badges +// -------------------------------------------------- + +[class*="badge"] { + color: $default-color; + + &.badge-filled { + color: $default-color; + } +} + + +// Badge modifiers +// -------------------------------------------------- + +// Main badge +.badge-primary { + color: $primary-color; + + &.badge-filled { + color: #fff; + background-color: $primary-color; + } +} + +// Positive badge +.badge-positive { + color: $positive-color; + + &.badge-filled { + color: #fff; + background-color: $positive-color; + } +} + +// Negative badge +.badge-negative { + color: $negative-color; + + &.badge-filled { + color: #fff; + background-color: $negative-color; + } +} + + +// +// Segmented controllers +// -------------------------------------------------- + +.segmented-controller { + background-color: transparent; + border: 1px solid $primary-color; + + li { + border-left: 1px solid $primary-color; + @include transition(background-color .1s linear); + + // Link that fills each section + > a { + color: $primary-color; + } + + // Selected segment of controller + &.selected { + background-color: $primary-color; + } + } +} + + +// +// Popovers +// -------------------------------------------------- + +.popover { + border-radius: 12px; + @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); + + &:after { + border-bottom: 15px solid $chrome-color; + } +} + + +// +// Modal styles +// -------------------------------------------------- + +// +// Toggles styles +// -------------------------------------------------- +.toggle { + border: 2px solid #e6e6e6; + @include box-shadow(inset 0 0 0 0 #e1e1e1); + @include transition-property(box-shadow, border); + @include transition-duration(.2s); + + // Sliding handle + .toggle-handle { + border: 1px solid rgba(0, 0, 0, .2); + @include box-shadow(0 3px 3px rgba(0,0,0,.08)); + @include transition-property(-webkit-transform, border, width); + } + &:active .toggle-handle { + width: 35px; + } + // Active state for toggle + &.active { + border: 2px solid $positive-color; + background-color: transparent; + @include box-shadow(inset 0 0 0 13px $positive-color); + + // Handle when the handle and the container is active + &:active .toggle-handle, + .toggle-handle:active { + @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. + } + + .toggle-handle { + border-color: $positive-color; + } + } +} diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 68ed64d..f6e33f9 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -2,14 +2,15 @@ // // iOS theme -// Provides the visual and interaction style from iOS +// The visual and interaction styles from iOS // // -------------------------------------------------- -// Colors +// Variables // -------------------------------------------------- +// Colors // Main theme colors $primary-color: #007aff; $chrome-color: rgba(247,247,247,.98); @@ -19,12 +20,18 @@ $default-color: #929292; $positive-color: #4cd964; $negative-color: #dd524d; - // iOS style transitions -// -------------------------------------------------- $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods +// Base +// -------------------------------------------------- + +.content { + background-color: #efeff4; +} + + // Bars // -------------------------------------------------- From 3fbee92b19664a538b779e3be54a01c12af4a480 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 10:37:37 -0800 Subject: [PATCH 18/45] adding a simple gradient mixin --- dist/android-theme.css | 9 ++++++++- lib/sass/mixins.scss | 13 +++++++++++++ lib/sass/theme-android.scss | 10 +--------- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/dist/android-theme.css b/dist/android-theme.css index 326b3af..e8f29a9 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -9,7 +9,14 @@ */ .content { - background-color: #111111; + background: #111111; + background: -moz-linear-gradient(top, #111111 0%, #222222 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #111111), color-stop(100%, #222222)); + background: -webkit-linear-gradient(top, #111111 0%, #222222 100%); + background: -o-linear-gradient(top, #111111 0%, #222222 100%); + background: -ms-linear-gradient(top, #111111 0%, #222222 100%); + background: linear-gradient(to bottom, #111111 0%, #222222 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); } [class*="bar-"] { diff --git a/lib/sass/mixins.scss b/lib/sass/mixins.scss index 2b8967e..67b0f4a 100644 --- a/lib/sass/mixins.scss +++ b/lib/sass/mixins.scss @@ -24,6 +24,19 @@ box-shadow: $shadow; } +// Gradients +@mixin gradient($color-form, $color-to) { + background: $color-form; // Old browsers + background: -moz-linear-gradient(top, $color-form 0%, $color-to 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-form), color-stop(100%,$color-to)); // Chrome,Safari4+ + background: -webkit-linear-gradient(top, $color-form 0%, $color-to 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(top, $color-form 0%, $color-to 100%); // Opera 11.10+ + background: -ms-linear-gradient(top, $color-form 0%, $color-to 100%); // IE10+ + background: linear-gradient(to bottom, $color-form 0%, $color-to 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); // IE6-9 + +} + // Transforms // -------------------------------------------------- diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 47b67e7..9f23b63 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -40,15 +40,7 @@ $border-radius: 0; // -------------------------------------------------- .content { - background-color: $chrome-color; - background: rgb(0,0,0); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(68,68,68,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* IE10+ */ - background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(68,68,68,1) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ + @include gradient($chrome-color,#222); } // Bars From 1cb9ce0aaadbc6bbdccacb2b33f3d2d62886e166 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 10:53:50 -0800 Subject: [PATCH 19/45] twerkin --- dist/android-theme.css | 24 +++++++++++++++++------- dist/ios-theme.css | 9 +++++++++ dist/ratchet.css | 6 +++--- lib/sass/bars.scss | 6 +++--- lib/sass/theme-android.scss | 20 ++++++++++++++++++-- lib/sass/theme-ios.scss | 23 ++++++++++++++++++++++- 6 files changed, 72 insertions(+), 16 deletions(-) diff --git a/dist/android-theme.css b/dist/android-theme.css index e8f29a9..e3101f5 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -10,12 +10,12 @@ .content { background: #111111; - background: -moz-linear-gradient(top, #111111 0%, #222222 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #111111), color-stop(100%, #222222)); - background: -webkit-linear-gradient(top, #111111 0%, #222222 100%); - background: -o-linear-gradient(top, #111111 0%, #222222 100%); - background: -ms-linear-gradient(top, #111111 0%, #222222 100%); - background: linear-gradient(to bottom, #111111 0%, #222222 100%); + background: -moz-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #111111), color-stop(100%, #2b2b2b)); + background: -webkit-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: -o-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: -ms-linear-gradient(top, #111111 0%, #2b2b2b 100%); + background: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); } @@ -24,10 +24,20 @@ background-color: #111111; border-bottom: 1px solid #565656; } +[class*="bar-"].bar-header-secondary { + top: 51px; +} +[class*="bar-"].bar-footer-secondary { + bottom: 51px; +} +[class*="bar-"].bar-footer-secondary-tab { + bottom: 71px; +} .bar-tab { height: 70px; border-top: 1px solid #565656; + border-bottom: 0; } .title { @@ -38,7 +48,7 @@ } .popover .bar-nav { - border-bottom: 1px solid rgba(0, 0, 0, 0.15); + border-bottom: 1px solid #565656; } .table-view .table-view-cell { diff --git a/dist/ios-theme.css b/dist/ios-theme.css index e57d16c..73b4460 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -18,6 +18,15 @@ -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); } +[class*="bar-"].bar-header-secondary { + top: 44px; +} +[class*="bar-"].bar-footer-secondary { + bottom: 44px; +} +[class*="bar-"].bar-footer-secondary-tab { + bottom: 50px; +} .bar-tab { border-top: 0; diff --git a/dist/ratchet.css b/dist/ratchet.css index 86cc086..b781661 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -297,16 +297,16 @@ strong { background-color: white; } [class*="bar-"].bar-header-secondary { - top: 44px; + top: 45px; } [class*="bar-"].bar-footer { bottom: 0; } [class*="bar-"].bar-footer-secondary { - bottom: 44px; + bottom: 45px; } [class*="bar-"].bar-footer-secondary-tab { - bottom: 50px; + bottom: 51px; } .bar-nav { diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 392f931..4197013 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -15,7 +15,7 @@ // Modifier class to dock any bar below .bar-nav &.bar-header-secondary { - top: $bar-base-height; + top: $bar-base-height + 1; } // Modifier class to dock any bar to bottom of viewport @@ -25,12 +25,12 @@ // Modifier class to dock any bar above a standard bar &.bar-footer-secondary { - bottom: $bar-base-height; + bottom: $bar-base-height + 1; } // Modifier class to dock any bar above a .bar-tab &.bar-footer-secondary-tab { - bottom: $bar-tab-height; + bottom: $bar-tab-height + 1; } } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 9f23b63..b813e6a 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -40,7 +40,7 @@ $border-radius: 0; // -------------------------------------------------- .content { - @include gradient($chrome-color,#222); + @include gradient($chrome-color,lighten($chrome-color, 10%)); } // Bars @@ -50,10 +50,26 @@ $border-radius: 0; height: $bar-base-height; background-color: $chrome-color; border-bottom: $border-default; + + // Modifier class to dock any bar below .bar-nav + &.bar-header-secondary { + top: $bar-base-height + 1; + } + + // Modifier class to dock any bar above a standard bar + &.bar-footer-secondary { + bottom: $bar-base-height + 1; + } + + // Modifier class to dock any bar above a .bar-tab + &.bar-footer-secondary-tab { + bottom: $bar-tab-height + 1; + } } .bar-tab { height: $bar-tab-height; border-top: $border-default; + border-bottom: 0; } // Left aligned text in the .bar-nav .title { @@ -68,7 +84,7 @@ $border-radius: 0; // -------------------------------------------------- .popover .bar-nav { - border-bottom: 1px solid rgba(0,0,0,.15); + border-bottom: $border-default; } diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index f6e33f9..9173baa 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -20,6 +20,10 @@ $default-color: #929292; $positive-color: #4cd964; $negative-color: #dd524d; +// Bars +$bar-base-height: 44px; +$bar-tab-height: 50px; + // iOS style transitions $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods @@ -39,8 +43,25 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods border-bottom: 0; background-color: $chrome-color; @include box-shadow(0 0 1px rgba(0,0,0,.85)); -} + // Modifier class to dock any bar below .bar-nav + &.bar-header-secondary { + top: $bar-base-height; + } + + // Modifier class to dock any bar above a standard bar + &.bar-footer-secondary { + bottom: $bar-base-height; + } + + // Modifier class to dock any bar above a .bar-tab + &.bar-footer-secondary-tab { + bottom: $bar-tab-height; + } +} +.bar-nav { + display: block; +} .bar-tab { border-top: 0; @include box-shadow(0 0 -1px rgba(0,0,0,.85)); From f11bf17d2db25e279443b96d4959d572f5e717e0 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 11:01:26 -0800 Subject: [PATCH 20/45] twerking on buttons --- _includes/header.html | 2 +- assets/css/docs.css | 10 +------ dist/android-theme.css | 4 +++ dist/ratchet.css | 45 ----------------------------- lib/sass/buttons.scss | 56 ------------------------------------- lib/sass/theme-android.scss | 3 ++ lib/sass/theme-ios.scss | 3 -- 7 files changed, 9 insertions(+), 114 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 4dc447a..0ae8145 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/assets/css/docs.css b/assets/css/docs.css index a43c4bf..0c1436c 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -313,15 +313,7 @@ h6 { width: 320px; height: 548px; overflow: hidden; - background-color: $chrome-color; - background: rgb(0,0,0); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */ - background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); /* IE6-9 */ + background-color: #efeff4; } .iphone .content, diff --git a/dist/android-theme.css b/dist/android-theme.css index e3101f5..6e4129d 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -34,6 +34,10 @@ bottom: 71px; } +.bar-nav { + display: block; +} + .bar-tab { height: 70px; border-top: 1px solid #565656; diff --git a/dist/ratchet.css b/dist/ratchet.css index b781661..90db69f 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -727,51 +727,6 @@ select { .bar-nav .button-primary { font-weight: 500; } -.bar-nav .button-prev:before, -.bar-nav .button-prev:after, -.bar-nav .button-next:before, -.bar-nav .button-next:after { - position: absolute; - display: block; - width: 15px; - height: 3px; - background-color: #428bca; - content: ''; -} -.bar-nav .button-prev { - padding-left: 20px; - margin-left: -5px; -} -.bar-nav .button-next { - padding-right: 20px; - margin-right: -5px; -} -.bar-nav .button-prev:before, -.bar-nav .button-prev:after { - left: 0; -} -.bar-nav .button-next:before, -.bar-nav .button-next:after { - right: 0; -} -.bar-nav .button-prev:before, -.bar-nav .button-next:before { - top: 16px; -} -.bar-nav .button-prev:after, -.bar-nav .button-next:after { - top: 25px; -} -.bar-nav .button-prev:before, -.bar-nav .button-next:after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} -.bar-nav .button-prev:after, -.bar-nav .button-next:before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} [class*="bar"] .button-block { padding: 7px 0; diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index e8921a1..3422b10 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -148,62 +148,6 @@ .button-primary { font-weight: $font-weight; } - - - // Directional buttons in nav bars - // -------------------------------------------------- - - .button-prev:before, - .button-prev:after, - .button-next:before, - .button-next:after { - position: absolute; - display: block; - width: 15px; - height: 3px; - background-color: $primary-color; - content: ''; - } - - // Prev/next button base styles - .button-prev { - padding-left: $button-directional-padding; - margin-left: $button-directional-margin; - } - .button-next { - padding-right: $button-directional-padding; - margin-right: $button-directional-margin; - } - - // Position the chevrons horizontally - .button-prev:before, - .button-prev:after { - left: 0; - } - .button-next:before, - .button-next:after { - right: 0; - } - - // Position the chevrons vertically - .button-prev:before, - .button-next:before { - top: 16px; - } - .button-prev:after, - .button-next:after { - top: 25px; - } - - // Rotate the chevrons - .button-prev:before, - .button-next:after { - @include transform(rotate(-45deg)); - } - .button-prev:after, - .button-next:before { - @include transform(rotate(45deg)); - } } // Block buttons in all bars diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index b813e6a..f7bbc0d 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -66,6 +66,9 @@ $border-radius: 0; bottom: $bar-tab-height + 1; } } +.bar-nav { + display: block; +} .bar-tab { height: $bar-tab-height; border-top: $border-default; diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 9173baa..e637267 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -59,9 +59,6 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods bottom: $bar-tab-height; } } -.bar-nav { - display: block; -} .bar-tab { border-top: 0; @include box-shadow(0 0 -1px rgba(0,0,0,.85)); From f39ee355208cca2a2a83d0dee74cc6ed82eadf79 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 12:23:07 -0800 Subject: [PATCH 21/45] how about we don't use flex-box. awww yis --- assets/css/docs.css | 8 ++++ dist/android-theme.css | 4 -- dist/ratchet.css | 47 ++++++-------------- index.html | 66 +++++++++++++++-------------- lib/sass/bars.scss | 3 -- lib/sass/buttons.scss | 22 +++------- lib/sass/segmented-controllers.scss | 25 ++++------- lib/sass/theme-android.scss | 3 -- 8 files changed, 69 insertions(+), 109 deletions(-) diff --git a/assets/css/docs.css b/assets/css/docs.css index 0c1436c..f36d0c2 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -314,6 +314,14 @@ h6 { height: 548px; overflow: hidden; background-color: #efeff4; + /*background: rgb(0,0,0); + background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); + background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );*/ } .iphone .content, diff --git a/dist/android-theme.css b/dist/android-theme.css index 6e4129d..e3101f5 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -34,10 +34,6 @@ bottom: 71px; } -.bar-nav { - display: block; -} - .bar-tab { height: 70px; border-top: 1px solid #565656; diff --git a/dist/ratchet.css b/dist/ratchet.css index 90db69f..790592d 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -311,10 +311,6 @@ strong { .bar-nav { top: 0; - display: -webkit-box; - display: box; - -webkit-box-orient: horizontal; - box-orient: horizontal; } .title { @@ -702,22 +698,15 @@ select { color: #428bca; background-color: transparent; border: 0; - -webkit-box-flex: 0; - box-flex: 0; } -.bar-nav .title + [class*="button"]:last-child, -.bar-nav .button + [class*="button"]:last-child, .bar-nav [class*="button"].pull-right { - position: absolute; - top: 5px; - right: 10px; + margin-left: 10px; +} +.bar-nav [class*="button"].pull-left { + margin-right: 10px; } .bar-nav .button:active, .bar-nav .button.active, -.bar-nav .button-prev:active, -.bar-nav .button-prev.active, -.bar-nav .button-next:active, -.bar-nav .button-next.active, .bar-nav .button-primary:active, .bar-nav .button-primary.active { color: #428bca; @@ -826,10 +815,8 @@ input[type="button"] { } .segmented-controller { - display: -webkit-box; - display: box; + display: table; padding: 0; - margin: 0 0 10px 0; overflow: hidden; font-size: 12px; font-weight: 400; @@ -837,20 +824,19 @@ input[type="button"] { background-color: white; border: 1px solid #428bca; border-radius: 4px; - -webkit-box-orient: horizontal; - box-orient: horizontal; } .segmented-controller li { + display: table-cell; overflow: hidden; + width: 1%; text-align: center; white-space: nowrap; border-left: 1px solid #428bca; - -webkit-box-flex: 1; - box-flex: 1; } .segmented-controller li > a { display: block; - padding: 6px 16px 7px; + padding-top: 6px; + padding-bottom: 7px; overflow: hidden; line-height: 1; color: #428bca; @@ -877,18 +863,9 @@ input[type="button"] { } [class*="bar-"] .segmented-controller { - margin: 3px 0; - -webkit-box-flex: 1; - box-flex: 1; -} - -.bar-nav .segmented-controller { - margin-bottom: 4px; -} - -[class*="bar-"] .segmented-controller + [class*="button"], -[class*="bar-"] [class*="button"] + .segmented-controller { - margin-left: 10px; + margin-top: 3px; + margin-right: auto; + margin-left: auto; } .popover { diff --git a/index.html b/index.html index 6eac635..bfe44ea 100644 --- a/index.html +++ b/index.html @@ -90,54 +90,54 @@ layout: default
- + Left -

Title

- + Right +

Title

{% highlight html %}
- + Left -

Title

- + Right +

Title

{% endhighlight %}
-

Title bar with directional buttons

+

Title bar with icons

Directional buttons in a title bar should be used for navigational purposes.

- - Previous + + Left -

Title

- - Next + + Right +

Title

{% highlight html %}
- - Previous + + Left -

Title

- - Next + + Right +

Title

{% endhighlight %} @@ -149,9 +149,12 @@ layout: default
- + Left + + Right +
  • One @@ -162,18 +165,21 @@ layout: default
  • Three
    • +
  • + Four +
- - Right -
{% highlight html %}
- + Left + + Right +
  • One @@ -185,9 +191,6 @@ layout: default Three
- - Right -
{% endhighlight %} @@ -871,13 +874,12 @@ document
- + Left - -

Popover title

- + Right +

Popover title

  • Item1
    • @@ -895,13 +897,13 @@ document {% highlight html %}
    - + Left -

    Popover title

    - + Right +

    Popover title

    • Item1
      • diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 4197013..50ddaa0 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -41,9 +41,6 @@ // Bar docked to top of viewport for showing page title and actions .bar-nav { top: 0; - display: -webkit-box; - display: box; - @include box-orient(horizontal); } // Centered text in the .bar-nav diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 3422b10..7760f1e 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -117,26 +117,18 @@ color: $primary-color; background-color: transparent; border: 0; - @include box-flex(0); - } - - // Hacky way to right align buttons outside of flex-box system - // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option - .title + [class*="button"]:last-child, - .button + [class*="button"]:last-child, - [class*="button"].pull-right { - position: absolute; - top: 5px; // Offsets the bar's vertical padding - right: $bar-side-spacing; + + &.pull-right { + margin-left: $bar-side-spacing; + } + &.pull-left { + margin-right: $bar-side-spacing; + } } // Override standard button active states .button:active, .button.active, - .button-prev:active, - .button-prev.active, - .button-next:active, - .button-next.active, .button-primary:active, .button-primary.active { color: $primary-color; diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss index d505af8..9b8c16f 100644 --- a/lib/sass/segmented-controllers.scss +++ b/lib/sass/segmented-controllers.scss @@ -3,10 +3,8 @@ // -------------------------------------------------- .segmented-controller { - display: -webkit-box; - display: box; + display: table; padding: 0; - margin: 0 0 10px 0; overflow: hidden; font-size: 12px; font-weight: $font-weight-light; @@ -14,20 +12,21 @@ background-color: $chrome-color; border: 1px solid $primary-color; border-radius: 4px; - @include box-orient(horizontal); // Section within controller li { + display: table-cell; overflow: hidden; + width: 1%; text-align: center; white-space: nowrap; border-left: 1px solid $primary-color; - @include box-flex(1); // Link that fills each section > a { display: block; - padding: 6px 16px 7px; + padding-top: 6px; + padding-bottom: 7px; overflow: hidden; line-height: 1; color: $primary-color; @@ -70,15 +69,7 @@ // Remove standard segmented bottom margin [class*="bar-"] .segmented-controller { - margin: 3px 0; - @include box-flex(1); -} -.bar-nav .segmented-controller { - margin-bottom: 4px; -} - -// Add margins between segmented controllers and buttons -[class*="bar-"] .segmented-controller + [class*="button"], -[class*="bar-"] [class*="button"] + .segmented-controller { - margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons + margin-top: 3px; + margin-right: auto; + margin-left: auto; } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index f7bbc0d..b813e6a 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -66,9 +66,6 @@ $border-radius: 0; bottom: $bar-tab-height + 1; } } -.bar-nav { - display: block; -} .bar-tab { height: $bar-tab-height; border-top: $border-default; From d3376b25dd9b31f5216b5d97fd552f44eb469aee Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 12:40:20 -0800 Subject: [PATCH 22/45] simplifiy bars --- _includes/header.html | 2 +- dist/ratchet.css | 7 ++----- lib/sass/bars.scss | 6 ++---- lib/sass/buttons.scss | 3 +-- lib/sass/segmented-controllers.scss | 4 +--- 5 files changed, 7 insertions(+), 15 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 0ae8145..f00d26d 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/dist/ratchet.css b/dist/ratchet.css index 790592d..089feb9 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -292,7 +292,8 @@ strong { left: 0; z-index: 10; height: 44px; - padding: 5px 10px; + padding-right: 10px; + padding-left: 10px; border-bottom: 1px solid #dddddd; background-color: white; } @@ -314,9 +315,6 @@ strong { } .title { - position: absolute; - top: 0; - left: 0; display: block; width: 100%; padding: 0; @@ -691,7 +689,6 @@ select { position: relative; z-index: 10; padding: 0; - margin-top: -5px; font-size: 16px; font-weight: 400; line-height: 44px; diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 50ddaa0..48776fe 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -8,7 +8,8 @@ left: 0; z-index: 10; height: $bar-base-height; - padding: 5px $bar-side-spacing; + padding-right: $bar-side-spacing; + padding-left: $bar-side-spacing; border-bottom: $border-default; background-color: $chrome-color; @@ -45,9 +46,6 @@ // Centered text in the .bar-nav .title { - position: absolute; - top: 0; - left: 0; display: block; width: 100%; padding: 0; diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 7760f1e..037b743 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -110,14 +110,13 @@ position: relative; z-index: 10; // Places buttons over full width title padding: 0; - margin-top: -5px; // Offsets the bar's vertical padding font-size: 16px; font-weight: $font-weight-light; line-height: $bar-base-height; color: $primary-color; background-color: transparent; border: 0; - + &.pull-right { margin-left: $bar-side-spacing; } diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss index 9b8c16f..d212ea8 100644 --- a/lib/sass/segmented-controllers.scss +++ b/lib/sass/segmented-controllers.scss @@ -69,7 +69,5 @@ // Remove standard segmented bottom margin [class*="bar-"] .segmented-controller { - margin-top: 3px; - margin-right: auto; - margin-left: auto; + margin: 8px auto 0; } From bd5b2e27d13a2156712857325525a942c649ff56 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 12:40:51 -0800 Subject: [PATCH 23/45] build --- dist/ratchet.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 089feb9..8b5c195 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -860,9 +860,7 @@ input[type="button"] { } [class*="bar-"] .segmented-controller { - margin-top: 3px; - margin-right: auto; - margin-left: auto; + margin: 8px auto 0; } .popover { From 14a07e0a64f28918a9855fe2026c5090914bcc24 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 12:43:54 -0800 Subject: [PATCH 24/45] refinements --- dist/android-theme.css | 9 --------- dist/ratchet.css | 7 ++++--- lib/sass/bars.scss | 4 ++-- lib/sass/buttons.scss | 3 ++- lib/sass/theme-android.scss | 15 --------------- 5 files changed, 8 insertions(+), 30 deletions(-) diff --git a/dist/android-theme.css b/dist/android-theme.css index e3101f5..5272fe5 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -24,15 +24,6 @@ background-color: #111111; border-bottom: 1px solid #565656; } -[class*="bar-"].bar-header-secondary { - top: 51px; -} -[class*="bar-"].bar-footer-secondary { - bottom: 51px; -} -[class*="bar-"].bar-footer-secondary-tab { - bottom: 71px; -} .bar-tab { height: 70px; diff --git a/dist/ratchet.css b/dist/ratchet.css index 8b5c195..5fefa23 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -304,10 +304,10 @@ strong { bottom: 0; } [class*="bar-"].bar-footer-secondary { - bottom: 45px; + bottom: 44px; } [class*="bar-"].bar-footer-secondary-tab { - bottom: 51px; + bottom: 50px; } .bar-nav { @@ -716,7 +716,8 @@ select { [class*="bar"] .button-block { padding: 7px 0; - margin-top: 1px; + margin-top: 4px; + margin-bottom: 5px; font-size: 16px; } diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 48776fe..405178a 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -26,12 +26,12 @@ // Modifier class to dock any bar above a standard bar &.bar-footer-secondary { - bottom: $bar-base-height + 1; + bottom: $bar-base-height; } // Modifier class to dock any bar above a .bar-tab &.bar-footer-secondary-tab { - bottom: $bar-tab-height + 1; + bottom: $bar-tab-height; } } diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 037b743..80b5e15 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -147,7 +147,8 @@ // Add proper padding [class*="bar"] .button-block { padding: 7px 0; - margin-top: 1px; + margin-top: 4px; + margin-bottom: 5px; font-size: 16px; // Scale down font size to fit in bar. } diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index b813e6a..4a74f63 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -50,21 +50,6 @@ $border-radius: 0; height: $bar-base-height; background-color: $chrome-color; border-bottom: $border-default; - - // Modifier class to dock any bar below .bar-nav - &.bar-header-secondary { - top: $bar-base-height + 1; - } - - // Modifier class to dock any bar above a standard bar - &.bar-footer-secondary { - bottom: $bar-base-height + 1; - } - - // Modifier class to dock any bar above a .bar-tab - &.bar-footer-secondary-tab { - bottom: $bar-tab-height + 1; - } } .bar-tab { height: $bar-tab-height; From 2987aeb8f22c2ed953ec684f0e1771e891d50449 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 12:47:39 -0800 Subject: [PATCH 25/45] float buttons left by default in bars. --- lib/sass/buttons.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 80b5e15..e7ab2f7 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -107,8 +107,7 @@ .bar-nav { // Generic style for all buttons in .bar-title [class*="button"] { - position: relative; - z-index: 10; // Places buttons over full width title + float: left; // Places buttons to the left by default padding: 0; font-size: 16px; font-weight: $font-weight-light; From 5f42b8fa74a98b3e6839d9d76bba1fa671a78958 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 12:56:21 -0800 Subject: [PATCH 26/45] fixing up buttons --- dist/ratchet.css | 6 +++++- index.html | 6 +++--- lib/sass/bars.scss | 6 +++++- lib/sass/buttons.scss | 3 ++- 4 files changed, 15 insertions(+), 6 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 5fefa23..a165180 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -315,10 +315,14 @@ strong { } .title { + position: absolute; display: block; width: 100%; padding: 0; - margin: 0; + margin-top: 0; + margin-bottom: 0; + margin-left: -10px; + margin-right: -10px; font-size: 17px; font-weight: 500; line-height: 44px; diff --git a/index.html b/index.html index bfe44ea..3976175 100644 --- a/index.html +++ b/index.html @@ -935,7 +935,7 @@ document

      Modals

      - Open modal + Open modal
@@ -638,10 +638,10 @@ layout: default Block button Block button - Block button - Block button - Block button - Block button + Block button + Block button + Block button + Block button {% highlight html %} @@ -650,10 +650,10 @@ layout: default Block button Block button -Block button -Block button -Block button -Block button +Block button +Block button +Block button +Block button {% endhighlight %} @@ -725,10 +725,6 @@ layout: default 2 3 4 - 1 - 2 - 3 - 4 @@ -737,11 +733,6 @@ layout: default 2 3 4 - -1 -2 -3 -4 {% endhighlight %} @@ -756,7 +747,7 @@ layout: default - Choose existing + Choose existing @@ -765,7 +756,7 @@ layout: default - Choose existing + Choose existing {% endhighlight %} diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index cbfef26..7595510 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -15,23 +15,18 @@ vertical-align: top; cursor: pointer; background-color: $chrome-color; - border: $border-default; + border: 1px solid #ccc; border-radius: 4px; - &.button-filled { - background-color: $chrome-color; - } - // Active & filled button styles &:active, &.active { - background-color: #ebebeb; + background-color: #ccc; } // Disabled styles & filled button active styles &:disabled, - &.disabled, - &.button-filled:active { + &.disabled { opacity: .6; } } @@ -42,41 +37,63 @@ // Primary button (Default color is blue) .button-primary { - color: $primary-color; + color: #fff; border: 1px solid $primary-color; + background-color: $primary-color; &:active, - &.active, - &.button-filled { - color: #fff; - background-color: $primary-color; + &.active { + border: 1px solid darken($primary-color, 10%); + background-color: darken($primary-color, 10%); } } // Positive button (Default color is green) .button-positive { - color: $positive-color; + color: #fff; border: 1px solid $positive-color; + background-color: $positive-color; &:active, - &.active, - &.button-filled { - color: #fff; - background-color: $positive-color; + &.active{ + border: 1px solid darken($positive-color, 10%); + background-color: darken($positive-color, 10%); } } // Negative button (Default color is red) .button-negative { - color: $negative-color; + color: #fff; border: 1px solid $negative-color; + background-color: $negative-color; &:active, - &.active, - &.button-filled { + &.active { + border: 1px solid darken($negative-color, 10%); + background-color: darken($negative-color, 10%); + } +} + +// Outline buttons +.button-outlined { + background-color: transparent; + + &.button-primary { + color: $primary-color; + } + &.button-positive { + color: $positive-color; + } + &.button-negative { + color: $negative-color; + } + // Active states + &.button-primary:active, + &.button-positive:active, + &.button-negative:active { color: #fff; - background-color: $negative-color; } + } // Link button (Buttons that look like links) @@ -88,9 +105,6 @@ &.active { color: darken($primary-color, 10%); } - &.button-filled { - background-color: transparent; - } } // Block level buttons (full width buttons) From 7e9110196a1c8b8ec978f5fe3e194ca334a9157b Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 13:43:28 -0800 Subject: [PATCH 29/45] twerkin badges --- dist/ratchet.css | 39 ++++++++++++++++++++------------- index.html | 13 +++++++---- lib/sass/badges.scss | 50 +++++++++++++++++++++++++------------------ lib/sass/buttons.scss | 2 +- 4 files changed, 63 insertions(+), 41 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 6545caa..0d6a49a 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -777,50 +777,59 @@ input[type="button"] { [class*="badge"] { display: inline-block; - color: #333; -} -[class*="badge"].badge-filled { padding: 2px 9px; font-size: 13px; line-height: 1; + color: #333; background-color: rgba(0, 0, 0, 0.15); border-radius: 100px; } +[class*="badge"].badge-inverted { + padding: 0; + background-color: transparent; +} .badge-primary { - color: #428bca; -} -.badge-primary.badge-filled { color: #fff; background-color: #428bca; } +.badge-primary.badge-inverted { + color: #428bca; +} .badge-positive { - color: #5cb85c; -} -.badge-positive.badge-filled { color: #fff; background-color: #5cb85c; } +.badge-positive.badge-inverted { + color: #5cb85c; +} .badge-negative { - color: #d9534f; -} -.badge-negative.badge-filled { color: #fff; background-color: #d9534f; } +.badge-negative.badge-inverted { + color: #d9534f; +} [class*="button"] [class*="badge"] { font-size: 12px; padding-top: 2px; padding-bottom: 2px; margin: -2px -4px -2px 4px; + background-color: rgba(0, 0, 0, 0.15); } -.button-filled .badge-filled, -[class*="button"]:active .badge-filled { - background-color: rgba(0, 0, 0, 0.15); +[class*="button"] .badge-inverted, +[class*="button"]:active .badge-inverted { + background-color: transparent; +} + +.button-primary:active .badge-inverted, +.button-positive:active .badge-inverted, +.button-negative:active .badge-inverted { + color: #fff; } .button-block [class*="badge"] { diff --git a/index.html b/index.html index 8eefbc7..1472f58 100644 --- a/index.html +++ b/index.html @@ -621,10 +621,10 @@ layout: default Badge button1 Badge button1 -Badge button1 -Badge button1 -Badge button1 -Badge button1 +Badge button1 +Badge button1 +Badge button1 +Badge button1 {% endhighlight %} @@ -733,6 +733,11 @@ layout: default 2 3 4 + +1 +2 +3 +4 {% endhighlight %} diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss index 177cef1..7d2d0de 100644 --- a/lib/sass/badges.scss +++ b/lib/sass/badges.scss @@ -4,14 +4,16 @@ [class*="badge"] { display: inline-block; + padding: 2px 9px; + font-size: 13px; + line-height: 1; color: #333; + background-color: rgba(0,0,0,.15); + border-radius: 100px; - &.badge-filled { - padding: 2px 9px; - font-size: 13px; - line-height: 1; - background-color: rgba(0,0,0,.15); - border-radius: 100px; + &.badge-inverted { + padding: 0; + background-color: transparent; } } @@ -21,31 +23,31 @@ // Main badge .badge-primary { - color: $primary-color; + color: #fff; + background-color: $primary-color; - &.badge-filled { - color: #fff; - background-color: $primary-color; + &.badge-inverted { + color: $primary-color; } } // Positive badge .badge-positive { - color: $positive-color; + color: #fff; + background-color: $positive-color; - &.badge-filled { - color: #fff; - background-color: $positive-color; + &.badge-inverted { + color: $positive-color; } } // Negative badge .badge-negative { - color: $negative-color; + color: #fff; + background-color: $negative-color; - &.badge-filled { - color: #fff; - background-color: $negative-color; + &.badge-inverted { + color: $negative-color; } } @@ -59,12 +61,18 @@ padding-top: 2px; padding-bottom: 2px; margin: -2px -4px -2px 4px; + background-color: rgba(0,0,0,.15); } // Styles for filled badges within filled buttons -.button-filled .badge-filled, -[class*="button"]:active .badge-filled { - background-color: rgba(0,0,0,.15); +[class*="button"] .badge-inverted, +[class*="button"]:active .badge-inverted { + background-color: transparent; +} +.button-primary:active .badge-inverted, +.button-positive:active .badge-inverted, +.button-negative:active .badge-inverted { + color: #fff; } // Position badges within block level buttons diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 7595510..bbf3ba3 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -74,7 +74,7 @@ } } -// Outline buttons +// Outlined buttons .button-outlined { background-color: transparent; From f4cb845336f6e90492109fe03942da45263334a3 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 13:54:47 -0800 Subject: [PATCH 30/45] honestly i lost track --- dist/android-theme.css | 3 +++ index.html | 4 ++-- lib/sass/theme-android.scss | 4 ++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/dist/android-theme.css b/dist/android-theme.css index 5272fe5..c95fac6 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -24,6 +24,9 @@ background-color: #111111; border-bottom: 1px solid #565656; } +[class*="bar-"] [class*="button"] { + line-height: 50px; +} .bar-tab { height: 70px; diff --git a/index.html b/index.html index 1472f58..90c2af3 100644 --- a/index.html +++ b/index.html @@ -752,7 +752,7 @@ layout: default - Choose existing + Choose existing @@ -761,7 +761,7 @@ layout: default - Choose existing + Choose existing {% endhighlight %} diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 4a74f63..dd292bb 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -50,6 +50,10 @@ $border-radius: 0; height: $bar-base-height; background-color: $chrome-color; border-bottom: $border-default; + + [class*="button"] { + line-height: $bar-base-height; + } } .bar-tab { height: $bar-tab-height; From 2ef2d9ab2a2b882882fda6dc86ca8ea91c90e0a9 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 14:29:15 -0800 Subject: [PATCH 31/45] redoing our buttons in nav bars --- dist/ratchet.css | 29 +++++++++++++++-------------- index.html | 6 ++++-- lib/sass/buttons.scss | 35 ++++++++++++++++++----------------- 3 files changed, 37 insertions(+), 33 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 0d6a49a..87073e3 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -632,7 +632,7 @@ select { cursor: pointer; background-color: white; border: 1px solid #ccc; - border-radius: 4px; + border-radius: 3px; } [class*="button"]:active, [class*="button"].active { background-color: #ccc; @@ -688,11 +688,15 @@ select { } .button-link { + padding-top: 6px; + padding-bottom: 6px; color: #428bca; + background-color: transparent; border: none; } .button-link:active, .button-link.active { color: #3071a9; + background-color: transparent; } .button-block { @@ -711,13 +715,9 @@ input[type="button"] { .bar-nav [class*="button"] { position: relative; z-index: 10; - padding: 0; - font-size: 16px; + padding: 6px 12px; + margin-top: 8px; font-weight: 400; - line-height: 44px; - color: #428bca; - background-color: transparent; - border: 0; } .bar-nav [class*="button"].pull-right { margin-left: 10px; @@ -725,16 +725,17 @@ input[type="button"] { .bar-nav [class*="button"].pull-left { margin-right: 10px; } -.bar-nav .button:active, -.bar-nav .button.active, -.bar-nav .button-primary:active, -.bar-nav .button-primary.active { +.bar-nav .button-link { + padding: 0; + margin-top: 0; + font-size: 16px; color: #428bca; + line-height: 44px; background-color: transparent; - opacity: .3; + border: none; } -.bar-nav .button-primary { - font-weight: 500; +.bar-nav .button-link:active, .bar-nav .button-link.active { + color: #3071a9; } [class*="bar"] .button-block { diff --git a/index.html b/index.html index 90c2af3..29fdde4 100644 --- a/index.html +++ b/index.html @@ -102,10 +102,10 @@ layout: default {% highlight html %}
- + Left - + Right

Title

@@ -594,6 +594,7 @@ layout: default Button Button Button + Button {% highlight html %} @@ -601,6 +602,7 @@ layout: default Button Button Button +Button {% endhighlight %} diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index bbf3ba3..bf359aa 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -16,7 +16,7 @@ cursor: pointer; background-color: $chrome-color; border: 1px solid #ccc; - border-radius: 4px; + border-radius: 3px; // Active & filled button styles &:active, @@ -98,12 +98,16 @@ // Link button (Buttons that look like links) .button-link { + padding-top: 6px; + padding-bottom: 6px; color: $primary-color; + background-color: transparent; border: none; &:active, &.active { color: darken($primary-color, 10%); + background-color: transparent; } } @@ -131,13 +135,9 @@ input[type="button"] { [class*="button"] { position: relative; z-index: 10; // Position the buttons on top of .title - padding: 0; - font-size: 16px; + padding: 6px 12px; + margin-top: 8px; font-weight: $font-weight-light; - line-height: $bar-base-height; - color: $primary-color; - background-color: transparent; - border: 0; &.pull-right { margin-left: $bar-side-spacing; @@ -147,19 +147,20 @@ input[type="button"] { } } - // Override standard button active states - .button:active, - .button.active, - .button-primary:active, - .button-primary.active { + // Link button (Buttons that look like links) + .button-link { + padding: 0; + margin-top: 0; + font-size: 16px; color: $primary-color; + line-height: $bar-base-height; background-color: transparent; - opacity: .3; - } + border: none; - // Primary button in bars - .button-primary { - font-weight: $font-weight; + &:active, + &.active { + color: darken($primary-color, 10%); + } } } From 4e52e4f2088d566980cdd73a312f2a6af05649ac Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 14:53:20 -0800 Subject: [PATCH 32/45] fixing up the ios theme plus refineing buttons and badges --- _includes/header.html | 2 +- dist/ios-theme.css | 68 ++++++++++++++++++++------------- dist/ratchet.css | 6 +-- index.html | 2 +- lib/sass/bars.scss | 2 - lib/sass/buttons.scss | 1 - lib/sass/table-views.scss | 4 +- lib/sass/theme-ios.scss | 79 ++++++++++++++++++++++----------------- 8 files changed, 93 insertions(+), 71 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index f00d26d..9c2b79f 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/dist/ios-theme.css b/dist/ios-theme.css index 73b4460..5464ac5 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -129,65 +129,81 @@ textarea, [class*="button"] { border: 1px solid #929292; color: #929292; - background-color: transparent; - -webkit-transition: background-color, opacity, color; - transition: background-color, opacity, color; + background-color: rgba(247, 247, 247, 0.98); + -webkit-transition: all; + transition: all; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } -[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { +[class*="button"]:active, [class*="button"].active { color: #fff; background-color: #929292; } .button-primary { - color: #007aff; + color: #fff; border: 1px solid #007aff; -} -.button-primary:active, .button-primary.active, .button-primary.button-filled { background-color: #007aff; } +.button-primary:active, .button-primary.active { + border: 1px solid #0062cc; + background-color: #0062cc; +} .button-positive { - color: #4cd964; + color: #fff; border: 1px solid #4cd964; -} -.button-positive:active, .button-positive.active, .button-positive.button-filled { background-color: #4cd964; } +.button-positive:active, .button-positive.active { + border: 1px solid #2ac845; + background-color: #2ac845; +} .button-negative { - color: #dd524d; + color: #fff; border: 1px solid #dd524d; -} -.button-negative:active, .button-negative.active, .button-negative.button-filled { background-color: #dd524d; } +.button-negative:active, .button-negative.active { + border: 1px solid #cf2d28; + background-color: #cf2d28; +} -.button-link { - color: #007aff; +.button-outlined { + background-color: transparent; } -.button-link:active, .button-link.active { +.button-outlined.button-primary { color: #007aff; } +.button-outlined.button-positive { + color: #4cd964; +} +.button-outlined.button-negative { + color: #dd524d; +} +.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active { + color: #fff; +} -.button-link:active, .button-link.active { +.button-link { color: #007aff; - opacity: .3; + background-color: transparent; + border: none; +} +.button-link:active, .button-link.active { + color: #0062cc; + background-color: transparent; } -.bar-nav [class*="button"] { +.bar-nav .button-link { color: #007aff; - -webkit-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; } -.bar-nav .button-prev:before, -.bar-nav .button-prev:after, -.bar-nav .button-next:before, -.bar-nav .button-next:after { - background-color: #007aff; +.bar-nav .button-link:active { + color: #007aff; + opacity: .6; } [class*="badge"] { diff --git a/dist/ratchet.css b/dist/ratchet.css index 87073e3..a40d494 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -387,8 +387,6 @@ strong { } .popover .bar-nav { - padding-right: 15px; - padding-left: 15px; border-bottom: 1px solid #dddddd; border-radius: 12px 12px 0 0; -webkit-box-shadow: none; @@ -462,12 +460,12 @@ strong { top: 50%; right: 10px; } -.table-view .chevron, -.table-view [class*="badge"] { +.table-view .chevron { margin-top: -10px; } .table-view .chevron + [class*="badge"] { right: 30px; + margin-top: -9px; } .table-view [class*="button"] { left: auto; diff --git a/index.html b/index.html index 29fdde4..b138d9c 100644 --- a/index.html +++ b/index.html @@ -102,7 +102,7 @@ layout: default {% highlight html %}
- + Left diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index f715602..b59d0c8 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -136,8 +136,6 @@ // -------------------------------------------------- .popover .bar-nav { - padding-right: 15px; - padding-left: 15px; border-bottom: $border-default; border-radius: 12px 12px 0 0; @include box-shadow(none); diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index bf359aa..4e66e3f 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -93,7 +93,6 @@ &.button-negative:active { color: #fff; } - } // Link button (Buttons that look like links) diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 36a6af2..2561ba0 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -94,14 +94,14 @@ } // Position chevrons/badges vertically centered on the right in table view items - .chevron, - [class*="badge"] { + .chevron { margin-top: -10px; // Half height of chevron } // Push badge over if there's a sibling chevron .chevron + [class*="badge"] { right: 30px; + margin-top: -9px; } // Position buttons vertically centered on the right in table view items diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index e637267..b61b0ff 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -177,15 +177,14 @@ textarea, [class*="button"] { border: 1px solid $default-color; color: $default-color; - background-color: transparent; - @include transition(background-color, opacity, color); + background-color: $chrome-color; + @include transition(all); @include transition-duration(.2s); @include transition-timing-function(linear); // Active & filled button styles &:active, - &.active, - &.button-filled { + &.active { color: #fff; background-color: $default-color; } @@ -197,56 +196,74 @@ textarea, // Primary button (Default color is blue) .button-primary { - color: $primary-color; + color: #fff; border: 1px solid $primary-color; + background-color: $primary-color; &:active, - &.active, - &.button-filled { - background-color: $primary-color; + &.active { + border: 1px solid darken($primary-color, 10%); + background-color: darken($primary-color, 10%); } } // Positive button (Default color is green) .button-positive { - color: $positive-color; + color: #fff; border: 1px solid $positive-color; + background-color: $positive-color; &:active, - &.active, - &.button-filled { - background-color: $positive-color; + &.active { + border: 1px solid darken($positive-color, 10%); + background-color: darken($positive-color, 10%); } } // Negative button (Default color is red) .button-negative { - color: $negative-color; + color: #fff; border: 1px solid $negative-color; + background-color: $negative-color; &:active, - &.active, - &.button-filled { - background-color: $negative-color; + &.active { + border: 1px solid darken($negative-color, 10%); + background-color: darken($negative-color, 10%); } } -// Link button (Buttons that look like links) -.button-link { - color: $primary-color; +// Outlined buttons +.button-outlined { + background-color: transparent; - &:active, - &.active { + &.button-primary { color: $primary-color; } + &.button-positive { + color: $positive-color; + } + &.button-negative { + color: $negative-color; + } + // Active states + &.button-primary:active, + &.button-positive:active, + &.button-negative:active { + color: #fff; + } } // Link button (Buttons that look like links) .button-link { + color: $primary-color; + background-color: transparent; + border: none; + &:active, &.active { - color: $primary-color; - opacity: .3; + color: darken($primary-color, 10%); + background-color: transparent; } } @@ -254,19 +271,13 @@ textarea, // -------------------------------------------------- .bar-nav { - [class*="button"] { + .button-link { color: $primary-color; - @include transition(opacity .2s linear); - } - - // Directional buttons in nav bars - // -------------------------------------------------- - .button-prev:before, - .button-prev:after, - .button-next:before, - .button-next:after { - background-color: $primary-color; + &:active { + color: $primary-color; + opacity: .6; + } } } From ce96e6e378525592afc9d6bd8fd1b4064655b5e0 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 15:06:50 -0800 Subject: [PATCH 33/45] fix all the badges --- dist/ios-theme.css | 23 ++++++++++------------- dist/ratchet.css | 11 +++++++++-- index.html | 8 ++++---- lib/sass/buttons.scss | 23 +++++++++++++++++------ lib/sass/table-views.scss | 4 +++- lib/sass/theme-ios.scss | 28 +++++++++++++--------------- 6 files changed, 56 insertions(+), 41 deletions(-) diff --git a/dist/ios-theme.css b/dist/ios-theme.css index 5464ac5..3c21785 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -206,36 +206,33 @@ textarea, opacity: .6; } -[class*="badge"] { - color: #929292; -} -[class*="badge"].badge-filled { +[class*="badge"].badge-inverted { color: #929292; } .badge-primary { - color: #007aff; -} -.badge-primary.badge-filled { color: #fff; background-color: #007aff; } +.badge-primary.badge-inverted { + color: #007aff; +} .badge-positive { - color: #4cd964; -} -.badge-positive.badge-filled { color: #fff; background-color: #4cd964; } +.badge-positive.badge-inverted { + color: #4cd964; +} .badge-negative { - color: #dd524d; -} -.badge-negative.badge-filled { color: #fff; background-color: #dd524d; } +.badge-negative.badge-inverted { + color: #dd524d; +} .segmented-controller { background-color: transparent; diff --git a/dist/ratchet.css b/dist/ratchet.css index a40d494..c3e74b4 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -463,9 +463,11 @@ strong { .table-view .chevron { margin-top: -10px; } +.table-view [class*="badge"] { + margin-top: -9px; +} .table-view .chevron + [class*="badge"] { right: 30px; - margin-top: -9px; } .table-view [class*="button"] { left: auto; @@ -746,10 +748,15 @@ input[type="button"] { .popover .button-block { margin-bottom: 5px; } - .popover .button-block:last-child { margin-bottom: 0; } +.popover .bar-nav .button-link.pull-left { + margin-left: 5px; +} +.popover .bar-nav .button-link.pull-right { + margin-right: 5px; +} .chevron { display: block; diff --git a/index.html b/index.html index b138d9c..fd7df26 100644 --- a/index.html +++ b/index.html @@ -872,9 +872,9 @@ document
- + Left - + Right

Popover title

@@ -895,10 +895,10 @@ document {% highlight html %}
- + Left - + Right

Popover title

diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 4e66e3f..4175214 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -180,11 +180,22 @@ input[type="button"] { // -------------------------------------------------- // Positioning and giving darker border to look sharp against dark popover -.popover .button-block { - margin-bottom: 5px; -} +.popover { + .button-block { + margin-bottom: 5px; + } -// Remove extra margin on bottom of last button -.popover .button-block:last-child { - margin-bottom: 0; + // Remove extra margin on bottom of last button + .button-block:last-child { + margin-bottom: 0; + } + // Line the button text up with content's text + .bar-nav .button-link { + &.pull-left { + margin-left: 5px; + } + &.pull-right { + margin-right: 5px; + } + } } diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 2561ba0..9fa3747 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -97,11 +97,13 @@ .chevron { margin-top: -10px; // Half height of chevron } + [class*="badge"] { + margin-top: -9px; // Aligned just right + } // Push badge over if there's a sibling chevron .chevron + [class*="badge"] { right: 30px; - margin-top: -9px; } // Position buttons vertically centered on the right in table view items diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index b61b0ff..0fd12ba 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -287,9 +287,7 @@ textarea, // -------------------------------------------------- [class*="badge"] { - color: $default-color; - - &.badge-filled { + &.badge-inverted { color: $default-color; } } @@ -300,31 +298,31 @@ textarea, // Main badge .badge-primary { - color: $primary-color; + color: #fff; + background-color: $primary-color; - &.badge-filled { - color: #fff; - background-color: $primary-color; + &.badge-inverted { + color: $primary-color; } } // Positive badge .badge-positive { - color: $positive-color; + color: #fff; + background-color: $positive-color; - &.badge-filled { - color: #fff; - background-color: $positive-color; + &.badge-inverted { + color: $positive-color; } } // Negative badge .badge-negative { - color: $negative-color; + color: #fff; + background-color: $negative-color; - &.badge-filled { - color: #fff; - background-color: $negative-color; + &.badge-inverted { + color: $negative-color; } } From 3ee68d66f35a7bc51225cd65c753066ec4a50a20 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 15:07:48 -0800 Subject: [PATCH 34/45] adjusting badges in table-views --- lib/sass/table-views.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 9fa3747..d2563d8 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -111,7 +111,7 @@ left: auto; margin-top: -12px; // Half height of button } - + .toggle { margin-top: -15px; // Half height of toggle } From b6c74af9e18e576b39daf36803c7af68a53150a2 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 15:30:14 -0800 Subject: [PATCH 35/45] coming back to the android theme. super rough right now. --- _includes/header.html | 2 +- assets/css/docs.css | 4 +- dist/android-theme.css | 152 +++++++++++++++++---------------- lib/sass/badges.scss | 5 ++ lib/sass/theme-android.scss | 164 +++++++++++++++++++----------------- 5 files changed, 170 insertions(+), 157 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 9c2b79f..4dc447a 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/assets/css/docs.css b/assets/css/docs.css index f36d0c2..3487316 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -314,14 +314,14 @@ h6 { height: 548px; overflow: hidden; background-color: #efeff4; - /*background: rgb(0,0,0); + background: rgb(0,0,0); background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );*/ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); } .iphone .content, diff --git a/dist/android-theme.css b/dist/android-theme.css index c95fac6..01f1f21 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -24,8 +24,8 @@ background-color: #111111; border-bottom: 1px solid #565656; } -[class*="bar-"] [class*="button"] { - line-height: 50px; +[class*="bar-"].bar-header-secondary { + top: 51px; } .bar-tab { @@ -35,6 +35,7 @@ } .title { + position: static; padding-left: 10px; line-height: 50px; color: white; @@ -46,10 +47,7 @@ } .table-view .table-view-cell { - border-bottom: 0; - background-image: url("data:image/svg+xml;utf8,"); - background-position: 15px 100%; - background-repeat: no-repeat; + border-bottom: 1px solid #565656; } .table-view .table-view-cell:last-child { background-image: none; @@ -125,110 +123,132 @@ textarea, } [class*="button"] { - border: 1px solid white; + border: 1px solid #565656; color: white; - background-color: transparent; - -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; -} -[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { + background-color: #111111; + border-radius: 3px; +} +[class*="button"]:active, [class*="button"].active { color: #fff; background-color: white; } -.button-primary { +[class*="bar-"] [class*="button"] { + padding-top: 9px; + padding-bottom: 9px; +} +[class*="bar-"] .button-link { + padding: 0; color: #33b5e5; - border: 1px solid #33b5e5; + line-height: 50px; +} +[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active { + color: #1a9bcb; } -.button-primary:active, .button-primary.active, .button-primary.button-filled { + +.button-primary { + color: #fff; + border: 1px solid #33b5e5; background-color: #33b5e5; } +.button-primary:active, .button-primary.active { + border: 1px solid #1a9bcb; + background-color: #1a9bcb; +} .button-positive { - color: #81c700; + color: #fff; border: 1px solid #81c700; -} -.button-positive:active, .button-positive.active, .button-positive.button-filled { background-color: #81c700; } +.button-positive:active, .button-positive.active { + border: 1px solid #609400; + background-color: #609400; +} .button-negative { - color: #f20754; + color: #fff; border: 1px solid #f20754; -} -.button-negative:active, .button-negative.active, .button-negative.button-filled { background-color: #f20754; } +.button-negative:active, .button-negative.active { + border: 1px solid #c00643; + background-color: #c00643; +} -.button-link { - color: #33b5e5; +.button-outlined { + background-color: transparent; } -.button-link:active, .button-link.active { +.button-outlined.button-primary { color: #33b5e5; } +.button-outlined.button-positive { + color: #81c700; +} +.button-outlined.button-negative { + color: #f20754; +} +.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active { + color: #fff; +} -.button-link:active, .button-link.active { +.button-link { color: #33b5e5; - opacity: .3; + background-color: transparent; + border: none; +} +.button-link:active, .button-link.active { + color: #1a9bcb; + background-color: transparent; } -.bar-nav [class*="button"] { +.bar-nav .button-link { color: #33b5e5; - -webkit-transition: opacity 0.2s linear; - transition: opacity 0.2s linear; } -.bar-nav .button-prev:before, -.bar-nav .button-prev:after, -.bar-nav .button-next:before, -.bar-nav .button-next:after { - background-color: #33b5e5; +.bar-nav .button-link:active { + color: #33b5e5; + opacity: .6; } -[class*="badge"] { - color: white; -} -[class*="badge"].badge-filled { +[class*="badge"].badge-inverted { color: white; } .badge-primary { - color: #33b5e5; -} -.badge-primary.badge-filled { color: #fff; background-color: #33b5e5; } +.badge-primary.badge-inverted { + color: #33b5e5; +} .badge-positive { - color: #81c700; -} -.badge-positive.badge-filled { color: #fff; background-color: #81c700; } +.badge-positive.badge-inverted { + color: #81c700; +} .badge-negative { - color: #f20754; -} -.badge-negative.badge-filled { color: #fff; background-color: #f20754; } +.badge-negative.badge-inverted { + color: #f20754; +} .segmented-controller { background-color: transparent; border: 1px solid #33b5e5; + border-radius: 3px; } .segmented-controller li { border-left: 1px solid #33b5e5; - -webkit-transition: background-color 0.1s linear; - transition: background-color 0.1s linear; } .segmented-controller li > a { + padding-top: 9px; + padding-bottom: 10px; color: #33b5e5; } .segmented-controller li.selected { @@ -237,42 +257,20 @@ textarea, .popover { border-radius: 12px; - -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .popover:after { border-bottom: 15px solid #111111; } -.toggle { - border: 2px solid #e6e6e6; - -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; - box-shadow: inset 0 0 0 0 #e1e1e1; - -webkit-transition-property: box-shadow, border; - transition-property: box-shadow, border; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; -} .toggle .toggle-handle { - border: 1px solid rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); - -webkit-transition-property: -webkit-transform, border, width; - transition-property: -webkit-transform, border, width; + border: 1px solid #565656; } .toggle:active .toggle-handle { width: 35px; } .toggle.active { border: 2px solid #81c700; - background-color: transparent; - -webkit-box-shadow: inset 0 0 0 13px #81c700; - box-shadow: inset 0 0 0 13px #81c700; -} -.toggle.active:active .toggle-handle, -.toggle.active .toggle-handle:active { - -webkit-transform: translate3d(10px, 0, 0) !important; - transform: translate3d(10px, 0, 0) !important; + background-color: #81c700; } .toggle.active .toggle-handle { border-color: #81c700; diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss index 7d2d0de..36c6651 100644 --- a/lib/sass/badges.scss +++ b/lib/sass/badges.scss @@ -83,3 +83,8 @@ right: 0; margin-right: 10px; } + +// Badges in table-views +// -------------------------------------------------- + + diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index dd292bb..4d9da26 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -50,9 +50,10 @@ $border-radius: 0; height: $bar-base-height; background-color: $chrome-color; border-bottom: $border-default; - - [class*="button"] { - line-height: $bar-base-height; + + // Modifier class to dock any bar below .bar-nav + &.bar-header-secondary { + top: $bar-base-height + 1; } } .bar-tab { @@ -62,6 +63,7 @@ $border-radius: 0; } // Left aligned text in the .bar-nav .title { + position: static; padding-left: 10px; line-height: $bar-base-height; color: $default-color; @@ -82,17 +84,15 @@ $border-radius: 0; .table-view { .table-view-cell { - border-bottom: 0; - @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; } } - // Table view dividers - // -------------------------------------------------- + // Table view dividers .table-view-divider { border-top: 0; border-bottom: 0; @@ -176,21 +176,34 @@ textarea, // -------------------------------------------------- [class*="button"] { - border: 1px solid $default-color; + border: $border-default; color: $default-color; - background-color: transparent; - @include transition(background-color, opacity, color); - @include transition-duration(.2s); - @include transition-timing-function(linear); + background-color: $chrome-color; + border-radius: 3px; // Active & filled button styles &:active, - &.active, - &.button-filled { + &.active { color: #fff; background-color: $default-color; } } +[class*="bar-"] { + [class*="button"] { + padding-top: 9px; + padding-bottom: 9px; + } + .button-link { + padding: 0; + color: $primary-color; + line-height: $bar-base-height; + + &:active, + &.active { + color: darken($primary-color, 10%); + } + } +} // Other button types @@ -198,56 +211,74 @@ textarea, // Primary button (Default color is blue) .button-primary { - color: $primary-color; + color: #fff; border: 1px solid $primary-color; + background-color: $primary-color; &:active, - &.active, - &.button-filled { - background-color: $primary-color; + &.active { + border: 1px solid darken($primary-color, 10%); + background-color: darken($primary-color, 10%); } } // Positive button (Default color is green) .button-positive { - color: $positive-color; + color: #fff; border: 1px solid $positive-color; + background-color: $positive-color; &:active, - &.active, - &.button-filled { - background-color: $positive-color; + &.active { + border: 1px solid darken($positive-color, 10%); + background-color: darken($positive-color, 10%); } } // Negative button (Default color is red) .button-negative { - color: $negative-color; + color: #fff; border: 1px solid $negative-color; + background-color: $negative-color; &:active, - &.active, - &.button-filled { - background-color: $negative-color; + &.active { + border: 1px solid darken($negative-color, 10%); + background-color: darken($negative-color, 10%); } } -// Link button (Buttons that look like links) -.button-link { - color: $primary-color; +// Outlined buttons +.button-outlined { + background-color: transparent; - &:active, - &.active { + &.button-primary { color: $primary-color; } + &.button-positive { + color: $positive-color; + } + &.button-negative { + color: $negative-color; + } + // Active states + &.button-primary:active, + &.button-positive:active, + &.button-negative:active { + color: #fff; + } } // Link button (Buttons that look like links) .button-link { + color: $primary-color; + background-color: transparent; + border: none; + &:active, &.active { - color: $primary-color; - opacity: .3; + color: darken($primary-color, 10%); + background-color: transparent; } } @@ -255,19 +286,13 @@ textarea, // -------------------------------------------------- .bar-nav { - [class*="button"] { + .button-link { color: $primary-color; - @include transition(opacity .2s linear); - } - - // Directional buttons in nav bars - // -------------------------------------------------- - .button-prev:before, - .button-prev:after, - .button-next:before, - .button-next:after { - background-color: $primary-color; + &:active { + color: $primary-color; + opacity: .6; + } } } @@ -277,9 +302,7 @@ textarea, // -------------------------------------------------- [class*="badge"] { - color: $default-color; - - &.badge-filled { + &.badge-inverted { color: $default-color; } } @@ -290,31 +313,31 @@ textarea, // Main badge .badge-primary { - color: $primary-color; + color: #fff; + background-color: $primary-color; - &.badge-filled { - color: #fff; - background-color: $primary-color; + &.badge-inverted { + color: $primary-color; } } // Positive badge .badge-positive { - color: $positive-color; + color: #fff; + background-color: $positive-color; - &.badge-filled { - color: #fff; - background-color: $positive-color; + &.badge-inverted { + color: $positive-color; } } // Negative badge .badge-negative { - color: $negative-color; + color: #fff; + background-color: $negative-color; - &.badge-filled { - color: #fff; - background-color: $negative-color; + &.badge-inverted { + color: $negative-color; } } @@ -326,13 +349,15 @@ textarea, .segmented-controller { background-color: transparent; border: 1px solid $primary-color; + border-radius: 3px; li { border-left: 1px solid $primary-color; - @include transition(background-color .1s linear); // Link that fills each section > a { + padding-top: 9px; + padding-bottom: 10px; color: $primary-color; } @@ -350,7 +375,6 @@ textarea, .popover { border-radius: 12px; - @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); &:after { border-bottom: 15px solid $chrome-color; @@ -366,16 +390,9 @@ textarea, // Toggles styles // -------------------------------------------------- .toggle { - border: 2px solid #e6e6e6; - @include box-shadow(inset 0 0 0 0 #e1e1e1); - @include transition-property(box-shadow, border); - @include transition-duration(.2s); - // Sliding handle .toggle-handle { - border: 1px solid rgba(0, 0, 0, .2); - @include box-shadow(0 3px 3px rgba(0,0,0,.08)); - @include transition-property(-webkit-transform, border, width); + border: $border-default; } &:active .toggle-handle { width: 35px; @@ -383,14 +400,7 @@ textarea, // Active state for toggle &.active { border: 2px solid $positive-color; - background-color: transparent; - @include box-shadow(inset 0 0 0 13px $positive-color); - - // Handle when the handle and the container is active - &:active .toggle-handle, - .toggle-handle:active { - @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. - } + background-color: $positive-color; .toggle-handle { border-color: $positive-color; From a20d81ed8b49189b4d091924be2dc1732454c821 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 15:30:43 -0800 Subject: [PATCH 36/45] keep using the ios theme --- _includes/header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/header.html b/_includes/header.html index 4dc447a..9c2b79f 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + From ce349ef67fe8233396f60387395eaf24bfb9686e Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 15:32:05 -0800 Subject: [PATCH 37/45] bg color --- assets/css/docs.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/css/docs.css b/assets/css/docs.css index 3487316..f36d0c2 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -314,14 +314,14 @@ h6 { height: 548px; overflow: hidden; background-color: #efeff4; - background: rgb(0,0,0); + /*background: rgb(0,0,0); background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1))); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );*/ } .iphone .content, From 20e16f23db7d4a620db4f1474bd5b207b4c63e84 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 15:42:21 -0800 Subject: [PATCH 38/45] reformating the package.json --- package.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 94ead5b..3c4c999 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,7 @@ { "name": "ratchet", + "description": "Prototype iPhone apps with simple HTML, CSS, and JS components.", "version": "2.0.0", - "dependencies": {}, - "devDependencies": { - "grunt": "~0.4.1", - "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-jshint": "~0.7.0", - "grunt-contrib-nodeunit": "~0.2.2", - "grunt-contrib-sass": "~0.5.0", - "grunt-contrib-watch": "~0.5.3", - "grunt-jekyll": "~0.4.0" - }, "keywords": [ "ratchet", "css", @@ -31,5 +22,14 @@ "type": "MIT", "url": "http://www.opensource.org/licenses/MIT" } - ] + ], + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-concat": "~0.3.0", + "grunt-contrib-jshint": "~0.7.0", + "grunt-contrib-nodeunit": "~0.2.2", + "grunt-contrib-sass": "~0.5.0", + "grunt-contrib-watch": "~0.5.3", + "grunt-jekyll": "~0.4.0" + } } From f1cb609ce5a0d9dc2aa77fa08581824b52c268f2 Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 20 Dec 2013 15:47:35 -0800 Subject: [PATCH 39/45] updating the readme --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7b9fcb7..ac15c4a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Ratchet v2.0 WIP +# Ratchet v2.0 WIP [![devDependencies](https://david-dm.org/maker/ratchet/dev-status.png)](https://david-dm.org/maker/ratchet#info=devDependencies) Prototype mobile apps with simple HTML, CSS, and JS components. diff --git a/package.json b/package.json index 3c4c999..9c69e72 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "grunt-contrib-concat": "~0.3.0", "grunt-contrib-jshint": "~0.7.0", "grunt-contrib-nodeunit": "~0.2.2", - "grunt-contrib-sass": "~0.5.0", + "grunt-contrib-sass": "~0.6.0", "grunt-contrib-watch": "~0.5.3", "grunt-jekyll": "~0.4.0" } From bb13849a6df597cfddca3aa516c71a28e18c4322 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 21 Dec 2013 11:17:43 -0800 Subject: [PATCH 40/45] fixing up toggles and cards --- _includes/header.html | 2 +- dist/ios-theme.css | 12 ++++ dist/ratchet.css | 47 ++++++++++---- index.html | 133 ++++++++++++++++++++++---------------- lib/sass/ratchet.scss | 1 + lib/sass/table-views.scss | 26 +++----- lib/sass/theme-ios.scss | 14 +++- lib/sass/toggles.scss | 23 ++++++- 8 files changed, 166 insertions(+), 92 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 9c2b79f..0ae8145 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -7,7 +7,7 @@ - + diff --git a/dist/ios-theme.css b/dist/ios-theme.css index 3c21785..0c54f6d 100644 --- a/dist/ios-theme.css +++ b/dist/ios-theme.css @@ -59,6 +59,10 @@ border-radius: 12px; } +.card .table-view li:last-child { + background-image: none; +} + select, textarea, input[type="text"], @@ -269,6 +273,7 @@ textarea, } .toggle { + width: 47px; border: 2px solid #e6e6e6; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1; @@ -284,6 +289,9 @@ textarea, -webkit-transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width; } +.toggle:before { + display: none; +} .toggle:active .toggle-handle { width: 35px; } @@ -293,6 +301,10 @@ textarea, -webkit-box-shadow: inset 0 0 0 13px #4cd964; box-shadow: inset 0 0 0 13px #4cd964; } +.toggle.active .toggle-handle { + -webkit-transform: translate3d(17px, 0, 0); + transform: translate3d(17px, 0, 0); +} .toggle.active:active .toggle-handle, .toggle.active .toggle-handle:active { -webkit-transform: translate3d(10px, 0, 0) !important; diff --git a/dist/ratchet.css b/dist/ratchet.css index c3e74b4..a91ffe7 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -396,6 +396,15 @@ strong { right: 15px; } +.card { + width: auto; + overflow: hidden; + margin: 10px; + background-color: #fff; + border: 1px solid #dddddd; + border-radius: 6px; +} + .table-view { padding: 0; margin: 0; @@ -423,16 +432,6 @@ strong { .table-view .table-view-cell p { margin: 0; } -.table-view.inset { - width: auto; - margin-right: 10px; - margin-left: 10px; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 6px; -} -.table-view.inset li:last-child { - background-image: none; -} .table-view .table-view-divider { padding-top: 6px; padding-bottom: 6px; @@ -491,6 +490,10 @@ strong { z-index: 1; } +.card .table-view li:last-child { + border: 0; +} + .popover .table-view { width: auto; max-height: 300px; @@ -991,8 +994,9 @@ input[type="button"] { } .toggle { + display: block; position: relative; - width: 47px; + width: 74px; height: 30px; background-color: #fff; border: 2px solid #ddd; @@ -1017,14 +1021,31 @@ input[type="button"] { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } +.toggle:before { + position: absolute; + top: 3px; + right: 11px; + color: #999; + text-transform: uppercase; + content: "Off"; +} .toggle.active { border: 2px solid #5cb85c; background-color: #5cb85c; } .toggle.active .toggle-handle { border-color: #5cb85c; - -webkit-transform: translate3d(17px, 0, 0); - transform: translate3d(17px, 0, 0); + -webkit-transform: translate3d(44px, 0, 0); + transform: translate3d(44px, 0, 0); +} +.toggle.active:before { + right: auto; + left: 15px; + color: #fff; + content: "On"; +} +.toggle input[type="checkbox"] { + display: none; } .content.fade { diff --git a/index.html b/index.html index fd7df26..a1cbb39 100644 --- a/index.html +++ b/index.html @@ -515,21 +515,24 @@ layout: default
  • Item 1 -
    +
    +
  • Item 2 -
    +
    +
  • Item 3 -
    +
    +
@@ -538,21 +541,24 @@ layout: default
  • Item 1 -
    +
    +
  • Item 2 -
    +
    +
  • Item 3 -
    +
    +
{% endhighlight %} @@ -560,26 +566,30 @@ layout: default
-

Inset table views

+

Carded table views

-
    -
  • Item 1
    • -
  • Item 2
    • -
  • Divider
    • -
  • Item 3
    • -
  • Item 4
    • -
+
+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Divider
    • +
  • Item 3
    • +
  • Item 4
    • +
+
{% highlight html %} -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Divider
    • -
  • Item 3
    • -
  • Item 4
    • -
+
+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Divider
    • +
  • Item 3
    • +
  • Item 4
    • +
+
{% endhighlight %}
@@ -677,17 +687,20 @@ layout: default Thing three -
    -
  • - Item 1 -
    • -
  • - Item 2 -
    • -
  • - Item 3 -
    • -
+ +
+
    +
  • + Item 1 +
    • +
  • + Item 2 +
    • +
  • + Item 3 +
    • +
+
{% highlight html %} @@ -702,17 +715,19 @@ layout: default Thing three -
    -
  • - Item 1 -
    • -
  • - Item 2 -
    • -
  • - Item 3 -
    • -
+
+
    +
  • + Item 1 +
    • +
  • + Item 2 +
    • +
  • + Item 3 +
    • +
+
{% endhighlight %} @@ -837,21 +852,25 @@ layout: default

Toggles can be used by sliding or tapping the control.

-
+
-
+ +
+
{% highlight html %} -
+
-
+ +
+ {% endhighlight %}

Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.

diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss index a0dffcc..9836b4f 100644 --- a/lib/sass/ratchet.scss +++ b/lib/sass/ratchet.scss @@ -11,6 +11,7 @@ // Components @import "bars.scss"; +@import "cards.scss"; @import "table-views.scss"; @import "forms.scss"; @import "buttons.scss"; diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index d2563d8..66fc21b 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -35,24 +35,6 @@ } } - - // Inset table views (Will be deprecated and changed into `.card` component) - // -------------------------------------------------- - - &.inset { - width: auto; - margin-right: 10px; - margin-left: 10px; - border: 1px solid rgba(0, 0, 0, .15); - border-radius: $border-radius; - - // Remove border from last standard list items to avoid double border at top/bottom of table views - li:last-child { - background-image: none; - } - } - - // Table view dividers // -------------------------------------------------- @@ -136,6 +118,14 @@ } } +// Table views in cards +// -------------------------------------------------- + +.card .table-view li:last-child { + border: 0; +} + + // Table views in popovers // -------------------------------------------------- diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss index 0fd12ba..db9883c 100644 --- a/lib/sass/theme-ios.scss +++ b/lib/sass/theme-ios.scss @@ -100,6 +100,10 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods border-radius: 12px; } +.card .table-view li:last-child { + background-image: none; +} + // Forms // -------------------------------------------------- @@ -383,6 +387,7 @@ textarea, // Toggles styles // -------------------------------------------------- .toggle { + width: 47px; border: 2px solid #e6e6e6; @include box-shadow(inset 0 0 0 0 #e1e1e1); @include transition-property(box-shadow, border); @@ -394,6 +399,9 @@ textarea, @include box-shadow(0 3px 3px rgba(0,0,0,.08)); @include transition-property(-webkit-transform, border, width); } + &:before { + display: none; + } &:active .toggle-handle { width: 35px; } @@ -403,7 +411,11 @@ textarea, background-color: transparent; @include box-shadow(inset 0 0 0 13px $positive-color); - // Handle when the handle and the container is active + .toggle-handle { + @include transform(translate3d(17px,0,0)); + } + + // When the handle and the container is active &:active .toggle-handle, .toggle-handle:active { @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss index 6427cc8..165e34a 100644 --- a/lib/sass/toggles.scss +++ b/lib/sass/toggles.scss @@ -3,8 +3,9 @@ // -------------------------------------------------- .toggle { + display: block; position: relative; - width: 47px; + width: 74px; height: 30px; background-color: #fff; border: 2px solid #ddd; @@ -26,6 +27,14 @@ @include transition-property(-webkit-transform, border, width); @include transition-duration(.2s); } + &:before { + position: absolute; + top: 3px; + right: 11px; + color: #999; + text-transform: uppercase; + content: "Off"; + } // Active state for toggle &.active { @@ -34,7 +43,17 @@ .toggle-handle { border-color: $positive-color; - @include transform(translate3d(17px,0,0)); + @include transform(translate3d(44px,0,0)); } + &:before { + right: auto; + left: 15px; + color: #fff; + content: "On"; + } + } + // Hide the checkbox + input[type="checkbox"] { + display: none; } } From 2b3df12bb35672e88ea85bd34349a0b2626de44e Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 21 Dec 2013 11:17:58 -0800 Subject: [PATCH 41/45] adding cards --- lib/sass/cards.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 lib/sass/cards.scss diff --git a/lib/sass/cards.scss b/lib/sass/cards.scss new file mode 100644 index 0000000..385c591 --- /dev/null +++ b/lib/sass/cards.scss @@ -0,0 +1,12 @@ +// +// Cards +// -------------------------------------------------- + +.card { + width: auto; + overflow: hidden; + margin: $bar-side-spacing; + background-color: #fff; + border: $border-default; + border-radius: $border-radius; +} From 82d324cdeb0900a49926931f2a112fa37c381cec Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 21 Dec 2013 13:14:01 -0800 Subject: [PATCH 42/45] adding segmented controller modifiyer classes. Refactor if entire component coming soon. --- dist/ratchet.css | 64 ++++++++++++++++++++++-- index.html | 11 +---- lib/sass/segmented-controllers.scss | 77 +++++++++++++++++++++++++++-- 3 files changed, 133 insertions(+), 19 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index a91ffe7..32aa3c6 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -855,7 +855,7 @@ input[type="button"] { font-weight: 400; list-style: none; background-color: white; - border: 1px solid #428bca; + border: 1px solid #ccc; border-radius: 4px; } .segmented-controller li { @@ -864,7 +864,7 @@ input[type="button"] { width: 1%; text-align: center; white-space: nowrap; - border-left: 1px solid #428bca; + border-left: 1px solid #ccc; } .segmented-controller li > a { display: block; @@ -872,19 +872,73 @@ input[type="button"] { padding-bottom: 7px; overflow: hidden; line-height: 1; - color: #428bca; + color: #333; text-overflow: ellipsis; } .segmented-controller li:first-child { border-left-width: 0; } .segmented-controller li:active { - background-color: #d5e9ff; + background-color: #eee; } .segmented-controller li.selected { + background-color: #ccc; +} + +.segmented-controller-primary { + border: 1px solid #428bca; +} +.segmented-controller-primary li { + border-color: inherit; +} +.segmented-controller-primary li > a { + color: #428bca; +} +.segmented-controller-primary li:active { + background-color: #cde1f1; +} +.segmented-controller-primary li.selected { background-color: #428bca; } -.segmented-controller li.selected > a { +.segmented-controller-primary li.selected > a { + color: #fff; +} + +.segmented-controller-positive { + border: 1px solid #5cb85c; +} +.segmented-controller-positive li { + border-color: inherit; +} +.segmented-controller-positive li > a { + color: #5cb85c; +} +.segmented-controller-positive li:active { + background-color: #d8eed8; +} +.segmented-controller-positive li.selected { + background-color: #5cb85c; +} +.segmented-controller-positive li.selected > a { + color: #fff; +} + +.segmented-controller-negative { + border: 1px solid #d9534f; +} +.segmented-controller-negative li { + border-color: inherit; +} +.segmented-controller-negative li > a { + color: #d9534f; +} +.segmented-controller-negative li:active { + background-color: #f9e2e2; +} +.segmented-controller-negative li.selected { + background-color: #d9534f; +} +.segmented-controller-negative li.selected > a { color: #fff; } diff --git a/index.html b/index.html index a1cbb39..ecfcbb4 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,6 @@ layout: default
-
  1. @@ -155,7 +151,7 @@ layout: default Right -
      +
@@ -180,7 +173,7 @@ layout: default Right -
    +
    • One
      • diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss index d212ea8..c9f7680 100644 --- a/lib/sass/segmented-controllers.scss +++ b/lib/sass/segmented-controllers.scss @@ -10,7 +10,7 @@ font-weight: $font-weight-light; list-style: none; background-color: $chrome-color; - border: 1px solid $primary-color; + border: 1px solid #ccc; border-radius: 4px; // Section within controller @@ -20,7 +20,7 @@ width: 1%; text-align: center; white-space: nowrap; - border-left: 1px solid $primary-color; + border-left: 1px solid #ccc; // Link that fills each section > a { @@ -29,7 +29,7 @@ padding-bottom: 7px; overflow: hidden; line-height: 1; - color: $primary-color; + color: #333; text-overflow: ellipsis; } @@ -40,14 +40,81 @@ // Active state of segmented controller &:active { - background-color: rgba(213,233,255,1); + background-color: #eee; } // Selected segment of controller + &.selected { + background-color: #ccc; + } + } +} + +// Other segmented controller types +// -------------------------------------------------- + +// Primary +.segmented-controller-primary { + border: 1px solid $primary-color; + + li { + border-color: inherit; + + > a { + color: $primary-color; + } + &:active { + background-color: lighten($primary-color, 35%); + } &.selected { background-color: $primary-color; + + > a { + color: #fff; + } + } + } +} - // Set color of links to white +// Positive +.segmented-controller-positive { + border: 1px solid $positive-color; + + li { + border-color: inherit; + + > a { + color: $positive-color; + } + &:active { + background-color: lighten($positive-color, 35%); + } + &.selected { + background-color: $positive-color; + + > a { + color: #fff; + } + } + } +} + +// Negative +.segmented-controller-negative { + border: 1px solid $negative-color; + + li { + border-color: inherit; + + > a { + color: $negative-color; + } + &:active { + background-color: lighten($negative-color, 35%); + } + &.selected { + background-color: $negative-color; + > a { color: #fff; } From 431276b3f5f88a455814f33ce0f545aabfd0f531 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 21 Dec 2013 13:28:11 -0800 Subject: [PATCH 43/45] refactoring the tab bar. holy crap what were we thinking? --- dist/ratchet.css | 16 ++----- index.html | 108 ++++++++++++++++++--------------------------- lib/sass/bars.scss | 15 ++----- 3 files changed, 48 insertions(+), 91 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 32aa3c6..b765b46 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -342,29 +342,19 @@ strong { } .bar-tab { + display: table; bottom: 0; height: 50px; padding: 0; border-top: 1px solid #dddddd; } -.tab-inner { - display: -webkit-box; - display: box; - height: 100%; - padding: 0; - margin: 0; - list-style: none; - -webkit-box-orient: horizontal; - box-orient: horizontal; -} - .tab-item { + display: table-cell; height: 100%; + width: 1%; padding-top: 9px; text-align: center; - -webkit-box-flex: 1; - box-flex: 1; } .tab-item .tab-label, .tab-item .icon { diff --git a/index.html b/index.html index ecfcbb4..c296849 100644 --- a/index.html +++ b/index.html @@ -151,7 +151,7 @@ layout: default Right -
        +
        • One
          • @@ -173,7 +173,7 @@ layout: default Right -
            +
            • One
              • @@ -195,75 +195,51 @@ layout: default
              {% highlight html %} {% endhighlight %} diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index b59d0c8..cfb98ed 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -79,29 +79,20 @@ // Bar docked to bottom used for primary app navigation .bar-tab { + display: table; bottom: 0; height: $bar-tab-height; padding: 0; border-top: $border-default; } -// Wrapper for individual tab -.tab-inner { - display: -webkit-box; - display: box; - height: 100%; - padding: 0; - margin: 0; - list-style: none; - @include box-orient(horizontal); -} - // Navigational tab .tab-item { + display: table-cell; height: 100%; + width: 1%; padding-top: 9px; text-align: center; - @include box-flex(1); .tab-label, .icon { From 7fa0b5febe35db1e28194a02e58cd4bfc7189022 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 21 Dec 2013 13:35:17 -0800 Subject: [PATCH 44/45] adding the card-bg variable. --- dist/ratchet.css | 4 ++-- lib/sass/bars.scss | 2 +- lib/sass/cards.scss | 2 +- lib/sass/variables.scss | 4 ++++ 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index b765b46..c49d264 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -298,7 +298,7 @@ strong { background-color: white; } [class*="bar-"].bar-header-secondary { - top: 45px; + top: 44px; } [class*="bar-"].bar-footer { bottom: 0; @@ -390,7 +390,7 @@ strong { width: auto; overflow: hidden; margin: 10px; - background-color: #fff; + background-color: white; border: 1px solid #dddddd; border-radius: 6px; } diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index cfb98ed..843a8ef 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -16,7 +16,7 @@ // Modifier class to dock any bar below .bar-nav &.bar-header-secondary { - top: $bar-base-height + 1; + top: $bar-base-height; } // Modifier class to dock any bar to bottom of viewport diff --git a/lib/sass/cards.scss b/lib/sass/cards.scss index 385c591..e2639c7 100644 --- a/lib/sass/cards.scss +++ b/lib/sass/cards.scss @@ -6,7 +6,7 @@ width: auto; overflow: hidden; margin: $bar-side-spacing; - background-color: #fff; + background-color: $card-bg; border: $border-default; border-radius: $border-radius; } diff --git a/lib/sass/variables.scss b/lib/sass/variables.scss index 3f97728..7e7a648 100644 --- a/lib/sass/variables.scss +++ b/lib/sass/variables.scss @@ -32,6 +32,10 @@ $bar-base-height: 44px; $bar-tab-height: 50px; $bar-side-spacing: 10px; +// Cards +// -------------------------------------------------- + +$card-bg: #fff; // Buttons // -------------------------------------------------- From 801be40ebf0b322c12ecb4c34455693ec8f0a359 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 21 Dec 2013 13:35:57 -0800 Subject: [PATCH 45/45] removing directional button variables. --- lib/sass/variables.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/sass/variables.scss b/lib/sass/variables.scss index 7e7a648..b6531fe 100644 --- a/lib/sass/variables.scss +++ b/lib/sass/variables.scss @@ -40,8 +40,6 @@ $card-bg: #fff; // Buttons // -------------------------------------------------- -$button-directional-padding: 20px; -$button-directional-margin: -($bar-side-spacing/2); $button-font-size: 12px; // Transitions