From 1ec5bb992963bf9dd394ba5064b07a8f10e3ea19 Mon Sep 17 00:00:00 2001 From: Artem Kholodenko Date: Sun, 27 Jan 2013 23:09:12 -0800 Subject: [PATCH 01/19] Implemented fix Added error handling to popover check. by chrismatthieu and fixed the resulting error Uncaught TypeError: Cannot call method 'contains' of undefined --- dist/ratchet.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/dist/ratchet.js b/dist/ratchet.js index 4059da3..bbe8796 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -70,9 +70,16 @@ var anchor = findPopovers(e.target); if (!anchor || !anchor.hash) return; - - popover = document.querySelector(anchor.hash); - + + try{ + popover = document.querySelector(anchor.hash); + } + catch (error) { + popover = null; + } + + if (popover == null) return; + if (!popover || !popover.classList.contains('popover')) return; return popover; From 08ad2150f49074027a4e1203eedbef6686e411f5 Mon Sep 17 00:00:00 2001 From: Zenobius Jiricek Date: Fri, 10 May 2013 13:17:45 +0930 Subject: [PATCH 02/19] Update modals.js make sure that were actually handling a `.modal` element. --- lib/js/modals.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/js/modals.js b/lib/js/modals.js index 4448107..c5e8215 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -20,6 +20,6 @@ window.addEventListener('touchend', function (event) { var modal = getModal(event); - if (modal) modal.classList.toggle('active'); + if (modal && modal.classList.contains('modal')) modal.classList.toggle('active'); }); -}(); \ No newline at end of file +}(); From ada5720bed14e6b7138288739ebe370890726cfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Sat, 19 Oct 2013 18:04:46 +0200 Subject: [PATCH 03/19] Fix links --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 51e424c..6df1d51 100644 --- a/README.md +++ b/README.md @@ -12,19 +12,19 @@ Take note that our master branch is our active, unstable development branch and ## Documentation -Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://maker.github.io/ratchet](http://maker.github.io/ratchet). The docs may also be run locally. +Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at . The docs may also be run locally. ### Running documentation locally 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation). 2. From the root `/ratchet` directory, run `jekyll serve` in the command line. -3. Open [http://localhost:4000](http://localhost:4000) in your browser, and boom! +3. Open in your browser, and boom! Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). ## Support -Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@goRatchet](http://www.twitter.com/goratchet). +Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@GoRatchet](https://twitter.com/goratchet). ## Reporting bugs & contributing @@ -45,18 +45,18 @@ A small list of "gotchas" are provided below for designers and developers starti Connor Sears -- https://twitter.com/connors -- https://github.com/connors +- +- Dave Gamache -- https://twitter.com/dhg -- https://github.com/dhg +- +- Jacob Thornton -- https://twitter.com/fat -- https://github.com/fat +- +- ## License From 94c267cc15ef62cf8122ce1725c06c571bf4e9b2 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 18:27:11 -0700 Subject: [PATCH 04/19] Fixing up forms a bit. --- dist/ratchet.css | 19 ++++++++++++------- lib/sass/forms.scss | 15 ++++++++------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 12b65b7..0191b62 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -537,6 +537,7 @@ input[type="color"], height: 40px; padding: 10px 15px; margin-bottom: 10px; + line-height: 21px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; @@ -584,31 +585,35 @@ select { margin-bottom: 0; background-color: transparent; border: 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); 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 { - border-bottom-width: 0; + background-image: none; } .input-row { overflow: hidden; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; } .input-row:last-child { - border-bottom-width: 0; + background-image: none; } .input-row label { float: left; width: 35%; - padding: 11px 10px 9px 15px; + padding: 10px 15px; font-family: "Helvetica Neue", Helvetica, sans-serif; - font-weight: 500; + line-height: 1.1; } .input-row label + input { @@ -616,7 +621,7 @@ select { width: 65%; padding-left: 0; margin-bottom: 0; - border-bottom: 0; + background-image: none; } [class*="bar-"] input[type=search] { diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index 633502f..3c6b370 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -33,6 +33,7 @@ input[type="color"], height: 40px; padding: 10px 15px; margin-bottom: 10px; + line-height: $line-height-default; background-color: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; @@ -87,14 +88,14 @@ select { margin-bottom: 0; background-color: transparent; border: 0; - border-bottom: 1px solid rgba(0, 0, 0, .2); border-radius: 0; @include box-shadow(none); + @include hairline(single, #c8c7cc, 320px, 15px); } // Remove bottom border on last input to avoid double bottom border .input-group input:last-child { - border-bottom-width: 0; + background-image: none; } // Input groups with labels @@ -104,21 +105,21 @@ select { // To use labels with input groups, wrap a label and an input in an .input-row .input-row { overflow: hidden; - border-bottom: 1px solid rgba(0, 0, 0, .2); + @include hairline(single, #c8c7cc, 320px, 15px); } // Remove bottom border on last input-row to avoid double bottom border .input-row:last-child { - border-bottom-width: 0; + background-image: none; } // Labels get floated left with a set percentage width .input-row label { float: left; width: 35%; - padding: 11px 10px 9px 15px; // Optimizing the baseline for mobile. + padding: 10px 15px; font-family: $font-family-default; - font-weight: $font-weight; + line-height: 1.1; // Put the text on the baseline. } // Actual inputs float to right of labels and also have a set percentage @@ -127,7 +128,7 @@ select { width: 65%; padding-left: 0; margin-bottom: 0; - border-bottom: 0; + background-image: none; } From 0cfb942c89b4f6cde7ccdef618a4975c4bbd33a9 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 18:57:59 -0700 Subject: [PATCH 05/19] Simplify the hairline mixin. --- dist/ratchet.css | 8 ++++---- dist/ratchet.js | 3 ++- lib/sass/forms.scss | 4 ++-- lib/sass/mixins.scss | 8 ++++---- lib/sass/table-views.scss | 4 ++-- 5 files changed, 14 insertions(+), 13 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 0191b62..f5871a8 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -409,7 +409,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 +448,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 +588,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 +599,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; } diff --git a/dist/ratchet.js b/dist/ratchet.js index e92bf13..06948e7 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -30,11 +30,12 @@ window.addEventListener('touchend', function (event) { var modal = getModal(event); if (modal) { - modal.classList.toggle('active'); + if (modal && modal.classList.contains('modal')) modal.classList.toggle('active'); event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) } }); }(); + /* ---------------------------------- * POPOVER v1.0.0 * Licensed under The MIT License diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index 3c6b370..59bddee 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -90,7 +90,7 @@ select { border: 0; border-radius: 0; @include box-shadow(none); - @include hairline(single, #c8c7cc, 320px, 15px); + @include hairline(single, #c8c7cc, 15px); } // Remove bottom border on last input to avoid double bottom border @@ -105,7 +105,7 @@ select { // To use labels with input groups, wrap a label and an input in an .input-row .input-row { overflow: hidden; - @include hairline(single, #c8c7cc, 320px, 15px); + @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. } // Remove bottom border on last input-row to avoid double bottom border diff --git a/lib/sass/mixins.scss b/lib/sass/mixins.scss index 3a919d3..7c50dd3 100644 --- a/lib/sass/mixins.scss +++ b/lib/sass/mixins.scss @@ -71,14 +71,14 @@ // Misc // -------------------------------------------------- -@mixin hairline($type, $color, $width, $offset) { +@mixin hairline($type, $color, $offset) { @if $type == single { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: $offset 100%; } @else if $type == double { - 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: $offset 100%, $offset 0%; } background-repeat: no-repeat; diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index f696792..2f560e5 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -12,7 +12,7 @@ .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, 320px, 15px); // Single grey border with a width of 320px and 15px offset. + @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. // Remove the border from the last table view item @@ -68,7 +68,7 @@ color: #999; font-weight: $font-weight; background-color: #fafafa; - @include hairline(double, #c8c7cc, 320px, 0); // Double (top and bottom) grey border with a width of 320px and no offset. + @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 { From 461504c1021a18e52e3d57a22690e60d755339f6 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 19:12:03 -0700 Subject: [PATCH 06/19] Renaming the theme filename that is outputed to the dist folder. Addresses #221 --- Gruntfile.js | 2 +- dist/ratchet.css | 8 ++++---- examples/app-classic/checkout.html | 2 +- examples/app-classic/choose-movie.html | 2 +- examples/app-classic/choose-theater.html | 2 +- examples/app-classic/index.html | 2 +- examples/app-classic/settings.html | 2 +- examples/app-classic/theaters.html | 1 + examples/components/classic/index.html | 2 +- lib/sass/mixins.scss | 6 +++--- 10 files changed, 15 insertions(+), 14 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index a03f266..a6a0546 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -45,7 +45,7 @@ module.exports = function(grunt) { dist: { files: { '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss', - '<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/theme-classic.scss' + '<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/ratchet-theme.scss' } } }, diff --git a/dist/ratchet.css b/dist/ratchet.css index f5871a8..5f75ae0 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -409,7 +409,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 +448,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 +588,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 +599,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; } diff --git a/examples/app-classic/checkout.html b/examples/app-classic/checkout.html index c984995..8c24726 100644 --- a/examples/app-classic/checkout.html +++ b/examples/app-classic/checkout.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/choose-movie.html b/examples/app-classic/choose-movie.html index ca20330..8efeca7 100644 --- a/examples/app-classic/choose-movie.html +++ b/examples/app-classic/choose-movie.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/choose-theater.html b/examples/app-classic/choose-theater.html index f11237e..089698b 100644 --- a/examples/app-classic/choose-theater.html +++ b/examples/app-classic/choose-theater.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/index.html b/examples/app-classic/index.html index 31b7c54..1266646 100644 --- a/examples/app-classic/index.html +++ b/examples/app-classic/index.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/settings.html b/examples/app-classic/settings.html index bb7f50d..82c98e1 100644 --- a/examples/app-classic/settings.html +++ b/examples/app-classic/settings.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/theaters.html b/examples/app-classic/theaters.html index 1d79c04..42b4505 100644 --- a/examples/app-classic/theaters.html +++ b/examples/app-classic/theaters.html @@ -12,6 +12,7 @@ + diff --git a/examples/components/classic/index.html b/examples/components/classic/index.html index d7a7b73..d5030eb 100644 --- a/examples/components/classic/index.html +++ b/examples/components/classic/index.html @@ -7,7 +7,7 @@ - + diff --git a/lib/sass/mixins.scss b/lib/sass/mixins.scss index 7c50dd3..edfbc7b 100644 --- a/lib/sass/mixins.scss +++ b/lib/sass/mixins.scss @@ -73,12 +73,12 @@ // -------------------------------------------------- @mixin hairline($type, $color, $offset) { @if $type == single { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: $offset 100%; } @else if $type == double { - 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: $offset 100%, $offset 0%; } background-repeat: no-repeat; From 1d547d6f9db5e5904a0b601d0be98564d78613a2 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 19:16:39 -0700 Subject: [PATCH 07/19] Whoops. This actually does fix #221 --- Gruntfile.js | 2 +- dist/{theme-classic.css => ratchet-theme.css} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename dist/{theme-classic.css => ratchet-theme.css} (100%) diff --git a/Gruntfile.js b/Gruntfile.js index a6a0546..629859d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -45,7 +45,7 @@ module.exports = function(grunt) { dist: { files: { '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss', - '<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/ratchet-theme.scss' + '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss' } } }, diff --git a/dist/theme-classic.css b/dist/ratchet-theme.css similarity index 100% rename from dist/theme-classic.css rename to dist/ratchet-theme.css From 152af4621a776cf9a5193eeb6b45f50b13b0243a Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 19:26:38 -0700 Subject: [PATCH 08/19] Initial add of alerts. --- lib/sass/alerts.scss | 7 +++++++ lib/sass/ratchet.scss | 1 + 2 files changed, 8 insertions(+) create mode 100644 lib/sass/alerts.scss diff --git a/lib/sass/alerts.scss b/lib/sass/alerts.scss new file mode 100644 index 0000000..2802e69 --- /dev/null +++ b/lib/sass/alerts.scss @@ -0,0 +1,7 @@ +// +// Alerts +// -------------------------------------------------- + +.alert { + +} diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss index a0dffcc..2973e0c 100644 --- a/lib/sass/ratchet.scss +++ b/lib/sass/ratchet.scss @@ -18,6 +18,7 @@ @import "badges.scss"; @import "segmented-controllers.scss"; @import "popovers.scss"; +@import "alerts.scss"; // Javascript components @import "modals.scss"; From cea7a11a2e9b7c5d415369db51b677c2bcbd7ab9 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 19:36:49 -0700 Subject: [PATCH 09/19] Adding correct support for bar footers. --- dist/ratchet.css | 10 +++++----- lib/sass/bars.scss | 13 ++++++++----- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 5f75ae0..bac6f0f 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -303,9 +303,11 @@ strong { [class*="bar-"].bar-footer { bottom: 0; } -[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard { - -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-footer-secondary { + bottom: 44px; +} +[class*="bar-"].bar-footer-secondary-tab { + bottom: 50px; } .bar-nav { @@ -346,8 +348,6 @@ strong { bottom: 0; height: 50px; padding: 0; - -webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } .tab-inner { diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 3794d20..641d37d 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -22,10 +22,14 @@ bottom: 0; } - // Flip border position to top for footer bars - &.bar-footer.bar-standard, - &.bar-footer-secondary.bar-standard { - @include box-shadow(0 0 1px rgba(0,0,0,.85)); + // 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; } } @@ -78,7 +82,6 @@ bottom: 0; height: $bar-tab-height; padding: 0; - @include box-shadow(0 0px 1px rgba(0,0,0,.85)); } // Wrapper for individual tab From 847fc1d3c4e97b6eab3cf8ce015cb03b5cd60215 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 20:14:53 -0700 Subject: [PATCH 10/19] Adding basic alerts. Inline ones too. --- dist/ratchet.css | 24 +++ examples/app-default/index.html | 262 ++++++++++++++++---------------- lib/sass/alerts.scss | 23 +++ 3 files changed, 180 insertions(+), 129 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index bac6f0f..1a6f38e 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -993,6 +993,30 @@ 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; +} + +.alert-positive { + background-color: rgba(76, 217, 100, 0.97); +} + +.alert-negative { + background-color: rgba(221, 82, 77, 0.97); +} + +.alert-inline { + position: static; + margin: 15px; +} + .modal { position: fixed; top: 0; diff --git a/examples/app-default/index.html b/examples/app-default/index.html index 4b031f3..29eba22 100644 --- a/examples/app-default/index.html +++ b/examples/app-default/index.html @@ -18,143 +18,147 @@ -
-

Movie finder

-
- + +
+ This is an alert. +
+ +
+

Movie finder

+
+ - + -
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
-
-
- - -
\ No newline at end of file diff --git a/lib/sass/alerts.scss b/lib/sass/alerts.scss index 2802e69..a72debc 100644 --- a/lib/sass/alerts.scss +++ b/lib/sass/alerts.scss @@ -3,5 +3,28 @@ // -------------------------------------------------- .alert { + position: fixed; + right: 15px; + left: 15px; + bottom: $bar-tab-height + 15px; + padding: 15px; + color: #fff; + border-radius: 3px; + z-index: 10; +} + +// 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; } From 32383da449902ec176a692e909ae59a38d9a943e Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 20:19:25 -0700 Subject: [PATCH 11/19] Adding basic alerts. Inline ones too. --- examples/app-default/index.html | 5 +++++ lib/sass/alerts.scss | 7 +++++++ 2 files changed, 12 insertions(+) diff --git a/examples/app-default/index.html b/examples/app-default/index.html index 29eba22..8bbdd0f 100644 --- a/examples/app-default/index.html +++ b/examples/app-default/index.html @@ -70,6 +70,11 @@
+
+ This is an inline alert. + +
+