davidl/ploi-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Dennis
2020-11-28 09:13:42 +01:00
parent 8286e7f9af
commit bf55092b3a
8 changed files with 314 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/BreadcrumbsItem.vue
View File

@@ -1,5 +1,5 @@
<template>
<inertia-link :href="to" class="font-medium text-body text-medium-emphasis">
<inertia-link :href="to" class="font-medium text-body text-breadcrumbs">
<slot></slot>
</inertia-link>
</template>

8
resources/js/components/TopBar.vue
View File

@@ -3,7 +3,7 @@
<div class="w-full px-4 sm:px-8 mx-auto max-w-top-bar-container">
<div class="flex flex-col">
<nav
class="flex flex-col items-center justify-between py-4 space-y-4 md:space-y-0 md:flex-row"
class="flex flex-col items-center justify-between py-4 space-y-4 md:space-y-0 md:flex-row text-top-bar"
>
<div class="flex items-center space-x-5">
<img class="h-top-bar-logo" v-if="$page.props.settings.logo" :src="$page.props.settings.logo" />
@@ -13,13 +13,13 @@
<ul class="flex items-center space-x-4">
<li :aria-label="__('Search')" data-balloon-blunt data-balloon-pos="down">
<IconButton @click="triggerSearch">
<IconSearch/>
<IconSearch class="text-top-bar"/>
</IconButton>
</li>
<li :aria-label="themeMode === 'light' ? __('Enable dark mode') : __('Enable light mode')" data-balloon-blunt data-balloon-pos="down">
<IconButton @click="toggleTheme">
<IconMoon v-if="themeMode === 'light'"/>
<IconSun v-if="themeMode === 'dark'"/>
<IconMoon class="text-top-bar" v-if="themeMode === 'light'"/>
<IconSun class="text-top-bar" v-if="themeMode === 'dark'"/>
</IconButton>
</li>
<li>

9
resources/sass/variables.scss vendored
View File

@@ -1,7 +1,7 @@
:root {
--font-sans-serif: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--color-white: #ffff;
--color-white: #fff;
--color-gray-1: #f7f7f7;
--color-gray-2: #e6e6e6;
--color-gray-3: #cacaca;
@@ -41,7 +41,10 @@
--top-bar-container: 64rem;
--top-bar-logo-height: 3.5rem;
--top-bar-background-color: var(--color-surface-1)
--top-bar-background-color: var(--color-surface-1);
--top-bar-text-color: var(--color-text-medium-emphasis);
--breadcrumbs-text-color: var(--color-text-medium-emphasis);
}
.theme--dark {