Skip to content
This repository has been archived by the owner on Sep 19, 2020. It is now read-only.

Commit

Permalink
feat: add auth form styling
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewmcodes committed Sep 19, 2020
1 parent 69a9e2a commit 865fe97
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 14 deletions.
1 change: 1 addition & 0 deletions app/javascript/components/auth-form/auth-form.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import "./auth-form.pcss";
42 changes: 41 additions & 1 deletion app/javascript/components/auth-form/auth-form.pcss
Original file line number Diff line number Diff line change
@@ -1 +1,41 @@
/* TODO */
.auth-form {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;

&--input {
width: 100%;
padding: 12px 0;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 18px;
text-align: center;
outline: none;
transition: border-color 150ms;
box-sizing: border-box;

&:hover,
&:focus {
border: 1px solid #3f94f9;
}
}

&--submit {
width: 100%;
margin-top: 6px;
padding: 12px 0;
background: #3f94f9;
border: 1px solid #3f94f9;
color: white;
font-size: 18px;
outline: none;
transition: opacity 150ms;
cursor: pointer;

&:hover,
&:focus {
opacity: 0.7;
}
}
}
1 change: 1 addition & 0 deletions app/javascript/packs/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,4 @@

import "../init";
import "../components/page/page";
import "components/auth-form/auth-form";
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"name": "evil_martians_modern_rails",
"version": "0.1.0",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
Expand All @@ -9,7 +10,6 @@
"normalize.css": "^8.0.1",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"@arkweid/lefthook": "^0.7.2",
"babel-eslint": "^10.1.0",
Expand All @@ -19,6 +19,8 @@
"eslint-import-resolver-webpack": "^0.12.2",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-prettier": "^3.1.4",
"postcss-inline-svg": "^4.1.0",
"postcss-nested": "^4.1.2",
"prettier": "^2.1.2",
"stylelint": "^13.7.1",
"stylelint-config-prettier": "^8.0.2",
Expand Down
20 changes: 12 additions & 8 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
/* eslint global-require: off, import/no-extraneous-dependencies: off */

module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
require("postcss-import"),
require("postcss-inline-svg"),
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: 'no-2009'
flexbox: "no-2009",
},
stage: 3
})
]
}
stage: 3,
}),
require("postcss-nested"),
],
};
35 changes: 31 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2507,7 +2507,7 @@ css-select-base-adapter@^0.1.1:
resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==

css-select@^2.0.0:
css-select@^2.0.0, css-select@^2.0.2:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
Expand Down Expand Up @@ -2850,12 +2850,20 @@ dom-serializer@0:
domelementtype "^2.0.1"
entities "^2.0.0"

dom-serializer@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
integrity sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==
dependencies:
domelementtype "^1.3.0"
entities "^1.1.1"

domain-browser@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==

domelementtype@1, domelementtype@^1.3.1:
domelementtype@1, domelementtype@^1.3.0, domelementtype@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
Expand Down Expand Up @@ -4068,7 +4076,7 @@ html-tags@^3.1.0:
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==

htmlparser2@^3.10.0:
htmlparser2@^3.10.0, htmlparser2@^3.10.1:
version "3.10.1"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
Expand Down Expand Up @@ -6327,6 +6335,17 @@ postcss-initial@^3.0.0:
lodash.template "^4.5.0"
postcss "^7.0.2"

postcss-inline-svg@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/postcss-inline-svg/-/postcss-inline-svg-4.1.0.tgz#54e9199632242cc181af5b55f0f0691ad1020f95"
integrity sha512-0pYBJyoQ9/sJViYRc1cNOOTM7DYh0/rmASB0TBeRmWkG8YFK2tmgdkfjHkbRma1iFtBFKFHZFsHwRTDZTMKzSQ==
dependencies:
css-select "^2.0.2"
dom-serializer "^0.1.1"
htmlparser2 "^3.10.1"
postcss "^7.0.17"
postcss-value-parser "^4.0.0"

postcss-lab-function@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
Expand Down Expand Up @@ -6475,6 +6494,14 @@ postcss-modules-values@^3.0.0:
icss-utils "^4.0.0"
postcss "^7.0.6"

postcss-nested@^4.1.2:
version "4.2.3"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
dependencies:
postcss "^7.0.32"
postcss-selector-parser "^6.0.2"

postcss-nesting@^7.0.0:
version "7.0.1"
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
Expand Down Expand Up @@ -6771,7 +6798,7 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==

postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
Expand Down

0 comments on commit 865fe97

Please sign in to comment.