Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-10 15:35:34 +00:00
Code Issues Projects Releases Wiki Activity

Change all color to blue

Browse Source
This commit is contained in:
khatabwedaa
2021-12-05 01:12:01 +02:00
parent c5ae1d52e5
commit 7fba81aa8f
24 changed files with 160 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/ui/Buttons/Group.vue
View File

@@ -3,15 +3,15 @@
<div class="flex items-center justify-center px-3 py-8" slot="component">
<div class="p-1.5 w-full sm:w-auto overflow-hidden bg-white border rounded-lg dark:bg-gray-800 dark:border-gray-700">
<div class="space-y-2 sm:space-y-0 sm:flex sm:-mx-1">
<button class="w-full px-4 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="w-full px-4 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
Upload
</button>
<button class="w-full px-4 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="w-full px-4 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
Drift
</button>
<button class="w-full px-4 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="w-full px-4 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
View
</button>
</div>
@@ -28,15 +28,15 @@
code: `
<div class="p-1.5 w-full sm:w-auto overflow-hidden bg-white border rounded-lg dark:bg-gray-800 dark:border-gray-700">
<div class="space-y-2 sm:space-y-0 sm:flex sm:-mx-1">
<button class="w-full px-4 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="w-full px-4 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
Upload
</button>
<button class="w-full px-4 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="w-full px-4 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
Drift
</button>
<button class="w-full px-4 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="w-full px-4 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
View
</button>
</div>

12
components/ui/Buttons/GroupWithIcons.vue
View File

@@ -3,7 +3,7 @@
<div class="flex items-center justify-center px-3 py-8" slot="component">
<div class="p-1.5 w-full sm:w-auto overflow-hidden bg-white border rounded-lg dark:bg-gray-800 dark:border-gray-700">
<div class="space-y-2 sm:space-y-0 sm:flex sm:-mx-1">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
@@ -12,7 +12,7 @@
</span>
</button>
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
@@ -21,7 +21,7 @@
</span>
</button>
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
@@ -44,7 +44,7 @@
code: `
<div class="p-1.5 w-full sm:w-auto overflow-hidden bg-white border rounded-lg dark:bg-gray-800 dark:border-gray-700">
<div class="space-y-2 sm:space-y-0 sm:flex sm:-mx-1">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
@@ -53,7 +53,7 @@
</span>
</button>
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
@@ -62,7 +62,7 @@
</span>
</button>
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-indigo-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-indigo-500 focus:bg-indigo-500 focus:ring focus:ring-indigo-300 focus:ring-opacity-40">
<button class="flex items-center justify-center w-full px-2 py-1 text-white bg-blue-600 rounded-md focus:outline-none sm:w-auto sm:mx-1 hover:bg-blue-500 focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-40">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />

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

@@ -1,7 +1,7 @@
<template>
<view-component :name="name" :code="code">
<div class="flex items-center justify-center px-3 py-8" slot="component">
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
Primary
</button>
</div>
@@ -14,7 +14,7 @@
return {
name: 'Primary',
code: `
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
Primary
</button>`
}

4
components/ui/Buttons/WithIcon.vue
View File

@@ -1,7 +1,7 @@
<template>
<view-component :name="name" :code="code">
<div class="flex items-center justify-center px-3 py-6" slot="component">
<button class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
<button class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
<svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg>
@@ -17,7 +17,7 @@
return {
name: 'With Icon',
code: `
<button class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
<button class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
<svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg>

8
components/ui/Buttons/WithMenu.vue
View File

@@ -2,12 +2,12 @@
<view-component :name="name" :code="code">
<div class="flex justify-center px-3 pt-6 pb-40" slot="component">
<div class="flex items-center">
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">Download</button>
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">Download</button>
<span class="border border-transparent"></span>
<div class="relative inline-block">
<button @click="menuOpen = !menuOpen" class="relative z-10 block p-2 transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
<button @click="menuOpen = !menuOpen" class="relative z-10 block p-2 transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
@@ -40,13 +40,13 @@
name: 'With Menu',
code: `
<div class="flex items-center">
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">Download</button>
<button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">Download</button>
<span class="border border-transparent"></span>
<div class="relative">
<!-- Menu toggle button -->
<button class="relative z-10 block p-2 transition-colors duration-200 transform bg-indigo-600 rounded-md hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">
<button class="relative z-10 block p-2 transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>