File: style/css/sticky-footer-navbar.css

Recommend this page to a friend!
  Classes of Ali YILMAZ  >  PHP PhoneBook  >  style/css/sticky-footer-navbar.css  >  Download  
File: style/css/sticky-footer-navbar.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP PhoneBook
Phone book manager application based on MVC
Author: By
Last change:
Date: 9 months ago
Size: 2,169 bytes
 

Contents

Class file image Download
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}
.page-header{
  margin-top: 10px;
}
.page-header > h1{
  font-size: 26px;
  font-weight: bold;
}
.lead{
  font-size: 16px;
}
.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}


/*
	Max width before this PARTICULAR table gets nasty. This query
	will take effect for any screen smaller than 760px and also
	iPads specifically.
	*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin: 0 0 1rem 0;
  }

  tr:nth-child(odd) {
    background-color: #eff3f1;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    padding-left: 20%;

  }

  td:before {
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
  }
  /*
    Label the data. You could also use a data-* attribute and
    content for this. That way "bloats" the HTML, this way means
    you need to keep HTML and CSS in sync. Lea Verou has a
    clever way to handle with text-shadow.
  */
  td:before { content: attr(data-label); }
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  border-top: none;
  padding: 10px;
}
.bg-danger{

  padding: 15px;
}

.refresh-list{
 margin-top: 25px;
}
For more information send a message to info at phpclasses dot org.