From 5b28a5f64b1a69387bd86361461f20d1657ec363 Mon Sep 17 00:00:00 2001 From: Rafal Chmiel Date: Mon, 30 Dec 2013 11:35:49 +0000 Subject: [PATCH 1/2] Add closeable feature to alerts --- css/bijou.min.css | 2 +- index.html | 33 +++++++++++++++++++-------------- scss/_alerts.scss | 12 ++++++++++-- 3 files changed, 30 insertions(+), 17 deletions(-) diff --git a/css/bijou.min.css b/css/bijou.min.css index 02f5573..9b76cd8 100644 --- a/css/bijou.min.css +++ b/css/bijou.min.css @@ -1 +1 @@ -@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);a{font-size:.95em;text-decoration:none;color:#5f90b0}a:hover{color:#406882}*{margin:0;padding:0;font-family:"Source Sans Pro",sans-serif}.container{width:1000px;margin:0 auto}.pull-left{float:left}.pull-right{float:right}.row{min-height:2em;line-height:2em;width:100%}.span{float:left;display:inline;min-height:1em;margin:0 2% 20px 2%}.span:first-child{margin-left:0}.span:last-child{margin-right:0}.one{width:8%}.two{width:18%}.three{width:28%}.four{width:38%}.five{width:48%}.six{width:58%}.seven{width:68%}.eight{width:78%}.nine{width:88%}.ten{width:100%}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after{clear:both}.row{zoom:1}h1,h2,h3,h4,h5,h6{font-weight:500}h1{font-size:3.5em}h2{font-size:2.5em}h3{font-size:2em}h4{font-size:1.5em}h5{font-size:1em}h6{font-size:.8em}.table{width:100%;border-spacing:0;border-collapse:collapse;text-align:left}.table th,.table td{border-bottom:2px #d1d1d1 solid;padding:8px 12px}.table td{border-bottom:1px #d4d4d4 solid}.table.table-striped tbody tr:nth-child(2n+1){background-color:#f3f3f3}.table.table-bordered{border:1px #CCC solid}.table.table-bordered td,.table.table-bordered th{border:1px #CCC solid}.button{border:0;border-radius:4px;outline:0}.button.small{padding:7px 20px;font-size:.95em}.button.large{padding:15px 45px;font-size:1.1em}.button.primary{color:#FFF;background:#5f90b0}.button.primary:hover{background:#5589ab}.button.success{color:#FFF;background:#4daf7c}.button.success:hover{background:#48a474}.button.danger{color:#FFF;background:#e6623c}.button.danger:hover{background:#e4572e}.navbar{background:#FFF;padding:10px;margin-bottom:10px;border-bottom:1px #DDD solid;height:30px}.navbar h4{color:#191919;font-weight:200}.navbar li{display:inline-block;padding:.3em 15px 0 0}.navbar li:last-child{padding-right:0}.navbar.fixed{position:fixed;left:0;right:0;top:0}.alert{padding:15px;margin:10px 0;border-radius:3px}.alert.primary{background:#e8eff3;border:1px #c5d7e3 solid}.alert.success{background:#daeee4;border:1px #b6dfca solid}.alert.danger{background:#fdf4f1;border:1px #f7cfc4 solid}@media only screen and (min-width: 768px) and (max-width: 999px){.container{width:768px}}@media only screen and (max-width: 767px){.container{width:300px}.container .table{width:100%;display:block;overflow:auto}}@media only screen and (min-width: 480px) and (max-width: 767px){.container{width:420px}.container .table{display:table}} +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);a{font-size:.95em;text-decoration:none;color:#5f90b0}a:hover{color:#406882}*{margin:0;padding:0;font-family:"Source Sans Pro",sans-serif}.container{width:1000px;margin:0 auto}.pull-left{float:left}.pull-right{float:right}.row{min-height:2em;line-height:2em;width:100%}.span{float:left;display:inline;min-height:1em;margin:0 2% 20px 2%}.span:first-child{margin-left:0}.span:last-child{margin-right:0}.one{width:8%}.two{width:18%}.three{width:28%}.four{width:38%}.five{width:48%}.six{width:58%}.seven{width:68%}.eight{width:78%}.nine{width:88%}.ten{width:100%}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.row:before,.row:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.row:after{clear:both}.row{zoom:1}h1,h2,h3,h4,h5,h6{font-weight:500}h1{font-size:3.5em}h2{font-size:2.5em}h3{font-size:2em}h4{font-size:1.5em}h5{font-size:1em}h6{font-size:.8em}.table{width:100%;border-spacing:0;border-collapse:collapse;text-align:left}.table th,.table td{border-bottom:2px #d1d1d1 solid;padding:8px 12px}.table td{border-bottom:1px #d4d4d4 solid}.table.table-striped tbody tr:nth-child(2n+1){background-color:#f3f3f3}.table.table-bordered{border:1px #CCC solid}.table.table-bordered td,.table.table-bordered th{border:1px #CCC solid}.button{border:0;border-radius:4px;outline:0}.button.small{padding:7px 20px;font-size:.95em}.button.large{padding:15px 45px;font-size:1.1em}.button.primary{color:#FFF;background:#5f90b0}.button.primary:hover{background:#5589ab}.button.success{color:#FFF;background:#4daf7c}.button.success:hover{background:#48a474}.button.danger{color:#FFF;background:#e6623c}.button.danger:hover{background:#e4572e}.navbar{background:#FFF;padding:10px;margin-bottom:10px;border-bottom:1px #DDD solid;height:30px}.navbar h4{color:#191919;font-weight:200}.navbar li{display:inline-block;padding:.3em 15px 0 0}.navbar li:last-child{padding-right:0}.navbar.fixed{position:fixed;left:0;right:0;top:0}.alert{padding:15px;margin:10px 0;margin-bottom:1.11111rem;border-radius:3px;display:block;position:relative}.alert.primary{background:#e8eff3;border:1px #c5d7e3 solid}.alert.success{background:#daeee4;border:1px #b6dfca solid}.alert.danger{background:#fdf4f1;border:1px #f7cfc4 solid}.alert .close{float:right;top:50%}.alert.closeable:active,.alert .closeable:active{display:none}@media only screen and (min-width: 768px) and (max-width: 999px){.container{width:768px}}@media only screen and (max-width: 767px){.container{width:300px}.container .table{width:100%;display:block;overflow:auto}}@media only screen and (min-width: 480px) and (max-width: 767px){.container{width:420px}.container .table{display:table}} diff --git a/index.html b/index.html index 17510ca..4cef03f 100644 --- a/index.html +++ b/index.html @@ -66,14 +66,14 @@

Bijou

- + - +

THE GRID

@@ -109,17 +109,17 @@

THE GRID

TYPOGRAPHY

- +

h1

h2

h3

h4

h5
h6
- +

TABLES

- + @@ -156,7 +156,7 @@

TABLES

- + @@ -193,7 +193,7 @@

TABLES

- + @@ -232,21 +232,26 @@

TABLES

BUTTONS

- + - +

ALERTS

- -

Test

-

Test

-

Test

- + +
Test
+
Test
+
Test
+ +
+ Test + × +
+
diff --git a/scss/_alerts.scss b/scss/_alerts.scss index 45650d1..68e5049 100644 --- a/scss/_alerts.scss +++ b/scss/_alerts.scss @@ -3,10 +3,13 @@ /* ALERTS */ -.alert{ +.alert { padding:15px; margin:10px 0; + margin-bottom:1.11111rem; border-radius:3px; + display:block; + position:relative; &.primary{ background:lighten($primary, 40%); border:1px lighten($primary, 30%) solid; @@ -19,4 +22,9 @@ background:lighten($danger, 40%); border:1px lighten($danger, 30%) solid; } -} \ No newline at end of file + .close { + float:right; + top:50%; + } + &.closeable:active, .closeable:active { display:none; } +} From 9ce1e2cb249e31ea2bd969a23911c98302bb1efa Mon Sep 17 00:00:00 2001 From: Rafal Chmiel Date: Mon, 30 Dec 2013 11:39:30 +0000 Subject: [PATCH 2/2] Update docs for closeable alerts --- Readme.md | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/Readme.md b/Readme.md index ef950dc..e87c684 100644 --- a/Readme.md +++ b/Readme.md @@ -6,7 +6,7 @@ Example: http://andhart.github.io/bijou/ If you want to contribute ideas or see the roadplan, there's a Trello: https://trello.com/b/2Gklk2lG -Browser Support: Checked and tested in the latest Firefox, Safari, Chrome, and IE9+. +Browser Support: Checked and tested in the latest Firefox, Safari, Chrome, and IE9+. ###Navbar: @@ -34,7 +34,7 @@ or a navbar with navigation: ``` -Add a `fixed` class to the navbar to make it fixed to the top of the screen (Make sure you also add `margin-top:50px` to the body if you make it fixed). +Add a `fixed` class to the navbar to make it fixed to the top of the screen (Make sure you also add `margin-top:50px` to the body if you make it fixed). *** @@ -84,9 +84,22 @@ Large buttons have the `large` class, while small have the `small` class. Easy, ###Alerts ```html -

Test

-

Test

-

Test

+
Test
+
Test
+
Test
+``` + +For alerts which can be hidden when clicked on, add the `closeable` class to the `div` and `×` inside it. + +```html +
+ Test + × +
+
+ Test + × +
``` ***