git ssb

1
Hypertabs {
2
  position: fixed
3
  top: 0
4
  right: 0
5
  left: 0
6
  bottom: 0
7
8
  display: flex
9
  flex-direction: column
10
11
  height: 100% /* needed to stop scroller blowing out */
12
  overflow: hidden
13
14
  nav {
15
    display: flex
16
    
17
    background: linear-gradient(to bottom, #efefef, #e5e5e5)
18
19
    section.tabs {
20
      flex-grow: 1
21
      display: flex
22
      min-width: 0
23
24
      div.tab {
25
        flex-grow: 1
26
27
        display: flex
28
        align-items: center
29
        justify-content: space-between
30
31
        min-width: 3.5rem
32
        font-size: .9rem
33
        background-color: #efefef
34
        overflow: hidden
35
36
        padding: 0
37
        margin-left: .6rem
38
        border: 1px gainsboro solid
39
        border-bottom: none
40
41
        :hover {
42
          a.close {
43
            visibility: visible
44
          }
45
        }
46
47
        -selected {
48
          color: #222
49
          $backgroundPrimary
50
51
          a.link {
52
            max-width: calc(100% - 2rem)
53
          }
54
          a.close {
55
            visibility: visible
56
          }
57
        }
58
59
        -notify {
60
          background-color: orange;
61
        }
62
63
64
        a {
65
          color: #666
66
67
          :hover {
68
            color: #0088cc
69
            text-decoration: none
70
          }
71
        }
72
73
        a.link {
74
          flex-grow: 1
75
          flex-shrink: 0
76
          overflow-x: hidden
77
          min-width: 0
78
          max-width: calc(100% - 1.4rem)
79
          white-space: nowrap
80
          text-overflow: ellipsis
81
82
          padding: .5rem 0 .5rem .6rem
83
        }
84
85
        a.close {
86
          visibility: hidden
87
          font-family: monospace
88
          line-height: 1rem
89
          width: .9rem
90
          height: .9rem
91
          /* border-radius: 1rem */
92
93
          margin-right: .3rem
94
95
          display: flex
96
          justify-content: center
97
98
          :hover {
99
            background: #aaaaaa
100
            color: #fff
101
            font-weight: 600
102
          }
103
        }
104
105
      }
106
107
    }
108
109
    div.navExtra {
110
      display: flex
111
      align-items: center
112
    }
113
  }
114
115
  section.content {
116
    display: flex
117
118
    height: 100% /* needed to stop making nav weird */
119
120
    div.page {
121
      flex-grow: 1
122
123
      display: flex /*hack to get give Scroller context it needs */
124
    }
125
  }
126
}
127
128