git ssb

1
/* TODO depricate this carefully (see styles/mcss/hypertabs.mcss) */
2
/* NOTE there are some active styles in here still */
3
4
Hypertabs {
5
  position: fixed
6
  top: 0
7
  right: 0
8
  left: 0
9
  bottom: 0
10
11
  display: flex
12
  flex-direction: column
13
14
  height: 100% /* needed to stop scroller blowing out */
15
  overflow: hidden
16
17
  nav {
18
    display: flex
19
    
20
    background: linear-gradient(to bottom, #efefef, #e5e5e5)
21
22
    section.tabs {
23
      flex-grow: 1
24
      display: flex
25
      min-width: 0
26
27
      div.tab {
28
        flex-grow: 1
29
30
        display: flex
31
        align-items: center
32
        justify-content: space-between
33
34
        min-width: 3.5rem
35
        font-size: .9rem
36
        background-color: #efefef
37
        overflow: hidden
38
39
        padding: 0
40
        margin-left: .6rem
41
        border: 1px gainsboro solid
42
        border-bottom: none
43
44
        -selected {
45
          color: #222
46
          $backgroundPrimary
47
48
          a.link {
49
            max-width: calc(100% - 2rem)
50
          }
51
        }
52
53
        -notify {
54
          background-color: orange;
55
        }
56
57
58
        a {
59
          color: #666
60
61
          :hover {
62
            color: #0088cc
63
            text-decoration: none
64
          }
65
        }
66
67
        a.link {
68
          flex-grow: 1
69
          flex-shrink: 0
70
          overflow-x: hidden
71
          min-width: 0
72
          max-width: calc(100% - 1.4rem)
73
          white-space: nowrap
74
          text-overflow: ellipsis
75
76
          padding: .5rem 0 .5rem .6rem
77
        }
78
79
      }
80
81
    }
82
83
    div.navExtra {
84
      z-index: 1000
85
      padding-bottom: calc(var(--app-border-width)/2)
86
87
      display: grid
88
      grid-auto-flow: column
89
      grid-gap: .5rem
90
      align-items: center
91
92
      margin: 0 .5rem
93
    }
94
  }
95
96
  section.content {
97
    display: flex
98
99
    height: 100% /* needed to stop making nav weird */
100
101
    div.page {
102
      flex-grow: 1
103
104
      display: flex /*hack to get give Scroller context it needs */
105
    }
106
  }
107
}
108
109