Skip to content

Instantly share code, notes, and snippets.

@cmdswitch

cmdswitch/IC_FavoriteList.css

Last active August 29, 2015 14:21
Show Gist options
  • Save cmdswitch/7553f4d5b44eb73fd90c to your computer and use it in GitHub Desktop.
Save cmdswitch/7553f4d5b44eb73fd90c to your computer and use it in GitHub Desktop.
Download ZIP
IC FavoriteList Formatting
Raw
IC_FavoriteList.css
/*---------------------------------------------------------*/
/* CSS Flexbox Code for Favorites */
/*---------------------------------------------------------*/
.InputAddOn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 5px;
background-color: #fff
}
.InputAddOn-field {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.InputAddOn-item {
background-color: rgba(147,128,108,.1);
color: #ffc114;
font: inherit;
font-weight: 400;
}
.InputAddOn-field:first-child, .InputAddOn-item:first-child {
border-radius: 2px 0 0 2px;
}
.InputAddOn-field:last-child, .InputAddOn-item:last-child {
border-radius: 0 2px 2px 0;
}
.InputAddOn-field:not(:last-child) {
border-right: 0;
}
.InputAddOn-field, .InputAddOn-item {
border: 1px solid rgba(147,128,108,.25);
padding: 5px 10px;
}
/*---------------------------------------------------------*/
/* Generics */
/*---------------------------------------------------------*/
.titleHeader
{
font-weight: bold;
font-size: 30px;
text-align: center;
padding: 20px;
}
.centerTableFull
{
margin-left: auto;
margin-right: auto;
/*width: 100%;
height: 100%*/
}
/*---------------------------------------------------------*/
/* Working HTML Example */
/* http://jsfiddle.net/cmdswitch/cyy5qt0a/ */
/*---------------------------------------------------------*/
/*
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/functions.js"></script>
</head>
<body>
<div style="background-color: darkblue;">
<div class="titleHeader" style="color:white;">
Favorites&nbsp;<span class="glyphicon glyphicon-star" style="color: #ffc114; font-size: 25px;"></span>
</div>
<table class="centerTableFull">
<tr>
<td><div class="InputAddOn"><div class="InputAddOn-field"><a href="http://google.com/" target="_blank">Favorite #1</a></div></div></td>
<td><div class="InputAddOn"><button class="InputAddOn-item"><span class="glyphicon glyphicon-star"></span></button></div></td>
</tr>
<tr>
<td><div class="InputAddOn"><div class="InputAddOn-field">Favorite #2</div></div></td>
<td><div class="InputAddOn"><button class="InputAddOn-item"><span class="glyphicon glyphicon-star"></span></button></div></td>
</tr>
<tr>
<td><div class="InputAddOn"><div class="InputAddOn-field">Favorite #3</div></div></td>
<td><div class="InputAddOn"><button class="InputAddOn-item"><span class="glyphicon glyphicon-star"></span></button></div></td>
</tr>
</table>
</div>
</body>
</html>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment