Use btn css class

This commit is contained in:
Hubert Van De Walle 2020-08-14 15:56:41 +02:00
parent b90df61020
commit 90f6709885
7 changed files with 41 additions and 12 deletions

View File

@ -55,8 +55,7 @@ class NoteView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
h1("text-2xl underline") { +"Notes" } h1("text-2xl underline") { +"Notes" }
a( a(
href = "/notes/new", href = "/notes/new",
classes = "text-gray-800 bg-green-500 hover:bg-green-700 " + classes = "btn btn-green"
"inline ml-2 text-md font-semibold rounded px-4 py-2"
) { +"New" } ) { +"New" }
} }
if (notes.isNotEmpty()) { if (notes.isNotEmpty()) {

View File

@ -30,8 +30,7 @@ fun FlowContent.submitButton(text: String) {
div("flex items-center mt-6") { div("flex items-center mt-6") {
button( button(
type = submit, type = submit,
classes = "bg-teal-500 hover:bg-teal-600 focus:bg-teal-600" + classes = "btn btn-teal w-full"
" w-full focus:outline-none text-white font-bold py-2 px-4 rounded"
) { +text } ) { +text }
} }
} }

View File

@ -11,17 +11,14 @@ fun BODY.navbar(jwtPayload: JwtPayload?) {
li("inline text-gray-100 ml-2 text-md font-semibold") { li("inline text-gray-100 ml-2 text-md font-semibold") {
a(href = "/notes") { +"Notes" } a(href = "/notes") { +"Notes" }
} }
li( li("inline ml-2") {
"text-gray-800 bg-green-500 hover:bg-green-700" +
" inline ml-2 text-md font-semibold rounded px-4 py-2"
) {
form(classes = "inline", action = "/logout", method = FormMethod.post) { form(classes = "inline", action = "/logout", method = FormMethod.post) {
button(type = ButtonType.submit) { +"Logout" } button(type = ButtonType.submit, classes = "btn btn-green") { +"Logout" }
} }
} }
} else { } else {
li("inline text-gray-100 pl-2 text-md font-semibold") { li("inline pl-2") {
a(href = "/login") { +"Sign In" } a(href = "/login", classes = "btn btn-green") { +"Sign In" }
} }
} }
} }

View File

@ -10,6 +10,7 @@
"cssnano": "^4.1.10", "cssnano": "^4.1.10",
"postcss-cli": "^7.1.1", "postcss-cli": "^7.1.1",
"postcss-hash": "^2.0.0", "postcss-hash": "^2.0.0",
"postcss-nested": "^4.2.3",
"tailwindcss": "^1.5.1" "tailwindcss": "^1.5.1"
} }
} }

View File

@ -1,5 +1,6 @@
module.exports = { module.exports = {
plugins: [ plugins: [
require('postcss-nested'),
require('tailwindcss'), require('tailwindcss'),
require('autoprefixer'), require('autoprefixer'),
require('cssnano')({ require('cssnano')({

View File

@ -2,6 +2,38 @@
@tailwind components; @tailwind components;
.btn {
@apply font-semibold py-2 px-4 rounded;
&:focus {
@apply outline-none shadow-outline;
}
}
.btn-teal {
@apply bg-teal-500 text-white;
&:focus {
@apply bg-teal-600;
}
&:hover {
@apply bg-teal-600;
}
}
.btn-green {
@apply bg-green-500 text-white;
&:focus {
@apply bg-green-600;
}
&:hover {
@apply bg-green-600;
}
}
.nav { .nav {
height: 64px; height: 64px;
} }

View File

@ -1324,7 +1324,7 @@ postcss-minify-selectors@^4.0.2:
postcss "^7.0.0" postcss "^7.0.0"
postcss-selector-parser "^3.0.0" postcss-selector-parser "^3.0.0"
postcss-nested@^4.1.1: postcss-nested@^4.1.1, postcss-nested@^4.2.3:
version "4.2.3" version "4.2.3"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6" resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw== integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==