summaryrefslogtreecommitdiffstats
path: root/client/components/main/header.styl
blob: eaf391f73406b662b5bd1272015ba4d0819dde99 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
@import 'nib'

#header
  color: white
  transition: background-color 0.4s
  background: #27AE60

  #header-quick-access
    background-color: rgba(0, 0, 0, 0.2)
    padding: 0px 10px
    height: 28px
    font-size: 12px
    display: flex

    #header-user-bar
    ul li
      color: darken(white, 17%)

      a, .fa
        color: inherit
        text-decoration: none

        &:hover
          color: white

    ul
      flex: 1
      transition: opacity 0.2s
      margin: 4px 0 0 5px

      li
        display: block
        float: left
        width: auto
        color: darken(white, 15%)
        padding: 2px 5px 0

        &.current
          color: darken(white, 5%)

        &:first-child .fa-home
          margin-right: 5px

        a.js-create-board
          margin-left: 5px

    #header-user-bar
      margin: 2px 0

      .header-user-bar-avatar
        float: left

        .member
          width: 24px
          height: @width
          margin: 0
          margin-top: 1px

      .header-user-bar-name
        margin: 4px 8px 0 0
        float: left

        i.fa-chevron-down
          margin-right: 4px

  #header-main-bar
    height: 28px * 1.618034 - 6px
    padding: 7px 10px 0

    h1
      font-size: 20px
      line-height: 1.7em
      padding: 0 10px
      margin: 0
      margin-right: 10px
      float: left
      border-radius: 3px

      &.is-clickable
        cursor: pointer

    .board-header-btns
      display: block
      margin-top: 3px
      width: auto

      // XXX Use a flexbox instead of floats?
      &.left
        float: left

      &.right
        float: right

    .board-header-btn
      border-radius: 3px
      color: darken(white, 5%)
      padding: 0
      height: 28px
      font-size: 13px
      float: left
      overflow: hidden
      line-height: @height
      margin: 0 2px

      i.fa
        float: left
        display: block
        line-height: 28px
        color: darken(white, 5%)
        margin: 0 10px

        + span
          margin-right: 10px

      .board-header-btn-close
        float: right

        i.fa
          margin: 0 6px

    .board-header-btn,
    h1.is-clickable
      &.is-active,
      &:hover
        background: rgba(0, 0, 0, .15)

    .separator
      margin: 2px 4px
      border-left: 1px solid rgba(255, 255, 255, .3)
      height: 24px
      float: left