summaryrefslogtreecommitdiffstats
path: root/client/components/main/header.styl
blob: 6decf2dfbd6f5567644ac4c12d70795301780994 (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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
@import 'nib'

#header
  color: white
  transition: background-color 0.4s
  background: #2980B9

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

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

      .fa
        color: inherit

      a:hover, a.is-active
        color: white

    ul
      transition: opacity 0.2s
      margin: 4px 0 0 5px
      overflow: hidden

      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,
    #header-new-board-icon
      flex-shrink: 0

    #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-new-board-icon
      flex-grow: 1
      margin: 6px 5px 0
      width: 12px

  #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

      a.fa, a i.fa
        color: white

      .back-btn
        font-size: 0.9em
        margin-right: 10px


    .wekan-logo
      display: block
      margin: 3px auto 0
      width: 97px
      opacity: 0.6
      transition: opacity 0.15s

      &:hover
        opacity: 0.9

    .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
          display: inline-block
          margin-top: 1px
          margin-right: 10px

      .board-header-btn-close
        float: right

        i.fa
          margin: 0 6px

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

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