Fix CSS issue with login page due to input classes

This commit is contained in:
Dane Everitt 2018-06-16 12:43:32 -07:00
parent b8b9acd0e6
commit 24bb8da43d
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
9 changed files with 18 additions and 14 deletions

View File

@ -91,6 +91,7 @@ class AssetHashService
{
return '<link href="' . $this->url($resource) . '"
rel="stylesheet preload"
as="style"
crossorigin="anonymous"
integrity="' . $this->integrity($resource) . '"
referrerpolicy="no-referrer">';

View File

@ -57,7 +57,7 @@
"watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
"build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
"build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
"serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js",
"serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --no-clipboard",
"v:serve": "PUBLIC_PATH=http://192.168.50.2:8080 NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --host 192.168.50.2 --no-clipboard"
}
}

View File

@ -3,6 +3,7 @@ import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import VueRouter from 'vue-router';
Vue.config.productionTip = false;
require('./bootstrap');
// Helpers
@ -10,15 +11,13 @@ import { Ziggy } from './helpers/ziggy';
import Locales from './../../../resources/lang/locales';
import { flash } from './mixins/flash';
import { routes } from './routes';
import storeData from './store/index.js';
import store from './store/index.js';
window.events = new Vue;
window.Ziggy = Ziggy;
Vue.config.productionTip = false;
Vue.use(Vuex);
const store = new Vuex.Store(storeData);
const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
Vue.mixin({ methods: { route } });

View File

@ -5,7 +5,7 @@
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input" id="grid-email" type="email" aria-labelledby="grid-email-label" required
<input class="input open-label" id="grid-email" type="email" aria-labelledby="grid-email-label" required
ref="email"
v-bind:class="{ 'has-content': email.length > 0 }"
v-bind:readonly="showSpinner"

View File

@ -5,7 +5,7 @@
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
<input class="input open-label" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
ref="email"
:class="{ 'has-content' : user.email.length > 0 }"
:readonly="showSpinner"
@ -17,7 +17,7 @@
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
<input class="input open-label" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
ref="password"
:class="{ 'has-content' : user.password && user.password.length > 0 }"
:readonly="showSpinner"

View File

@ -5,7 +5,7 @@
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input" id="grid-email" type="email" aria-labelledby="grid-email" required
<input class="input open-label" id="grid-email" type="email" aria-labelledby="grid-email" required
ref="email"
:class="{ 'has-content': email.length > 0 }"
:readonly="showSpinner"
@ -16,7 +16,7 @@
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input" id="grid-password" type="password" aria-labelledby="grid-password" required
<input class="input open-label" id="grid-password" type="password" aria-labelledby="grid-password" required
ref="password"
:class="{ 'has-content' : password.length > 0 }"
:readonly="showSpinner"
@ -28,7 +28,7 @@
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input" id="grid-password-confirmation" type="password" aria-labelledby="grid-password-confirmation" required
<input class="input open-label" id="grid-password-confirmation" type="password" aria-labelledby="grid-password-confirmation" required
:class="{ 'has-content' : passwordConfirmation.length > 0 }"
:readonly="showSpinner"
v-model="passwordConfirmation"

View File

@ -4,7 +4,7 @@
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="input-open">
<input class="input" id="grid-code" type="number" name="token" aria-labelledby="grid-username" required
<input class="input open-label" id="grid-code" type="number" name="token" aria-labelledby="grid-username" required
ref="code"
:class="{ 'has-content' : code.length > 0 }"
v-model="code"

View File

@ -1,6 +1,10 @@
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';
export default {
Vue.use(Vuex);
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
modules: { auth },
};
});

View File

@ -31,7 +31,7 @@
transition: transform 200ms ease-out;
}
.input {
.input:not(.open-label) {
@apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
transition: all 100ms linear;