Skip to content

Instantly share code, notes, and snippets.

@erezsob

erezsob/_contact_details.scss

Last active September 25, 2015 14:00
Show Gist options
  • Save erezsob/edee78c42760a1887043 to your computer and use it in GitHub Desktop.
Save erezsob/edee78c42760a1887043 to your computer and use it in GitHub Desktop.
Download ZIP
Code samples (html, css & js) from a management webapp project
Raw
_contact_details.scss
p {
line-height: 18px;
}
.contactItem {
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
}
.contactItem>header {
padding-top: 45px;
overflow: hidden;
margin-bottom: 20px;
}
.contactItem .col1 {
width: 45.76271%;
float: left;
margin-right: 1.69492%;
}
.contactItem .col2 {
width: 25.42373%;
float: left;
margin-right: 1.69492%;
}
.contactItem .col3 {
width: 25.42373%;
float: right;
margin-right: 0;
}
.contactimage {
width: 105px;
height: 105px;
background: $navi;
float: left;
margin-right: 15px;
}
.contactname {
line-height: 36px;
text-transform: uppercase;
font-style: 32px;
font-family: $inform3-font-bold;
}
.tabs {
overflow: hidden;
}
.tabs li {
width: 11.86441%;
float: left;
margin-right: 1.69492%;
position: relative;
}
.tabs li span {
display: block;
padding: 4px 0 2px 10px;
background: $navi;
color: #000;
cursor: pointer;
}
ul.tabs li.active span {
background: #000;
color: $navi;
z-index: 1;
}
.tabs li.active span:after {
border-bottom-color: #000;
}
.tabs li span:after {
content: '';
position: absolute;
top: 0;
right: -25px;
border-bottom: 25px solid $navi;
border-right: 25px solid transparent;
}
.tabs li.active span:after {
z-index: 1;
}
.tabviews header {
position: relative;
background: #000;
cursor: pointer;
}
.tabviews header:before,
.tabviews header:after {
content: '';
position: absolute;
top: 0;
background: inherit;
width: 15px;
height: 100%;
display: block;
border-bottom: inherit;
}
.tabviews header:before{
left: -15px;
}
.tabviews header:after {
right: -15px;
}
.tabviews .play {
display: block;
line-height: 1.7em;
width: 100%;
color: $navi;
font-family: $inform3-font-light;
}
.iconic.play:before {
content: '4';
font-family: IconicStroke;
margin: 0 5px 0 2px;
font-size: 0.8em;
display: inline-block;
-moz-transition: all 5s linear;
-webkit-transition: all 5s linear;
transition: all 0.5s linear;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.tabviews .icon--down:before {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.tabviews header .plus {
position: absolute;
top: 0;
right: 0;
color: $navi;
padding: 5px 0 5px 5px;
}
.iconic.plus:before {
content: '+';
font-family: IconicStroke;
}
.accordion--content {
overflow: hidden;
padding: 20px 0;
}
.accordion--toolbar {
float: right;
display: none;
}
.accordion--content:hover .accordion--toolbar {
display: block;
}
.accordion--toolbar a:hover {
background-color: $cyan;
}
.accordion--toolbar li {
float: left;
padding-right: 4px;
padding-left: 4px;
}
.accordion--toolbar a {
height: 22px;
text-align: center;
background: #b3b3b3;
color: #fff;
width: 38px;
line-height: 22px;
display: inline-block;
}
.iconic.remove:before {
content: 't';
font-family: IconicStroke;
}
.iconic.edit:before {
content: 'p';
font-family: IconicStroke;
}
.tab,
.accordion--content {
display: none;
}
.tab.active {
display: block;
}
Raw
_contacts.scss
/* Contacts page */
#contactListTitle {
display: inline;
float: left;
padding-left: 15px;
}
.dataTables_info {
height: 22px;
line-height: 22px;
padding: 11px 0;
margin: 0 8px;
display: inline;
float: left;
}
.dataTables_paginate {
@extend .dataTables_info;
float: right;
margin-right: 0;
padding-right: 15px;
}
.dataTables_filter {
@extend .dataTables_info;
margin-right: 0;
float: right;
}
input[type="text"] {
@include box-sizing(border-box);
padding: 4px 2px 0;
border: 1px #666 solid;
}
.contactList {
table-layout: fixed;
width: 100%;
float: right;
margin-right: 0;
display: table;
}
colgroup {
display: table-column-group;
}
table thead {
background: #000;
color: #fff;
}
tr {
display: table-row;
}
table tr th,
table tr td {
line-height: 22px;
vertical-align: top;
padding-right: 5px;
}
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
#content table th,
#content table td {
padding-left: 15px;
}
table tbody tr {
border-bottom: 1px #b3b3b3 solid;
.sorting_1 {
background: #fff;
}
}
.sorting {
&:nth-child(1) {
width: 6.5%;
}
&:nth-child(2) {
width: 16.2%;
}
&:nth-child(3) {
width: 43%;
}
}
.contactList tbody tr:hover td {
background: $navi;
}
.contactList .toolbar {
display: none;
float: right;
margin: 0;
padding: 0;
bottom: 0;
overflow: hidden;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
display: inline;
float: left;
padding-right: 8px;
}
a {
height: 21px;
text-align: center;
background: #b3b3b3;
border: 0;
color: #fff;
width: 38px;
vertical-align: middle;
&:hover {
background: #00e1ff;
}
}
}
.contactList tbody tr:hover .toolbar {
display: inline;
a {
display: inline-block;
}
}
.iconic.trash_stroke:before {
content: 't';
font-family: IconicStroke;
}
.iconic.pen:before {
content: 'p';
font-family: IconicStroke;
}
Raw
contact_details.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
<script src="js/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/scripts.js"></script>
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header class="main">
<!-- Clock -->
<time class="clock"></time>
<div class="container">
<!-- Logo + Date -->
<div class="brand">
<h1>Inform</h1>
<time class="date"></time>
</div>
<nav class="mainmenu">
<ul class="horizontal-list">
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="#/calendar">Calendar</a></li>
<li>
<!-- Drop down list -->
<a href="#">Projects</a>
<ul class="submenu">
<li><a href="#">Projekte</a></li>
<li><a href="#">Stundenzettel</a></li>
<li><a href="#">Materialbuch</a></li>
<li><a href="#">Ressourcenplanung</a></li>
<li><a href="#">Forecastplanung</a></li>
<li class="line"></li>
<li><a href="#">Angebote</a></li>
<li><a href="#">Offene Posten</a></li>
<li class="line"></li>
<li><a href="#">Rechnungsausgang</a></li>
<li><a href="#">Eingangsrechnungen</a></li>
<li class="line"></li>
<li><a href="#">Reports</a></li>
<li class="line"></li>
<li><a href="#">Kassenbuch</a></li>
</ul>
</li>
<li>
<!-- Drop down list -->
<a href="#">Library</a>
<ul class="submenu">
<li><a href="#/wiki">Wiki</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Login/Logout + User name -->
<div class="login">
<a href="#logout" class="iconic stroke user after">User</a>
</div>
</div>
</header>
<!-- end of header -->
<div id="content">
<div class="contactItem">
<header>
<div class="col col1">
<div class="contactimage"></div>
<h2 class="contactname">Contact Name</h2>
</div>
<div class="col col2">
<p>
Fiktivstr. 76 <br>
80336 Fablestadt <br>
+49 89 530729-13 <br>
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="col col3">
<p>Date of birth: 01.01.2000</p>
</div>
</header>
<div class="addressAccordion">
<div class="tabLayout">
<ul class="tabs">
<li class="active">
<span>Contact Information</span>
</li>
<li>
<span>Business Information</span>
</li>
<li>
<span>Tags</span>
</li>
<li>
<span>History</span>
</li>
</ul>
<div class="tabviews"> <!-- tabviews -->
<div class="tab active">
<div class="modelType">
<header class="title">
<span class="iconic stroke play">Address</span>
<span class="iconic stroke plus"></span>
</header>
<div class="accordion--content">
<div class="col1">
Teststr. 101 <br>
99999, Testburg
</div>
<div class="col2">
Phone: <br>
Website: <a href="#" target="_blank"></a><br>
Email: <a href="mailto:"></a>
</div>
<div class="col3">
<ul class="accordion--toolbar">
<li>
<a href="#" class="iconic stroke remove"></a>
</li>
<li>
<a href="#" class="iconic stroke edit"></a>
</li>
</ul>
</div>
</div> <!-- accordion--content -->
</div> <!-- modelType -->
<div class="modelType">
<header class="title">
<span class="iconic stroke play rotate">Network</a>
<span class="iconic stroke plus"></span>
</header>
<div class="accordion--content">
<p>
<a href="#" class="plus">Create a new private address</a>
</p>
</div> <!-- accordion--content -->
</div> <!-- modelType -->
<div class="modelType">
<header class="title">
<span class="iconic stroke play rotate">Staff members</a>
<span class="iconic stroke plus"></span>
</header>
<div class="accordion--content">
<div class="col1">
<p>
<a href="#">Contact person #1</a>
</p>
<p>Test</p>
<p>PM</p>
</div>
<div class="col2">
</div>
<div class="col3">
<ul class="accordion--toolbar">
<li>
<a href="#" class="iconic stroke remove"></a>
</li>
<li>
<a href="#" class="iconic stroke edit"></a>
</li>
</ul>
</div>
</div> <!-- accordion--content -->
</div> <!-- modelType -->
</div> <!-- tab-0 -->
<div class="tab">
<div class="modelType">
<header class="title">
<span class="iconic stroke play rotate">Bank details</span>
<span class="iconic stroke plus"></span>
</header>
<div class="accordion--content default">
<div class="col1">
Teststr. 101 <br>
99999, Testburg
</div>
<div class="col2">
Phone: <br>
Website: <a href="#" target="_blank"></a><br>
Email: <a href="mailto:"></a>
</div>
<div class="col3">
<ul class="accordion--toolbar">
<li>
<a href="#" class="iconic stroke remove"></a>
</li>
<li>
<a href="#" class="iconic stroke edit"></a>
</li>
</ul>
</div>
</div> <!-- accordion--content -->
<header class="title">
<span class="iconic stroke play rotate">Project settings</span>
<span class="iconic stroke plus"></span>
</header>
<div class="accordion--content">
<div class="col1">
<p>Test</p>
</div>
<div class="col2">lorem ipsum</div>
<div class="col3">
<ul class="accordion--toolbar">
<li>
<a href="#" class="iconic stroke remove"></a>
</li>
<li>
<a href="#" class="iconic stroke edit"></a>
</li>
</ul>
</div>
</div>
</div> <!-- modelType -->
</div> <!-- tab -->
<div class="tab">
<div class="modelType">
<header class="title">
<span class="iconic stroke play rotate">Tags</span>
<span class="iconic stroke plus"></span>
</header>
<div class="accordion--content">
<div class="col1">
Lorem Ipsum
</div>
<div class="col2">
Test
</div>
<div class="col3">
<ul class="accordion--toolbar">
<li>
<a href="#" class="iconic stroke remove"></a>
</li>
<li>
<a href="#" class="iconic stroke edit"></a>
</li>
</ul>
</div>
</div> <!-- accordion--content -->
</div> <!-- modelType -->
</div> <!-- tab -->
<div class="tab">
<div class="modelType">
<header class="title">
<span class="iconic stroke play rotate">Comments</span>
<span class="iconic stroke plus"></span>
</header>
<div class="accordion--content default">
<div class="col1">
<p><a href="#">Create new comment</a></p>
</div>
<div class="col2">
</div>
<div class="col3">
<ul class="accordion--toolbar">
<li>
<a href="#" class="iconic stroke remove"></a>
</li>
<li>
<a href="#" class="iconic stroke edit"></a>
</li>
</ul>
</div>
</div>
</div> <!-- modelType -->
</div> <!-- tab -->
</div> <!-- tabviews -->
</div> <!-- tabLayout -->
</div> <!-- addressAccordion -->
</div> <!-- contactItem -->
</div> <!-- #content-->
<footer class="main">
<div class="container">
Inform 3.0
</div>
</footer>
</body>
</html>
Raw
contacts.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />
<script src="js/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/scripts.js"></script>
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header class="main">
<!-- Clock -->
<time class="clock"></time>
<div class="container">
<!-- Logo + Date -->
<div class="brand">
<h1>Inform</h1>
<time class="date">Mittwoch, 31/12/1999</time>
</div>
<nav class="mainmenu">
<ul class="horizontal-list">
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="#/contacts">Contacts</a></li>
<li><a href="#/calendar">Calendar</a></li>
<li>
<!-- Drop down list -->
<a href="#">Projects</a>
<ul class="submenu">
<li><a href="#">Projekte</a></li>
<li><a href="#">Stundenzettel</a></li>
<li><a href="#">Materialbuch</a></li>
<li><a href="#">Ressourcenplanung</a></li>
<li><a href="#">Forecastplanung</a></li>
<li class="line"></li>
<li><a href="#">Angebote</a></li>
<li><a href="#">Offene Posten</a></li>
<li class="line"></li>
<li><a href="#">Rechnungsausgang</a></li>
<li><a href="#">Eingangsrechnungen</a></li>
<li class="line"></li>
<li><a href="#">Reports</a></li>
<li class="line"></li>
<li><a href="#">Kassenbuch</a></li>
</ul>
</li>
<li>
<!-- Drop down list -->
<a href="#">Library</a>
<ul class="submenu">
<li><a href="#/wiki">Wiki</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Login/Logout + User name -->
<div class="login">
<a href="#logout" class="iconic stroke user after">User</a>
</div>
</div>
</header>
<!-- end of header -->
<!-- contacts section -->
<section class="main">
<div id="content">
<div>
<h2 id="contactListTitle">Contacts</h2>
<div id="dataTables_Table_2_wrapper" class="dataTables_wrapper" role="grid">
<div class="dataTables_info" id="dataTables_Table_2_info">Showing 1 to 10 of 44 entries</div>
<div class="dataTables_paginate paging_full_numbers">
<a tabindex="0" class="first paginate_button paginate_button_disabled" id="DataTables_Table_2_first"></a>
<a tabindex="0" class="previous paginate_button paginate_button_disabled" id="DataTables_Table_2_previous"></a>
<span>
<a textindex="0" class="paginate_active">1</a>
<a textindex="0" class="paginate_active">2</a>
<a textindex="0" class="paginate_active">3</a>
<a textindex="0" class="paginate_active">4</a>
<a textindex="0" class="paginate_active">5</a>
</span>
<a tabindex="0" class="next paginate_button" id="DataTables_Table_2_next"></a>
<a tabindex="0" class="last paginate_button" id="DataTables_Table_2_last"></a>
</div>
<div class="dataTables_filter" id="DataTables_Table_2_filter">
<label>Search <input type="text" aria-controls="DataTables_Table_2"></label>
</div>
<table class="contactList dataTable" id="DataTables_Table_2" aria-describedby="DataTables_Table_2_info">
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr role="row">
<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Type</th>
<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Name</th>
<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Timezone</th>
<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Created:</th>
<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<span class="iconic stroke user"></span>
</td>
<td class="sorting_1">Mark Watney</td>
<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
<td>31-12-1999 - 23:59:59</td>
<td>
<ul class="toolbar">
<li>
<a href="#" class="remove iconic stroke trash_stroke"></a>
</li>
<li>
<a href="#" class="edit iconic stroke pen"></a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<div class="dataTables_paginate paging_full_numbers">
<a tabindex="0" class="first paginate_button paginate_button_disabled" id="DataTables_Table_2_first"></a>
<a tabindex="0" class="previous paginate_button paginate_button_disabled" id="DataTables_Table_2_previous"></a>
<span>
<a textindex="0" class="paginate_active">1</a>
<a textindex="0" class="paginate_active">2</a>
<a textindex="0" class="paginate_active">3</a>
<a textindex="0" class="paginate_active">4</a>
<a textindex="0" class="paginate_active">5</a>
</span>
<a tabindex="0" class="next paginate_button" id="DataTables_Table_2_next"></a>
<a tabindex="0" class="last paginate_button" id="DataTables_Table_2_last"></a>
</div>
</div>
</div>
</div>
</section>
<footer class="main">
<div class="container">
Inform 3.0
</div>
</footer>
</body>
</html>
Raw
scripts.js
$(function () {
// Main nav clock //
var renderClock = function() {
var _self = this;
this.format = function(number) {
return number < 10 ? '0' + number : number;
};
this.render = function() {
var date = new Date();
$('.clock').html([
_self.format(date.getHours()),
_self.format(date.getMinutes()),
_self.format(date.getSeconds())
].join(':'));
$('.date').html([
moment().format("dddd, DD/MM/YYYY")
]);
};
window.setInterval(this.render, 1000);
this.render();
};
new renderClock();
// Main nav dropdown list effect //
$('nav li').hover(
function () {
$('.submenu', this).toggle();
});
// Tabs for accordion in contact details //
$("ul.tabs li").click(function() {
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("ul.tabs li.active").removeClass("active");
$(this).addClass("active");
$(".tab.active").removeClass("active");
$(".tab:nth-child("+nthChild+")").addClass("active");
}
});
// Accordion feature in contact details //
$('.addressAccordion .accordion--content').hide();
$('.addressAccordion .iconic.play:first').addClass('icon--down').parent().next().slideDown('slow');
$('.addressAccordion .iconic.play').click(function() {
if($(this).parent().next().is(':hidden')) {
$('.addressAccordion .iconic.play').removeClass('icon--down').parent().next().slideUp('slow');
$(this).toggleClass('icon--down').parent().next().slideDown('slow');
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment