Update colour scale
Match new defaults in Tailwind 1.0.
This commit is contained in:
parent
5853da96c3
commit
5d1380de0d
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
|
||||
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
|
||||
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-3 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
|
||||
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-300 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -16,13 +16,13 @@ export default {
|
|||
computed: {
|
||||
classes: function () {
|
||||
return {
|
||||
status: 'border-green-2 text-green-4 bg-green-1',
|
||||
status: 'border-green-200 text-green-400 bg-green-100',
|
||||
}[this.type]
|
||||
},
|
||||
|
||||
wrapperClasses: function () {
|
||||
return {
|
||||
status: 'bg-green-3',
|
||||
status: 'bg-green-300',
|
||||
}[this.type]
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full p-3 block sm:hidden bg-blue-1 text-sm text-grey-6 text-left focus:outline-none"
|
||||
class="w-full p-3 block sm:hidden bg-blue-100 text-sm text-grey-600 text-left focus:outline-none"
|
||||
@click="open = !open"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
>
|
||||
<a
|
||||
class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
|
||||
:class="[ index == activeTab ? 'bg-white' : 'bg-blue-1 hover:bg-white' ]"
|
||||
:class="[ index == activeTab ? 'bg-white' : 'bg-blue-100 hover:bg-white' ]"
|
||||
:href="link.href"
|
||||
>
|
||||
{{ link.title }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="bg-grey-1 p-4 mb-4">
|
||||
<div class="bg-grey-100 p-4 mb-4">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="bg-blue-3">
|
||||
<div class="bg-blue-300">
|
||||
<div class="py-4 text-white">
|
||||
<div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
|
||||
<div class="flex flex-col-reverse">
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
<drupal-message type="status">
|
||||
<p>
|
||||
A Bartik clone, built with
|
||||
<a href="https://vuejs.org" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Vue.js</a>
|
||||
and <a href="https://tailwindcss.com" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Tailwind CSS</a>.
|
||||
<a href="https://vuejs.org" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Vue.js</a>
|
||||
and <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a>.
|
||||
</p>
|
||||
</drupal-message>
|
||||
|
||||
|
|
@ -48,13 +48,13 @@
|
|||
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
|
||||
<sidebar-block>
|
||||
<h2 class="font-serif font-normal text-base text-grey-6 border-b border-solid border-grey-3 mb-3">Search</h2>
|
||||
<h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300 mb-3">Search</h2>
|
||||
|
||||
<div>
|
||||
<form action="#" class="flex">
|
||||
<input type="text" class="border border-solid border-grey-4 p-2 w-full xl:w-auto">
|
||||
<input type="text" class="border border-solid border-grey-400 py-1 px-2 w-full xl:w-auto">
|
||||
|
||||
<button type="submit" class="bg-grey-2 px-3 rounded-full border-b border-solid border-grey-5 ml-2 flex-none">
|
||||
<button type="submit" class="bg-grey-200 px-3 rounded-full border-b border-solid border-grey-500 ml-2 flex-none">
|
||||
<img src="img/loupe.svg" class="block">
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
<div id="footer" class="text-xs text-white">
|
||||
<div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
|
||||
<div class="border-t border-solid border-grey-6 pt-6 -mb-6">
|
||||
<div class="border-t border-solid border-grey-600 pt-6 -mb-6">
|
||||
<div class="mb-6">
|
||||
<p><a href="#0">Contact</a></p>
|
||||
</div>
|
||||
|
|
@ -116,11 +116,11 @@ export default {
|
|||
}
|
||||
|
||||
#main a {
|
||||
@apply text-blue-3 no-underline border-b border-blue-1 border-dotted;
|
||||
@apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply text-blue-1 border-solid
|
||||
@apply text-blue-100 border-solid
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,23 +6,23 @@ module.exports = {
|
|||
60: 'rgba(0,0,0,.6)',
|
||||
},
|
||||
blue: {
|
||||
1: '#bcdefa',
|
||||
2: '#3490dc',
|
||||
3: '#2779bd',
|
||||
100: '#bcdefa',
|
||||
200: '#3490dc',
|
||||
300: '#2779bd',
|
||||
},
|
||||
green: {
|
||||
1: '#f3faee',
|
||||
2: '#cde2c2',
|
||||
3: '#77b159',
|
||||
4: '#325e1c',
|
||||
100: '#f3faee',
|
||||
200: '#cde2c2',
|
||||
300: '#77b159',
|
||||
400: '#325e1c',
|
||||
},
|
||||
grey: {
|
||||
1: '#f6f6f2',
|
||||
2: '#f0f0f0',
|
||||
3: '#dae1e7',
|
||||
4: '#b8c2cc',
|
||||
5: '#8795a1',
|
||||
6: '#3d4852',
|
||||
100: '#f6f6f2',
|
||||
200: '#f0f0f0',
|
||||
300: '#dae1e7',
|
||||
400: '#b8c2cc',
|
||||
500: '#8795a1',
|
||||
600: '#3d4852',
|
||||
},
|
||||
transparent: 'transparent',
|
||||
white: '#fff',
|
||||
|
|
|
|||
Reference in a new issue