第八课：自定义样式

这个应用很漂亮了，所以这里没有太多自定义的东西，所以这节课非常的快。但是我们还是要做点啥。
我们先从修改颜色变量开始。
> 修改 theme/variables.scss 里面的命名颜色变量如下：

  1. $colors: (
  2.     primary: #5b91da,
  3.     secondary: #32db64,
  4.     danger: #f53d3d,
  5.     light: #f4f4f4,
  6.     dark: #222,
  7.     favorite: #69BB7B
  8. );

然后给应用的添加一些通用样式。
> 在src/app/app.scss中添加如下样式：

  1. .logo {
  2.     max-height: 39px;
  3.     margin-top: 6px;
  4. }
  6. ion-input, ion-textarea {
  7.     background-color: #F3F3F3;
  8.     border: 1px solid #cecece;
  9.     padding-left: 10px;
  10. }
  12. ion-textarea {
  13.     height: 200px;
  14. }
  16. textarea {
  17.     height: 180px;
  18. }
  20. button {
  21.     border: none !important;
  22. }

这里我们想要做到的主要事情是给我们的输入框添加一些样式。在这之前，输入框都是白色的，他的背景也是，所以你基本看不到输入框中哪里。现在他们的背景色灰色的，以及他有一些小小的额外的样式。我们给textarea添加了一点点样式来扩展他的默认高度，也覆盖了一个目前存在的bug，也就是textarea不会随着用户输入去调整。
现在应用看起来应该是这样的：
预览图
预览图
这是整本书里面最小的课程了，但是，我们完成了！CamperMate现在全部完成了。