summaryrefslogtreecommitdiffstats
path: root/ui/client/css/components.styl
blob: a4b2f04724d127b37d1ad5e53ea9389ef6fd240c (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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
.main-layout
  margin 30px 30px 30px 330px 

.main-layout-no-nav
  margin 0px 

.site-sidenav
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  //height: 100vh
  height: initial;
  align-self: stretch;
  min-height: 95vh;
  background brand-blue
  trans()
  
.site-sidenav-collapse
  width: 30px
  min-width: 30px
  max-width: 30px
  min-height 100vh
  background brand-blue
  color white
  margin-top -40px
  trans()

.cards
  color #FFF 
  padding 20px
  margin-bottom 30px
  .material-icons
    padding-top 20px
  shadow-level(1)
  trans()
  &:hover
    shadow-level(2)
  &.not-active
    shadow-level (0)
  &.blue
    background-color spark-blue
  &.green
    background-color status-green
  &.grey
    background-color dk-gray1
  &.light-grey
    background-color light-grey
  &.dk-blue
    background-color dk-blue
  &.orange
    background-color status-orange
  &.red
    background-color status-red
  &.white
    background #FFF
    color #000
    &.blue-text
      color spark-blue
  &.green-text
    .fa, .material-icons
      color status-green
    h5
      border-bottom 3px solid status-green
    p.active
      padding-top 3px
      font-size 1.2em  
      color status-green
  &.orange-text
    .fa, .material-icons
      color status-orange
    h5
      border-bottom 3px solid status-orange
    p.active
      padding-top 3px
      font-size 1.2em  
      color status-orange
  &.red-text
    .fa, .material-icons
      color status-red
    h5
      border-bottom 3px solid status-red
    p.active
      padding-top 3px
      font-size 1.2em  
      color status-red 
  h3
    color spark-blue
    font-size 2em
    border-bottom 3px solid spark-blue
  p.text
    color #000
  .fa, .material-icons
    font-size 4em
  &.title
    h4
      margin 0
      text-align center
      color spark-blue

.cards-w250
  @extend .cards
  padding 20px 5px
  max-height 100px 
  width: 250px
  max-width: 250px
  min-width: 250px
  text-align center
  .fa, .material-icons
    font-size 3em
  p 
    margin 0
  span 
    font-size 1.3em
    font-weight bold

.cards-w300
  @extend .cards
  max-height 100px 
  width: 300px
  max-width: 300px
  min-width: 300px;
  p
    font-size 1.1em
    span 
      font-size 1.3em
      font-weight bold
      
.cards-w300-h60
  @extend .cards-w300
  font-size 0.9em
  height 60px
  .fa, .material-icons
    font-size 2em
  &:hover
    shadow-level(1)
  
.cards-flex-col-h120
  @extend .cards 
  height: 120px
  max-height 120px
  min-height 120px
  h5
    padding 0px
    margin 0px
  a
    color spark-blue 
  p
    font-size 1em
    padding 0px
    margin 0px
    span 
      font-size 1.3em
      font-weight bold

.cards-450
  @extend .cards
  width: 520px
  max-width: 520px
  min-width: 520px 
  p
    font-size 1.1em
    span 
      font-size 1.3em
      font-weight bold
  .material-icons
    color spark-blue
    font-size 5em
    padding 40px 30px
      
.cards-flex-col-h500
  @extend .cards
  margin-right 30px
  height 500px
  max-height 500px
  min-height 500px
  p
    font-size 1.1em
    span 
      font-size 1.3em
      font-weight bold
  .material-icons
    color spark-blue
    font-size 8em
    padding 40px
  
.margin-top-40
  margin-top 40px