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   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: 3rem;
  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     .column {
 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.3rem;
 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
 153   .card:hover {
 154     background-color: #FFFFFF;
 155     transform: translate(0, -3px);
 156
 157     .tag {
 158       width: auto;
 159       color: #ffffff;
 160       padding: 0 0.75em;
 161     }
 162   }
 163
 164   .card-content {
 165     height: 85px;
 166     padding: 1.3rem;
 167   }
 168
 169   .footer {
 170     position: fixed;
 171     left: 0;
 172     right: 0;
 173     bottom: 0;
 174     padding: 1rem 0.5rem;
 175     text-align: left;
 176     background-color: #fafafa;
 177     border-top: 1px solid #F5F5F5;
 178   }
 179
 180   .search-bar {
 181     position: relative;
 182     #search {
 183       border: none;
 184       background-color: lighten( $secondary-color, 6% );
 185       border-radius: 5px;
 186       padding: 2px 12px 2px 30px;
 187       margin: 10px 0;
 188       transition: all 100ms linear;
 189       color: #ffffff;
 190       height: 30px;
 191       width: 100px;
 192
 193
 194       &:focus {
 195         color: #000000;
 196         width: 250px;
 197         background-color: #ffffff;
 198       }
 199     }
 200
 201     .search-label::before {
 202       font-family: 'FontAwesome';
 203       position: absolute;
 204       top: 12px;
 205       left: 8px;
 206       content: "\f002";
 207       width: 20px;
 208       height: 20px;
 209     }
 210
 211       &:focus-within .search-label::before {
 212           color: #4a4a4a;
 213       }
 214   }
 215
 216 }