juplo.de Git - examples/angular-tour-of-heroes/blob - dashboard/dashboard.component.css

   1 /* DashboardComponent's private CSS styles */
   2 [class*='col-'] {
   3   float: left;
   4   padding-right: 20px;
   5   padding-bottom: 20px;
   6 }
   7 [class*='col-']:last-of-type {
   8   padding-right: 0;
   9 }
  10 a {
  11   text-decoration: none;
  12 }
  13 *, *:after, *:before {
  14   -webkit-box-sizing: border-box;
  15   -moz-box-sizing: border-box;
  16   box-sizing: border-box;
  17 }
  18 h3 {
  19   text-align: center;
  20   margin-bottom: 0;
  21 }
  22 h4 {
  23   position: relative;
  24 }
  25 .grid {
  26   margin: 0;
  27 }
  28 .col-1-4 {
  29   width: 25%;
  30 }
  31 .module {
  32   padding: 20px;
  33   text-align: center;
  34   color: #eee;
  35   max-height: 120px;
  36   min-width: 120px;
  37   background-color: #3f525c;
  38   border-radius: 2px;
  39 }
  40 .module:hover {
  41   background-color: #eee;
  42   cursor: pointer;
  43   color: #607d8b;
  44 }
  45 .grid-pad {
  46   padding: 10px 0;
  47 }
  48 .grid-pad > [class*='col-']:last-of-type {
  49   padding-right: 20px;
  50 }
  51 @media (max-width: 600px) {
  52   .module {
  53     font-size: 10px;
  54     max-height: 75px; }
  55 }
  56 @media (max-width: 1024px) {
  57   .grid {
  58     margin: 0;
  59   }
  60   .module {
  61     min-width: 60px;
  62   }
  63 }