diff options
-rw-r--r-- | src/components/_sila/AppHeader/AppHeader.vue | 24 |
1 files changed, 19 insertions, 5 deletions
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue index 164168a3..64e9d1e5 100644 --- a/src/components/_sila/AppHeader/AppHeader.vue +++ b/src/components/_sila/AppHeader/AppHeader.vue @@ -50,9 +50,11 @@ </b-navbar-nav> <!-- Right aligned nav items --> <b-navbar-nav class="ml-auto helper-menu"> - <span v-if="liveClock" class="liveClock"> - {{ liveClock }} - </span> + <div class="display--flex align-items--center clock-container"> + <span v-if="liveClock" class="liveClock"> + {{ liveClock }} + </span> + </div> <div class="display--flex align-items--center"> <b-nav-item to="/logs/event-logs" @@ -85,7 +87,7 @@ </li> </div> <!-- Using LI elements instead of b-nav-item to support semantic button elements --> - <div class="display--flex align-items--center"> + <div class="display--flex align-items--center order-2"> <li class="nav-item header-nav notifications"> <b-dropdown id="app-notifications" variant="link" right> <template #button-content> @@ -617,6 +619,18 @@ export default { } .liveClock { padding: 0 8px; - color: lightgoldenrodyellow; + color: $white; +} + +.clock-icon { + width: 15px; + height: 15px; +} +.clock-container { + width: 90px; + padding-left: 5px; + @media (max-width: 369px) { + order: 1; + } } </style> |