diff options
Diffstat (limited to 'src/styles/info-bar.scss')
-rw-r--r-- | src/styles/info-bar.scss | 49 |
1 files changed, 17 insertions, 32 deletions
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss index b6d1e84e2..fb4917358 100644 --- a/src/styles/info-bar.scss +++ b/src/styles/info-bar.scss | |||
@@ -1,83 +1,68 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .info-bar { | 3 | .info-bar { |
4 | width: 100%; | 4 | align-items: center; |
5 | height: 50px; | ||
6 | background: $theme-brand-primary; | 5 | background: $theme-brand-primary; |
6 | box-shadow: 0 0 8px rgba(black, .2); | ||
7 | display: flex; | 7 | display: flex; |
8 | align-items: center; | 8 | height: 50px; |
9 | justify-content: center; | 9 | justify-content: center; |
10 | padding: 0 20px; | 10 | padding: 0 20px; |
11 | position: relative; | 11 | position: relative; |
12 | // bottom: 0; | 12 | width: 100%; |
13 | z-index: 100; | 13 | z-index: 100; |
14 | box-shadow: 0 0 8px rgba(black, 0.2); | ||
15 | 14 | ||
16 | .info-bar__content { | 15 | .info-bar__content { |
17 | height: auto; | 16 | height: auto; |
18 | 17 | ||
19 | .mdi { | 18 | .mdi { margin-right: 5px; } |
20 | margin-right: 5px; | ||
21 | } | ||
22 | } | 19 | } |
23 | 20 | ||
24 | .info-bar__close { | 21 | .info-bar__close { |
22 | color: #FFF; | ||
25 | position: absolute; | 23 | position: absolute; |
26 | right: 10px; | 24 | right: 10px; |
27 | color: #FFF; | ||
28 | } | 25 | } |
29 | 26 | ||
30 | .info-bar__cta { | 27 | .info-bar__cta { |
31 | color: #FFF; | ||
32 | padding: 3px 8px; | ||
33 | border-radius: $theme-border-radius-small; | ||
34 | border-color: #FFF; | 28 | border-color: #FFF; |
35 | border-width: 2px; | 29 | border-radius: $theme-border-radius-small; |
36 | border-style: solid; | 30 | border-style: solid; |
31 | border-width: 2px; | ||
32 | color: #FFF; | ||
37 | margin-left: 15px; | 33 | margin-left: 15px; |
34 | padding: 3px 8px; | ||
38 | 35 | ||
39 | .loader { | 36 | .loader { |
37 | display: inline-block; | ||
38 | height: 12px; | ||
39 | margin-right: 5px; | ||
40 | position: relative; | 40 | position: relative; |
41 | width: 20px; | 41 | width: 20px; |
42 | height: 12px; | ||
43 | z-index: 9999; | 42 | z-index: 9999; |
44 | display: inline-block; | ||
45 | margin-right: 5px; | ||
46 | } | 43 | } |
47 | } | 44 | } |
48 | 45 | ||
49 | a { | 46 | &.info-bar--bottom { order: 10; } |
50 | // text-decoration: underline; | ||
51 | } | ||
52 | |||
53 | &.info-bar--bottom { | ||
54 | order: 10; | ||
55 | } | ||
56 | 47 | ||
57 | &.info-bar--primary { | 48 | &.info-bar--primary { |
58 | background: $theme-brand-primary; | 49 | background: $theme-brand-primary; |
59 | color: #FFF; | 50 | color: #FFF; |
60 | 51 | ||
61 | a { | 52 | a { color: #FFF; } |
62 | color: #FFF; | ||
63 | } | ||
64 | } | 53 | } |
65 | 54 | ||
66 | &.info-bar--warning { | 55 | &.info-bar--warning { |
67 | background: $theme-brand-warning; | 56 | background: $theme-brand-warning; |
68 | color: #FFF; | 57 | color: #FFF; |
69 | 58 | ||
70 | a { | 59 | a { color: #FFF; } |
71 | color: #FFF; | ||
72 | } | ||
73 | } | 60 | } |
74 | 61 | ||
75 | &.info-bar--danger { | 62 | &.info-bar--danger { |
76 | background: $theme-brand-danger; | 63 | background: $theme-brand-danger; |
77 | color: #FFF; | 64 | color: #FFF; |
78 | 65 | ||
79 | a { | 66 | a { color: #FFF; } |
80 | color: #FFF; | ||
81 | } | ||
82 | } | 67 | } |
83 | } | 68 | } |