Line data    Source code

       1           1 : <template lang="pug">
       2          35 : BaseCard.x-card.b-focus-highlight(:class='{ selected: isSelected, "border-secondary": isFocused }' tabIndex='-1'
       3          35 :     @focusin.native='isFocused = true'
       4          35 :     @focusout.native='isFocused = false')
       5          35 :   li.p-0(key='info' v-if='showInfo')
       6             :     InfoAlert
       7             :       slot(name='info' v-bind='{ ...$data, showKeyHints }')
       8             :   li.p-0.flex-grow-1(key='body')
       9             :     slot(name='default' v-bind='{ ...$data, showKeyHints }')
      10             :     .x-overlays.m-0.p-0(key='overlays')
      11             :       .x-left-side-bar.d-flex.flex-column.align-items-end
      12             :         slot(name='left-side-bar' v-bind='{ ...$data, showKeyHints }')
      13           0 :       .x-right-side-bar.d-flex.flex-column.align-items-end
      14             :         slot(name='right-side-bar' v-bind='{ ...$data, showKeyHints }')
      15             :         button.x-select-btn.btn.btn-sm.btn-secondary.m-1(type='button' @click='toggleSelected')
      16           0 :           template(v-if='isSelected')
      17             :             kbd.mr-2(v-if='showKeyHints && isFocused') Esc
      18             :             i.fa.fa-compress-alt
      19             :           template(v-else)
      20             :             kbd.mr-2(v-if='showKeyHints && isFocused') Ctrl-Enter
      21             :             i.fa.fa-expand-alt
      22             :         button.x-info-btn.btn.btn-sm.btn-info.m-1(v-if='hasSlot("info")' title='info' @click='showInfo = !showInfo')
      23             :           kbd.mr-2(v-if="showKeyHints && isFocused") Ctrl+H
      24             :           | #[i.fa.fa-question-circle]
      25             :       .x-footer-bar
      26             :         slot(name='footer-bar' v-bind='{ ...$data, showKeyHints }')
      27             :   slot(name='card-footer' v-bind='{ ...$data, showKeyHints }')
      28             : </template>
      29             : <script src='./Card.vue.js' />
      30             : <style lang='scss'>
      31             : .x-card {
      32             :   transition: width 250ms, height 250ms;
      33             :   &.selected {
      34             :     box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
      35             :     position: fixed !important;
      36             :     margin: auto !important;
      37             :     top: 0;
      38             :     bottom: 0;
      39             :     left: 0;
      40             :     right: 0;
      41             :     z-index: 1050;
      42             :     max-height: 95vh !important;
      43             :     max-width: 95vw !important;
      44             :     width: 95vw !important;
      45             :   }
      46             :   > ul {
      47             :     overflow-y: auto;
      48             :     overflow-x: hidden;
      49             :     max-height: 100%;
      50             :     height: 100%;
      51             :     position: relative;
      52             :   }
      53             : 
      54             :   &:hover {
      55             :     .x-left-side-bar, .x-right-side-bar, .x-footer-bar {
      56             :       opacity: 1;
      57             :     }
      58             :   }
      59             : 
      60             :   .x-right-side-bar {
      61             :     position: absolute;
      62             :     left: 5px;
      63             :     right: auto;
      64             :     top: 5px;
      65             : 
      66             :     opacity: 0.30;
      67             :   }
      68             : 
      69             :   .x-right-side-bar {
      70             :     position: absolute;
      71             :     left: auto;
      72             :     right: 5px;
      73             :     top: 5px;
      74             : 
      75             :     opacity: 0.30;
      76             :   }
      77             : 
      78             :   .x-footer-bar {
      79             :     position: absolute;
      80             :     bottom: 5px;
      81             :     left: 5px;
      82             :     right: 5px;
      83             : 
      84             :     opacity: 0.30;
      85             :   }
      86             : }
      87             : 
      88             : 
      89             : </style>