arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: update design

Browse Source
This commit is contained in:
Benjamin Canac
2021-12-09 15:32:30 +01:00
parent daa5fe1d55
commit 637450495c
5 changed files with 5 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/forms/Checkbox.vue
View File

@@ -68,7 +68,7 @@ export default {
},
baseClass: {
type: String,
default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 u-border-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
default: 'h-4 w-4 text-primary-600 focus:ring-1 focus:ring-primary-500 u-border-gray-300 focus:border-primary-500 dark:focus:border-primary-500 u-bg-white dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
},
customClass: {
type: String,

2
src/components/forms/Radio.vue
View File

@@ -60,7 +60,7 @@ export default {
},
baseClass: {
type: String,
default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 u-border-gray-300 u-bg-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 dark:checked:border-primary-600 focus:ring-1 focus:ring-primary-500 u-border-gray-300 u-bg-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed'
},
customClass: {
type: String,

2
src/components/forms/Toggle.vue
View File

@@ -1,7 +1,7 @@
<template>
<Switch
v-model="enabled"
:class="[enabled ? 'bg-primary-600' : 'u-bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-200']"
:class="[enabled ? 'bg-primary-600' : 'u-bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500']"
>
<span :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']">
<span :class="[enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">

59
src/css/forms.css
View File

@@ -16,45 +16,6 @@ textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0;
padding-top: .5rem;
padding-right: .75rem;
padding-bottom: .5rem;
padding-left: .75rem;
font-size: 1rem;
line-height: 1.5rem
}
[multiple]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
select:focus,
textarea:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty, );
/*!*/
/*!*/
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
border-color: #2563eb
}
input::-moz-placeholder,
@@ -121,10 +82,7 @@ select {
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #2563eb;
background-color: #fff;
border-color: #6b7280;
border-width: 1px
border-width: 1px;
}
[type=checkbox] {
@@ -135,21 +93,6 @@ select {
border-radius: 100%
}
[type=checkbox]:focus,
[type=radio]:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty, );
/*!*/
/*!*/
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
[type=checkbox]:checked,
[type=radio]:checked {
border-color: transparent;

2
src/presets/tailwindui.ts
View File

@@ -59,7 +59,7 @@ const input = {
}
},
appearance: {
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
},
icon: {