puiu91
3/24/2016 - 12:14 PM
gistfile1.css
<!-- CSS | Pure Library -->
<link rel="stylesheet" href="<?= Path::css('dashboard/pure-release-0.6.0/pure.css') ?>">
<link rel="stylesheet" href="<?= Path::css('dashboard/pure-release-0.6.0/grids-responsive.css') ?>">
<!-- CSS | Content Management -->
<link rel="stylesheet" href="<?= Path::css('dashboard/content-management.css') ?>">
<!-- CSS | FontAwesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- CSS | Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500,700|Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<div class="main-content">
<!-- Header -->
<header class="header">
<div class="header-container">
<a href="<?= Path::url('/content-manager') ?>">
<div class="header-logo"></div>
</a>
</div>
</header>
<!-- Header -->
<!-- Container -->
<div class="container">
<!-- Section ::: Edit Retailers -->
<section class="main panel box-shadow-1dp">
<h2>Retailers Pages</h2>
<div class="grid-body">
<table class="spreadsheet-table box-shadow">
<thead>
<tr>
<th class="identifier">id</th>
<th class="category">category</th>
<th class="page-name">page name</th>
<th class="options">options</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>retailers</td>
<td>Mac's</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/macs') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/macs') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>2</td>
<td>retailers</td>
<td>Sobeys</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/sobeys') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/sobeys') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>3</td>
<td>retailers</td>
<td>Costco</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/costco') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/costco') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>4</td>
<td>retailers</td>
<td>Co-op Atlantic</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/coop-atlantic') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/coop-atlantic') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>5</td>
<td>retailers</td>
<td>Federated Co-op</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/federated-coop') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/federated-coop') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>6</td>
<td>retailers</td>
<td>Walmart</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/walmart') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/walmart') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>7</td>
<td>retailers</td>
<td>Overwaitea</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/overwaitea') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/overwaitea') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>8</td>
<td>retailers</td>
<td>Loblaws</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/loblaws') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/loblaws') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>9</td>
<td>retailers</td>
<td>Whole Foods</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/whole-foods') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/whole-foods') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
<tr>
<td>10</td>
<td>retailers</td>
<td>Metro</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/metro') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/retailers/metro') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Section ::: Edit Retailers -->
<!-- Section ::: Edit Index -->
<section class="main panel box-shadow-1dp">
<h2>Home Page</h2>
<div class="grid-body">
<table class="spreadsheet-table box-shadow">
<thead>
<tr>
<th class="identifier">id</th>
<th class="category">category</th>
<th class="page-name">page name</th>
<th class="options">options</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>home</td>
<td>Redwave Grocery</td>
<td>
<a class="pure-button pure-button-primary"
href="<?= Path::url('/content-manager/edit/homepage') ?>">
<i class="fa fa-text-width"></i> edit
</a>
<a class="pure-button pure-button-primary"
href="<?= Path::url('') ?>">
<i class="fa fa-play-circle"></i> view
</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Section ::: Edit Index -->
</div><!-- Container -->
</div>/*Positioning*/
/*Box model*/
/*Typographic*/
/*Visual*/
body {
background: rgb(242,244,245);
}
/* -------------------------------------------------- */
/* Page Containers | Layout
/* -------------------------------------------------- */
aside.sidebar,
div.main-content {
position: fixed;
display: block;
top: 0;
bottom: 0;
}
aside.sidebar {
width: 200px;
background-color: rgb(60,74,85);
}
div.main-content {
left: 200px;
right: 0;
overflow-x: hidden;
overflow-y: auto;
}
.container {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/* -------------------------------------------------- */
/* Sidebar
/* -------------------------------------------------- */
.pure-menu-heading {
color: rgb(255,255,255);
font-weight: 600;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.pure-menu-link {
font-weight: 600;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.pure-menu-active > .pure-menu-link,
.pure-menu-link:hover,
.pure-menu-link:focus {
background-color: rgb(54,66,75);
}
.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
color: rgb(255,255,255);
background-color: rgb(34,48,58);
}
/* -------------------------------------------------- */
/* Header
/* -------------------------------------------------- */
.header {
position: relative;
display: block;
height: 40px;
width: auto;
padding: 10px;
background: rgb(187, 44, 49);
}
.header-container {
display: block;
margin: 0 auto;
box-sizing: content-box;
}
.header-logo {
float: left;
overflow: hidden;
width: 295px !important;
height: 40px !important;
-webkit-background-size: 295px 40px !important;
background-size: 295px 40px !important;
background: url('../../../public/img/redwave-grocery-logo-for-dark-bg.svg') no-repeat;
}
/* -------------------------------------------------- */
/* Section.main
/* -------------------------------------------------- */
.panel {
padding: 20px;
margin-top: 20px;
background-color: rgb(255,255,255);
}
/* -------------------------------------------------- */
/* Section > Spreadsheet | Table Properties
/* -------------------------------------------------- */
.grid-body {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.grid-row {
/* box model */
display: table-row;
width: 100%;
height: 30px;
/* visual */
border-bottom: 1px solid #dfe4e9;
}
.grid-cell {
display: table-cell;
padding: 0 .5em;
vertical-align: middle;
}
/* -------------------------------------------------- */
/* Section > Spreadsheet | Headers
/* -------------------------------------------------- */
.grid-cell.header {
/* box model */
height: 2.25em;
/* visual */
border-right: 1px solid #dfe4e9;
/* typographic */
color: #0099bb;
line-height: 2.125em;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
}
/* -------------------------------------------------- */
/* Section > Spreadsheet | Containers
/* -------------------------------------------------- */
.grid-cell.checkbox {
width: 26px;
}
.grid-cell.date {
display: table-cell;
width: 7.125em;
white-space: nowrap;
}
.grid-cell.payee {
}
.grid-cell.category {
width: 100%;
}
.grid-cell.memo {
}
.grid-cell.inflow {
width: 10%;
}
.grid-cell.outfow {
width: 10%;
}
/* -------------------------------------------------- */
/* Section > Spreadsheet > Table
/* -------------------------------------------------- */
/* - sets styles for the spreadsheet table
/* - https://www.w3.org/TR/CSS2/tables.html#width-layout
/* -------------------------------------------------- */
table.spreadsheet-table {
display: table;
width: 100%;
table-layout: fixed; /* horizontal layout of the table depends on table width (as opposed to cell contents) */
border-collapse: collapse;
text-align: left;
cursor: pointer;
background-color: rgb(255,255,255);
}
/* ------------------------------ */
/* Table > Head + Body
/* ------------------------------ */
table.spreadsheet-table thead tr th,
table.spreadsheet-table tbody tr td {
/* box model */
padding-left: 0.5em;
padding-right: 0.5em;
/* visual */
white-space: nowrap; /* prevents <td> content from increasing the <tr> height to accommodate the content that does not fit */
overflow: hidden; /* prevents <td> width from increasing as it tries to accommodate content */
text-overflow: ellipsis; /* text that overflows the width of the <td> is hidden */
}
/* ------------------------------ */
/* Table > Head
/* ------------------------------ */
table.spreadsheet-table thead {
border-top: 1px solid rgb(200,200,200);
border-bottom: 1px solid rgb(200,200,200);
background-color: rgb(245, 245, 245);
}
/* ------------------------------ */
/* Table > Head > Rows
/* ------------------------------ */
table.spreadsheet-table thead tr {}
table.spreadsheet-table thead tr th {
height: 40px;
border-right: 1px solid rgb(215,215,215);
/* typographic */
color: #0099bb;
line-height: 2em;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
}
table.spreadsheet-table thead tr th:last-child {
border-right: none;
}
/* ------------------------------ */
/* Table > Head > Columns
/* ------------------------------ */
table.spreadsheet-table thead tr th.identifier { width: 7% }
table.spreadsheet-table thead tr th.category { width: 25% }
table.spreadsheet-table thead tr th.page-name { width: 33% }
table.spreadsheet-table thead tr th.options { width: 35% }
/* ------------------------------ */
/* Table > Body
/* ------------------------------ */
table.spreadsheet-table tbody {}
/* ------------------------------ */
/* Table > Body > Rows
/* ------------------------------ */
table.spreadsheet-table tbody tr {
height: 40px;
border-bottom: 1px solid #dfe4e9;
}
table.spreadsheet-table tbody tr:hover {
background: rgba(0,89,111,0.05);
}
table.spreadsheet-table tbody tr.active {
color: rgb(255,255,255);
background: rgb(0,89,111);
}
/* ------------------------------ */
/* Table > Body > Cells
/* ------------------------------ */
table.spreadsheet-table tbody tr td {
line-height: 2em;
font-size: 0.8em;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
/* ------------------------------ */
/* Mixins ::: Shadows
/* ------------------------------ */
.box-shadow { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); }
.box-shadow-1dp { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); }
.box-shadow-2dp { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); }
.box-shadow-3dp { box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); }