Fix top right settings icon styles

This commit is contained in:
Andrew Kingston 2020-10-22 17:44:17 +01:00
parent a68d0e0038
commit cef81ea3e0
1 changed files with 14 additions and 10 deletions

View File

@ -1,32 +1,36 @@
<script> <script>
import SettingsModal from "./SettingsModal.svelte" import SettingsModal from "./SettingsModal.svelte"
import { SettingsIcon } from "components/common/Icons/"
import { Modal } from "@budibase/bbui" import { Modal } from "@budibase/bbui"
let modal let modal
</script> </script>
<span class="topnavitemright settings" on:click={modal.show}> <div class="topnavitemright settings" on:click={modal.show}>
<SettingsIcon /> <i class="ri-settings-3-line" />
</span> </div>
<Modal bind:this={modal} width="600px"> <Modal bind:this={modal} width="600px">
<SettingsModal /> <SettingsModal />
</Modal> </Modal>
<style> <style>
span:first-letter { i {
text-transform: capitalize; font-size: 18px;
color: var(--grey-7);
} }
.topnavitemright { .topnavitemright {
cursor: pointer; cursor: pointer;
color: var(--grey-7); color: var(--grey-7);
margin: 0 20px 0 0; margin: 0 12px 0 0;
font-weight: 500; font-weight: 500;
font-size: 1rem; font-size: 1rem;
height: 100%;
display: flex; display: flex;
flex: 1; flex-direction: row;
justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; height: 24px;
width: 24px;
}
.topnavitemright:hover i {
color: var(--ink);
} }
</style> </style>