1+ <template >
2+ <div class =" m-window-caption" >
3+ <div class =" m-button m-button--back m-item " >➔</div >
4+ <div class =" m-title m-item " >Metro 4</div >
5+ <div class =" m-button m-button--min m-item m-item--end" >🗕</div >
6+ <div class =" m-button m-button--max m-item m-item--end" >🗖</div >
7+ <div class =" m-button m-button--close m-item m-item--end" >×</div >
8+ </div >
9+ </template >
10+
11+ <script >
12+ export default {
13+ name: ' MTitleBar' ,
14+
15+ props: {
16+ /**
17+ * Caption of group
18+ */
19+ caption: {
20+ type: String ,
21+ default: ' '
22+ },
23+ }
24+ }
25+ </script >
26+
27+ <style scoped lang="postcss">
28+ .m-title__end
29+ height : 100 %
30+ margin-left : auto
31+ display : flex
32+ flex-wrap : nowrap
33+ flex-direction : row
34+
35+ .m-button
36+ flex-basis : 40 px
37+ width : 2 rem
38+ text-align : center
39+ font :
40+ size : 1 rem
41+ weight : normal
42+ outline : none
43+ cursor : default
44+ display : block
45+ color : hsl (0 , 0 % , 100 % )
46+
47+ &:hover
48+ background-color : hsla (0 , 0 % , 100 % , 0.1 )
49+ color : hsl (0 , 0 % , 100 % )
50+
51+ &:before
52+ border-color : hsl (0 , 0 % , 100 % )
53+ color : hsl (0 , 0 % , 100 % )
54+
55+ &:active
56+ background-color : hsla (0 , 0 % , 100 % , 0.3 )
57+ color : hsl (0 , 0 % , 100 % )
58+
59+ & --back
60+ transform : rotate (180 deg )
61+
62+ & --close
63+ &:hover
64+ background-color : hsl (0 , 51.4 % , 54.7 % )
65+
66+ &:active
67+ background-color : hsl (0 , 71.6 % , 57.1 % )
68+
69+ .m-title
70+ font-size : .875 rem
71+ color : white
72+ overflow : hidden
73+ white-space : nowrap
74+ text-overflow : ellipsis
75+ margin-left : calc (.3125 rem * 2 )
76+
77+ .m-window-caption
78+ display : flex
79+ height : 40 px
80+ background : hsl (200.1 , 33.4 % , 35.3 % )
81+
82+ .m-item
83+ cursor : pointer
84+ transition : .2 s
85+ display : flex
86+ justify-content : center
87+ align-items : center
88+
89+ .m-button--min
90+ padding-bottom : .5 rem
91+
92+ .m-item--end
93+ margin-left : auto
94+
95+ .m-item--end ~ .m-item--end
96+ margin-left : unset
97+
98+ /**/
99+ </style >
100+
101+ <docs >
102+ ```vue
103+ <template>
104+ <m-title-bar />
105+ </template>
106+
107+ <script>
108+ export default {
109+ data () {
110+ return {
111+
112+ }
113+ }
114+ }
115+ </script>
116+ ```
117+ </docs >
0 commit comments