Created
February 4, 2013 13:13
-
-
Save SaraSoueidan/4706669 to your computer and use it in GitHub Desktop.
A CodePen by Sara Soueidan. CSS3 & jQuery Mini Reminders List - Interface Inspired by Manu Gamero's Work on Dribbble:
dribbble.com/shots/786418-Mini-Reminders-PSD?list=following
======================================================
Custom Drop-Down JScript from Codrops: http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
=====…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="bar"><a href="#" id="icon">✔</a></div> | |
<div class="wrapper"> | |
<div class="top clearfix"> | |
<div id="list"></div> | |
<div id="menu"> | |
<div id="dd" class="wrapper-dropdown"> | |
<span>Choose List</span> | |
<ul class="dropdown groceries-list"> | |
<li id="redecoration"><a href="#">Redecoration</a></li> | |
<li id="groceries"><a href="#">Groceries</a></li> | |
</ul> | |
</div> | |
</div><!--/#menu--> | |
<div class="add clearfix"><button id="add">✚</button> | |
<div class="hidden options"><ul><li><a href="#" id="newlist">List</a></li><li><a href="#" id="newitem">Item</a></li></ul></div></div> | |
</div><!--/.top--> | |
<div id="main"> | |
<ul class="container default lists"> | |
<li id="redecoration"><a href="#">Redecoration</a></li> | |
<li id="groceries"><a href="#">Groceries</a></li> | |
</ul> | |
<ul class="container groceries hidden"> | |
<li><input type="checkbox" id="one" /> <label for="one">Milk & Eggs</label></li> | |
<li><input type="checkbox" id="two" /> <label for="two">Butter</label></li> | |
<li><input type="checkbox" id="three" checked /> <label for="three">Bread</label></li> | |
<li><input type="checkbox" id="four" /> <label for="four">Vegetables</label></li> | |
<li><input type="checkbox" id="five" /> <label for="five">Shampoo & Conditioner</label></li> | |
</ul> | |
<ul class="container redecoration hidden"> | |
<li><input type="checkbox" id="six" /> <label for="six">Paint</label></li> | |
<li><input type="checkbox" id="seven" checked/> <label for="seven">Wallpaper</label></li> | |
<li><input type="checkbox" id="eight" checked /> <label for="eight">Sofa</label></li> | |
<li><input type="checkbox" id="nine" /> <label for="nine">Table</label></li> | |
<li><input type="checkbox" id="ten" /> <label for="ten">Flowers</label></li> | |
<li><input type="checkbox" id="eleven" /> | |
<label for="eleven">Kitchen Utensils</label></li> | |
<li><input type="checkbox" id="twelve" /> | |
<label for="twelve">Lamps</label></li> | |
</ul> | |
</div><!--/#main--> | |
</div><!--/wrapper--> | |
<h1><i>By <a href="https://twitter.com/SaraSoueidan" alt="Follow me on Twitter">@SaraSoueidan</a></i></h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*I know this isn't the optimal functionality, but I'll work on the rest of the jQuery functions later on..*/ | |
/*=============================================*/ | |
function DropDown(el) { | |
this.dd = el; | |
this.placeholder = this.dd.children('span'); | |
this.opts = this.dd.find('ul.dropdown > li'); | |
this.val = ''; | |
this.index = -1; | |
this.initEvents(); | |
} | |
DropDown.prototype = { | |
initEvents : function() { | |
var obj = this; | |
obj.dd.on('click', function(event){ | |
$(this).toggleClass('active'); | |
return false; | |
}); | |
obj.opts.on('click',function(){ | |
var opt = $(this); | |
obj.val = opt.text(); | |
obj.index = opt.index(); | |
obj.placeholder.text(obj.val); | |
}); | |
}, | |
getValue : function() { | |
return this.val; | |
}, | |
getIndex : function() { | |
return this.index; | |
} | |
} | |
$(function() { | |
var dd = new DropDown( $('#dd') ); | |
$(document).click(function() { | |
// all dropdowns | |
$('.wrapper-dropdown').removeClass('active'); | |
}); | |
}); | |
$('#redecoration, .default #redecoration').on('click', function(e){ $('.container.redecoration').removeClass('hidden'); $('.container:not(.redecoration)').addClass('hidden'); | |
$('#dd span').html('Redecoration'); | |
e.preventDefault(); | |
}); | |
$('#groceries, .default #groceries').on('click', function(e){ $('.container.groceries').removeClass('hidden'); $('.container:not(.groceries)').addClass('hidden'); | |
$('#dd span').html('Groceries'); | |
e.preventDefault(); | |
}); | |
$('#list').on('click', function(){ | |
$('.container').addClass('hidden'); | |
$('#dd span').html('Choose List'); | |
$('.default').removeClass('hidden'); | |
}); | |
$('#icon').on('click', function(e){ | |
$('.wrapper, h1').fadeToggle(); | |
e.preventDefault(); | |
}); | |
$('#add').on('click', function(){ | |
$('.options').slideToggle(200); | |
/*still to come..*/ | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*@import url(http://fonts.googleapis.com/css?family=Cantora+One);*/ | |
*{ | |
box-sizing:border-box; | |
margin:0; | |
padding:0; | |
} | |
ul{list-style-type:none;} | |
::selection{ | |
color:white; | |
background:#E21759; | |
} | |
/*Nicolas Gallagher's micro clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/ */ | |
.clearfix:before, | |
.clearfix:after { | |
content: " "; | |
display: table; | |
} | |
.clearfix:after { | |
clear: both; | |
} | |
.clearfix { | |
*zoom: 1; | |
} | |
/*===========/clearfix hack==============*/ | |
html,body{ | |
height:100%; | |
min-height:500px; | |
background:url(http://jootix.com/upload/DesktopWallpapers/cache/Wood-Texture-wood-texture-1920x1200.jpg); | |
font: normal 16px/1"Segoe Print"; | |
} | |
.wrapper{ | |
margin:15px auto 10px; | |
width:300px; | |
border: 1px solid black; | |
border-radius:5px; | |
padding:15px 10px; | |
background: url("http://farm4.static.flickr.com/3630/3380087493_a076066f33.jpg") repeat scroll center center rgb(74, 74, 74); | |
box-shadow: | |
inset 0px 1px 2px 0px rgba(255,255,255,0.3), | |
0 10px 5px -3px rgba(0,0,0,0.9), | |
0 0 5px black; | |
position:relative; | |
} | |
.wrapper:after, .wrapper:before { | |
content: " "; | |
display:block; | |
height: 0; | |
width: 0; | |
position: absolute; | |
bottom: 100%; | |
border: solid transparent; | |
pointer-events: none; | |
} | |
.wrapper:after { | |
border-color: rgba(32, 32, 32, 0); | |
border-bottom-color: #1E1E1E; | |
border-width: 10px; | |
left: 50%; | |
margin-left: -10px; | |
} | |
.wrapper:before { | |
border-color: rgba(0, 0, 0, 0); | |
border-bottom-color: #000; | |
border-width: 11px; | |
left: 50%; | |
margin-left: -11px; | |
} | |
.top{ | |
margin-bottom:15px; | |
} | |
#list, #menu, #add { | |
display:block; | |
float:left; | |
margin-right: 20px; | |
border: 1px solid black; | |
border-radius: 3px; | |
height: 32px; | |
background:linear-gradient(#545151,#161515); | |
box-shadow: | |
inset 0px -1px 2px 2px #232222, | |
inset 0 1px rgba(255,255,255,0.7), | |
0 1px 10px 1px black; | |
cursor:pointer; | |
position:relative; | |
} | |
#list, #add { | |
width:40px; | |
} | |
#list:before { | |
border-bottom: 7px double #E0E0E0; | |
border-top: 2px solid #E0E0E0; | |
content:""; | |
height: 3px; | |
position: absolute; | |
right:12px; | |
top: 9px; | |
width:16px; | |
} | |
#add{ | |
text-align:center; | |
color:#E0E0E0; | |
line-height:30px; | |
font-size:14px; | |
margin-right:0; | |
} | |
.add{ | |
position:relative; | |
width:40px; | |
float:right; | |
} | |
.options{ | |
z-index:99; | |
width:100px; | |
position:absolute; | |
top:110%; | |
left:-150%; | |
background:black; | |
color:white; | |
background:linear-gradient(#545151,#262525); | |
border-radius:3px; | |
border:1px solid black; | |
} | |
.options ul li{ | |
text-align:center; | |
} | |
.options ul li a{ | |
display:block; | |
width:100%; | |
height:100%; | |
} | |
.options ul li a:hover{ | |
text-decoration:none; | |
} | |
#main{ | |
color:#403A35; | |
background: url("http://subtlepatterns.com/patterns/extra_clean_paper.png"); | |
min-height:150px; | |
width:278px; | |
margin:0 auto; | |
border:1px solid black; | |
border-radius: 5px; | |
padding:5px; | |
position:relative; | |
box-shadow:0 0 1px 1px rgba(0,0,0,0.4); | |
} | |
#main:after{ | |
content:""; | |
display:block; | |
height:100%; | |
width:50px; | |
z-index:99; | |
pointer-events:none; | |
position:absolute; | |
left:45px; top:0; | |
border-left:4px double #FAD1D7; | |
} | |
.container{ | |
border:1px solid #BFBFBF; | |
border-radius:4px; | |
margin:0 auto; | |
width:265px; | |
list-style-type:none; | |
min-height:150px | |
} | |
input[type="checkbox"]{ | |
margin-right:20px; | |
margin-left:12px; | |
} | |
ul li { | |
width:100%; | |
border-bottom:1px dotted #C0C0C0; | |
line-height:2.3; | |
} | |
ul li:last-child{ | |
border:none; | |
} | |
input[type="checkbox"]:checked + label{ | |
text-decoration: line-through; | |
color:#aaa; | |
} | |
label{ | |
display:inline-block; | |
cursor:pointer; | |
min-width:70%; | |
} | |
/*============================================================================================================================================================================================*/ | |
.wrapper-dropdown { | |
width:155px; | |
text-align:center; | |
color:#E0E0E0; | |
font-size:14px; | |
padding:7px; | |
outline:none; | |
/* Font settings */ | |
font-weight: bold; | |
color: #eee; | |
} | |
.wrapper-dropdown:after {/*the arrow*/ | |
content: ""; | |
width: 0; | |
height: 0; | |
position: absolute; | |
right: 15px; | |
top: 50%; | |
margin-top: -3px; | |
border-width: 6px 6px 0 6px; | |
border-style: solid; | |
border-color: #eee transparent; | |
} | |
.wrapper-dropdown .dropdown { | |
position: absolute; | |
top: 110%; | |
left: 0; | |
right: 0; | |
z-index:1; | |
border-radius:3px; | |
border: 1px solid black; | |
transition: all 0.1s ease-in; | |
list-style: none; | |
background:linear-gradient(#545151,#262525); | |
/* Hiding */ | |
opacity: 0; | |
pointer-events: none; | |
} | |
.wrapper-dropdown .dropdown li a { | |
display: block; | |
padding: 1px; | |
text-decoration: none; | |
color: #eee; | |
border-bottom: 1px solid black; | |
transition: all 0.3s ease-out; | |
} | |
.wrapper-dropdown .dropdown li i { | |
float: right; | |
color: inherit; | |
} | |
.wrapper-dropdown .dropdown li:hover a { | |
background: black; | |
} | |
.wrapper-dropdown.active .dropdown { | |
opacity: 1; | |
pointer-events: auto; | |
z-index:1; | |
} | |
/*=======================================*/ | |
h1{ | |
margin:10px; | |
color:#381205; | |
text-align:center; | |
font-family:serif; | |
font-size:21px; | |
text-shadow:2px 1px 0 #E0AE7B; | |
} | |
a{ | |
text-decoration:none; | |
color:inherit; | |
} | |
a:hover{ | |
text-decoration:underline; | |
} | |
.hidden{display:none;} | |
.container.default{ | |
padding:15px 50px; | |
} | |
.default li { | |
border:none; | |
font: 18px/1.75 "segoe print"; | |
letter-spacing:1px; | |
color:#444; | |
} | |
.default li a:hover {text-decoration:none;} | |
.bar{ | |
potision:absolute; | |
top:0; left:0; right:0; | |
height:40px; | |
padding:10px 0; | |
background:black; | |
color:grey; | |
font-size:24px; | |
text-align:center; | |
} | |
#icon{outline:none;} | |
#icon:hover{text-decoration:none;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment