app.scss

   1 $primary-color: #3367d6;
   2 $secondary-color: #4285f4;
   3
   4 html { height: 100%; }
   5
   6 body {
   7   font-family: 'Raleway', sans-serif;
   8   background-color: #F5F5F5;
   9   min-height: 100%;
  10
  11   h1, h2, h3, h4, h5, h6 {
  12     font-family: 'Lato', sans-serif;
  13   }
  14
  15   h1 {
  16     font-size: 2rem;
  17   }
  18
  19   h2 {
  20     font-size: 1.7rem;
  21     margin-top: 2rem;
  22     margin-bottom: 1rem;
  23
  24     .fas, .fab, .far {
  25       margin-right: 10px;
  26     }
  27
  28     span {
  29       font-weight: bold;
  30       color: $secondary-color;
  31     }
  32   }
  33
  34   [v-cloak] {
  35     display: none
  36   }
  37
  38   #bighead {
  39     color: #ffffff;
  40
  41     .dashboard-title {
  42       padding: 6px 0 0 80px;
  43     }
  44
  45     .first-line {
  46       height: 100px;
  47       vertical-align: center;
  48       background-color: $primary-color;
  49
  50       h1 {
  51         margin-top: -12px;
  52         font-size: 2rem;
  53       }
  54
  55       .headline {
  56         margin-top: 5px;
  57         font-size: 0.9rem;
  58       }
  59
  60       .container {
  61         height: 80px;
  62         padding: 10px 0;
  63       }
  64
  65       .logo {
  66         float: left;
  67         i {
  68           vertical-align: top;
  69           padding: 8px 15px;
  70           font-size: 50px
  71         }
  72
  73         img {
  74           padding: 10px;
  75           max-height: 70px;
  76           max-width: 70px;
  77         }
  78       }
  79     }
  80     .navbar {
  81       background-color: $secondary-color;
  82
  83       a {
  84         color: #ffffff;
  85         &:hover {
  86           background-color: lighten( $secondary-color, 5% );
  87         }
  88       }
  89     }
  90   }
  91
  92   #main-section {
  93     margin-bottom: 3rem;
  94     padding: 0;
  95
  96     h2 {
  97       border-bottom: 1px dashed #ccc;
  98       padding-bottom: 10px;
  99     }
 100
 101     .title {
 102       font-size: 1.1em;
 103     }
 104
 105     .subtitle {
 106       font-size: .9em;
 107       white-space: nowrap;
 108       overflow: hidden;
 109       text-overflow: ellipsis;
 110     }
 111
 112     .container {
 113       padding: 1.2rem .75rem;
 114     }
 115
 116     .message {
 117       margin-top: 45px;
 118       box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 119
 120       .message-header {
 121         font-weight: bold;
 122       }
 123
 124       .message-body {
 125         border: none;
 126       }
 127     }
 128   }
 129
 130   .media-content {
 131     overflow: inherit;
 132   }
 133
 134   .tag {
 135     color: $secondary-color;
 136     background-color: $secondary-color;
 137     position: absolute;
 138     top: 1rem;
 139     right: -0.2rem;
 140     width: 3px;
 141     overflow: hidden;
 142     transition: all 0.2s ease-out;
 143     padding: 0;
 144   }
 145
 146   .card {
 147     border-radius: 5px;
 148     border: none;
 149     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 150     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 151
 152     a {
 153       outline: none;
 154     }
 155   }
 156
 157   .card:hover {
 158     background-color: #FFFFFF;
 159     transform: translate(0, -3px);
 160
 161     .tag {
 162       width: auto;
 163       color: #ffffff;
 164       padding: 0 0.75em;
 165     }
 166   }
 167
 168   .card-content {
 169     height: 85px;
 170     padding: 1.3rem;
 171   }
 172
 173   .layout-vertical {
 174     .card {
 175       border-radius: 0;
 176     }
 177
 178     .column div:first-of-type .card {
 179       border-radius: 5px 5px 0 0;
 180     }
 181
 182     .column div:last-child .card {
 183       border-radius: 0 0 5px 5px;
 184     }
 185   }
 186
 187   .footer {
 188     position: fixed;
 189     left: 0;
 190     right: 0;
 191     bottom: 0;
 192     padding: 0.5rem;
 193     text-align: left;
 194     background-color: #fafafa;
 195     border-top: 1px solid #F5F5F5;
 196     color: #676767;
 197     font-size: 0.85rem;
 198   }
 199
 200   .search-bar {
 201     position: relative;
 202     display: inline-block;
 203     #search {
 204       border: none;
 205       background-color: lighten( $secondary-color, 6% );
 206       border-radius: 5px;
 207       padding: 2px 12px 2px 30px;
 208       margin: 10px 0;
 209       transition: all 100ms linear;
 210       color: #ffffff;
 211       height: 30px;
 212       width: 100px;
 213
 214
 215       &:focus {
 216         color: #000000;
 217         width: 250px;
 218         background-color: #ffffff;
 219       }
 220     }
 221
 222     .search-label::before {
 223       font-family: 'FontAwesome';
 224       position: absolute;
 225       top: 12px;
 226       left: 8px;
 227       content: "\f002";
 228       width: 20px;
 229       height: 20px;
 230     }
 231
 232       &:focus-within .search-label::before {
 233           color: #4a4a4a;
 234       }
 235   }
 236
 237   .icon-button {
 238     display: inline-block;
 239   }
 240
 241   .offline-message {
 242       text-align: center;
 243       margin: 35px 0;
 244
 245       i {
 246         font-size: 2rem;
 247       }
 248
 249       i.fa-redo-alt {
 250         font-size: 1.3rem;
 251         line-height: 1rem;
 252         vertical-align: middle;
 253         cursor: pointer;
 254         color: #3273dc;
 255       }
 256   }
 257
 258 }