Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 1 | <template> |
Yoshie Muranaka | c11d389 | 2020-02-19 08:07:40 -0800 | [diff] [blame] | 2 | <div class="page-section"> |
3 | <h2 v-if="sectionTitle">{{ sectionTitle }}</h2> | ||||
Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 4 | <slot /> |
Yoshie Muranaka | c11d389 | 2020-02-19 08:07:40 -0800 | [diff] [blame] | 5 | </div> |
Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 6 | </template> |
7 | |||||
8 | <script> | ||||
9 | export default { | ||||
10 | name: 'PageSection', | ||||
Derick Montague | 09e45cd | 2020-01-23 15:45:57 -0600 | [diff] [blame] | 11 | props: { |
12 | sectionTitle: { | ||||
13 | type: String, | ||||
Yoshie Muranaka | c11d389 | 2020-02-19 08:07:40 -0800 | [diff] [blame] | 14 | default: '' |
Derick Montague | 09e45cd | 2020-01-23 15:45:57 -0600 | [diff] [blame] | 15 | } |
16 | } | ||||
Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 17 | }; |
18 | </script> | ||||
19 | |||||
20 | <style lang="scss" scoped> | ||||
Derick Montague | 4086572 | 2020-04-13 17:01:19 -0500 | [diff] [blame] | 21 | @import 'src/assets/styles/helpers'; |
22 | |||||
Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 23 | .page-section { |
24 | margin-bottom: $spacer * 2; | ||||
25 | } | ||||
Yoshie Muranaka | c11d389 | 2020-02-19 08:07:40 -0800 | [diff] [blame] | 26 | |
Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 27 | h2 { |
Dixsie Wolmers | be88c61 | 2020-07-20 13:29:54 -0500 | [diff] [blame^] | 28 | @include font-size($h3-font-size); |
Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 29 | margin-bottom: $spacer; |
30 | &::after { | ||||
31 | content: ''; | ||||
32 | display: block; | ||||
33 | width: 100px; | ||||
Yoshie Muranaka | 01da818 | 2020-07-08 15:46:43 -0700 | [diff] [blame] | 34 | border: 1px solid gray('300'); |
Yoshie Muranaka | 8d12910 | 2019-12-19 09:51:55 -0800 | [diff] [blame] | 35 | margin-top: 10px; |
36 | } | ||||
37 | } | ||||
38 | </style> |