juplo.de Git - examples/angular-tutorial/blob - src/styles.css

   1 /* Global Styles */
   2
   3 * {
   4   font-family: 'Roboto', Arial, sans-serif;
   5   color: #616161;
   6   box-sizing: border-box;
   7   -webkit-font-smoothing: antialiased;
   8   -moz-osx-font-smoothing: grayscale;
   9 }
  10
  11 body {
  12   margin: 0;
  13 }
  14
  15 .container {
  16   display: flex;
  17   flex-direction: row;
  18 }
  19
  20 router-outlet + *  {
  21   padding: 0 16px;
  22 }
  23
  24 /* Text */
  25
  26 h1 {
  27   font-size: 32px;
  28 }
  29
  30 h2 {
  31   font-size: 20px;
  32 }
  33
  34 h1, h2 {
  35   font-weight: lighter;
  36 }
  37
  38 p {
  39   font-size: 14px;
  40 }
  41
  42 /* Hyperlink */
  43
  44 a {
  45   cursor: pointer;
  46   color: #1976d2;
  47   text-decoration: none;
  48 }
  49
  50 a:hover {
  51   opacity: 0.8;
  52 }
  53
  54 /* Input */
  55
  56 input {
  57   font-size: 14px;
  58   border-radius: 2px;
  59   padding: 8px;
  60   margin-bottom: 16px;
  61   border: 1px solid #BDBDBD;
  62 }
  63
  64 label {
  65   font-size: 12px;
  66   font-weight: bold;
  67   margin-bottom: 4px;
  68   display: block;
  69   text-transform: uppercase;
  70 }
  71
  72 /* Button */
  73 .button, button {
  74   display: inline-flex;
  75   align-items: center;
  76   padding: 8px 16px;
  77   border-radius: 2px;
  78   font-size: 14px;
  79   cursor: pointer;
  80   background-color: #1976d2;
  81   color: white;
  82   border: none;
  83 }
  84
  85 .button:hover, button:hover {
  86   opacity: 0.8;
  87   font-weight: normal;
  88 }
  89
  90 .button:disabled, button:disabled {
  91   opacity: 0.5;
  92   cursor: auto;
  93 }
  94
  95 /* Fancy Button */
  96
  97 .fancy-button {
  98   background-color: white;
  99   color: #1976d2;
 100 }
 101
 102 .fancy-button i.material-icons {
 103   color: #1976d2;
 104   padding-right: 4px;
 105 }
 106
 107 /* Top Bar */
 108
 109 app-top-bar {
 110   width: 100%;
 111   height: 68px;
 112   background-color: #1976d2;
 113   padding: 16px;
 114   display: flex;
 115   flex-direction: row;
 116   justify-content: space-between;
 117   align-items: center;
 118 }
 119
 120 app-top-bar h1 {
 121   color: white;
 122   margin: 0;
 123 }
 124
 125 /* Checkout Cart, Shipping Prices */
 126
 127 .cart-item, .shipping-item {
 128   width: 100%;
 129   min-width: 400px;
 130   max-width: 450px;
 131   display: flex;
 132   flex-direction: row;
 133   justify-content: space-between;
 134   padding: 16px 32px;
 135   margin-bottom: 8px;
 136   border-radius: 2px;
 137   background-color: #EEEEEE;
 138 }
 139
 140
 141 /*
 142 Copyright Google LLC. All Rights Reserved.
 143 Use of this source code is governed by an MIT-style license that
 144 can be found in the LICENSE file at http://angular.io/license
 145 */