### Resources
- [material-components-web](https://material.io/develop/web/components/)
- [TS handbook](https://typescript.bootcss.com/)
- [SASS hankbook](https://www.sasscss.com/docs/)
- [TS 注释规范](https://juejin.im/post/5ce24f8ae51d45106477bd45)
- [9012年学 TS](https://juejin.im/post/5c68d99bf265da2db4141418)
- [WP 常用插件和 loader](https://juejin.im/post/5c7f28056fb9a049bb7d169a)

### MDC 
#### 输入框样式 

```scss
.commit-button {
  @include mdc-button-ink-color($orange);
  @include mdc-states($orange);
}

.user-info {
  @include mdc-text-field-focused-outline-color($orange);
  @include mdc-text-field-hover-outline-color($orange);
  @include mdc-text-field-outline-color($black);
  @include mdc-text-field-caret-color($orange);
  @include mdc-text-field-label-color($black);
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: orange;
}
.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-floating-label::after,
.mdc-text-field--focused .mdc-text-field__input:required ~ .mdc-notched-outline .mdc-floating-label::after {
  color: orange;
}
```

```html
<div class="user-info mdc-text-field mdc-text-field--outlined">
  <input type="text" id="tf-outlined" class="mdc-text-field__input">
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</div>

<button class="commit-button mdc-button mdc-button--outlined">
  <span class="mdc-button__label">BuiBuiBui~</span>
</button>
```

### Linux
Ctrl-Z -> `jobs` -> `fg 1`