Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-08 22:53:24 +00:00
Code Issues Projects Releases Wiki Activity

Update styles

Browse Source
This commit is contained in:
khatabwedaa
2021-01-18 14:40:32 +02:00
parent 42440b987f
commit 5f3821cb6b
11 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/custom-utilities.css
View File

File diff suppressed because one or more lines are too long

4
src/components/ui/Authentication/LoginWithSideImage.vue
View File

@@ -70,7 +70,7 @@
name: 'Login With Side Image',
code: `
<div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div>
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
<div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
@@ -109,7 +109,7 @@
<a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
</div>
<input id="loggingPassword" class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
<input id="loggingPassword" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
</div>
<div class="mt-8">

4
src/components/ui/Buttons/Primary.vue
View File

@@ -1,7 +1,7 @@
<template>
<view-component :name="name" :code="code">
<div class="px-3 py-8 flex items-center justify-center" slot="component">
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
<button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
Primary
</button>
</div>
@@ -14,7 +14,7 @@
return {
name: 'Primary',
code: `
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
<button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
Primary
</button>`
}

2
src/components/ui/Dropdowns/Notification.vue
View File

@@ -59,7 +59,7 @@
</button>
<!-- Dropdown menu -->
<div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20" style="width:20rem;">
<div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20">
<div class="py-2">
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">

8
src/components/ui/Heros/WithImage.vue
View File

@@ -92,8 +92,8 @@
</div>
</div>
<div class="flex items-center justify-center w-full h-72 md:w-1/2">
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
<div class="flex items-center justify-center w-full h-96 md:w-1/2">
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
</div>
</div>
</header>
@@ -199,8 +199,8 @@
</div>
</div>
<div class="flex items-center justify-center w-full h-72 md:w-1/2">
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
<div class="flex items-center justify-center w-full h-96 md:w-1/2">
<img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
</div>
</div>
</header>`,

7
src/components/ui/Heros/WithPattern.vue
View File

File diff suppressed because one or more lines are too long

2
src/components/ui/Navbars/ECommerce.vue
View File

@@ -57,7 +57,7 @@
<!-- Mobile menu button -->
<div class="flex md:hidden">
<button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
</svg>

2
src/components/ui/Navbars/WithAvatar.vue
View File

@@ -77,7 +77,7 @@
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden md:flex md:items-center md:justify-between flex-1">
<div class="md:flex md:items-center md:justify-between flex-1">
<div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>

2
src/components/ui/Navbars/WithCategories.vue
View File

@@ -112,7 +112,7 @@
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden md:flex items-center">
<div class="md:flex items-center">
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
<a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>

2
src/components/ui/Navbars/WithSearch.vue
View File

@@ -61,7 +61,7 @@
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="w-full hidden md:flex md:items-center md:justify-between">
<div class="w-full md:flex md:items-center md:justify-between">
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>

3
tailwind.config.js
View File

@@ -7,9 +7,6 @@ module.exports = {
roboto: ["Roboto"],
},
spacing: {
80: "20rem",
96: "24rem",
112: "28rem",
128: "32rem",
},
},