Skip to content

Commit

Permalink
Merge pull request #55 from msurguy/master
Browse files Browse the repository at this point in the history
Added a new theme called Flatty
  • Loading branch information
wavded committed Mar 12, 2014
2 parents e3d7a49 + 75df88a commit 1284b1d
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 2 deletions.
7 changes: 5 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@
<link rel='stylesheet' href='themes/jackedup.css'/>
<link rel='stylesheet' href='themes/libnotify.css'/>
<link rel='stylesheet' href='themes/original.css'/>
<link rel='stylesheet' href='themes/flatty.css'/>

<script src='humane.js'></script>
</head>
<body>
Expand All @@ -76,13 +78,14 @@ <h1>humane.js</h1>
<strong>A simple, modern, framework-independent, well-tested, unobtrusive, notification system.</strong>
<br/>Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.
</p>
<h3>Select a theme:
<h3>Select a theme:
<select onchange='humane.baseCls="humane-"+this.options[this.selectedIndex].value'>
<option selected>libnotify</option>
<option>bigbox</option>
<option>boldlight</option>
<option>jackedup</option>
<option>original</option>
<option>flatty</option>
</select>
</h3>
<p>Click a code sample below to see it in action:</p>
Expand Down Expand Up @@ -184,4 +187,4 @@ <h3>Download and Usage</h3>
}(pretags[i])) }
</script>
</body>
</html>
</html>
94 changes: 94 additions & 0 deletions themes/flatty.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
html,
body {
min-height: 100%;
}
.humane,
.humane-flatty {
position: fixed;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 100000;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.humane,
.humane-flatty {
font-family: Helvetica Neue, Helvetica, san-serif;
font-size: 16px;
top: 0;
left: 30%;
opacity: 0;
width: 40%;
color: #444;
padding: 10px;
text-align: center;
background-color: #fff;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-moz-transform: translateY(-100px);
-webkit-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
}
.humane p,
.humane-flatty p,
.humane ul,
.humane-flatty ul {
margin: 0;
padding: 0;
}
.humane ul,
.humane-flatty ul {
list-style: none;
}
.humane.humane-flatty-info,
.humane-flatty.humane-flatty-info {
background-color: #3498db;
color: #FFF;
}
.humane.humane-flatty-success,
.humane-flatty.humane-flatty-success {
background-color: #18bc9c;
color: #FFF;
}
.humane.humane-flatty-error,
.humane-flatty.humane-flatty-error {
background-color: #e74c3c;
color: #FFF;
}
.humane-animate,
.humane-flatty.humane-flatty-animate {
opacity: 1;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.humane-animate:hover,
.humane-flatty.humane-flatty-animate:hover {
opacity: 0.7;
}
.humane-js-animate,
.humane-flatty.humane-flatty-js-animate {
opacity: 1;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.humane-js-animate:hover,
.humane-flatty.humane-flatty-js-animate:hover {
opacity: 0.7;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}

4 comments on commit 1284b1d

@mikedaly
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like there's no source .styl for this new theme?

@wavded
Copy link
Owner Author

@wavded wavded commented on 1284b1d Mar 24, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agh yes, @msurguy care to add one?

@msurguy
Copy link
Contributor

@msurguy msurguy commented on 1284b1d Apr 4, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wavded would love to do that, I tried to install Stylus and even after 2 hours of fighting with dependencies for it I cannot get it installed :( is there an easy way to run css->stylus conversion?

@wavded
Copy link
Owner Author

@wavded wavded commented on 1284b1d Apr 5, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you on Mac? the canvas module can be tricky on there,I can't remember now if i built it or pulled it from brew (here is one approach -> https://github.com/LearnBoost/node-canvas/wiki/Installation---OSX) Otherwise, I've had more peaceful installs of Cairo on Linux, can't speak for Windows. There are online converters (a quick search for csv to stylus pulled up some stuff), although they won't convert the multi vendor tags into the one liner like you see in the other stylus files in this project.

Please sign in to comment.